/* Self-hosted fonts (was Google Fonts; see fonts/_extract.py) */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/LibreBaskerville-400i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/LibreBaskerville-400i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/LibreBaskerville-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/LibreBaskerville-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/LibreBaskerville-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/LibreBaskerville-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Raleway-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Raleway-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/SourceSans3-300-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('fonts/SourceSans3-300-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/SourceSans3-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/SourceSans3-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/SourceSans3-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/SourceSans3-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/SourceSans3-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/SourceSans3-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

    :root {
      --slate-950: #0a0f1a;
      --slate-900: #0f172a;
      --slate-800: #1e293b;
      --slate-700: #334155;
      --slate-600: #475569;
      --slate-400: #94a3b8;
      --slate-200: #e2e8f0;
      --slate-100: #f1f5f9;
      --slate-50:  #f8fafc;
      --amber-500: #f59e0b;
      --amber-400: #fbbf24;
      --amber-300: #fcd34d;
      --amber-100: #fef3c7;
      --amber-50:  #fffbeb;
      --green-600: #16a34a;
      --green-100: #dcfce7;
      --red-100:   #fee2e2;
      --red-600:   #dc2626;
      --font-serif: 'Libre Baskerville', Georgia, serif;
      --font-brand: 'Raleway', var(--font-sans);
      --font-sans:  'Source Sans 3', system-ui, sans-serif;

      /* ── Semantic theme tokens (light default) ── */
      --bg-page:       var(--slate-50);
      --bg-card:       #ffffff;
      --bg-card-alt:   var(--slate-100);
      --bg-sector-tab: var(--slate-100);
      --bg-faq-answer: var(--slate-50);
      --text-primary:  var(--slate-800);
      --text-secondary:var(--slate-600);
      --text-muted:    var(--slate-500);  /* WCAG AA on white (4.86:1); was slate-400 (2.85:1, fails) */
      --border:        var(--slate-200);
    }

    /* ── DARK MODE ── */
    [data-theme="dark"] {
      --slate-50:  #0d1117;
      --slate-100: #161b22;
      --slate-200: #2a3140;
      --slate-300: #3a4458;
      --slate-400: #7d8fa8;
      --slate-600: #9aacbf;
      --slate-700: #b0c4d8;
      --slate-800: #dde6f0;
      --amber-100: rgba(245,158,11,0.18);
      --amber-50:  rgba(245,158,11,0.08);
      --green-100: rgba(22,163,74,0.18);
      --red-100:   rgba(220,38,38,0.18);
      --bg-page:       #0d1117;
      --bg-card:       #161b22;
      --bg-card-alt:   #1c2330;
      --bg-sector-tab: #1c2330;
      --bg-faq-answer: #111722;
      --text-primary:  #dde6f0;
      --text-secondary:#9aacbf;
      --text-muted:    #6b7e94;
      --border:        #2a3140;
    }
    [data-theme="dark"] body {
      background: var(--bg-page);
      color: var(--text-primary);
    }
    [data-theme="dark"] .disclaimer-bar {
      background: rgba(245,158,11,0.08);
      border-color: rgba(245,158,11,0.25);
      color: #b0c4d8;
    }
    [data-theme="dark"] .callout-info {
      background: #1c2330;
      color: #b0c4d8;
    }
    [data-theme="dark"] .tag-general {
      background: #1c2330;
      color: #9aacbf;
    }
    [data-theme="dark"] .tag-construction {
      background: rgba(245,158,11,0.15);
      color: #c8a450;
    }
    [data-theme="dark"] .tag-olrb {
      background: rgba(59,130,246,0.15);
      color: #93c5fd;
    }
    [data-theme="dark"] .step-dot {
      background: var(--bg-card-alt);
      color: var(--text-secondary);
      box-shadow: 0 0 0 2px var(--border);
    }
    [data-theme="dark"] .step-item.active .step-dot {
      background: var(--amber-500);
      color: var(--slate-900);
      box-shadow: 0 0 0 2px var(--amber-500);
    }
    [data-theme="dark"] .step-item.done .step-dot {
      background: var(--slate-400);
      color: var(--slate-900);
      box-shadow: 0 0 0 2px var(--slate-400);
    }
    [data-theme="dark"] .timeline::before { background: var(--border); }
    [data-theme="dark"] .step-item::before { background: var(--border); }
    [data-theme="dark"] .timeline-dot {
      border-color: var(--bg-page);
    }
    [data-theme="dark"] .btn-outline-custom {
      border-color: var(--border);
      color: var(--text-secondary);
    }
    [data-theme="dark"] .btn-outline-custom:hover {
      border-color: var(--slate-400);
      color: var(--text-primary);
      background: rgba(255,255,255,.06);
    }
    [data-theme="dark"] .hero p.lead { color: #7d8fa8; }
    [data-theme="dark"] .section-hero p { color: #7d8fa8; }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      font-family: var(--font-sans);
      background: var(--bg-page);
      color: var(--text-primary);
      transition: background 0.25s, color 0.25s;
      font-size: 1.0625rem;
      line-height: 1.7;
    }

    h1, h2, h3, h4 {
      font-family: var(--font-serif);
      font-weight: 700;
      line-height: 1.25;
    }

    /* ── NAV ── */
    .site-nav {
      background: var(--slate-900);
      border-bottom: 3px solid var(--amber-500);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    .site-nav .navbar-brand {
      font-family: var(--font-brand);
      font-weight: 800;
      letter-spacing: .02em;
      font-size: 1.2rem;
      color: #fff !important;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .site-nav .navbar-brand .lemon-mark {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .site-nav .nav-link {
      color: var(--slate-400) !important;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 600;
      padding: 0.5rem 0.85rem !important;
      border-radius: 4px;
      transition: color 0.2s, background 0.2s;
    }
    .site-nav .nav-link:hover,
    .site-nav .nav-link.active {
      color: #fff !important;
      background: rgba(245,158,11,0.15);
    }
    .navbar-toggler {
      border-color: var(--slate-600);
    }
    .navbar-toggler-icon {
      filter: invert(1);
    }
    /* ── NAV DROPDOWN ── */
    .site-nav .dropdown-menu {
      background: #1e293b;
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 0.4rem;
      min-width: 210px;
      margin-top: 0.35rem;
      box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    }
    .site-nav .dropdown-item {
      color: #94a3b8;
      font-family: var(--font-sans);
      font-size: 0.88rem;
      font-weight: 600;
      border-radius: 5px;
      padding: 0.5rem 0.85rem;
      transition: background 0.15s, color 0.15s;
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }
    .site-nav .dropdown-item:hover,
    .site-nav .dropdown-item:focus {
      background: rgba(245,158,11,0.18);
      color: #fff;
    }
    .site-nav .dropdown-item .di-icon {
      width: 1.4rem;
      text-align: center;
      color: var(--amber-500);
      flex-shrink: 0;
    }
    .site-nav .dropdown-divider {
      border-color: rgba(255,255,255,0.1);
      margin: 0.3rem 0;
    }
    .site-nav .nav-link.dropdown-toggle::after {
      margin-left: 0.3rem;
    }
    /* File a Complaint CTA link */
    .site-nav .nav-link.nav-cta {
      color: var(--amber-400) !important;
      border: 1px solid rgba(245,158,11,.35);
      border-radius: 20px;
      padding: 0.38rem 0.95rem !important;
    }
    .site-nav .nav-link.nav-cta:hover {
      background: rgba(245,158,11,.18);
      border-color: var(--amber-400);
      color: var(--amber-300) !important;
    }
    /* Dropdown section label */
    .nav-dd-label {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #475569;
      padding: .55rem .85rem .2rem;
      font-family: var(--font-sans);
      display: block;
    }

    /* ── PAGE SYSTEM ── */
    .page { display: none; }
    .page.active { display: block; }

    /* ── HERO ── */
    .hero {
      background: var(--slate-900);
      color: #fff;
      /* Tight enough that the "Jump straight to what you need" scenario cards
         peek above the fold on a 768px-tall laptop — a crisis user should see
         a path matching their problem without scrolling. */
      padding: 3.25rem 0 2.75rem;
      position: relative;
      overflow: hidden;
    }
    .hero-cta-row {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-top: 1.6rem;
      flex-wrap: wrap;
    }
    .hero-cta { font-size: 1rem; padding: 0.7rem 1.4rem; }
    .hero-cta-hint {
      color: var(--slate-400);
      font-size: 0.85rem;
      font-family: var(--font-sans);
    }
    /* Hero CTA scroll target — land below the sticky navbar */
    #home-scenarios { scroll-margin-top: var(--nav-h, 60px); }
    /* ── Editorial masthead hero ──
       Typography-first: the craft IS the design. One signature interaction
       (the drawn annotation under "make lemonade."), quiet film grain, and a
       faint citrus-wheel watermark. No libraries, no loops, ~0 extra bytes
       over the wire. Reduced-motion users get the settled end state instantly
       via the global prefers-reduced-motion rule. */
    .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 60% 85% at 78% 45%, rgba(245,158,11,0.12) 0%, transparent 70%);
      pointer-events: none;
    }
    /* Film grain: inline SVG turbulence — no network request, allowed by
       img-src data: in the CSP. */
    .hero::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
      opacity: 0.05;
      pointer-events: none;
    }
    .hero .container { position: relative; z-index: 2; }
    .hero-citrus {
      position: absolute;
      top: 50%;
      right: -8%;
      transform: translateY(-50%);
      width: clamp(420px, 40vw, 660px);
      /* The real Union Lemonade wheel mark (logo.svg), ghosted. It's a denser,
         filled two-colour design than the old line art, so it reads at a lower
         opacity. */
      opacity: 0.06;
      pointer-events: none;
      z-index: 1;
    }
    .hero-citrus img { width: 100%; height: auto; display: block; }
    @media (max-width: 991px) { .hero-citrus { display: none; } }
    @media print { .hero-citrus, .hero::after { display: none !important; } }

    /* Masthead kicker: small caps between hairline rules, like a broadsheet
       dateline. Replaces the old pill badge. */
    .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      color: var(--amber-400);
      font-family: var(--font-sans);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      border-top: 1px solid rgba(255,255,255,0.16);
      border-bottom: 1px solid rgba(255,255,255,0.16);
      padding: 0.5rem 0.15rem;
      margin-bottom: 1.75rem;
    }

    /* Headline: three masked lines that rise into place, once, quickly. */
    .hero-headline {
      font-size: clamp(2.5rem, 5.8vw, 4.2rem);
      line-height: 1.05;
      letter-spacing: -0.015em;
      color: #fff;
      margin-bottom: 1.1rem;
    }
    .hero-line { display: block; overflow: hidden; padding-bottom: 0.06em; }
    .hero-line-inner {
      display: inline-block;
      transform: translateY(115%);
      animation: heroLineUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    }
    .hero-line:nth-child(1) .hero-line-inner { animation-delay: 0.05s; }
    .hero-line:nth-child(2) .hero-line-inner { animation-delay: 0.16s; }
    .hero-line:nth-child(3) .hero-line-inner { animation-delay: 0.27s; }
    @keyframes heroLineUp { to { transform: translateY(0); } }

    /* "lemons" — italic amber, with a gentle squeeze on hover/tap. */
    .hero-lemons {
      color: var(--amber-400);
      font-style: italic;
      display: inline-block;
      transform-origin: 50% 85%;
      transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .hero-lemons:hover { transform: scaleY(0.92) scaleX(1.03) rotate(-1deg); }
    .hero-lemons:active { transform: scaleY(0.82) scaleX(1.07) rotate(-2deg); }

    /* The em-dash, drawn as a stroke rather than typed. */
    .hero-dash {
      display: inline-block;
      width: 0.8em;
      height: 0.085em;
      background: var(--amber-400);
      border-radius: 2px;
      margin-left: 0.2em;
      vertical-align: 0.22em;
      transform: scaleX(0);
      transform-origin: left center;
      animation: heroDash 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.6s forwards;
    }
    @keyframes heroDash { to { transform: scaleX(1); } }

    /* The annotation: a hand-drawn amber underline that inks itself under
       "make lemonade." — the one signature moment. */
    .hero-accent { position: relative; display: inline-block; }
    .hero-underline {
      position: absolute;
      left: -1%;
      bottom: -0.08em;
      width: 102%;
      height: 0.26em;
      overflow: visible;
    }
    .hero-underline path {
      fill: none;
      stroke: var(--amber-500);
      stroke-width: 6;
      stroke-linecap: round;
      opacity: 0.85;
      stroke-dasharray: 300;
      stroke-dashoffset: 300;
      animation: heroInk 0.6s ease-out 0.95s forwards;
    }
    @keyframes heroInk { to { stroke-dashoffset: 0; } }

    .hero p.lead {
      color: var(--slate-400);
      font-size: 1.15rem;
      max-width: 580px;
      margin-bottom: 0;
      text-wrap: pretty;
    }
    .disclaimer-bar {
      background: var(--amber-50);
      border-top: 1px solid var(--amber-300);
      border-bottom: 1px solid var(--amber-300);
      padding: 0.75rem 0;
      font-size: 0.82rem;
      color: var(--slate-700);
    }
    .disclaimer-bar i { color: var(--amber-500); }

    /* ── "Last reviewed" stamp ──
       Injected after each topic page's disclaimer bar by _initReviewStamps().
       A provenance signal: shows the content was checked against current law
       on a real date. Understated — it reassures without shouting. */
    .review-stamp {
      border-bottom: 1px solid var(--border);
      background: var(--bg-card-alt);
      padding: 0.5rem 0;
    }
    .review-stamp .container {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-sans);
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .review-stamp i { color: var(--amber-500); font-size: 0.85rem; }
    .review-stamp .rs-date { color: var(--text-secondary); font-weight: 600; }
    .review-stamp .rs-note { color: var(--text-muted); }
    @media (max-width: 560px) { .review-stamp .rs-note { display: none; } }

    /* ── Fear-reduction block ──
       Deliberately NOT alarm-coloured. The point is to steady someone, not
       alarm them further — so: calm card surface, green (safety) accent,
       generous line-height, scannable bolded fears. Someone who's already
       decided to file scrolls past it in two seconds. */
    .reassure {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-left: 4px solid var(--green-600);
      border-radius: 10px;
      padding: 1.5rem 1.6rem;
      margin-bottom: 2rem;
    }
    .reassure-title {
      font-size: 1.2rem;
      margin-bottom: 0.5rem;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .reassure-title i { color: var(--green-600); font-size: 1.1rem; }
    .reassure-lead {
      color: var(--text-secondary);
      font-size: 0.95rem;
      margin-bottom: 1.25rem;
    }
    .reassure-item { margin-bottom: 1.1rem; }
    .reassure-q {
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--text-primary);
      margin-bottom: 0.3rem;
    }
    .reassure-a {
      font-size: 0.93rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    .reassure-a a { color: var(--amber-500); font-weight: 600; }
    .reassure-next {
      margin-top: 1.35rem;
      padding-top: 1.1rem;
      border-top: 1px solid var(--border);
      font-size: 0.93rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    .reassure-next strong { color: var(--text-primary); }
    @media (max-width: 600px) { .reassure { padding: 1.15rem 1.1rem; } }

    /* ── Hero tool buttons (Listen / Copy link) ── */
    .hero-tools {
      position: absolute;
      top: 3.5rem;
      right: max(1rem, calc((100% - 1140px) / 2 + 12px));
      display: flex;
      gap: .5rem;
      z-index: 1;
    }
    .hero-tool-btn {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.15);
      color: #cbd5e1;
      padding: 0.42rem 0.95rem;
      border-radius: 2rem;
      font-family: var(--font-sans);
      font-size: 0.82rem;
      font-weight: 600;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      cursor: pointer;
      white-space: nowrap;
      transition: background .2s, border-color .2s, color .2s;
    }
    .hero-tool-btn:hover { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.4); color: var(--amber-400); }
    .hero-tool-btn.copied { background: rgba(34,197,94,.15); border-color: rgba(34,197,94,.4); color: #4ade80; }
    .hero-tool-btn.is-playing { background: rgba(245,158,11,.2); border-color: var(--amber-500); color: var(--amber-400); }
    @media (max-width: 768px) {
      .hero-tools { position: static; margin-bottom: .75rem; flex-wrap: wrap; }
    }
    @media print { .hero-tools { display: none !important; } }

    /* Floating read-aloud control bar */
    .ra-bar {
      position: fixed;
      left: 50%; bottom: 1.25rem;
      transform: translateX(-50%);
      z-index: 950;
      display: flex; align-items: center; gap: .65rem;
      background: var(--bg-card);
      border: 1px solid var(--amber-500);
      border-radius: 2rem;
      padding: .5rem .75rem .5rem 1.1rem;
      box-shadow: 0 8px 28px rgba(0,0,0,.3);
      font-family: var(--font-sans);
      max-width: calc(100vw - 2rem);
    }
    .ra-progress-text { font-size: .82rem; color: var(--text-secondary); white-space: nowrap; }
    .ra-bar-btn {
      background: transparent; border: 1px solid var(--border);
      color: var(--text-primary); border-radius: 2rem;
      padding: .25rem .7rem; font-size: .8rem; font-weight: 600;
      cursor: pointer; display: inline-flex; align-items: center; gap: .3rem;
      font-family: var(--font-sans);
    }
    .ra-bar-btn:hover { border-color: var(--amber-500); color: var(--amber-500); }
    @media (max-width: 560px) { .ra-progress-text { display: none; } }
    @media print { .ra-bar { display: none !important; } }

    /* ── Journey stages (After You File) ── */
    .journey { border-left: 2px solid var(--border); padding-left: 0; margin-bottom: 1.5rem; }
    .journey-stage {
      display: flex; align-items: center; gap: .9rem; width: 100%;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 10px; padding: .9rem 1.1rem; margin: 0 0 .55rem -2px;
      cursor: pointer; text-align: left;
      transition: border-color .15s, background .15s;
    }
    .journey-stage:hover { border-color: var(--amber-500); }
    .journey-stage[aria-expanded="true"] { border-color: var(--amber-500); border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: 0; }
    .journey-num {
      flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%;
      background: var(--amber-500); color: var(--slate-900);
      display: flex; align-items: center; justify-content: center;
      font-family: var(--font-sans); font-weight: 800; font-size: .92rem;
    }
    .journey-head { flex: 1; min-width: 0; }
    .journey-title {
      display: block; font-family: var(--font-sans); font-weight: 700;
      font-size: .98rem; color: var(--text-primary); line-height: 1.3;
    }
    .journey-teaser {
      display: block; font-size: .83rem; color: var(--text-muted); margin-top: .15rem;
    }
    .journey-flag {
      display: inline-block; background: var(--green-100); color: var(--green-600);
      border-radius: 2rem; padding: .05rem .5rem; font-size: .72rem;
      font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-right: .4rem;
    }
    [data-theme="dark"] .journey-flag { background: rgba(22,163,74,.18); color: #4ade80; }
    .journey-stage-key { border-left: 3px solid var(--green-600); }
    .journey-chev { color: var(--text-muted); transition: transform .2s; flex-shrink: 0; }
    .journey-stage[aria-expanded="true"] .journey-chev { transform: rotate(180deg); }
    .journey-body {
      display: none;
      background: var(--bg-card-alt);
      border: 1px solid var(--amber-500); border-top: none;
      border-radius: 0 0 10px 10px;
      padding: 1.1rem 1.25rem; margin: 0 0 .55rem -2px;
      font-size: .93rem; color: var(--text-secondary); line-height: 1.65;
    }
    .journey-body.open { display: block; }
    .journey-body p:last-child { margin-bottom: 0; }
    @media print {
      .journey-body { display: block !important; border: 1px solid #ccc !important; }
      .journey-chev { display: none !important; }
    }

    /* ── Build My Case ── */
    .cb-wrap { max-width: 720px; margin: 0 auto; }
    .cb-h2 { font-size: 1.4rem; margin-bottom: .4rem; color: var(--text-primary); }
    .cb-sub { color: var(--text-secondary); font-size: .95rem; margin-bottom: 1.5rem; }
    .cb-progress-row { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
    .cb-progress { flex:1; height:6px; background:var(--bg-card-alt); border-radius:3px; overflow:hidden; }
    .cb-progress-bar { height:100%; background:var(--amber-500); border-radius:3px; transition:width .3s ease; }
    .cb-progress-label {
      font-family:var(--font-sans); font-size:.78rem; font-weight:700;
      letter-spacing:.05em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap;
    }
    .cb-field { margin-bottom: 1.4rem; }
    .cb-label {
      display:block; font-family:var(--font-sans); font-weight:700;
      font-size:.95rem; color:var(--text-primary); margin-bottom:.3rem;
    }
    .cb-hint { font-size:.84rem; color:var(--text-muted); margin-bottom:.5rem; line-height:1.5; }
    .cb-input {
      width:100%; background:var(--bg-card-alt); border:1.5px solid var(--border);
      border-radius:8px; padding:.65rem .85rem;
      font-family:var(--font-sans); font-size:.95rem; color:var(--text-primary);
      transition:border-color .18s;
    }
    .cb-input:focus { outline:none; border-color:var(--amber-500); }
    textarea.cb-input { resize:vertical; min-height:5rem; line-height:1.55; }
    .cb-checks { display:flex; flex-direction:column; gap:.5rem; }
    .cb-check {
      display:flex; align-items:flex-start; gap:.55rem; cursor:pointer;
      font-size:.93rem; color:var(--text-secondary); line-height:1.4;
    }
    .cb-check input { margin-top:.2rem; flex-shrink:0; accent-color:var(--amber-500); }
    .cb-nav { display:flex; justify-content:space-between; align-items:center; gap:.75rem; margin-top:1.75rem; flex-wrap:wrap; }
    .cb-privacy { text-align:center; font-size:.8rem; color:var(--text-muted); margin-top:1rem; }
    .cb-done-head { text-align:center; margin-bottom:1.5rem; }
    .cb-out { margin-bottom:1.25rem; }
    .cb-chron { margin:0; padding-left:1.15rem; }
    .cb-chron li { color:var(--text-secondary); font-size:.93rem; line-height:1.6; margin-bottom:.5rem; }
    .cb-chron strong { color:var(--text-primary); }
    .cb-narrative {
      background:var(--bg-card-alt); border:1px solid var(--border); border-radius:8px;
      padding:1rem 1.15rem; font-size:.93rem; color:var(--text-primary); line-height:1.65;
      white-space:normal;
    }
    .cb-actions { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1rem; }
    .cb-empty { color:var(--text-muted); font-size:.9rem; font-style:italic; margin:0; }
    .cb-tip { font-size:.86rem; color:var(--text-muted); margin:.85rem 0 0; }
    @media print {
      .cb-progress-row, .cb-nav, .cb-actions, .cb-privacy { display:none !important; }
      .cb-wrap { max-width:none; }
    }

    /* ── ACTION CARDS ── */
    .action-cards { padding: 3.5rem 0 4rem; }
    .action-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 2rem 1.75rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      cursor: pointer;
      transition: box-shadow 0.25s, transform 0.2s, border-color 0.2s;
      text-decoration: none;
      color: inherit;
    }
    .action-card:hover {
      box-shadow: 0 8px 32px rgba(15,23,42,0.1);
      transform: translateY(-3px);
      border-color: var(--amber-400);
      color: inherit;
    }
    .action-card-icon {
      width: 3rem;
      height: 3rem;
      background: var(--amber-100);
      color: var(--slate-800);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 1.25rem;
      flex-shrink: 0;
    }
    .action-card h3 {
      font-size: 1.25rem;
      margin-bottom: 0.6rem;
    }
    .action-card p {
      color: var(--text-secondary);
      font-size: 0.95rem;
      flex: 1;
      margin-bottom: 1.25rem;
    }
    .action-card .card-cta {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-top: auto;
    }
    .action-card:hover .card-cta { color: var(--amber-500); }

    /* ── SECTION HEADERS ── */
    .section-hero {
      background: var(--slate-900);
      color: #fff;
      padding: 3.5rem 0 2.5rem;
      position: relative;          /* anchor for .share-link-btn */
    }

    /* "Copy link" share button — appears top-right of every topic-page hero.
       Injected by _addShareButtons() in app.js. */
    /* .share-link-btn now lives inside .hero-tools and inherits
       .hero-tool-btn styling — see the "Hero tool buttons" block below.
       Positioning is handled by the .hero-tools flex container. */
    .section-hero .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      color: var(--amber-400);
      font-size: 0.85rem;
      font-weight: 600;
      text-decoration: none;
      margin-bottom: 1.25rem;
      cursor: pointer;
      border: none;
      background: none;
      padding: 0;
    }
    .section-hero .back-btn:hover { color: var(--amber-300); }
    .section-hero h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 0.6rem; }
    .section-hero p { color: var(--slate-400); max-width: 620px; margin: 0; font-size: 1.05rem; }

    /* ── CONTENT ── */
    .content-section { padding: 3rem 0 4rem; }
    .content-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 2rem;
      margin-bottom: 1.25rem;
    }
    /* Mobile: tighter padding + force full-width single-column block.
       Defends against the visual artifact some phones render where a tight
       paragraph inside a padded card can look like it's been split. */
    @media (max-width: 600px) {
      .content-card {
        padding: 1.15rem 1.1rem;
        width: 100%;
        max-width: 100%;
        display: block;
      }
      .content-card p, .content-card li { font-size: 0.95rem; line-height: 1.55; }
    }
    .content-card h4 {
      font-size: 1.1rem;
      margin-bottom: 0.6rem;
      color: var(--text-primary);
    }
    .content-card p, .content-card li {
      color: var(--text-secondary);
      font-size: 0.97rem;
    }

    /* ── CALLOUT BOXES ── */
    .callout {
      border-radius: 8px;
      padding: 1.1rem 1.25rem;
      margin-bottom: 1.25rem;
      display: flex;
      gap: 0.85rem;
      align-items: flex-start;
      font-size: 0.93rem;
    }
    .callout i { flex-shrink: 0; margin-top: 0.15rem; font-size: 1.05rem; }
    .callout-info { background: var(--slate-100); color: var(--slate-700); }
    .callout-info i { color: var(--slate-600); }
    .callout-warning { background: var(--amber-50); border-left: 4px solid var(--amber-400); color: var(--slate-800); }
    .callout-warning i { color: var(--amber-500); }
    .callout-success { background: var(--green-100); color: var(--slate-800); }
    .callout-success i { color: var(--green-600); }
    .callout-danger { background: var(--red-100); color: var(--slate-800); }
    .callout-danger i { color: var(--red-600); }

    /* ── STEP TRACKER ── */
    .step-tracker {
      display: flex;
      gap: 0;
      margin-bottom: 2.5rem;
      overflow-x: auto;
      padding-bottom: 0.25rem;
    }
    /* Desktop: keep the tracker pinned below the navbar while the user works
       through a step flow, so "where am I?" is always answerable. --nav-h is
       set by JS (_setNavHeightVar) from the real navbar height. Mobile keeps
       the tracker in normal flow — pinning a two-row tracker would eat too
       much of a small screen. */
    @media (min-width: 769px) {
      .step-tracker {
        position: sticky;
        top: var(--nav-h, 60px);
        z-index: 100;
        background: var(--bg-page);
        padding-top: 0.75rem;
        margin-top: -0.75rem;
        border-bottom: 1px solid var(--border);
      }
    }

    /* "Step X of N" chip — injected by _initStepFlows() at the top of every
       step panel so each panel is self-orienting (even in screenshots). */
    .step-count-chip {
      display: inline-block;
      font-family: var(--font-sans);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--amber-500);
      background: var(--amber-50);
      border: 1px solid rgba(245, 158, 11, 0.35);
      border-radius: 2rem;
      padding: 0.2rem 0.75rem;
      margin-bottom: 0.7rem;
    }

    /* "View all steps" toggle — injected under each tracker. */
    .steps-toggle-row {
      display: flex;
      justify-content: flex-end;
      margin: -1.75rem 0 1.5rem;
    }
    .steps-toggle-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--amber-500);
      font-family: var(--font-sans);
      font-size: 0.82rem;
      font-weight: 600;
      padding: 0.2rem 0;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }
    .steps-toggle-btn:hover { color: var(--amber-400); text-decoration: underline; }

    /* ── Back-to-top button (injected by _initBackToTop) ── */
    .back-to-top {
      position: fixed;
      /* 5.25rem, not 1.5rem: the bottom-right corner is squatted on by
         common extension badges (Adobe Acrobat's floating button sits at
         ~24px/40px on Windows). Sitting above that zone keeps us clickable. */
      bottom: 5.25rem;
      right: 1.5rem;
      z-index: 900;
      width: 2.9rem;
      height: 2.9rem;
      border-radius: 50%;
      border: 1px solid var(--border);
      background: var(--bg-card);
      color: var(--amber-500);
      font-size: 1.15rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
      opacity: 0;
      visibility: hidden;
      transform: translateY(8px);
      transition: opacity 0.2s, visibility 0.2s, transform 0.2s, border-color 0.15s;
    }
    .back-to-top.show { opacity: 1; visibility: visible; transform: none; }
    .back-to-top:hover { border-color: var(--amber-500); }
    @media print { .back-to-top { display: none !important; } }

    /* ── Sticky topic-page sidebars (desktop) ──
       Keeps "Relevant law", deadline warnings, and the urgent-help card in
       view while reading the main column. Sidebars taller than the viewport
       scroll internally instead of pinning their bottom out of reach. */
    @media (min-width: 992px) {
      .content-section .col-lg-4 {
        position: sticky;
        top: calc(var(--nav-h, 60px) + 1rem);
        align-self: flex-start;
        max-height: calc(100vh - var(--nav-h, 60px) - 2rem);
        overflow-y: auto;
        /* room so card shadows/tooltips aren't clipped at the right edge */
        padding-right: 2px;
      }
    }

    /* End-of-flow "what now?" cards — injected by _initStepFlows() into the
       final panel of every step flow, so finishing a guide hands the user
       their next concrete action instead of a dead end. */
    .next-actions {
      margin-top: 2rem;
      border-top: 1px solid var(--border);
      padding-top: 1.5rem;
    }
    .next-actions-title {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 1rem;
    }
    .next-actions-grid {
      display: grid;
      /* auto-fit so the card count can change without a CSS edit */
      grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
      gap: 0.75rem;
    }
    @media (max-width: 700px) { .next-actions-grid { grid-template-columns: 1fr; } }
    .next-action-card {
      display: block;
      background: var(--bg-card-alt);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 0.9rem 1rem;
      text-decoration: none;
      transition: border-color 0.15s, background 0.15s;
      cursor: pointer;
      text-align: left;
      width: 100%;
    }
    .next-action-card:hover { border-color: var(--amber-500); }
    .next-action-label {
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--text-primary);
      font-family: var(--font-sans);
      display: flex;
      align-items: center;
      gap: 0.45rem;
    }
    .next-action-label i { color: var(--amber-500); }
    .next-action-sub {
      font-size: 0.8rem;
      color: var(--text-secondary);
      margin-top: 0.25rem;
    }

    /* Expanded "read everything" mode: all panels visible, separated like
       chapters; per-step Next/Back buttons are noise here, hide them. */
    .step-panel.all-open { display: block; }
    .step-panel.all-open + .step-panel.all-open {
      margin-top: 2.25rem;
      padding-top: 1.75rem;
      border-top: 1px solid var(--border);
    }
    .step-panel.all-open .step-nav-btns { display: none; }
    .step-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      min-width: 80px;
      position: relative;
      cursor: pointer;
    }
    .step-item::before {
      content: '';
      position: absolute;
      top: 1.25rem;
      left: 50%;
      right: -50%;
      height: 2px;
      background: var(--slate-200);
      z-index: 0;
    }
    .step-item:last-child::before { display: none; }
    .step-dot {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      background: var(--slate-200);
      color: var(--slate-600);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.95rem;
      z-index: 1;
      transition: background 0.2s, color 0.2s;
      border: 3px solid #fff;
      box-shadow: 0 0 0 2px var(--slate-200);
    }
    .step-item.active .step-dot {
      background: var(--amber-500);
      color: var(--slate-900);
      box-shadow: 0 0 0 2px var(--amber-500);
    }
    .step-item.done .step-dot {
      background: var(--slate-700);
      color: #fff;
      box-shadow: 0 0 0 2px var(--slate-700);
    }
    .step-item.done::before { background: var(--slate-700); }
    .step-label {
      font-size: 0.72rem;
      font-weight: 600;
      color: var(--slate-500);
      margin-top: 0.4rem;
      text-align: center;
      max-width: 70px;
    }
    .step-item.active .step-label { color: var(--slate-800); }

    .step-panel { display: none; }
    .step-panel.active { display: block; }

    .step-nav-btns { display: flex; gap: 0.75rem; margin-top: 2rem; flex-wrap: wrap; }
    .btn-primary-custom {
      background: var(--slate-900);
      color: #fff;
      border: none;
      padding: 0.7rem 1.5rem;
      border-radius: 6px;
      font-weight: 700;
      font-family: var(--font-sans);
      font-size: 0.95rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: background 0.2s;
    }
    .btn-primary-custom:hover { background: var(--slate-700); }
    .btn-amber {
      background: var(--amber-500);
      color: var(--slate-900);
      border: none;
      padding: 0.7rem 1.5rem;
      border-radius: 6px;
      font-weight: 700;
      font-family: var(--font-sans);
      font-size: 0.95rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: background 0.2s;
    }
    .btn-amber:hover { background: var(--amber-400); }
    .btn-outline-custom {
      background: transparent;
      color: var(--slate-700);
      border: 2px solid var(--slate-300);
      padding: 0.65rem 1.4rem;
      border-radius: 6px;
      font-weight: 600;
      font-family: var(--font-sans);
      font-size: 0.95rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      transition: border-color 0.2s, color 0.2s;
    }
    .btn-outline-custom:hover { border-color: var(--slate-600); color: var(--slate-900); }

    /* ── BADGE TAGS ── */
    .tag {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 0.2rem 0.6rem;
      border-radius: 3px;
      margin-bottom: 0.75rem;
    }
    .tag-construction { background: var(--amber-100); color: var(--slate-700); }
    .tag-general { background: var(--slate-100); color: var(--slate-600); }
    .tag-olrb { background: #dbeafe; color: #1d4ed8; }

    /* ── ACCORDION custom ── */
    .faq-item {
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 0.75rem;
      overflow: hidden;
    }
    .faq-question {
      background: var(--bg-card);
      padding: 1rem 1.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      font-weight: 600;
      font-size: 0.97rem;
      gap: 1rem;
      border: none;
      width: 100%;
      text-align: left;
      color: var(--text-primary);
      transition: background 0.15s;
    }
    .faq-question:hover { background: var(--bg-card-alt); }
    .faq-question i { flex-shrink: 0; transition: transform 0.2s; color: var(--text-muted); }
    .faq-question.open i { transform: rotate(180deg); }
    .faq-answer {
      background: var(--bg-faq-answer);
      padding: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease, padding 0.3s;
      font-size: 0.95rem;
      color: var(--text-secondary);
    }
    .faq-answer.open {
      padding: 1rem 1.25rem;
      max-height: 600px;
    }

    /* ── SECTOR TABS ── */
    .sector-tabs {
      display: flex;
      gap: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 1.5rem;
      background: var(--bg-sector-tab);
      padding: 4px;
    }
    .sector-tab {
      flex: 1;
      border: none;
      background: transparent;
      padding: 0.65rem 1rem;
      font-family: var(--font-sans);
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      border-radius: 6px;
      color: var(--text-muted);
      transition: background 0.2s, color 0.2s;
    }
    .sector-tab.active {
      background: var(--bg-card);
      color: var(--text-primary);
      box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    }
    .sector-panel { display: none; }
    .sector-panel.active { display: block; }

    /* ── FORM LINKS ── */
    .form-link-card {
      display: flex;
      align-items: center;
      gap: 1rem;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem 1.25rem;
      text-decoration: none;
      color: inherit;
      transition: border-color 0.2s, box-shadow 0.2s;
      margin-bottom: 0.75rem;
    }
    .form-link-card:hover {
      border-color: var(--amber-400);
      box-shadow: 0 2px 12px rgba(0,0,0,0.07);
      color: inherit;
    }
    .form-link-icon {
      width: 2.75rem;
      height: 2.75rem;
      background: var(--amber-100);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      flex-shrink: 0;
    }
    .form-link-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 0.1rem; }
    .form-link-desc { font-size: 0.83rem; color: var(--text-muted); }

    /* ── CHECKLIST ── */
    .checklist {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    /* Icon + hanging-indent text. This used to be display:flex, which made
       EVERY inline child after the icon its own flex item in a non-wrapping
       row -- fine for "<i> <strong>label</strong> text", but an item with a
       few citation <span>s and a trailing <a> laid them out past the right
       edge of a 375px phone (crisis and unionizing both did). Block flow with
       the icon absolutely positioned gives the same look and lets the content
       wrap like ordinary prose. */
    .checklist li {
      position: relative;
      padding: 0.4rem 0 0.4rem 1.6rem;
      font-size: 0.97rem;
      line-height: 1.5;
      color: var(--text-secondary);
      border-bottom: 1px solid var(--border);
      overflow-wrap: anywhere;
    }
    .checklist li:last-child { border: none; }
    .checklist li > i:first-child {
      position: absolute; left: 0; top: 0.4rem;
      line-height: inherit;
      color: var(--amber-500);
    }
    /* Lists that only carry a bare <i> before flowing text -- keep any other
       inline <i> (rare) in normal flow. */
    .checklist li i:not(:first-child) { position: static; }
    /* Tighter checklist for sidebar context */
    .col-lg-4 .checklist li {
      font-size: 0.84rem;
      padding: 0.3rem 0 0.3rem 1.5rem;
    }
    .col-lg-4 .checklist li > i:first-child { top: 0.3rem; }

    /* ── TIMELINE ── */
    .timeline { position: relative; padding-left: 2rem; }
    .timeline::before {
      content: '';
      position: absolute;
      left: 0.6rem;
      top: 0.5rem;
      bottom: 0.5rem;
      width: 2px;
      background: var(--slate-200);
    }
    .timeline-item {
      position: relative;
      padding-bottom: 1.5rem;
    }
    .timeline-dot {
      position: absolute;
      left: -1.6rem;
      top: 0.25rem;
      width: 1.1rem;
      height: 1.1rem;
      border-radius: 50%;
      background: var(--amber-500);
      border: 2px solid #fff;
      box-shadow: 0 0 0 2px var(--amber-500);
    }
    .timeline-item h5 {
      font-family: var(--font-serif);
      font-size: 1rem;
      margin-bottom: 0.25rem;
    }
    .timeline-item p { font-size: 0.9rem; color: var(--slate-600); margin: 0; }

    /* ── FOOTER ── */
    .site-footer {
      background: var(--slate-900);
      color: var(--slate-400);
      padding: 2.5rem 0;
      margin-top: 2rem;
      font-size: 0.88rem;
    }
    .site-footer a { color: var(--amber-400); text-decoration: none; }
    .site-footer a:hover { color: var(--amber-300); text-decoration: underline; }
    .footer-brand {
      font-family: var(--font-brand);
      font-weight: 800;
      letter-spacing: .02em;
      color: #fff;
      font-size: 1rem;
      margin-bottom: 0.25rem;
    }
    .footer-disclaimer {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 8px;
      padding: 1rem 1.25rem;
      font-size: 0.82rem;
      color: var(--slate-400);
      margin-top: 1.5rem;
      line-height: 1.6;
    }

    /* ── SITEMAP PAGE ── */
    .sitemap-node {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 1rem 1.25rem;
      margin-bottom: 0.5rem;
    }
    .sitemap-node.parent {
      border-left: 4px solid var(--amber-500);
    }
    .sitemap-child {
      margin-left: 1.5rem;
      font-size: 0.92rem;
      color: var(--text-secondary);
      border-left: 2px solid var(--border);
      padding-left: 0.75rem;
      margin-top: 0.5rem;
    }
    .sitemap-child li { padding: 0.2rem 0; }

    /* ── RESPONSIVE ── */
    @media (max-width: 768px) {
      .hero { padding: 3rem 0 2.5rem; }
      .action-cards { padding: 2.5rem 0 3rem; }
      .step-label { font-size: 0.65rem; max-width: 60px; }
    }

    /* ── DARK MODE TOGGLE ── */
    .theme-toggle {
      display: flex;
      align-items: center;
      gap: 0.45rem;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      color: var(--slate-400);
      font-family: var(--font-sans);
      font-size: 0.85rem;
      font-weight: 600;
      padding: 0.4rem 0.85rem;
      border-radius: 2rem;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, color 0.2s;
      white-space: nowrap;
      margin-left: 0.25rem;
    }
    .theme-toggle:hover {
      background: rgba(245,158,11,0.15);
      border-color: rgba(245,158,11,0.4);
      color: var(--amber-400);
    }
    .theme-toggle .toggle-icon { font-size: 1rem; transition: transform 0.4s; }
    [data-theme="dark"] .theme-toggle .toggle-icon { transform: rotate(180deg); }
    .toggle-label-dark { display: none; }
    .toggle-label-light { display: inline; }
    [data-theme="dark"] .toggle-label-dark { display: inline; }
    [data-theme="dark"] .toggle-label-light { display: none; }
    /* ── DEADLINE CALCULATOR ── */
    .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
    @media (max-width: 900px) { .calc-grid { grid-template-columns: 1fr; } }

    .calc-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }
    .calc-card-header {
      padding: 1.4rem 1.75rem 1.1rem;
      border-bottom: 1px solid var(--border);
    }
    .calc-eyebrow {
      font-size: .72rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--amber-500);
      margin-bottom: .4rem;
    }
    .calc-card-header h3 {
      font-size: 1.25rem; margin: 0 0 .35rem;
      color: var(--text-primary);
    }
    .calc-card-header p {
      font-size: .88rem; color: var(--text-secondary);
      margin: 0; line-height: 1.6;
    }
    .calc-body { padding: 1.5rem 1.75rem; }
    .calc-field { margin-bottom: 1rem; }
    .calc-field label {
      display: block; font-size: .82rem; font-weight: 700;
      color: var(--text-secondary); margin-bottom: .35rem;
      font-family: var(--font-sans);
    }
    .calc-field input[type="date"] {
      width: 100%;
      background: var(--bg-card-alt);
      border: 1.5px solid var(--border);
      border-radius: 6px;
      padding: .6rem .9rem;
      font-family: var(--font-sans);
      font-size: .95rem;
      color: var(--text-primary);
      transition: border-color .18s;
      color-scheme: light dark;
    }
    .calc-field input[type="date"]:focus {
      outline: none; border-color: var(--amber-500);
    }
    .calc-field .field-hint {
      font-size: .76rem; color: var(--text-muted);
      margin-top: .3rem; font-style: italic;
    }
    .calc-btn {
      width: 100%;
      background: var(--slate-900);
      color: #fff;
      border: none;
      border-radius: 7px;
      padding: .75rem 1rem;
      font-family: var(--font-sans);
      font-size: .95rem;
      font-weight: 700;
      cursor: pointer;
      transition: background .18s;
      display: flex; align-items: center; justify-content: center; gap: .5rem;
      margin-top: 1.1rem;
    }
    [data-theme="dark"] .calc-btn {
      background: var(--amber-500);
      color: var(--slate-900);
    }
    [data-theme="dark"] .calc-btn:hover {
      background: var(--amber-400);
    }
    .calc-btn:hover { background: var(--slate-800); }

    /* results area */
    .calc-results { margin-top: 1.4rem; }
    .calc-duration-badge {
      display: inline-flex; align-items: center; gap: .5rem;
      background: var(--amber-100); color: var(--slate-800);
      border-radius: 20px; padding: .3rem .9rem;
      font-size: .82rem; font-weight: 700;
      margin-bottom: 1rem;
    }
    /* status banners */
    .calc-banner {
      border-radius: 8px; padding: .9rem 1.1rem;
      display: flex; gap: .75rem; align-items: flex-start;
      font-size: .9rem; margin-bottom: 1rem; font-weight: 600;
    }
    .calc-banner i { flex-shrink: 0; font-size: 1.1rem; margin-top: .05rem; }
    .calc-banner-active  { background: var(--green-100);  color: #15803d; }
    .calc-banner-warning { background: var(--amber-50);   color: #92400e;
                           border-left: 4px solid var(--amber-500); }
    .calc-banner-danger  { background: var(--red-100);    color: #991b1b; }
    .calc-banner-info    { background: var(--slate-100);  color: var(--slate-700); }
    /* Dark-mode overrides — the dark-on-light text colors above are
       unreadable on dark mode's subtle tinted backgrounds. Swap to lighter
       accent colors that contrast well with dark slate. */
    [data-theme="dark"] .calc-banner-info    { background: var(--bg-card-alt);             color: var(--text-secondary); }
    [data-theme="dark"] .calc-banner-active  { background: rgba(22,163,74,0.15);           color: #4ade80; }
    [data-theme="dark"] .calc-banner-warning { background: rgba(245,158,11,0.12);          color: #fcd34d; }
    [data-theme="dark"] .calc-banner-danger  { background: rgba(220,38,38,0.15);           color: #fca5a5; }
    /* Strong text inside banners should stay legible in dark mode too —
       use slightly brighter shades than the body color for emphasis. */
    [data-theme="dark"] .calc-banner-active  strong { color: #86efac; }
    [data-theme="dark"] .calc-banner-warning strong { color: #fde68a; }
    [data-theme="dark"] .calc-banner-danger  strong { color: #fecaca; }

    /* period rows */
    .period-list { display: flex; flex-direction: column; gap: .6rem; }
    .period-row {
      border: 1.5px solid var(--border);
      border-radius: 8px;
      padding: .9rem 1.1rem;
      display: flex; align-items: center; gap: 1rem;
      flex-wrap: wrap;
    }
    .period-row.period-active  { border-color: #16a34a; background: rgba(22,163,74,.06); }
    .period-row.period-past    { opacity: .6; }
    .period-row.period-upcoming{ border-color: var(--amber-400); background: var(--amber-50); }
    .period-info { flex: 1; }
    .period-label { font-weight: 700; font-size: .88rem; color: var(--text-primary); }
    .period-dates { font-size: .83rem; color: var(--text-secondary); margin-top: .15rem; font-family: var(--font-sans); }
    .period-badge {
      flex-shrink: 0;
      font-size: .73rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: .06em; padding: .25rem .65rem; border-radius: 20px;
    }
    .badge-active   { background: #dcfce7; color: #15803d; }
    .badge-past     { background: var(--slate-200); color: var(--slate-600); }
    [data-theme="dark"] .badge-past { background: var(--bg-card-alt); }
    .badge-upcoming { background: var(--amber-100); color: #92400e; }
    .badge-expired  { background: var(--red-100); color: #991b1b; }
    .period-days { font-size: .78rem; color: var(--text-muted); margin-top: .15rem; }

    /* DFR deadline display */
    .dfr-deadline-display {
      text-align: center; padding: 1.25rem 1rem;
      background: var(--bg-card-alt); border-radius: 8px;
      margin-bottom: 1rem; border: 1px solid var(--border);
    }
    .dfr-deadline-label { font-size: .78rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .08em;
      color: var(--text-muted); margin-bottom: .3rem; }
    .dfr-deadline-date  { font-family: var(--font-serif); font-size: 1.5rem;
      font-weight: 700; color: var(--text-primary); }
    .dfr-days-count {
      font-size: 2.5rem; font-weight: 700; font-family: var(--font-serif);
      line-height: 1;
    }
    .dfr-days-label { font-size: .82rem; color: var(--text-muted); margin-top: .2rem; }
    .days-ok      { color: #16a34a; }
    .days-warning { color: var(--amber-500); }
    .days-danger  { color: #dc2626; }

    .calc-info-box {
      background: var(--bg-card-alt); border-radius: 8px;
      padding: 1rem 1.25rem; font-size: .84rem;
      color: var(--text-secondary); margin-top: 1rem;
      border-left: 3px solid var(--border);
    }
    .calc-info-box strong { color: var(--text-primary); }
    .calc-placeholder {
      text-align: center; padding: 2rem 1rem;
      color: var(--text-muted); font-size: .9rem;
    }
    .calc-placeholder i { font-size: 2rem; display: block;
      margin-bottom: .6rem; color: var(--border); }
    .multi-period-note {
      background: var(--amber-50);
      border: 1px solid var(--amber-300);
      border-radius: 8px; padding: .9rem 1.1rem;
      font-size: .84rem; color: var(--slate-800);
      margin-top: 1rem;
    }
    [data-theme="dark"] .multi-period-note {
      background: rgba(245,158,11,.08);
      border-color: rgba(245,158,11,.25);
      color: var(--text-secondary);
    }
    /* ── CLC UNION CHECKER ── */
    .uc-section {
      background: var(--bg-card-alt);
      border-top: 1px solid var(--border);
      padding: 3rem 0 3.5rem;
    }
    .uc-section-header { margin-bottom: 2rem; }
    .uc-section-header h2 { font-size: 1.55rem; margin-bottom: .5rem; }
    .uc-section-header p  { color: var(--text-secondary); font-size: .95rem; max-width: 680px; margin: 0; }

    /* search */
    .uc-search-wrap { position: relative; margin-bottom: 1.25rem; max-width: 420px; }
    .uc-search-wrap i {
      position: absolute; left: .9rem; top: 50%;
      transform: translateY(-50%); color: var(--text-muted); pointer-events: none;
    }
    .uc-search-input {
      width: 100%;
      background: var(--bg-card);
      border: 1.5px solid var(--border);
      border-radius: 8px;
      padding: .65rem .9rem .65rem 2.4rem;
      font-family: var(--font-sans); font-size: .93rem;
      color: var(--text-primary); transition: border-color .18s;
    }
    .uc-search-input:focus { outline: none; border-color: var(--amber-500); }

    /* union grid */
    .uc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
      gap: .6rem;
      margin-bottom: 2rem;
    }
    .uc-card {
      background: var(--bg-card);
      border: 1.5px solid var(--border);
      border-radius: 9px;
      padding: .8rem .9rem;
      cursor: pointer;
      transition: border-color .18s, box-shadow .18s, transform .15s;
      display: flex; flex-direction: column; gap: .3rem;
    }
    .uc-card:hover  { border-color: var(--amber-400); transform: translateY(-1px); }
    .uc-card.active { border-color: var(--amber-500); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
    .uc-card.hidden { display: none; }
    .uc-card-abbr   { font-weight: 800; font-size: .95rem; color: var(--text-primary); line-height: 1.2; }
    .uc-card-name   { font-size: .72rem; color: var(--text-muted); line-height: 1.3; }
    .uc-card-sector { font-size: .68rem; color: var(--text-muted); opacity: .75; margin-top: .1rem;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .uc-pill {
      display: inline-block; font-size: .65rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: .05em;
      padding: .15rem .5rem; border-radius: 20px; margin-top: .25rem; width: fit-content;
    }
    .uc-pill-clc { background: #dbeafe; color: #1d4ed8; }
    .uc-pill-ind { background: var(--green-100); color: #15803d; }
    .uc-pill-former { background: var(--amber-100); color: #92400e; }
    .uc-pill-unk    { background: var(--slate-100); color: var(--text-secondary); border: 1px dashed var(--slate-300); }
    [data-theme="dark"] .uc-pill-clc { background: rgba(59,130,246,.2); color: #93c5fd; }
    [data-theme="dark"] .uc-pill-ind { background: rgba(22,163,74,.2); color: #86efac; }
    [data-theme="dark"] .uc-pill-former { background: rgba(245,158,11,.2); color: #fcd34d; }
    [data-theme="dark"] .uc-pill-unk    { background: rgba(148,163,184,.14); color: #b0c4d8; border-color: var(--slate-300); }

    /* Source + date line under every checker result. Small, but it is what
       makes a stale entry visible as stale instead of quietly wrong. */
    .uc-provenance {
      font-size: .8rem; line-height: 1.5; color: var(--text-muted);
      margin: .85rem 0 0;
    }
    .uc-provenance a { color: var(--amber-500); font-weight: 600; }

    /* result panel */
    .uc-result {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
      animation: diagFadeIn .2s ease;
    }
    .uc-result-header {
      padding: 1.25rem 1.5rem;
      border-bottom: 1px solid var(--border);
      display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    }
    .uc-result-union-name { font-family: var(--font-serif); font-size: 1.15rem; color: var(--text-primary); }
    .uc-result-body { padding: 1.5rem; }
    .uc-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
    @media (max-width: 640px) { .uc-columns { grid-template-columns: 1fr; } }

    .uc-col-header {
      display: flex; align-items: center; gap: .5rem;
      font-weight: 800; font-size: .82rem; text-transform: uppercase;
      letter-spacing: .07em; margin-bottom: .75rem; padding-bottom: .5rem;
      border-bottom: 2px solid var(--border);
    }
    .uc-col-blocked   .uc-col-header { color: #dc2626; border-color: #dc2626; }
    .uc-col-available .uc-col-header { color: #16a34a; border-color: #16a34a; }
    .uc-col-all       .uc-col-header { color: #16a34a; border-color: #16a34a; }
    /* Deliberately grey, not red or green — "we don't know" is its own answer
       and shouldn't read as either a block or a green light. */
    .uc-col-unsure    .uc-col-header { color: var(--text-secondary); border-color: var(--slate-300); }

    .uc-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
    .uc-chip {
      display: inline-flex; align-items: center; gap: .35rem;
      font-size: .8rem; font-weight: 700; padding: .3rem .7rem;
      border-radius: 20px; white-space: nowrap;
    }
    .chip-blocked   { background: var(--red-100);   color: #991b1b; }
    .chip-available { background: var(--green-100);  color: #15803d; }
    .chip-unsure    { background: var(--slate-100); color: var(--text-secondary); border: 1px dashed var(--slate-300); }
    [data-theme="dark"] .chip-blocked   { background: rgba(220,38,38,.18); color: #fca5a5; }
    [data-theme="dark"] .chip-available { background: rgba(22,163,74,.18); color: #86efac; }
    [data-theme="dark"] .chip-unsure    { background: rgba(148,163,184,.14); color: #b0c4d8; border-color: var(--slate-300); }

    /* justification process box */
    .uc-process-box {
      background: var(--bg-card-alt);
      border: 1px solid var(--border);
      border-left: 4px solid var(--amber-500);
      border-radius: 8px;
      padding: 1.1rem 1.25rem;
      margin-bottom: 1rem;
    }
    .uc-process-box h5 {
      font-family: var(--font-serif); font-size: 1rem;
      color: var(--text-primary); margin-bottom: .5rem;
    }
    .uc-process-steps {
      list-style: none; padding: 0; margin: .75rem 0 0;
      display: flex; flex-direction: column; gap: .4rem;
    }
    .uc-process-steps li {
      display: flex; gap: .6rem; font-size: .88rem; color: var(--text-secondary);
    }
    .uc-process-steps li .step-num {
      flex-shrink: 0; width: 1.4rem; height: 1.4rem; border-radius: 50%;
      background: var(--amber-100); color: var(--slate-800);
      font-weight: 800; font-size: .72rem;
      display: flex; align-items: center; justify-content: center;
      margin-top: .05rem;
    }
    [data-theme="dark"] .uc-process-steps li .step-num { color: var(--slate-900); }

    /* ── GLOSSARY PAGE ── */
    .gloss-search-wrap { position: relative; max-width: 420px; margin-bottom: 1.75rem; }
    .gloss-search-wrap i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
    .gloss-search-input {
      width: 100%; background: var(--bg-card); border: 1.5px solid var(--border);
      border-radius: 8px; padding: .65rem .9rem .65rem 2.4rem;
      font-family: var(--font-sans); font-size: .93rem; color: var(--text-primary);
      transition: border-color .18s;
    }
    .gloss-search-input:focus { outline: none; border-color: var(--amber-500); }

    .gloss-az-nav {
      display: flex; flex-wrap: wrap; gap: .3rem;
      margin-bottom: 2rem; padding-bottom: 1.25rem;
      border-bottom: 1px solid var(--border);
    }
    .gloss-az-btn {
      background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 6px;
      padding: .3rem .65rem; font-family: var(--font-sans); font-weight: 700;
      font-size: .82rem; color: var(--text-secondary); cursor: pointer;
      transition: border-color .15s, color .15s, background .15s;
    }
    .gloss-az-btn:hover, .gloss-az-btn.active { border-color: var(--amber-500); color: var(--amber-500); background: var(--amber-50); }
    [data-theme="dark"] .gloss-az-btn.active { background: rgba(245,158,11,.12); }
    .gloss-az-btn.dim { opacity: .35; cursor: default; }

    .gloss-letter-section { margin-bottom: 2rem; }
    .gloss-letter-heading {
      font-family: var(--font-serif); font-size: 1.5rem; font-weight: 700;
      color: var(--amber-500); margin-bottom: .75rem; padding-bottom: .35rem;
      border-bottom: 2px solid var(--border);
    }
    .gloss-entry {
      padding: .9rem 0; border-bottom: 1px solid var(--border);
      transition: opacity .2s;
    }
    .gloss-entry:last-child { border-bottom: none; }
    .gloss-entry.hidden { display: none; }
    .gloss-entry-term {
      font-family: var(--font-serif); font-size: 1rem; font-weight: 700;
      color: var(--text-primary); margin-bottom: .3rem;
      display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
    }
    .gloss-entry-abbr {
      font-family: var(--font-sans); font-size: .75rem; font-weight: 700;
      color: var(--amber-500); background: var(--amber-100); border-radius: 4px;
      padding: .1rem .45rem; letter-spacing: .04em;
    }
    [data-theme="dark"] .gloss-entry-abbr { background: rgba(245,158,11,.15); }
    .gloss-entry-def { font-size: .93rem; color: var(--text-secondary); line-height: 1.7; margin-bottom: .3rem; }
    .gloss-entry-ref { font-size: .8rem; color: var(--text-muted); font-style: italic; }
    .gloss-no-results { text-align: center; padding: 2.5rem; color: var(--text-muted); font-size: .95rem; }
    .gloss-letter-section.hidden { display: none; }

    /* ── TOOLTIPS ── */
    .gloss-term {
      position: relative; display: inline; cursor: help;
    }
    .gt-word {
      border-bottom: 1.5px dashed var(--amber-400);
      padding-bottom: 1px;
    }
    /* Hidden with display:none, NOT visibility:hidden. A hidden-but-laid-out
       absolutely positioned 270px box still extends the page's scrollable
       width, so every glossed page could be panned sideways on a phone with
       nothing to see -- 14 of 19 pages did. display:none takes it out of
       layout entirely; the fade-in below is an animation because a
       transition cannot run from display:none. */
    .gloss-tip {
      display: none; opacity: 0;
      position: absolute;
      bottom: calc(100% + 8px);
      left: 50%; transform: translateX(-50%);
      background: #0f172a; color: #e2e8f0;
      border: 1px solid rgba(245,158,11,.3);
      border-radius: 9px; padding: .75rem 1rem;
      width: 270px; max-width: 90vw;
      font-size: .8rem; font-family: var(--font-sans);
      font-weight: 400; line-height: 1.55;
      z-index: 9999; white-space: normal; text-align: left;
      box-shadow: 0 8px 28px rgba(0,0,0,.45);
      pointer-events: none;
    }
    @keyframes gloss-fade { from { opacity: 0; } to { opacity: 1; } }
    .gloss-tip::after {
      content: ''; position: absolute;
      top: 100%; left: 50%; transform: translateX(-50%);
      border: 6px solid transparent; border-top-color: #0f172a;
    }
    .gloss-term:hover .gloss-tip,
    .gloss-term:focus .gloss-tip,
    .gloss-term:focus-within .gloss-tip {   /* keeps it open while tabbing onto its link */
      display: block; opacity: 1; pointer-events: auto;
      animation: gloss-fade .15s ease-out;
    }
    .gt-tip-text { display: block; margin-bottom: .4rem; }
    .gt-link {
      color: var(--amber-400) !important; font-weight: 700;
      font-size: .78rem; text-decoration: none;
      display: inline-block; margin-top: .25rem;
    }
    .gt-link:hover { text-decoration: underline; color: var(--amber-300) !important; }
    .gt-inline { display: inline; }
    /* push tooltip right when near left edge */
    .gloss-term.tip-right .gloss-tip { left: 0; transform: none; }
    .gloss-term.tip-right .gloss-tip::after { left: 20px; transform: none; }
    /* push tooltip left when near right edge */
    .gloss-term.tip-left .gloss-tip { left: auto; right: 0; transform: none; }
    .gloss-term.tip-left .gloss-tip::after { left: auto; right: 20px; transform: none; }

    /* ── LETTER TEMPLATES ── */
    .tmpl-selector {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0.6rem;
      margin-bottom: 2rem;
    }
    @media (max-width: 900px) { .tmpl-selector { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 500px) { .tmpl-selector { grid-template-columns: 1fr; } }
    .tmpl-tab {
      background: var(--bg-card);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: 1rem 1.1rem;
      cursor: pointer;
      text-align: left;
      font-family: var(--font-sans);
      transition: border-color .2s, box-shadow .2s;
    }
    .tmpl-tab:hover { border-color: var(--amber-400); }
    .tmpl-tab.active {
      border-color: var(--amber-500);
      box-shadow: 0 0 0 3px rgba(245,158,11,.15);
    }
    .tmpl-tab-icon { font-size: 1.3rem; color: var(--amber-500); margin-bottom: .5rem; }
    .tmpl-tab-title { font-weight: 700; font-size: .88rem; color: var(--text-primary); line-height: 1.3; }
    .tmpl-tab-sub { font-size: .76rem; color: var(--text-muted); margin-top: .2rem; }
    /* editor layout */
    .tmpl-editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
    @media (max-width: 900px) { .tmpl-editor { grid-template-columns: 1fr; } }
    .tmpl-fields-panel {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 1.5rem;
    }
    .tmpl-fields-panel h4 { font-size: 1rem; margin-bottom: 1rem; color: var(--text-primary); }
    .tmpl-field { margin-bottom: 1rem; }
    .tmpl-field label {
      display: block; font-size: .82rem; font-weight: 700;
      color: var(--text-secondary); margin-bottom: .3rem;
      font-family: var(--font-sans);
    }
    .tmpl-field input, .tmpl-field textarea {
      width: 100%;
      background: var(--bg-card-alt);
      border: 1.5px solid var(--border);
      border-radius: 6px;
      padding: .55rem .8rem;
      font-family: var(--font-sans);
      font-size: .9rem;
      color: var(--text-primary);
      transition: border-color .18s;
      resize: vertical;
    }
    .tmpl-field input:focus, .tmpl-field textarea:focus {
      outline: none; border-color: var(--amber-500);
    }
    .tmpl-field input[type="date"] { color-scheme: light dark; }
    .tmpl-field .field-hint {
      font-size: .76rem; color: var(--text-muted);
      margin-top: .3rem; font-style: italic;
    }
    /* preview panel */
    .tmpl-preview-panel {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
      position: sticky;
      top: 5rem;
    }
    .tmpl-preview-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: .85rem 1.25rem;
      border-bottom: 1px solid var(--border);
      gap: .75rem; flex-wrap: wrap;
    }
    .tmpl-preview-label {
      font-size: .8rem; font-weight: 700; color: var(--text-muted);
      text-transform: uppercase; letter-spacing: .06em;
    }
    .tmpl-preview-actions { display: flex; gap: .5rem; }
    .tmpl-btn-copy, .tmpl-btn-dl {
      display: inline-flex; align-items: center; gap: .4rem;
      font-family: var(--font-sans); font-size: .82rem; font-weight: 700;
      border-radius: 6px; padding: .45rem .9rem;
      cursor: pointer; border: none; transition: background .18s, color .18s;
    }
    .tmpl-btn-copy {
      background: var(--slate-900); color: #fff;
    }
    [data-theme="dark"] .tmpl-btn-copy { background: var(--slate-700); }
    .tmpl-btn-copy:hover { background: var(--slate-700); }
    .tmpl-btn-copy.copied { background: var(--green-600); }
    .tmpl-btn-dl {
      background: var(--bg-card-alt); color: var(--text-secondary);
      border: 1.5px solid var(--border);
    }
    .tmpl-btn-dl:hover { border-color: var(--amber-400); color: var(--text-primary); }
    /* the letter itself */
    .tmpl-letter {
      font-family: 'Libre Baskerville', Georgia, serif;
      font-size: .88rem;
      line-height: 1.85;
      white-space: pre-wrap;
      color: var(--text-primary);
      padding: 1.5rem 1.75rem;
      max-height: 560px;
      overflow-y: auto;
    }
    /* RTL support for Arabic */
    .tmpl-letter[dir="rtl"] {
      font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
      text-align: right;
      line-height: 2;
      direction: rtl;
    }
    .tmpl-letter .blank {
      background: rgba(245,158,11,.22);
      border-bottom: 1.5px solid var(--amber-500);
      border-radius: 2px;
      padding: 0 2px;
      color: var(--amber-500);
      font-style: italic;
    }
    .tmpl-notice {
      font-size: .8rem; color: var(--text-muted);
      border-top: 1px solid var(--border);
      padding: .75rem 1.25rem;
    }

    /* ── CLINIC FINDER ── */
    .clinic-intro-note {
      background: var(--amber-50); border: 1px solid var(--amber-300);
      border-left: 4px solid var(--amber-500); border-radius: 8px;
      padding: 1.1rem 1.25rem; margin-bottom: 2rem; font-size: .9rem; color: var(--slate-800);
    }
    [data-theme="dark"] .clinic-intro-note { background: rgba(245,158,11,.08); border-color: rgba(245,158,11,.25); color: var(--text-secondary); }
    .clinic-intro-note strong { color: var(--text-primary); }

    .clinic-region-filter {
      display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem;
    }
    .clinic-region-btn {
      background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 8px;
      padding: .45rem 1rem; font-family: var(--font-sans); font-weight: 700;
      font-size: .82rem; color: var(--text-secondary); cursor: pointer;
      transition: border-color .18s, color .18s, background .18s;
    }
    .clinic-region-btn:hover { border-color: var(--amber-400); color: var(--text-primary); }
    .clinic-region-btn.active {
      border-color: var(--amber-500); background: var(--amber-50); color: var(--slate-900);
    }
    [data-theme="dark"] .clinic-region-btn.active { background: rgba(245,158,11,.15); color: var(--amber-400); }

    .clinic-search-wrap { position: relative; max-width: 400px; margin-bottom: 1.5rem; }
    .clinic-search-wrap i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
    .clinic-search-input {
      width: 100%; background: var(--bg-card); border: 1.5px solid var(--border);
      border-radius: 8px; padding: .65rem .9rem .65rem 2.4rem;
      font-family: var(--font-sans); font-size: .92rem; color: var(--text-primary);
      transition: border-color .18s;
    }
    .clinic-search-input:focus { outline: none; border-color: var(--amber-500); }

    .clinic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
    .clinic-card {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
      padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem;
      transition: border-color .2s, box-shadow .2s;
    }
    .clinic-card:hover { border-color: var(--amber-400); box-shadow: 0 4px 16px rgba(0,0,0,.07); }
    .clinic-card.hidden { display: none; }
    .clinic-card-name { font-weight: 700; font-size: .97rem; color: var(--text-primary); line-height: 1.35; }
    .clinic-card-region {
      font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
      color: var(--amber-500); margin-bottom: -.2rem;
    }
    .clinic-card-area { font-size: .83rem; color: var(--text-muted); }
    .clinic-tags { display: flex; flex-wrap: wrap; gap: .35rem; }
    .clinic-tag {
      font-size: .7rem; font-weight: 700; padding: .2rem .55rem; border-radius: 20px;
      text-transform: uppercase; letter-spacing: .05em;
    }
    .tag-emp  { background: #dbeafe; color: #1d4ed8; }
    .tag-lra  { background: var(--amber-100); color: #92400e; }
    .tag-wsib { background: var(--green-100); color: #15803d; }
    .tag-safe { background: #f3e8ff; color: #7c3aed; }
    .tag-hr   { background: #fce7f3; color: #be185d; }
    .tag-inc  { background: var(--slate-100); color: var(--slate-600); }
    .tag-bil  { background: #ecfdf5; color: #065f46; }
    [data-theme="dark"] .tag-emp  { background: rgba(59,130,246,.18); color: #93c5fd; }
    [data-theme="dark"] .tag-lra  { background: rgba(245,158,11,.18); color: #fcd34d; }
    [data-theme="dark"] .tag-wsib { background: rgba(22,163,74,.18); color: #86efac; }
    [data-theme="dark"] .tag-safe { background: rgba(124,58,237,.18); color: #c4b5fd; }
    [data-theme="dark"] .tag-hr   { background: rgba(190,24,93,.18); color: #f9a8d4; }
    [data-theme="dark"] .tag-inc  { background: var(--bg-card-alt); color: var(--text-muted); }
    [data-theme="dark"] .tag-bil  { background: rgba(6,95,70,.25); color: #6ee7b7; }

    .clinic-card-note { font-size: .8rem; color: var(--text-muted); font-style: italic; line-height: 1.45; }
    .clinic-card-actions { display: flex; gap: .5rem; margin-top: .3rem; flex-wrap: wrap; }
    .clinic-lao-btn {
      display: inline-flex; align-items: center; gap: .35rem;
      font-size: .8rem; font-weight: 700; font-family: var(--font-sans);
      color: var(--text-secondary); border: 1.5px solid var(--border); border-radius: 6px;
      padding: .35rem .75rem; cursor: pointer; background: var(--bg-card-alt);
      text-decoration: none; transition: border-color .15s, color .15s;
    }
    .clinic-lao-btn:hover { border-color: var(--amber-400); color: var(--text-primary); }
    .clinic-no-results { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
    .clinic-no-results i { font-size: 2rem; display: block; margin-bottom: .5rem; color: var(--border); }

    .clinic-extras-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
    .clinic-extra-card {
      background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
      padding: 1.25rem; border-left: 4px solid var(--amber-500);
    }
    .clinic-extra-card h4 { font-size: .97rem; margin-bottom: .4rem; }
    .clinic-extra-card p { font-size: .85rem; color: var(--text-secondary); margin: 0 0 .75rem; line-height: 1.55; }

    /* ── DIAGNOSTIC WIDGET ── */
    .diagnostic-section {
      background: var(--bg-card-alt);
      border-bottom: 1px solid var(--border);
      padding: 3rem 0;
    }
    .diagnostic-wrap {
      /* max-width removed — now sized by Bootstrap column */
    }
    .diagnostic-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--amber-500);
      margin-bottom: 0.6rem;
    }
    .diagnostic-heading {
      font-family: var(--font-serif);
      font-size: clamp(1.35rem, 3vw, 1.75rem);
      color: var(--text-primary);
      margin-bottom: 0.35rem;
    }
    .diagnostic-sub {
      font-size: 0.92rem;
      color: var(--text-secondary);
      margin-bottom: 1.75rem;
    }
    /* progress dots */
    .diag-progress {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-bottom: 1.5rem;
    }
    .diag-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 50%;
      background: var(--border);
      transition: background 0.25s, transform 0.25s;
    }
    .diag-dot.active {
      background: var(--amber-500);
      transform: scale(1.3);
    }
    .diag-dot.done { background: var(--slate-600); }
    .diag-step-label {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-left: 0.5rem;
    }
    /* question card */
    .diag-card {
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 2rem;
      animation: diagFadeIn 0.22s ease;
    }
    @keyframes diagFadeIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .diag-q {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      color: var(--text-primary);
      margin-bottom: 1.25rem;
      line-height: 1.4;
    }
    /* choice options */
    .diag-options { display: flex; flex-direction: column; gap: 0.6rem; }
    .diag-option {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      background: var(--bg-card-alt);
      border: 1.5px solid var(--border);
      border-radius: 8px;
      padding: 0.85rem 1.1rem;
      cursor: pointer;
      font-size: 0.95rem;
      color: var(--text-primary);
      font-family: var(--font-sans);
      font-weight: 600;
      text-align: left;
      transition: border-color 0.18s, background 0.18s, color 0.18s;
      width: 100%;
    }
    .diag-option:hover {
      border-color: var(--amber-500);
      background: var(--amber-50);
      color: var(--text-primary);
    }
    .diag-option .opt-icon {
      font-size: 1.15rem;
      color: var(--amber-500);
      flex-shrink: 0;
      width: 1.5rem;
      text-align: center;
    }
    /* yes/no row */
    .diag-yesno {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .diag-yn-btn {
      flex: 1;
      min-width: 120px;
      border: 1.5px solid var(--border);
      border-radius: 8px;
      padding: 0.9rem 1rem;
      cursor: pointer;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      transition: border-color 0.18s, background 0.18s, color 0.18s;
    }
    .diag-yn-yes {
      background: var(--bg-card-alt);
      color: var(--green-600);
      border-color: var(--border);
    }
    .diag-yn-yes:hover {
      border-color: var(--green-600);
      background: var(--green-100);
    }
    .diag-yn-no {
      background: var(--bg-card-alt);
      color: var(--text-secondary);
      border-color: var(--border);
    }
    .diag-yn-no:hover {
      border-color: var(--slate-500);
      background: var(--bg-card-alt);
      color: var(--text-primary);
    }
    /* back link */
    .diag-back {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.83rem;
      font-weight: 600;
      color: var(--text-muted);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      margin-top: 1.1rem;
      transition: color 0.15s;
      font-family: var(--font-sans);
    }
    .diag-back:hover { color: var(--text-secondary); }
    /* result card */
    .diag-result-card {
      background: var(--bg-card);
      border: 2px solid var(--amber-500);
      border-radius: 12px;
      padding: 2rem;
      animation: diagFadeIn 0.25s ease;
    }
    .diag-result-icon {
      width: 3.5rem;
      height: 3.5rem;
      background: var(--amber-100);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.6rem;
      color: var(--slate-800);
      margin-bottom: 1rem;
    }
    .diag-result-title {
      font-family: var(--font-serif);
      font-size: 1.2rem;
      color: var(--text-primary);
      margin-bottom: 0.6rem;
    }
    .diag-result-body {
      font-size: 0.93rem;
      color: var(--text-secondary);
      margin-bottom: 1.4rem;
      line-height: 1.65;
    }
    .diag-result-actions {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      align-items: center;
    }
    .diag-restart {
      background: none;
      border: none;
      color: var(--text-muted);
      font-family: var(--font-sans);
      font-size: 0.87rem;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0;
      transition: color 0.15s;
    }
    .diag-restart:hover { color: var(--text-secondary); }
    @media (max-width: 576px) {
      .diag-card, .diag-result-card { padding: 1.35rem; }
    }

    /* ══════════════════════════════════════════════
       PRINT STYLES
    ══════════════════════════════════════════════ */
    .print-header { display: none; }

    @media print {
      /* ── Page setup ── */
      @page { margin: 2cm 1.8cm 2.5cm; }

      /* ── Global reset to white/black ── */
      *, *::before, *::after {
        background: #fff !important;
        color: #111 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        border-color: #bbb !important;
        animation: none !important;
        transition: none !important;
      }

      body {
        font-family: 'Libre Baskerville', Georgia, serif;
        font-size: 11pt;
        line-height: 1.65;
        color: #111;
      }

      /* ── Print-only header ── */
      .print-header {
        display: block !important;
        border-bottom: 2pt solid #111;
        padding-bottom: .6rem;
        margin-bottom: 1.25rem;
        font-family: 'Libre Baskerville', Georgia, serif;
      }
      .print-header-brand {
        font-size: 14pt;
        font-weight: 700;
        margin-bottom: .2rem;
      }
      .print-header-note {
        font-size: 8.5pt;
        color: #444 !important;
        font-style: italic;
      }

      /* ── Hide chrome & interactive elements ── */
      .site-nav,
      .site-footer,
      .back-btn,
      .theme-toggle,
      .navbar-toggler,
      .diagnostic-section,
      .step-nav-btns,
      .step-tracker,
      .sector-tabs,
      .uc-section,
      .gloss-search-wrap,
      .gloss-az-nav,
      .clinic-search-wrap,
      .clinic-region-filter,
      .clinic-card-actions,
      .clinic-extras-grid,
      .tmpl-selector,
      .tmpl-fields-panel,
      .tmpl-preview-header,
      .tmpl-notice,
      .calc-btn,
      .calc-grid > .calc-card:last-child,
      .diag-back,
      .diag-restart,
      .action-cards,
      .btn-amber,
      .btn-primary-custom,
      .btn-outline-custom,
      .form-link-card .bi-box-arrow-up-right,
      #diag-widget,
      #uc-search,
      .steps-toggle-row,
      .next-actions,
      .uc-search-wrap { display: none !important; }

      /* ── Show all hidden dynamic content ── */
      /* Step panels — print entire guide, not just current step */
      .step-panel { display: block !important; }
      .step-panel + .step-panel {
        border-top: 1pt solid #ddd !important;
        margin-top: 1rem !important;
        padding-top: 1rem !important;
      }

      /* FAQ answers — expand all */
      .faq-answer {
        display: block !important;
        max-height: none !important;
        padding: .65rem 1.25rem !important;
        background: #fafafa !important;
      }
      .faq-question i.bi-chevron-down { display: none !important; }

      /* Sector panels — show both (non-construction & construction) */
      .sector-panel { display: block !important; }
      .sector-panel + .sector-panel {
        border-top: 1pt solid #ddd !important;
        margin-top: .75rem !important;
        padding-top: .75rem !important;
      }

      /* Glossary — all entries visible */
      .gloss-entry.hidden,
      .gloss-letter-section.hidden { display: block !important; }

      /* Clinics — all cards visible */
      .clinic-card.hidden { display: block !important; }

      /* ── Layout ── */
      .container { max-width: 100% !important; padding: 0 !important; width: 100% !important; }
      .row { display: block !important; }
      .row > * {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        float: none !important;
        padding: 0 !important;
        margin-bottom: .75rem;
      }
      .content-section { padding: 1rem 0 !important; }

      /* ── Hero / section headers ── */
      .section-hero, .hero {
        padding: .75rem 0 .5rem !important;
        border-bottom: 2pt solid #111;
        margin-bottom: 1rem;
      }
      .section-hero h1, .hero h1 { font-size: 18pt !important; color: #111 !important; }
      .hero h1 em, .hero h1 span { color: #333 !important; }
      .section-hero p, .hero p.lead { color: #333 !important; font-size: 10pt !important; }
      .hero-eyebrow { color: #555 !important; background: #f0f0f0 !important; border-color: #bbb !important; font-size: 7.5pt !important; }
      /* Print never runs animations — force the hero's masked lines and
         drawn dash to their settled end states, or the headline prints
         at its initial off-mask position (i.e., blank). */
      .hero-line { overflow: visible !important; }
      .hero-line-inner, .hero-dash { transform: none !important; }
      .hero-underline { display: none !important; }

      /* ── Disclaimer bar ── */
      .disclaimer-bar {
        background: #f5f5f5 !important;
        border-top: 1px solid #ccc !important;
        border-bottom: 1px solid #ccc !important;
        font-size: 8.5pt !important;
        padding: .4rem 0 !important;
      }

      /* ── Content cards ── */
      .content-card {
        border: 1px solid #bbb !important;
        border-radius: 0 !important;
        padding: .75rem !important;
        margin-bottom: .75rem !important;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .content-card h4 { font-size: 11pt !important; }

      /* ── Callout boxes ── */
      .callout {
        border: 1px solid #bbb !important;
        border-left: 3pt solid #888 !important;
        background: #fafafa !important;
        padding: .6rem .9rem !important;
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .callout-warning { border-left-color: #c07800 !important; }
      .callout-success { border-left-color: #16a34a !important; }
      .callout-danger  { border-left-color: #c82020 !important; }
      .callout i { color: #444 !important; }

      /* ── Tags and badges ── */
      .tag, .uc-pill, .clinic-tag, .gloss-entry-abbr,
      .hero-eyebrow, .calc-eyebrow, .diag-eyebrow,
      .calc-duration-badge, .period-badge, .dfr-deadline-label {
        background: #f0f0f0 !important;
        color: #333 !important;
        border: 1px solid #aaa !important;
      }

      /* ── Checklist ── */
      .checklist li {
        border-bottom-color: #eee !important;
        color: #222 !important;
      }
      .checklist li i { color: #444 !important; }

      /* ── Timeline ── */
      .timeline::before { background: #999 !important; }
      .timeline-dot {
        background: #444 !important;
        border-color: #fff !important;
        box-shadow: 0 0 0 2pt #444 !important;
      }
      .timeline-item h5 { font-size: 10.5pt !important; }
      .timeline-item p   { font-size: 9.5pt !important; color: #333 !important; }

      /* ── FAQ ── */
      .faq-item { border: 1px solid #bbb !important; border-radius: 0 !important; }
      .faq-question { background: #f5f5f5 !important; font-size: 10pt !important; }

      /* ── Tables ── */
      table { width: 100% !important; border-collapse: collapse !important; }
      th, td { border: 1pt solid #999 !important; padding: 5pt 7pt !important; font-size: 9.5pt !important; }
      th { background: #f0f0f0 !important; font-weight: 700 !important; }

      /* ── Form link cards (OLRB links) ── */
      .form-link-card {
        border: 1px solid #bbb !important;
        border-radius: 0 !important;
        padding: .6rem !important;
        break-inside: avoid;
      }
      .form-link-icon { background: #f0f0f0 !important; }

      /* ── Glossary ── */
      .gloss-letter-heading { color: #333 !important; border-bottom: 1.5pt solid #ccc !important; }
      .gloss-entry { border-bottom-color: #eee !important; padding: .6rem 0 !important; }
      .gloss-entry-def { font-size: 9.5pt !important; color: #222 !important; }
      .gloss-entry-ref { color: #555 !important; }

      /* ── Clinic cards ── */
      .clinic-card {
        border: 1px solid #bbb !important;
        border-radius: 0 !important;
        padding: .6rem !important;
        break-inside: avoid;
        margin-bottom: .5rem !important;
      }
      .clinic-card-name { font-size: 10pt !important; }
      .clinic-card-area, .clinic-card-note { font-size: 8.5pt !important; color: #444 !important; }

      /* ── Template preview ── */
      .tmpl-editor { display: block !important; }
      .tmpl-preview-panel {
        border: 1px solid #bbb !important;
        border-radius: 0 !important;
        position: static !important;
        width: 100% !important;
      }
      .tmpl-letter {
        max-height: none !important;
        overflow: visible !important;
        font-size: 10.5pt !important;
        padding: 1rem !important;
      }

      /* ── Calculator results ── */
      .calc-card {
        border: 1px solid #bbb !important;
        border-radius: 0 !important;
        break-inside: avoid;
      }
      .calc-results { margin-top: .75rem !important; }
      .period-row { border: 1px solid #bbb !important; border-radius: 0 !important; }

      /* ── Tooltip suppression ── */
      .gloss-tip { display: none !important; }
      .gt-word { border-bottom: none !important; }
      .gt-inline { display: inline !important; }

      /* ── Show URLs for external links ── */
      a[href^="http"]::after,
      a[href^="https"]::after {
        content: ' [' attr(href) ']';
        font-size: 7.5pt;
        color: #555 !important;
        font-style: italic;
        font-family: 'Source Sans 3', sans-serif;
        word-break: break-all;
      }
      /* Suppress URL display for purely navigational links */
      .clinic-lao-btn::after,
      .clinic-extra-card a::after,
      .callout a::after,
      .content-card a::after,
      .footer-disclaimer a::after { content: none !important; }

      /* ── Page break rules ── */
      h2, h3, h4 { break-after: avoid; page-break-after: avoid; }
      .content-card, .callout, .faq-item, .clinic-card,
      .gloss-entry, .timeline-item, .period-row, .form-link-card {
        break-inside: avoid;
        page-break-inside: avoid;
      }
    }

    /* ── Saved-work cards (My Saved Work page) ── */
    .saved-item-card {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:9px; padding:1rem 1.25rem;
      display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:.6rem;
    }
    .saved-item-info { flex:1; min-width:0; }
    .saved-item-name { font-weight:700; font-size:.93rem; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .saved-item-meta { font-size:.77rem; color:var(--text-muted); margin-top:.15rem; }
    .saved-item-actions { display:flex; gap:.4rem; flex-shrink:0; }
    /* Toast */
    /* width: without it a fixed box at left:50% may use only half the screen,
       which squeezed a long toast into a tall, narrow column on a phone. */
    .toast-wrap { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:9200; display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none; width:max-content; max-width:min(36rem, calc(100vw - 2rem)); }
    /* NOT ".toast": Bootstrap 5 hides every .toast without .show
       (.toast:not(.show) { display:none }), so from launch until 2026-10-02
       no toast on this site was ever seen or announced. */
    .ul-toast {
      background:#0f172a; color:#e2e8f0; border-radius:8px;
      padding:.6rem 1.2rem; font-size:.87rem; font-weight:600;
      font-family:var(--font-sans); box-shadow:0 4px 16px rgba(0,0,0,.35);
      display:flex; align-items:center; gap:.5rem; pointer-events:auto;
      animation:toastIn .22s ease;
      border:1px solid rgba(148,163,184,.3);   /* edge for the plain toast on the dark theme's near-identical page */
    }
    /* White text: #e2e8f0 on this green is 4.07:1, under AA's 4.5:1. White is 5.0:1 here and 6.5:1 on the red. */
    .ul-toast.success { background:#15803d; color:#fff; }
    .ul-toast.error   { background:#b91c1c; color:#fff; }
    @keyframes toastIn  { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
    @keyframes toastOut { to   { opacity:0; transform:translateY(6px); } }
    /* Save button in template preview */
    .tmpl-btn-save {
      display:inline-flex; align-items:center; gap:.4rem;
      font-family:var(--font-sans); font-size:.82rem; font-weight:700;
      border-radius:6px; padding:.45rem .9rem; cursor:pointer;
      background:var(--amber-500); color:var(--slate-900);
      border:none; transition:background .18s;
    }
    .tmpl-btn-save:hover { background:var(--amber-400); }
    .tmpl-btn-save.saved { background:var(--green-600) !important; color:#fff; }

    /* ── TEMPLATE LANGUAGE SELECTOR ── */
    .tmpl-lang-bar {
      display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
      padding: .6rem 1.25rem; background: var(--bg-card-alt);
      border-bottom: 1px solid var(--border);
    }
    .tmpl-lang-label {
      font-size: .75rem; font-weight: 700; color: var(--text-muted);
      font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .06em;
      margin-right: .2rem; white-space: nowrap;
    }
    .tmpl-lang-btn {
      font-size: .78rem; font-weight: 700; font-family: var(--font-sans);
      background: var(--bg-card); border: 1.5px solid var(--border); border-radius: 20px;
      padding: .22rem .72rem; color: var(--text-secondary); cursor: pointer;
      transition: border-color .15s, color .15s, background .15s; line-height: 1.5;
    }
    .tmpl-lang-btn:hover { border-color: var(--amber-400); color: var(--text-primary); }
    .tmpl-lang-btn.active {
      border-color: var(--amber-500); background: var(--amber-50); color: #78350f;
    }
    [data-theme="dark"] .tmpl-lang-btn.active { background: rgba(245,158,11,.18); color: var(--amber-400); }
    .tmpl-lang-note {
      font-size: .75rem; color: var(--text-muted); font-style: italic;
      padding: .45rem 1.25rem; border-bottom: 1px solid var(--border);
      background: var(--bg-card-alt);
    }
    .tmpl-lang-note i { color: var(--amber-500); margin-right: .3rem; }

    /* ── OPEN PERIOD WIDGET ── */
    .op-widget {
      background: var(--bg-card);
      border: 1.5px solid var(--border);
      border-radius: 14px;
      padding: 1.6rem 1.5rem 1.4rem;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .op-widget-eyebrow {
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: .72rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--amber-500); margin-bottom: .55rem;
    }
    .op-widget-heading {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      color: var(--text-primary);
      margin-bottom: .35rem;
    }
    .op-widget-sub {
      font-size: .85rem;
      color: var(--text-secondary);
      margin-bottom: 1.25rem;
      line-height: 1.5;
    }
    .op-widget-label {
      font-size: .76rem; font-weight: 700; font-family: var(--font-sans);
      color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em;
      display: block; margin-bottom: .35rem;
    }
    .op-widget-input {
      width: 100%;
      background: var(--bg-card-alt);
      border: 1.5px solid var(--border);
      border-radius: 8px;
      padding: .6rem .85rem;
      font-family: var(--font-sans);
      font-size: .92rem;
      color: var(--text-primary);
      transition: border-color .18s;
      margin-bottom: 1rem;
    }
    .op-widget-input:focus { outline: none; border-color: var(--amber-500); }
    /* ── Open Period Timeline ─────────────────────────────────────────
       Replaces the old four-row .op-result readout. The agreement's term is
       a track; each open period is a band positioned along it by percentage,
       so the whole thing is responsive without any layout maths in JS.
       The bar is aria-hidden — the <ol> beneath carries the same facts as
       text, which is what screen readers and print get. */
    .op-fields {
      display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
      margin-bottom: .9rem;
    }
    @media (max-width: 420px) { .op-fields { grid-template-columns: 1fr; } }
    .op-field { display: flex; flex-direction: column; min-width: 0; }
    .op-field-opt {
      font-weight: 400; text-transform: none; letter-spacing: 0;
      color: var(--text-muted); font-size: .84em;
    }

    .opt { display: none; margin-bottom: 1rem; }
    .opt.show { display: block; }

    .opt-status {
      font-family: var(--font-sans);
      font-size: .82rem; font-weight: 700; line-height: 1.4;
      padding: .5rem .7rem; margin-bottom: .8rem;
      border-radius: 8px;
      border-left: 3px solid var(--border);
      background: var(--bg-card-alt);
      color: var(--text-secondary);
    }
    .opt-status.is-open {
      border-left-color: var(--green-600);
      background: var(--green-100); color: #15803d;
    }
    .opt-status.is-soon {
      border-left-color: var(--amber-500);
      background: var(--amber-50, rgba(245,158,11,.08)); color: #92400e;
    }
    .opt-status.is-past {
      border-left-color: var(--slate-300);
    }
    [data-theme="dark"] .opt-status.is-open { color: #86efac; }
    [data-theme="dark"] .opt-status.is-soon { color: #fcd34d; }

    .opt-chart { margin-bottom: .55rem; }
    .opt-track {
      position: relative;
      height: 34px;
      border-radius: 6px;
      background: repeating-linear-gradient(
        90deg, var(--bg-card-alt) 0 6px, transparent 6px 12px);
      border: 1px solid var(--border);
      overflow: hidden;
    }

    .opt-band {
      position: absolute; top: 0; bottom: 0;
      background: var(--amber-500);
      opacity: .85;
      /* Bands wipe out from their left edge. transform beats animating width:
         it stays on the compositor and never reflows the track. */
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform .5s cubic-bezier(.22,.7,.3,1);
      transition-delay: calc(var(--i, 0) * 90ms);
    }
    .opt.show .opt-band { transform: scaleX(1); }
    .opt-band.is-past    { background: var(--slate-300); opacity: .55; }
    .opt-band.is-active  { background: var(--green-600); opacity: 1; }
    .opt-band-min { min-width: 3px; }

    /* Today marker */
    .opt-today {
      position: absolute; top: -3px; bottom: -3px;
      width: 2px; background: var(--text-primary);
      opacity: 0; transition: opacity .3s ease .45s;
    }
    .opt.show .opt-today { opacity: .85; }
    .opt-today::before {
      content: ''; position: absolute; top: 0; left: 50%;
      width: 7px; height: 7px; margin-left: -3.5px; margin-top: -3px;
      border-radius: 50%; background: var(--text-primary);
    }

    .opt-axis {
      display: flex; justify-content: space-between; gap: .5rem;
      margin-top: .35rem;
      font-family: var(--font-sans); font-size: .7rem; font-weight: 600;
      color: var(--text-muted);
    }

    .opt-list {
      list-style: none; margin: .5rem 0 0; padding: 0;
      display: flex; flex-direction: column; gap: .3rem;
    }
    .opt-list li {
      display: flex; align-items: baseline; gap: .5rem;
      font-family: var(--font-sans); font-size: .78rem;
      color: var(--text-secondary);
      padding: .3rem .5rem; border-radius: 6px;
    }
    .opt-list li.is-active { background: var(--green-100); color: #15803d; font-weight: 700; }
    .opt-list li.is-past   { opacity: .6; }
    [data-theme="dark"] .opt-list li.is-active { color: #86efac; }
    .opt-li-dates { margin-left: auto; white-space: nowrap; font-weight: 700; }
    .opt-li-tag {
      font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
      font-weight: 800; color: var(--text-muted);
    }

    .opt-note {
      margin: .55rem 0 0; font-size: .73rem; line-height: 1.5;
      color: var(--text-muted);
    }
    .opt-note a { color: var(--amber-500); font-weight: 700; }

    @media (prefers-reduced-motion: reduce) {
      .opt-band, .opt-today { transition: none; }
      .opt-band { transform: scaleX(1); }
      .opt.show .opt-today { opacity: .85; }
    }
    .op-actions {
      display: flex; flex-direction: column; gap: .55rem; margin-top: auto;
    }
    .op-btn {
      display: flex; align-items: center; justify-content: center; gap: .45rem;
      font-family: var(--font-sans); font-size: .84rem; font-weight: 700;
      border-radius: 8px; padding: .58rem 1rem; cursor: pointer;
      border: none; transition: background .18s, opacity .18s;
      width: 100%;
    }
    .op-btn:disabled { opacity: .45; cursor: default; }
    .op-btn-cal  { background: var(--slate-900); color: #fff; }
    .op-btn-cal:not(:disabled):hover  { background: var(--slate-700); }
    [data-theme="dark"] .op-btn-cal  { background: var(--amber-500); color: var(--slate-900); }
    [data-theme="dark"] .op-btn-cal:not(:disabled):hover { background: var(--amber-400); }
    .op-btn-save { background: var(--bg-card-alt); color: var(--text-secondary); border: 1.5px solid var(--border); }
    .op-btn-save:not(:disabled):hover { border-color: var(--amber-400); color: var(--text-primary); }
    .op-btn-save.saved { background: var(--green-600); color: #fff; border-color: var(--green-600); }
    .op-coming-soon {
      font-size: .74rem; color: var(--text-muted); font-family: var(--font-sans);
      text-align: center; margin-top: .65rem;
      font-style: italic;
    }
    /* On small screens ensure widget doesn't feel cramped */
    @media (max-width: 991px) {
      .op-widget { margin-top: 2rem; }
    }

    /* ── SCENARIO CARDS ── */
    .scenario-section {
      padding: 2rem 0 0;
      background: var(--bg-primary);
      border-bottom: 1px solid var(--border);
    }
    .scenario-eyebrow {
      display: inline-flex; align-items: center; gap: .45rem;
      font-size: .72rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--amber-500); margin-bottom: .5rem;
      font-family: var(--font-sans);
    }
    .scenario-heading {
      font-family: var(--font-serif);
      font-size: clamp(1.1rem, 2.5vw, 1.35rem);
      color: var(--text-primary);
      margin-bottom: .3rem;
    }
    .scenario-sub {
      font-size: .87rem; color: var(--text-secondary);
      margin-bottom: 1.25rem; font-family: var(--font-sans);
    }
    .scenario-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: .75rem;
      padding-bottom: 1.75rem;
    }
    @media (max-width: 575px) {
      .scenario-grid { grid-template-columns: 1fr; }
    }
    .scenario-card {
      display: flex; align-items: center; gap: .9rem;
      background: var(--bg-card);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      padding: .9rem 1.1rem;
      cursor: pointer; text-decoration: none;
      transition: border-color .18s, background .18s, transform .15s, box-shadow .18s;
      font-family: var(--font-sans);
    }
    .scenario-card:hover {
      border-color: var(--amber-500);
      background: var(--bg-card-alt);
      transform: translateY(-2px);
      box-shadow: 0 4px 16px rgba(0,0,0,.12);
      text-decoration: none;
    }
    [data-theme="dark"] .scenario-card:hover {
      box-shadow: 0 4px 20px rgba(0,0,0,.35);
    }
    .scenario-icon {
      width: 2.4rem; height: 2.4rem; border-radius: 50%;
      background: rgba(245,158,11,.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.05rem; color: var(--amber-500); flex-shrink: 0;
      transition: background .18s;
    }
    .scenario-card:hover .scenario-icon {
      background: rgba(245,158,11,.22);
    }
    .scenario-text { flex: 1; min-width: 0; }
    .scenario-label {
      font-size: .88rem; font-weight: 700;
      color: var(--text-primary); line-height: 1.35;
      display: block; margin-bottom: .15rem;
    }
    .scenario-dest {
      font-size: .74rem; font-weight: 600;
      color: var(--text-muted); display: flex; align-items: center; gap: .25rem;
    }
    .scenario-arrow {
      font-size: .75rem; color: var(--amber-500); flex-shrink: 0;
      transition: transform .18s;
    }
    .scenario-card:hover .scenario-arrow { transform: translateX(3px); }
    .scenario-divider {
      display: flex; align-items: center; gap: .75rem;
      padding: .5rem 0 1.25rem;
      font-size: .78rem; color: var(--text-muted);
      font-family: var(--font-sans); font-style: italic;
    }
    .scenario-divider::before, .scenario-divider::after {
      content: ''; flex: 1; height: 1px; background: var(--border);
    }

    /* ── KEY NUMBERS BAR ── */
    .key-numbers {
      background: var(--bg-card-alt);
      border-bottom: 1px solid var(--border);
      padding: 0;
    }
    .key-numbers-inner {
      display: flex;
      align-items: stretch;
    }
    .key-number {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.35rem 1rem;
      text-align: center;
      position: relative;
      text-decoration: none;
      transition: background .18s;
      cursor: pointer;
      border: none;
      background: none;
      width: 100%;
    }
    .key-number:not(:last-child)::after {
      content: '';
      position: absolute;
      right: 0; top: 20%; bottom: 20%;
      width: 1px;
      background: var(--border);
    }
    .key-number:hover { background: rgba(245,158,11,.06); }
    .key-number:focus-visible {
      outline: 2px solid var(--amber-500);
      outline-offset: -3px;
      background: rgba(245,158,11,.06);
    }

    /* The statutory source for each number.
       Deliberately always rendered, just dimmed — NOT hover-only. A tile that
       only reveals its citation on hover is invisible on every touch device,
       and "where does this number come from" is the whole point. Hover and
       keyboard focus brighten it; they don't create it. */
    .key-number-src {
      display: inline-flex; align-items: center; gap: .3rem;
      margin-top: .5rem;
      font-family: var(--font-sans);
      font-size: .68rem; font-weight: 700;
      letter-spacing: .04em;
      color: var(--text-muted);
      opacity: .65;
      transform: translateY(2px);
      transition: opacity .22s ease, color .22s ease, transform .22s ease;
    }
    .key-number-src i { font-size: .74em; }
    .key-number:hover .key-number-src,
    .key-number:focus-visible .key-number-src {
      opacity: 1;
      color: var(--amber-600, #b45309);
      transform: translateY(0);
    }
    [data-theme="dark"] .key-number:hover .key-number-src,
    [data-theme="dark"] .key-number:focus-visible .key-number-src { color: var(--amber-400, #fbbf24); }

    /* Screen-reader-only text. Used where a glyph carries meaning that does
       not read aloud sensibly (e.g. ">50%"). */
    .visually-hidden {
      position: absolute !important;
      width: 1px; height: 1px;
      padding: 0; margin: -1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      white-space: nowrap;
      border: 0;
    }
    .key-number-value {
      font-family: var(--font-sans);
      font-size: clamp(1.6rem, 3.5vw, 2.2rem);
      font-weight: 700;
      color: var(--amber-500);
      line-height: 1;
      margin-bottom: .3rem;
    }
    .key-number-label {
      font-size: .72rem;
      font-weight: 700;
      color: var(--text-secondary);
      text-transform: uppercase;
      letter-spacing: .07em;
      font-family: var(--font-sans);
      line-height: 1.3;
      margin-bottom: .2rem;
    }
    .key-number-sub {
      font-size: .7rem;
      color: var(--text-muted);
      font-family: var(--font-sans);
      line-height: 1.3;
    }
    @media (max-width: 575px) {
      .key-numbers-inner { flex-wrap: wrap; }
      .key-number { flex: 0 0 50%; border-top: 1px solid var(--border); }
      .key-number:nth-child(odd)::after { display: block; }
      .key-number:nth-child(even)::after { display: none; }
    }

    /* ── Skip-to-content link (a11y) ──
       Truly hidden (1×1 px, clipped) until focused — robust against mobile
       browsers that auto-focus the first focusable element on page load.
       Keyboard users hit Tab once on page load and see the amber pill;
       pressing Enter jumps focus to <main>, bypassing the navbar. */
    .skip-link {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
    .skip-link:focus,
    .skip-link:focus-visible {
      position: fixed;
      top: 0;
      left: 0.75rem;
      width: auto;
      height: auto;
      padding: 0.55rem 1.1rem;
      margin: 0;
      overflow: visible;
      clip: auto;
      z-index: 9999;
      background: var(--amber-500);
      color: var(--slate-900);
      border-radius: 0 0 8px 8px;
      font-family: var(--font-sans);
      font-weight: 700;
      font-size: 0.92rem;
      text-decoration: none;
      box-shadow: 0 6px 18px rgba(0,0,0,.25);
      outline: 2px solid var(--slate-900);
      outline-offset: 2px;
    }
    /* Don't show focus outline on <main> when reached via the skip link */
    main:focus { outline: none; }

    /* ── In-page search (Cmd-K / Ctrl-K / "/") ── */
    .nav-search-btn {
      display:flex; align-items:center; gap:.45rem;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
      color:#94a3b8; font-family:var(--font-sans); font-size:.84rem; font-weight:600;
      padding:.38rem .72rem; border-radius:2rem; cursor:pointer;
      transition:background .2s, border-color .2s, color .2s; white-space:nowrap;
    }
    .nav-search-btn:hover { background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.4); color:var(--amber-400); }
    .nav-search-btn .nav-search-kbd {
      background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
      border-radius:4px; padding:.05rem .35rem; font-size:.72rem; color:#cbd5e1;
      font-family:var(--font-sans); font-weight:600; margin-left:.25rem;
    }
    /* Compact icon button — companion to .nav-search-btn for navbar shortcuts (e.g., Saved Work) */
    .nav-icon-btn {
      display:flex; align-items:center; justify-content:center;
      width:2.1rem; height:2.1rem;
      background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
      color:#94a3b8; cursor:pointer;
      border-radius:50%;
      transition:background .2s, border-color .2s, color .2s;
    }
    .nav-icon-btn:hover { background:rgba(245,158,11,.15); border-color:rgba(245,158,11,.4); color:var(--amber-400); }
    .nav-icon-btn i { font-size:.92rem; line-height:1; }

    .search-overlay {
      position:fixed; inset:0; z-index:9200;
      background:rgba(10,15,26,.78); backdrop-filter:blur(4px);
      display:flex; align-items:flex-start; justify-content:center;
      padding:6rem 1rem 1rem;
      opacity:0; visibility:hidden; transition:opacity .18s, visibility .18s;
    }
    .search-overlay.open { opacity:1; visibility:visible; }
    .search-card {
      background:var(--bg-card); border:1px solid var(--border);
      border-radius:14px; width:100%; max-width:640px;
      box-shadow:0 24px 64px rgba(0,0,0,.4);
      animation:searchIn .18s ease;
      overflow:hidden;
      display:flex; flex-direction:column;
      max-height:calc(100vh - 8rem);
    }
    @keyframes searchIn { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

    .search-input-row {
      display:flex; align-items:center; gap:.7rem;
      padding:.95rem 1.1rem;
      border-bottom:1px solid var(--border);
    }
    .search-input-icon { color:var(--text-muted); font-size:1.05rem; flex-shrink:0; }
    #search-input {
      flex:1; background:transparent; border:none; outline:none;
      color:var(--text-primary); font-family:var(--font-sans);
      font-size:1.02rem; padding:.15rem 0;
    }
    #search-input::placeholder { color:var(--text-muted); }
    .search-close {
      background:none; border:none; cursor:pointer; padding:.15rem;
      color:var(--text-muted); display:flex; align-items:center;
    }
    .search-close kbd, .search-footer kbd {
      background:rgba(255,255,255,.06); border:1px solid var(--border);
      border-radius:4px; padding:.08rem .42rem; font-size:.72rem;
      font-family:var(--font-sans); color:var(--text-secondary); font-weight:600;
    }

    .search-results {
      overflow-y:auto; flex:1; min-height:0;
      padding:.4rem;
    }
    .search-empty {
      padding:1.6rem 1rem; text-align:center;
      color:var(--text-muted); font-size:.9rem;
    }
    .search-hit {
      width:100%; text-align:left; display:block;
      background:transparent; border:none; cursor:pointer;
      padding:.7rem .85rem; border-radius:8px;
      color:var(--text-primary); transition:background .12s;
      border-left:2px solid transparent;
    }
    .search-hit:hover, .search-hit.selected {
      background:rgba(245,158,11,.10);
      border-left-color:var(--amber-500);
    }
    .search-hit-page {
      font-size:.72rem; font-weight:700; text-transform:uppercase;
      letter-spacing:.04em; color:var(--amber-500); margin-bottom:.15rem;
    }
    .search-hit-heading {
      font-family:var(--font-serif); font-size:.98rem; font-weight:700;
      color:var(--text-primary); margin-bottom:.2rem; line-height:1.3;
    }
    .search-hit-snippet {
      font-size:.84rem; color:var(--text-secondary); line-height:1.45;
      display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .search-hit-snippet mark {
      background:rgba(245,158,11,.28); color:var(--text-primary);
      padding:0 .1rem; border-radius:2px;
    }

    .search-footer {
      display:flex; gap:1rem; padding:.55rem 1.1rem;
      border-top:1px solid var(--border);
      font-size:.74rem; color:var(--text-muted);
      font-family:var(--font-sans);
    }
    .search-footer span { display:flex; align-items:center; gap:.3rem; }

    @media (max-width: 640px) {
      .search-overlay { padding:1rem; align-items:flex-start; }
      .search-card { max-height:calc(100vh - 2rem); }
      .search-footer { display:none; }
    }

    /* ──────────────────────────────────────────────────────────
       REDUCED-MOTION
       Honor the OS-level "Reduce motion" setting (vestibular-disorder
       accessibility). All entrance/exit animations on overlays, toasts,
       and the diagnostic card become near-instant; hover transitions
       become instant. The companion JS helper _scrollBehavior() handles
       smooth-scroll calls; this block handles every CSS-driven animation
       and transition site-wide.

       0.01ms (rather than 0) ensures any JavaScript that listens for
       'animationend' / 'transitionend' still fires those events.
       ────────────────────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* ──────────────────────────────────────────────────────────
       PRINT STYLESHEET
       Goals:
        - Pages and templates print as a clean, paper-friendly reference
          (e.g., to bring to an OLRB hearing or a labour lawyer meeting).
        - No site chrome (navbar, footer, search, overlays, back buttons).
        - No interactive widgets (calc form, OP widget, diag quiz, CLC checker,
          step tracker visualizers, language selectors, copy/download buttons).
        - All step panels expand so the printout is a full reference, not just
          whatever step happened to be active on screen.
        - White background, black ink, single column.
        - External links print with their URL revealed in parentheses.
       ────────────────────────────────────────────────────────── */
    @media print {
      /* Force light theme regardless of the [data-theme="dark"] toggle. */
      :root, [data-theme="dark"] {
        --bg-page:       #fff;
        --bg-card:       #fff;
        --bg-card-alt:   #fff;
        --bg-sector-tab: #fff;
        --bg-faq-answer: #fff;
        --text-primary:  #000;
        --text-secondary:#222;
        --text-muted:    #555;
        --border:        #999;
      }
      html, body {
        background: #fff !important;
        color: #000 !important;
        font-size: 11pt;
        line-height: 1.45;
      }

      /* ── Hide site chrome ── */
      .site-nav,
      .site-footer,
      .nav-search-btn,
      .search-overlay,
      #toast-wrap,
      .back-btn,
      .nav-cta,
      .disclaimer-bar { display: none !important; }

      /* ── Hide interactive widgets / controls ── */
      .step-tracker,
      .diag-widget,
      .diag-card,
      .diag-result-card,
      .uc-section,
      .calc-form,
      .calc-card,
      .op-widget,
      .op-actions,
      .op-coming-soon,
      .tmpl-selector,
      .tmpl-fields-panel,
      .tmpl-lang-bar,
      .tmpl-lang-note,
      .tmpl-preview-header,
      .tmpl-preview-actions,
      .tmpl-preview-label,
      .saved-item-actions,
      input[type="file"],
      .js-load-saved,
      .js-delete-saved { display: none !important; }

      /* ── Reveal hidden step panels so the printout is a full reference ── */
      .step-panel { display: block !important; }
      .step-panel + .step-panel {
        margin-top: 1.5em;
        padding-top: 1em;
        border-top: 1px solid #ccc;
      }

      /* ── Hide glossary tooltips, soften underlines to reduce visual noise ── */
      .gloss-tip { display: none !important; }
      .gt-word {
        border-bottom: 1px dotted #999 !important;
      }

      /* ── Card / callout paper-friendly look: borders instead of fills ── */
      .content-card,
      .callout {
        background: #fff !important;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        page-break-inside: avoid;
        break-inside: avoid;
      }

      /* ── Page-break behaviour ── */
      h1, h2, h3, h4 {
        page-break-after: avoid;
        break-after: avoid;
      }
      .section-hero {
        padding: 0 0 0.8cm 0 !important;
        margin-bottom: 0.5cm;
        border-bottom: 1px solid #999;
        background: none !important;
      }
      .section-hero h1 { color: #000 !important; }

      /* ── Reveal external link URLs after the link text ── */
      a[href^="http"]::after,
      a[href^="https"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #555;
        word-break: break-all;
      }
      /* ...but not on internal anchors, JS handlers, or icon-only links ── */
      a[href^="#"]::after,
      a[onclick]::after { content: ""; }

      /* ── Templates page: maximize the printed letter ── */
      .tmpl-preview-panel {
        background: #fff !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
      }
      .tmpl-letter {
        font-size: 12pt;
        line-height: 1.55;
        max-width: none !important;
        color: #000 !important;
        background: #fff !important;
      }

      /* ── @page margins (defaults are usually fine; this just normalizes) ── */
      @page { margin: 1.5cm 1.8cm; }
    }