/* assets/site-guide-v3.css
   TaxTrace — Topic Guide "Refined" layer (Direction A).

   Non-destructive: loads AFTER site-v2.css + site-polish.css and only
   refines the GUIDE template (body.guide-page). Scoped to html.guide-v3 so
   it is explicit and reversible. No new palette — every colour is an
   existing site-v2 token; the three additions below are derived from them.

   Design intent
   -------------
   1. ONE spacing rhythm (8px): 8 / 16 / 24 / 32 / 40 / 64.
   2. ONE type scale for prose: 19 h2 / 15.5 h3 / 16 body / 14.5 secondary
      / 12 caption / 10 label. (The old template had twelve sizes.)
   3. Reading measure capped at 664px (~70 characters at 16px).
   4. Tinted fills reduced from six families to one neutral surface; the
      document-type hues survive as 2px rules and labels, so meaning is
      kept and the page stops shouting.
*/

html.guide-v3 {
  --g-surface: oklch(98.4% 0.002 265);   /* the only fill on the page   */
  --g-violet:  oklch(58% 0.110 285);     /* FTA-guide rule (topic hue)  */
  --g-measure: 664px;
}
html.guide-v3[data-theme="dark"] {
  --g-surface: oklch(19.5% 0.012 265);
  --g-violet:  oklch(70% 0.100 285);
}

/* ══════════════════════════════════════════════════════════
   1. READING PROGRESS + STICKY SECTION HEADER  (injected by JS)
════════════════════════════════════════════════════════════ */
.guide-v3 .guide-mini {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; z-index: 29;
  height: 41px;
  background: color-mix(in oklch, var(--panel) 90%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  opacity: 0; pointer-events: none; transition: opacity .18s ease-out;
}
.guide-v3 .guide-mini.visible { opacity: 1; pointer-events: auto; }
.guide-v3 .guide-mini-inner {
  max-width: 1180px; margin: 0 auto; padding: 0 44px;
  height: 40px; display: flex; align-items: center; gap: 10px;
}
.guide-v3 .guide-mini-doc { font: 600 13px var(--sans); color: var(--text); white-space: nowrap; }
.guide-v3 .guide-mini-sep { color: var(--subtle); font-size: 13px; }
.guide-v3 .guide-mini-sec { font: 400 13px var(--sans); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-v3 .guide-mini-top { margin-left: auto; font: 500 12px var(--sans); color: var(--muted); }
.guide-v3 .guide-progress { height: 2px; margin-top: -1px; }
.guide-v3 .guide-progress i { display: block; height: 2px; width: 0; background: var(--link); }

/* ══════════════════════════════════════════════════════════
   2. HERO
════════════════════════════════════════════════════════════ */
.guide-v3 .guide-hero-inner { padding: 44px 44px 36px; }
.guide-v3 .guide-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.guide-v3 .guide-eyebrow b { font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--link); }
.guide-v3 .guide-eyebrow span { font: 500 10px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--subtle); }
.guide-v3 .guide-eyebrow i { width: 3px; height: 3px; border-radius: 50%; background: var(--subtle); }

.guide-v3 .guide-hero h1 { font: 700 36px/1.1 var(--sans); letter-spacing: -.03em; margin: 0 0 14px; text-wrap: balance; }
.guide-v3 .guide-lead { font: 400 18px/1.6 var(--sans); color: var(--muted); max-width: 600px; margin: 0 0 22px; text-wrap: pretty; }

/* mono metadata row replaces the lone grey pill */
.guide-v3 .guide-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font: 500 12px var(--mono); color: var(--subtle); }
.guide-v3 .guide-meta i { width: 1px; height: 11px; background: var(--border-light); }

