/* ============================================================================
   READER — design-tokens.css
   THE TOKEN CONTRACT · canonical, per PRODUCT_SPEC.md §7 (v1.4 — §7.1–7.13, both themes)

   SINGLE SOURCE OF TRUTH for every visual property. Invariant I7 / §6.3:
   no color, font, size, spacing, width, radius, or shadow is hardcoded outside
   this contract. Retheming = swap the §7 token groups below; no other edits.

   Colors are the EXACT tokens extracted from Claude Desktop.
   Structure: §7.1–7.3 (color / type / ergonomics) + §7.4–7.9 (radii / spacing /
   dimensions / chrome+code type / elevation / semantic) + §7.10 (controls, P0
   settings) + §7.11 (reading / accessibility) + §7.12 (export card) + §7.13 (file tree). :root = dark (default);
   [data-theme="light"] overrides every themed token. Both complete.
   ============================================================================ */

/* ===== :root — DARK (default) ============================================= */
:root,
:root[data-theme="dark"] {

  /* ---- §7.1 Color ---- */
  --bg:               #1F1F1E;   /* App / reading background                 */
  --surface:          #2C2C2B;   /* Sidebar, cards, sheet, hover, panels     */
  --code-bg:          #171716;   /* Code blocks (recessed)                   */
  --text:             #F8F8F6;   /* Primary text                             */
  --text-secondary:   #C3C2B7;   /* Secondary text                          */
  --text-muted:       #97958C;   /* Captions, list markers, metadata        */
  --border:           #454442;   /* Hairlines, dividers                     */
  --accent:           #D97757;   /* Clay — links, focus, active, progress   */
  --accent-emphasis:  #C6613F;   /* Hover / pressed accent                  */

  /* ---- §7.1 Syntax ---- */
  --syntax-keyword:   #D97757;
  --syntax-string:    #B5C89A;
  --syntax-number:    #D9A05B;
  --syntax-comment:   #6F6D65;
  --syntax-function:  #C9A8E8;
  --syntax-variable:  #E8E6DC;

  color-scheme: dark;
}

/* ===== [data-theme="light"] — complete color override ===================== */
:root[data-theme="light"] {
  /* ---- §7.1 Color ---- */
  --bg:               #F8F8F6;
  --surface:          #FFFFFF;
  --code-bg:          #EFEEEB;
  --text:             #121212;
  --text-secondary:   #373734;
  --text-muted:       #7B7974;
  --border:           #E7E6E1;
  --accent:           #C6613F;
  --accent-emphasis:  #B6532F;
  /* ---- §7.1 Syntax ---- */
  --syntax-keyword:   #B6532F;
  --syntax-string:    #5C7042;
  --syntax-number:    #9A6A1F;
  --syntax-comment:   #9B998F;
  --syntax-function:  #7A4BA8;
  --syntax-variable:  #2B2A27;

  color-scheme: light;
}

/* ===== §7.2 Type · §7.3 Reading ergonomics ===============================
   Theme-independent — declared once, inherited by both themes.              */
:root {

  /* ---- §7.2 Type ---- */
  --font:        "Source Serif 4", Georgia, "Times New Roman", Times, serif;  /* reading face (OFL, bundled) */
  --mono:        "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; /* code face (OFL, bundled)    */
  --ui-font:     system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;    /* CHROME ONLY — never in the reading surface */
  --fs-base:     17px;     /* body size                            */
  --fs-h1:       1.85em;   /* heading scale (relative to --fs-base) */
  --fs-h2:       1.4em;
  --fs-h3:       1.15em;
  --fs-h4:       1.0em;
  --fw-normal:   400;
  --fw-semibold: 650;

  /* ---- §7.3 Reading ergonomics (accessibility controls bind to these) ---- */
  --md-max:          none;    /* THE reading-width cap: full-width by default; the Reading-width tweak sets a rem cap (unified — was split with --measure) */
  --reading-pad-x:   clamp(var(--sp-10), 7vw, 160px);  /* full-width reading panel: responsive side padding */
  --leading:         1.72;
  --para-space:      1.05em;
  --letter-spacing:  0;
  --word-spacing:    0;
  --heading-leading: 1.25;
  --radius:          8px;
  --radius-lg:       12px;
}

/* ===== §7.4 Extended radii ================================================
   Complements §7.3 --radius / --radius-lg.                                   */
:root {
  --radius-pill: 4px;    /* inline code · cite chip · small affordances */
  --radius-ctl:  6px;    /* icon buttons · toggles · outline rows       */
  --radius-round: 999px; /* breadcrumb pill                             */
}

/* ===== §7.5 Spacing scale ================================================= */
:root {
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px;
}

/* ===== §7.6 Layout & control dimensions =================================== */
:root {
  --sidebar-width:   248px;
  --tabbar-height:   40px;
  --tab-max:         200px;
  --progress-height: 3px;     /* signature reading-progress hairline */
  --peek-width:      340px;
  --sheet-width:     60%;
  --sheet-max:       760px;
  --sheet-head-h:    48px;
  --split-min:       340px;
  --outline-width:   256px;
  --outline-indent:  14px;    /* added per heading depth */
  --divider-w:       1px;     /* split divider rule          */
  --divider-hit:     11px;    /* split divider drag hit-area */
  --hairline:        1px;     /* dividers / borders          */
  --rule-accent:     2px;     /* active marker / tab underline */
  --thumb-h:         144px;   /* peek thumbnail              */
  --favicon:         16px;
  --ctl-sm:          18px;    /* checkbox · close affordance */
  --ctl-md:          26px;    /* sidebar icon button         */
  --ctl-lg:          30px;    /* toolbar toggle              */
  --check-radius:    5px;     /* task-list checkbox          */
  --check-border:    1.5px;   /* task-list checkbox stroke   */
  --bar-accent:      3px;     /* blockquote / callout left bar */
  --indent:          22px;    /* unordered list / counter width */
  --indent-lg:       30px;    /* ordered list / task list    */
  --reading-foot:    96px;    /* reading column bottom padding */
  --find-input:      180px;   /* find-bar input width        */
  --peek-offline-w:  280px;   /* offline peek card width     */
  --peek-snippet-max: 168px;  /* internal peek snippet height */
  --pill-pad:        1px 6px; /* inline code / kbd padding   */
  --fm-key-min:      8.5rem;  /* frontmatter key column width */
}

