/* Answer library — single-answer.php + archive-answer.php. Built from the anchor's components only
   (hero, crumbs, tag, product window, statement card, numbered chip, tool card, ink slab, glass cards). */

/* hero: left-aligned to the reading column */
.ans-col{max-width:720px}
.ans-hero{padding-bottom:8px}
.ans-hero .crumbs ol{justify-content:flex-start}
.hero.inner.ans-hero h1{margin:22px 0 22px;font-size:clamp(34px,4.4vw,56px);line-height:1.04}
.ans-lead{font-size:18.5px;line-height:1.6;color:var(--ink);max-width:68ch}
.ans-by{margin-top:18px;font:500 12.5px/1.8 var(--text);color:var(--muted);font-variant-numeric:tabular-nums}

/* reading layout: ~68ch column + sticky rail */
.ans-main{padding-top:48px}
.ans-grid{display:grid;grid-template-columns:minmax(0,720px) 320px;gap:56px;align-items:start}
.ans-body{min-width:0;font-size:17px;line-height:1.7}
.ans-sec{padding:0;scroll-margin-top:94px}
.ans-sec+.ans-sec{margin-top:56px}
.ans-sec>h2,.ans-sources h2{font-size:clamp(26px,3vw,34px);margin-bottom:18px}
.ans-html p+p,.ans-html p+ul,.ans-html ul+p,.ans-html p+ol,.ans-html ol+p,.ans-html div+p,.ans-html p+div{margin-top:16px}
.ans-html ul,.ans-html ol{padding-left:22px;color:var(--body)}
.ans-html li+li{margin-top:6px}
.ans-html a:not(.more){color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--olive)}
.ans-html sup{line-height:0}
.ans-html sup a,.ans-html sup a:not(.more){font:600 12px var(--text);color:var(--olive);text-decoration:none;margin-left:2px}
.ans-html h3{margin-top:28px}

/* worked example: the product window inside the column */
.ans-ex{margin:8px 0 28px;max-width:none}
.ans-ex .win{border-radius:22px 22px 0 0}
.ans-ex .bar span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ans-ex .bar b{white-space:nowrap}
.ans-ex .pnl-flat{padding:22px}
.ans-ex tr.subtotal th,.ans-ex tr.subtotal td{border-top:2px solid var(--ink)}
.ans-ex tr:has(td.n:empty) th{font:500 13px var(--text);color:var(--muted);border-bottom:0}
.ans-ex tr:has(td.n:empty) td{border-bottom:0}

/* in-section statement card (comparison tables etc.) */
.ans-html .pnl{margin:22px 0 8px;padding:22px;box-shadow:none;overflow-x:auto}
.ans-html .pnl td.n{white-space:normal}
.ans-html .pnl thead th{font:500 13px var(--text);color:var(--muted);text-align:right;padding:0 0 10px 12px;border-bottom:1px solid var(--line)}
.ans-html .pnl thead th:first-child{text-align:left;padding-left:0}
.ans-html .pnl td{padding-left:12px}
.ans-html .pnl .note{margin-top:12px}

/* numbered rows (the "what we fix" chip, compact) */
.ans-rows{list-style:none;padding:0!important;display:grid;gap:12px;margin-top:20px}
.ans-rows li{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;margin:0!important}
.ans-rows .n{grid-row:span 2;font:600 13px var(--head);color:var(--olive);background:var(--lime-soft);border-radius:8px;padding:5px 9px;align-self:start;font-variant-numeric:tabular-nums}
.ans-rows h3{margin:0;font-size:17px}
.ans-rows p{font-size:15.5px;line-height:1.6;margin:0!important}

/* reviewed stamp + sources */
.ans-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px}
.ans-stamp{margin-top:56px;display:grid;grid-template-columns:56px minmax(0,1fr);gap:18px;align-items:start}
.ans-stamp-np{grid-template-columns:minmax(0,1fr)}
.ans-stamp .ph{width:56px;height:56px;border-radius:50%;font-size:8px;line-height:1.2}
.ans-stamp .kicker{margin-bottom:6px}
.ans-stamp p{font-size:15.5px;line-height:1.6}
.ans-stamp .ans-rev{color:var(--ink);font-weight:500}
.ans-stamp .fine{margin-top:6px}
.ans-sources{margin-top:36px;scroll-margin-top:94px}
.ans-sources ol{list-style:none;counter-reset:src;display:grid;gap:12px}
.ans-sources li{counter-increment:src;display:grid;grid-template-columns:28px minmax(0,1fr);font-size:15.5px;line-height:1.55;color:var(--body);scroll-margin-top:94px}
.ans-sources li:before{content:counter(src) ".";font:600 13px/1.9 var(--text);color:var(--olive);font-variant-numeric:tabular-nums}
.ans-sources li>*{grid-column:2}
.ans-sources a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:#C9CEC0;overflow-wrap:anywhere}
.ans-sources li .fine{font-size:12px}
.ans-sources>.fine{margin-top:18px}

