/* ==========================================================================
   Guide page — production styles (2025 update, cleaned & optimized)
   - Preserves original class names and visual design
   - Deduped, organized, and token-driven
   - Light/Dark support via tokens and [data-theme]
   - Search button in light theme has clear, visible text contrast
   ========================================================================== */

/* --------------------------------------------------------------------------
   TOKENS
   -------------------------------------------------------------------------- */
   :root {
    /* Base Colors */
    --g-bg: var(--clr-bg, #ffffff);
    --g-surface: var(--clr-surface, #ffffff);
    --g-surface-2: var(--clr-surface-2, #f9fafb);
    --g-text: var(--clr-text, #0f172a);
    --g-muted: var(--clr-muted, #64748b);
    --g-border: var(--clr-border, #e5e7eb);
    --g-primary: var(--clr-primary, #1d4ed8);
    --g-primary-contrast: #ffffff;
  
    /* Semantic tints */
    --g-soft: #f3f4f6;
    --g-soft-strong: #eef2ff;
    --g-subtle: rgba(148,163,184,.08);
    --g-primary-ghost: rgba(29,78,216,.08);
    --g-primary-outline: rgba(29,78,216,.14);
  
    /* Radii & Shadows */
    --g-radius: var(--radius-lg, 16px);
    --g-rad-md: var(--radius-md, 12px);
    --g-rad-sm: 10px;
    --g-shadow: var(--shadow-lg, 0 10px 25px rgba(2,6,23,.08));
    --g-focus: 0 0 0 3px rgba(29,78,216,.35);
  
    /* Spacing (8px base) */
    --sp-0: 0;
    --sp-1: .25rem; /* 4px  */
    --sp-2: .5rem;  /* 8px  */
    --sp-3: .75rem; /* 12px */
    --sp-4: 1rem;   /* 16px */
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 2rem;
    --sp-8: 2.5rem;
    --sp-9: 3rem;
  
    /* Layout */
    --container-w: 1100px;
    --container-pad: clamp(16px, 3vw, 28px);
  
    /* Typography */
    --font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
    --lh: 1.55;
  
    /* Status colors */
    --g-success:    var(--clr-success, #16a34a);
    --g-warning:    var(--clr-warning, #d97706);
    --g-danger:     var(--clr-danger,  #dc2626);
    --g-info:       var(--clr-info,    #0ea5e9);
  
    --g-success-ghost: color-mix(in srgb, var(--g-success) 12%, transparent);
    --g-warning-ghost: color-mix(in srgb, var(--g-warning) 12%, transparent);
    --g-danger-ghost:  color-mix(in srgb, var(--g-danger)  12%, transparent);
    --g-info-ghost:    color-mix(in srgb, var(--g-info)    12%, transparent);
  
    --g-success-border: color-mix(in srgb, var(--g-success) 28%, var(--g-border));
    --g-warning-border: color-mix(in srgb, var(--g-warning) 28%, var(--g-border));
    --g-danger-border:  color-mix(in srgb, var(--g-danger)  28%, var(--g-border));
    --g-info-border:    color-mix(in srgb, var(--g-info)    28%, var(--g-border));
  }
  
  /* Explicit theme overrides */
  :root[data-theme="dark"], [data-theme="dark"], .theme-dark {
    --g-bg: #0b1020;
    --g-surface: #121833;
    --g-surface-2: #0e1530;
    --g-text: #e5e7eb;
    --g-muted: #a5b4fc;
    --g-border: #263055;
    --g-primary: #60a5fa;
    --g-primary-contrast: #0b1020;
  
    --g-soft: #1b254a;
    --g-soft-strong: #223062;
    --g-subtle: rgba(96,165,250,.08);
    --g-primary-ghost: rgba(96,165,250,.12);
    --g-primary-outline: rgba(96,165,250,.18);
  
    --g-shadow: 0 10px 25px rgba(0,0,0,.35);
    --g-focus: 0 0 0 3px rgba(96,165,250,.40);
  
    --g-success-ghost: color-mix(in srgb, var(--g-success) 16%, transparent);
    --g-warning-ghost: color-mix(in srgb, var(--g-warning) 16%, transparent);
    --g-danger-ghost:  color-mix(in srgb, var(--g-danger)  16%, transparent);
    --g-info-ghost:    color-mix(in srgb, var(--g-info)    16%, transparent);
  
    --g-success-border: color-mix(in srgb, var(--g-success) 38%, var(--g-border));
    --g-warning-border: color-mix(in srgb, var(--g-warning) 38%, var(--g-border));
    --g-danger-border:  color-mix(in srgb, var(--g-danger)  38%, var(--g-border));
    --g-info-border:    color-mix(in srgb, var(--g-info)    38%, var(--g-border));
  }
  
  /* Fallback to system dark when no explicit light override is present */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --g-bg: #0b1020;
      --g-surface: #121833;
      --g-surface-2: #0e1530;
      --g-text: #e5e7eb;
      --g-muted: #a5b4fc;
      --g-border: #263055;
      --g-primary: #60a5fa;
      --g-primary-contrast: #0b1020;
  
      --g-soft: #1b254a;
      --g-soft-strong: #223062;
      --g-subtle: rgba(96,165,250,.08);
      --g-primary-ghost: rgba(96,165,250,.12);
      --g-primary-outline: rgba(96,165,250,.18);
  
      --g-shadow: 0 10px 25px rgba(0,0,0,.35);
      --g-focus: 0 0 0 3px rgba(96,165,250,.40);
    }
  }
  
  /* --------------------------------------------------------------------------
     BASE / RESET / ACCESSIBILITY
     -------------------------------------------------------------------------- */
  *, *::before, *::after { box-sizing: border-box; }
  html { height: 100%; color-scheme: light dark; }
  body {
    min-height: 100%; margin: 0; font-family: var(--font-family);
    line-height: var(--lh); color: var(--g-text); background: var(--g-bg);
    text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  }
  
  img, svg { max-width: 100%; height: auto; vertical-align: middle; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .15em; }
  
  :where(input, textarea) { caret-color: var(--g-primary); }
  ::selection { background: var(--g-primary-ghost); }
  
  .hidden { display: none !important; }
  .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .sr-only-focusable:focus, .sr-only-focusable:active { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; white-space: normal; }
  
  /* Focus ring */
  a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
    outline: none; box-shadow: var(--g-focus); border-radius: 8px;
  }
  
  /* Scrollbar */
  * { scrollbar-color: var(--g-border) transparent; }
  *::-webkit-scrollbar { width: 12px; height: 12px; }
  *::-webkit-scrollbar-thumb { background: var(--g-border); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
  *::-webkit-scrollbar-track { background: transparent; }
  *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--g-border) 70%, var(--g-text) 10%); }
  
  /* UA form normalization */
  :where(input, textarea, select, button) {
    background: var(--g-surface); color: var(--g-text);
    border: 1px solid var(--g-border); border-radius: var(--g-rad-md);
  }
  :where(input, textarea, select)::placeholder { color: var(--g-muted); }
  :where(input, textarea, select):focus-visible { border-color: var(--g-primary); box-shadow: var(--g-focus); outline: none; }
  :where(fieldset) { border: 1px solid var(--g-border); }
  :where(input, textarea, select, button)[disabled], :where(input, textarea)[readonly] { opacity: .7; cursor: not-allowed; }
  
  @supports (-webkit-appearance: none) {
    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
      -webkit-text-fill-color: var(--g-text);
      transition: background-color 9999s ease-in-out 0s;
      box-shadow: 0 0 0 1000px var(--g-surface) inset; border-color: var(--g-border);
    }
  }
  
  /* Tables */
  :where(table) { width: 100%; border-collapse: collapse; background: var(--g-surface); }
  :where(th, td) { border: 1px solid var(--g-border); padding: .65rem .75rem; }
  :where(thead th) { background: color-mix(in srgb, var(--g-text) 6%, var(--g-surface)); color: var(--g-text); }
  :where(tbody tr:nth-child(odd)) { background: color-mix(in srgb, var(--g-surface) 92%, var(--g-soft)); }
  
  /* Code */
  pre, code, kbd, samp { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
  pre, code { background: color-mix(in srgb, var(--g-text) 6%, var(--g-surface)); color: var(--g-text); border: 1px solid var(--g-border); }
  pre { padding: .9rem 1rem; border-radius: 12px; overflow: auto; }
  code { padding: .15rem .35rem; border-radius: 8px; }
  
  /* Links (non-buttons) */
  a:not(.btn):not(.chip):not(.tag-chip) { color: color-mix(in srgb, var(--g-primary) 85%, var(--g-text)); }
  a:hover { text-decoration-thickness: 2px; }
  
  /* --------------------------------------------------------------------------
     LAYOUT HELPERS & TYPOGRAPHY
     -------------------------------------------------------------------------- */
  .container, .guide-container { width: min(var(--container-w), 100%); margin-inline: auto; padding-inline: var(--container-pad); position: relative; }
  .stack > * + * { margin-top: var(--sp-4); }
  .cluster { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); }
  .grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--min, 240px), 1fr)); gap: var(--sp-4); }
  
  h1, h2, h3, h4, h5, h6 { margin: 0 0 .4em; letter-spacing: -0.01em; text-wrap: balance; }
  h1 { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
  h2 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
  h3 { font-size: clamp(1.15rem, 1.5vw, 1.25rem); }
  p { margin: 0 0 1em; text-wrap: pretty; }
  .muted { color: var(--g-muted); }
  
  /* --------------------------------------------------------------------------
     HERO
     -------------------------------------------------------------------------- */
  .guide-hero { background: linear-gradient(180deg, var(--g-primary-ghost), transparent 55%); padding-block: var(--sp-8) var(--sp-5); }
  .guide-hero__title { font-size: clamp(1.7rem, 2.5vw, 2.4rem); margin: 0 0 .25rem; }
  .guide-hero__subtitle { color: var(--g-muted); margin: 0; }
  .guide-hero__actions { display:flex; gap:var(--sp-2); margin-top: var(--sp-3); flex-wrap:wrap; }
  
  /* --------------------------------------------------------------------------
     SEARCH (Fixed contrast in light theme)
     -------------------------------------------------------------------------- */
  .guide-search { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center; margin-block: var(--sp-4) var(--sp-4); }
  .guide-search input {
    padding: .9rem 1rem; border: 1px solid var(--g-border); border-radius: var(--g-rad-md);
    background: var(--g-surface); color: var(--g-text); width: 100%;
  }
  .guide-search__buttons { display:flex; gap:var(--sp-2); align-items:center; }
  .guide-search .btn[disabled] { opacity: .6; cursor: not-allowed; }
  
  /* Primary search action: always high-contrast */
  .guide-search .btn--primary,
  .guide-search button[type="submit"],
  .guide-search .btn[aria-label="Search"],
  .guide-search .btn[role="search"] {
    background: var(--g-primary); border-color: var(--g-primary);
    color: var(--g-primary-contrast); /* ensures visible text in light theme */
  }
  .guide-search .btn--primary:hover,
  .guide-search button[type="submit"]:hover,
  .guide-search .btn[aria-label="Search"]:hover { filter: brightness(1.03); }
  .guide-search .btn--primary:focus-visible,
  .guide-search button[type="submit"]:focus-visible,
  .guide-search .btn[aria-label="Search"]:focus-visible { box-shadow: var(--g-focus); outline: none; }
  
  /* Matched heights */
  .guide-search input, .guide-search .btn { min-height: 44px; }
  
  @media (max-width: 640px) {
    .guide-search { grid-template-columns: 1fr; }
    .guide-search__buttons { justify-content: flex-start; }
    .guide-search .btn, .guide-search button[type="submit"] { width: 100%; }
  }
  
  /* --------------------------------------------------------------------------
     TOOLBAR
     -------------------------------------------------------------------------- */
  .guide-toolbar { display: grid; gap: var(--sp-2); margin: .25rem 0 var(--sp-4); }
  .toolbar-row {
    display: grid; grid-template-columns: 1fr auto; gap: var(--sp-2); align-items: center;
    background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-rad-md);
    padding: var(--sp-2) var(--sp-3); box-shadow: var(--g-shadow);
  }
  .toolbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
  .toolbar-right { display: inline-flex; align-items: center; gap: var(--sp-2); justify-self: end; min-width: 0; }
  .toolbar__select, .toolbar-row select {
    padding: .6rem .9rem; border: 1px solid var(--g-border); border-radius: var(--g-rad-sm);
    background: var(--g-surface); color: var(--g-text); min-width: 9rem; max-width: 100%;
  }
  .toolbar__check { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
  .toolbar__kbd-hint { font-size: .9rem; color: var(--g-muted); white-space: nowrap; }
  #resetFilters { flex: 0 0 auto; position: relative; z-index: 1; }
  #resetFilters:hover { transform: translateY(-1px); transition: transform .08s ease; }
  .toolbar-tags { display:flex; flex-wrap:wrap; gap:.4rem; }
  .tag-chip {
    border:1px solid var(--g-border); background: var(--g-soft); padding:.4rem .7rem; border-radius: 999px; cursor: pointer;
    user-select: none; font-size:.92rem; transition: transform .08s ease, background .15s ease, border-color .15s ease, outline-color .15s ease; text-transform: capitalize; color: var(--g-text);
  }
  .tag-chip:hover { transform: translateY(-1px); }
  .tag-chip.is-active { background: var(--g-soft-strong); border-color:var(--g-primary); outline: 2px solid var(--g-primary-outline); }
  .tag-chip.is-hidden { display:none; }
  .tag-chip--ghost { background: transparent; }
  .tag-more { display: inline-flex; gap: .4rem; align-items: center; }
  .toolbar-alpha { display:flex; flex-wrap:wrap; gap:.35rem; }
  .alpha-btn { border:1px dashed var(--g-border); background: transparent; padding:.3rem .6rem; border-radius: 8px; cursor:pointer; transition: background .15s ease, border-color .15s ease; }
  .alpha-btn.is-active { background: var(--g-soft-strong); border-style: solid; border-color: var(--g-primary); }
  
  @media (max-width: 800px) {
    .toolbar-row { grid-template-columns: 1fr; }
    .toolbar-right { justify-self: start; }
    .toolbar__kbd-hint { display: none; }
    .toolbar__select { min-width: 8.25rem; }
  }
  
  /* --------------------------------------------------------------------------
     CHIPS ROW (content filters)
     -------------------------------------------------------------------------- */
  .chip-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); }
  .chip { display:inline-flex; align-items:center; gap:.45rem; border:1px solid var(--g-border); background: var(--g-soft); padding: .5rem .8rem; border-radius: 999px; cursor: pointer; user-select: none; transition: transform .08s ease, background .15s ease, border-color .15s ease; }
  .chip:hover { transform: translateY(-1px); }
  .chip.is-active { border-color: var(--g-primary); outline: 2px solid var(--g-primary-outline); background: var(--g-soft-strong); }
  .chip__count { color: var(--g-muted); margin-left:.15rem; }
  
  /* --------------------------------------------------------------------------
     MAIN GRID / TOC
     -------------------------------------------------------------------------- */
  .guide-grid { display:grid; gap: var(--sp-7); padding-block: var(--sp-5) var(--sp-9); }
  
  /* TOC block */
  .guide-aside .toc { position: sticky; top: calc(var(--sp-4) + 2px); background: var(--g-surface); border: 1px solid var(--g-border); border-radius: var(--g-rad-md); box-shadow: var(--g-shadow); padding: .85rem .9rem; margin-left: 0; margin-right: 0; }
  .toc__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-weight: 600; letter-spacing: .02em; color: var(--g-muted); line-height: 1.2; }
  .toc__list { list-style: none; counter-reset: sec; margin: 0; padding: 0; display: grid; gap: .25rem; }
  .toc__list li { counter-increment: sec; }
  .toc__list li > a { display: grid; grid-template-columns: 1.25rem 1fr; align-items: center; gap: .35rem; min-height: 34px; padding: .25rem .35rem; border-radius: 8px; text-decoration: none; color: var(--g-text); border: 1px solid transparent; overflow: hidden; text-wrap: pretty; overflow-wrap: anywhere; }
  .toc__list li > a::before { content: counter(sec) "."; display: inline-block; width: 1.25rem; text-align: right; color: var(--g-muted); }
  .toc__list a:hover { background: var(--g-soft); }
  .toc__list a.is-active { color: var(--g-primary); background: color-mix(in srgb, var(--g-primary) 8%, transparent); border-color: var(--g-primary-outline); box-shadow: 0 0 0 1px var(--g-primary-outline) inset; }
  .toc__list a.h3, .toc__list a[data-depth="2"] { opacity: .95; }
  .toc__list a.h4, .toc__list a[data-depth="3"] { opacity: .85; padding-left: .65rem; }
  
  @media (max-width: 960px) {
    .guide-grid { grid-template-columns: 1fr; gap: var(--sp-5); }
    .guide-aside .toc { position: static; padding: .75rem .75rem; }
    .toc__list { max-height: 42vh; overflow: auto; scrollbar-gutter: stable; }
    .toc__list li > a { grid-template-columns: 1.1rem 1fr; min-height: 32px; }
  }
  @media (max-width: 560px) {
    .toc__list li > a::before { width: 1rem; opacity: .7; }
  }
  
  /* --------------------------------------------------------------------------
     SECTIONS / QA / GLOSSARY / EQUIPMENT / INDUSTRY
     -------------------------------------------------------------------------- */
  .guide-section { margin-bottom: var(--sp-7); }
  .guide-section__title { display:flex; align-items:center; gap:.6rem; margin: 0 0 1rem; scroll-margin-top: 84px; }
  
  /* Q&A */
  .qa { border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface); margin-bottom: .75rem; box-shadow: var(--g-shadow); overflow: hidden; }
  .qa__summary { cursor: pointer; display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding: .9rem 1rem; }
  .qa__q { font-weight: 600; }
  .qa__anchor { opacity:.65; }
  .qa__a { padding: .25rem 1rem 1rem; color: var(--g-text); overflow-wrap: anywhere; word-break: normal; }
  .qa[open] .qa__summary { border-bottom: 1px dashed var(--g-border); }
  
  /* Lists inside answers */
  .qa__a > :first-child { margin-top: 0; }
  .qa__a > :last-child  { margin-bottom: 0; }
  .qa__a ul, .qa__a ol { margin: .55rem 0 .8rem; padding-left: 1.15rem; list-style-position: inside; }
  .qa__a ul { list-style-type: disc; }
  .qa__a ol { list-style-type: decimal; }
  .qa__a li { margin: 0 0 .45rem; }
  .qa__a li::marker { color: var(--g-muted); }
  .qa__a li ul, .qa__a li ol { margin-top: .35rem; }
  
  /* Glossary */
  .glossary-grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(240px, 1fr) ); gap: var(--sp-3); }
  .glossary-card { border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface); padding: 1rem; box-shadow: var(--g-shadow); display: grid; align-content: start; gap: .35rem; }
  .glossary-card__term { margin:0; font-size:1.05rem; }
  
  /* Equipment */
  .equip-grid { display:grid; grid-template-columns: repeat( auto-fit, minmax(280px, 1fr) ); gap: var(--sp-4); }
  .equip-card { border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface); padding: 1rem; box-shadow: var(--g-shadow); display: grid; gap: .5rem; align-content: start; }
  .equip-card__header { display:flex; align-items:center; justify-content:space-between; gap: .75rem; }
  .equip-card__tips { margin:.25rem 0 0 1.1rem; }
  .equip-card a.copy-link { opacity:.7; }
  .equip-card a.copy-link:hover { opacity: 1; }
  
  /* Industry */
  .industry-card { border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface); padding: 1rem; box-shadow: var(--g-shadow); margin-bottom: var(--sp-3); }
  .industry-card__header { display:flex; align-items:center; justify-content:space-between; gap: .75rem; }
  
  /* --------------------------------------------------------------------------
     COMPLIANCE: FORM & RESULTS
     -------------------------------------------------------------------------- */
  .compliance-form {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:var(--sp-3); align-items:end;
    background: var(--g-surface); border:1px solid var(--g-border); border-radius: var(--g-radius);
    padding:var(--sp-4); box-shadow: var(--g-shadow); margin-bottom:var(--sp-4);
  }
  .compliance-form label { font-weight:600; font-size:.95rem; }
  .compliance-form select, .compliance-form input[type="text"] {
    width:100%; padding:.7rem .8rem; border:1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface); color: var(--g-text);
  }
  .compliance-form .btn { width:100%; }
  
  @media (max-width: 1100px) { .compliance-form { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 960px)  { .compliance-form { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px)  { .compliance-form { grid-template-columns: 1fr; } }
  
  /* Compliance card */
  .compliance-card { border:1px solid var(--g-border); border-radius: var(--g-radius); box-shadow: var(--g-shadow); background: var(--g-surface); padding: 0; overflow:hidden; }
  .compliance-card__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding: 1rem 1rem .85rem; border-bottom:1px solid var(--g-border); background: linear-gradient(180deg, var(--g-primary-ghost), transparent); }
  .compliance-card__titles h3 { margin:.1rem 0; }
  .compliance-card__titles .muted { color: var(--g-muted); margin:0; }
  .compliance-card__actions { display:flex; gap:.5rem; flex-wrap:wrap; }
  .compliance-card__actions .btn[disabled] { opacity:.6; cursor:not-allowed; }
  .compliance-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem; padding:1rem; }
  .comp-block { border:1px solid var(--g-border); border-radius: var(--g-rad-md); padding: .75rem .9rem; }
  .comp-block h4 { display:flex; align-items:center; gap:.5rem; margin:.1rem 0 .4rem; }
  .comp-block ul { margin:0; padding-left: 1.15rem; }
  .comp-block p { margin: .35rem 0 0; }
  .cities-grid .city-item p { word-break: break-word; }
  .compliance-footer { border-top:1px dashed var(--g-border); padding: .8rem 1rem; background: var(--g-subtle); }
  
  /* City links */
  .city-links { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .5rem; }
  .city-links a { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--g-border); border-radius: 999px; padding: .35rem .6rem; text-decoration: none; background: var(--g-soft); }
  
  /* Mobile refinements for compliance */
  @media (max-width: 780px) {
    .compliance-card__header { flex-direction: column; align-items: stretch; gap: .65rem; padding: .9rem .9rem .75rem; }
    .compliance-card__actions { display: grid; grid-template-columns: 1fr; gap: .5rem; }
    .compliance-card__actions .btn { width: 100%; }
    .compliance-grid { grid-template-columns: 1fr !important; gap: .75rem; padding: .85rem; }
    .comp-block { padding: .75rem .85rem; }
    .comp-block h4 { font-size: 1rem; margin: .1rem 0 .35rem; }
    .comp-block ul, .comp-block ol { margin: .5rem 0 .75rem; padding-left: 1.15rem; }
    .comp-block li + li { margin-top: .3rem; }
    .cities-grid { display: grid; grid-template-columns: 1fr !important; gap: .6rem; }
    #stateGuide, #stateGuide * { min-width: 0; overflow-wrap: anywhere; word-break: normal; }
  }
  @media (min-width: 781px) and (max-width: 960px) { .compliance-grid { grid-template-columns: 1fr 1fr; } }
  
  /* --------------------------------------------------------------------------
     STATE SELECTOR (GUIDE + HOME)
     -------------------------------------------------------------------------- */
  /* GUIDE (guide.html) */
  #stateForm > div {
    display: grid !important;
    grid-template-columns: minmax(220px, 300px) minmax(240px, 1fr) max-content max-content !important;
    gap: var(--sp-2) !important; align-items: end !important;
  }
  #stateForm > div > div { display: grid; gap: .4rem; min-width: 0; }
  #stateForm label { font-weight: 600; font-size: .95rem; }
  #stateForm select, #stateForm input[type="text"] {
    height: 44px; line-height: 1.2; width: 100%; min-width: 0; padding: .6rem .9rem;
    border: 1px solid var(--g-border); border-radius: var(--g-rad-md);
    background: var(--g-surface); color: var(--g-text); text-overflow: ellipsis;
  }
  #stateForm select { appearance: none; background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%, 0 0;
    background-size: 5px 5px, 5px 5px, 100% 100%; background-repeat: no-repeat; padding-right: 2.2rem;
  }
  #stateForm .btn { height: 44px; padding: .6rem .9rem; white-space: nowrap; }
  #stateForm ::placeholder { color: var(--g-muted); }
  #showComplianceBtn, #clearComplianceBtn { align-self: end; white-space: nowrap; min-height: 44px; padding: .6rem .9rem; }
  #stateForm .btn[disabled] { opacity: .65; cursor: not-allowed; }
  #stateForm select:focus-visible, #stateForm input[type="text"]:focus-visible { border-color: var(--g-primary); box-shadow: var(--g-focus); outline: none; }
  
  @media (max-width: 960px) {
    #stateForm > div { grid-template-columns: 1fr 1fr !important; grid-auto-rows: auto; }
    #showComplianceBtn, #clearComplianceBtn { grid-column: 1 / -1; width: 100%; }
  }
  @media (max-width: 720px) {
    #stateForm > div { grid-template-columns: 1fr !important; gap: var(--sp-2) !important; }
    #showComplianceBtn, #clearComplianceBtn { grid-column: 1 / -1; width: 100%; min-height: 46px; }
    #stateForm select, #stateForm input[type="text"] { min-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; }
  }
  @media (max-width: 560px) { #stateForm > div { grid-template-columns: 1fr !important; } }
  #stateForm > div > * { min-width: 0; }
  
  /* HOME (index.html) */
  .state-form {
    display: grid; grid-template-columns: minmax(220px, 320px) minmax(220px, 1fr) max-content;
    gap: var(--sp-2); align-items: end; background: var(--g-surface);
    border: 1px solid var(--g-border); border-radius: var(--g-radius); padding: var(--sp-3);
  }
  .state-form select {
    height: 44px; line-height: 1.2; width: 100%; min-width: 0; padding: .6rem 2.2rem .6rem .9rem;
    border: 1px solid var(--g-border); border-radius: var(--g-rad-md); background: var(--g-surface); color: var(--g-text);
    appearance: none; background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%),
      linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%, 0 0;
    background-size: 5px 5px, 5px 5px, 100% 100%; background-repeat: no-repeat;
  }
  .state-form .btn { height: 44px; white-space: nowrap; padding: .6rem .9rem; }
  @media (max-width: 960px) { .state-form { grid-template-columns: 1fr 1fr; } .state-form .btn { grid-column: 1 / -1; width: 100%; } }
  @media (max-width: 560px) { .state-form { grid-template-columns: 1fr; } }
  
  /* Tabs polish for chip row */
  .chip-row[role="tablist"] { position: relative; gap: .35rem; border-bottom: 1px solid var(--g-border); padding-bottom: .25rem; }
  .chip-row[role="tablist"] .chip[role="tab"] { border-radius: 10px 10px 0 0; background: transparent; border: 1px solid transparent; padding: .5rem .85rem .6rem; transition: color .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease; }
  .chip-row[role="tablist"] .chip[role="tab"][aria-selected="true"] { color: var(--g-primary); background: var(--g-surface); border-color: var(--g-border); border-bottom-color: var(--g-surface); box-shadow: 0 -2px 0 var(--g-primary) inset; }
  .chip-row[role="tablist"] .chip[role="tab"]:focus-visible { box-shadow: var(--g-focus); }
  
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .chip-row[role="tablist"] { border-bottom-color: var(--g-border); }
    :root:not([data-theme="light"]) .chip-row[role="tablist"] .chip[role="tab"][aria-selected="true"] { border-bottom-color: var(--g-surface); }
  }
  :root[data-theme="dark"] .chip-row[role="tablist"], [data-theme="dark"] .chip-row[role="tablist"], .theme-dark .chip-row[role="tablist"] { border-bottom-color: var(--g-border); }
  :root[data-theme="dark"] .chip-row[role="tablist"] .chip[role="tab"][aria-selected="true"], [data-theme="dark"] .chip-row[role="tablist"] .chip[role="tab"][aria-selected="true"], .theme-dark .chip-row[role="tablist"] .chip[role="tab"][aria-selected="true"] { border-bottom-color: var(--g-surface); }
  
  /* --------------------------------------------------------------------------
     UTILITIES / BUTTONS / MISC
     -------------------------------------------------------------------------- */
  .results-meta { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin: .75rem 0 .25rem; font-size:.95rem; opacity:.9; }
  .no-results { text-align:center; border:1px dashed var(--g-border); border-radius: var(--g-rad-md); padding: 2rem; color: var(--g-muted); }
  .no-results i { font-size: 1.5rem; display:block; margin-bottom:.4rem; }
  
  .back-to-top { position: fixed; right: 1rem; bottom: 1rem; z-index: 20; border:none; border-radius: 999px; padding:.7rem .8rem; background: var(--g-primary); color: var(--g-primary-contrast); box-shadow: var(--g-shadow); cursor:pointer; display:none; }
  
  /* Buttons */
  .btn2 { --btn-text: var(--g-text); --btn-border: var(--g-border); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border:1px solid var(--btn-border); background: var(--btn-bg); padding:.6rem .9rem; border-radius: var(--g-rad-sm); cursor: pointer; font: inherit; color: var(--btn-text); }

  .btn { --btn-bg: var(--g-surface-2); --btn-text: var(--g-text); --btn-border: var(--g-border); display: inline-flex; align-items: center; justify-content: center; gap: .45rem; border:1px solid var(--btn-border); background: var(--btn-bg); padding:.6rem .9rem; border-radius: var(--g-rad-sm); cursor: pointer; font: inherit; color: var(--btn-text); }
  .btn i { font-size: .95em; }
  .btn--primary { background: var(--g-primary); color: var(--g-primary-contrast); border-color: var(--g-primary); }
  .btn--secondary { background: var(--g-soft-strong); color: inherit; border-color: color-mix(in srgb, var(--g-primary) 25%, var(--g-border)); }
  .btn--success { background: var(--g-success); color: var(--g-primary-contrast); border-color: var(--g-success); }
  .btn--warning { background: var(--g-warning); color: var(--g-primary-contrast); border-color: var(--g-warning); }
  .btn--danger  { background: var(--g-danger);  color: var(--g-primary-contrast); border-color: var(--g-danger); }
  .btn--ghost   { background: var(--g-soft); color: var(--g-text); border-color: var(--g-border); }
  .btn--outline { background: transparent; color: var(--g-text); border-color: var(--g-border); }
  .btn:disabled { opacity:.6; cursor:not-allowed; }
  .btn:hover { filter: brightness(1.03); }
  :root[data-theme="dark"] .btn:hover, [data-theme="dark"] .btn:hover, .theme-dark .btn:hover { filter: brightness(1.06); }
  
  /* Copy-link anchors */
  .copy-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; }
  
  /* Unknown-surface catch-alls */
  :where(.card, .panel, .surface, .popover, .menu, .dropdown, .tooltip, .modal, .dialog, .sheet, .toast, .callout, .banner, .pill, .chip):not([style*="background"]) { background: var(--g-surface); color: var(--g-text); border-color: var(--g-border); }
  :where(.card, .panel, .surface, .popover, .menu, .dropdown, .tooltip, .modal, .dialog, .sheet, .toast, .callout, .banner) { border: 1px solid var(--g-border); border-radius: var(--g-rad-md); box-shadow: var(--g-shadow); }
  .elev-1 { background: var(--g-surface); }
  .elev-2 { background: var(--g-surface-2); }
  hr, .divider { border: 0; height: 1px; background: var(--g-border); opacity: .9; }
  
  /* Popovers / menus / tooltips */
  .popover, [role="menu"], .menu, .dropdown, .tooltip { background: var(--g-surface); color: var(--g-text); border: 1px solid var(--g-border); border-radius: 10px; box-shadow: var(--g-shadow); }
  .tooltip { padding: .35rem .55rem; font-size: .92rem; }
  .menu__item, [role="menuitem"] { padding: .5rem .7rem; }
  .menu__item:hover, [role="menuitem"]:hover { background: var(--g-soft); }
  
  /* Overlays & dialogs */
  .dialog, .modal, [role="dialog"] { background: var(--g-surface); color: var(--g-text); border: 1px solid var(--g-border); border-radius: var(--g-radius); box-shadow: var(--g-shadow); }
  .backdrop, .overlay, [data-backdrop] { background: color-mix(in srgb, #000 50%, transparent); }
  
  /* SVG in dark */
  :root[data-theme="dark"] svg:not([fill]):not([stroke]) { color: var(--g-text); }
  
  /* Legacy white coercion */
  :where(.bg-white, .bg--white, .surface-white) { background: var(--g-surface) !important; color: var(--g-text); }
  :where(.text-black, .text--black) { color: var(--g-text) !important; }
  :where(.border-gray, .border-light, .border-white) { border-color: var(--g-border) !important; }
  
  /* Badges */
  .badge { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .5rem; border-radius:999px; font-size:.85rem; border:1px solid var(--g-border); background: var(--g-soft); }
  .badge--success { background: var(--g-success-ghost); border-color: var(--g-success-border); }
  .badge--warning { background: var(--g-warning-ghost); border-color: var(--g-warning-border); }
  .badge--danger  { background: var(--g-danger-ghost);  border-color: var(--g-danger-border); }
  .badge--info    { background: var(--g-info-ghost);    border-color: var(--g-info-border); }
  
  /* --------------------------------------------------------------------------
     FAQ (readability-focused block)
     -------------------------------------------------------------------------- */
  .faq-readable {
    --ink: var(--clr-fg, #0f172a);
    --muted: color-mix(in oklab, var(--ink) 60%, transparent);
    --edge: color-mix(in oklab, var(--ink) 12%, transparent);
    max-width: 75ch; line-height: 1.65; font-size: 1rem; color: var(--ink);
    padding: clamp(0.75rem, 1.5vw, 1.25rem); border: 1px solid var(--edge);
    border-radius: 14px; background: color-mix(in oklab, var(--clr-surface, #fff) 96%, transparent);
    box-shadow: 0 8px 24px color-mix(in oklab, #000 8%, transparent);
  }
  .faq-readable__lead p:first-child { margin-top: 0; font-weight: 600; }
  .faq-readable__lead p { margin: .5rem 0; }
  .faq-readable__grid { display: grid; gap: 1rem; margin-top: .5rem; }
  .faq-readable .block { border: 1px solid var(--edge); border-radius: 12px; padding: .9rem; background: color-mix(in oklab, #fff 90%, transparent); }
  .faq-readable h4 { margin: 0 0 .5rem 0; font-size: 1.05rem; }
  .faq-readable ul { margin: .25rem 0 .5rem 1.1rem; padding: 0; }
  .faq-readable li { margin: .25rem 0; }
  .faq-readable .checklist li::marker { content: "✔ "; }
  .faq-readable .donts li::marker { content: "✖ "; }
  .faq-readable .steps li { counter-increment: step; }
  .faq-readable .steps li::marker { content: counter(step) ". "; }
  .faq-readable .tip { margin-top: .5rem; padding: .5rem .65rem; border-left: 3px solid var(--edge); background: color-mix(in oklab, #000 2%, transparent); border-radius: 8px; }
  .faq-readable__footer { border-top: 1px dashed var(--edge); margin-top: .75rem; padding-top: .75rem; }
  .faq-readable__footer .small { font-size: .9rem; }
  .faq-readable .muted { color: var(--muted); }
  .faq-readable h5 { margin: .25rem 0 .35rem; font-size: .95rem; color: color-mix(in oklab, var(--clr-fg, #0f172a) 80%, transparent); font-weight: 600; }
  
  /* --------------------------------------------------------------------------
     RESPONSIVE / MOTION / PRINT / FORCED COLORS
     -------------------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } .chip, .tag-chip, .alpha-btn { transition: none; } }
  
  @media (print) {
    header.nav, .guide-hero__actions, .chip-row, .guide-toolbar, .compliance-form, .back-to-top { display: none !important; }
    .guide-container { width: 100%; padding-inline: 0; }
    .qa { break-inside: avoid; }
    details.qa[open] .qa__summary { border-bottom: none; }
  }
  
  @media (forced-colors: active) {
    :root { --g-focus: 0 0 0 3px Highlight; }
    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 2px solid Highlight; box-shadow: none; }
    :where(.popover, .menu, .dropdown, .tooltip, .modal, .dialog) { forced-color-adjust: none; background: Canvas; color: CanvasText; border-color: ButtonBorder; box-shadow: none; }
  }
  
  /* --------------------------------------------------------------------------
     MISC POLISH
     -------------------------------------------------------------------------- */
  [id] { scroll-margin-top: 84px; }
  .toolbar__select:focus-visible { border-color: var(--g-primary); box-shadow: var(--g-focus); }
  
  /* Guide main list rhythm (without touching city chips) */
  .guide-main ul:not(.city-links), .guide-main ol:not(.city-links) { margin: .55rem 0 .85rem; padding-left: 1.15rem; }
  .guide-main li + li { margin-top: .35rem; }
  
  /* --------------------------------------------------------------------------
     SPECIFIC FIX: "Show Info" button should not look white in light theme
     (keeps class names; scopes to the exact ID to avoid global design changes)
     -------------------------------------------------------------------------- */
  #showComplianceBtn.btn.btn--primary {
    /* Distinct, token-aware fill (not white) */
    background: var(--g-soft-strong);
    color: var(--g-text);
    border-color: color-mix(in srgb, var(--g-primary) 25%, var(--g-border));
  }
  #showComplianceBtn.btn.btn--primary:hover { filter: brightness(1.03); }
  #showComplianceBtn.btn.btn--primary:focus-visible { box-shadow: var(--g-focus); }
  
  /* In dark mode, give it a slightly richer tint so it remains distinct */
  :root[data-theme="dark"] #showComplianceBtn.btn.btn--primary,
  [data-theme="dark"] #showComplianceBtn.btn.btn--primary,
  .theme-dark #showComplianceBtn.btn.btn--primary {
    background: color-mix(in srgb, var(--g-primary) 22%, transparent);
    color: var(--g-text);
    border-color: color-mix(in srgb, var(--g-primary) 45%, var(--g-border));
  }
  
  #submitSearch.btn.btn--primary,
#showComplianceBtn.btn.btn--primary {
  background: var(--g-primary) !important;
  color: var(--g-primary-contrast) !important;
  border-color: var(--g-primary) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--g-primary) 25%, transparent);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  will-change: transform;
}

/* Icons inherit current color (prevents faint/gray glyphs) */
#submitSearch.btn.btn--primary i,
#showComplianceBtn.btn.btn--primary i {
  color: currentColor !important;
  opacity: 1;
}

/* Hover / active micro-interaction */
#submitSearch.btn.btn--primary:hover,
#showComplianceBtn.btn.btn--primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--g-primary) 30%, transparent);
}
#submitSearch.btn.btn--primary:active,
#showComplianceBtn.btn.btn--primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--g-primary) 22%, transparent);
}

/* Keyboard focus – use existing token ring */
#submitSearch.btn.btn--primary:focus-visible,
#showComplianceBtn.btn.btn--primary:focus-visible {
  outline: none;
  box-shadow: var(--g-focus);
}

/* Disabled state */
#submitSearch.btn.btn--primary[disabled],
#showComplianceBtn.btn.btn--primary[disabled] {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* Dark theme – slightly lighter primary for legibility over deep surfaces */
:root[data-theme="dark"] #submitSearch.btn.btn--primary,
[data-theme="dark"] #submitSearch.btn.btn--primary,
.theme-dark #submitSearch.btn.btn--primary,
:root[data-theme="dark"] #showComplianceBtn.btn.btn--primary,
[data-theme="dark"] #showComplianceBtn.btn.btn--primary,
.theme-dark #showComplianceBtn.btn.btn--primary {
  background: color-mix(in srgb, var(--g-primary) 85%, var(--g-surface) 15%) !important;
  color: var(--g-primary-contrast) !important;
  border-color: color-mix(in srgb, var(--g-primary) 85%, var(--g-border) 15%) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #submitSearch.btn.btn--primary,
  #showComplianceBtn.btn.btn--primary {
    transition: none;
  }
}

/* High-contrast / forced colors safety */
@media (forced-colors: active) {
  #submitSearch.btn.btn--primary,
  #showComplianceBtn.btn.btn--primary {
    forced-color-adjust: auto;
    box-shadow: none;
  }
}


/* ==========================================================================
   Q&A EXPANDABLES — polish & accessibility (append-only)
   - No markup changes required
   - Token-driven, light/dark aware
   - Larger click target, clear chevron, smooth but subtle motion
   ========================================================================== */

/* Container elevation & open state */
.qa {
  transition: box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  will-change: box-shadow, background-color;
}
.qa:hover { box-shadow: 0 12px 28px color-mix(in srgb, var(--g-text) 8%, transparent); }
.qa[open] {
  border-color: color-mix(in srgb, var(--g-primary) 35%, var(--g-border));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--g-text) 12%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-primary) 6%, var(--g-surface)), var(--g-surface) 46%);
}

