/* =========================================================================
   OBC Code Finder — Redesigned stylesheet (DESIGN v2 "Statute & Steel")
   -------------------------------------------------------------------------
   A drop-in replacement for style.css.
   - Preserves EVERY id/class selector used by app.js (CRITICAL — do not
     rename or remove). Only their visual treatment has been elevated.
   - Supports light/dark theming via [data-theme="dark"].
   - Supports the --text-scale multiplier (set on :root by app.js).
   - Introduces a token layer (design system) at the top.
   ========================================================================= */

/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {
  /* --- Brand / palette ---
     A deep steel-navy accent (a refined take on the Ontario/Google blue)
     instead of the bright #1a73e8. Reads as regulatory + trustworthy.       */
  --accent:        #1c4f8c;   /* primary steel-navy */
  --accent-strong: #143a66;   /* darker for hover/pressed */
  --accent-soft:   #e7f0fa;   /* faint tinted surface for hovers/chips */
  --accent-soft-2: #d6e5f5;   /* slightly stronger tint */
  --on-accent:     #ffffff;

  /* Surfaces & inks (light) */
  --bg:            #f6f7f9;   /* page backdrop — cool grey */
  --surface:       #ffffff;   /* reading surface / cards */
  --surface-2:     #eef1f5;   /* sidebar / panels */
  --ink:           #1c2530;   /* primary text (near-black, navy cast) */
  --ink-muted:     #57636f;   /* secondary text */
  --ink-faint:     #84909b;   /* tertiary / hints */
  --border:        #dde2e8;
  --border-strong: #c3ccd6;

  /* Semantic accents */
  --selection:     #bfd8f4;   /* ::selection highlight */
  --table-head:    #eef2f6;
  --highlight:     #f7e8a6;   /* search <mark> highlight */
  --gold:          #b2841d;   /* bookmarks / starred — Ontario gold */
  --gold-soft:     #f6ecd0;
  --danger:        #b23a2e;
  --danger-soft:   #fbecea;
  --code-bg:       #eff2f5;

  /* Shape & elevation */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 14px -2px rgba(16,24,40,.10);
  --shadow-lg: 0 18px 44px -12px rgba(16,24,40,.22);

  /* Spacing scale (4pt base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* Chrome dimensions */
  --topbar-h:  62px;
  --sidebar-w: 328px;
  --read-max:  900px;

  /* Typography */
  --font-ui:    "Inter", "Helvetica Neue", Helvetica, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-body:  "Source Serif 4", "Georgia", "Times New Roman", serif;
  --font-mono:  ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* Text scale (multiplied by app.js) */
  --text-scale: 1.0;
  --body-font-size: calc(16px * var(--text-scale));
}

/* =========================================================================
   2. DARK THEME OVERRIDES
   ========================================================================= */
[data-theme="dark"] {
  --accent:        #79a9ef;
  --accent-strong: #9cc1f5;
  --accent-soft:   #1d2f45;
  --accent-soft-2: #24425f;
  --on-accent:     #0d141b;

  --bg:            #0d141b;
  --surface:       #141c24;
  --surface-2:     #1b2430;
  --ink:           #e5eaf0;
  --ink-muted:     #9aa9b8;
  --ink-faint:     #6b7b8b;
  --border:        #27323e;
  --border-strong: #394856;

  --selection:     #24456a;
  --table-head:    #1c2631;
  --highlight:     #5c4a10;
  --gold:          #e4bd5c;
  --gold-soft:     #3b3017;
  --danger:        #e1796d;
  --danger-soft:   #3a211d;
  --code-bg:       #131b23;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 14px -2px rgba(0,0,0,.5);
  --shadow-lg: 0 18px 44px -12px rgba(0,0,0,.65);
}

/* Images/figures carry an explicit border in dark mode */
[data-theme="dark"] .obc-figure { border-color: var(--border-strong); }

/* =========================================================================
   3. BASE
   ========================================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  font-size: var(--body-font-size);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4 {
  font-family: var(--font-ui, var(--font-body));
  line-height: 1.25;
}

a { color: var(--accent); }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.1em 0.4em;
}

.hint { color: var(--ink-muted); font-size: calc(13.5px * var(--text-scale)); }

.hidden { display: none !important; }

/* =========================================================================
   4. TOP NAVIGATION BAR  (desktop "website" chrome)
   ========================================================================= */
