/* Copied from renderer/styles.css by tools/build-web.js — do not edit. */
/* ==========================================================================
   Markdown Eye — themes, layout, editor, reading experience
   --------------------------------------------------------------------------
   Identity: an eye that reads. The logo's pupil scans left-to-right like eyes
   moving across lines of text; that same "watchful reading" idea drives the
   reading-progress rail and the gliding table-of-contents marker.
   Eight palettes (data-theme) drawn from the reference screens:
     midnight  — near-black + lime + purple/cyan glow       (dark)
     indigo    — deep indigo + amber, faint starfield        (dark)
     emerald   — navy + emerald + teal, photo backdrop       (dark)
     village   — moonlit hills, lamplit windows, honey accent (dark)
     fairy     — forest night, fireflies, teal + gold        (dark)
     sage      — light glass panels + olive on soft grey     (light)
     coral     — warm cream + coral                          (light)
     rain      — overcast daylight, petrol teal + lantern    (light)
   data-mode (dark|light) drives syntax-highlight palettes + form controls.
   The four photographic themes (emerald, village, fairy, rain) layer a JPEG
   under gradients that stand in for it if the file is ever missing; @media
   print drops the whole backdrop, so exported PDFs stay clean.
   ========================================================================== */

/* ---- Shared tokens ------------------------------------------------------ */
:root {
  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Code", "Cascadia Mono", "JetBrains Mono", "Fira Code",
    Consolas, "SFMono-Regular", ui-monospace, monospace;

  --radius: 12px;
  --radius-sm: 7px;
  /* Reading column: 90% of the preview pane, but no wider than 1600px unless
     that cap would drop it under 80% of the pane (very wide monitors). */
  --reading-width: min(90%, max(80%, 1600px));

  --topbar-h: 54px;
  --statusbar-h: 30px;
  --sidebar-w: 288px;

  --transition: 160ms ease;

  --eye-glint: #ffffff;
}

/* ==========================================================================
   THEMES
   ========================================================================== */

/* Midnight Neon — from the JifPay screen: near-black, a bright lime accent,
   and a purple→cyan gradient glow. */