/* Summary: bigger hit area, balanced rhythm */
.qa__summary {
  position: relative;
  padding: 1rem 1rem 1rem 2.75rem; /* room for chevron */
  min-height: 52px;
  border-radius: calc(var(--g-rad-md) - 2px);
  transition: background-color .15s ease, color .15s ease;
}
.qa__summary:hover {
  background: color-mix(in srgb, var(--g-soft) 65%, transparent);
}
.qa[open] .qa__summary {
  background: color-mix(in srgb, var(--g-primary) 7%, transparent);
}

/* Chevron indicator (no extra markup) */
.qa__summary::before {
  content: "";
  position: absolute;
  left: .9rem;
  top: 50%;
  translate: 0 -50%;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 10px;
  background:
    conic-gradient(from 45deg at 50% 50%, currentColor 0 90deg, transparent 0) 50% 50% / 70% 70% no-repeat;
  /* create caret ▸ via conic mask */
  mask:
    radial-gradient(circle at 50% 50%, #000 70%, transparent 71%);
  opacity: .9;
  transform: rotate(0deg);
  transition: transform .18s ease, background-color .18s ease, opacity .18s ease;
}
.qa[open] .qa__summary::before { transform: rotate(90deg); }

/* Keyboard focus ring on the clickable header */
.qa__summary:focus-visible {
  outline: none;
  box-shadow: var(--g-focus);
}

/* Question text weight & truncation safety */
.qa__q {
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Answer reveal: gentle entrance */
@keyframes qaFadeSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qa__a {
  animation: qaFadeSlide .22s ease both;
  padding-top: .75rem; /* gives breathing room after border */
}

/* Lists inside answer: crisper rhythm */
.qa__a ul, .qa__a ol {
  margin: .6rem 0 .85rem;
  padding-left: 1.1rem;
}
.qa__a li + li { margin-top: .35rem; }

/* Divider style when open */
.qa[open] .qa__summary {
  border-bottom: 1px dashed color-mix(in srgb, var(--g-border) 75%, transparent);
}

/* Anchor-target highlight for deep links (#id) */
.qa:target,
.qa__summary:target {
  outline: 2px solid color-mix(in srgb, var(--g-primary) 45%, var(--g-border));
  outline-offset: 2px;
  scroll-margin-top: 96px; /* below sticky nav */
}

/* Compact density variant (optional utility without markup churn)
   usage (optional): add .qa--compact alongside .qa
*/
.qa.qa--compact .qa__summary { padding-block: .75rem; }
.qa.qa--compact .qa__a { padding-bottom: .75rem; }

/* Dark theme micro-tuning */
:root[data-theme="dark"] .qa,
[data-theme="dark"] .qa,
.theme-dark .qa {
  background: linear-gradient(180deg, color-mix(in srgb, var(--g-primary) 4%, var(--g-surface)), var(--g-surface) 50%);
}
:root[data-theme="dark"] .qa:hover,
[data-theme="dark"] .qa:hover,
.theme-dark .qa:hover {
  box-shadow: 0 16px 34px rgba(0,0,0,.40);
}
:root[data-theme="dark"] .qa[open],
[data-theme="dark"] .qa[open],
.theme-dark .qa[open] {
  border-color: color-mix(in srgb, var(--g-primary) 48%, var(--g-border));
}

/* Reduced motion: keep clarity without movement */
@media (prefers-reduced-motion: reduce) {
  .qa, .qa__summary, .qa__summary::before, .qa__a { transition: none !important; animation: none !important; }
}

/* Print: keep answers visible and remove chrome */
@media print {
  .qa { box-shadow: none !important; border-color: color-mix(in srgb, var(--g-text) 20%, #000) !important; }
  .qa__summary { background: transparent !important; padding-left: 1rem !important; }
  .qa__summary::before { display: none !important; }
}

/* ==========================================================================
   Softer Light Palette (append-only)
   - Reduces glare in light mode without touching dark mode
   - Token-level overrides so the whole page benefits
   - Keeps primary/action contrast WCAG-friendly
   ========================================================================== */

/* Explicit light theme */
:root[data-theme="light"] {
  --g-bg:        #f6f7fb;   /* page background (softer than #fff) */
  --g-surface:   #fbfcff;   /* cards/panels/forms */
  --g-surface-2: #f1f3f8;   /* subtle elevated surfaces */
  --g-border:    #e3e7ef;   /* slightly cooler, lower-glare borders */

  /* soft tints used across chips, tabs, etc. */
  --g-soft:        #f2f4f8;
  --g-soft-strong: #eef2ff;

  /* keep text strong for contrast */
  --g-text:   #0f172a;
  --g-muted:  #56627a;
}

/* If light is the implicit/default (no explicit data-theme set) */
:root:not([data-theme="dark"]):not([data-theme="light"]) {
  --g-bg:        #f6f7fb;
  --g-surface:   #fbfcff;
  --g-surface-2: #f1f3f8;
  --g-border:    #e3e7ef;
  --g-soft:        #f2f4f8;
  --g-soft-strong: #eef2ff;
  --g-text:   #0f172a;
  --g-muted:  #56627a;
}

/* Light-mode polish for common bright areas */
:root[data-theme="light"] .guide-hero,
:root:not([data-theme="dark"]):not([data-theme="light"]) .guide-hero {
  /* gentler hero wash */
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--g-primary) 10%, var(--g-bg)) 0%,
    transparent 55%
  );
}

/* Tables & code blocks can feel stark on off-white—soften just a touch */
:root[data-theme="light"] :where(thead th, pre, code),
:root:not([data-theme="dark"]):not([data-theme="light"]) :where(thead th, pre, code) {
  background: color-mix(in srgb, var(--g-text) 5%, var(--g-surface));
  border-color: var(--g-border);
}

/* TOC hover and menu hovers—use softer fill against the new bg */
:root[data-theme="light"] .toc__list a:hover,
:root:not([data-theme="dark"]):not([data-theme="light"]) .toc__list a:hover,
:root[data-theme="light"] .menu__item:hover,
:root:not([data-theme="dark"]):not([data-theme="light"]) .menu__item:hover {
  background: color-mix(in srgb, var(--g-soft) 70%, transparent);
}

/* Chips / badges sit on lighter bg—tweak for clearer edges */
:root[data-theme="light"] :where(.chip, .tag-chip, .badge),
:root:not([data-theme="dark"]):not([data-theme="light"]) :where(.chip, .tag-chip, .badge) {
  background: var(--g-soft);
  border-color: var(--g-border);
}

/* Cards/panels shadows—slightly softer for the new background */
:root[data-theme="light"] :where(.qa, .glossary-card, .equip-card, .industry-card, .compliance-card),
:root:not([data-theme="dark"]):not([data-theme="light"]) :where(.qa, .glossary-card, .equip-card, .industry-card, .compliance-card) {
  box-shadow: 0 10px 24px color-mix(in srgb, #000 10%, transparent);
}

/* Maintain clear, high-contrast primary actions over softer bg */
:root[data-theme="light"] .btn--primary,
:root:not([data-theme="dark"]):not([data-theme="light"]) .btn--primary {
  background: var(--g-primary);
  color: var(--g-primary-contrast);
  border-color: var(--g-primary);
}


/* ==========================================================================
   FAQ Readable — softer surfaces (append-only)
   - Targets only .faq-readable and its inner .block/tip
   - Light: off-white paper, reduced glare
   - Dark: deeper card for better contrast on deep surfaces
   ========================================================================== */

/* LIGHT (explicit light or implicit default) */
:root[data-theme="light"] .faq-readable,
:root:not([data-theme="dark"]):not([data-theme="light"]) .faq-readable {
  /* Slightly strengthen edge for clarity on softer paper */
  --edge: color-mix(in oklab, var(--ink) 18%, transparent);
  /* Softer paper vs pure white */
  background: color-mix(in oklab, var(--g-surface) 90%, var(--g-bg) 10%);
  border-color: color-mix(in oklab, var(--ink) 14%, var(--g-border));
  box-shadow: 0 8px 22px color-mix(in oklab, #000 10%, transparent);
}

:root[data-theme="light"] .faq-readable .block,
:root:not([data-theme="dark"]):not([data-theme="light"]) .faq-readable .block {
  /* Inner tiles slightly darker than the card so content blocks read clearly */
  background: color-mix(in oklab, var(--g-surface) 82%, var(--g-bg) 18%);
  border-color: color-mix(in oklab, var(--ink) 12%, var(--g-border));
}

:root[data-theme="light"] .faq-readable .tip,
:root:not([data-theme="dark"]):not([data-theme="light"]) .faq-readable .tip {
  /* Gentle callout without bright white */
  background: color-mix(in oklab, #000 3%, transparent);
}

/* DARK */
:root[data-theme="dark"] .faq-readable,
[data-theme="dark"] .faq-readable,
.theme-dark .faq-readable {
  /* Cooler edge using your dark tokens */
  --edge: color-mix(in oklab, var(--g-primary) 22%, var(--g-border));
  /* Deeper card to separate from dark page surface */
  background: color-mix(in oklab, var(--g-surface) 78%, #000 22%);
  border-color: color-mix(in oklab, var(--g-primary) 28%, var(--g-border));
  box-shadow: 0 10px 26px rgba(0,0,0,.45);
}

:root[data-theme="dark"] .faq-readable .block,
[data-theme="dark"] .faq-readable .block,
.theme-dark .faq-readable .block {
  /* Inner tiles a touch deeper than the card for hierarchy */
  background: color-mix(in oklab, var(--g-surface) 70%, #000 30%);
  border-color: color-mix(in oklab, var(--g-primary) 20%, var(--g-border));
}

:root[data-theme="dark"] .faq-readable .tip,
[data-theme="dark"] .faq-readable .tip,
.theme-dark .faq-readable .tip {
  background: color-mix(in oklab, #000 7%, transparent);
}

/* Keep code/table accents inside FAQ gentle against the new paper */
.faq-readable :where(pre, code, thead th) {
  background: color-mix(in oklab, var(--ink) 5%, transparent);
  border-color: var(--edge);
}

/* ==========================================================================
   FAQ Readable — typographic & contrast polish (append-only)
   - Scoped to .faq-readable only
   - Professional hierarchy, comfortable rhythm, accessible contrast
   ========================================================================== */

/* Shared tokens for this component (derived from site tokens) */
.faq-readable {
  --faq-ink: var(--ink, var(--g-text));
  --faq-muted: color-mix(in oklab, var(--faq-ink) 55%, transparent);
  --faq-edge: var(--edge, color-mix(in oklab, var(--faq-ink) 14%, transparent));
  --faq-accent: var(--g-primary);
  --faq-accent-ink: var(--g-primary-contrast);
  --faq-code-bg: color-mix(in oklab, var(--faq-ink) 7%, transparent);
  --faq-code-fg: color-mix(in oklab, var(--faq-ink) 92%, #000);
  --faq-kbd-bg: color-mix(in oklab, var(--faq-ink) 10%, transparent);
  --faq-kbd-border: color-mix(in oklab, var(--faq-ink) 22%, transparent);

  /* Typographic base */
  line-height: 1.68;
  letter-spacing: .003em;
  word-spacing: .01em;
  font-size: 1.0125rem; /* slightly larger than body for readability */
  color: var(--faq-ink);
}

/* Dark-mode tuning for ink/muted */
:root[data-theme="dark"] .faq-readable,
[data-theme="dark"] .faq-readable,
.theme-dark .faq-readable {
  --faq-ink: #e8edf7;
  --faq-muted: color-mix(in oklab, var(--faq-ink) 52%, transparent);
  --faq-edge: color-mix(in oklab, var(--g-primary) 24%, var(--g-border));
  --faq-code-bg: color-mix(in oklab, #000 18%, var(--g-surface));
  --faq-code-fg: color-mix(in oklab, var(--faq-ink) 96%, #000);
  --faq-kbd-bg: color-mix(in oklab, #000 28%, var(--g-surface));
  --faq-kbd-border: color-mix(in oklab, var(--g-primary) 36%, var(--g-border));
}

/* Headings: elegant weight & color separation */
.faq-readable h4 {
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.005em;
  color: color-mix(in oklab, var(--faq-ink) 92%, var(--faq-accent) 8%);
  margin: 0 0 .55rem;
}
.faq-readable h5 {
  font-size: 1rem;
  font-weight: 600;
  color: color-mix(in oklab, var(--faq-ink) 80%, transparent);
  margin: .35rem 0 .4rem;
}

/* Paragraph & list rhythm */
.faq-readable p { margin: .5rem 0 .85rem; }
.faq-readable .block p:first-child { margin-top: 0; }
.faq-readable ul,
.faq-readable ol {
  margin: .45rem 0 .85rem;
  padding-left: 1.15rem;
}
.faq-readable li + li { margin-top: .3rem; }
.faq-readable li::marker { color: var(--faq-muted); }

/* Checklist / donts / steps markers stay distinct and readable */
.faq-readable .checklist li::marker { color: color-mix(in oklab, var(--faq-accent) 68%, var(--faq-ink)); }
.faq-readable .donts li::marker { color: color-mix(in oklab, #dc2626 82%, var(--faq-ink)); }
.faq-readable .steps li::marker { color: var(--faq-muted); }

/* Links: elegant underline, clear hover/focus */
.faq-readable a {
  color: color-mix(in oklab, var(--faq-accent) 78%, var(--faq-ink));
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
}
.faq-readable a:hover {
  color: color-mix(in oklab, var(--faq-accent) 90%, var(--faq-ink));
  background: color-mix(in oklab, var(--faq-accent) 10%, transparent);
  border-radius: 6px;
}
.faq-readable a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--faq-accent) 40%, transparent);
  border-radius: 6px;
}

/* Inline code & pre blocks */
.faq-readable code {
  background: var(--faq-code-bg);
  color: var(--faq-code-fg);
  border: 1px solid var(--faq-edge);
  border-radius: 8px;
  padding: .1rem .35rem;
}
.faq-readable pre {
  background: var(--faq-code-bg);
  color: var(--faq-code-fg);
  border: 1px solid var(--faq-edge);
  border-radius: 12px;
  padding: .85rem 1rem;
  overflow: auto;
}

/* Keyboard hint style */
.faq-readable kbd {
  background: var(--faq-kbd-bg);
  border: 1px solid var(--faq-kbd-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: .08rem .35rem;
  font-size: .92em;
}

/* Tables inside FAQ (rare, but keep them refined) */
.faq-readable table { background: transparent; }
.faq-readable th, .faq-readable td {
  border-color: var(--faq-edge);
}
.faq-readable thead th {
  background: color-mix(in oklab, var(--faq-code-bg) 65%, transparent);
  color: var(--faq-ink);
}

/* Callout tip harmonized with new palette (works with your earlier softening) */
.faq-readable .tip {
  border-left-color: color-mix(in oklab, var(--faq-accent) 40%, var(--faq-edge));
  background: color-mix(in oklab, var(--faq-accent) 8%, transparent);
  color: var(--faq-ink);
}

/* Fine print / notes */
.faq-readable .muted,
.faq-readable .small {
  color: var(--faq-muted);
}

/* Selection inside FAQ */
.faq-readable ::selection {
  background: color-mix(in oklab, var(--faq-accent) 25%, transparent);
}

/* Reduced motion: keep clarity, drop flourish */
@media (prefers-reduced-motion: reduce) {
  .faq-readable a,
  .faq-readable * { transition: none !important; }
}

/* ==========================================================================
   Toasts — elegant, token-driven "copied!" notifications (append-only)
   - Accessible (aria-live) and motion-aware
   - Light/Dark aware via existing tokens
   ========================================================================== */

   .toast-layer {
    position: fixed;
    left: 50%;
    bottom: clamp(14px, 2.2vw, 22px);
    transform: translateX(-50%);
    display: grid;
    gap: 8px;
    z-index: 9999; /* above buttons/cards */
    pointer-events: none; /* clicks pass through */
  }
  
  .toast {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .85rem;
    border-radius: 999px;
    border: 1px solid var(--g-border);
    background: var(--g-surface);
    color: var(--g-text);
    box-shadow: var(--g-shadow);
    font-size: .95rem;
    line-height: 1.2;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, filter .18s ease;
    will-change: opacity, transform;
  }
  
  .toast.is-shown {
    opacity: 1;
    transform: translateY(0);
  }
  
  .toast--success {
    background: var(--g-success-ghost);
    border-color: var(--g-success-border);
  }
  
  .toast--error {
    background: var(--g-danger-ghost);
    border-color: var(--g-danger-border);
  }
  
  .toast i {
    font-size: 1rem;
  }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .toast { transition: none !important; }
  }
  

  /* === Print button — scoped color fix (append-only) ======================= */
/* Targets any primary .btn that triggers window.print() */
button.btn.btn--primary[onclick*="window.print"],
/* Also catch site-specific IDs if present */
#printPage.btn.btn--primary,
#printCompliance.btn.btn--primary {
  background: var(--g-primary) !important;
  color: var(--g-primary-contrast) !important;
  border-color: var(--g-primary) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--g-primary) 25%, transparent);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease;
}

/* Icon inherits readable color */
button.btn.btn--primary[onclick*="window.print"] i,
#printPage.btn.btn--primary i,
#printCompliance.btn.btn--primary i {
  color: currentColor !important;
  opacity: 1;
}

/* Hover/active micro-interactions */
button.btn.btn--primary[onclick*="window.print"]:hover,
#printPage.btn.btn--primary:hover,
#printCompliance.btn.btn--primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--g-primary) 30%, transparent);
}
button.btn.btn--primary[onclick*="window.print"]:active,
#printPage.btn.btn--primary:active,
#printCompliance.btn.btn--primary:active {
  transform: translateY(0);
  filter: brightness(0.98);
}

/* Keyboard focus uses your token ring */
button.btn.btn--primary[onclick*="window.print"]:focus-visible,
#printPage.btn.btn--primary:focus-visible,
#printCompliance.btn.btn--primary:focus-visible {
  outline: none;
  box-shadow: var(--g-focus);
}

/* Disabled */
button.btn.btn--primary[onclick*="window.print"][disabled],
#printPage.btn.btn--primary[disabled],
#printCompliance.btn.btn--primary[disabled] {
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  filter: none;
  box-shadow: none;
}

/* Dark theme: slight lift for legibility over deep surfaces */
:root[data-theme="dark"] button.btn.btn--primary[onclick*="window.print"],
[data-theme="dark"] #printPage.btn.btn--primary,
[data-theme="dark"] #printCompliance.btn.btn--primary {
  background: color-mix(in srgb, var(--g-primary) 85%, var(--g-surface) 15%) !important;
  color: var(--g-primary-contrast) !important;
  border-color: color-mix(in srgb, var(--g-primary) 85%, var(--g-border) 15%) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  button.btn.btn--primary[onclick*="window.print"],
  #printPage.btn.btn--primary,
  #printCompliance.btn.btn--primary { transition: none; }
}

/* Hide the control during actual printing */
@media print {
  button.btn[onclick*="window.print"],
  #printPage.btn,
  #printCompliance.btn { display: none !important; }
}