/* Power Underwriter — "Income Calculation Bottleneck" post.
   New component styles, layered on top of article.css. */

/* ---------------- borrower-type complexity explorer ---------------- */
.bx { display: flex; flex-direction: column; gap: 22px; }
.bx-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; background: var(--puw-surface-3); border-radius: var(--radius-full); }
.bx-seg button { border: none; background: none; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--puw-teal-600); padding: 10px 8px; border-radius: var(--radius-full); transition: all .25s; line-height: 1.15; }
.bx-seg button.on { background: #fff; color: var(--puw-teal-900); box-shadow: var(--shadow-card); }
.bx-seg button:not(.on):hover { color: var(--puw-teal-900); }

.bx-body { display: grid; grid-template-columns: 1fr 1px 1.25fr; gap: 28px; align-items: start; }
.bx-divider { background: var(--puw-border-light); align-self: stretch; }

.bx-left .bx-eyebrow { font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--puw-coral-600); }
.bx-left h4 { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--puw-teal-900); margin: 7px 0 0; letter-spacing: -0.01em; }
.bx-left .bx-note { font-size: 14.5px; line-height: 1.6; color: var(--puw-teal-600); margin: 12px 0 0; }
.bx-docs { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 0; }
.bx-doc { font-family: var(--font-meta); font-size: 11.5px; font-weight: 600; color: var(--puw-teal-700); background: var(--puw-surface-2); border: 1px solid var(--puw-border-light); border-radius: var(--radius-full); padding: 6px 12px; }

.bx-metric { margin: 0 0 18px; }
.bx-metric:last-child { margin-bottom: 0; }
.bx-mhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.bx-mlabel { font-family: var(--font-meta); font-size: 12.5px; font-weight: 600; color: var(--puw-teal-900); display: inline-flex; align-items: center; gap: 8px; }
.bx-mlabel .swatch { width: 9px; height: 9px; border-radius: 2px; }
.bx-mlabel .swatch.coral { background: var(--puw-coral-500); }
.bx-mlabel .swatch.teal { background: var(--puw-teal-mid); }
.bx-mval { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--puw-teal-900); }
.bx-mval .unit { font-size: 12.5px; font-family: var(--font-meta); color: var(--puw-slate-400); margin-left: 3px; }
.bx-track { height: 22px; background: var(--puw-surface-3); border-radius: var(--radius-sm); overflow: hidden; }
.bx-fill { height: 100%; width: 0; border-radius: var(--radius-sm); transition: width .8s cubic-bezier(.2,.8,.2,1); }
.bx-fill.coral { background: linear-gradient(90deg, var(--puw-coral-500), var(--puw-coral-600)); }
.bx-fill.teal { background: linear-gradient(90deg, var(--puw-teal-mid), #1c6e79); }

.bx-rework { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--puw-border-light); }
.bx-rw-item { flex: 1; }
.bx-rw-k { font-family: var(--font-meta); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--puw-slate-400); }
.bx-rw-v { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 32px); line-height: 1.05; letter-spacing: -0.02em; margin-top: 4px; }
.bx-rw-v.manual { color: var(--puw-coral-600); }
.bx-rw-v.ai { color: var(--puw-teal-mid); }
.bx-rw-sub { font-family: var(--font-meta); font-size: 11.5px; color: var(--puw-slate-400); margin-top: 3px; }
.bx-rw-arrow { color: var(--puw-slate-300); flex: 0 0 auto; }
.bx-rw-arrow svg { width: 24px; height: 24px; display: block; }

@media (max-width: 720px) {
  .bx-seg { grid-template-columns: 1fr 1fr; }
  .bx-body { grid-template-columns: 1fr; gap: 22px; }
  .bx-divider { display: none; }
  .bx-left { padding-bottom: 22px; border-bottom: 1px solid var(--puw-border-light); }
}