.topbar {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  z-index: 100;
}

/* Brand / wordmark — add this container to index.html (see DESIGN.md).
   Harmless if absent. */
.brand {
  display: flex; align-items: center; gap: 10px;
  padding-right: var(--sp-4);
  margin-right: var(--sp-2);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
.brand-mark {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  display: grid; place-items: center; color: #fff;
  font-family: var(--font-mono); font-weight: 700; font-size: 13px;
  box-shadow: var(--shadow-sm);
}
.brand-name { font-family: var(--font-ui, var(--font-body)); font-weight: 700; font-size: calc(15px * var(--text-scale)); letter-spacing: -0.01em; line-height: 1.1; }
.brand-name small { display: block; font-weight: 500; font-size: calc(10.5px * var(--text-scale)); color: var(--ink-muted); letter-spacing: 0.04em; text-transform: uppercase; }

/* Icon action buttons (bookmarks / text size / theme / report / menu / back) */
.icon-btn {
  position: relative;
  background: none; border: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  color: var(--ink-muted);
  font-size: calc(19px * var(--text-scale)); line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
.icon-btn:active { background: var(--accent-soft-2); }

.badge {
  position: absolute; top: 0px; right: -2px;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(10px * var(--text-scale)); border-radius: var(--radius-full);
  padding: 1px 6px; font-weight: 700; line-height: 1.3;
  box-shadow: var(--shadow-sm);
}

/* Prominent search field (center band, spans between brand and actions) */
.search-wrap {
  flex: 1; min-width: 0;
  position: relative;
  display: flex; justify-content: center;
}
#searchInput {
  width: 100%;
  max-width: 620px;
  padding: 10px 44px 10px 40px;
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(15px * var(--text-scale));
  color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  outline: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
#searchInput::placeholder { color: var(--ink-faint); }
#searchInput:hover { border-color: var(--border-strong); }
#searchInput:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Clear (×) button — right inside the search pill */
.clear-btn {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: var(--radius-full);
  background: none; border: none; cursor: pointer;
  color: var(--ink-faint); font-size: calc(18px * var(--text-scale)); line-height: 1;
  display: none; align-items: center; justify-content: center;
}
.clear-btn:hover { background: var(--surface-2); color: var(--ink); }

/* =========================================================================
   5. PAGE SKELETON  (sidebar + reading column)
   ========================================================================= */
.layout {
  display: flex;
  padding-top: var(--topbar-h);
  height: 100vh;
  align-items: stretch;
}

/* --- Navigation sidebar / TOC panel --- */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  overflow-y: auto;
  background: var(--surface-2);
  border-right: 1px solid var(--border);
  padding: var(--sp-4) var(--sp-3) var(--sp-8);
  transition: margin-left 0.22s ease;
}
.sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-w)); }

/* --- Reading / content column --- */
.content {
  flex: 1; min-width: 0;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
  background: var(--bg);
}

/* =========================================================================
   6. DIVISION SELECTOR (segmented control)
   ========================================================================= */
.div-selector {
  display: flex; gap: var(--sp-1);
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.div-chip {
  flex: 1;
  border: none; background: transparent; cursor: pointer;
  padding: 7px 12px; border-radius: var(--radius-md);
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(13px * var(--text-scale));
  font-weight: 600; white-space: nowrap;
  color: var(--ink-muted);
  transition: background .15s, color .15s, box-shadow .15s;
}
.div-chip:hover { background: var(--accent-soft); color: var(--accent); }
.div-chip.active {
  background: var(--accent); color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}

/* Divider row used on the home hero (mirrors the segmented control) */
.divider.home-divider {
  display: flex; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  max-width: 420px;
}
.divider.home-divider .div-chip {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink);
  padding: 6px 14px;
}

/* =========================================================================
   7. TABLE OF CONTENTS  (sidebar tree — structured navigation)
   ========================================================================= */
.toc-group { margin-bottom: 2px; }

.toc-part {
  font-family: var(--font-ui, var(--font-body));
  font-weight: 700;
  font-size: calc(13.5px * var(--text-scale));
  color: var(--ink);
  padding: 9px 10px; margin: var(--sp-2) 0 2px;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex; align-items: center; gap: var(--sp-2);
  border-left: 3px solid transparent;
  transition: background .15s;
}
.toc-part::before {
  content: ""; width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
}
.toc-part:hover { background: var(--accent-soft); color: var(--accent); }
.toc-part.open { border-left-color: var(--accent); }

