/* tdx-system.css — the type, space and colour system.
 *
 * Loads LAST, but every selector is written at a specificity that wins
 * regardless of position, because two things defeat source order here: the
 * 159 !important declarations in tdx-content-dark-fix.css, and 84,793 inline
 * style attributes that this system is designed to SURVIVE, not remove.
 *
 * Extends the --tdx-* namespace from tdx-chrome.css. --tdx-measure and
 * --tdx-gutter belong to that file and are never redefined here: they are the
 * shell and alignment contracts that inject-layout-tokens.js stamps per page.
 *
 * NO !important in the light theme except one, marked below, which exists to
 * keep Playfair away from a number. If a rule loses, raise its specificity.
 */

html:root {

  /* ── TYPE ──────────────────────────────────────────────────────────────
     Ratio 1.125, anchored at a 16px body. A factsheet needs four steps BELOW
     body (cell, caption, meta, micro) far more than three big headings. Root
     stays 16px: changing it would rescale every rem inside those 84,793
     inline styles. */
  --tdx-fs-micro:   .75rem;     /* 12px  legal, source line, ad label   */
  --tdx-fs-caption: .875rem;    /* 14px  column header, eyebrow, figcap */
  --tdx-fs-small:   .9375rem;   /* 15px  table cell, meta               */
  --tdx-fs-body:    1rem;       /* 16px  ← baseline                     */
  --tdx-fs-lede:    1.125rem;   /* 18px                                 */
  --tdx-fs-h3:      1.125rem;   /* 18px                                 */
  --tdx-fs-h2:      1.3rem;     /* 20.8px                               */
  --tdx-fs-h1:      1.75rem;    /* 28px  in-flow h1                     */

  /* Leading descends as size rises. Body's 24px line box is the unit; h3
     x1.3333 lands on it exactly. */
  --tdx-lh-micro:   1.4;
  --tdx-lh-caption: 1.4;
  --tdx-lh-small:   1.45;
  --tdx-lh-body:    1.5;        /* 24px ← baseline */
  --tdx-lh-lede:    1.45;
  --tdx-lh-h3:      1.3333;
  --tdx-lh-h2:      1.25;
  --tdx-lh-h1:      1.15;
  --tdx-lh-display: 1.08;

  /* Lato ships 300/400/700/900 — 500 and 600 resolve to 700. Playfair is a
     real 400–700 variable face, so 600 is genuine there. */
  --tdx-wt-body:   400;
  --tdx-wt-strong: 700;
  --tdx-wt-head:   600;

  --tdx-track-caps: .06em;      /* the ONE caps tracking (was .05/.08/.12/.16/.18) */
  --tdx-track-head: -.005em;

  /* Families. --tdx-chrome-serif is REDEFINED: it named 'Source Serif Pro'
     and 'Source Serif 4', and tdx-fonts.css defines only Lato and Playfair.
     Both fell back to Georgia, so the TOC summary and the summary-box heading
     have been rendering a third serif next to Playfair on ~650 pages. */
  --tdx-chrome-serif: var(--tdx-chrome-sans);
  --tdx-face-display: 'Playfair Display', Georgia, serif;
  --tdx-face-text:    var(--tdx-chrome-sans);
  /* NEVER Playfair: its digits are proportional, 370–600 per 1000 units, a
     62% spread. Lato's are all 1160/2000 = .58em, and so is its £. */
  --tdx-face-num:     var(--tdx-chrome-sans);

  /* ── SPACE ─────────────────────────────────────────────────────────────
     4px unit, 24px baseline. Eight steps replacing 45 rem values and a
     13-value px band. */
  --tdx-s1: .25rem;  --tdx-s2: .5rem;  --tdx-s3: .75rem;  --tdx-s4: 1rem;
  --tdx-s5: 1.5rem;  --tdx-s6: 2rem;   --tdx-s7: 3rem;    --tdx-s8: 4rem;

  /* THE PROXIMITY RULE as arithmetic, so it cannot drift: space ABOVE a
     heading is exactly 3x the space below it. Every audited sheet set
     headings as `margin: 0 0 X` with no top margin, which only works when a
     heading is its container's first child. This is the structural fix. */
  --tdx-lead-h2: var(--tdx-s3);                 /* 12px below */
  --tdx-lead-h3: var(--tdx-s2);                 /*  8px below */
  --tdx-rise-h2: calc(var(--tdx-lead-h2) * 3);  /* 36px above */
  --tdx-rise-h3: calc(var(--tdx-lead-h3) * 3);  /* 24px above */

  --tdx-space-para:    var(--tdx-s3);
  --tdx-space-list:    var(--tdx-s1);
  --tdx-space-section: var(--tdx-s6);
  --tdx-card-pad:      var(--tdx-gutter);   /* card text shares its left edge
                                               with body text and the chrome */
  --tdx-card-pad-sm:   var(--tdx-s4);
  --tdx-cell-y:        var(--tdx-s2);
  --tdx-cell-x:        var(--tdx-s3);

  /* Prose cap. Lato 400 averages 7.18px/char at 16px, so the original 883px
     text column ran to 123 characters — roughly half as long again as anything
     comfortably readable. Tables, figures and ad slots keep the FULL column:
     prose narrow, evidence wide, one shared left edge.
     Shipped at 44rem (98ch) first, then tightened to 36rem after measuring:
       - mobile is byte-identical (page height and prose width unchanged to the
         pixel) because the cap never binds below a 576px viewport, and mobile
         is where most impressions are
       - on desktop the first in-article ad moves down 46-72px and was already
         well below the fold at both values
       - page height moves between 0% and +6.5%, which if anything gives
         in-content ad placement slightly more room rather than less */
  --tdx-measure-prose: 36rem;   /* 576px ≈ 80ch */

  /* ── COLOUR (light) ────────────────────────────────────────────────────
     Roles, not hexes. Ratios are the WORST case across every light surface
     on the site, not the flattering one. */
  --tdx-page:      #fbf7ec;
  --tdx-panel:     #ffffff;
  --tdx-panel-2:   #faf6ee;
  --tdx-panel-3:   #f3ecdb;

  --tdx-ink:       #241f17;   /* 13.89 worst */
  --tdx-ink-quiet: #5e5747;   /*  6.09 worst */
  --tdx-ink-head:  #0f2a20;   /* 12.99 worst */

  --tdx-link:       #1b3a2d;  /* 10.55 worst — was #a8862f at 2.92, FAILED AA */
  --tdx-link-hover: #0f2a20;

  /* THE TWO-GOLD RULE. --tdx-gold-ink is the only gold permitted on a glyph.
     --tdx-gold-rule is for hairlines, underlines and bars, NEVER text.
     #7d631e is hue 43.6deg against #a8862f's 43.0deg — the same brand gold,
     darkened to legality. AA becomes true by construction, not inspection. */
  --tdx-gold-ink:       #7d631e;   /* 4.85 worst */
  --tdx-gold-rule:      #a8862f;   /* non-text only */
  --tdx-gold-on-forest: #e7c989;   /* 4.93 on the gradient's lightest stop */

  --tdx-hairline:        #e3dac4;
  --tdx-hairline-strong: #d6cdba;
  --tdx-focus:           #8a6d26;  /* 4.15 worst; 1.4.11 needs 3.0 */
  --tdx-mark-bg:         rgba(168,134,47,.20);
  --tdx-pos:             #16603c;
  --tdx-neg:             #a32020;

  /* Retokenise the two page-level variables that are safe to move.
     --gold is deliberately NOT here: 4,578 uses straddle forest and cream
     surfaces and no single value is legal on both. */
  --muted: var(--tdx-ink);         /* was #6b6353; 627/627 uses are `color`,
                                      334 of them body copy at 5.04 worst */
  --rule:  var(--tdx-hairline);
}