/* rail */
.ans-rail{position:sticky;top:94px;display:grid;gap:16px}
.ans-toc ol{list-style:none;display:grid;gap:2px}
.ans-toc a{display:block;padding:7px 0 7px 12px;border-left:2px solid transparent;font-size:15px;line-height:1.4;color:var(--body)}
.ans-toc a:hover,.ans-toc a[aria-current]{color:var(--ink);border-left-color:var(--ink)}
.ans-toc .kicker{margin-bottom:10px}
.ans-toc-m{display:none;margin-bottom:32px}
.ans-toc-m summary{cursor:pointer;font:600 13.5px var(--text);color:var(--olive)}
.ans-toc-m nav{margin-top:10px}
.ans-tool{min-height:0;padding:24px}
.ans-slab{background:var(--ink);border-radius:var(--r-lg);padding:28px;position:relative;overflow:hidden}
.ans-slab:after{content:"";position:absolute;right:-110px;top:-130px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(200,240,90,.28),transparent 65%);pointer-events:none}
.ans-slab h3{color:#fff;position:relative}
.ans-slab p{color:rgba(255,255,255,.7);font-size:15.5px;margin:10px 0 20px;position:relative}
.ans-slab .btn{position:relative;white-space:normal}

/* related answers: 2–4 cards, centred */
.ans-related{display:flex;flex-wrap:wrap;justify-content:center}
.ans-related .gcard{flex:0 1 calc((100% - 40px)/3)}
.ans-related .gcard h3{padding-right:46px}

/* index */
.ans-index{padding-top:56px}
.ans-index .tools{margin-top:0}
.tool .ans-q{font-size:19px;letter-spacing:-.02em;line-height:1.25}

@media (max-width:1023px){
  .ans-grid{grid-template-columns:minmax(0,1fr)}
  .ans-rail{position:static;max-width:720px}
  .ans-toc-d{display:none}
  .ans-toc-m{display:block}
}
@media (max-width:880px){
  .ans-related .gcard{flex-basis:100%}
}
@media (max-width:560px){
  .ans-card{padding:18px}
  .ans-rows li{padding:16px}
  .ans-html .pnl{padding:14px}
  .ans-ex .win{padding:8px 8px 0}
  .ans-ex .dash{padding:10px}
}

/* index: library product window in the hero (.lib-) — counts computed in archive-answer.php */
.lib-mock{max-width:980px}
.lib-mock .pnl th{overflow-wrap:anywhere}
.lib-side{display:flex;flex-direction:column;gap:14px}
.lib-side li>span:last-child{white-space:nowrap}
.lib-new{border-top:2px solid var(--ink);padding-top:12px;display:grid;gap:4px}
.lib-new small{font:500 13px var(--text);color:var(--muted)}
.lib-new a{font:600 15px/1.35 var(--head);letter-spacing:-.01em;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--olive);overflow-wrap:anywhere}
.lib-new span{font:500 12.5px var(--text);color:var(--olive);font-variant-numeric:tabular-nums}
.lib-new .fill{white-space:normal}

/* 404.php — "page not found" as a reconciliation row (.nf-). No store figures. */
.nf-mock{max-width:560px;margin-top:44px}
.nf-mock .win{border-radius:22px;padding:12px;box-shadow:0 30px 60px -36px rgba(14,15,12,.35)}
.nf-dash{display:block;border-bottom:1px solid var(--line);border-radius:14px;padding:18px 20px}
.nf-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:600 14px var(--text);padding-bottom:12px;border-bottom:2px solid var(--ink);font-variant-numeric:tabular-nums}
.nf-row b{color:var(--olive);white-space:nowrap}
.nf-cap{font-size:14.5px;color:var(--body);margin:10px 0 6px}
.nf-links{list-style:none;padding:0;margin:0}
.nf-links li{border-bottom:1px dashed var(--line)}
.nf-links li:last-child{border-bottom:0}
.nf-links a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;font:500 14px var(--text);color:var(--ink);font-variant-numeric:tabular-nums}
.nf-links a:hover,.nf-links a:focus-visible{color:var(--olive)}
.nf-links a span:last-child{color:var(--olive)}
@media (max-width:560px){
  .nf-mock .win{padding:8px;border-radius:18px}
  .nf-dash{padding:14px}
  .nf-links a{font-size:13px}
}
/* visual QA #6: comparison tables with 3+ columns scroll inside their card on phones instead of squeezing to one word a line */
@media (max-width:560px){
  .ans-html .pnl table:has(thead th:nth-child(3)){min-width:470px}
  .ans-html .pnl table:has(thead th:nth-child(3)):not(:has(td.n)){min-width:600px}
}

/* QA 13 Oct: footnote markers get a 24px hit area without moving the text */
.ans-html sup a,.ans-html sup a:not(.more){display:inline-block;padding:5px 4px;margin:-5px -2px -5px 0}
/* Second lead paragraph (the qualifier) and the byline link (14 Oct 2026) */
.ans-lead-2{margin-top:12px}
.ans-by a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}