body[data-theme="midnight"] {
  --bg: #0a0b0d;
  --surface: #131519;
  --surface-2: #1b1e24;
  --code-bg: #0e1013;
  --border: #262a31;
  --border-soft: #1c2026;
  --text: #e9edf2;
  --text-strong: #ffffff;
  --muted: #9aa3ad;
  --muted-2: #747d88;
  --accent: #c6f432;
  --accent-strong: #d6ff5a;
  --accent-pressed: #a9d61f;
  --accent-soft: rgba(198, 244, 50, 0.14);
  --accent-line: rgba(198, 244, 50, 0.42);
  --accent-ink: #10140a;
  --accent-2: #22d3ee;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  --selection: rgba(198, 244, 50, 0.28);
  --panel: rgba(14, 16, 20, 0.72);
  --panel-strong: rgba(10, 12, 15, 0.86);
  --reading-bg: rgba(13, 15, 19, 0.86);
  --reading-border: #22262d;
  --reading-shadow: var(--shadow);
  --editor-bg: rgba(12, 14, 18, 0.6);
  --toolbar-bg: rgba(12, 14, 18, 0.72);
  --eye-pupil: #07090c;
  --eye-lens-fill: rgba(255, 255, 255, 0.05);
  --backdrop: radial-gradient(80% 60% at 88% 4%, rgba(123, 47, 247, 0.36), transparent 60%),
    radial-gradient(66% 60% at 98% 30%, rgba(34, 211, 238, 0.26), transparent 60%),
    radial-gradient(60% 55% at 0% 100%, rgba(198, 244, 50, 0.1), transparent 60%),
    linear-gradient(160deg, #0c0e12, #08090c 62%, #050608);
  --scrim: linear-gradient(180deg, rgba(6, 7, 9, 0.28), rgba(6, 7, 9, 0.52));
}

/* Indigo Amber — from the LitMart site: deep indigo night, warm amber accent,
   a faint starfield. */
body[data-theme="indigo"] {
  --bg: #12152e;
  --surface: #1b1f42;
  --surface-2: #242a54;
  --code-bg: #141833;
  --border: #2c3468;
  --border-soft: #222850;
  --text: #e7e9fb;
  --text-strong: #ffffff;
  --muted: #a6abd6;
  --muted-2: #7c81a5;
  --accent: #f5883f;
  --accent-strong: #ff9c57;
  --accent-pressed: #e0752b;
  --accent-soft: rgba(245, 136, 63, 0.15);
  --accent-line: rgba(245, 136, 63, 0.42);
  --accent-ink: #1a1200;
  --accent-2: #ffb37a;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  --selection: rgba(245, 136, 63, 0.28);
  --panel: rgba(20, 24, 52, 0.74);
  --panel-strong: rgba(16, 19, 42, 0.88);
  --reading-bg: rgba(20, 24, 54, 0.85);
  --reading-border: #2c3468;
  --reading-shadow: var(--shadow);
  --editor-bg: rgba(18, 22, 48, 0.6);
  --toolbar-bg: rgba(18, 22, 48, 0.74);
  --eye-pupil: #0d1024;
  --eye-lens-fill: rgba(255, 255, 255, 0.06);
  --backdrop: radial-gradient(rgba(255, 255, 255, 0.5) 0.7px, transparent 0.8px) 0 0 / 46px 46px,
    radial-gradient(rgba(255, 255, 255, 0.32) 0.6px, transparent 0.7px) 23px 23px / 46px 46px,
    radial-gradient(92% 70% at 82% 0%, rgba(88, 101, 242, 0.4), transparent 60%),
    radial-gradient(70% 60% at 8% 100%, rgba(245, 136, 63, 0.14), transparent 60%),
    linear-gradient(160deg, #171b3d, #12152e 60%, #0d1024);
  --scrim: linear-gradient(180deg, rgba(10, 12, 30, 0.22), rgba(10, 12, 30, 0.48));
}

/* Navy Emerald — the previous identity, kept: navy field, emerald + teal, with
   the reference photo (assets/backdrop.jpg) as a fixed backdrop. */
body[data-theme="emerald"] {
  --bg: #05101d;
  --surface: #0c1c2b;
  --surface-2: #12293a;
  --code-bg: #071624;
  --border: #1b3446;
  --border-soft: #142838;
  --text: #e6edf3;
  --text-strong: #f4f9fc;
  --muted: #8ba1b3;
  --muted-2: #6c8394;
  --accent: #2ebd7c;
  --accent-strong: #4dd89b;
  --accent-pressed: #1f9d6a;
  --accent-soft: rgba(46, 189, 124, 0.15);
  --accent-line: rgba(46, 189, 124, 0.4);
  --accent-ink: #04120a;
  --accent-2: #1d5b51;
  --shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  --selection: rgba(46, 189, 124, 0.3);
  --panel: rgba(9, 20, 32, 0.72);
  --panel-strong: rgba(8, 18, 28, 0.85);
  --reading-bg: rgba(6, 14, 24, 0.88);
  --reading-border: #1b3446;
  --reading-shadow: var(--shadow);
  --editor-bg: rgba(7, 18, 30, 0.6);
  --toolbar-bg: rgba(7, 18, 30, 0.72);
  --eye-pupil: #041018;
  --eye-lens-fill: rgba(255, 255, 255, 0.05);
  --backdrop: url("./assets/backdrop.jpg") center center / cover no-repeat,
    radial-gradient(120% 85% at 0% 12%, rgba(47, 173, 111, 0.55), transparent 46%),
    radial-gradient(95% 95% at 6% 92%, rgba(29, 91, 81, 0.5), transparent 52%),
    linear-gradient(135deg, #071a2a, #05101d 58%, #02060e);
  --scrim: linear-gradient(135deg, rgba(4, 11, 20, 0.5), rgba(4, 11, 20, 0.8));
}

/* Sage Light — from the AgricAI dashboard: soft grey daylight, glassy white
   panels, an olive/sage accent, a faint dotted texture. */
body[data-theme="sage"] {
  --bg: #e8e9e4;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(255, 255, 255, 0.5);
  --code-bg: #f3f4ee;
  --border: rgba(60, 70, 45, 0.16);
  --border-soft: rgba(60, 70, 45, 0.1);
  --text: #26301f;
  --text-strong: #171e12;
  --muted: #5c6a4e;
  --muted-2: #6b7460;
  --accent: #6f9724;
  --accent-strong: #5f8320;
  --accent-pressed: #517019;
  --accent-soft: rgba(111, 151, 36, 0.16);
  --accent-line: rgba(111, 151, 36, 0.4);
  /* Dark ink on a mid-tone fill, like every other theme here — white on this
     olive only reaches 3.4:1. */
  --accent-ink: #131c04;
  --accent-2: #a3c644;
  /* The olive accent is a fill colour; at body text size it needs a darker
     relative of itself to clear 4.5:1 on the reading surface. */
  --accent-text: #4e6b16;
  --accent-text-strong: #3d5411;
  --accent-text-line: rgba(78, 107, 22, 0.45);
  --shadow: 0 12px 30px rgba(40, 50, 30, 0.12);
  --selection: rgba(111, 151, 36, 0.22);
  --panel: rgba(255, 255, 255, 0.72);
  --panel-strong: rgba(255, 255, 255, 0.82);
  --reading-bg: rgba(255, 255, 255, 0.9);
  --reading-border: rgba(60, 70, 45, 0.14);
  --reading-shadow: 0 10px 30px rgba(40, 50, 30, 0.1);
  --editor-bg: rgba(255, 255, 255, 0.62);
  --toolbar-bg: rgba(255, 255, 255, 0.74);
  --eye-pupil: #1c2411;
  --eye-lens-fill: rgba(255, 255, 255, 0.55);
  --backdrop: radial-gradient(rgba(60, 70, 45, 0.06) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(80% 60% at 92% 4%, rgba(163, 198, 68, 0.18), transparent 60%),
    linear-gradient(160deg, #eeefe9, #e6e7e1);
  --scrim: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}

/* Coral Cream — from the Book Store page: warm cream, a friendly coral accent,
   bold headings. */
body[data-theme="coral"] {
  --bg: #fce8db;
  --surface: #fff7f1;
  --surface-2: #ffeee4;
  --code-bg: #fff3ec;
  --border: #f1cdbb;
  --border-soft: #f6ddd0;
  --text: #3a2a24;
  --text-strong: #241713;
  --muted: #8a6c5f;
  --muted-2: #836c5e;
  --accent: #e8635c;
  --accent-strong: #d94f48;
  --accent-pressed: #c53f38;
  --accent-soft: rgba(232, 99, 92, 0.13);
  --accent-line: rgba(232, 99, 92, 0.4);
  /* As in sage: a near-white label on this coral is only 3.1:1. */
  --accent-ink: #2b0f0c;
  --accent-2: #f39a8f;
  /* Same story as sage: the coral reads beautifully as a fill and too faintly
     as text, so text-coloured accents get a deeper version of it. */
  --accent-text: #c0392f;
  --accent-text-strong: #9e2c24;
  --accent-text-line: rgba(192, 57, 47, 0.45);
  --shadow: 0 12px 30px rgba(150, 80, 60, 0.14);
  --selection: rgba(232, 99, 92, 0.2);
  --panel: #fff7f1;
  --panel-strong: #fff7f1;
  --reading-bg: #fffaf6;
  --reading-border: #f3d6c8;
  --reading-shadow: 0 10px 30px rgba(150, 80, 60, 0.1);
  --editor-bg: #fffaf6;
  --toolbar-bg: #fff2ea;
  --eye-pupil: #2a1712;
  --eye-lens-fill: rgba(255, 255, 255, 0.7);
  --backdrop: radial-gradient(70% 60% at 88% 2%, rgba(232, 99, 92, 0.1), transparent 60%),
    linear-gradient(160deg, #fdeadf, #fce8db);
  --scrim: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
}

/* Village Night — moonlit hills with a handful of lamplit windows. Honey
   lamplight for the accent, moonlight blue for the secondary. */
body[data-theme="village"] {
  --bg: #0b1220;
  --surface: #141d33;
  --surface-2: #1c2740;
  --code-bg: #0d1526;
  --border: #26334f;
  --border-soft: #1b2438;
  --text: #e8edf7;
  --text-strong: #ffffff;
  --muted: #a3b0c9;
  --muted-2: #7683a0;
  --accent: #f0b559;
  --accent-strong: #ffc978;
  --accent-pressed: #d69a41;
  --accent-soft: rgba(240, 181, 89, 0.15);
  --accent-line: rgba(240, 181, 89, 0.42);
  --accent-ink: #1a1204;
  --accent-2: #9dc6f2;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.56);
  --selection: rgba(240, 181, 89, 0.26);
  --panel: rgba(12, 19, 34, 0.78);
  --panel-strong: rgba(9, 15, 27, 0.9);
  /* Near-opaque: the photo behind it must never show through under text. */
  --reading-bg: rgba(10, 16, 29, 0.95);
  --reading-border: #26334f;
  --reading-shadow: 0 20px 52px rgba(0, 0, 0, 0.6);
  --editor-bg: rgba(11, 18, 32, 0.72);
  --toolbar-bg: rgba(11, 18, 32, 0.8);
  --eye-pupil: #070d18;
  --eye-lens-fill: rgba(255, 255, 255, 0.06);
  --backdrop: url("./assets/backdrop-village.jpg") center center / cover no-repeat,
    radial-gradient(70% 55% at 18% 12%, rgba(157, 198, 242, 0.3), transparent 62%),
    radial-gradient(80% 60% at 78% 96%, rgba(240, 181, 89, 0.16), transparent 60%),
    linear-gradient(170deg, #101a2e, #0b1220 58%, #060a13);
  --scrim: linear-gradient(180deg, rgba(6, 10, 20, 0.4), rgba(6, 10, 20, 0.72));
}

/* Fairy Night — a forest clearing full of fireflies: deep teal shade, gold
   light. The gold is the accent, the teal-green its counterpoint. */
body[data-theme="fairy"] {
  --bg: #08181a;
  --surface: #0f2528;
  --surface-2: #163235;
  --code-bg: #0a1d1f;
  --border: #1e3f42;
  --border-soft: #163033;
  --text: #e6f2ef;
  --text-strong: #ffffff;
  --muted: #9fc0ba;
  --muted-2: #6a8a86;
  --accent: #f5b942;
  --accent-strong: #ffcd63;
  --accent-pressed: #d99e2d;
  --accent-soft: rgba(245, 185, 66, 0.15);
  --accent-line: rgba(245, 185, 66, 0.42);
  --accent-ink: #1b1304;
  --accent-2: #57d6c0;
  --shadow: 0 18px 46px rgba(0, 0, 0, 0.58);
  --selection: rgba(87, 214, 192, 0.26);
  --panel: rgba(9, 26, 28, 0.78);
  --panel-strong: rgba(6, 20, 22, 0.9);
  --reading-bg: rgba(7, 21, 23, 0.95);
  --reading-border: #1e3f42;
  --reading-shadow: 0 20px 52px rgba(0, 0, 0, 0.62);
  --editor-bg: rgba(8, 23, 25, 0.72);
  --toolbar-bg: rgba(8, 23, 25, 0.8);
  --eye-pupil: #051214;
  --eye-lens-fill: rgba(255, 255, 255, 0.06);
  --backdrop: url("./assets/backdrop-fairy.jpg") center center / cover no-repeat,
    radial-gradient(65% 50% at 38% 6%, rgba(87, 214, 192, 0.22), transparent 62%),
    radial-gradient(75% 60% at 56% 92%, rgba(245, 185, 66, 0.2), transparent 58%),
    linear-gradient(170deg, #0b2124, #08181a 56%, #040f10);
  --scrim: linear-gradient(180deg, rgba(4, 12, 13, 0.42), rgba(4, 12, 13, 0.74));
}

/* Rainy Day — overcast daylight through rain. Cool grey paper, petrol-teal
   accent, and the one warm note from the lantern in the backdrop. */
body[data-theme="rain"] {
  --bg: #dfe6e9;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-2: rgba(255, 255, 255, 0.58);
  --code-bg: #eef3f5;
  --border: rgba(30, 55, 65, 0.16);
  --border-soft: rgba(30, 55, 65, 0.1);
  --text: #1d2a31;
  --text-strong: #101a20;
  --muted: #4e626c;
  --muted-2: #62747e;
  --accent: #12707f;
  --accent-strong: #0d5c69;
  --accent-pressed: #094a55;
  --accent-soft: rgba(18, 112, 127, 0.14);
  --accent-line: rgba(18, 112, 127, 0.4);
  --accent-ink: #ffffff;
  --accent-2: #d9911f;
  --shadow: 0 14px 34px rgba(25, 45, 55, 0.16);
  --selection: rgba(18, 112, 127, 0.2);
  --panel: rgba(255, 255, 255, 0.8);
  --panel-strong: rgba(255, 255, 255, 0.9);
  --reading-bg: rgba(252, 254, 255, 0.95);
  --reading-border: rgba(30, 55, 65, 0.14);
  --reading-shadow: 0 14px 36px rgba(25, 45, 55, 0.14);
  --editor-bg: rgba(255, 255, 255, 0.72);
  --toolbar-bg: rgba(255, 255, 255, 0.82);
  --eye-pupil: #12262c;
  --eye-lens-fill: rgba(255, 255, 255, 0.6);
  --backdrop: url("./assets/backdrop-rain.jpg") center center / cover no-repeat,
    radial-gradient(70% 55% at 84% 66%, rgba(217, 145, 31, 0.14), transparent 60%),
    linear-gradient(170deg, #e9eef0, #dfe6e9 62%, #cfd9dd);
  /* Light theme, so the scrim lifts the grey photo instead of darkening it. */
  --scrim: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.14));
}

body[data-mode="dark"] {
  color-scheme: dark;
}
body[data-mode="light"] {
  color-scheme: light;
}

/* ==========================================================================
   Base / reset
   ========================================================================== */
* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  /* A flex column pins the topbar and status bar and gives the middle region
     all remaining height. This is more robust than a calc() height (which
     breaks if the topbar ever wraps taller on a small screen). */
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Backdrop + scrim, both themed. Sits behind everything, fixed to the viewport
   so content scrolls over it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background: var(--backdrop);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--scrim);
}

::selection {
  background: var(--selection);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted-2);
  background-clip: padding-box;
}

/* ==========================================================================
   Logo — Markdown badge + reading-scan eye (the signature)
   ========================================================================== */
.logo {
  color: var(--text-strong);
  flex: none;
  display: block;
}
.eye-iris {
  fill: var(--accent);
}
.eye-pupil {
  fill: var(--eye-pupil);
}
.eye-glint {
  fill: var(--eye-glint);
  opacity: 0.9;
}
.eye-lens {
  fill: var(--eye-lens-fill);
}

/* The pupil+iris drift across the eye in reading saccades: quick jumps between
   fixations, then a fast sweep back — like eyes moving along a line of text. */
.eye-gaze {
  transform-box: fill-box;
  transform-origin: center;
  animation: eye-scan 3.4s ease-in-out infinite;
}
.eye-shell {
  transform-box: fill-box;
  transform-origin: center;
  animation: eye-blink 3.4s ease-in-out infinite;
}
@keyframes eye-scan {
  0%,
  16% {
    transform: translateX(-22%);
  }
  20%,
  40% {
    transform: translateX(-8%);
  }
  44%,
  62% {
    transform: translateX(8%);
  }
  66%,
  86% {
    transform: translateX(22%);
  }
  100% {
    transform: translateX(-22%);
  }
}
@keyframes eye-blink {
  0%,
  88%,
  100% {
    transform: scaleY(1);
  }
  92% {
    transform: scaleY(0.12);
  }
  96% {
    transform: scaleY(1);
  }
}
.logo-lg {
  width: 132px;
  height: auto;
  margin: 0 auto 20px;
}

/* ==========================================================================
   Reading-progress rail
   ========================================================================== */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 30;
  background: transparent;
  pointer-events: none;
}
.progress .progress-fill {
  display: block;
  height: 100%;
  width: 0;
  /* Trailing end carries each theme's second accent, leading end the primary —
     so the edge nearest the percentage badge stays the strongest colour. No text
     sits on this rail: the badge below has its own background. */
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 8px var(--accent-line);
  transition: width 80ms linear;
}
/* Percentage badge that rides the leading edge of the fill. It fades in while
   scrolling so it never permanently sits on top of the topbar controls. */
.progress .progress-pct {
  position: absolute;
  top: 7px;
  left: 0;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--accent-ink, #06070a);
  background: var(--accent);
  border: 1px solid var(--accent-strong);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 220ms ease, left 80ms linear;
}
.progress[data-active="true"] .progress-pct {
  opacity: 1;
}

/* ==========================================================================
   Topbar
   ========================================================================== */
.topbar {
  height: var(--topbar-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px 0 10px;
  background: var(--panel-strong);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  backdrop-filter: saturate(1.3) blur(10px);
  position: relative;
  z-index: 20;
}
.topbar-left,
.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 2px;
}
.brand-name {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-strong);
  font-size: 15px;
  white-space: nowrap;
}
.brand-em {
  color: var(--accent);
  margin-left: 3px;
}
.filename {
  color: var(--muted);
  font-size: 13px;
  padding-left: 12px;
  margin-left: 4px;
  border-left: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 30vw;
}
body[data-empty="true"] .filename {
  display: none;
}
.filename.dirty::after {
  content: " \25CF";
  color: var(--accent);
  font-size: 10px;
  vertical-align: middle;
}

/* Buttons */
.btn,
.icon-btn {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background var(--transition), border-color var(--transition),
    color var(--transition);
}
.btn {
  padding: 6px 12px;
  border-color: var(--border);
  background: var(--surface-2);
  font-weight: 550;
}
.icon-btn {
  padding: 7px;
  color: var(--muted);
}
.btn:hover {
  border-color: var(--accent-line);
  color: var(--text-strong);
}
.icon-btn:hover {
  background: var(--surface-2);
  color: var(--text-strong);
}
.btn:active,
.icon-btn:active {
  transform: translateY(1px);
}
.btn-accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
.btn-accent:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--accent-ink);
}
/* Colour feedback on press, not just the 1px nudge above — the primary button is
   the one users hit most, and --accent-pressed exists in every theme for it. */