.toc-section,
.toc-subsection,
.toc-article {
  font-family: var(--font-ui, var(--font-body));
  cursor: pointer;
  border-radius: var(--radius-md);
  border-left: 1px solid var(--border);
  transition: background .12s, color .12s;
}
.toc-section {
  padding: 6px 10px 6px 26px;
  color: var(--ink-muted);
  font-size: calc(13.5px * var(--text-scale));
  margin: 2px 0 2px 8px;
}
.toc-section:hover { background: var(--accent-soft); color: var(--ink); }

.toc-subsection {
  padding: 5px 10px 5px 26px;
  color: var(--ink-muted);
  font-size: calc(12.8px * var(--text-scale));
  font-weight: 600;
  margin: 2px 0 2px 16px;
}
.toc-subsection:hover { background: var(--accent-soft); color: var(--ink); }

.toc-article {
  padding: 4px 10px 4px 26px;
  color: var(--ink-faint);
  font-size: calc(12.6px * var(--text-scale));
  margin: 1px 0 1px 24px;
}
.toc-article:hover { background: var(--accent-soft); color: var(--accent); }

.toc-children { display: none; }
.toc-children.open { display: block; }

/* =========================================================================
   8. HOME / HERO + FLAT CODE BROWSER
   ========================================================================= */
#homeView {
  max-width: var(--read-max);
  margin: 0 auto;
  padding: var(--sp-2) 0 0;
}
#homeView h1 {
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(30px * var(--text-scale));
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
  color: var(--ink);
}
.subtitle {
  color: var(--ink-muted);
  font-size: calc(15px * var(--text-scale));
  margin: 0 0 var(--sp-5);
  font-style: italic;
}
.home-divider { border-top: none; }

/* Flat (book-style) code hierarchy */
.flat-part-wrap { margin: var(--sp-5) 0 var(--sp-6); }

.flat-part-title {
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(21px * var(--text-scale));
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--accent);
  display: flex; align-items: center; gap: var(--sp-2);
}

.flat-part-btns {
  display: flex; gap: var(--sp-2);
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}

/* Depth-expansion button (+section / +subsection / +all) */
.expand-btn {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius-full);
  padding: 4px 14px;
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(12.5px * var(--text-scale));
  font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.expand-btn:hover { background: var(--accent); color: var(--on-accent); }

/* Compact expand buttons on section / subsection headers (+ all) */
.flat-tier-btns {
  display: flex; gap: var(--sp-2);
  margin: var(--sp-1) 0 var(--sp-1) 4px;
}
.expand-mini {
  background: none;
  border: 1px dashed var(--border-strong);
  color: var(--ink-muted);
  padding: 2px 10px;
  font-size: calc(11.5px * var(--text-scale));
}
.expand-mini:hover {
  background: var(--accent-soft);
  border-style: solid;
  color: var(--accent);
}

.flat-part-body { margin-left: 2px; }

/* Clickable section / subsection headers with tier toggle */
.flat-section-wrap { margin: var(--sp-2) 0; }
.flat-subsection-wrap { margin: var(--sp-1) 0; }

.flat-section,
.flat-subsection {
  font-family: var(--font-ui, var(--font-body));
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; gap: var(--sp-2);
  border-left: 3px solid transparent;
  transition: background .12s;
}
.flat-section {
  font-size: calc(16px * var(--text-scale));
  color: var(--ink);
  margin: var(--sp-3) 0 var(--sp-1);
}
.flat-section:hover { background: var(--accent-soft); border-left-color: var(--accent); }

.flat-subsection {
  font-size: calc(14.5px * var(--text-scale));
  color: var(--ink-muted);
  margin: var(--sp-2) 0 var(--sp-1);
  padding-left: 18px;
}
.flat-subsection:hover { background: var(--accent-soft); color: var(--ink); border-left-color: var(--accent); }

.tier-toggle {
  color: var(--accent);
  font-size: calc(10px * var(--text-scale));
  width: 14px; flex-shrink: 0; text-align: center;
}

.flat-section-body { padding-left: 6px; }
.flat-subsection-body { padding-left: 16px; }