/* the editorial disclaimer, collapsed to one line */
.guide-v3 .guide-note { margin-top: 20px; max-width: 660px; border-top: 1px solid var(--border-light); padding-top: 14px; }
.guide-v3 .guide-note > summary { display: flex; align-items: center; gap: 8px; font: 400 13px var(--sans); color: var(--muted); cursor: pointer; list-style: none; }
.guide-v3 .guide-note > summary::-webkit-details-marker { display: none; }
.guide-v3 .guide-note > summary b { font-weight: 600; color: var(--text); }
.guide-v3 .guide-note > summary em { font-style: normal; color: var(--link); }
.guide-v3 .guide-note > summary svg { flex-shrink: 0; color: var(--subtle); }
.guide-v3 .guide-note p { font: 400 13.5px/1.7 var(--sans); color: var(--muted); margin: 10px 0 0; padding-left: 22px; max-width: 620px; }
/* the old hero banner is superseded */
.guide-v3 .guide-hero .topic-editorial-note { display: none; }

/* ══════════════════════════════════════════════════════════
   3. BODY GRID + RAIL
════════════════════════════════════════════════════════════ */
.guide-v3 .guide-body { padding: 40px 44px 80px; grid-template-columns: 236px minmax(0, 1fr); gap: 60px; }
.guide-v3 .guide-body .doc { max-width: var(--g-measure); }
.guide-v3 .guide-rail { top: calc(var(--topbar-h) + 60px); }
.guide-v3 .guide-rail-t { font-size: 10px; letter-spacing: .09em; margin-bottom: 14px; }
.guide-v3 .guide-rail-g { font: 700 9.5px var(--sans); text-transform: uppercase; letter-spacing: .1em; color: var(--subtle); margin: 20px 0 7px 14px; }
.guide-v3 .guide-rail-g:first-child { margin-top: 0; }
.guide-v3 .guide-rail .toc a { font: 400 13px/1.4 var(--sans); padding: 5px 0 5px 14px; border-radius: 0; }
.guide-v3 .guide-rail .toc a.active { font-weight: 550; }

/* ══════════════════════════════════════════════════════════
   4. SECTIONS + PROSE
════════════════════════════════════════════════════════════ */
.guide-v3 .guide-body .topic-doc .card { margin: 0 0 64px; scroll-margin-top: 104px; }
.guide-v3 .guide-body .topic-doc .card:last-child { margin-bottom: 0; }

/* numbered eyebrow instead of a divider rule under every h2 */
.guide-v3 .topic-doc .guide-secnum { font: 500 11.5px var(--mono); color: var(--subtle); letter-spacing: .04em; margin: 0 0 8px; }
.guide-v3 .guide-body .topic-doc .card h2 {
  font-size: 19px; font-weight: 650; letter-spacing: -.012em; line-height: 1.35;
  margin: 0 0 20px; padding-bottom: 0; border-bottom: none;
}
.guide-v3 .topic-doc .card h3 {
  font-size: 15.5px; font-weight: 650; letter-spacing: -.008em;
  margin: 40px 0 14px; scroll-margin-top: 104px;
}
.guide-v3 .topic-doc .card > p { font-size: 16px; line-height: 1.72; margin: 0 0 17px; text-wrap: pretty; }
.guide-v3 .topic-doc .card > ul { margin: 0 0 17px; padding-left: 20px; }
.guide-v3 .topic-doc .card > ul > li { font-size: 16px; line-height: 1.7; margin-bottom: 10px; }
/* caption must out-specify `.card > p` (0,3,1) or it inherits body 16px */
.guide-v3 .topic-doc .card > p.topic-figcaption,
.guide-v3 .topic-doc .topic-figcaption { font: 400 12px var(--sans); color: var(--subtle); text-align: left; margin: 10px 0 30px; }