/* ── DARK ───────────────────────────────────────────────────────────────
   Set to the values tdx-content-dark-fix.css already paints, so this is an
   alignment rather than a fight. html:root[data-theme="dark"] is (0,2,1),
   which beats any page-level :root. */
html:root[data-theme="dark"] {
  --tdx-page:      #16231d;
  --tdx-panel:     #1c2a23;
  --tdx-panel-2:   #15221c;
  --tdx-panel-3:   #24332b;

  --tdx-ink:       #e8e0c9;   /* 10.06 worst */
  --tdx-ink-quiet: #b0a78f;   /*  5.54 worst — was #8f876f at 3.70, FAILED */
  --tdx-ink-head:  #f2ead6;   /* 11.06 worst */

  --tdx-link:       #d8bb79;
  --tdx-link-hover: #e7c989;

  --tdx-gold-ink:       #d8bb79;
  --tdx-gold-rule:      #c9a961;
  --tdx-gold-on-forest: #e7c989;

  --tdx-hairline:        #2d3a32;
  --tdx-hairline-strong: #3a4a41;
  --tdx-focus:           #e7c989;
  --tdx-mark-bg:         rgba(201,169,97,.22);
  --tdx-pos:             #8fd3ab;
  --tdx-neg:             #ffb3ab;   /* was #ff8a8a — passed, but thin at 15px */

  --muted: var(--tdx-ink-quiet);
  --rule:  var(--tdx-hairline);
}