/* Article row with inline actions */
.flat-article { margin: 2px 0; }

.flat-article-head {
  padding: 5px 8px;
  border-radius: var(--radius-md);
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(14.5px * var(--text-scale));
  color: var(--ink);
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  transition: background .12s;
}
.flat-article-head:hover { background: var(--surface-2); }
.flat-article-head .article-number { color: var(--accent); font-weight: 600; font-family: var(--font-mono); font-size: .92em; }
.flat-article-title { flex: 1; cursor: pointer; min-width: 120px; }

.flat-article-body {
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 22px;
  border-left: 3px solid var(--accent-soft-2);
  margin: var(--sp-1) 0 var(--sp-3) 10px;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-soft-2);
  box-shadow: var(--shadow-sm);
}

/* =========================================================================
   9. ARTICLE READING VIEW  (the "reading surface")
   ========================================================================= */
#articleView {
  max-width: var(--read-max);
  margin: 0 auto;
  padding: var(--sp-3) 0;
}

.article-title {
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(27px * var(--text-scale));
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 var(--sp-2);
  color: var(--ink);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}

.article-number {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 0.05em 0.45em;
  font-size: 0.85em;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.article-meta {
  color: var(--ink-muted);
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(12.5px * var(--text-scale));
  margin-bottom: var(--sp-4);
  letter-spacing: 0.01em;
}

/* The article body itself — a distinct, calm reading card */
.article-body {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.article-body p {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-body);
  font-size: calc(16.5px * var(--text-scale));
  line-height: 1.78;
  color: var(--ink);
}
.article-body p:last-child { margin-bottom: 0; }
.article-body .note {
  font-size: calc(14px * var(--text-scale));
  color: var(--ink-muted);
  border-left: 3px solid var(--gold);
  padding-left: var(--sp-3);
  margin: var(--sp-4) 0;
}

/* Cross-reference links */
.crossref {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-family: var(--font-mono);
  font-size: .92em;
  border-radius: var(--radius-sm);
  padding: 0 1px;
}
.crossref:hover { background: var(--accent-soft); text-decoration-thickness: 2px; }

/* Search highlight */
mark {
  background: var(--highlight);
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

/* =========================================================================
   10. OBC TABLES
   ========================================================================= */
table.obc-table {
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--sp-3) 0 var(--sp-5);
  width: 100%;
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(13px * var(--text-scale));
  display: block; overflow-x: auto; white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
table.obc-table th, table.obc-table td {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
}
table.obc-table tr > :last-child { border-right: none; }
table.obc-table tr:last-child td { border-bottom: none; }
table.obc-table th {
  background: var(--table-head);
  font-weight: 600;
  color: var(--ink);
  font-size: calc(12.5px * var(--text-scale));
}
table.obc-table tr:hover td { background: var(--surface-2); }

.table-caption {
  font-family: var(--font-ui, var(--font-body));
  font-weight: 700;
  font-size: calc(13px * var(--text-scale));
  margin: var(--sp-4) 0 var(--sp-1);
  color: var(--ink);
  letter-spacing: 0.01em;
}

/* =========================================================================
   11. SEARCH RESULTS
   ========================================================================= */
#searchView { max-width: var(--read-max); margin: 0 auto; }
#searchView .hint {
  font-size: calc(13.5px * var(--text-scale));
  color: var(--ink-muted);
  margin: var(--sp-2) 0 var(--sp-4);
  font-family: var(--font-ui, var(--font-body));
}

.result-item {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-2);
  cursor: pointer;
  background: var(--surface);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, box-shadow .15s;
}
.result-item:hover { border-color: var(--accent); box-shadow: var(--shadow-md); }
.result-number {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 700;
  font-size: calc(13px * var(--text-scale));
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  white-space: nowrap;
}
.result-title {
  font-family: var(--font-ui, var(--font-body));
  font-weight: 600;
  color: var(--ink);
  font-size: calc(15px * var(--text-scale));
  flex: 1; min-width: 200px;
}
.result-snippet {
  color: var(--ink-muted);
  font-size: calc(13.5px * var(--text-scale));
  margin-top: var(--sp-1);
  width: 100%;
  line-height: 1.6;
}

/* =========================================================================
   12. SMALL INLINE BUTTONS  (expand / bookmark / remove / xref-add)
   ========================================================================= */
.mini-btn {
  font-family: var(--font-ui, var(--font-body));
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  border-radius: var(--radius-full);
  padding: 3px 12px;
  font-size: calc(12px * var(--text-scale));
  font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.mini-btn:hover { background: var(--accent); color: var(--on-accent); }

/* Star (bookmark) variants */
.mini-btn.bookmark-btn {
  background: none; color: var(--gold);
  font-size: calc(15px * var(--text-scale)); border: none;
  padding: 2px 7px; border-radius: var(--radius-md);
  transition: background .15s;
}
.mini-btn.bookmark-btn:hover { background: var(--gold-soft); color: var(--gold); }
.mini-btn.bookmark-btn.saved { color: var(--gold); }
.mini-btn.bookmark-btn.saved::after {
  content: ""; display: block;
  background: var(--gold); height: 2px; border-radius: 2px;
  margin-top: 1px;
}

/* Cross-reference add ("⧉") inline button */
.xref-add {
  background: none; border: 1px solid var(--border);
  color: var(--accent);
  font-size: calc(14px * var(--text-scale)); line-height: 1;
  border-radius: var(--radius-md);
  padding: 3px 8px;
}
.xref-add:hover { background: var(--accent-soft); border-color: var(--accent); }
.xref-add.added { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* "Remove" (secondary/destructive) button */
.rm-btn { margin-left: auto; color: var(--ink-muted); border-color: var(--border); background: none; }
.rm-btn:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Full bookmark button on the article page */
.bookmark-btn {
  font-family: var(--font-ui, var(--font-body));
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 7px 16px;
  cursor: pointer;
  color: var(--gold);
  font-size: calc(13.5px * var(--text-scale));
  font-weight: 600;
  margin: 0 0 var(--sp-4);
  transition: background .15s, border-color .15s;
}
.bookmark-btn:hover { background: var(--gold-soft); border-color: var(--gold); }
.bookmark-btn.saved { background: var(--gold-soft); color: var(--gold); border-color: var(--gold); }

/* =========================================================================
   13. FIGURES
   ========================================================================= */
.figure-section { margin: var(--sp-5) 0; }
.figure-section figure { margin: var(--sp-3) 0; text-align: center; }
.obc-figure {
  max-width: 100%; height: auto;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.figure-section figcaption {
  color: var(--ink-muted);
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(12.5px * var(--text-scale));
  margin-top: var(--sp-1);
}

.figure-placeholder {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  text-align: center;
  color: var(--ink-muted);
  background: var(--surface-2);
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(13.5px * var(--text-scale));
  margin: var(--sp-3) 0;
}
.figure-placeholder .fig-num { font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* =========================================================================
   14. CROSS-REFERENCE DRAWER + FLOATING BUTTON
   ========================================================================= */
.xref-drawer {
  position: fixed; right: 0; top: var(--topbar-h); bottom: 0;
  width: 460px; max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  z-index: 98;
  display: flex; flex-direction: column;
  animation: drawerIn .22s ease;
}
@keyframes drawerIn { from { transform: translateX(20px); opacity: 0; } to { transform: none; opacity: 1; } }

.xref-drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-ui, var(--font-body));
  font-weight: 700;
  font-size: calc(16px * var(--text-scale));
  color: var(--ink);
  background: var(--surface-2);
}
.xref-header-actions { display: flex; align-items: center; gap: var(--sp-1); }
/* Expanded (maximized) cross-reference drawer — near full width for reading. */
.xref-drawer.expanded {
  width: min(92vw, 1100px);
  max-width: 100vw;
  transition: width .22s ease;
}
.xref-drawer.expanded .xref-body { max-width: 900px; margin: 0 auto; width: 100%; }

.xref-tabs {
  display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  overflow-x: auto; flex-wrap: wrap;
}
.xref-tab {
  padding: 3px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: calc(12.5px * var(--text-scale));
  font-weight: 600;
  cursor: pointer; color: var(--ink-muted); white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
}
.xref-tab:hover { background: var(--accent-soft); color: var(--accent); }
.xref-tab.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.xref-body { flex: 1; overflow-y: auto; padding: var(--sp-5); }
/* Stacked display mode: all cross-reference clauses shown one after another,
   scrollable in a single page. */
.xref-drawer.stacked .xref-tabs { display: none; }
.xref-drawer.stacked .xref-body { padding: var(--sp-5); }
.xref-stacked-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--surface);
}
.xref-stacked-item .xref-title { margin-top: 0; }
.xref-title {
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(17px * var(--text-scale));
  margin: 0 0 var(--sp-3);
  color: var(--ink);
  font-weight: 700;
}
.xref-actions { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }

/* Floating cross-reference trigger (bottom-right) */
.xref-floating {
  position: fixed; right: 24px; bottom: 24px; z-index: 99;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  border: none;
  font-size: calc(24px * var(--text-scale));
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, box-shadow .15s, background .15s;
}
.xref-floating:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.xref-floating .badge {
  position: absolute; top: -2px; right: -4px;
  background: var(--danger); color: #fff;
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(10.5px * var(--text-scale));
  border-radius: var(--radius-full); padding: 1px 7px;
  font-weight: 700; line-height: 1.4;
  box-shadow: var(--shadow-sm);
}

/* =========================================================================
   15. OVERLAY + MODAL (report feedback)
   ========================================================================= */
.overlay {
  position: fixed; inset: 0;
  background: rgba(9, 14, 20, 0.5);
  backdrop-filter: blur(1.5px);
  z-index: 90;
}

.modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5);
}
.modal-content {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
  width: 100%; max-width: 480px;
  max-height: 90vh; overflow-y: auto;
}
.modal-content h3 {
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(20px * var(--text-scale));
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--sp-2);
}
.modal-content label {
  display: block;
  font-family: var(--font-ui, var(--font-body));
  margin: var(--sp-4) 0 var(--sp-1);
  font-weight: 600;
  font-size: calc(13.5px * var(--text-scale));
  color: var(--ink);
}
.modal-content select,
.modal-content input,
.modal-content textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  font-size: calc(14.5px * var(--text-scale));
  font-family: var(--font-ui, var(--font-body));
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.modal-content select:focus,
.modal-content input:focus,
.modal-content textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  background: var(--surface);
}
.modal-actions {
  display: flex; justify-content: flex-end; gap: var(--sp-2);
  margin-top: var(--sp-5);
}

.coffee-icon-btn { font-size: 18px; }
.coffee-icon-btn:hover { transform: scale(1.1); }

/* =========================================================================
   16. "PART N" SEARCH-SCOPE CHIP (inside search pill)
   ========================================================================= */
.part-filter-chip {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: var(--radius-full);
  padding: 2px 9px;
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(11.5px * var(--text-scale));
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.part-filter-chip:hover { background: var(--accent); color: var(--on-accent); }
.part-filter-chip.filtered { background: var(--accent); color: var(--on-accent); }

/* Contextual suggestion state — clearly a clickable hint, not an active filter. */
.part-filter-chip.suggest {
  background: var(--accent-soft-2);
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.part-filter-chip.suggest::before { content: "Suggestion: "; font-weight: 500; opacity: .8; }
.part-filter-chip.suggest:hover {
  background: var(--accent);
  color: var(--on-accent);
}
.part-filter-chip.suggest.filtered {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}
.part-filter-chip.suggest.filtered::before { content: ""; }

/* =========================================================================
   17. REPORT BUTTON / BUY-ME-A-COFFEE
   ========================================================================= */
.report-btn { font-size: calc(18px * var(--text-scale)); }

.coffee-btn {
  display: inline-block;
  margin-top: var(--sp-2);
  padding: 8px 18px;
  background: linear-gradient(135deg, #ff8a4c, #ff6b3d);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-full);
  font-family: var(--font-ui, var(--font-body));
  font-weight: 700;
  font-size: calc(13.5px * var(--text-scale));
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s;
}
.coffee-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }

/* =========================================================================
   18. FOOTER
   ========================================================================= */
.copyright-footer {
  margin-top: var(--sp-8);
  padding: var(--sp-6) 0 var(--sp-8);
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(12.5px * var(--text-scale));
  line-height: 1.7;
}
.copyright-footer p { margin: 0 0 var(--sp-3); }
.copyright-footer a { color: var(--accent); }

/* =========================================================================
   19. BOOKMARKS VIEW
   ========================================================================= */
#bookmarksView { max-width: var(--read-max); margin: 0 auto; }
#bookmarksView h1 {
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(26px * var(--text-scale));
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-4);
  color: var(--ink);
}