/* ===== §7.7 Chrome, code & dense type ====================================
   Sizes outside the reading surface (which uses §7.2 only).                 */
:root {
  --ui-size:        13px;   /* sidebar rows, tabs, outline rows  */
  --ui-small:       12px;   /* meta, counts, buttons             */
  --ui-label:       11px;   /* uppercase section headers         */
  --small-size:     15px;   /* .md small / caption               */
  --code-size:      14px;   /* block code                        */
  --code-leading:   1.65;   /* block code line-height            */
  --fs-dense:       16px;   /* table cells, callout body         */
  --title-size:     22px;   /* empty-state title (serif)         */
  --fs-card-title:  14px;   /* peek card title                   */
  --fs-card-body:   12.5px; /* peek description, breadcrumb      */
  --fs-meta:        11.5px; /* domains, offline note             */
  --fs-micro:       9px;    /* favicon initial                   */
  /* component line-heights */
  --lh-tight:       1.2;    /* sheet title                       */
  --lh-snug:        1.45;   /* outline rows                      */
  --lh-card-title:  1.34;
  --lh-card-body:   1.5;
  --lh-dense:       1.6;    /* callout body                      */
}

/* ===== §7.8 Elevation & scrim (themed) ==================================== */
:root,
:root[data-theme="dark"] {
  --shadow:    0 8px 28px rgba(0,0,0,.28);   /* find bar, raised controls */
  --shadow-lg: 0 16px 44px rgba(0,0,0,.34);  /* peek card, slide-over sheet */
  --scrim:     hsl(0 0% 0% / .46);           /* dims the doc behind the sheet */
  --focus-ring: 0 0 0 3px var(--accent-soft); /* find / filter focus ring */
}
:root[data-theme="light"] {
  --shadow:    0 8px 28px rgba(0,0,0,.12);
  --shadow-lg: 0 16px 44px rgba(0,0,0,.15);
  --scrim:     hsl(0 0% 0% / .20);
}

/* ===== §7.9 Semantic & derived ===========================================
   Derived from §7.1 --accent (computed, not standalone shades — retint with
   the theme). Callout hues + the punctuation token map onto contract colors.
   --link-blue is the inactive blue alternate from §12 (not used by default). */
:root {
  --accent-soft:  color-mix(in srgb, var(--accent) 14%, transparent);  /* washes / selected / rings */
  --accent-line:  color-mix(in srgb, var(--accent) 42%, transparent);  /* link underline            */

  --syntax-punct: var(--text-secondary);   /* code punctuation (no §7.1 hue) */

  --callout-note:      var(--text-muted);       /* info → neutral   */
  --callout-tip:       var(--syntax-string);    /* green            */
  --callout-important: var(--accent);           /* clay             */
  --callout-warning:   var(--syntax-number);    /* amber            */
  --callout-caution:   var(--accent-emphasis);  /* deep clay        */

  --link-blue: #5AA2E6;   /* inactive alternate — links use --accent by default */

  /* outbound-arrow glyph mask (inherits link color via currentColor) */
  --ico-outbound: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}
:root[data-theme="light"] {
  --link-blue: #2F73C7;   /* inactive alternate */
}

/* ===== §7.10 Controls (Reading Settings — P0 shared vocabulary) ===========
   The popover container + reusable controls that Track T (Theme) and the
   accessibility pack (Reading) both plug into. All derived from §7 tokens.
   Component dimensions live here too so no literal escapes the contract. */
:root {
  --popover-width:    320px;   /* settings popover shell        */
  --popover-max-h:    72vh;    /* scrollable cap                */
  --ctl-h:            28px;    /* standard control height       */
  --ctl-radius:       var(--radius-ctl);  /* 6px — controls      */
  --row-gap:          var(--sp-3);        /* label↔control rows  */

  /* segmented picker */
  --segment-bg:       var(--bg);              /* track recess     */
  --segment-active:   var(--surface);         /* selected segment */
  --segment-pad-y:    4px;
  --segment-pad-x:    11px;
  --segment-min:      30px;

  /* toggle switch */
  --toggle-w:         34px;
  --toggle-h:         20px;
  --toggle-pad:       2px;
  --toggle-track-off: var(--border);
  --toggle-track-on:  var(--accent);
  --toggle-thumb:     var(--surface);         /* knob (rides the track) */
  --toggle-thumb-shadow: 0 1px 2px rgba(0,0,0,.3);

  /* color swatch + grid */
  --swatch:           26px;                   /* swatch size      */
  --swatch-ring:      var(--accent);          /* selected ring    */
  --swatch-ring-gap:  2px;                    /* surface gap      */
  --swatch-ring-w:    4px;                    /* outer clay ring  */

  /* slider */
  --slider-rail:      var(--border);
  --slider-fill:      var(--accent);
  --slider-thumb:     var(--surface);
  --slider-thumb-d:   16px;                   /* thumb diameter   */
  --slider-rail-h:    4px;

  /* stepper */
  --stepper-btn:      26px;
  --stepper-val-min:  38px;

  /* dropdown */
  --dropdown-min:     120px;

  /* theme-card preview dims */
  --tc-preview-h:     40px;
  --tc-pad:           10px;
  --tc-gap:           5px;
  --tc-dot:           11px;
  --tc-line-h:        4px;
  --tc-check:         14px;
}

