/* =========================================================================
   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:     #647079;   /* tertiary / hints — AA contrast on white */
  --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); }

/* =========================================================================
   4b. BACK PILL — sticky "Back" control at the top of the content area
   -------------------------------------------------------------------------
   Replaces the old bare "←" topbar icon (issue #35). Chevron + text label
   in an accent-tinted pill: unambiguous, 44px minimum touch target, shown
   in article / search / bookmarks views on desktop AND mobile. Toggled by
   app.js with the .hidden class so it leaves no layout gap when hidden.
   ========================================================================= */
.back-pill {
  position: sticky;
  top: 0;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 10px 18px 10px 13px;
  /* Align with the centered reading column when the content area is wider
     than --read-max; collapses to 0 on narrow screens. */
  margin: 0 0 var(--sp-3) max(0px, calc((100% - var(--read-max)) / 2));
  background: var(--accent-soft);
  color: var(--accent);
  border: 1.5px solid var(--accent);
  border-radius: var(--radius-full);
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(15px * var(--text-scale));
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background .15s, color .15s;
}
.back-pill:hover { background: var(--accent); color: var(--on-accent); }
.back-pill:active { background: var(--accent-strong); color: var(--on-accent); }
.back-pill .back-icon { display: block; flex-shrink: 0; }
.back-pill .back-label { line-height: 1; white-space: nowrap; }

/* =========================================================================
   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
   ========================================================================= */
/* issue #30/#34: readable tables at every viewport. The .table-scroll
   wrapper carries horizontal overflow; every column keeps a hard 40px
   minimum width (no 1-2 character columns) and words only break at natural
   boundaries. Wide tables grow past the container and scroll inside the
   wrapper instead of squishing into single-character columns. */
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.obc-table {
  table-layout: auto;
  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));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
/* Readability floor (issue #34): min-width includes padding (border-box),
   so 40px keeps ~2 characters plus padding readable, and break-word (not
   anywhere) stops mid-word cramming like "Min"/"mu"/"mim" at 375px. */
table.obc-table th, table.obc-table td {
  min-width: 40px;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}
table.obc-table td:first-child, table.obc-table th:first-child { min-width: 11em; }
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); }

/* =========================================================================
   9b. CLAUSE LIST LEVELS (issue #32)
   ========================================================================= */
.obc-list { margin: var(--sp-2) 0; }
.obc-list > p { margin: 0 0 var(--sp-1); }
/* hanging indent: wrapped lines align after the "(a) " marker */
.obc-list > p {
  padding-left: 1.5em;
  text-indent: -1.5em;
}
.obc-lv2 { margin-left: 1.4em; }
.obc-lv3 { margin-left: 2.8em; }
.obc-lv4 { margin-left: 4.2em; }
.obc-lv5 { margin-left: 5.6em; }

@media (max-width: 768px) {
  .obc-lv2 { margin-left: 0.9em; }
  .obc-lv3 { margin-left: 1.6em; }
  .obc-lv4 { margin-left: 2.3em; }
  .obc-lv5 { margin-left: 3.0em; }
}

.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);
  flex-wrap: wrap;          /* buttons must never overflow the modal on narrow screens */
  margin-top: var(--sp-5);
}
.modal-actions > button { flex: 0 1 auto; }

.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: static;
  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,
#bookmarksView h2.bookmarks-title {
  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; }
  /* Tighter table cell padding on phones: keeps the 40px readability floor
     while fitting more text per column before scrolling is needed. */
  table.obc-table th, table.obc-table td { padding: 6px 9px; }
}

/* 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; }

/* =========================================================================
   22. PART / SECTION FILTER PICKER (funnel button + popover, Android parity)
   ========================================================================= */
/* Anchor container sits between the search field and the topbar action
   icons, so the funnel never collides with the in-pill suggestion chip or
   the clear (×) button (which are absolutely positioned inside the pill). */
.filter-anchor {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.filter-picker-btn { color: var(--ink-muted); }
.filter-picker-btn:hover { background: var(--accent-soft); color: var(--accent); }
.filter-picker-btn.active {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}
.funnel-icon { display: block; }

.filter-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  max-width: calc(100vw - 16px);
  max-height: 50vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 130;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.filter-popover.hidden { display: none; }
.filter-popover-row { display: flex; flex-direction: column; gap: 6px; }
.filter-row-label {
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(11px * var(--text-scale));
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}
.filter-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 132px;
  overflow-y: auto;
}
.filter-chip {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-muted);
  border-radius: var(--radius-full);
  padding: 3px 10px;
  font-family: var(--font-ui, var(--font-body));
  font-size: calc(12px * var(--text-scale));
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-chip:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 768px) {
  /* Keep the funnel on the same row as the (full-width) search input. */
  .topbar .search-wrap { flex: 1 1 auto; width: auto; }
  .filter-anchor { order: 4; }
  /* Popover becomes a near-full-width sheet anchored under the search row. */
  .filter-popover {
    position: fixed;
    left: 8px;
    right: 8px;
    top: var(--popover-top, 60px);
    width: auto;
    max-width: calc(100vw - 16px);
  }
}

/* --- #31 report worker submit --- */
.report-primary {
  background: var(--accent, #1c4f8c);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.report-primary:disabled { opacity: 0.6; cursor: wait; }
.turnstile-wrap { margin: 8px 0; display: flex; justify-content: center; }

/* Vertical filter picker: chips stack in a column, full-width rows */
.filter-popover .filter-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 7px 12px;
}
.filter-row-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 2px 4px;
}

/* #37: scroll targets clear the sticky topbar (block:"start" + this margin
   keeps section/subsection/article headers fully visible, not behind chrome). */
.flat-section-wrap, .flat-subsec, .flat-article, [data-tier] { scroll-margin-top: calc(var(--topbar-h, 62px) + 14px); }
@media (max-width: 768px) {
  .flat-section-wrap, .flat-subsec, .flat-article, [data-tier] { scroll-margin-top: 165px; } /* wrapped mobile topbar */
}

/* Filter controls live in .filter-anchor (right of the search bar), NOT inside it —
   so the search input keeps its full width and the funnel/chip never shrink it. */
.topbar .search-wrap { flex: 1 1 auto; max-width: 760px; min-width: 220px; }
.filter-anchor { position: relative; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }

/* Nationalcode.ca home link: render the <a> styled as an icon button like
   the sibling <button class="icon-btn"> controls. */
a.icon-btn { text-decoration: none; color: var(--ink-muted); }
a.icon-btn:hover { background: var(--accent-soft); color: var(--accent); }
a.icon-btn:active { background: var(--accent-soft-2); }