/* ══════════════════════════════════════════════════════════
   5. "AT A GLANCE" CARD  (new — sits at the top of Overview)
════════════════════════════════════════════════════════════ */
.guide-v3 .guide-glance {
  margin: 0 0 30px; padding: 20px 22px 18px;
  border: 1px solid var(--border); border-radius: 12px; background: var(--g-surface);
}
.guide-v3 .guide-glance-t { font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-bottom: 4px; }
.guide-v3 .guide-glance-s { font: 400 12.5px/1.5 var(--sans); color: var(--subtle); margin-bottom: 16px; }
.guide-v3 .guide-glance-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; border-top: 1px solid var(--border-light); margin-top: 2px; }
.guide-v3 .guide-glance-list a { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: none !important; color: inherit; }
.guide-v3 .guide-glance-list a:nth-child(n+3) { border-top: 1px solid var(--border-light); }
.guide-v3 .guide-glance-list a:hover .gg-name { color: var(--link); }
.guide-v3 .guide-glance-list .gg-num { flex-shrink: 0; font: 500 11.5px var(--mono); color: var(--link); padding-top: 2px; }
.guide-v3 .guide-glance-list .gg-name { display: block; font: 600 13.5px var(--sans); letter-spacing: -.004em; color: var(--text); }
.guide-v3 .guide-glance-list .gg-test { display: block; font: 400 12.5px/1.45 var(--sans); color: var(--muted); margin-top: 1px; }
.guide-v3 .guide-glance-f { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border-light); font: 400 12.5px/1.55 var(--sans); color: var(--muted); }
@media (max-width: 700px) { .guide-v3 .guide-glance-list { grid-template-columns: 1fr; } .guide-v3 .guide-glance-list a:nth-child(n+2) { border-top: 1px solid var(--border-light); } }

/* ══════════════════════════════════════════════════════════
   6. THE SIX TINTED BOXES → ONE SURFACE + MEANING RULES
════════════════════════════════════════════════════════════ */
/* 6a. "In a nutshell" — indigo rule, no gradient, larger type */
.guide-v3 .topic-doc .topic-nutshell {
  margin: 0 0 30px; padding: 2px 0 2px 20px;
  border: none; border-left: 2px solid var(--link); border-radius: 0; background: none;
}
.guide-v3 .topic-nutshell-t { color: var(--link); font-size: 10px; letter-spacing: .09em; margin-bottom: 10px; }
.guide-v3 .topic-nutshell p { font-size: 17px; line-height: 1.68; letter-spacing: -.002em; margin: 0 0 10px; }
.guide-v3 .topic-nutshell p:last-child { margin-bottom: 0; }

/* 6b. "Which decision applies" — neutral surface, no amber */
.guide-v3 .topic-doc .topic-period {
  margin: 0 0 30px; padding: 18px 20px;
  border: 1px solid var(--border-light); border-radius: 10px; background: var(--g-surface);
}
.guide-v3 .topic-period-t { color: var(--muted); font-size: 10px; letter-spacing: .09em; margin-bottom: 12px; gap: 7px; }
.guide-v3 .topic-period td { padding: 8px 0; font-size: 14px; border-top: 1px solid var(--border-light); }
.guide-v3 .topic-period .tp-period { padding-right: 18px; }
.guide-v3 .topic-period p { font-size: 13.5px; line-height: 1.65; margin: 14px 0 0; }

/* 6c. Callouts — a 2px rule carries the source, no fill.
       teal  = FTA Private Clarification · violet = FTA CT Guide */
.guide-v3 .topic-doc .callout {
  margin: 26px 0; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--link2); border-radius: 0; background: none;
}
.guide-v3 .topic-doc .callout.fta-guide { border-left-color: var(--g-violet); background: none; }
.guide-v3 .topic-doc .callout p { font-size: 15.5px; line-height: 1.68; color: var(--text); margin: 0; }