/* ===== §7.11 Accessibility — Reading pack (§8.3.2) ========================
   Opt-in Focus/A11y pack. Every treatment defaults OFF (Invariant I4) and is
   fully reversible (remove a class / attribute). Values derive from the
   contract where possible. Letter/word spacing already live in §7.3. */
:root {
  --focus-dim:     0.30;                /* line-focus: dimmed line opacity        */
  --focus-lit:     1;                   /* current line / paragraph opacity       */
  --dim-para:      0.45;                /* dim-surrounding: gentler than focus     */
  --bionic-weight: var(--fw-semibold);  /* bionic lead-character weight           */
  --focus-band:    var(--accent-soft);  /* optional wash behind the current line  */
}

/* ---- Reading presets: sepia / high-contrast ------------------------------
   Token-override blocks that LAYER over the active theme — they override only
   the neutral tokens; --accent and the six --syntax-* inherit from the theme
   (so Nord+sepia keeps Nord's accent on warm paper). Raw values live only in
   these definition blocks, exactly like themes.css. Apply --reading on the
   same element as --theme; the :root-qualified selector keeps the preset above
   any namespaced theme block regardless of file load order. */
:root[data-reading="sepia"], [data-reading="sepia"] {
  --bg:#F4ECD8; --surface:#FBF6E7; --code-bg:#EAE0C6;
  --text:#4A3B2A; --text-secondary:#6B5942; --text-muted:#93826B; --border:#DED2B6;
  color-scheme: light;
}
:root[data-reading="high-contrast"], [data-reading="high-contrast"] {
  --bg:#000000; --surface:#0B0B0B; --code-bg:#000000;
  --text:#FFFFFF; --text-secondary:#F2F2F2; --text-muted:#C9C9C9; --border:#FFFFFF;
  color-scheme: dark;
}

/* ===== §7.12 Export card — Sharing / image export (§8.3.3) ================
   The shareable image is rendered from the SAME tokens as the reading surface,
   so a theme/preset change retints it automatically. No hardcoded values;
   framing presets swap a couple of these. */
:root {
  --card-bg:        var(--bg);       /* alias only — .xcard reads --bg DIRECTLY so it retints when a theme/preset is scoped at or above the card (not just at :root) */
  --card-pad:       56px;            /* Comfortable preset (default)         */
  --card-pad-snug:  32px;            /* Snug preset                          */
  --card-radius:    16px;            /* card corner radius                   */
  --card-shadow:    0 20px 60px rgba(0,0,0,.28);  /* preview elevation (not baked into export unless chosen) */
  --card-inset:     var(--hairline); /* faint edge on the card               */
  --card-w-social:  1080px;          /* width preset — social (1:1-ish feed) */
  --card-w-docs:    720px;           /* width preset — docs / narrow         */
  --card-scale:     2;               /* export raster scale (retina/2x)      */
}

/* ===== §7.13 File tree — sidebar hierarchy (§8.1.3 · Track F) =============
   VSCode's explorer minus the complexity. Quiet chrome; derived from §7.
   The native SwiftUI tree mirrors these (App/FileTreeView.swift · TreeTok), the
   same way the settings popover / themed chrome mirror the contract. Row highlight
   spans the full scrollable content width (see the tree block below). */
:root {
  --tree-indent:    var(--outline-indent);  /* 14px per level — aligns with outline */
  --tree-pad-l:     var(--sp-2);             /* left pad before level-0 content      */
  --tree-row-h:     26px;                    /* row height                           */
  --tree-guide:     var(--border);           /* vertical indent guide hairline       */
  --tree-chevron:   var(--text-muted);       /* disclosure chevron                   */
  --tree-icon:      var(--text-muted);       /* monochrome file/folder glyph         */
  --tree-mark:      var(--accent);           /* filter match text                    */
  --tree-scrollbar: var(--border);           /* thin scrollbar thumb (fades in)      */
  --tree-scroll-w:  8px;                      /* scrollbar thickness                  */
}

/* ============================================================================
   RESET (scoped, minimal)
   ============================================================================ */
.rdr * { box-sizing: border-box; }
.rdr { font-family: var(--ui-font); color: var(--text); background: var(--bg); }

/* ============================================================================
   SIGNATURE — reading-progress hairline (§8.2.1)
   ============================================================================ */
.reading-progress {
  position: sticky; top: 0; left: 0; z-index: 5;
  height: var(--progress-height);
  background: var(--border);
}
.reading-progress > i {
  display: block; height: 100%;
  width: calc(var(--progress, 0) * 100%);
  background: var(--accent);
  transition: width .08s linear;
}

/* ============================================================================
   RENDERED MARKDOWN SURFACE  (.md) — uses ONLY --font / --mono
   ============================================================================ */
.md {
  font-family: var(--font);
  color: var(--text);
  max-width: var(--md-max); /* §7.3 reading-width cap: default none (full-width); the Reading-width tweak sets a rem cap */
  margin: 0 auto;
  padding: var(--sp-12) var(--reading-pad-x) var(--reading-foot);  /* … with responsive side padding */
  font-size: var(--fs-base);
  line-height: var(--leading);
  letter-spacing: var(--letter-spacing);
  word-spacing: var(--word-spacing);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: oldstyle-nums proportional-nums;
}

/* headings */
.md h1, .md h2, .md h3, .md h4 {
  color: var(--text); text-wrap: balance;
  line-height: var(--heading-leading);
  font-weight: var(--fw-semibold);
}
.md h1 { font-size: var(--fs-h1); letter-spacing: -.01em;  margin: 0 0 var(--sp-4); }
.md h2 { font-size: var(--fs-h2); letter-spacing: -.005em; margin: var(--sp-10) 0 var(--sp-4); }
.md h3 { font-size: var(--fs-h3); margin: var(--sp-8) 0 var(--sp-3); }
.md h4 { font-size: var(--fs-h4); margin: var(--sp-6) 0 var(--sp-2); }
.md h1 + p, .md h2 + p, .md h3 + p { margin-top: 0; }