/* ---------------- contradiction overlay ---------------- */
.cx-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cx-top .t { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--puw-teal-900); }
.cx-top .s { font-family: var(--font-meta); font-size: 12px; color: var(--puw-slate-400); margin-top: 3px; }
.cx-btn { font-family: var(--font-action); font-weight: 600; font-size: 13.5px; border: 1px solid var(--puw-border-light); background: #fff; color: var(--puw-teal-900); cursor: pointer; border-radius: var(--radius-full); padding: 10px 18px; display: inline-flex; align-items: center; gap: 9px; transition: all .22s; }
.cx-btn svg { width: 16px; height: 16px; }
.cx-btn:hover { border-color: var(--puw-coral-500); color: var(--puw-coral-600); }
.cx-btn.active { background: var(--puw-coral-600); color: #fff; border-color: var(--puw-coral-600); box-shadow: 0 8px 22px rgba(255,54,33,0.22); }
.cx-btn.active:hover { background: #E62A17; color: #fff; }

.cx-docs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cx-doc { border: 1px solid var(--puw-border-light); border-radius: var(--radius-lg); overflow: hidden; background: var(--puw-surface-1); }
.cx-doc-h { display: flex; align-items: center; gap: 9px; padding: 12px 16px; background: var(--puw-surface-2); border-bottom: 1px solid var(--puw-border-light); }
.cx-doc-h .ic { width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--puw-teal-900); color: #fff; display: grid; place-items: center; flex: 0 0 auto; }
.cx-doc-h .ic svg { width: 15px; height: 15px; }
.cx-doc-h .name { font-family: var(--font-meta); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--puw-teal-900); }
.cx-rows { padding: 8px 16px 14px; font-family: var(--font-mono, monospace); }
.cx-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--puw-border-light); font-size: 13px; }
.cx-row:last-child { border-bottom: none; }
.cx-row .k { color: var(--puw-slate-400); font-family: var(--font-meta); font-size: 11.5px; letter-spacing: .02em; }
.cx-row .v { color: var(--puw-teal-900); font-weight: 600; text-align: right; }
.cx-row .v mark { background: transparent; color: inherit; padding: 2px 5px; border-radius: 5px; transition: background .35s, color .35s, box-shadow .35s; }
.cx.flagged .cx-row .v mark { background: var(--puw-coral-50); color: var(--puw-coral-600); box-shadow: inset 0 0 0 1px rgba(254,106,87,0.45); }

