/* =============================================================================
   RETIREMENT LAB — CENTRAL STYLESHEET
   retiring.guide · build 20260906-05

   This is the ONLY stylesheet on the site. Every page (calculator hub, the ten
   calculator landing pages, methodology, privacy, cookies, terms, support,
   accessibility, 404) and every script-generated component reads its
   presentation from here. There are no inline styles for appearance; scripts
   only set `hidden` attributes, state classes, and chart coordinates.

   DESIGN LANGUAGE
   Shared with winning.monster: warm ivory paper, deep navy ink, emerald as the
   single action colour, gold for emphasis and warnings, ledger red for risk.
   Serif display face (Besley) for headlines, Public Sans for reading, IBM Plex
   Mono for eyebrows, code, and numeric labels. Cards have ONE border colour on
   all four sides, one radius, and one soft shadow — status is shown by tinting
   the whole card, never by colouring a single edge.

   HOW TO RESKIN
   Change the custom properties in §1 (Tokens). Everything else references
   them. Component rules never hard-code a colour, radius, or font.

   NAMING PROTOCOL
   • Tokens ....... --rl-<group>-<name>   e.g. --rl-color-green, --rl-radius-md
   • Layout ....... .rl-page, .rl-container   (site-wide wrappers)
   • Components ... one family prefix per area, hyphenated, lower-case:
        scenario-*   calculator navigation and panels (the hub)
        quick-*      the ten quick calculators (inputs, answers, charts)
        plan-* / legacy names in §9   the detailed household plan
        rl-legal-*   content pages (methodology, privacy, terms, support…)
        rl-privacy-* consent banner and privacy settings dialog
        rl-dialog-*  modal dialogs (share, import)
   • State ........ .is-<state>  (is-active, is-risk, is-positive, is-compact…)
                    ARIA attributes are also used as state hooks where the
                    markup already carries them ([aria-selected], [hidden]).
   • Chart marks .. quick-line-<role> / chart .line-<role>: primary, secondary,
                    tertiary, quaternary. Roles map to tokens in §1.5.

   TABLE OF CONTENTS
     §1  Tokens (colours, type, spacing, radii, shadows, layers)
     §2  Fonts (self-hosted, subset to Latin)
     §3  Base & reset
     §4  Utilities: text helpers, buttons, badges, notes
     §5  Site header (hub) and content-page header
     §6  Hero
     §7  Calculator navigation (tabs; pinned/compact mode)
     §8  Quick calculators (panels, inputs, answers, metrics, charts, tables)
     §9  Detailed household plan
     §10 Data tables (shared)
     §11 Glossary, footer, no-script notice
     §12 Content pages (rl-legal-*)
     §13 Consent banner and privacy dialog
     §14 Dialogs and toasts
     §15 Responsive breakpoints
     §16 Print, reduced motion, forced colours
   ============================================================================= */


/* =============================================================================
   §1  TOKENS
   All values that give the site its look live here.
   ============================================================================= */
:root {
  color-scheme: light;

  /* --- 1.1 Colour: surfaces ------------------------------------------------ */
  --rl-color-paper:        #FBF6EC;   /* page background — warm ivory          */
  --rl-color-paper-deep:   #F4EDDD;   /* recessed areas (input shells, footer) */
  --rl-color-card:         #FFFFFF;   /* cards and panels                      */
  --rl-color-card-tint:    #FDFBF5;   /* subtle card variant                   */

  /* --- 1.2 Colour: ink ----------------------------------------------------- */
  --rl-color-navy:         #12283A;   /* headings, primary text                */
  --rl-color-ink:          #1C3446;   /* body text                             */
  --rl-color-ink-soft:     #3D566C;   /* secondary text  (7.4:1 on paper)      */
  --rl-color-ink-faint:    #546A7E;   /* captions, hints (5.2:1 on paper)      */
  --rl-color-on-dark:      #FFFFFF;   /* text on navy surfaces                 */
  --rl-color-on-dark-soft: #C8D6E0;

  /* --- 1.3 Colour: lines --------------------------------------------------- */
  --rl-color-line:         #E5DCC8;   /* every card border, every divider      */
  --rl-color-line-strong:  #C9BD9F;   /* input borders, table header rule      */

  /* --- 1.4 Colour: accents (text-safe values pass WCAG AA on white) -------- */
  --rl-color-green:        #0E7C4A;   /* the single action colour              */
  --rl-color-green-dark:   #0A5F39;
  --rl-color-green-bright: #19A863;   /* chart line, decorative only           */
  --rl-color-green-soft:   #E2F3E8;
  --rl-color-gold:         #8A6108;   /* emphasis, cautions (text-safe, 4.8:1 on gold-soft) */
  --rl-color-gold-bright:  #F2B441;   /* focus rings, decorative               */
  --rl-color-gold-soft:    #FBEFD2;
  --rl-color-red:          #B3362B;   /* risk, errors, destructive actions     */
  --rl-color-red-bright:   #E05A4E;
  --rl-color-red-soft:     #FADFDB;
  --rl-color-navy-soft:    #E6EDF3;   /* neutral information tint              */

  /* --- 1.5 Colour: chart series ------------------------------------------- */
  --rl-chart-primary:      var(--rl-color-green);
  --rl-chart-secondary:    var(--rl-color-gold);
  --rl-chart-tertiary:     #3D566C;
  --rl-chart-quaternary:   var(--rl-color-red-bright);
  --rl-chart-grid:         #EEE7D6;
  --rl-chart-axis:         var(--rl-color-ink-faint);
  --rl-chart-band:         rgba(14, 124, 74, .12);
  --rl-chart-range:        rgba(176, 124, 10, .12);

  /* --- 1.6 Typography ------------------------------------------------------ */
  --rl-font-display: "Besley", Georgia, "Times New Roman", serif;
  --rl-font-body:    "Public Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --rl-font-mono:    "IBM Plex Mono", "SF Mono", Consolas, monospace;
  --rl-text-base:    16px;
  --rl-line-height:  1.6;

  /* --- 1.7 Spacing scale --------------------------------------------------- */
  --rl-space-1: 4px;
  --rl-space-2: 8px;
  --rl-space-3: 12px;
  --rl-space-4: 16px;
  --rl-space-5: 22px;
  --rl-space-6: 30px;
  --rl-space-7: 44px;

  /* --- 1.8 Radii, shadows, focus ------------------------------------------ */
  --rl-radius-sm: 8px;
  --rl-radius-md: 12px;    /* cards, inputs, buttons                          */
  --rl-radius-lg: 18px;    /* hero, large panels                              */
  --rl-radius-pill: 999px;
  --rl-shadow-sm: 0 1px 2px rgba(18, 40, 58, .06), 0 12px 30px -16px rgba(18, 40, 58, .25);
  --rl-shadow-md: 0 2px 4px rgba(18, 40, 58, .06), 0 24px 48px -20px rgba(18, 40, 58, .30);
  --rl-focus: 0 0 0 3px var(--rl-color-gold-bright);

  /* --- 1.9 Layout ---------------------------------------------------------- */
  --rl-container:     1420px;  /* hub width                                    */
  --rl-container-text: 1180px; /* content pages                                */
  --rl-gutter:        22px;
  --rl-header-height: 64px;
  --rl-target:        44px;    /* minimum interactive size (WCAG 2.5.8)        */

  /* --- 1.10 Stacking order ------------------------------------------------- */
  --rl-z-nav:     85;
  --rl-z-header:  100;
  --rl-z-menu:    120;
  --rl-z-toast:   999;
  --rl-z-consent: 2147483000;
}


/* =============================================================================
   §2  FONTS — self-hosted (SIL Open Font License), Latin subset.
   Files live in /assets/fonts/. `font-display: swap` shows fallback text first.
   ============================================================================= */