/* 6d. Worked examples — the one card on the page */
.guide-v3 .topic-doc .topic-example {
  margin: 26px 0; padding: 20px 22px;
  border: 1px solid var(--border-light); border-radius: 10px; background: var(--g-surface);
}
.guide-v3 .topic-example-t { font-size: 10px; letter-spacing: .09em; gap: 10px; margin-bottom: 12px; }
.guide-v3 .topic-example-t .ex-src { font: 500 11px var(--mono); color: var(--subtle); }
.guide-v3 .topic-doc .topic-example > p { font-size: 15px; line-height: 1.65; margin: 0 0 12px; }
.guide-v3 .topic-doc .topic-example > ul { margin: 10px 0 0; padding-left: 20px; }
.guide-v3 .topic-doc .topic-example > ul li { font-size: 15px; line-height: 1.6; margin-bottom: 7px; }

/* 6e. Calculation tables — hairlines, one bold total rule */
.guide-v3 .ex-calc { margin: 14px 0 0; font-size: 14px; }
.guide-v3 .ex-calc td, .guide-v3 .ex-calc th { padding: 7px 14px 7px 0; }
.guide-v3 .ex-calc td.num, .guide-v3 .ex-calc th.num { padding: 7px 0 7px 14px; }
.guide-v3 .ex-calc th { font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); border-bottom: 1px solid var(--border); border-top: none; padding-bottom: 8px; }
.guide-v3 .ex-calc tr.total td { border-top: 1px solid var(--text); padding-top: 9px; }

/* 6f. Outcomes — pass/fail as a coloured rule, no fill */
.guide-v3 .topic-example .ex-outcome {
  margin: 16px 0 0; padding: 2px 0 2px 16px;
  border: none; border-left: 2px solid var(--inf-c); border-radius: 0; background: none;
  font-size: 14.5px; line-height: 1.6;
}
.guide-v3 .topic-example .ex-outcome.no { border-left-color: var(--rep-c); background: none; }

/* 6g. Yes/no split — hairline frame, hue kept on the headings only */
.guide-v3 .topic-doc .topic-split {
  margin: 26px 0; gap: 0;
  border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
}
.guide-v3 .topic-split-col { border: none; border-radius: 0; background: none; padding: 16px 22px 16px 0; }
.guide-v3 .topic-split-col.no { padding: 16px 0 16px 22px; border-left: 1px solid var(--border-light); }
.guide-v3 .topic-split-col h4 { font-size: 10px; letter-spacing: .09em; gap: 7px; margin-bottom: 10px; }
.guide-v3 .topic-split-col.yes h4 { color: var(--inf-c); }
.guide-v3 .topic-split-col.no  h4 { color: var(--rep-c); }
.guide-v3 .topic-split-col li { font-size: 14.5px; line-height: 1.6; margin-bottom: 6px; }
@media (max-width: 700px) {
  .guide-v3 .topic-split-col, .guide-v3 .topic-split-col.no { padding: 16px 0; border-left: none; }
  .guide-v3 .topic-split-col.no { border-top: 1px solid var(--border-light); }
}

/* 6h. Condition gateway — outline numerals, hairline spine */
.guide-v3 .topic-doc .cond-flow { margin: 28px 0 0; }
.guide-v3 .cond-flow-step { gap: 16px; padding-bottom: 20px; }
.guide-v3 .cond-flow-step:not(:last-child)::before { left: 13px; top: 30px; width: 1px; background: var(--border-light); }
.guide-v3 .cond-flow-num {
  width: 26px; height: 26px; font: 650 12px var(--sans);
  background: var(--panel); color: var(--link); border: 1px solid var(--link);
}
.guide-v3 .cond-flow-body { padding-top: 1px; }
.guide-v3 .cond-flow-body h4 { font-size: 15.5px; font-weight: 650; letter-spacing: -.006em; margin-bottom: 4px; }
.guide-v3 .cond-flow-body p { font-size: 14.5px; }
/* block + gutter icon, not flex: tolerates raw inline content (auto-injected
   defined-term / cross-ref spans) without needing a wrapper element */
.guide-v3 .cond-flow-result {
  display: block; position: relative;
  margin: 6px 0 0; padding: 1px 0 1px 46px;
  border: none; border-left: 2px solid var(--inf-c); border-radius: 0; background: none;
  font-size: 15.5px; font-weight: 650; letter-spacing: -.006em; line-height: 1.5; color: var(--text);
}
.guide-v3 .cond-flow-result svg { position: absolute; left: 20px; top: 3px; color: var(--inf-c); }