/* =========================================================================
   20. RESPONSIVE
   ========================================================================= */
@media (max-width: 960px) {
  .content { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .article-body { padding: var(--sp-5); }
}
.topbar-actions {
  display: flex; align-items: center; gap: var(--sp-1);
  margin-left: auto;
  position: relative;
}
.more-btn { display: none; }
.more-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 120;
  padding: var(--sp-2);
  display: flex; flex-direction: column;
}
.more-menu.hidden { display: none; }
.more-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--ink); font-family: var(--font-ui, var(--font-body));
  font-size: calc(14px * var(--text-scale));
  cursor: pointer; text-align: left;
}
.more-item:hover { background: var(--accent-soft); }

@media (max-width: 768px) {
  /* Mobile topbar wraps to 2 rows (brand + search). Use position:sticky so it
     occupies its natural height in flow and pushes content down instead of
     overlapping it (a fixed topbar with fixed 62px padding would hide content). */
  .topbar {
    position: sticky;
    top: 0;
    height: auto;
    min-height: 0;
    flex-wrap: wrap;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-2);
  }
  .layout {
    padding-top: 0;          /* sticky topbar already occupies its flow space */
    height: 100dvh;          /* use dynamic viewport height on mobile */
  }
  .topbar .search-wrap {
    flex: 1 1 100%;
    order: 3;
    width: 100%;
    max-width: none;
    padding: 0;
  }
  .topbar .search-wrap #searchInput {
    max-width: none;
    width: 100%;
    height: 44px;
    font-size: calc(16px * var(--text-scale));
  }
  .brand-name small { display: none; }
  .icon-btn { width: 36px; height: 36px; }
  /* On mobile, collapse only the less-important action icons (font size,
     theme, report) into the ⋯ overflow menu. Bookmarks and coffee stay visible. */
  .topbar-actions > #textSizeBtn,
  .topbar-actions > #themeBtn,
  .topbar-actions > #reportBtn { display: none; }
  .more-btn { display: inline-flex; }
  .layout { position: relative; }
  .sidebar {
    position: absolute; left: 0; top: 0;
    bottom: 0;
    z-index: 95;
    width: min(var(--sidebar-w), 85vw);
    box-shadow: var(--shadow-lg);
    /* Off-canvas by default on mobile; only shown when the user taps the
       menu button (which removes .collapsed). Anchored to .layout, which sits
       below the sticky topbar, so the first TOC item (Part 1) is not hidden
       behind the header. */
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .sidebar:not(.collapsed) { transform: translateX(0); }
  .sidebar.collapsed { transform: translateX(-100%); }
  .content { padding: var(--sp-4); }
  #articleView, #homeView, #searchView, #bookmarksView { padding-left: var(--sp-1); padding-right: var(--sp-1); }
  .article-body { padding: var(--sp-4); }
  .xref-drawer {
    width: 100vw;
    top: 0;                 /* drawer is its own full-screen layer on mobile */
    z-index: 200;           /* above the sticky topbar so header buttons are clickable */
    height: 100dvh;
  }
  .xref-drawer-header { padding-top: max(var(--sp-4), 56px); }  /* clear mobile status bar */
  .xref-drawer.expanded { width: 100vw; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   21. EXPLICIT ID RULES  (all IDs used by app.js)
   -------------------------------------------------------------------------
   app.js resolves these via getElementById()/closest("#id"); explicit rules
   guarantee the selectors exist and pin intended defaults even where the
   class rules above are sufficient.
   ========================================================================= */
#searchInput { }
#partFilterChip { }
#bookmarksBtn { }
#textSizeBtn { }
#themeBtn { }
#reportBtn { }
#toc { }
#homeView { }
#subtitle { }
#flatCode { }
#coffeeBtn { }
#xrefFloating { }
#xrefDrawer { }
#reportModal { }

/* Explicit behavior anchors (belt-and-suspenders with the class rules above) */
#searchInput:focus-visible,
#reportModal .modal-content input:focus-visible,
#reportModal .modal-content textarea:focus-visible,
#reportModal .modal-content select:focus-visible { outline: none; }
#xrefFloating .badge,
.xref-floating .badge { position: absolute; top: -2px; right: -4px; }