@font-face { font-family: "Besley"; src: url("fonts/besley.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Besley"; src: url("fonts/besley-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/publicsans.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/publicsans-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibmplexmono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibmplexmono-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }


/* =============================================================================
   §3  BASE & RESET
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

/* [hidden] must always win, even over display rules on the same element. */
[hidden] { display: none !important; }

html {
  max-width: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  /* Anchor jumps land below the sticky header + pinned navigation. */
  scroll-padding-top: calc(var(--rl-header-height) + 72px);
}

body {
  margin: 0;
  min-width: 320px;
  max-width: 100%;
  overflow-x: clip;
  color: var(--rl-color-ink);
  background: var(--rl-color-paper);
  font-family: var(--rl-font-body);
  font-size: var(--rl-text-base);
  line-height: var(--rl-line-height);
  -webkit-font-smoothing: antialiased;
}

img, svg, canvas { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; max-width: 100%; }
button { cursor: pointer; }
code { font-family: var(--rl-font-mono); font-size: .9em; overflow-wrap: anywhere; }

a { color: var(--rl-color-green-dark); text-decoration-thickness: .08em; text-underline-offset: 3px; }
a:hover { color: var(--rl-color-navy); }

/* Headings: serif display face; body copy stays sans. */
h1, h2, h3, h4 { margin: 0 0 .4em; color: var(--rl-color-navy); font-family: var(--rl-font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.04; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1em; }
/* Italic emphasis inside a heading turns green — the winning.monster signature. */
h1 em, h2 em { color: var(--rl-color-green); font-style: italic; font-weight: 500; }

/* One focus style everywhere: gold ring, offset so it never hides a border. */
:focus-visible { outline: 3px solid var(--rl-color-gold-bright); outline-offset: 2px; border-radius: var(--rl-radius-sm); }

::selection { background: var(--rl-color-gold-soft); color: var(--rl-color-navy); }


/* =============================================================================
   §4  UTILITIES
   ============================================================================= */

/* 4.1 Screen-reader-only text. !important protects it from component rules. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 4.2 Skip link: visible only when focused. */
.skip-link {
  position: fixed;
  z-index: 9999;
  top: var(--rl-space-2);
  left: var(--rl-space-2);
  padding: 10px 14px;
  color: var(--rl-color-on-dark);
  background: var(--rl-color-navy);
  border-radius: var(--rl-radius-sm);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

/* 4.3 Eyebrow: small mono uppercase label above a heading. */
.eyebrow,
.rl-legal-eyebrow,
.rl-privacy-kicker {
  display: block;
  margin: 0 0 var(--rl-space-2);
  color: var(--rl-color-gold);
  font-family: var(--rl-font-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* 4.4 Buttons. One base; variants change colour only.
   .button           filled emerald  — the primary action on a screen
   .button-secondary soft emerald    — secondary actions, links between tools
   .button-ghost     outlined        — neutral actions (restore, menus)
   .button-danger-ghost outlined red — destructive actions
   .button-compact   smaller padding for toolbars                              */
.button, .file-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--rl-target);
  padding: 8px 16px;
  color: var(--rl-color-on-dark);
  background: var(--rl-color-green);
  border: 1px solid var(--rl-color-green);
  border-radius: var(--rl-radius-md);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}
.button:hover, .file-button:hover { color: var(--rl-color-on-dark); background: var(--rl-color-green-dark); border-color: var(--rl-color-green-dark); transform: translateY(-1px); }
.button:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.button-secondary { color: var(--rl-color-green-dark); background: var(--rl-color-green-soft); border-color: var(--rl-color-green-soft); }
.button-secondary:hover { color: var(--rl-color-on-dark); }
.button-ghost { color: var(--rl-color-navy); background: var(--rl-color-card); border-color: var(--rl-color-line-strong); }
.button-ghost:hover { color: var(--rl-color-navy); background: var(--rl-color-paper-deep); border-color: var(--rl-color-line-strong); }
.button-danger-ghost { color: var(--rl-color-red); background: var(--rl-color-card); border-color: var(--rl-color-red-soft); }
.button-danger-ghost:hover { color: var(--rl-color-on-dark); background: var(--rl-color-red); border-color: var(--rl-color-red); }
.button-compact { min-height: 36px; padding: 6px 12px; font-size: .82rem; }
.icon-button { min-width: var(--rl-target); padding: 6px; color: var(--rl-color-red); background: var(--rl-color-card); border-color: var(--rl-color-line); }
.icon-button:hover { color: var(--rl-color-on-dark); background: var(--rl-color-red); border-color: var(--rl-color-red); }

/* 4.5 Badge: small pill label. */
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 10px; color: var(--rl-color-navy); background: var(--rl-color-navy-soft); border-radius: var(--rl-radius-pill); font-size: .74rem; font-weight: 700; white-space: nowrap; }
.badge.teal { color: var(--rl-color-green-dark); background: var(--rl-color-green-soft); }
.badge.orange { color: var(--rl-color-gold); background: var(--rl-color-gold-soft); }

/* 4.6 Notes and callouts: tinted boxes with a full border (never a single
   coloured edge). Used inside forms and results.                              */
.callout,
.quick-assumption-note,
.model-badge,
.rl-legal-note,
.noscript-warning,
.quick-loading-notice {
  margin: 0;
  padding: 12px 14px;
  color: var(--rl-color-ink);
  background: var(--rl-color-green-soft);
  border: 1px solid #C6E4D2;
  border-radius: var(--rl-radius-md);
  font-size: .86rem;
  line-height: 1.5;
}
.callout strong, .quick-assumption-note strong, .rl-legal-note strong, .noscript-warning strong { color: var(--rl-color-navy); }
.callout.warning, .noscript-warning, .rl-legal-note { background: var(--rl-color-gold-soft); border-color: #EBD6A4; }
.model-badge { background: var(--rl-color-navy-soft); border-color: #CBD8E3; }
.quick-loading-notice { background: var(--rl-color-navy-soft); border-color: #CBD8E3; margin-bottom: var(--rl-space-4); }
.quick-loading-notice.is-error { background: var(--rl-color-red-soft); border-color: #EBB9B3; }
.callout + .form-grid, .form-grid + .callout, .callout + .subsection { margin-top: var(--rl-space-4); }

/* 4.7 Limitations disclosure ("What this assumes"). */
.quick-limits, .quick-not-modeled { margin: 0; padding: 10px 14px; background: var(--rl-color-gold-soft); border: 1px solid #EBD6A4; border-radius: var(--rl-radius-md); font-size: .86rem; }
.quick-limits > summary { min-height: 32px; color: var(--rl-color-gold); cursor: pointer; font-weight: 700; }
.quick-limits ul { margin: 8px 0 0; padding-left: 20px; }
.quick-limits li { margin: 4px 0; }
.quick-not-modeled { margin-top: 10px; }


/* =============================================================================
   §5  SITE HEADER (hub) and CONTENT-PAGE HEADER
   Both share the same look: sticky ivory bar, navy wordmark, emerald mark.
   ============================================================================= */
.site-header,
.rl-legal-header {
  position: sticky;
  z-index: var(--rl-z-header);
  top: 0;
  background: var(--rl-color-paper);   /* opaque: backdrop blur flickers on Android */
  border-bottom: 1px solid var(--rl-color-line);
}
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-space-5);
  min-height: var(--rl-header-height);
  padding: 8px max(var(--rl-gutter), calc((100vw - var(--rl-container)) / 2));
}
.rl-legal-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rl-space-5);
  width: min(var(--rl-container-text), calc(100% - 2 * var(--rl-gutter)));
  min-height: var(--rl-header-height);
  margin: 0 auto;
}

/* Brand lock-up: emerald square mark + serif wordmark + mono tagline. */
.brand-lockup, .rl-legal-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--rl-color-navy); text-decoration: none; }
.brand-mark, .rl-legal-brand-mark {
  display: grid;
  flex: none;
  width: 36px;
  height: 36px;
  place-items: center;
  color: var(--rl-color-on-dark);
  background: var(--rl-color-green);
  border-radius: var(--rl-radius-sm);
  font-family: var(--rl-font-display);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -.04em;
}
.site-header h1, .brand-title { margin: 0; font-family: var(--rl-font-display); font-size: 1.15rem; font-weight: 800; letter-spacing: .01em; line-height: 1.1; }
.site-header .eyebrow { margin: 0 0 2px; font-size: .6rem; letter-spacing: .18em; }
.rl-legal-brand { font-family: var(--rl-font-display); font-size: 1.15rem; font-weight: 800; }

/* Content-page navigation links. */
.rl-legal-header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.rl-legal-header nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 6px 12px; color: var(--rl-color-ink-soft); border-radius: var(--rl-radius-sm); font-size: .88rem; font-weight: 600; text-decoration: none; }
.rl-legal-header nav a:hover { color: var(--rl-color-navy); background: var(--rl-color-paper-deep); }
.rl-legal-header nav a[aria-current="page"] { color: var(--rl-color-green-dark); background: var(--rl-color-green-soft); }

/* Hub header actions (only shown on the detailed-plan tab). */
.header-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.save-state { margin-right: 4px; color: var(--rl-color-ink-faint); font-family: var(--rl-font-mono); font-size: .72rem; }
body:not([data-active-scenario="full"]) .header-actions { display: none; }

/* "More ▾" menu in the header. */
.actions-menu { position: relative; }
.actions-menu > summary { list-style: none; cursor: pointer; }
.actions-menu > summary::-webkit-details-marker { display: none; }
.actions-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: var(--rl-z-menu);
  display: grid;
  gap: 4px;
  min-width: 260px;
  padding: 8px;
  background: var(--rl-color-card);
  border: 1px solid var(--rl-color-line);
  border-radius: var(--rl-radius-md);
  box-shadow: var(--rl-shadow-md);
}
.actions-menu-list .button, .actions-menu-list .file-button { width: 100%; justify-content: flex-start; text-align: left; }


/* =============================================================================
   §6  HERO
   Two columns: copy on ivory, photograph with a caption overlay.
   ============================================================================= */
.scenario-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(400px, .95fr);
  width: min(var(--rl-container), calc(100% - 2 * var(--rl-gutter)));
  min-height: 300px;
  margin: var(--rl-space-5) auto var(--rl-space-4);
  overflow: hidden;
  background: var(--rl-color-card);
  border: 1px solid var(--rl-color-line);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-sm);
}
.scenario-hero-copy { display: grid; align-content: center; padding: clamp(30px, 4vw, 56px); }
.scenario-hero-copy h1, .scenario-hero-copy h2 { max-width: 16ch; margin: 0; }
.scenario-hero-copy > p:not(.eyebrow) { max-width: 62ch; margin: var(--rl-space-4) 0 var(--rl-space-5); color: var(--rl-color-ink-soft); font-size: 1.02rem; }
.hero-cta { margin: 0 0 var(--rl-space-4); }
.hero-cta .button { min-height: 48px; padding: 0 22px; font-size: 1rem; }

/* Trust row: checklist pills under the headline. */
.hero-trust-row { display: flex; flex-wrap: wrap; gap: var(--rl-space-2); margin: 0; padding: 0; list-style: none; }
.hero-trust-row span, .hero-trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--rl-color-ink-soft);
  background: var(--rl-color-paper);
  border: 1px solid var(--rl-color-line);
  border-radius: var(--rl-radius-pill);
  font-size: .82rem;
}
.hero-trust-row strong { color: var(--rl-color-green-dark); }

/* Photograph column with caption card. */
.scenario-hero-photo {
  position: relative;
  min-height: 300px;
  margin: 0;
  background: var(--rl-color-paper-deep);
}
.scenario-hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; }
.scenario-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(18, 40, 58, .78) 100%); pointer-events: none; }
.hero-photo-note { position: absolute; z-index: 1; right: var(--rl-space-5); bottom: var(--rl-space-5); left: var(--rl-space-5); display: grid; gap: 4px; max-width: 520px; color: var(--rl-color-on-dark); }
.hero-photo-kicker { color: var(--rl-color-gold-bright); font-family: var(--rl-font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.hero-photo-note strong { max-width: 42ch; color: var(--rl-color-on-dark); font-family: var(--rl-font-display); font-size: 1.15rem; font-weight: 600; line-height: 1.3; }


/* =============================================================================
   §7  CALCULATOR NAVIGATION
   A grid of question tabs that sits in the page flow. Once it scrolls out of
   view the script switches the SAME element to a fixed slim bar under the
   header (.is-compact) showing only the active tab and an "All calculators"
   button; .is-expanded drops the full grid down from that bar. A placeholder
   element keeps the grid's space in the flow so the page never shifts.
   ============================================================================= */
.scenario-navigation-placeholder { width: 100%; height: 0; margin: 0; }
.scenario-navigation {
  position: relative;
  z-index: var(--rl-z-nav);
  width: min(var(--rl-container), calc(100% - 2 * var(--rl-gutter)));
  margin: 0 auto var(--rl-space-5);
  padding: 6px;
  background: var(--rl-color-card);
  border: 1px solid var(--rl-color-line);
  border-radius: var(--rl-radius-lg);
  box-shadow: var(--rl-shadow-sm);
}
.scenario-tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; min-width: 0; }
.scenario-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 64px;
  padding: 9px 12px;
  color: var(--rl-color-ink);
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--rl-radius-md);
  transition: background 120ms ease, border-color 120ms ease;
}
.scenario-tab:hover { background: var(--rl-color-paper); border-color: var(--rl-color-line); }
.scenario-tab[aria-selected="true"], .scenario-tab.is-active { color: var(--rl-color-navy); background: var(--rl-color-green-soft); border-color: #C6E4D2; }
.scenario-tab > span:last-child { min-width: 0; }
.scenario-tab strong { display: block; color: inherit; font-size: .9rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.scenario-tab small { display: block; margin-top: 3px; color: var(--rl-color-ink-faint); font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere; }
.scenario-tab-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--rl-color-green-dark);
  background: var(--rl-color-card);
  border: 1px solid var(--rl-color-line);
  border-radius: var(--rl-radius-sm);
  font-family: var(--rl-font-mono);
  font-size: .7rem;
  font-weight: 600;
}
.scenario-tab[aria-selected="true"] .scenario-tab-icon, .scenario-tab.is-active .scenario-tab-icon { color: var(--rl-color-on-dark); background: var(--rl-color-green); border-color: var(--rl-color-green); }