/* ══════════════════════════════════════════════════════════
   7. CONTENT TABLES — the three-column source tables
   Boxed + zebra + vertical rules made the Rule column unreadable.
   Now: no box, hairline rows, fixed columns so nothing collapses.
════════════════════════════════════════════════════════════ */
.guide-v3 .topic-doc .simple-table {
  margin: 26px 0; font-size: 14.5px; line-height: 1.6;
  border: none; border-radius: 0; border-collapse: collapse; table-layout: fixed;
}
.guide-v3 .topic-doc .simple-table thead th {
  font: 700 10px var(--sans); text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); background: none; vertical-align: bottom;
  padding: 0 18px 9px 0; border-bottom: 1px solid var(--text); border-right: none;
}
.guide-v3 .topic-doc .simple-table tbody td {
  padding: 13px 18px 13px 0; border-right: none;
  border-bottom: 1px solid var(--border-light); vertical-align: top;
}
.guide-v3 .topic-doc .simple-table tbody tr:nth-child(even) { background: none; }
.guide-v3 .topic-doc .simple-table tbody tr:hover { background: none; }
.guide-v3 .topic-doc .simple-table tbody tr:last-child td { border-bottom: 1px solid var(--border-light); }
.guide-v3 .topic-doc .simple-table tbody td:first-child { font-weight: 500; }
/* column widths: 3-col source tables, then 2-col */
.guide-v3 .simple-table thead tr:has(th:nth-child(3)) th:nth-child(1) { width: 27%; }
.guide-v3 .simple-table thead tr:has(th:nth-child(3)) th:nth-child(2) { width: 49%; }
.guide-v3 .simple-table thead tr:has(th:nth-child(3)) th:nth-child(3) { width: 24%; }
.guide-v3 .simple-table thead tr:not(:has(th:nth-child(3))):has(th:nth-child(2)) th:nth-child(1) { width: 32%; }
.guide-v3 .simple-table td .prov, .guide-v3 .simple-table td a.prov { font-size: 12px; white-space: normal; }

/* provisions read as citations, not as body text */
.guide-v3 .topic-doc .prov { font: 500 12.5px var(--mono); }

/* ══════════════════════════════════════════════════════════
   7b. DECISION TREE (the five conditions + their fallbacks)
════════════════════════════════════════════════════════════ */
.guide-v3 .pe-flow { margin: 24px 0 0; }
.guide-v3 .pe-flow-start {
  font: 600 12.5px var(--sans); color: var(--muted); padding: 9px 14px; margin-bottom: 18px;
  border: 1px dashed var(--border); border-radius: 8px; background: var(--g-surface);
}
.guide-v3 .pe-gate { position: relative; padding: 0 0 22px 40px; }
.guide-v3 .pe-gate:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 1px; background: var(--border-light);
}
.guide-v3 .pe-num {
  position: absolute; left: 0; top: 0; width: 27px; height: 27px; border-radius: 50%;
  display: grid; place-items: center; font: 650 12px var(--sans);
  background: var(--panel); color: var(--link); border: 1px solid var(--link);
}
.guide-v3 .pe-gate-q { font: 600 14.5px var(--sans); color: var(--text); letter-spacing: -.004em; line-height: 1.5; margin: 3px 0 9px; }
.guide-v3 .pe-gate-q .pe-cite,
.guide-v3 .pe-alt-q .pe-cite { font: 500 11px var(--mono); color: var(--subtle); margin-left: 6px; white-space: nowrap; }