/* paragraphs & inline */
.md p { margin: 0 0 var(--para-space); text-wrap: pretty; }
.md strong { font-weight: var(--fw-semibold); color: var(--text); }
.md em { font-style: italic; }
.md a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-underline-offset: 3px;
  text-decoration-thickness: var(--divider-w);
}
.md a:hover { text-decoration-color: var(--accent); }
.md small, .md .caption { font-size: var(--small-size); color: var(--text-muted); }

/* lists */
.md ul, .md ol { margin: 0 0 var(--para-space); padding-left: 0; }
.md li { margin-bottom: var(--sp-2); }
.md ul { list-style: none; }
.md ul > li { position: relative; padding-left: var(--indent); }
.md ul > li::before {
  content: "•"; position: absolute; left: 4px; top: -.02em;
  color: var(--text-muted); font-size: 1em;
}
.md ol { list-style: none; counter-reset: ol; }
.md ol > li { position: relative; padding-left: var(--indent-lg); counter-increment: ol; }
.md ol > li::before {
  content: counter(ol) "."; position: absolute; left: 0; top: 0;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  font-family: var(--font); width: var(--indent); text-align: right;
}
.md li > ul, .md li > ol { margin: var(--sp-2) 0 0; }

/* GitHub task lists */
.md .task-list { list-style: none; padding-left: 0; }
.md .task-list > li { padding-left: var(--indent-lg); }
.md .task-list > li::before { content: none; }
.md .task-list input[type="checkbox"] { position: absolute; opacity: 0; }
.md .task-list > li > .box {
  position: absolute; left: 0; top: .18em;
  width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--check-radius);
  border: var(--check-border) solid var(--border); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
.md .task-list > li.done > .box {
  background: var(--accent); border-color: var(--accent);
}
.md .task-list > li.done > .box::after {
  content: "✓"; font-family: var(--ui-font); font-size: var(--ui-small); font-weight: var(--fw-semibold);
  color: var(--bg);
}
.md .task-list > li.done { color: var(--text-secondary); }

/* inline code — 0.86em is intentionally em-relative (scales with body) */
.md code {
  font-family: var(--mono);
  font-size: 0.86em;
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-pill);
  padding: var(--pill-pad);
  color: var(--text);
}

/* fenced code blocks */
.md pre {
  background: var(--code-bg);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--para-space);
  overflow: auto;
}
.md pre code {
  font-family: var(--mono);
  font-size: var(--code-size);
  line-height: var(--code-leading);
  background: none; border: none; padding: 0; color: var(--text);
}
/* syntax token classes (map highlighter output to these) */
.md .tok-keyword  { color: var(--syntax-keyword); }
.md .tok-string   { color: var(--syntax-string); }
.md .tok-number   { color: var(--syntax-number); }
.md .tok-comment  { color: var(--syntax-comment); font-style: italic; }
.md .tok-function { color: var(--syntax-function); }
.md .tok-variable { color: var(--syntax-variable); }
.md .tok-punct    { color: var(--syntax-punct); }

/* blockquote */
.md blockquote {
  margin: 0 0 var(--para-space);
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-5);
  border-left: var(--bar-accent) solid var(--border);
  color: var(--text-secondary);
  font-style: italic;
}
.md blockquote p:last-child { margin-bottom: 0; }

/* horizontal rule */
.md hr {
  border: none; height: var(--hairline); background: var(--border);
  margin: var(--sp-10) 0;
}

/* tables */
.md table {
  width: 100%; border-collapse: collapse;
  font-size: var(--fs-dense); margin: 0 0 var(--para-space);
}
.md thead th {
  text-align: left; font-family: var(--ui-font);
  font-size: var(--ui-label); font-weight: var(--fw-semibold);
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--hairline) solid var(--border);
}
.md tbody td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--hairline) solid var(--border);
  color: var(--text);
}
.md tbody tr:last-child td { border-bottom: none; }

/* ---- CALLOUTS — hues from §7.9 (--callout-*) ---- */
.md .callout {
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-left: var(--bar-accent) solid var(--c, var(--accent));
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-5);
  margin: 0 0 var(--para-space);
}
.md .callout-title {
  font-family: var(--ui-font);
  font-size: var(--ui-label); font-weight: var(--fw-semibold);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--c, var(--accent));
  display: flex; align-items: center; gap: var(--sp-1);
  margin-bottom: var(--sp-2);
}
.md .callout-body { font-size: var(--fs-dense); line-height: var(--lh-dense); color: var(--text-secondary); }
.md .callout-body :last-child { margin-bottom: 0; }
.md .callout.note      { --c: var(--callout-note); }
.md .callout.tip       { --c: var(--callout-tip); }
.md .callout.important { --c: var(--callout-important); }
.md .callout.warning   { --c: var(--callout-warning); }
.md .callout.caution   { --c: var(--callout-caution); }

/* ---- Mermaid diagram container ---- */
.md .mermaid {
  background: var(--code-bg);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-6);
  margin: 0 0 var(--para-space);
  display: flex; justify-content: center;
  overflow: auto;
}

/* ---- KaTeX math — 1.04em intentionally em-relative ---- */
.md .katex { font-size: 1.04em; color: var(--text); }
.md .katex-display {
  margin: var(--para-space) 0;
  padding: var(--sp-3) 0;
  overflow-x: auto; overflow-y: hidden;
}

/* ============================================================================
   APP CHROME (--ui-font) — sidebar, tabs, toolbar, find bar, empty state
   ============================================================================ */
.chrome { font-family: var(--ui-font); }