.cx-findings { margin-top: 16px; max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.cx.flagged .cx-findings { max-height: 600px; }
.cx-findings-inner { border-top: 1px solid var(--puw-border-light); padding-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.cx-find { display: flex; gap: 13px; align-items: flex-start; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.cx.flagged .cx-find { opacity: 1; transform: none; }
.cx.flagged .cx-find:nth-child(2) { transition-delay: .08s; }
.cx.flagged .cx-find:nth-child(3) { transition-delay: .16s; }
.cx.flagged .cx-find:nth-child(4) { transition-delay: .24s; }
.cx-find .fic { width: 30px; height: 30px; border-radius: var(--radius-sm); background: var(--puw-coral-50); color: var(--puw-coral-600); display: grid; place-items: center; flex: 0 0 auto; }
.cx-find .fic svg { width: 17px; height: 17px; }
.cx-find h5 { font-family: var(--font-body); font-weight: 600; font-size: 14.5px; color: var(--puw-teal-900); margin: 4px 0 0; }
.cx-find p { font-size: 13.5px; line-height: 1.55; color: var(--puw-teal-600); margin: 4px 0 0; }
.cx-empty { font-family: var(--font-meta); font-size: 12.5px; color: var(--puw-slate-400); margin-top: 16px; display: flex; align-items: center; gap: 8px; }
.cx.flagged .cx-empty { display: none; }

@media (max-width: 620px) {
  .cx-docs { grid-template-columns: 1fr; }
}

/* ---------------- touch-multiplier loop ---------------- */
.loop-lede { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.loop-lede .one { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5vw, 46px); letter-spacing: -0.03em; color: var(--puw-teal-900); line-height: 1; }
.loop-lede .arr { color: var(--puw-coral-500); }
.loop-lede .arr svg { width: 26px; height: 26px; display: block; }
.loop-lede .three { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5vw, 46px); letter-spacing: -0.03em; color: var(--puw-coral-600); line-height: 1; }
.loop-lede .lbl { font-family: var(--font-meta); font-size: 13px; color: var(--puw-slate-400); align-self: flex-end; line-height: 1.4; }

.loop-flow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; position: relative; }
.loop-node { background: #fff; border: 1px solid var(--puw-border-light); border-radius: var(--radius-lg); padding: 16px 14px; text-align: left; opacity: .5; transition: opacity .4s, border-color .4s, box-shadow .4s, transform .4s; }
.loop-node.lit { opacity: 1; border-color: rgba(254,106,87,0.4); box-shadow: 0 10px 26px rgba(3,54,61,0.06); }
.loop-node .ln-ic { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--puw-surface-3); color: var(--puw-slate-400); display: grid; place-items: center; transition: background .4s, color .4s; }
.loop-node.lit .ln-ic { background: var(--puw-coral-500); color: #fff; }
.loop-node .ln-ic svg { width: 18px; height: 18px; }
.loop-node .ln-n { font-family: var(--font-meta); font-size: 10.5px; font-weight: 600; color: var(--puw-coral-600); margin-top: 11px; }
.loop-node h5 { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--puw-teal-900); margin: 3px 0 0; line-height: 1.3; }
.loop-back { margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px dashed var(--puw-coral-500); border-radius: var(--radius-md); background: var(--puw-coral-50); }
.loop-back svg { width: 20px; height: 20px; color: var(--puw-coral-600); flex: 0 0 auto; }
.loop-back span { font-size: 13.5px; line-height: 1.5; color: var(--puw-teal-900); }
.loop-back span strong { color: var(--puw-coral-600); }

@media (max-width: 720px) {
  .loop-flow { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .loop-flow { grid-template-columns: 1fr; }
}

/* ---------------- ROI / hours-returned bars ---------------- */
.roi { display: flex; flex-direction: column; gap: 18px; }
.roi-row { display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px; }
.roi-row .vol { font-family: var(--font-meta); font-size: 13px; font-weight: 600; color: var(--puw-teal-900); }
.roi-row .vol span { display: block; font-size: 11px; font-weight: 400; color: var(--puw-slate-400); margin-top: 2px; }
.roi-track { height: 30px; background: var(--puw-surface-3); border-radius: var(--radius-sm); overflow: hidden; }
.roi-fill { height: 100%; width: 0; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--puw-teal-mid), #1c6e79); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.roi-row:nth-child(2) .roi-fill { transition-delay: .1s; }
.roi-row:nth-child(3) .roi-fill { transition-delay: .22s; }
.roi-amt { text-align: right; }
.roi-amt .hrs { font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--puw-teal-900); letter-spacing: -0.01em; }
.roi-amt .hrs .u { font-size: 12px; color: var(--puw-slate-400); font-family: var(--font-meta); margin-left: 3px; }
.roi-amt .net { font-family: var(--font-meta); font-size: 12px; color: var(--puw-teal-mid); margin-top: 2px; }

@media (max-width: 560px) {
  .roi-row { grid-template-columns: 72px 1fr; grid-template-rows: auto auto; }
  .roi-amt { grid-column: 1 / -1; text-align: left; display: flex; align-items: baseline; gap: 12px; }
  .roi-amt .net { margin-top: 0; }
}

/* ---------------- inline citations + sources ---------------- */
sup.ref { font-size: 0.62em; line-height: 0; font-family: var(--font-meta); font-weight: 600; margin-left: 1px; white-space: nowrap; vertical-align: super; }
sup.ref a { color: var(--puw-coral-600); padding: 0 1px; transition: color .2s; }
sup.ref a:hover { color: var(--puw-teal-900); text-decoration: underline; }
.stat-l sup.ref a { color: var(--puw-coral-500); }

.article .src-note { font-size: 15px; color: var(--puw-slate-400); margin-top: 18px; line-height: 1.6; }
.article .src-note strong { color: var(--puw-teal-900); }
ol.sources { counter-reset: src; list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
ol.sources li { position: relative; counter-increment: src; padding: 16px 18px 16px 52px; background: #fff; border: 1px solid var(--puw-border-light); border-radius: var(--radius-lg); scroll-margin-top: 100px; transition: border-color .25s, box-shadow .25s; }
ol.sources li::before { content: counter(src); position: absolute; left: 14px; top: 16px; width: 26px; height: 26px; border-radius: var(--radius-sm); background: var(--puw-coral-50); color: var(--puw-coral-600); font-family: var(--font-meta); font-weight: 600; font-size: 13px; display: grid; place-items: center; }
ol.sources li:target { border-color: var(--puw-coral-500); box-shadow: 0 10px 26px rgba(3,54,61,0.07); }
ol.sources li a { display: block; font-family: var(--font-body); font-weight: 600; font-size: 15.5px; color: var(--puw-teal-900); border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
ol.sources li a:hover { color: var(--puw-coral-600); border-color: var(--puw-coral-100); }
ol.sources li span { display: block; font-size: 13.5px; line-height: 1.55; color: var(--puw-teal-600); margin-top: 5px; }
@media (max-width: 560px) {
  ol.sources li { padding: 14px 15px 14px 46px; }
  ol.sources li::before { left: 12px; top: 14px; }
}