.guide-v3 .pe-path { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.55; color: var(--muted); margin-bottom: 7px; }
.guide-v3 .pe-path:last-child { margin-bottom: 0; }
.guide-v3 .pe-path::before { position: absolute; left: 2px; top: 0; font-weight: 700; font-size: 12px; }
.guide-v3 .pe-path.pass::before { content: "\2713"; color: var(--inf-c); }
.guide-v3 .pe-path.stop::before { content: "\00D7"; color: var(--rep-c); font-size: 14px; top: -1px; }
.guide-v3 .pe-path.fail::before,
.guide-v3 .pe-path.branch::before { content: "\2192"; color: var(--subtle); }
.guide-v3 .pe-path b { color: var(--text); font-weight: 600; }
.guide-v3 .pe-path .pe-mini { color: var(--subtle); font-size: 12.5px; }

/* nested fallback / alternate box */
.guide-v3 .pe-alt { margin: 8px 0 2px; padding: 12px 15px; border-left: 2px solid var(--link); background: var(--g-surface); border-radius: 0 8px 8px 0; }
.guide-v3 .pe-alt.neutral { border-left-color: var(--subtle); }
.guide-v3 .pe-alt-lbl { font: 700 9.5px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--link); margin-bottom: 6px; }
.guide-v3 .pe-alt.neutral .pe-alt-lbl { color: var(--muted); }
.guide-v3 .pe-alt-q { font: 600 13.5px var(--sans); color: var(--text); line-height: 1.5; margin-bottom: 8px; }

/* "all tests met" result line */
.guide-v3 .pe-result {
  position: relative; margin: 2px 0 0; padding: 1px 0 1px 46px;
  border-left: 2px solid var(--inf-c);
  font-size: 15px; font-weight: 650; letter-spacing: -.006em; line-height: 1.5; color: var(--text);
}
.guide-v3 .pe-result b { color: var(--text); }
.guide-v3 .pe-result svg { position: absolute; left: 20px; top: 3px; color: var(--inf-c); }

/* the MD 116 vs MD 302 comparison table: equal-width comparison columns
   (override the generic 27/49/24 three-column widths for this table only) */
.guide-v3 .simple-table.pe-compare thead tr:has(th:nth-child(3)) th:nth-child(1) { width: 24%; }
.guide-v3 .simple-table.pe-compare thead tr:has(th:nth-child(3)) th:nth-child(2) { width: 38%; }
.guide-v3 .simple-table.pe-compare thead tr:has(th:nth-child(3)) th:nth-child(3) { width: 38%; }

/* ══════════════════════════════════════════════════════════
   8. PRINT — the guide as a clean document
════════════════════════════════════════════════════════════ */
@media print {
  .guide-v3 .topbar, .guide-v3 .guide-mini, .guide-v3 .guide-rail,
  .guide-v3 .back-to-top, .guide-v3 .footer { display: none !important; }
  .guide-v3 .guide-body { display: block; padding: 0; }
  .guide-v3 .guide-body .doc { max-width: none; }
  .guide-v3 .guide-hero-inner, .guide-v3 .guide-body { max-width: none; }
  .guide-v3 .topic-doc .card { break-inside: auto; margin-bottom: 32px; }
  .guide-v3 .topic-doc .card h2, .guide-v3 .topic-doc .card h3 { break-after: avoid; }
  .guide-v3 .topic-example, .guide-v3 .topic-split, .guide-v3 .cond-flow-step,
  .guide-v3 .pe-gate, .guide-v3 .pe-alt, .guide-v3 .simple-table tr { break-inside: avoid; }
  .guide-v3 .guide-note[open] p { display: block; }
}

/* ══════════════════════════════════════════════════════════
   9. NARROW VIEWPORTS
════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .guide-v3 .guide-hero-inner { padding: 28px 18px 22px; }
  .guide-v3 .guide-hero h1 { font-size: 28px; }
  .guide-v3 .guide-lead { font-size: 16.5px; }
  .guide-v3 .guide-body { padding: 24px 18px 48px; grid-template-columns: 1fr; gap: 0; }
  .guide-v3 .guide-mini-inner { padding: 0 18px; }
}