.btn-accent:active {
  background: var(--accent-pressed);
  border-color: var(--accent-pressed);
}

/* Segmented View / Split / Edit control */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.seg-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 550;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition), color var(--transition);
}
.seg-btn:hover {
  color: var(--text-strong);
}
.seg-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.seg-btn svg {
  opacity: 0.9;
}

/* Theme popover */
.theme-wrap {
  position: relative;
}
.theme-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: 248px;
  padding: 6px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Eight entries no longer fit a short window, so the list scrolls. */
  max-height: min(72vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.theme-menu[hidden] {
  display: none;
}
.theme-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-group + .theme-group {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-soft);
}
.theme-group-label {
  padding: 2px 9px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
}
.theme-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  font-family: inherit;
  width: 100%;
}
.theme-opt:hover {
  background: var(--surface-2);
}
.theme-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.theme-opt[aria-checked="true"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.theme-opt .sw {
  width: 34px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(128, 128, 128, 0.3);
  flex: none;
}
.theme-opt-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.theme-opt-txt b {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-strong);
}
.theme-opt-txt small {
  font-size: 11px;
  color: var(--muted);
}

/* ==========================================================================
   Find bar
   ========================================================================== */
.findbar {
  position: fixed;
  top: calc(var(--topbar-h) + 8px);
  right: 14px;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--muted);
}
.findbar[hidden] {
  display: none;
}
#find-input {
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 9px;
  width: 210px;
  outline: none;
}
#find-input:focus {
  border-color: var(--accent-line);
}
.find-count {
  font-size: 12px;
  color: var(--muted-2);
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.find-btn {
  padding: 5px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
}
.find-btn:hover {
  color: var(--text-strong);
  background: var(--surface-2);
}

/* ==========================================================================
   Layout · sidebar · workspace
   ========================================================================== */
.layout {
  flex: 1 1 auto;
  min-height: 0; /* let the grid shrink so the scroller (not the layout) scrolls */
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  transition: grid-template-columns var(--transition);
}
body[data-sidebar="closed"] .layout {
  grid-template-columns: 0 1fr;
}

.sidebar {
  background: var(--panel-strong);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-right: 1px solid var(--border);
  overflow: auto;
  overflow-x: hidden;
  padding: 16px 10px 40px;
  min-width: 0;
  transition: opacity var(--transition), padding var(--transition),
    border-right-width var(--transition);
}
/* The grid track goes to 0, but padding and the border don't collapse with it —
   without zeroing them a ~21px strip stays behind and the reading column never
   gets the space back. */
body[data-sidebar="closed"] .sidebar {
  opacity: 0;
  pointer-events: none;
  padding-left: 0;
  padding-right: 0;
  border-right-width: 0;
}
.sidebar-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-2);
  padding: 6px 12px 10px;
}
.toc {
  display: flex;
  flex-direction: column;
  position: relative;
}
.toc::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
}
.toc-link {
  position: relative;
  display: block;
  padding: 5px 10px 5px 24px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
  border-radius: 6px;
  white-space: normal;
  transition: color var(--transition), background var(--transition);
}
.toc-link::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%) scaleY(0.3);
  width: 6px;
  height: 18px;
  border-radius: 3px;
  background: var(--accent);
  opacity: 0;
  transition: opacity var(--transition), transform var(--transition);
}
.toc-l1 {
  font-weight: 600;
  color: var(--text);
}
.toc-l2 {
  padding-left: 34px;
}
.toc-l3 {
  padding-left: 46px;
  font-size: 13px;
}
.toc-link:hover {
  color: var(--text-strong);
  background: var(--surface-2);
}
.toc-link.active {
  color: var(--accent-text, var(--accent));
  font-weight: 600;
}
.toc-link.active::before {
  opacity: 1;
  transform: translateY(-50%) scaleY(1);
}
.toc-empty {
  display: none;
  color: var(--muted-2);
  font-size: 13px;
  padding: 8px 12px;
}