/* ── BODY ───────────────────────────────────────────────────────────────
   `html body` = (0,0,2), beats `body{line-height:1.7}` on the pages that
   declare it and the UA default on those that do not. */
html body {
  font-family: var(--tdx-face-text);
  font-size: var(--tdx-fs-body);
  line-height: var(--tdx-lh-body);
  font-weight: var(--tdx-wt-body);
  color: var(--tdx-ink);
}

/* ── HEADINGS ───────────────────────────────────────────────────────────
   The audit's number-one defect: most pages never set a heading line-height,
   so a 20.8px Playfair h2 inherits body's 1.7 and sets on 35.4px leading —
   two lines that float apart like a loose paragraph, hard against the text
   above and barely clear of the text below. Fixable on 99.8% of h2 and 97.5%
   of h3, because almost none carry an inline line-height. */
/* SPECIFICITY NOTE — why `:not([data-tdx-scope])` is here.
 *
 * 134 distinct classes on this site scope a heading rule: .section,
 * .premium-section, .options-section, .band, .card, .panel, .callout, .tool,
 * .route, .method, .results and 120 more. Almost all are (0,1,1). Naming them
 * would be a list that rots the day someone adds page 661.
 *
 * `[data-tdx-scope]` is an attribute NO element has, so `:not()` on it always
 * matches and changes nothing about WHICH elements are selected — it only
 * raises specificity from (0,0,2) to (0,1,2), which beats every (0,1,1) rule
 * at once. One documented hack instead of a 134-entry list.
 *
 * h1 is deliberately NOT boosted. Hero h1s are sized by `.hero h1` and
 * `.premium-hero h1` at (0,1,1) with a clamp(), they sit above the fold on
 * every page, and they are the largest ad-geometry lever on the site. Leaving
 * h1 at (0,0,2) lets those rules keep winning, which is the intent.
 */
main h1, main h2, main h3, main h4, main h5, main h6,
main .section h1, main .section h2, main .section h3,
main .section h4, main .panel h2, main .panel h3 {
  font-family: var(--tdx-face-display);
  font-weight: var(--tdx-wt-head);
  color: var(--tdx-ink-head);
  letter-spacing: var(--tdx-track-head);
  text-wrap: balance;
}
main h1, main .section h1 {
  font-size: var(--tdx-fs-h1);
  line-height: var(--tdx-lh-h1);
  margin: 0 0 var(--tdx-s4);
}
/* 1,195 of 6,880 h2 (17.4%) carry an inline font-size that cannot be
   overridden, and the two commonest values are 1.15rem and 1.0rem. A 1.3rem
   scale keeps those survivors in family; the 1.9rem the page CSS asks for
   would leave 1,040 headings visibly out of step with it. Only 12 h2 on the
   whole site carry an inline line-height, so the rhythm below is 99.8% ours. */
main h2:not([data-tdx-scope]),
main .section h2, main .panel h2 {
  font-size: var(--tdx-fs-h2);
  line-height: var(--tdx-lh-h2);
  margin: var(--tdx-rise-h2) 0 var(--tdx-lead-h2);
}
main h3:not([data-tdx-scope]),
main .section h3, main .panel h3 {
  font-size: var(--tdx-fs-h3);
  line-height: var(--tdx-lh-h3);
  font-weight: var(--tdx-wt-strong);   /* a Didone at 18px needs the weight */
  margin: var(--tdx-rise-h3) 0 var(--tdx-lead-h3);
}
/* NOTE: there is deliberately no `revert` escape hatch for hero headings here.
 * `revert` rolls back to the previous cascade ORIGIN (the user-agent sheet),
 * not to the page's own author rule, so it would strip the hero styling
 * entirely rather than restore it. Hero bands are protected by scope instead:
 * .hero, .page-hero, .premium-hero and .options-hero size h1 and p only —
 * verified across all 660 pages — and h1 is never boosted above (0,0,2). */
/* h4 steps by FORM, not size — Lato caps. This is what lets the display ramp
   stay tight without inventing a fourth heading size. */
main h4, main .section h4 {
  font-family: var(--tdx-face-text);
  font-size: var(--tdx-fs-caption);
  line-height: var(--tdx-lh-caption);
  font-weight: var(--tdx-wt-strong);
  text-transform: uppercase;
  letter-spacing: var(--tdx-track-caps);
  color: var(--tdx-ink-quiet);
  margin: var(--tdx-s5) 0 var(--tdx-s2);
}
/* Nothing double-spaces at a container edge. */
main .section > :first-child,
main .panel   > :first-child,
main article  > :first-child,
main .tdx-tldr > :first-child { margin-top: 0; }

/* The hero h1 is UNCHANGED in size. Its clamp() is above the fold on every
   page and is the single largest ad-geometry lever on the site. */
main .hero h1, .hero h1, main .page-hero h1, .page-hero h1 {
  line-height: var(--tdx-lh-display);
  letter-spacing: var(--tdx-track-head);
}

/* ── BODY COPY ──────────────────────────────────────────────────────────
   `main .section p` = (0,1,2), beats `.section p{color:var(--muted)}`. */
/* Content containers are NAMED rather than specificity-boosted, unlike the
   headings above. A boost would also beat `.hero p` — which sizes and colours
   the above-the-fold standfirst on 402 pages — and that must not move. Every
   class below is a body-copy container; hero classes are absent on purpose. */
main > p,
main .section p, main .premium-section p, main .options-section p,
main .band p, main .panel p, main .callout p, main .card p,
main .method p, main .route p, main .tool p, main .results p,
main .example-box p, main .checklist p, main .strat-body p,
main .notes-card p, main .qa-box p, main .fact-box p, main article p {
  margin: 0 0 var(--tdx-space-para);
  line-height: var(--tdx-lh-body);
  color: var(--tdx-ink);
  text-wrap: pretty;
}
main .section li, main .premium-section li, main .options-section li,
main .band li, main .panel li, main .callout li, main .card li,
main .method li, main .route li, main .tool li, main article li {
  line-height: var(--tdx-lh-body);
  color: var(--tdx-ink);
}
/* THE PROSE CAP.
   Direct children only, so nested card copy is not double-capped, and never
   on tables, figures or ad containers — they keep the full column. Hero
   paragraphs are excluded by omission: `.hero p` is sized and coloured by the
   page at (0,1,1) and sits above the fold, so it is left alone deliberately.
   Named containers rather than a specificity boost, precisely so that
   omission is explicit and auditable. */
main > p,
main .section > p, main .section > ul, main .section > ol,
main .premium-section > p, main .premium-section > ul, main .premium-section > ol,
main .options-section > p, main .options-section > ul, main .options-section > ol,
main .band > p, main .band > ul, main .band > ol,
main .panel > p, main .method > p, main .route > p, main .tool > p,
main .results > p, main .checklist > p, main .strat-body > p,
main article > p, main article > ul, main article > ol {
  max-width: var(--tdx-measure-prose);
}
main p:last-child, main .section p:last-child { margin-bottom: 0; }

main .lede, main .headline-answer p, main .tdx-tldr > p:first-child {
  font-size: var(--tdx-fs-lede);
  line-height: var(--tdx-lh-lede);
  font-family: var(--tdx-face-text);   /* was the phantom Source Serif stack */
  font-weight: var(--tdx-wt-body);
  color: var(--tdx-ink);
  letter-spacing: 0;
}
main .headline-answer p { font-weight: var(--tdx-wt-strong); }

/* ── LINKS ──────────────────────────────────────────────────────────────
   The underline is load-bearing for WCAG 1.4.1, not decoration: light link
   #1b3a2d against body #241f17 is 1.32:1, and dark #d8bb79 against #e8e0c9
   is 1.41:1. Colour alone cannot identify a link on either theme.
   :not([class]) protects button-shaped links (CTAs, pills, nav). */
main a:not([class]) {
  color: var(--tdx-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--tdx-gold-rule);
  text-underline-offset: .16em;
  text-decoration-skip-ink: auto;
}
main a:not([class]):hover,
main a:not([class]):focus-visible {
  color: var(--tdx-link-hover);
  text-decoration-color: currentColor;   /* the underline CHANGES, never goes */
}
main a:not([class]):visited { color: var(--tdx-link); }

/* ── LISTS ──────────────────────────────────────────────────────────── */
main ul, main ol, main .section ul, main .section ol {
  margin: 0 0 var(--tdx-space-para);
  padding-left: var(--tdx-s5);
  color: var(--tdx-ink);
}
main li, main .section li {
  margin: 0 0 var(--tdx-space-list);
  line-height: var(--tdx-lh-body);
  color: var(--tdx-ink);
}
main li:last-child { margin-bottom: 0; }
main li > ul, main li > ol { margin-top: var(--tdx-space-list); }
main ::marker { color: var(--tdx-gold-rule); }

/* ── TABLES — the factsheet surface ─────────────────────────────────────
   Every class named explicitly so (0,1,2) beats the page's (0,1,1). */
main table, main .bd-table, main .data-table, main .options-table,
main .etf-table, main .premium-table, main .life-table, main .trap-table,
main .lesson-table, main .pa-table, main .tool-table {
  width: 100%;
  max-width: none;                     /* tables keep the FULL column */
  border-collapse: collapse;
  margin: var(--tdx-s5) 0;
  font-family: var(--tdx-face-num);
  font-size: var(--tdx-fs-small);
  line-height: var(--tdx-lh-small);
  font-variant-numeric: tabular-nums lining-nums;
}
main table th, main .bd-table th, main .data-table th,
main .options-table th, main .premium-table th, main .etf-table th {
  font-family: var(--tdx-face-text);   /* retires Playfair from column headers
                             on 313 pages — its digits are proportional */
  font-size: var(--tdx-fs-caption);
  line-height: var(--tdx-lh-caption);
  font-weight: var(--tdx-wt-strong);
  text-transform: uppercase;
  letter-spacing: var(--tdx-track-caps);
  color: var(--tdx-ink-head);
  background: transparent;
  text-align: left;
  vertical-align: bottom;
  padding: var(--tdx-cell-y) var(--tdx-cell-x);
  border-bottom: 1px solid var(--tdx-ink-head);   /* one firm rule under the
                            head, hairlines elsewhere. No zebra, no fills. */
}
main table td, main .bd-table td, main .data-table td,
main .options-table td, main .premium-table td, main .etf-table td {
  padding: var(--tdx-cell-y) var(--tdx-cell-x);
  border-bottom: 1px solid var(--tdx-hairline);
  color: var(--tdx-ink);
  vertical-align: baseline;
}
main table th:last-child, main table td:last-child { padding-right: 0; }
main table th:first-child, main table td:first-child { padding-left: 0; }

main td.num, main th.num, main .num, main .metric .value,
main .figure-value, main [data-num] {
  /* The ONE light-theme !important. It exists solely to stop a Playfair rule
     reaching a number and making the column ragged. */
  font-family: var(--tdx-face-num) !important;
  font-variant-numeric: tabular-nums lining-nums;
  text-align: right;
  white-space: nowrap;
}
main tr.total td, main .bd-table tr.total td {
  font-weight: var(--tdx-wt-strong);
  color: var(--tdx-ink-head);
  border-top: 2px solid var(--tdx-ink-head);
  border-bottom: none;
}

/* ── FIGURES AND CAPTIONS ───────────────────────────────────────────────
   Lato has no italic face, so every `font-style:italic` on the site is a
   synthetic mechanical oblique. Captions carry quiet + small instead. */
main figure, main .chart-wrap { margin: var(--tdx-s5) 0; max-width: none; }
main figcaption, main .chart-caption, main .table-note, main .src-note {
  font-family: var(--tdx-face-text);
  font-size: var(--tdx-fs-caption);
  line-height: var(--tdx-lh-caption);
  font-style: normal;
  color: var(--tdx-ink-quiet);
  margin: var(--tdx-s2) 0 0;
  max-width: var(--tdx-measure-prose);
}
main img, main svg { max-width: 100%; height: auto; }

/* ── CARDS ──────────────────────────────────────────────────────────────
   Padding collapses to one value equal to --tdx-gutter, so card text shares
   a left edge with body text and with the injected chrome. Deletes the
   1.1/1.4/1.55/1.6/1.65rem ladder the site itself discards at 640px anyway. */
/* DELIBERATELY ONLY MARGIN.
 *
 * This rule originally also set padding, border, background, border-radius
 * and box-shadow on every .section/.card/.callout on the site. Two reasons it
 * does not any more, both found by measuring rather than by looking:
 *
 * 1. ADSENSE. Adding 24px of horizontal padding to .section narrows every
 *    container an Auto Ad can be inserted into. Measured on the .wrap
 *    calculator template, the widest in-content insertion point went
 *    900px -> 849px. Nothing else on the site lost width, and this did.
 *    Ads are placed into these containers at runtime; making them narrower
 *    is a revenue change wearing a design change's clothes.
 *
 * 2. It turned every .section into a visual card. On templates where
 *    .section is only a semantic wrapper, that invents a box the page never
 *    had. The design spec that produced this system flagged card treatment
 *    as "review per template, never bulk" — and shipping it across 660 pages
 *    in one go was exactly the thing it warned against.
 *
 * Card appearance stays with the page CSS that already owns it. The blocks
 * this system genuinely owns — .tdx-toc, .tdx-tldr, .headline-answer — are
 * still styled below, because those are cards by definition.
 */
main .section, main .panel, main .notes-card, main .example-box,
main .qa-box, main .callout, main .card, main .goal-card,
main .scotland-card, main .fact-box, main .usecase-card {
  margin-bottom: var(--tdx-space-section);
}
main .section:last-child, main .panel:last-child { margin-bottom: 0; }
main .headline-answer {
  background: var(--tdx-panel);
  border: 1px solid var(--tdx-hairline);
  border-left: 3px solid var(--tdx-gold-rule);   /* gold as a RULE, never a glyph */
  border-radius: var(--tdx-chrome-radius);
  box-shadow: none;
}
main .cta-box h3, .cta-box h3 { color: var(--tdx-gold-on-forest); }
.hero__tag { color: var(--tdx-gold-on-forest); }   /* was 3.51 on the
                                        gradient's light stop — FAILED AA */
main mark, main .mark {
  background: var(--tdx-mark-bg);
  color: inherit;
  padding: 0 .15em;
  border-radius: 2px;
}

/* ── QUIET ROLES — handed back after the --muted retokenisation ───────── */
main .chart-caption, main .disc-band, main .field label, main .hint,
main .metric .label, main .progress-meta, main .q-help, main .no-results,
main .summary, main .tdx-reviewed-meta, main small {
  color: var(--tdx-ink-quiet);
  font-size: var(--tdx-fs-small);
  line-height: var(--tdx-lh-small);
}
main .disc-band, main .src-review, main .tdx-ad-slot__label, main .legal {
  font-size: var(--tdx-fs-micro);
  line-height: var(--tdx-lh-micro);
  color: var(--tdx-ink-quiet);
}
main .eyebrow, main .section-kicker, main .tdx-nation-note__eyebrow,
main .tdx-home-authority__eyebrow, main .page-eyebrow {
  font-family: var(--tdx-face-text);
  font-size: var(--tdx-fs-caption);
  font-weight: var(--tdx-wt-strong);
  text-transform: uppercase;
  letter-spacing: var(--tdx-track-caps);
  color: var(--tdx-gold-ink);
}
main .pos, main .up { color: var(--tdx-pos); }
main .neg, main .down { color: var(--tdx-neg); }

/* ── FOCUS — one ring, both themes ──────────────────────────────────── */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--tdx-focus);
  outline-offset: 2px;
  border-radius: 2px;
}
main a:not([class]):focus-visible {
  background: var(--tdx-mark-bg);
  text-decoration-color: currentColor;
}

/* ── CHROME ALIGNMENT (extends the tdx-chrome.css contract) ──────────── */
.tdx-toc  { margin-block: var(--tdx-s5) var(--tdx-space-section); }
.tdx-tldr { margin-block: var(--tdx-s5) var(--tdx-space-section); }
.tdx-toc li { margin: var(--tdx-space-list) 0; }
.tdx-toc, .tdx-tldr { padding: var(--tdx-card-pad); box-shadow: none; }
.tdx-toc summary, .tdx-tldr > p:first-child { font-family: var(--tdx-face-text); }
.tdx-breadcrumb, .tdx-reviewed-meta {
  font-size: var(--tdx-fs-caption);
  line-height: var(--tdx-lh-caption);
}
main .tdx-sources, main .tdx-related { max-width: var(--tdx-measure-narrow); }

/* ── DARK: the only !important in the system ────────────────────────────
   tdx-content-dark-fix.css declares these with !important; matching it keeps
   one source of truth rather than two rules disagreeing by load order. */
html:root[data-theme="dark"] main a:not([class]) {
  color: var(--tdx-link) !important;
  text-decoration-color: var(--tdx-gold-rule) !important;
}
/* tdx-theme.css's dark block sets `p, li { color: rgba(232,224,201,.82)
   !important }`. That rule was inside the unclosed @media print until the
   brace was fixed, so it is newly active. At 82% alpha over #16231d it
   composites to about 8.4:1 — legal, but it is a washed-out version of the
   token and the alpha serves no purpose. Restore the full value. Same named
   container list as the light rules, for the same reason. */
html:root[data-theme="dark"] main .section p,
html:root[data-theme="dark"] main .premium-section p,
html:root[data-theme="dark"] main .options-section p,
html:root[data-theme="dark"] main .band p,
html:root[data-theme="dark"] main .panel p,
html:root[data-theme="dark"] main .callout p,
html:root[data-theme="dark"] main .card p,
html:root[data-theme="dark"] main .method p,
html:root[data-theme="dark"] main .route p,
html:root[data-theme="dark"] main .tool p,
html:root[data-theme="dark"] main article p,
html:root[data-theme="dark"] main .section li,
html:root[data-theme="dark"] main .premium-section li,
html:root[data-theme="dark"] main .options-section li,
html:root[data-theme="dark"] main .band li,
html:root[data-theme="dark"] main .panel li,
html:root[data-theme="dark"] main .card li,
html:root[data-theme="dark"] main article li {
  color: var(--tdx-ink) !important;
}
html:root[data-theme="dark"] main .bd-table th {
  color: var(--tdx-ink-head) !important;
}

/* ── MOBILE OVERFLOW ON THE OPTIONS SHELL ───────────────────────────────
 * tdx-theme.css line 400 sets `contain-intrinsic-size: auto 760px` on the
 * progressive-rendering selector list. A SINGLE value there applies to BOTH
 * axes, so while one of those blocks is off-screen it is laid out 760px wide
 * whatever its container is. On a 390px phone that is 760 + 2x32px padding =
 * 824px inside a 327px column, and the document scrolls sideways until the
 * reader scrolls far enough for the real size to be measured.
 *
 * It only bites where the block is a GRID item: an ordinary block-level
 * section fills its container regardless. Measured across every shell at
 * 390px, the only pages affected are the 64 using .options-shell / main
 * .options-main, both of which are grids. Every other template is clean.
 *
 * The fix releases the INLINE axis only. contain-intrinsic-height is left
 * untouched, so the vertical placeholder that prevents the 0.08-0.37 CLS
 * documented at that rule still does its job — this is deliberately not a
 * sitewide change to that optimisation.
 *
 * Pre-existing, not introduced by this system: verified by disabling
 * tdx-system.css and tdx-chrome.css on the live page, where the 824px
 * placeholder persists unchanged.
 */
main.options-main > *,
.options-shell > * {
  contain-intrinsic-width: auto none;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  html:root {
    --tdx-card-pad: var(--tdx-card-pad-sm);
    --tdx-rise-h2: calc(var(--tdx-lead-h2) * 2);
    --tdx-rise-h3: calc(var(--tdx-lead-h3) * 2);
    --tdx-space-section: var(--tdx-s5);
    --tdx-cell-x: var(--tdx-s2);
  }
  main table, main .bd-table { font-size: var(--tdx-fs-caption); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ── GOLD AS SMALL TEXT ON LIGHT SURFACES ──────────────────────────────
 * The brand gold (#c9a961) and the old gold ink (#a8862f) measure 2.2 and
 * 3.2 against cream, so eyebrows, kickers, badges and inline "NEW" tags set
 * in gold fail AA at their 11–13px sizes. On light surfaces they take the
 * gold ink token (4.85 worst). Gold on forest heroes and the trust footer is
 * untouched: those surfaces are dark, and the token flips with the theme.
 * Measured 2026-09-04 on the homepage, calculator, options and guide shells.
 */
html:root:not([data-theme="dark"]) :is(.tdx-journey__kicker, .options-card__meta, .options-trust__label,
  .options-table th, .options-mini-card strong, .finder-help-card > span, .trusted-strip__eyebrow,
  .stats__inner strong, .philosophy__inner h2 em, .tdx-newsletter__note a, .nav-card__cta, .goal-card__kicker,
  .premium-pill, .article h2 em, .trusted-strip h2 em, .trusted-firm__cta) {
  color: var(--tdx-gold-ink);
}
html:root:not([data-theme="dark"]) main .feature-link strong[style] {
  color: var(--tdx-gold-ink) !important; /* inline colour on the "NEW" tags */
}
/* The read-time badge only ever sits in a forest hero, where the old gold
 * ink (#a8862f, 3.6–4.5) is the wrong gold: brand gold measures 6+. Both themes. */
:is(.hero, .page-hero, .premium-hero, .options-hero, .result-hero, .tool-result-hero, .tip-hero) .tdx-read-badge {
  color: #c9a961 !important;
}