/* sidebar */
.sidebar {
  width: var(--sidebar-width);
  background: var(--surface);
  border-right: var(--hairline) solid var(--border);
  display: flex; flex-direction: column;
}
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--hairline) solid var(--border);
}
.sidebar-folder {
  font-size: var(--ui-label); font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-actions { display: flex; gap: var(--sp-1); }
.icon-btn {
  width: var(--ctl-md); height: var(--ctl-md); border-radius: var(--radius-ctl);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: transparent; border: none; cursor: pointer;
}
.icon-btn:hover { background: var(--bg); color: var(--text); }

.file-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--ui-size); color: var(--text-secondary);
  cursor: pointer; border-left: var(--rule-accent) solid transparent;
}
.file-row .fname { color: var(--text); }
.file-row .fmeta { margin-left: auto; font-size: var(--ui-small); color: var(--text-muted); }
.file-row:hover { background: var(--bg); }
.file-row.selected {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.file-row.selected .fname { color: var(--text); font-weight: var(--fw-semibold); }

/* tab bar */
.tabbar {
  height: var(--tabbar-height);
  display: flex; align-items: stretch;
  background: var(--bg);
  border-bottom: var(--hairline) solid var(--border);
}
.tab {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3) 0 var(--sp-4);
  font-size: var(--ui-size); color: var(--text-muted);
  border-right: var(--hairline) solid var(--border);
  max-width: var(--tab-max); cursor: pointer;
}
.tab .tname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab.active { color: var(--text); background: var(--surface); }
/* active-tab bottom bar */
.tab.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--hairline));
  height: var(--rule-accent); background: var(--accent);
}
.tab .close {
  width: var(--ctl-sm); height: var(--ctl-sm); border-radius: var(--radius-pill); opacity: 0;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.tab:hover .close, .tab.active .close { opacity: 1; }
.tab .close:hover { background: var(--border); color: var(--text); }

/* toolbar / theme + outline toggles */
.toolbar {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-3);
}
.toggle {
  width: var(--ctl-lg); height: var(--ctl-lg); border-radius: var(--radius-ctl);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); background: transparent; border: var(--hairline) solid transparent;
  cursor: pointer;
}
.toggle:hover { background: var(--surface); color: var(--text); border-color: var(--border); }