/* Workspace holds the editor pane and the preview scroller. The explicit
   single row of minmax(0,1fr) is the key fix: it caps the row at the
   workspace height so a long document scrolls *inside* #scroller instead of
   stretching the row (which used to push content over the status bar). */
.workspace {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}
body[data-view="split"] .workspace {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
body[data-view="view"] #editor-pane {
  display: none;
}
body[data-view="edit"] #scroller {
  display: none;
}

/* ---- Editor pane -------------------------------------------------------- */
.editor-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  border-right: 1px solid var(--border);
  background: var(--editor-bg);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
body[data-view="edit"] .editor-pane {
  border-right: 0;
}
.toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px 10px;
  background: var(--toolbar-bg);
  border-bottom: 1px solid var(--border);
}
.tool-group {
  display: inline-flex;
  gap: 2px;
}
.tool-sep {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 4px;
}
.tool {
  font-family: inherit;
  font-size: 13px;
  min-width: 30px;
  height: 28px;
  padding: 0 8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tool:hover {
  color: var(--text-strong);
  background: var(--surface-2);
  border-color: var(--border);
}
.tool:active {
  transform: translateY(1px);
}
.tool b {
  font-weight: 800;
}
.editor {
  flex: 1;
  min-height: 0;
  width: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1.75;
  padding: 22px 26px 80px;
  tab-size: 2;
}
.editor::placeholder {
  color: var(--muted-2);
}

/* ---- Preview scroller --------------------------------------------------- */
.scroller {
  height: 100%;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  outline: none;
  background: transparent;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.markdown {
  max-width: var(--reading-width);
  margin: 26px auto 40px;
  padding: 40px 44px 90px;
  background: var(--reading-bg);
  border: 1px solid var(--reading-border);
  border-radius: var(--radius);
  box-shadow: var(--reading-shadow);
  color: var(--text);
}
body[data-view="split"] .markdown {
  margin: 18px 20px 32px;
  padding: 30px 30px 70px;
  max-width: none;
}
body[data-empty="true"] .markdown {
  display: none;
}
.markdown > *:first-child {
  margin-top: 0;
}

/* ==========================================================================
   PDF reading — same column, same chrome as the Markdown pane
   ==========================================================================
   Pages are canvases stacked in the shared #scroller, each with a pdf.js text
   layer on top (transparent, selectable, findable) and a link layer above it.
   Everything is sized in CSS pixels from the page viewport, so re-scaling on
   zoom or resize only touches width/height + --scale-factor. */
.pdfview {
  display: none;
  max-width: var(--reading-width);
  margin: 26px auto 40px;
}
body[data-doc="pdf"] .pdfview {
  display: block;
}
body[data-doc="pdf"][data-empty="true"] .pdfview {
  display: none;
}
body[data-doc="pdf"] .markdown {
  display: none;
}
/* Zoomed-in pages are wider than the reading column, so allow the scroller to
   pan sideways in PDF mode only (Markdown never scrolls horizontally). */
body[data-doc="pdf"] .scroller {
  overflow-x: auto;
}
body[data-doc="md"] .pdf-only,
body[data-doc="pdf"] .md-only {
  display: none;
}
/* PDFs are read-only: Save would have nothing to write. Save As (Ctrl+Shift+S)
   still works and copies the file, so only the Save button goes away. */
body[data-doc="pdf"] #btn-save {
  display: none;
}

.pdf-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* Grow to the widest page so a zoomed-in page overflows to the right only —
     centring inside a too-narrow box would put its left edge out of reach. */
  width: max-content;
  min-width: 100%;
  margin-inline: auto;
  /* A reload replaces every page box; scroll anchoring would try to compensate
     for content it can no longer find and drag the offset around. The reload
     restores the position itself (see holdPdfHeight/restorePdfPosition). */
  overflow-anchor: none;
}
.pdf-page {
  /* content-box so the inline width/height are exactly the viewport size and
     the canvas, text layer and link layer all share one coordinate space. */
  box-sizing: content-box;
  position: relative;
  flex: none;
  overflow: hidden;
  background: var(--pdf-page-bg, #ffffff);
  border: 1px solid var(--reading-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--reading-shadow);
}
/* Placeholder wash that fades out once the page has been painted. */
.pdf-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: var(--surface-2);
  transition: opacity 220ms ease;
}
.pdf-page.is-rendered::before {
  opacity: 0;
}
.pdf-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.pdf-page.is-error::after {
  content: "This page could not be drawn.";
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  font-size: 13px;
  color: var(--muted);
  background: var(--surface-2);
}

/* pdf.js text layer contract: absolutely-positioned transparent spans placed
   in percentages, sized with calc(var(--scale-factor) * Npx). */
.pdf-textlayer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: clip;
  opacity: 1;
  line-height: 1;
  text-align: initial;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  caret-color: CanvasText;
}
.pdf-textlayer span,
.pdf-textlayer br {
  position: absolute;
  color: transparent;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}
.pdf-textlayer span.markedContent {
  top: 0;
  height: 0;
}
.pdf-textlayer ::selection {
  background: var(--selection);
}
/* Find hits ride under the glyphs painted on the canvas, so they must be
   background-only — the highlighted text itself stays transparent. */