/* 7.1 Compact (pinned) mode: a fixed bar under the site header. */
.scenario-nav-toggle { display: none; }
.scenario-navigation.is-compact {
  position: fixed;
  top: var(--rl-nav-fixed-top, var(--rl-header-height));
  /* Centred with insets rather than a transform: transforms on fixed,
     composited elements are another flicker trigger on mobile GPUs. */
  right: max(var(--rl-gutter), calc((100vw - var(--rl-container)) / 2));
  left: max(var(--rl-gutter), calc((100vw - var(--rl-container)) / 2));
  width: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rl-space-2);
  max-height: calc(100vh - var(--rl-nav-fixed-top, var(--rl-header-height)) - 12px);
  margin: 0;
  padding: 5px 6px;
  overflow: auto;
  border-radius: 0 0 var(--rl-radius-md) var(--rl-radius-md);
  box-shadow: var(--rl-shadow-md);
}
.scenario-navigation.is-compact .scenario-tablist { display: flex; flex-wrap: wrap; gap: 5px; }
.scenario-navigation.is-compact:not(.is-expanded) .scenario-tab:not([aria-selected="true"]) { display: none; }
.scenario-navigation.is-compact:not(.is-expanded) .scenario-tab[aria-selected="true"] { flex: 1 1 auto; min-height: var(--rl-target); padding: 5px 10px; background: transparent; border-color: transparent; cursor: default; }
.scenario-navigation.is-compact:not(.is-expanded) .scenario-tab[aria-selected="true"] small { display: inline; margin-left: 6px; }
.scenario-navigation.is-compact.is-expanded { grid-template-columns: minmax(0, 1fr); }
.scenario-navigation.is-compact.is-expanded .scenario-tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scenario-navigation.is-compact.is-expanded .scenario-nav-toggle { justify-self: end; }
.scenario-navigation.is-compact .scenario-nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--rl-target);
  padding: 8px 14px;
  color: var(--rl-color-navy);
  background: var(--rl-color-card);
  border: 1px solid var(--rl-color-line-strong);
  border-radius: var(--rl-radius-sm);
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.scenario-navigation.is-compact .scenario-nav-toggle:hover { background: var(--rl-color-paper-deep); }
.scenario-navigation.is-compact.is-expanded .scenario-nav-toggle i { display: inline-block; transform: rotate(180deg); }


/* =============================================================================
   §8  QUICK CALCULATORS
   Every calculator tab uses the same skeleton:
     .scenario-panel
       .scenario-panel-heading          question + restore button
       .quick-tool-layout               two columns: inputs | outputs
         .quick-input-card              form (sticky on wide screens)
         .quick-output-stack            answer card, metrics, charts, tables
   ============================================================================= */
.scenario-main { width: min(var(--rl-container), calc(100% - 2 * var(--rl-gutter))); margin: 0 auto var(--rl-space-7); }
.scenario-panel { min-width: 0; animation: rl-panel-enter 180ms ease-out; }
.scenario-panel[hidden] { display: none !important; }
.scenario-panel.is-loading .quick-output-stack { opacity: .55; }
@keyframes rl-panel-enter { from { opacity: .4; } to { opacity: 1; } }

/* 8.1 Panel heading */
.scenario-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rl-space-5); margin: 0 2px var(--rl-space-4); }
.scenario-panel-heading > div { min-width: 0; }
.scenario-panel-heading h2 { max-width: 24ch; margin-bottom: 6px; }
.scenario-panel-heading p:not(.eyebrow) { max-width: 78ch; margin: 0; color: var(--rl-color-ink-soft); }
.scenario-panel-heading > .button { flex: 0 0 auto; }

/* 8.2 Two-column layout */
.quick-tool-layout { display: grid; grid-template-columns: minmax(340px, 430px) minmax(0, 1fr); gap: var(--rl-space-4); align-items: start; min-width: 0; }
.quick-tool-layout-wide-input { grid-template-columns: minmax(410px, 520px) minmax(0, 1fr); }

/* 8.3 Cards — one border, one radius, one shadow. */
.quick-input-card,
.quick-visual-card,
.quick-table-disclosure,
.quick-recommendation-card,
.quick-metric,
.quick-answer-card,
.quick-reference-grid > div {
  min-width: 0;
  color: var(--rl-color-ink);
  background: var(--rl-color-card);
  border: 1px solid var(--rl-color-line);
  border-radius: var(--rl-radius-md);
  box-shadow: var(--rl-shadow-sm);
}
.quick-input-card { position: sticky; top: calc(var(--rl-header-height) + 66px); display: grid; gap: var(--rl-space-4); padding: var(--rl-space-4); }
.quick-output-stack { display: grid; gap: var(--rl-space-4); min-width: 0; }

/* 8.4 Card headings with a numbered step */
.quick-card-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px; align-items: start; }
.quick-card-heading h3 { margin: 2px 0 3px; font-size: 1.05rem; }
.quick-card-heading p { margin: 0; color: var(--rl-color-ink-faint); font-size: .84rem; }
.quick-step, .step-number, .quick-answer-icon, .status-icon, .insight-icon, .claim-rank {
  display: grid;
  place-items: center;
  color: var(--rl-color-on-dark);
  background: var(--rl-color-navy);
  border-radius: var(--rl-radius-sm);
  font-family: var(--rl-font-mono);
  font-weight: 600;
}
.quick-step, .step-number { width: 32px; height: 32px; font-size: .8rem; }

/* 8.5 Fields. Labels reserve two lines so inputs in one row line up. */
.quick-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; min-width: 0; }
.quick-field { display: grid; align-content: start; gap: 6px; min-width: 0; }
.quick-field > label, .field > label, .field .label, .checkbox-field label, .quick-check strong { color: var(--rl-color-navy); font-size: .88rem; font-weight: 700; line-height: 1.35; }
.quick-field-grid .quick-field > label { display: flex; align-items: flex-end; min-height: calc(2 * 1.35em); }
.quick-field small, .field .hint, .checkbox-field small, .quick-check small { color: var(--rl-color-ink-faint); font-size: .8rem; line-height: 1.45; }

/* Shared text-input skin (quick tools and household plan). */
.quick-field input, .quick-field select,
.field input, .field select, .field textarea,
.quick-input-prefix, .quick-input-suffix {
  width: 100%;
  min-width: 0;
  min-height: var(--rl-target);
  padding: 8px 12px;
  color: var(--rl-color-ink);
  background: var(--rl-color-card);
  border: 1px solid var(--rl-color-line-strong);
  border-radius: var(--rl-radius-sm);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field textarea { min-height: 80px; resize: vertical; }
.quick-field input:hover, .quick-field select:hover, .field input:hover, .field select:hover, .field textarea:hover { border-color: var(--rl-color-ink-faint); }
.quick-field input:focus, .quick-field select:focus, .field input:focus, .field select:focus, .field textarea:focus,
.quick-input-prefix:focus-within, .quick-input-suffix:focus-within { border-color: var(--rl-color-green); box-shadow: 0 0 0 3px var(--rl-color-green-soft); }
.quick-field input[type="month"], .field input[type="month"], .field input[type="date"] { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; overflow: hidden; }
.field input[type="month"]::-webkit-datetime-edit, .field input[type="date"]::-webkit-datetime-edit { min-width: 0; padding: 0; }

/* Input with a unit prefix ("$") or suffix ("%"). */
.quick-input-prefix, .quick-input-suffix { display: grid; padding: 0; overflow: hidden; }
.quick-input-prefix { grid-template-columns: auto minmax(0, 1fr); }
.quick-input-suffix { grid-template-columns: minmax(0, 1fr) auto; }
.quick-input-prefix > span, .quick-input-suffix > span { display: grid; min-width: 40px; place-items: center; padding: 0 10px; color: var(--rl-color-ink-faint); background: var(--rl-color-paper-deep); font-family: var(--rl-font-mono); font-size: .78rem; font-weight: 600; white-space: nowrap; }
.quick-input-prefix input, .quick-input-suffix input { min-height: calc(var(--rl-target) - 2px); border: 0; border-radius: 0; box-shadow: none; }
.quick-input-prefix input:focus, .quick-input-suffix input:focus { box-shadow: none; }

/* Validation state. */
[aria-invalid="true"], .quick-input-prefix:has([aria-invalid="true"]), .quick-input-suffix:has([aria-invalid="true"]) { border-color: var(--rl-color-red) !important; background: var(--rl-color-red-soft); }
.field-error { display: block; margin-top: 4px; color: var(--rl-color-red); font-size: .82rem; font-weight: 600; }

/* Checkbox rows. */
.quick-check, .checkbox-field { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 9px; min-height: var(--rl-target); padding: 10px 12px; background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-sm); }
.quick-check { grid-column: 1 / -1; }
.quick-check input, .checkbox-field input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--rl-color-green); }
.checkbox-field label { cursor: pointer; }
.checkbox-field small { display: block; margin-top: 2px; }

/* Collapsible "Optional assumptions". */
.quick-advanced { padding-top: 4px; border-top: 1px dashed var(--rl-color-line-strong); }
.quick-advanced > summary { display: flex; align-items: center; min-height: 36px; padding: 6px 0; color: var(--rl-color-green-dark); cursor: pointer; font-size: .86rem; font-weight: 700; }
.quick-advanced[open] > summary { margin-bottom: var(--rl-space-3); }

/* Per-person input card (Social Security tabs). */
.quick-person-card { display: grid; gap: var(--rl-space-3); padding: 13px; background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); }
.quick-person-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--rl-space-3); padding-bottom: 7px; border-bottom: 1px solid var(--rl-color-line); }
.quick-person-heading strong { color: var(--rl-color-navy); }
.quick-person-heading span { color: var(--rl-color-gold); font-family: var(--rl-font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }

.quick-input-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: var(--rl-space-3); }
.quick-input-actions .button { min-width: 0; white-space: normal; }
.quick-schedule-summary { color: var(--rl-color-ink-soft); font-size: .84rem; }
.quick-dollars-note, .chart-note, .fine-print, .decision-note, .table-subnote { margin: 8px 0 0; color: var(--rl-color-ink-faint); font-size: .8rem; line-height: 1.45; }
.table-subnote { display: block; margin-top: 2px; font-size: .74rem; }