/* find bar (floating ⌘F) */
.findbar {
  position: absolute; top: var(--sp-3); right: var(--sp-6);
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
  box-shadow: var(--shadow);
}
.findbar.focused { border-color: var(--accent); box-shadow: var(--focus-ring), var(--shadow); }
.findbar input {
  font-family: var(--ui-font); font-size: var(--ui-size);
  background: transparent; border: none; outline: none; color: var(--text);
  width: var(--find-input);
}
.findbar input::placeholder { color: var(--text-muted); }
.findbar .count { font-size: var(--ui-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* empty state */
.empty {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-4); color: var(--text-muted); text-align: center;
}
.empty .glyph { color: var(--border); }
.empty .title { font-family: var(--font); font-size: var(--title-size); color: var(--text-secondary); }
.empty .hint { font-size: var(--ui-size); color: var(--text-muted); }
.empty kbd {
  font-family: var(--mono); font-size: var(--ui-small);
  background: var(--surface); border: var(--hairline) solid var(--border);
  border-radius: var(--radius-pill); padding: var(--pill-pad); color: var(--text-secondary);
}

/* ============================================================================
   LINK SURFACE (§8.2.4)
   ============================================================================ */

/* ---- LINK VARIANTS (inside .md) ---- */
.md a.external::after {
  content: ""; display: inline-block;
  width: .60em; height: .60em; margin-left: .14em;
  vertical-align: -.01em;
  background: currentColor;
  -webkit-mask: var(--ico-outbound) center / contain no-repeat;
          mask: var(--ico-outbound) center / contain no-repeat;
  opacity: .72;
}
.md a.external.visited { opacity: .58; }
.md a.external.visited::after { opacity: .5; }

.md a.internal {
  text-decoration-style: dashed;
  text-decoration-color: var(--accent-line);
}

.md a.anchor {
  color: var(--text);
  text-decoration: none;
  border-bottom: var(--hairline) dotted var(--text-muted);
}
.md a.anchor:hover { color: var(--accent); border-bottom-color: var(--accent); }

.md a.cite {
  font-family: var(--ui-font);
  font-size: .68em; font-weight: var(--fw-semibold);
  vertical-align: super; line-height: 0;
  color: var(--accent);
  text-decoration: none;
  padding: .15em .4em; margin: 0 .06em;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
}
.md a.cite:hover { background: var(--accent); color: var(--bg); }

@keyframes rdr-flash {
  from { background: var(--accent-soft); }
  to   { background: transparent; }
}
.md .flash {
  animation: rdr-flash 1.25s ease-out;
  border-radius: var(--radius-ctl);
  box-decoration-break: clone;
}

/* ---- PEEK CARD ---- */
.peek {
  width: var(--peek-width);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  font-family: var(--ui-font);
}
.peek-thumb {
  height: var(--thumb-h); background: var(--code-bg);
  border-bottom: var(--hairline) solid var(--border);
  background-size: cover; background-position: center;
}
.peek-body { padding: var(--sp-3) var(--sp-4) var(--sp-1); }
.peek-head { display: flex; align-items: center; gap: var(--sp-2); }
.peek-favicon {
  width: var(--favicon); height: var(--favicon); border-radius: var(--radius-pill); flex: none;
  background: var(--accent-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: var(--fw-semibold); color: var(--accent);
}
.peek-domain { font-family: var(--mono); font-size: var(--fs-meta); color: var(--text-muted); }
.peek-title {
  font-size: var(--fs-card-title); font-weight: var(--fw-semibold); color: var(--text);
  line-height: var(--lh-card-title); margin: var(--sp-2) 0 0;
}
.peek-desc {
  font-size: var(--fs-card-body); color: var(--text-secondary); line-height: var(--lh-card-body);
  margin: var(--sp-1) 0 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.peek-snippet {
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--hairline) solid var(--border);
  max-height: var(--peek-snippet-max); overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
          mask-image: linear-gradient(#000 70%, transparent);
}
.peek-actions {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-top: var(--hairline) solid var(--border);
}
.peek-btn {
  font-family: var(--ui-font); font-size: var(--ui-small); font-weight: 500;
  color: var(--text-secondary); background: transparent;
  border: none; border-radius: var(--radius-ctl); padding: var(--sp-1) var(--sp-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
.peek-btn:hover { background: var(--bg); color: var(--text); }
.peek-btn.primary { color: var(--accent); }
.peek-btn .sep { color: var(--border); }
.peek.offline { width: var(--peek-offline-w); }
.peek.offline .peek-body { padding: var(--sp-3) var(--sp-4); }
.peek.offline .peek-offline-note {
  font-size: var(--fs-meta); color: var(--text-muted);
  display: flex; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2);
}

/* ---- SLIDE-OVER SHEET ---- */
.scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 40; }
.sheet {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 41;
  width: var(--sheet-width); max-width: var(--sheet-max);
  background: var(--surface);
  border-left: var(--hairline) solid var(--border);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.sheet-header {
  height: var(--sheet-head-h); flex: none;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border-bottom: var(--hairline) solid var(--border);
}
.sheet-nav { display: flex; gap: 1px; }
.sheet-id { min-width: 0; }
.sheet-title {
  font-family: var(--ui-font); font-size: var(--ui-size); font-weight: var(--fw-semibold); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: var(--lh-tight);
}
.sheet-domain { font-family: var(--mono); font-size: var(--ui-label); color: var(--text-muted); }
.sheet-actions { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.sheet-body { flex: 1; overflow: auto; background: var(--bg); }

/* ---- SPLIT VIEW ---- */
.split { display: flex; height: 100%; }
.split-pane { flex: 1; min-width: var(--split-min); overflow: auto; position: relative; }
.split-divider {
  flex: none; width: var(--divider-hit); cursor: col-resize;
  margin: 0 calc(var(--divider-hit) / -2); position: relative; z-index: 2;
}
.split-divider::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  width: var(--divider-w); transform: translateX(-50%);
  background: var(--border);
}
.split-divider:hover::before,
.split-divider.dragging::before { background: var(--accent); width: var(--rule-accent); }

/* ---- BREADCRUMB ---- */
.breadcrumb {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-family: var(--ui-font); font-size: var(--fs-card-body); color: var(--text-muted);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-2); margin-bottom: var(--sp-4);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-round); cursor: pointer; user-select: none;
}
.breadcrumb:hover { color: var(--text); border-color: var(--text-muted); }
.breadcrumb .src { color: var(--text-secondary); }

/* ============================================================================
   OUTLINE PANEL (§8.2.3)
   ============================================================================ */
.outline {
  width: var(--outline-width);
  flex: none;
  background: var(--surface);
  border-left: var(--hairline) solid var(--border);
  display: flex; flex-direction: column;
  font-family: var(--ui-font);
}
.outline-header {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-bottom: var(--hairline) solid var(--border);
}
.outline-title {
  font-size: var(--ui-label); font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
  padding: 0 var(--sp-1) var(--sp-2);
}
.outline-filter {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--bg);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2);
}
.outline-filter svg { color: var(--text-muted); flex: none; }
.outline-filter input {
  font-family: var(--ui-font); font-size: var(--ui-size);
  background: transparent; border: none; outline: none; color: var(--text);
  width: 100%; min-width: 0;
}
.outline-filter input::placeholder { color: var(--text-muted); }
.outline-filter.focused {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.outline-list {
  flex: 1; overflow-y: auto;
  padding: var(--sp-2) var(--sp-2) var(--sp-4);
}
.outline-row {
  display: block; position: relative;
  font-size: var(--ui-size); line-height: var(--lh-snug); color: var(--text-secondary);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) calc(var(--sp-2) + var(--lvl, 0) * var(--outline-indent));
  border-radius: var(--radius-ctl); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none;
}
.outline-row:hover { background: var(--bg); color: var(--text); }
/* depth tone: deeper headings read quieter */
.outline-row[data-lvl="0"] { color: var(--text); font-weight: var(--fw-semibold); }
.outline-row[data-lvl="1"] { color: var(--text-secondary); }
.outline-row[data-lvl="2"],
.outline-row[data-lvl="3"],
.outline-row[data-lvl="4"],
.outline-row[data-lvl="5"] { color: var(--text-muted); }

/* active (scroll-spied) — thin clay marker + accent text + faint wash */
.outline-row.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.outline-row.active::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: var(--rule-accent); height: 1.05em; border-radius: 1px;
  background: var(--accent);
}
.outline-row mark {
  background: var(--accent-soft); color: var(--accent);
  border-radius: var(--radius-pill); padding: 0 1px;
}

/* empty state — no headings */
.outline-empty {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); padding: var(--sp-6); text-align: center; color: var(--text-muted);
}
.outline-empty .glyph { color: var(--border); }
.outline-empty .msg { font-size: var(--ui-size); }

/* toolbar toggle button (sits next to the theme toggle) */
.outline-toggle.active {
  background: var(--surface); color: var(--accent);
  border-color: var(--border);
}

/* ============================================================================
   READING SETTINGS (§8.3 · P0) — popover shell + shared control vocabulary
   Safari-Reader-style popover anchored to a toolbar "Aa" control. Track T
   (Theme) and the accessibility pack (Reading) fill the section bodies.
   ============================================================================ */
.settings-pop {
  position: absolute; z-index: 42;
  width: var(--popover-width); max-height: var(--popover-max-h);
  display: flex; flex-direction: column;
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--ui-font); overflow: hidden;
}
.settings-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-bottom: var(--hairline) solid var(--border);
}
.settings-head .t { font-size: var(--ui-size); font-weight: var(--fw-semibold); color: var(--text); }
.settings-scroll { overflow-y: auto; padding: var(--sp-2) 0; }