.pdf-textlayer mark.find-hit {
  color: transparent;
  background: var(--accent-soft);
  border-radius: 2px;
  box-shadow: 0 0 0 1px var(--accent-soft);
}
.pdf-textlayer mark.find-hit.current {
  color: transparent;
  background: var(--accent);
  opacity: 0.45;
  box-shadow: 0 0 0 2px var(--accent);
}

.pdf-link {
  position: absolute;
  z-index: 3;
  display: block;
  border-radius: 3px;
  background: transparent;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.pdf-link:hover {
  background: var(--accent-soft);
  box-shadow: 0 0 0 1px var(--accent);
}

/* Night tint: invert the page so a white PDF stops glaring in a dark theme.
   Only offered (and only applied) in the dark themes. */
body[data-mode="dark"][data-pdf-tint="on"] {
  --pdf-page-bg: #10131a;
}
body[data-mode="dark"][data-pdf-tint="on"] .pdf-canvas {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(1.06);
}
body[data-mode="light"] #pdf-tint {
  display: none;
}
.seg-btn.seg-num {
  min-width: 62px;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Password prompt for encrypted PDFs (reuses the code-modal backdrop). */
.pass-card {
  width: min(420px, 92vw);
  height: auto;
  max-height: 100%;
}
.pass-body {
  padding: 18px 20px 20px;
}
.pass-body p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.pass-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 12px;
  color: var(--text-strong);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.pass-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.pass-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
}

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty {
  display: none;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
body[data-empty="true"] .empty {
  display: flex;
}
.empty-card {
  text-align: center;
  max-width: 470px;
  padding: 44px 38px;
  border-radius: 18px;
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.empty-card h1 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-strong);
  margin: 0 0 10px;
}
.empty-card p {
  color: var(--muted);
  margin: 0 auto 22px;
  line-height: 1.6;
}
.empty-card code {
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--accent-text, var(--accent));
}
.empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 16px;
}
.empty-hint {
  font-size: 13px;
  color: var(--muted-2);
}
.empty-hint kbd {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--text);
}

/* ==========================================================================
   Drag & drop
   ========================================================================== */
.dropzone {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.dropzone.active {
  display: flex;
}
.dropzone-inner {
  border: 2px dashed var(--accent);
  border-radius: 16px;
  padding: 40px 64px;
  font-size: 18px;
  font-weight: 650;
  color: var(--accent);
  background: var(--accent-soft);
}

/* ==========================================================================
   Status bar
   ========================================================================== */
.statusbar {
  height: var(--statusbar-h);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  font-size: 12px;
  color: var(--muted);
  background: var(--panel-strong);
  border-top: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  position: relative;
  z-index: 15;
}
.status-left,
.status-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-left .dot {
  color: var(--muted-2);
}
.stat-dirty {
  color: var(--accent-text, var(--accent));
  font-weight: 600;
}
.stat-dirty[hidden] {
  display: none;
}
.stat-theme {
  color: var(--muted-2);
}

/* ==========================================================================
   Toast
   ========================================================================== */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--statusbar-h) + 16px);
  transform: translate(-50%, 20px);
  background: var(--panel-strong);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 11px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  max-width: 80vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 40;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ==========================================================================
   Markdown typography
   ========================================================================== */
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  color: var(--text-strong);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.02em;
  scroll-margin-top: 24px;
  position: relative;
}
.markdown h1 {
  font-size: 2rem;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.markdown h2 {
  font-size: 1.5rem;
  margin: 44px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.markdown h3 {
  font-size: 1.22rem;
  margin: 32px 0 12px;
}
.markdown h4 {
  font-size: 1.05rem;
  margin: 26px 0 10px;
}
.markdown h5,
.markdown h6 {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 22px 0 8px;
}
.heading-anchor {
  position: absolute;
  left: -1.1em;
  top: 0;
  color: var(--accent-text, var(--accent));
  text-decoration: none;
  opacity: 0;
  padding-right: 0.3em;
  font-weight: 600;
  transition: opacity var(--transition);
}
.markdown h1:hover .heading-anchor,
.markdown h2:hover .heading-anchor,
.markdown h3:hover .heading-anchor {
  opacity: 0.7;
}
.markdown p {
  margin: 0 0 16px;
}
/* Anything accent-coloured that is *text* goes through --accent-text, which
   defaults to the accent and is overridden only by themes whose accent is too
   light to read at body size (see sage, coral). Fills, borders and glows keep
   using --accent directly. */
.markdown a {
  color: var(--accent-text, var(--accent));
  text-decoration: none;
  border-bottom: 1px solid var(--accent-text-line, var(--accent-line));
  transition: border-color var(--transition), color var(--transition);
}
.markdown a:hover {
  color: var(--accent-text-strong, var(--accent-strong));
  border-bottom-color: var(--accent-text-strong, var(--accent-strong));
}
.markdown strong {
  color: var(--text-strong);
  font-weight: 700;
}
.markdown em {
  font-style: italic;
}
.markdown del {
  color: var(--muted);
}
.markdown mark {
  background: var(--accent-soft);
  color: inherit;
  padding: 0 2px;
  border-radius: 3px;
}
.markdown sup,
.markdown sub {
  font-size: 0.75em;
}

/* Lists */
.markdown ul,
.markdown ol {
  margin: 0 0 16px;
  padding-left: 1.5em;
}
.markdown li {
  margin: 6px 0;
}
.markdown li::marker {
  color: var(--muted-2);
}
.markdown ul ul,
.markdown ul ol,
.markdown ol ul,
.markdown ol ol {
  margin: 6px 0;
}
.markdown li.task-item {
  list-style: none;
  margin-left: -1.35em;
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.markdown li.task-item input[type="checkbox"] {
  margin-top: 5px;
  accent-color: var(--accent);
  width: 15px;
  height: 15px;
}

/* Blockquote */
.markdown blockquote {
  margin: 0 0 16px;
  padding: 4px 18px;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 0 8px 8px 0;
  color: var(--text);
}
.markdown blockquote p:last-child {
  margin-bottom: 0;
}

/* Horizontal rule */
.markdown hr {
  border: none;
  height: 1px;
  background: var(--border);
  margin: 32px 0;
}

/* Inline code */
.markdown :not(pre) > code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--surface-2);
  color: var(--accent-text, var(--accent));
  padding: 2px 6px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  word-break: break-word;
}

/* Code blocks. Each highlighted block is wrapped in .code-block so the copy /
   maximize tools stay pinned while <pre> scrolls horizontally. */
.markdown .code-block {
  position: relative;
  margin: 0 0 18px;
}
.markdown .code-block > pre {
  margin: 0;
  /* Reserve the header strip so the tools never cover the first line. */
  padding-top: 38px;
}
.markdown .code-lang {
  position: absolute;
  top: 13px;
  left: 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-2);
  pointer-events: none;
}
.markdown pre {
  position: relative;
  margin: 0 0 18px;
  padding: 16px 18px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: auto;
  line-height: 1.55;
}
.markdown pre code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  white-space: pre;
}
.code-tools {
  position: absolute;
  top: 8px;
  right: 9px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  transition: opacity var(--transition);
}
.markdown .code-block:hover .code-tools,
.markdown .code-block:focus-within .code-tools {
  opacity: 1;
}
/* Blocks that actually overflow keep their tools faintly visible so the
   maximize affordance is discoverable without hunting for it. */
.markdown .code-block.is-overflowing .code-tools {
  opacity: 0.75;
}
.copy-btn,
.zoom-btn {
  font-family: var(--font-ui);
  font-size: 11.5px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color var(--transition), border-color var(--transition),
    background var(--transition);
}
.copy-btn:hover,
.zoom-btn:hover {
  color: var(--text-strong);
  border-color: var(--accent-line);
}
.copy-btn:focus-visible,
.zoom-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.copy-btn.copied {
  color: var(--accent);
  border-color: var(--accent-line);
}
.zoom-btn svg {
  flex: none;
}
/* Keep the button compact by default; blocks that actually overflow spell the
   action out so the affordance is obvious exactly where it's needed. */
.markdown .zoom-btn span {
  display: none;
}
.markdown .code-block.is-overflowing .zoom-btn span {
  display: inline;
}

/* ---- Maximized code viewer --------------------------------------------- */
.code-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vh 3vw;
  background: rgba(0, 0, 0, 0.62);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.code-modal[hidden] {
  display: none;
}
.code-modal-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  max-height: 100%;
  min-height: 0;
  background: var(--panel-strong);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.code-modal-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.code-modal-title {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.code-modal-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow: auto;
  background: var(--code-bg);
}
.code-modal-body pre {
  margin: 0;
  padding: 18px 20px 24px;
  background: none;
  border: none;
  border-radius: 0;
  line-height: 1.6;
}
.code-modal-body pre code {
  font-family: var(--font-mono);
  font-size: 14px;
  background: none;
  border: none;
  padding: 0;
  color: var(--text);
  white-space: pre;
}
.code-modal[data-wrap="on"] .code-modal-body pre code {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Tables */
.markdown table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 18px;
  font-size: 14.5px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.markdown thead {
  background: var(--surface-2);
}
.markdown th,
.markdown td {
  border: 1px solid var(--border);
  padding: 9px 13px;
  text-align: left;
  vertical-align: top;
}
.markdown th {
  color: var(--text-strong);
  font-weight: 650;
}
.markdown tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--surface) 55%, transparent);
}

/* Images */
.markdown img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
  margin: 8px 0 18px;
}

/* Math (KaTeX) */
.katex-block {
  margin: 0 0 18px;
  padding: 6px 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.katex-block .katex-display {
  margin: 0;
}
.katex-error-block {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: pre-wrap;
}

/* Diagrams (Mermaid) */
.mermaid-rendered {
  margin: 0 0 18px;
  display: flex;
  justify-content: center;
}
.mermaid-rendered svg {
  max-width: 100%;
  height: auto;
}

/* Find highlight */
mark.find-hit {
  background: var(--accent-soft);
  color: inherit;
  border-radius: 3px;
}
mark.find-hit.current {
  background: var(--accent);
  color: var(--accent-ink);
}

/* ==========================================================================
   Syntax highlighting (github-ish; keyed on data-mode)
   ========================================================================== */
.hljs {
  background: transparent;
  color: var(--text);
}
body[data-mode="dark"] .hljs-comment,
body[data-mode="dark"] .hljs-quote {
  color: #7d99a6;
  font-style: italic;
}
body[data-mode="dark"] .hljs-keyword,
body[data-mode="dark"] .hljs-selector-tag,
body[data-mode="dark"] .hljs-literal,
body[data-mode="dark"] .hljs-doctag,
body[data-mode="dark"] .hljs-name {
  color: #ff7b72;
}
body[data-mode="dark"] .hljs-string,
body[data-mode="dark"] .hljs-meta .hljs-string,
body[data-mode="dark"] .hljs-regexp,
body[data-mode="dark"] .hljs-addition {
  color: #56d364;
}
body[data-mode="dark"] .hljs-number,
body[data-mode="dark"] .hljs-symbol,
body[data-mode="dark"] .hljs-bullet,
body[data-mode="dark"] .hljs-link {
  color: #79c0ff;
}
body[data-mode="dark"] .hljs-title,
body[data-mode="dark"] .hljs-title.function_,
body[data-mode="dark"] .hljs-section {
  color: #d2a8ff;
}
body[data-mode="dark"] .hljs-variable,
body[data-mode="dark"] .hljs-template-variable,
body[data-mode="dark"] .hljs-attr,
body[data-mode="dark"] .hljs-attribute,
body[data-mode="dark"] .hljs-built_in,
body[data-mode="dark"] .hljs-type,
body[data-mode="dark"] .hljs-params {
  color: #ffa657;
}
body[data-mode="dark"] .hljs-meta {
  color: #8b98a5;
}
body[data-mode="dark"] .hljs-deletion {
  color: #ffa198;
}

body[data-mode="light"] .hljs-comment,
body[data-mode="light"] .hljs-quote {
  color: #6e7781;
  font-style: italic;
}
body[data-mode="light"] .hljs-keyword,
body[data-mode="light"] .hljs-selector-tag,
body[data-mode="light"] .hljs-literal,
body[data-mode="light"] .hljs-doctag,
body[data-mode="light"] .hljs-name {
  color: #cf222e;
}
body[data-mode="light"] .hljs-string,
body[data-mode="light"] .hljs-meta .hljs-string,
body[data-mode="light"] .hljs-regexp,
body[data-mode="light"] .hljs-addition {
  color: #0a3069;
}
body[data-mode="light"] .hljs-number,
body[data-mode="light"] .hljs-symbol,
body[data-mode="light"] .hljs-bullet,
body[data-mode="light"] .hljs-link {
  color: #0550ae;
}
body[data-mode="light"] .hljs-title,
body[data-mode="light"] .hljs-title.function_,
body[data-mode="light"] .hljs-section {
  color: #8250df;
}
body[data-mode="light"] .hljs-variable,
body[data-mode="light"] .hljs-template-variable,
body[data-mode="light"] .hljs-attr,
body[data-mode="light"] .hljs-attribute,
body[data-mode="light"] .hljs-built_in,
body[data-mode="light"] .hljs-type,
body[data-mode="light"] .hljs-params {
  color: #953800;
}
body[data-mode="light"] .hljs-meta {
  color: #6e7781;
}
body[data-mode="light"] .hljs-deletion {
  color: #82071e;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: 700;
}

/* ==========================================================================
   Responsive — 320px phone to wide desktop.
   ==========================================================================
   Down to 820px the layout only shrinks, and it does so mostly by trimming a
   few CSS variables so every piece scales together instead of one of them
   overflowing. Below that the grid itself changes: first the sidebar leaves it
   for an overlay, then the topbar wraps and the split panes stack. Each of
   those three blocks says why in its own header.
   ========================================================================== */

/* Roomy laptops but not desktops: pull the reading column in a touch. */
@media (max-width: 1280px) {
  :root {
    --sidebar-w: 264px;
    --reading-width: 92%;
  }
}

/* 13–14" laptops (≈1366 wide). Trim chrome height and side padding. */
@media (max-width: 1180px) {
  :root {
    --sidebar-w: 240px;
    --reading-width: 94%;
  }
  .markdown {
    padding: 34px 34px 84px;
  }
  .filename {
    max-width: 24vw;
  }
}

/* Small laptops / half-screen windows. Nudge the base font down a hair and
   let the toolbar/topbar drop their least-important labels. */
@media (max-width: 1040px) {
  :root {
    --topbar-h: 50px;
  }
  body {
    font-size: 15px;
  }
  .markdown {
    margin: 20px auto 32px;
    padding: 30px 28px 78px;
  }
  .brand {
    margin-left: 0;
  }
  .topbar {
    gap: 8px;
    padding: 0 10px 0 8px;
  }
  .topbar-left,
  .topbar-right {
    gap: 6px;
  }
}

/* Narrow windows: keep only the icons for the segmented control and the Open
   button, and hide the wordmark so the logo mark still shows. Nothing wraps. */
@media (max-width: 900px) {
  .brand-name {
    display: none;
  }
  .seg-btn span {
    display: none;
  }
  .seg-btn {
    padding: 6px 9px;
  }
  #btn-open span {
    display: none;
  }
  #btn-open {
    padding: 7px;
  }
  .filename {
    max-width: 30vw;
  }
}

/* Very narrow (rare on a laptop, e.g. a snapped window): tighten the reading
   card and let the find bar span the width so it never runs off-screen. */
@media (max-width: 720px) {
  :root {
    --sidebar-w: 210px;
  }
  .markdown {
    margin: 14px auto 28px;
    padding: 22px 18px 68px;
  }
  .findbar {
    left: 10px;
    right: 10px;
  }
  #find-input {
    flex: 1;
    width: auto;
  }
}

/* ==========================================================================
   Tablets and narrow windows — the sidebar stops paying rent.
   ==========================================================================
   A 210–240px fixed grid track costs a quarter of a tablet's width and nearly
   half a phone's. Below this width the sidebar leaves the grid and becomes an
   overlay that slides in over the reading column, so the document gets the
   full width whether the contents list is showing or not.

   The scrim is a pseudo-element on .layout rather than a real <div>: no markup
   to add, nothing to keep in sync, and a tap on it still reports .layout as
   the event target, which is all web.js needs to close the panel.
   ========================================================================== */
@media (max-width: 820px) {
  .layout {
    grid-template-columns: 1fr;
  }
  body[data-sidebar="closed"] .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    bottom: calc(var(--statusbar-h) + env(safe-area-inset-bottom, 0px));
    left: 0;
    z-index: 40;
    width: min(78vw, 300px);
    box-shadow: var(--shadow);
    transform: translateX(-100%);
    transition: transform var(--transition), opacity var(--transition);
  }
  body[data-sidebar="open"] .sidebar {
    transform: none;
  }
  /* Off the grid there is no track to collapse, so the padding and border the
     desktop rule zeroes should stay — animating them only makes the panel
     reflow while it slides. Opacity and pointer-events still earn their keep. */
  body[data-sidebar="closed"] .sidebar {
    padding-left: 10px;
    padding-right: 10px;
    border-right-width: 1px;
  }
  .layout::before {
    content: "";
    position: fixed;
    inset: var(--topbar-h) 0 var(--statusbar-h) 0;
    z-index: 39;
    background: color-mix(in srgb, var(--bg) 58%, transparent);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
  }
  body[data-sidebar="open"] .layout::before {
    opacity: 1;
    pointer-events: auto;
  }
  /* A finger is not a mouse pointer. */
  .toc-link {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

/* ==========================================================================
   Phones
   ==========================================================================
   Everything above this width is still a small desktop: one topbar row, a
   reading card with margins, a mouse. Below it the assumptions change, so this
   is where the layout rearranges rather than merely shrinking.

     · The topbar becomes two rows. Eight controls do not fit across 360px, and
       the obvious alternative — a horizontally scrolling toolbar — would clip
       the theme and help popovers, since a scroll container clips its
       absolutely-positioned children.
     · Open leaves row two for row one, worded and in the accent colour. It is
       the one control someone arriving here has to find, and as a bare 32px
       folder among five other 32px glyphs it was not findable.
     · The reading card goes full-bleed. A 1px side border and a rounded corner
       cost about 32px of measure, which is two or three words per line here.
     · The editor's font-size goes to 16px, and so does every other field a
       thumb can type into — find, and the PDF password box. Below 16px, Safari
       on iOS zooms the whole page when the field takes focus, and will not zoom
       back out.
     · Split view stacks instead of slicing: two 170px columns are not two
       panes, they are two gutters.
   ========================================================================== */
@media (max-width: 640px) {
  :root {
    /* Two 46px rows. Stated rather than left to `height: auto` so every
       calc(var(--topbar-h) …) offset elsewhere stays honest. */
    --topbar-h: 92px;
    --reading-width: 100%;
  }
  body {
    /* iOS inflates text in landscape unless told not to. And the app owns the
       viewport, so a rubber-band scroll behind it is only ever a glitch. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior: none;
  }

  /* ---- topbar: two rows ---- */
  .topbar {
    flex-wrap: wrap;
    align-content: center;
    row-gap: 0;
    padding-left: max(8px, env(safe-area-inset-left, 0px));
    padding-right: max(8px, env(safe-area-inset-right, 0px));
  }
  .topbar-left,
  .topbar-right {
    flex: 0 0 100%;
    height: 46px;
  }
  .topbar-right {
    /* Spread them out: the gaps between targets matter as much as their size. */
    justify-content: space-between;
    gap: 2px;
  }
  .filename {
    max-width: none;
    flex: 1 1 auto;
  }

  /* ---- Open moves up to row one, and becomes the primary action ----------
     Row two is already eight controls wide, so a worded Open would have to take
     its room out of the gaps between the other seven — and icon-only, which is
     what the 900px block does to it, the folder is one of six near-identical
     32px glyphs with nothing to say it is the one thing a first-time visitor
     has to press. Row one has the space: .brand-name is hidden from 900px down,
     so all it carries is the mark and the filename.

     Absolutely positioned rather than moved in the markup, so that the
     .topbar-left / .topbar-right split keeps describing the desktop toolbar and
     both builds keep the same DOM. .topbar is already position: relative for the
     popovers further down, which re-anchor to it at this width for much the same
     reason. Tab order follows the markup, so it is unchanged. */
  #btn-open {
    position: absolute;
    top: 5px; /* (46px row − 36px button) ÷ 2 */
    right: max(8px, env(safe-area-inset-right, 0px));
    min-height: 36px;
    padding: 8px 12px;
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 650;
  }
  #btn-open:hover {
    background: var(--accent-strong);
    border-color: var(--accent-strong);
    color: var(--accent-ink);
  }
  #btn-open:active {
    background: var(--accent-pressed);
    border-color: var(--accent-pressed);
  }
  /* The 900px block drops the label to buy room in a one-row toolbar. Here the
     word is the entire point of the change. */
  #btn-open span {
    display: inline;
  }
  /* Hold the button's column open so a long filename ellipsises before it gets
     there instead of sliding underneath it. */
  .topbar-left {
    padding-right: 96px;
  }

  /* ---- touch targets ---- */
  .icon-btn {
    min-width: 36px;
    min-height: 36px;
    padding: 8px;
    justify-content: center;
  }
  .seg-btn {
    min-height: 32px;
    padding: 7px 9px;
    justify-content: center;
  }
  .find-btn {
    min-width: 34px;
    min-height: 34px;
    justify-content: center;
  }
  .tool {
    min-width: 34px;
    height: 34px;
  }

  /* ---- popovers hang off the topbar, not their button ---- */
  /* With the controls spread across the row, #btn-theme sits near the middle.
     A 248px menu anchored to its right edge would run off the left of the
     screen, so the popovers anchor to .topbar (already position: relative)
     and open from the screen's right edge instead. */
  .theme-wrap {
    position: static;
  }
  .theme-menu {
    top: calc(100% + 6px);
    right: 8px;
    left: auto;
    width: min(300px, calc(100vw - 16px));
    max-height: min(62vh, 460px);
  }

  /* ---- split: stack, don't slice ---- */
  body[data-view="split"] .workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  }
  body[data-view="split"] .editor-pane {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  body[data-view="split"] .markdown {
    margin: 0;
    padding: 16px 15px 44px;
  }

  /* ---- reading column: full-bleed ---- */
  .markdown {
    margin: 8px auto 24px;
    padding: 20px 15px 64px;
    border-radius: 0;
    border-left-width: 0;
    border-right-width: 0;
  }
  .pdfview {
    margin: 8px auto 24px;
  }
  .markdown h1 {
    font-size: 1.7rem;
    margin-bottom: 16px;
  }
  .markdown h2 {
    font-size: 1.34rem;
    margin-top: 30px;
  }
  .markdown h3 {
    font-size: 1.14rem;
    margin-top: 24px;
  }
  /* Tables and code are the two things that genuinely cannot always be narrow.
     display: block turns the table into its own scroll container while the rows
     keep laying out as a table inside it, so a six-column table scrolls
     sideways instead of squeezing every column down to one word. */
  .markdown table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-sm);
  }
  .markdown th,
  .markdown td {
    padding: 8px 11px;
  }
  .markdown pre {
    -webkit-overflow-scrolling: touch;
  }

  /* ---- editor ---- */
  .editor {
    font-size: 16px;
    padding: 16px 14px 72px;
  }
  .toolbar {
    gap: 3px;
    padding: 6px 8px;
  }

  /* ---- find bar: full width, no zoom on focus ---- */
  .findbar {
    top: calc(var(--topbar-h) + 6px);
    left: 8px;
    right: 8px;
  }
  #find-input {
    font-size: 16px;
    min-width: 0;
  }
  /* Same reason as the editor and the find field: a password box under 16px makes
     Safari on iOS zoom the page in when it takes focus, and it does not zoom back
     out afterwards — leaving the reader stranded inside a PDF they cannot see. */
  .pass-input {
    font-size: 16px;
  }

  /* ---- status bar ---- */
  .statusbar {
    height: calc(var(--statusbar-h) + env(safe-area-inset-bottom, 0px));
    padding: 0 max(10px, env(safe-area-inset-right, 0px))
      env(safe-area-inset-bottom, 0px) max(10px, env(safe-area-inset-left, 0px));
    font-size: 11.5px;
    gap: 8px;
  }
  /* Characters restate words, and the percentage is already on the rail at the
     top of the screen. Each one takes the separator in front of it with it. */
  #stat-chars,
  #stat-words + .dot,
  #stat-progress,
  #stat-read + .dot {
    display: none;
  }
  .status-right {
    gap: 6px;
  }

  /* ---- overlays ---- */
  .toast {
    left: 12px;
    right: 12px;
    bottom: calc(var(--statusbar-h) + env(safe-area-inset-bottom, 0px) + 12px);
    max-width: none;
    text-align: center;
    transform: translate(0, 20px);
  }
  .toast.show {
    transform: translate(0, 0);
  }
  .code-modal {
    padding: 8px;
  }
  .code-modal-card {
    height: 100%;
  }

  /* ---- empty state ---- */
  .empty {
    padding: 20px 14px;
  }
  .empty-card {
    padding: 28px 20px;
    border-radius: 14px;
  }
  .empty-card h1 {
    font-size: 21px;
  }
  .empty-actions {
    flex-direction: column;
  }
  .empty-actions .btn {
    justify-content: center;
    min-height: 40px;
  }
}

/* Small phones (SE-sized, and anything folded). Buy back the ~40px the row of
   controls is over budget by, rather than dropping a control off the toolbar. */
@media (max-width: 380px) {
  .topbar-right {
    gap: 0;
  }
  .icon-btn {
    min-width: 32px;
    padding: 6px;
  }
  /* Open keeps its word — it sits on row one, where the budget is not the
     problem — but gives back the padding around it so the filename next to it
     keeps a readable measure. */
  #btn-open {
    padding: 7px 10px;
  }
  .topbar-left {
    padding-right: 90px;
  }
  .seg-btn {
    padding: 6px;
  }
  /* 62px is room for six digits, which the zoom readout never needs: the steps
     top out at 4x of fit-width, so on a screen this size it is "147%" at the
     very most. The 16px that buys is the difference between 4px and 8px of gap
     between the PDF controls and the buttons after them. */
  .seg-btn.seg-num {
    min-width: 46px;
  }
  .markdown {
    padding: 18px 12px 60px;
  }
}

/* Landscape phone: wide enough to miss the phone block above, but only ~375px
   tall, so a two-row topbar plus a status bar would eat a third of the screen.
   Comes after that block deliberately — it has to undo the wrap. */
@media (max-height: 460px) and (orientation: landscape) {
  :root {
    --topbar-h: 44px;
    --statusbar-h: 26px;
  }
  .topbar {
    flex-wrap: nowrap;
  }
  .topbar-left,
  .topbar-right {
    flex: 0 1 auto;
    height: auto;
  }
  /* One row again, so Open belongs back in it — left where the phone block put
     it, it would float over the right-hand end of the row, on top of Help. */
  #btn-open {
    position: static;
    padding: 6px 10px;
  }
  .topbar-left {
    padding-right: 0;
  }
  .markdown,
  .pdfview {
    margin-top: 8px;
  }
}

/* Short screens (768-tall laptops, or when the OS taskbar eats height):
   shrink the fixed chrome so the reading area keeps as much room as it can.

   min-width guards it against the phone block above, which is the other half of
   this file that sets --topbar-h. A 320x568 phone is a short screen by this
   measure, but it is also a two-row toolbar: 48px there left row one sitting at
   y=-22 and row two hanging 22px past the bottom edge, over the document. Below
   641px the phone block owns the height — in landscape via the block above,
   which folds the toolbar back into one row before shortening it. */
@media (max-height: 720px) and (min-width: 641px) {
  :root {
    --topbar-h: 48px;
    --statusbar-h: 28px;
  }
  .markdown {
    margin-top: 16px;
  }
}

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

/* ==========================================================================
   Print / Export to PDF
   ========================================================================== */
@media print {
  body {
    overflow: visible;
    background: #ffffff;
    color: #111111;
  }
  body::before,
  body::after {
    display: none !important;
  }
  .topbar,
  .sidebar,
  .progress,
  .dropzone,
  .toast,
  .statusbar,
  .findbar,
  .editor-pane,
  .copy-btn,
  .code-tools,
  .code-modal,
  .heading-anchor {
    display: none !important;
  }
  .layout,
  .workspace {
    display: block;
    height: auto;
    grid-template-columns: none;
  }
  .scroller {
    display: block !important;
    overflow: visible;
    height: auto;
  }
  .markdown {
    max-width: none;
    margin: 0;
    padding: 0;
    color: #111111;
    background: none;
    border: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .markdown a {
    color: #0a5;
    border: none;
  }
  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4 {
    color: #000000;
  }
  .markdown pre {
    background: #f6f8fa;
    border: 1px solid #d0d7de;
    white-space: pre-wrap;
    word-break: break-word;
  }
  .markdown .code-block > pre {
    padding-top: 16px;
  }
  .markdown .code-lang {
    display: none !important;
  }
  .markdown pre code {
    color: #111111;
    white-space: pre-wrap;
  }
  .markdown :not(pre) > code {
    color: #b1005a;
    background: #f3f3f3;
    border: none;
  }
  .markdown table,
  .markdown th,
  .markdown td {
    border-color: #cccccc;
  }
  .markdown thead {
    background: #f0f0f0;
  }
  .markdown pre,
  .markdown .code-block,
  .markdown blockquote,
  .markdown table,
  .markdown img,
  .mermaid-rendered {
    page-break-inside: avoid;
  }
  .markdown h1,
  .markdown h2,
  .markdown h3 {
    page-break-after: avoid;
  }
  /* PDF pages print one per sheet, scaled to the paper width. The inline
     pixel sizes have to be overridden, hence the !important pair. */
  .pdfview {
    max-width: none;
    margin: 0;
  }
  .pdf-pages {
    display: block;
    gap: 0;
  }
  .pdf-page {
    width: 100% !important;
    height: auto !important;
    margin: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    break-after: page;
    page-break-after: always;
  }
  .pdf-page:last-child {
    break-after: auto;
    page-break-after: auto;
  }
  .pdf-page::before,
  .pdf-textlayer,
  .pdf-link {
    display: none !important;
  }
  .pdf-canvas {
    width: 100% !important;
    height: auto !important;
    filter: none !important;
  }
  .hljs-comment,
  .hljs-quote {
    color: #6a737d;
    font-style: italic;
  }
  .hljs-keyword,
  .hljs-selector-tag,
  .hljs-literal,
  .hljs-name {
    color: #d73a49;
  }
  .hljs-string,
  .hljs-regexp,
  .hljs-addition {
    color: #032f62;
  }
  .hljs-number,
  .hljs-symbol,
  .hljs-bullet {
    color: #005cc5;
  }
  .hljs-title,
  .hljs-title.function_,
  .hljs-section {
    color: #6f42c1;
  }
  .hljs-variable,
  .hljs-attr,
  .hljs-attribute,
  .hljs-built_in,
  .hljs-type {
    color: #b31d28;
  }
}