/* 8.6 Answer card — the direct answer. Status tints the WHOLE card. */
.quick-answer-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: start; padding: 18px; }
.quick-answer-card h3 { margin: 0 0 6px; font-size: clamp(1.15rem, 1.7vw, 1.5rem); overflow-wrap: anywhere; }
.quick-answer-card p { margin: 0; color: var(--rl-color-ink-soft); font-size: .9rem; line-height: 1.55; }
.quick-answer-card .eyebrow { margin-bottom: 4px; }
.quick-answer-icon { width: 38px; height: 38px; font-size: .8rem; }
.quick-answer-card.is-positive { background: var(--rl-color-green-soft); border-color: #C6E4D2; }
.quick-answer-card.is-positive .quick-answer-icon { background: var(--rl-color-green); }
.quick-answer-card.is-warning { background: var(--rl-color-gold-soft); border-color: #EBD6A4; }
.quick-answer-card.is-warning .quick-answer-icon { background: var(--rl-color-gold); }
.quick-answer-card.is-risk { background: var(--rl-color-red-soft); border-color: #EBB9B3; }
.quick-answer-card.is-risk .quick-answer-icon { background: var(--rl-color-red); }
.quick-answer-card.is-neutral { background: var(--rl-color-navy-soft); border-color: #CBD8E3; }

/* 8.7 Metric tiles. Status tints the tile; no coloured edges. */
.quick-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.quick-metric { display: grid; align-content: start; min-height: 112px; padding: 13px 14px; }
.quick-metric > span, .metric .metric-label, .quick-reference-grid dt, .focus-summary span, .ss-summary-strip span { display: block; color: var(--rl-color-ink-faint); font-family: var(--rl-font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.quick-metric strong, .metric strong { display: block; margin: 7px 0 3px; color: var(--rl-color-navy); font-family: var(--rl-font-display); font-size: clamp(1.2rem, 2vw, 1.55rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.quick-metric small, .metric small { color: var(--rl-color-ink-faint); font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; }
.quick-metric.positive { background: var(--rl-color-green-soft); border-color: #C6E4D2; }
.quick-metric.risk { background: var(--rl-color-red-soft); border-color: #EBB9B3; }
.quick-metric.risk strong { color: var(--rl-color-red); }

/* Reference grid (definition list of statistics). */
.quick-reference-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 0; }
.quick-reference-grid > div { padding: 12px 14px; box-shadow: none; }
.quick-reference-grid dd { margin: 5px 0 0; color: var(--rl-color-navy); font-weight: 700; }
.quick-reference-grid dd small { display: block; color: var(--rl-color-ink-faint); font-weight: 400; font-size: .78rem; }

/* 8.8 Chart cards. The hover read-out is a compact card that follows the
   pointer (the script positions it and flips it left near the right edge).
   It has pointer-events: none so it can never sit between the cursor and the
   plot. Setting --rl-tooltip-docked: 1 here would dock it below the plot
   instead; the scripts honour that flag.                                      */
.quick-visual-card { position: relative; padding: 16px 16px 12px; overflow: hidden; }
.quick-chart-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rl-space-4); margin-bottom: 4px; }
.quick-chart-heading h3 { margin: 0; font-size: 1.05rem; }
.chart-interaction-hint, .chart-explorer-hint { flex: 0 0 auto; padding: 5px 10px; color: var(--rl-color-ink-faint); background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-pill); font-size: .74rem; font-weight: 600; white-space: nowrap; }
.quick-chart { position: relative; min-height: 315px; outline: none; }
.quick-chart-tall { min-height: 360px; }
.quick-chart:focus-visible { border-radius: var(--rl-radius-sm); box-shadow: var(--rl-focus); }
.quick-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.quick-chart-empty, .chart-empty { display: grid; min-height: 240px; place-items: center; color: var(--rl-color-ink-faint); background: var(--rl-color-paper); border-radius: var(--rl-radius-sm); font-size: .86rem; }

/* Legend swatches */
.quick-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0 66px; color: var(--rl-color-ink-soft); font-size: .8rem; }
.quick-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.quick-chart-legend i { display: block; width: 18px; height: 3px; border-radius: var(--rl-radius-pill); }
.quick-chart-legend i.quick-line-primary { background: var(--rl-chart-primary); }
.quick-chart-legend i.quick-line-secondary { background: var(--rl-chart-secondary); }
.quick-chart-legend i.quick-line-tertiary { background: var(--rl-chart-tertiary); }
.quick-chart-legend i.quick-line-quaternary { background: var(--rl-chart-quaternary); }

/* SVG marks (quick charts) */
.quick-grid-line { stroke: var(--rl-chart-grid); stroke-width: 1; }
.quick-axis-tick { stroke: var(--rl-color-line-strong); stroke-width: 1; }
.quick-axis-label, .chart .axis-label, .chart .legend-label { fill: var(--rl-chart-axis); font: 600 12px var(--rl-font-body); }
.quick-chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.quick-chart-line.quick-line-primary { stroke: var(--rl-chart-primary); }
.quick-chart-line.quick-line-secondary { stroke: var(--rl-chart-secondary); stroke-width: 2.5; stroke-dasharray: 7 5; }
.quick-chart-line.quick-line-tertiary { stroke: var(--rl-chart-tertiary); stroke-width: 2.5; }
.quick-chart-line.quick-line-quaternary { stroke: var(--rl-chart-quaternary); stroke-width: 2.5; stroke-dasharray: 3 4; }
.quick-hover-dot { fill: var(--rl-color-card); stroke: var(--rl-color-navy); stroke-width: 2.5; }
.quick-hover-dot.quick-line-primary { fill: var(--rl-chart-primary); stroke: #fff; }
.quick-hover-dot.quick-line-secondary { fill: var(--rl-chart-secondary); stroke: #fff; }
.quick-hover-dot.quick-line-tertiary { fill: var(--rl-chart-tertiary); stroke: #fff; }
.quick-hover-dot.quick-line-quaternary { fill: var(--rl-chart-quaternary); stroke: #fff; }
.quick-hover-line, .chart-hover-line { stroke: var(--rl-color-navy); stroke-width: 1.2; stroke-dasharray: 4 4; opacity: .7; pointer-events: none; }
.quick-chart-hit, .chart-hit-area { fill: transparent; cursor: crosshair; pointer-events: all; touch-action: pan-y; outline: none; }
.chart-hit-area:focus-visible { stroke: var(--rl-color-gold-bright); stroke-width: 2; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.quick-chart-range { fill: var(--rl-chart-range); }
.quick-range-label { fill: var(--rl-color-gold); font: 600 10px var(--rl-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.quick-marker-line { stroke: var(--rl-color-ink-faint); stroke-width: 1.2; stroke-dasharray: 5 4; }
.quick-marker-line.marker-teal { stroke: var(--rl-chart-primary); }
.quick-marker-line.marker-blue { stroke: var(--rl-chart-tertiary); }
.quick-marker-line.marker-red { stroke: var(--rl-color-red); }
.quick-marker-label { fill: var(--rl-color-ink-soft); font: 600 10px var(--rl-font-mono); }
.quick-chart svg [hidden] { display: none !important; }

/* Floating hover read-out (quick charts). */
.quick-chart-tooltip {
  position: absolute;
  z-index: 5;
  width: min(260px, calc(100% - 20px));
  padding: 10px 12px;
  color: var(--rl-color-on-dark);
  background: var(--rl-color-navy);
  border-radius: var(--rl-radius-sm);
  box-shadow: var(--rl-shadow-md);
  font-size: .8rem;
  line-height: 1.35;
  pointer-events: none;
  transform: translate(12px, 0);
}
.quick-chart-tooltip.align-right { transform: translate(calc(-100% - 12px), 0); }
.quick-chart-tooltip strong { display: block; margin-bottom: 4px; padding-bottom: 4px; color: var(--rl-color-on-dark); border-bottom: 1px solid rgba(255, 255, 255, .18); font-family: var(--rl-font-display); font-size: .92rem; }
.quick-chart-tooltip span { display: flex; justify-content: space-between; gap: 12px; min-width: 0; padding: 2px 0; }
.quick-chart-tooltip em { color: var(--rl-color-on-dark-soft); font-style: normal; overflow-wrap: anywhere; }
.quick-chart-tooltip b { color: var(--rl-color-on-dark); font-family: var(--rl-font-mono); font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* 8.9 Recommendation card, link row, data-table disclosure. */
.quick-recommendation-card { display: flex; align-items: center; justify-content: space-between; gap: var(--rl-space-5); padding: 16px 18px; }
.quick-recommendation-card > div { min-width: 0; }
.quick-recommendation-card h3 { margin: 0 0 5px; overflow-wrap: anywhere; }
.quick-recommendation-card p:not(.eyebrow) { margin: 0; color: var(--rl-color-ink-soft); font-size: .86rem; }
.quick-recommendation-card .button { flex: 0 0 auto; }
.quick-link-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--rl-space-2); }
.quick-table-disclosure { overflow: hidden; }
.quick-table-disclosure > summary { min-height: var(--rl-target); padding: 12px 16px; color: var(--rl-color-navy); cursor: pointer; font-size: .9rem; font-weight: 700; }
.quick-table-disclosure[open] > summary { border-bottom: 1px solid var(--rl-color-line); }
.quick-table-disclosure .table-scroll { max-height: 430px; border: 0; border-radius: 0; }
.quick-table-disclosure table td:last-child { overflow-wrap: anywhere; }
.full-plan-panel .planner-shell { width: 100%; margin: 0; }
.full-plan-heading { margin-bottom: var(--rl-space-4); }


/* =============================================================================
   §9  DETAILED HOUSEHOLD PLAN
   Left column: collapsible input sections. Right column: sticky results.
   Class names here predate the prefix protocol; they are grouped and
   documented so a future rename is a find-and-replace.
   ============================================================================= */
.planner-shell { display: grid; grid-template-columns: minmax(520px, .97fr) minmax(520px, 1.03fr); gap: var(--rl-space-5); align-items: start; min-width: 0; }
.input-column, .results-column { min-width: 0; }
.results-sticky { position: sticky; top: calc(var(--rl-header-height) + 66px); display: grid; gap: var(--rl-space-4); min-width: 0; }

/* 9.1 Toolbar above the inputs */
.section-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--rl-space-4); margin-bottom: var(--rl-space-3); padding: 16px 18px; background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); box-shadow: var(--rl-shadow-sm); }
.section-toolbar > div { min-width: 0; }
.section-toolbar h2 { margin: 0; font-size: 1.35rem; }
.section-toolbar p:not(.eyebrow) { max-width: 70ch; margin: 5px 0 0; color: var(--rl-color-ink-soft); font-size: .86rem; }
.section-toolbar-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

/* 9.2 Validation summary */
.validation-summary { margin-bottom: var(--rl-space-4); padding: 14px 16px; color: var(--rl-color-red); background: var(--rl-color-red-soft); border: 1px solid #EBB9B3; border-radius: var(--rl-radius-md); }
.validation-summary.warning { color: var(--rl-color-gold); background: var(--rl-color-gold-soft); border-color: #EBD6A4; }
.validation-summary ul { margin: 7px 0 0; padding-left: 20px; }
.validation-summary a { color: inherit; font-weight: 700; }

/* 9.3 Collapsible input sections */
.input-section { min-width: 0; margin-bottom: var(--rl-space-3); overflow: hidden; background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); box-shadow: var(--rl-shadow-sm); }
.input-section > summary, .result-disclosure > summary, .rl-legal-accordion > summary, .methodology > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--rl-space-3);
  min-height: 60px;
  padding: 14px 18px;
  color: var(--rl-color-navy);
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.input-section > summary::-webkit-details-marker, .result-disclosure > summary::-webkit-details-marker, .rl-legal-accordion > summary::-webkit-details-marker, .methodology > summary::-webkit-details-marker { display: none; }
.input-section > summary::after, .result-disclosure > summary::after, .rl-legal-accordion > summary::after {
  content: "+";
  grid-column: 3;
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--rl-color-green-dark);
  background: var(--rl-color-green-soft);
  border-radius: var(--rl-radius-pill);
  font-family: var(--rl-font-mono);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1;
}
.input-section[open] > summary::after, .result-disclosure[open] > summary::after, .rl-legal-accordion[open] > summary::after { content: "−"; }
.input-section[open] > summary, .result-disclosure[open] > summary, .rl-legal-accordion[open] > summary { border-bottom: 1px solid var(--rl-color-line); }
.input-section > summary strong, .result-disclosure > summary strong { display: block; color: var(--rl-color-navy); font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
.input-section > summary small, .result-disclosure > summary small { display: block; margin-top: 2px; color: var(--rl-color-ink-faint); font-size: .82rem; font-weight: 400; line-height: 1.4; }
.result-disclosure > summary { grid-template-columns: minmax(0, 1fr) auto; }
.result-disclosure > summary > span { min-width: 0; }
.section-body { padding: 18px; }

/* 9.4 Form grids and fields */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; min-width: 0; }
.form-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.form-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
.form-grid + .form-grid, .form-grid + .subsection, .subsection + .form-grid, .subsection + .subsection { margin-top: 17px; }
.form-grid > *, .person-grid > *, .ss-summary-strip > *, .metric-grid > *, .claim-summary-grid > * { min-width: 0; }
.span-2 { grid-column: span 2; }
.span-full { grid-column: 1 / -1; }
.field { display: grid; align-content: start; gap: 5px; min-width: 0; }
.field .input-with-unit { position: relative; min-width: 0; }
.field .input-with-unit input { padding-right: 46px; }
.field .input-unit { position: absolute; top: 50%; right: 12px; color: var(--rl-color-ink-faint); font-family: var(--rl-font-mono); font-size: .74rem; transform: translateY(-50%); pointer-events: none; }
.range-field { display: grid; gap: 8px; }
.range-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.range-row input[type="range"] { min-height: 28px; padding: 0; border: 0; box-shadow: none; accent-color: var(--rl-color-green); }
.range-output { min-width: 68px; padding: 6px 8px; color: var(--rl-color-navy); background: var(--rl-color-green-soft); border: 1px solid #C6E4D2; border-radius: var(--rl-radius-sm); font-family: var(--rl-font-mono); font-size: .82rem; font-weight: 600; text-align: center; }
.range-scale { display: flex; justify-content: space-between; color: var(--rl-color-ink-faint); font-size: .74rem; }
.inline-details summary { display: inline; cursor: pointer; font-size: .82rem; }

/* 9.5 Subsections, person cards, repeat cards */
.subsection { min-width: 0; padding: 14px; background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); }
.subsection-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 13px; }
.subsection-heading > * { min-width: 0; }
.subsection-heading h3 { margin-bottom: .25rem; font-size: 1rem; }
.subsection-heading p { margin: 0; color: var(--rl-color-ink-faint); font-size: .82rem; }
.subsection-heading .badge { margin-left: auto; }
.person-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.person-card, .repeat-card, .ss-person-card { position: relative; min-width: 0; padding: 14px; overflow: hidden; background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); }
.person-card:only-child { grid-column: 1 / -1; }
.person-card:only-child .form-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.person-card:not(:only-child) .form-grid { grid-template-columns: 1fr; }
.person-card h4 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.person-card .person-tag { color: var(--rl-color-gold); font-family: var(--rl-font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.repeat-card { margin-bottom: 12px; }
.repeat-card:last-child { margin-bottom: 0; }
.repeat-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; margin-bottom: 13px; }
.repeat-card-header > div { min-width: 0; overflow-wrap: anywhere; }
.repeat-card-header strong { color: var(--rl-color-navy); }
.repeat-card-header span { color: var(--rl-color-ink-faint); font-size: .8rem; }
.repeat-card-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 7px; min-width: 0; }
.account-view-button { min-height: 36px; padding: 6px 10px; font-size: .8rem; white-space: nowrap; }
.add-button { width: 100%; margin-top: 12px; }
.empty-state { padding: 18px; color: var(--rl-color-ink-faint); background: var(--rl-color-paper); border: 1px dashed var(--rl-color-line-strong); border-radius: var(--rl-radius-md); font-size: .86rem; text-align: center; }
.ss-person-card + .ss-person-card { margin-top: 14px; }
.ss-person-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.ss-person-header p { margin: 2px 0 0; color: var(--rl-color-ink-faint); font-size: .82rem; }
.ss-summary-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 13px 0; }
.ss-summary-strip > div { padding: 9px 10px; background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-sm); }
.ss-summary-strip strong { display: block; margin-top: 2px; color: var(--rl-color-navy); font-size: .95rem; }
.mini-table-wrap { max-width: 100%; margin-top: 12px; overflow-x: auto; overscroll-behavior-inline: contain; border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-sm); }
.mini-table { width: 100%; min-width: 500px; border-collapse: collapse; font-size: .8rem; }
.mini-table th, .mini-table td { padding: 6px 8px; border-bottom: 1px solid var(--rl-color-line); text-align: right; white-space: nowrap; }
.mini-table th:first-child, .mini-table td:first-child { text-align: left; }
.mini-table th { color: var(--rl-color-ink-faint); background: var(--rl-color-paper); font-weight: 700; }
.mini-table tr:last-child td { border-bottom: 0; }
.mini-table tr.selected td { color: var(--rl-color-navy); background: var(--rl-color-green-soft); font-weight: 700; }
.compact-controls { padding-bottom: 14px; }
.bridge-control-grid { align-items: stretch; }
.focus-summary { display: grid; align-content: center; min-width: 0; padding: 10px 12px; background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-sm); }
.focus-summary strong { display: block; margin-top: 3px; color: var(--rl-color-navy); font-size: .9rem; overflow-wrap: anywhere; }
.focus-summary small { display: block; margin-top: 3px; color: var(--rl-color-ink-faint); font-size: .78rem; line-height: 1.4; }

/* 9.6 Results column */
.result-view-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 4px; background: var(--rl-color-paper-deep); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); }
.result-view-tabs button { display: grid; place-items: center; min-width: 0; min-height: var(--rl-target); padding: 8px 7px; color: var(--rl-color-ink-soft); background: transparent; border: 0; border-radius: var(--rl-radius-sm); font-size: .82rem; font-weight: 700; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; }
.result-view-tabs button span { min-width: 0; }
.result-view-tabs button[aria-selected="true"] { color: var(--rl-color-navy); background: var(--rl-color-card); box-shadow: var(--rl-shadow-sm); }
.result-panel { display: grid; gap: var(--rl-space-4); min-width: 0; max-width: 100%; }
.result-panel[hidden] { display: none !important; }
.results-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; min-width: 0; padding: 0 3px; }
.results-heading > div { min-width: 0; }
.results-heading h2 { margin: 0; font-size: 1.5rem; }
.results-intro { max-width: 72ch; margin: 6px 0 0; color: var(--rl-color-ink-soft); font-size: .86rem; }
.calculation-state { color: var(--rl-color-ink-faint); font-family: var(--rl-font-mono); font-size: .74rem; }
.calculation-state.running { color: var(--rl-color-green-dark); font-weight: 600; }

/* Status banner: whole card tinted by outcome. */
.status-banner { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 76px; padding: 14px 16px; overflow: hidden; color: var(--rl-color-navy); background: var(--rl-color-green-soft); border: 1px solid #C6E4D2; border-radius: var(--rl-radius-md); box-shadow: var(--rl-shadow-sm); }
.status-banner > div { min-width: 0; }
.status-banner strong { display: block; margin-bottom: 2px; overflow-wrap: anywhere; }
.status-banner span { display: block; color: var(--rl-color-ink-soft); font-size: .86rem; overflow-wrap: anywhere; }
.status-icon { width: 42px; height: 42px; background: var(--rl-color-green); }
.status-banner.risk { background: var(--rl-color-red-soft); border-color: #EBB9B3; }
.status-banner.risk .status-icon { background: var(--rl-color-red); }
.status-banner.caution { background: var(--rl-color-gold-soft); border-color: #EBD6A4; }
.status-banner.caution .status-icon { background: var(--rl-color-gold); }

/* Metric tiles (plan) */
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.metric { min-width: 0; min-height: 104px; padding: 13px 14px; background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); box-shadow: var(--rl-shadow-sm); }
.metric .metric-label { margin-bottom: 6px; }
.metric strong { margin: 0 0 4px; }
.metric.emphasis { background: var(--rl-color-green-soft); border-color: #C6E4D2; }
.metric.risk strong { color: var(--rl-color-red); }
.metric.caution strong { color: var(--rl-color-gold); }
.account-metric-grid .metric { min-height: 112px; }

/* Result cards, disclosures, strategy cards (.answer-card and .chart-card are
   structural aliases of .result-card used by the plan script) */
.result-card, .result-disclosure, .answer-card, .chart-card { min-width: 0; max-width: 100%; padding: 16px; background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); box-shadow: var(--rl-shadow-sm); }
.result-disclosure { padding: 0; overflow: hidden; }
.disclosure-body { display: grid; min-width: 0; }
.embedded-result-section { min-width: 0; max-width: 100%; padding: 16px; }
.embedded-result-section + .embedded-result-section { border-top: 1px solid var(--rl-color-line); }
.card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-width: 0; margin-bottom: 12px; }
.card-heading h3 { margin: 0; }
.segmented-control { display: inline-flex; padding: 3px; background: var(--rl-color-paper-deep); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-sm); }
.segmented-control button { min-height: 36px; padding: 5px 10px; color: var(--rl-color-ink-soft); background: transparent; border: 0; border-radius: 6px; font-size: .78rem; font-weight: 700; }
.segmented-control button.active { color: var(--rl-color-navy); background: var(--rl-color-card); box-shadow: var(--rl-shadow-sm); }
.strategy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 10px; min-width: 0; }
.strategy-card { display: grid; align-content: start; min-width: 0; padding: 13px; background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); }
.strategy-card.primary { background: var(--rl-color-green-soft); border-color: #C6E4D2; }
.goal-label { display: block; margin-bottom: 7px; color: var(--rl-color-green-dark); font-family: var(--rl-font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.strategy-card strong { display: block; color: var(--rl-color-navy); font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.strategy-card p { margin: 7px 0 12px; color: var(--rl-color-ink-soft); font-size: .8rem; }
.strategy-card .button { align-self: end; justify-self: start; margin-top: auto; }
.claim-summary-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 12px; }
.claim-selected { min-width: 0; padding: 13px; background: var(--rl-color-green-soft); border: 1px solid #C6E4D2; border-radius: var(--rl-radius-md); }
.claim-selected strong { display: block; color: var(--rl-color-navy); font-family: var(--rl-font-display); font-size: 1.2rem; overflow-wrap: anywhere; }
.claim-selected span { display: block; margin-top: 3px; color: var(--rl-color-ink-soft); font-size: .8rem; }
.claim-list { margin: 0; padding: 0; list-style: none; }
.claim-list li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--rl-color-line); font-size: .82rem; }
.claim-list li > * { min-width: 0; }
.claim-list li:last-child { border-bottom: 0; }
.claim-rank { width: 24px; height: 24px; color: var(--rl-color-green-dark); background: var(--rl-color-green-soft); font-size: .74rem; }
.claim-list strong { color: var(--rl-color-navy); overflow-wrap: anywhere; }
.claim-list span:last-child { color: var(--rl-color-ink-faint); text-align: right; }
.insight-list { display: grid; gap: 8px; }
.insight { display: grid; grid-template-columns: 28px 1fr; gap: 9px; align-items: start; padding: 9px 10px; background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-sm); font-size: .84rem; }
.insight-icon { width: 26px; height: 26px; color: var(--rl-color-green-dark); background: var(--rl-color-green-soft); font-size: .74rem; }
.insight.warning .insight-icon { color: var(--rl-color-gold); background: var(--rl-color-gold-soft); }
.insight.risk .insight-icon { color: var(--rl-color-red); background: var(--rl-color-red-soft); }
.insight strong { color: var(--rl-color-navy); }
.account-explorer-controls .form-grid { margin-bottom: 0; }
.account-explorer-controls .callout { margin-top: 14px; }
.account-flow-chart { min-height: 280px; }
.account-method-note, .bridge-method-note, .social-security-method-note { margin: 0; }
.account-method-note:empty { display: none; }

/* 9.7 Plan charts (SVG classes emitted by the app script) */
.chart { position: relative; width: 100%; min-height: 250px; overflow: hidden; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-interactive { position: relative; isolation: isolate; }
.chart-interactive svg { cursor: crosshair; }
.chart .grid-line { stroke: var(--rl-chart-grid); stroke-width: 1; }
.chart .line-main, .chart .line-ss-a, .chart .line-account, .chart .bridge-balance-line { fill: none; stroke: var(--rl-chart-primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.chart .line-account, .chart .bridge-balance-line { stroke: var(--rl-chart-tertiary); }
.chart .line-secondary, .chart .line-ss-b { fill: none; stroke: var(--rl-chart-secondary); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .line-navy { fill: none; stroke: var(--rl-chart-tertiary); stroke-width: 2.5; }
.chart .line-muted { fill: none; stroke: var(--rl-color-ink-faint); stroke-width: 2; stroke-dasharray: 5 4; }
.chart .band-wide { fill: var(--rl-chart-band); opacity: .6; }
.chart .band-mid { fill: var(--rl-chart-band); }
.chart .account-area { fill: rgba(61, 86, 108, .12); }
.chart .zero-line { stroke: var(--rl-color-line-strong); stroke-width: 1.2; }
.chart .retirement-line, .chart .bridge-ss-a-line { stroke: var(--rl-chart-secondary); stroke-width: 1.3; stroke-dasharray: 4 4; }
.chart .bridge-ss-b-line { stroke: var(--rl-chart-primary); stroke-width: 1.3; stroke-dasharray: 2 3; }
.chart .depletion-line, .chart .bridge-shortfall-line { stroke: var(--rl-color-red); stroke-width: 1.4; stroke-dasharray: 4 4; }
.chart .bridge-window { fill: var(--rl-chart-range); }
.chart .bar-spending { fill: var(--rl-color-line); }
.chart .bar-ss, .chart .bar-contribution { fill: var(--rl-chart-primary); }
.chart .bar-other, .chart .bar-growth { fill: var(--rl-chart-tertiary); }
.chart .bar-withdrawal { fill: var(--rl-chart-secondary); }
.chart .bar-negative-growth { fill: var(--rl-color-red); }
.chart .ss-point.a { fill: var(--rl-chart-primary); }
.chart .ss-point.b { fill: var(--rl-chart-secondary); }
.chart .ss-selected { stroke: #fff; stroke-width: 2.5; }
.chart .ss-selected.a { fill: var(--rl-color-green-dark); }
.chart .ss-selected.b { fill: var(--rl-color-gold); }
.chart-hover-layer { pointer-events: none; }
.chart-hover-dot { fill: #fff; stroke: var(--rl-chart-tertiary); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.chart-hover-dot.teal, .chart-hover-dot.green { stroke: var(--rl-chart-primary); }
.chart-hover-dot.orange, .chart-hover-dot.gold { stroke: var(--rl-chart-secondary); }
.chart-hover-dot.red { stroke: var(--rl-color-red); }
.chart-hover-dot.muted { stroke: var(--rl-color-ink-faint); }
.chart-explorer-hint { position: absolute; right: 9px; bottom: 7px; z-index: 3; max-width: calc(100% - 18px); pointer-events: none; }

/* Plan chart read-out: floats beside the pointer (not docked). */
.chart-tooltip { position: absolute; z-index: 8; display: none; width: min(268px, calc(100% - 14px)); padding: 10px 12px; color: var(--rl-color-on-dark); background: var(--rl-color-navy); border-radius: var(--rl-radius-sm); box-shadow: var(--rl-shadow-md); font-size: .78rem; line-height: 1.35; pointer-events: none; }
.chart-tooltip.is-visible { display: block; }
.chart-tooltip-title { margin-bottom: 7px; padding-bottom: 6px; color: var(--rl-color-on-dark); border-bottom: 1px solid rgba(255, 255, 255, .18); font-family: var(--rl-font-display); font-size: .9rem; font-weight: 700; }
.chart-tooltip-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: baseline; min-width: 0; padding: 2px 0; }
.chart-tooltip-key { display: inline-flex; align-items: center; min-width: 0; color: var(--rl-color-on-dark-soft); overflow-wrap: anywhere; }
.chart-tooltip-row strong { color: var(--rl-color-on-dark); font-family: var(--rl-font-mono); font-size: .78rem; text-align: right; white-space: nowrap; }
.chart-tooltip-swatch { flex: 0 0 auto; width: 8px; height: 8px; margin-right: 6px; background: var(--rl-color-on-dark-soft); border-radius: 50%; }
.chart-tooltip-swatch.teal, .chart-tooltip-swatch.green { background: var(--rl-color-green-bright); }
.chart-tooltip-swatch.navy { background: #8FA9C0; }
.chart-tooltip-swatch.orange, .chart-tooltip-swatch.gold { background: var(--rl-color-gold-bright); }
.chart-tooltip-swatch.red { background: var(--rl-color-red-bright); }
.chart-tooltip-swatch.muted { background: var(--rl-color-on-dark-soft); }

/* 9.8 Methodology block inside the plan, source links */
.methodology { padding: 0; }
.methodology > summary { grid-template-columns: minmax(0, 1fr); font-weight: 700; }
.methodology-body { padding: 0 16px 16px; color: var(--rl-color-ink-soft); font-size: .86rem; }
.methodology-body p { margin-bottom: 10px; }
.source-links { display: flex; flex-wrap: wrap; gap: 8px; }
.source-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 5px 10px; color: var(--rl-color-green-dark); background: var(--rl-color-green-soft); border-radius: var(--rl-radius-sm); font-size: .8rem; font-weight: 700; text-decoration: none; }
.source-links a:hover { color: var(--rl-color-on-dark); background: var(--rl-color-green); }


/* =============================================================================
   §10 DATA TABLES (shared by quick calculators, plan, and content pages)
   ============================================================================= */
.table-scroll { position: relative; max-width: 100%; max-height: 440px; overflow: auto; border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-sm); }
.table-scroll:focus-visible, .mini-table-wrap:focus-visible { outline: 3px solid var(--rl-color-gold-bright); outline-offset: 2px; }
table { width: 100%; border-collapse: collapse; font-size: .86rem; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--rl-color-line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child, th:nth-child(2), td:nth-child(2) { text-align: left; }
td { font-variant-numeric: tabular-nums; }
th { position: sticky; z-index: 2; top: 0; color: var(--rl-color-ink-faint); background: var(--rl-color-paper); font-family: var(--rl-font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.table-scroll table th:first-child, .table-scroll table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--rl-color-card); }
.table-scroll table thead th:first-child { z-index: 3; background: var(--rl-color-paper); }
tbody tr:hover td { background: var(--rl-color-paper); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.is-selected td, tbody tr.selected td { color: var(--rl-color-navy); background: var(--rl-color-green-soft); font-weight: 700; }
tbody tr.is-total td { color: var(--rl-color-navy); border-top: 2px solid var(--rl-color-line-strong); font-weight: 700; }
td.negative { color: var(--rl-color-red); font-weight: 700; }
/* Sideways-scroll hint on narrow screens. */
.table-scroll::after { content: "Scroll sideways for more columns →"; display: block; padding: 6px 4px 0; color: var(--rl-color-ink-faint); font-size: .78rem; }


/* =============================================================================
   §11 GLOSSARY, FOOTER, NO-SCRIPT NOTICE
   ============================================================================= */
.glossary-section { width: min(var(--rl-container), calc(100% - 2 * var(--rl-gutter))); margin: 10px auto var(--rl-space-6); padding: var(--rl-space-5); background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-lg); }
.glossary-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; margin: 12px 0 0; }
.glossary-list dt { color: var(--rl-color-navy); font-weight: 700; }
.glossary-list dd { margin: 3px 0 0; color: var(--rl-color-ink-soft); font-size: .9rem; }

footer, .rl-legal-footer {
  width: min(var(--rl-container), calc(100% - 2 * var(--rl-gutter)));
  margin: 0 auto;
  padding: var(--rl-space-5) 0 var(--rl-space-7);
  color: var(--rl-color-ink-soft);
  border-top: 3px double var(--rl-color-line-strong);
  font-size: .84rem;
  text-align: center;
}
footer p, .rl-legal-footer p { max-width: 1050px; margin: 0 auto; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 6px; margin-top: 14px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 6px; color: var(--rl-color-green-dark); font-weight: 600; text-decoration: none; }
.footer-links a:hover { color: var(--rl-color-navy); text-decoration: underline; }
.footer-links span { color: var(--rl-color-line-strong); }
.noscript-warning { width: min(var(--rl-container), calc(100% - 2 * var(--rl-gutter))); margin: var(--rl-space-4) auto 0; }


/* =============================================================================
   §12 CONTENT PAGES (methodology, privacy, cookies, terms, support, 404,
       calculator landing pages). Class family: rl-legal-*
   ============================================================================= */
.rl-legal-page { min-height: 100vh; }
.rl-legal-main { width: min(var(--rl-container-text), calc(100% - 2 * var(--rl-gutter))); margin: 0 auto; padding: var(--rl-space-7) 0 var(--rl-space-7); }
.rl-legal-hero { margin: 0 0 var(--rl-space-6); padding: clamp(24px, 4vw, 44px) 0; border-bottom: 3px double var(--rl-color-line-strong); }
.rl-legal-hero > p:not(.rl-legal-eyebrow) { max-width: 62ch; margin: var(--rl-space-3) 0 0; color: var(--rl-color-ink-soft); font-size: 1.02rem; }
.rl-legal-hero .hero-cta { margin: var(--rl-space-4) 0 0; }
.rl-legal-main h1 { max-width: 20ch; }
.rl-legal-main h2 { margin: var(--rl-space-6) 0 var(--rl-space-3); font-size: 1.45rem; }
.rl-legal-main h3 { margin: var(--rl-space-5) 0 var(--rl-space-2); }
.rl-legal-main p, .rl-legal-main li { max-width: 78ch; line-height: 1.72; }
.rl-legal-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--rl-space-6); align-items: start; }

/* Sticky table of contents */
.rl-legal-toc { position: sticky; top: calc(var(--rl-header-height) + 24px); padding: 16px; background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); box-shadow: var(--rl-shadow-sm); }
.rl-legal-toc h2 { margin: 0 0 10px; color: var(--rl-color-gold); font-family: var(--rl-font-mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.rl-legal-toc ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rl-legal-toc a { display: block; padding: 7px 8px; color: var(--rl-color-ink-soft); border-radius: var(--rl-radius-sm); font-size: .84rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.rl-legal-toc a:hover, .rl-legal-toc a:focus-visible { color: var(--rl-color-green-dark); background: var(--rl-color-green-soft); }

/* Accordion sections */
.rl-legal-sections { display: grid; gap: var(--rl-space-3); }
.rl-legal-accordion { overflow: clip; background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); box-shadow: var(--rl-shadow-sm); }
.rl-legal-accordion > summary { grid-template-columns: minmax(0, 1fr) auto; min-height: 64px; padding: 16px 20px; font-family: var(--rl-font-display); font-size: 1.15rem; font-weight: 700; }
.rl-legal-accordion-body { padding: 20px 22px 22px; }
.rl-legal-accordion-body > :first-child { margin-top: 0; }
.rl-legal-accordion-body > :last-child { margin-bottom: 0; }
.rl-legal-accordion-body h3 { margin: var(--rl-space-4) 0 var(--rl-space-2); font-size: 1.05rem; }
.rl-legal-accordion-body p { margin: 0 0 1rem; color: var(--rl-color-ink); }
.rl-legal-accordion-body ul, .rl-legal-accordion-body ol { max-width: 75ch; margin: 0 0 1rem; padding-left: 1.35rem; }
.rl-legal-accordion-body li { margin: 0 0 .55rem; }
.rl-legal-note { max-width: 72ch; margin: 16px 0 0; }

/* Collection cards (e.g. cookie inventory, contact options) */
.rl-collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 18px; }
.rl-collection-card { padding: 16px; background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-md); }
.rl-collection-card h3 { margin: 0 0 6px; font-family: var(--rl-font-body); font-size: .95rem; }
.rl-collection-card p { margin: 0; font-size: .86rem; }
.rl-collection-card dl { margin: 0; }
.rl-collection-card dt { margin-top: 8px; color: var(--rl-color-gold); font-family: var(--rl-font-mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.rl-collection-card dd { margin: 2px 0 0; font-size: .86rem; }

/* Legal tables */
.rl-legal-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-sm); }
.rl-legal-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; }
.rl-legal-table th, .rl-legal-table td { padding: 12px 14px; text-align: left; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }
.rl-legal-table th { position: static; }

/* Support page extras */
.share-links { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.share-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; color: var(--rl-color-green-dark); background: var(--rl-color-green-soft); border-radius: var(--rl-radius-sm); font-size: .84rem; font-weight: 700; text-decoration: none; }
.embed-code { margin-top: 13px; padding: 11px 12px; color: var(--rl-color-navy); background: var(--rl-color-paper); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-sm); font-family: var(--rl-font-mono); font-size: .8rem; overflow-wrap: anywhere; }
.donate-soon { display: inline-flex; margin-top: 13px; padding: 7px 12px; color: var(--rl-color-gold); background: var(--rl-color-gold-soft); border-radius: var(--rl-radius-sm); font-size: .84rem; font-weight: 700; }
.manage-privacy-link { cursor: pointer; }


/* =============================================================================
   §13 CONSENT BANNER AND PRIVACY DIALOG (rl-privacy-*)
   Injected by the consent script; must look right on every page.
   ============================================================================= */
.rl-privacy-banner[hidden], .rl-privacy-modal[hidden], .rl-gpc-notice[hidden], .rl-gpc-inline[hidden] { display: none !important; }
body.rl-privacy-banner-visible { padding-bottom: var(--rl-privacy-banner-offset, 96px); }
.rl-privacy-banner {
  position: fixed;
  z-index: var(--rl-z-consent);
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  width: min(720px, calc(100vw - 24px));
  color: var(--rl-color-navy);
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--rl-color-line-strong);
  border-radius: var(--rl-radius-md);
  box-shadow: var(--rl-shadow-md);
  font: 500 13px/1.4 var(--rl-font-body);
}
.rl-privacy-banner-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; }
.rl-privacy-banner-copy { min-width: 0; }
.rl-privacy-banner .rl-privacy-kicker { display: none; }
.rl-privacy-banner h2, .rl-privacy-panel h2 { margin: 0 5px 0 0; color: var(--rl-color-navy); font-family: var(--rl-font-display); font-size: .95rem; font-weight: 700; line-height: 1.2; }
.rl-privacy-banner h2 { display: inline; }
.rl-privacy-banner p, .rl-privacy-panel p { margin: 0; }
.rl-privacy-banner p { display: inline; font-size: .8rem; }
.rl-privacy-banner a, .rl-privacy-panel a, .rl-privacy-links a { color: var(--rl-color-green-dark); font-weight: 700; }
.rl-privacy-banner-actions, .rl-privacy-modal-actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
.rl-consent-button {
  min-height: var(--rl-target);
  padding: 8px 12px;
  color: var(--rl-color-navy);
  background: var(--rl-color-card);
  border: 1.5px solid var(--rl-color-line-strong);
  border-radius: var(--rl-radius-sm);
  cursor: pointer;
  font: 700 .78rem/1.15 var(--rl-font-body);
  white-space: nowrap;
  transition: transform .12s ease, background .12s ease;
}
.rl-consent-button:hover { transform: translateY(-1px); }
.rl-consent-accept { color: var(--rl-color-on-dark); background: var(--rl-color-green); border-color: var(--rl-color-green); }
.rl-consent-accept:hover { background: var(--rl-color-green-dark); }
.rl-consent-reject:hover { background: var(--rl-color-paper-deep); }
.rl-consent-manage { background: var(--rl-color-gold-soft); border-color: var(--rl-color-gold); }
.rl-consent-manage:hover { background: #F7E4B3; }
.rl-gpc-inline, .rl-gpc-notice { display: block; margin-top: 6px; padding: 7px 10px; color: var(--rl-color-navy); background: var(--rl-color-navy-soft); border: 1px solid #CBD8E3; border-radius: var(--rl-radius-sm); font-size: .76rem; font-weight: 600; }

/* Privacy settings dialog */
.rl-privacy-modal { position: fixed; z-index: calc(var(--rl-z-consent) + 100); inset: 0; display: grid; place-items: center; padding: 16px; font: 500 14px/1.48 var(--rl-font-body); }
.rl-privacy-modal-open { overflow: hidden; }
.rl-privacy-shade { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(18, 40, 58, .7); cursor: pointer; }
.rl-privacy-panel { position: relative; width: min(590px, 100%); max-height: calc(100vh - 32px); padding: 20px; overflow: auto; color: var(--rl-color-navy); background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-lg); box-shadow: var(--rl-shadow-md); }
.rl-privacy-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.rl-privacy-close { flex: 0 0 var(--rl-target); width: var(--rl-target); height: var(--rl-target); padding: 0; color: var(--rl-color-navy); background: var(--rl-color-paper); border: 1px solid var(--rl-color-line-strong); border-radius: 50%; cursor: pointer; font: 700 26px/1 var(--rl-font-body); }
.rl-privacy-intro { margin-bottom: 12px; color: var(--rl-color-ink-soft); }
.rl-choice-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 13px 0; border-top: 1px solid var(--rl-color-line); }
.rl-choice-title { display: block; color: var(--rl-color-navy); font-size: .96rem; font-weight: 700; cursor: pointer; }
.rl-choice-copy p { margin-top: 2px; color: var(--rl-color-ink-soft); font-size: .84rem; }
.rl-switch-input { position: relative; width: 50px; height: 29px; appearance: none; background: var(--rl-color-ink-faint); border: 2px solid transparent; border-radius: 30px; cursor: pointer; transition: .15s ease; }
.rl-switch-input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .26); transition: .15s ease; }
.rl-switch-input:checked { background: var(--rl-color-green); }
.rl-switch-input:checked::after { transform: translateX(21px); }
.rl-switch-input:disabled { opacity: .58; cursor: not-allowed; }
.rl-privacy-detail-links { margin: 10px 0; }
.rl-privacy-status { min-height: 1.4em; color: var(--rl-color-gold); font-weight: 700; }
.rl-privacy-modal-actions { padding-top: 13px; border-top: 1px solid var(--rl-color-line); }
.rl-privacy-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; padding: 12px; font: 600 12.5px/1.35 var(--rl-font-body); }
.rl-privacy-links a, .rl-privacy-links button { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 2px; }
.rl-privacy-links button { appearance: none; color: var(--rl-color-green-dark); background: transparent; border: 0; cursor: pointer; font: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rl-noscript-privacy { padding: 10px 14px; color: var(--rl-color-navy); background: var(--rl-color-gold-soft); border: 1px solid #EBD6A4; }


/* =============================================================================
   §14 DIALOGS (share, import) AND TOASTS
   ============================================================================= */
.rl-dialog { width: min(640px, calc(100vw - 32px)); padding: 0; color: var(--rl-color-ink); background: var(--rl-color-card); border: 1px solid var(--rl-color-line); border-radius: var(--rl-radius-lg); box-shadow: var(--rl-shadow-md); }
.rl-dialog::backdrop { background: rgba(18, 40, 58, .6); }
.rl-dialog-body { padding: 22px 24px; }
.rl-dialog-body h2 { margin: 0 0 8px; font-size: 1.3rem; }
.rl-dialog-list { margin: 10px 0; padding-left: 20px; }
.rl-dialog-list li { margin: 4px 0; }
.rl-dialog-list li.warning { color: var(--rl-color-gold); font-weight: 600; }
.rl-check { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; font-weight: 600; cursor: pointer; }
.rl-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--rl-color-green); }
.rl-dialog-note { margin: 10px 0 6px; color: var(--rl-color-ink-soft); font-size: .86rem; }
.rl-dialog-note.warning { color: var(--rl-color-gold); font-weight: 600; }
.rl-dialog-link { width: 100%; padding: 8px 10px; border: 1px solid var(--rl-color-line-strong); border-radius: var(--rl-radius-sm); font: 500 .78rem/1.35 var(--rl-font-mono); word-break: break-all; }
.rl-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.rl-dialog-fine { margin: 12px 0 0; color: var(--rl-color-ink-faint); font-size: .8rem; }

.toast { position: fixed; z-index: var(--rl-z-toast); right: 18px; bottom: 18px; max-width: min(380px, calc(100vw - 36px)); padding: 11px 14px; color: var(--rl-color-on-dark); background: var(--rl-color-navy); border-radius: var(--rl-radius-md); box-shadow: var(--rl-shadow-md); font-size: .84rem; opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity 160ms ease, transform 160ms ease; }
.toast.show { opacity: 1; transform: none; }


/* =============================================================================
   §15 RESPONSIVE BREAKPOINTS  (desktop-first: 1280 → 1080 → 980 → 760 → 470)
   ============================================================================= */
@media (max-width: 1280px) {
  .planner-shell { grid-template-columns: minmax(480px, .95fr) minmax(480px, 1.05fr); }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-tool-layout, .quick-tool-layout-wide-input { grid-template-columns: minmax(320px, 390px) minmax(0, 1fr); }
  .scenario-hero { grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr); }
}
@media (max-width: 1080px) {
  .planner-shell { grid-template-columns: 1fr; }
  .results-sticky { position: static; }
  .site-header { position: relative; }
}
@media (max-width: 980px) {
  .scenario-hero { grid-template-columns: 1fr; }
  .scenario-hero-photo { min-height: 260px; }
  .scenario-navigation { width: min(900px, calc(100% - 24px)); }
  .scenario-navigation.is-compact { right: max(12px, calc((100vw - 900px) / 2)); left: max(12px, calc((100vw - 900px) / 2)); }
  .scenario-tablist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scenario-navigation.is-compact.is-expanded .scenario-tablist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scenario-main { width: min(900px, calc(100% - 24px)); }
  .quick-tool-layout, .quick-tool-layout-wide-input { grid-template-columns: 1fr; }
  .quick-input-card { position: static; }
  .rl-legal-layout { grid-template-columns: 1fr; }
  .rl-legal-toc { position: static; }
  .rl-legal-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .table-scroll::after { display: block; }
}
@media (min-width: 981px) {
  .table-scroll::after { display: none; }
}
@media (max-width: 760px) {
  :root { --rl-gutter: 12px; --rl-header-height: 58px; }
  body { font-size: 15px; }
  .site-header { display: grid; gap: 8px; padding: 8px 12px; }
  .header-actions { justify-content: flex-start; flex-wrap: nowrap; }
  .save-state { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .actions-menu-list { position: fixed; top: auto; right: 8px; bottom: max(8px, env(safe-area-inset-bottom)); left: 8px; min-width: 0; }
  .scenario-hero { margin-top: 10px; border-radius: var(--rl-radius-md); }
  .scenario-hero-copy { padding: 24px 18px; }
  .scenario-hero-copy > p:not(.eyebrow) { margin: 14px 0 16px; font-size: .92rem; }
  .scenario-hero-photo { min-height: 220px; }
  .hero-photo-note { right: 12px; bottom: 12px; left: 12px; }
  .hero-photo-note strong { font-size: .95rem; }
  .scenario-navigation { margin-bottom: var(--rl-space-4); padding: 6px; border-radius: var(--rl-radius-md); }
  .scenario-tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-tab { min-height: 64px; padding: 8px; }
  .scenario-tab:last-child { grid-column: 1 / -1; }
  .scenario-navigation.is-compact.is-expanded .scenario-tablist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scenario-navigation.is-compact:not(.is-expanded) .scenario-tab[aria-selected="true"] small { display: none; }
  .scenario-panel-heading { flex-direction: column; align-items: flex-start; gap: 10px; }
  .scenario-panel-heading > .button { width: 100%; }
  .quick-field-grid, .form-grid, .form-grid.cols-3, .form-grid.cols-4, .person-grid, .claim-summary-grid, .bridge-control-grid { grid-template-columns: 1fr; }
  .quick-check { grid-column: auto; }
  .span-2 { grid-column: auto; }
  .quick-input-card, .quick-visual-card { padding: 14px; }
  .quick-answer-card { padding: 14px; }
  .quick-chart-heading { flex-direction: column; align-items: flex-start; gap: 6px; }
  .quick-chart { min-height: 250px; }
  .quick-chart-legend { margin-left: 8px; }
  .quick-recommendation-card { flex-direction: column; align-items: flex-start; }
  .quick-recommendation-card .button { width: 100%; }
  .quick-input-actions .button { flex: 1 1 190px; }
  .input-section > summary { padding: 14px; }
  .section-body { padding: 14px; }
  .section-toolbar { flex-direction: column; align-items: flex-start; }
  .section-toolbar-actions { justify-content: flex-start; }
  .ss-summary-strip { grid-template-columns: 1fr; }
  .card-heading { display: grid; }
  .segmented-control { justify-self: start; }
  .chart { min-height: 210px; }
  .results-heading { flex-direction: column; align-items: flex-start; }
  .result-view-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .strategy-grid { grid-template-columns: 1fr; }
  .repeat-card-header { flex-wrap: wrap; align-items: flex-start; }
  .repeat-card-actions { width: 100%; justify-content: flex-start; }
  .glossary-section { padding: 16px; }
  .rl-legal-header { position: relative; }
  .rl-legal-header-inner { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 0; }
  .rl-legal-header nav { width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: 3px; }
  .rl-legal-header nav a { flex: 0 0 auto; font-size: .82rem; }
  .rl-legal-main { padding: var(--rl-space-5) 0 var(--rl-space-7); }
  .rl-legal-toc { padding: 14px; }
  .rl-legal-toc ol { grid-template-columns: 1fr; }
  .rl-legal-accordion > summary { min-height: 56px; padding: 14px 16px; font-size: 1.05rem; }
  .rl-legal-accordion-body { padding: 16px; }
  .rl-collection-grid { grid-template-columns: 1fr; }
  body.rl-privacy-banner-visible { padding-bottom: var(--rl-privacy-banner-offset, 150px); }
  .rl-privacy-banner { right: 7px; bottom: max(7px, env(safe-area-inset-bottom, 0px)); width: calc(100vw - 14px); }
  .rl-privacy-banner-body { grid-template-columns: 1fr; gap: 6px; padding: 8px 10px; }
  .rl-privacy-banner-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .rl-consent-button { min-width: 0; padding: 6px; font-size: .74rem; white-space: normal; }
  .rl-privacy-panel { padding: 16px; }
  .rl-privacy-modal-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
}
@media (max-width: 470px) {
  .scenario-hero, .scenario-navigation, .scenario-main, .glossary-section, .noscript-warning, footer { width: min(100% - 16px, 460px); }
  .scenario-hero-copy { padding: 22px 16px; }
  .hero-trust-row span, .hero-trust-row li { width: 100%; border-radius: var(--rl-radius-sm); }
  .scenario-tab { grid-template-columns: 28px minmax(0, 1fr); min-height: 58px; }
  .scenario-tab-icon { width: 28px; height: 28px; }
  .quick-input-card, .quick-visual-card { padding: 13px; }
  .quick-metric-grid, .metric-grid { grid-template-columns: 1fr; }
  .quick-metric, .metric { min-height: 0; }
  .brand-mark, .rl-legal-brand-mark { width: 32px; height: 32px; }
  .header-actions .button { flex: 1 1 42%; }
  .status-banner { align-items: start; }
  .result-card { padding: 13px; }
  .result-view-tabs button { min-height: 48px; padding: 9px 7px; font-size: .76rem; }
  .quick-input-actions .button { flex-basis: 100%; width: 100%; }
  .result-disclosure > summary, .embedded-result-section { padding: 13px; }
  .chart-interaction-hint { white-space: normal; }
  .rl-privacy-banner-actions { grid-template-columns: 1fr 1fr; }
  .rl-consent-accept { grid-column: 1 / -1; }
}


/* =============================================================================
   §16 PRINT, REDUCED MOTION, FORCED COLOURS
   ============================================================================= */
@media print {
  :root { --rl-color-paper: #fff; }
  body { background: #fff; }
  .site-header, .rl-legal-header, .scenario-hero, .scenario-navigation, .scenario-panel-heading > .button, .quick-input-card, .quick-link-row, .quick-table-disclosure:not([open]),
  .header-actions, .input-column, .segmented-control, .result-view-tabs, #exportCsv, #exportAccountCsv, .toast, .rl-privacy-banner, .rl-privacy-modal, .rl-legal-toc, .footer-links { display: none !important; }
  .scenario-main, .planner-shell, .rl-legal-main { display: block; width: 100%; margin: 0; }
  .scenario-panel[hidden] { display: none !important; }
  .quick-tool-layout, .rl-legal-layout { display: block; }
  .results-sticky { position: static; }
  .quick-answer-card, .quick-visual-card, .quick-metric, .result-card, .metric, .status-banner, .rl-legal-accordion { box-shadow: none; break-inside: avoid; }
  .table-scroll { max-height: none; overflow: visible; }
  th { position: static; }
  .rl-legal-accordion > summary::after { display: none; }
  .rl-legal-accordion-body { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .rl-privacy-banner, .rl-privacy-panel, .quick-answer-card, .metric, .quick-metric { border: 2px solid CanvasText; }
  .rl-consent-button, .rl-switch-input, .button { forced-color-adjust: auto; }
}