.settings-section { padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.settings-section + .settings-section { border-top: var(--hairline) solid var(--border); }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.section-head .lbl {
  font-size: var(--ui-label); font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted);
}
.section-reset {
  font-family: var(--ui-font); font-size: var(--ui-small); color: var(--text-muted);
  background: transparent; border: none; cursor: pointer;
  padding: 2px var(--sp-1); border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: var(--sp-1);
}
.section-reset:hover { color: var(--accent); }

.section-placeholder {
  font-size: var(--ui-small); color: var(--text-muted); line-height: var(--lh-dense);
  padding: var(--sp-4); text-align: center;
  background: var(--bg);
  border: var(--hairline) dashed var(--border);
  border-radius: var(--radius);
}

.ctl-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: var(--ctl-h);
}
.ctl-row + .ctl-row { margin-top: var(--row-gap); }
.ctl-label { font-size: var(--ui-size); color: var(--text); }
.ctl-label .sub { display: block; font-size: var(--ui-small); color: var(--text-muted); margin-top: 1px; }
.ctl-value { font-size: var(--ui-small); color: var(--text-muted); font-variant-numeric: tabular-nums; }

.segmented {
  display: inline-flex; background: var(--segment-bg);
  border: var(--hairline) solid var(--border);
  border-radius: var(--ctl-radius); padding: 2px; gap: 2px;
}
.segmented button {
  font-family: var(--ui-font); font-size: var(--ui-small); font-weight: 500;
  color: var(--text-secondary); background: transparent;
  border: none; border-radius: calc(var(--ctl-radius) - 2px);
  padding: var(--segment-pad-y) var(--segment-pad-x); cursor: pointer; min-width: var(--segment-min);
}
.segmented button:hover { color: var(--text); }
.segmented button.active { background: var(--segment-active); color: var(--text); box-shadow: var(--shadow); }
.segmented button:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.swatch-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.swatch {
  width: var(--swatch); height: var(--swatch); border-radius: 50%;
  border: var(--hairline) solid var(--border); cursor: pointer; padding: 0;
  position: relative; background: var(--sw, var(--surface));
}
.swatch:hover { transform: scale(1.06); }
.swatch.selected { box-shadow: 0 0 0 var(--swatch-ring-gap) var(--surface), 0 0 0 var(--swatch-ring-w) var(--swatch-ring); }
.swatch:focus-visible { outline: none; box-shadow: 0 0 0 var(--swatch-ring-gap) var(--surface), var(--focus-ring); }

.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: var(--slider-rail-h);
  border-radius: var(--slider-rail-h); background: var(--slider-rail); cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: var(--slider-thumb-d); height: var(--slider-thumb-d); border-radius: 50%;
  background: var(--slider-thumb); border: var(--rule-accent) solid var(--accent); box-shadow: var(--shadow);
}
.slider:focus-visible { outline: none; }
.slider:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); }
.slider.filled {
  background: linear-gradient(var(--slider-fill), var(--slider-fill)) 0/var(--fill,50%) 100% no-repeat, var(--slider-rail);
}

.stepper {
  display: inline-flex; align-items: center;
  border: var(--hairline) solid var(--border);
  border-radius: var(--ctl-radius); overflow: hidden;
}
.stepper button {
  width: var(--stepper-btn); height: var(--ctl-h);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: var(--small-size);
}
.stepper button:hover { background: var(--bg); color: var(--text); }
.stepper .val {
  min-width: var(--stepper-val-min); text-align: center;
  font-size: var(--ui-size); color: var(--text); font-variant-numeric: tabular-nums;
  border-left: var(--hairline) solid var(--border);
  border-right: var(--hairline) solid var(--border);
  line-height: var(--ctl-h);
}

.switch {
  position: relative; flex: none;
  width: var(--toggle-w); height: var(--toggle-h);
  border-radius: var(--toggle-h); cursor: pointer;
  background: var(--toggle-track-off); border: none; padding: 0;
  transition: background .15s ease;
}
.switch::after {
  content: ""; position: absolute; top: var(--toggle-pad); left: var(--toggle-pad);
  width: calc(var(--toggle-h) - 2 * var(--toggle-pad));
  height: calc(var(--toggle-h) - 2 * var(--toggle-pad));
  border-radius: 50%; background: var(--toggle-thumb);
  box-shadow: var(--toggle-thumb-shadow);
  transition: transform .15s ease;
}
.switch.on { background: var(--toggle-track-on); }
.switch.on::after { transform: translateX(calc(var(--toggle-w) - var(--toggle-h))); }
.switch:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.dropdown {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  height: var(--ctl-h); min-width: var(--dropdown-min);
  padding: 0 var(--sp-2) 0 var(--sp-3);
  background: var(--bg); color: var(--text);
  border: var(--hairline) solid var(--border);
  border-radius: var(--ctl-radius);
  font-family: var(--ui-font); font-size: var(--ui-size); cursor: pointer;
}
.dropdown:hover { border-color: var(--text-muted); }
.dropdown:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.dropdown svg { color: var(--text-muted); flex: none; }

.import-row {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; height: var(--ctl-h);
  padding: 0 var(--sp-3);
  background: var(--bg); color: var(--text-secondary);
  border: var(--hairline) dashed var(--border);
  border-radius: var(--ctl-radius);
  font-family: var(--ui-font); font-size: var(--ui-size); cursor: pointer;
}
.import-row:hover { border-color: var(--accent); color: var(--text); }
.import-row svg { color: var(--text-muted); flex: none; }
.import-row:hover svg { color: var(--accent); }

.settings-toggle.active { background: var(--surface); color: var(--accent); border-color: var(--border); }

/* ============================================================================
   THEME PICKER (§8.3.1 · Track T) — built-in palette preview swatches
   ============================================================================ */
.theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.theme-card {
  position: relative; cursor: pointer; padding: 0;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  background: var(--tc-bg, var(--surface)); text-align: left;
}
.theme-card:hover { border-color: var(--text-muted); }
.theme-card.selected { border-color: transparent; box-shadow: 0 0 0 var(--rule-accent) var(--accent); }
.theme-card .tc-preview {
  height: var(--tc-preview-h); display: flex; align-items: center; gap: var(--tc-gap);
  padding: 0 var(--tc-pad);
  background: var(--tc-bg, var(--bg));
  border-bottom: var(--hairline) solid var(--tc-border, var(--border));
}
.theme-card .tc-dot { width: var(--tc-dot); height: var(--tc-dot); border-radius: 50%; flex: none; }
.theme-card .tc-line { height: var(--tc-line-h); border-radius: 2px; flex: 1; background: var(--tc-text, var(--text)); opacity: .9; }
.theme-card .tc-name {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--ui-small); color: var(--text);
  padding: var(--sp-2) var(--tc-pad);
}
.theme-card .tc-mode { font-size: var(--fs-micro); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.theme-card.selected .tc-check {
  width: var(--tc-check); height: var(--tc-check); border-radius: 50%;
  background: var(--accent); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ============================================================================
   §8.3.2 READING TRANSFORMS (Track A11y) — opt-in focus modes on .md.
   Reversible, class-gated on #doc, default OFF → the plain surface is untouched
   (I4). All values come from §7.11 tokens; no hardcoded colors here (presets
   supply the color via [data-reading] token blocks in themes.css).
   ============================================================================ */
/* Bionic: word-heads are wrapped in <b class="bl"> by app.js; inert until the
   .bionic class is on, so toggling is instant + the wrap is fully reversible. */
.md .bl { font-weight: inherit; }
.md.bionic .bl { font-weight: var(--bionic-weight); }

/* Line focus — dim every visual line but the one being read (+ optional wash).
   app.js wraps each visual line in <span class="ln"> and marks the active .current. */
.md.focus-line .ln { opacity: var(--focus-dim); transition: opacity .18s ease; }
.md.focus-line .ln.current {
  opacity: var(--focus-lit);
  background: var(--focus-band);
  border-radius: var(--radius-pill);
  box-decoration-break: clone;
}

/* Dim surrounding paragraphs — gentler cousin: the current paragraph stays full,
   the rest dim. (Only <p>, so doc-path / breadcrumb / frontmatter never dim.) */
.md.dim-para p { opacity: var(--dim-para); transition: opacity .18s ease; }
.md.dim-para p.current { opacity: var(--focus-lit); }

/* ============================================================================
   FRONTMATTER — YAML metadata block (parsed + stripped by app.js so it never
   mis-renders as a setext H1). A quiet properties card above the document.
   ============================================================================ */
.md .frontmatter {
  margin: 0 0 var(--sp-8);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
}
.md .fm-row {
  display: flex; gap: var(--sp-4); align-items: baseline;
  padding: var(--sp-1) 0;
  padding-left: calc(var(--fm-depth, 0) * var(--sp-6));
  line-height: var(--lh-dense);
}
.md .fm-key {
  flex: 0 0 auto; min-width: var(--fm-key-min);
  font-family: var(--mono); font-size: var(--fs-meta); color: var(--text-muted);
}
.md .fm-val {
  flex: 1 1 auto; min-width: 0; word-break: break-word;
  font-size: var(--fs-dense); color: var(--text-secondary);
}
.md .fm-row.fm-parent .fm-key { color: var(--text-secondary); }   /* a map key (no value) */

/* ============================================================================
   EXPORT CARD (§8.3.3 · Track S) — the shareable image frame + preview UI
   The card IS the reading surface in a frame; renders from the same tokens, so
   themes/presets retint it. No watermark, no branding (§8.3.3).
   ============================================================================ */

/* the exportable card — content framed as a composed image */
.xcard {
  background: var(--bg);
  border: var(--card-inset) solid var(--border);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  overflow: hidden;
}
.xcard.snug { padding: var(--card-pad-snug); }
/* width presets applied to the card wrapper */
.xcard.w-social { width: var(--card-w-social); }
.xcard.w-docs   { width: var(--card-w-docs); }
/* the rendered doc inside the card fills the frame (no extra column margin) */
.xcard .md { max-width: none; margin: 0; padding: 0; }

/* preview surface — a calm stage the card floats on */
.xpreview {
  background: var(--code-bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
  display: flex; align-items: flex-start; justify-content: center;
  overflow: auto;
}
.xcard.shadowed { box-shadow: var(--card-shadow); }

/* export dialog shell (reuses settings-pop vocabulary, wider) */
.xdialog {
  width: 640px; max-width: 92vw;
  background: var(--surface);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-family: var(--ui-font);
  overflow: hidden;
}
.xdialog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  border-bottom: var(--hairline) solid var(--border);
}
.xdialog-head .t { font-size: var(--ui-size); font-weight: var(--fw-semibold); color: var(--text); }
.xdialog-head .sub { font-size: var(--ui-small); color: var(--text-muted); margin-left: var(--sp-2); }
/* controls row under the preview */
.xcontrols {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: var(--hairline) solid var(--border);
  flex-wrap: wrap;
}
.xcontrols .spacer { flex: 1; }
.xactions { display: flex; align-items: center; gap: var(--sp-2); }
/* action buttons — quiet secondary + clay primary (from control tokens) */
.btn {
  font-family: var(--ui-font); font-size: var(--ui-size); font-weight: 500;
  height: var(--ctl-h); padding: 0 var(--sp-3);
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border-radius: var(--ctl-radius); cursor: pointer;
  background: var(--bg); color: var(--text-secondary);
  border: var(--hairline) solid var(--border);
}
.btn:hover { color: var(--text); border-color: var(--text-muted); }
.btn.primary {
  background: var(--accent); color: var(--bg); border-color: transparent;
}
.btn.primary:hover { background: var(--accent-emphasis); color: var(--bg); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }