/* ===== tokens.css ===== */
/* =============================================================
   mikepreston.org — Design Tokens + Semantic Styles
   Import this file to get the whole system.
   ============================================================= */

/* --- Webfonts (Google Fonts CDN for zero-setup; self-host via /fonts for prod) --- */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap');

/* =============================================================
   TOKENS (dark by default)
   ============================================================= */
:root {
  /* -- Color: surfaces -- */
  --bg-0: #0a0a0a;   /* App background */
  --bg-1: #111111;   /* Cards, raised surfaces */
  --bg-2: #181818;   /* Inputs, hover */
  --bg-3: #222222;   /* Active / pressed */

  /* -- Color: foreground -- */
  --fg-0: #ededed;   /* Primary */
  --fg-1: #a0a0a0;   /* Secondary, labels */
  --fg-2: #6b6b6b;   /* Tertiary, timestamps */
  --fg-3: #404040;   /* Dividers, disabled */

  /* -- Color: structure -- */
  --border: #262626;
  --border-strong: #3a3a3a;

  /* -- Color: accent (cyan hero + magenta secondary) -- */
  --accent: #22d3ee;                    /* electric cyan */
  --accent-dim: #0891b2;                /* hover / underlines */
  --accent-bg: rgba(34, 211, 238, 0.08);
  --accent-2: #ff3da8;                  /* magenta, used sparingly for emphasis */
  --accent-2-dim: #c9277f;

  /* -- Color: semantic -- */
  --warn: #ffb020;
  --danger: #ff5555;
  --info: #5ac8fa;
  --success: #4ade80;

  /* -- Type: families -- */
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* -- Type: scale -- */
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   28px;
  --text-2xl:  40px;
  --text-3xl:  56px;

  /* -- Type: line-heights -- */
  --lh-xs:   16px;
  --lh-sm:   20px;
  --lh-base: 24px;
  --lh-md:   28px;
  --lh-lg:   28px;
  --lh-xl:   36px;
  --lh-2xl:  48px;
  --lh-3xl:  60px;

  /* -- Type: weights -- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* -- Type: tracking -- */
  --track-tight:  -0.01em;
  --track-normal: 0;
  --track-loose:   0.02em;
  --track-caps:    0.08em;

  /* -- Spacing (2px-aligned for mono rhythm) -- */
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 96px;
  --space-11: 128px;

  /* -- Radii -- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-full: 9999px;  /* used only for avatar circles */

  /* -- Borders -- */
  --hairline: 1px solid var(--border);

  /* -- Shadows -- */
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.7);

  /* -- Motion -- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 280ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* -- Layout -- */
  --max-prose: 720px;   /* reading-column width: content-page container + prose body */
  --max-app: 1120px;
  --nav-h: 56px;
}

/* =============================================================
   LIGHT MODE
   ============================================================= */
[data-theme="light"] {
  /* Surfaces: warm off-white instead of pure white to reduce eye strain */
  --bg-0: #f6f5f3;   /* App background — warm off-white */
  --bg-1: #fdfcfb;   /* Cards, raised surfaces */
  --bg-2: #eeece9;   /* Inputs, hover */
  --bg-3: #e2e0dc;   /* Active / pressed */

  /* Foreground: fg-2 deepened from #888 to #666 for WCAG AA across all surfaces */
  --fg-0: #111111;   /* Primary — 17.3:1 on bg-0 */
  --fg-1: #555555;   /* Secondary — 6.8:1 on bg-0 */
  --fg-2: #666666;   /* Tertiary — 5.3:1 on bg-0 (was #888888, 3.4:1, WCAG LRG only) */
  --fg-3: #bbbbbb;   /* Dividers / disabled (decorative, non-text) */

  /* Borders: warm-tinted to match surfaces */
  --border: #e0ded9;
  --border-strong: #c8c5c0;

  /* Accent: unchanged — passes AA on all new surfaces */
  --accent: #0e7490;
  --accent-dim: #155e75;
  --accent-bg: rgba(14, 116, 144, 0.08);
  --accent-2: #c9277f;
  --accent-2-dim: #9d1b62;

  /* Shadows: lighter for light mode */
  --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 24px 48px -12px rgba(0, 0, 0, 0.16);
}

/* =============================================================
   BASE / RESET
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-0);
  color: var(--fg-0);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv01", "cv02";
}

::selection {
  background: var(--accent);
  color: var(--bg-0);
}

/* =============================================================
   SEMANTIC ELEMENTS
   ============================================================= */

/* -- Headings: mono, tight, sentence-case by convention -- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-mono);
  font-weight: var(--weight-medium);
  letter-spacing: var(--track-tight);
  color: var(--fg-0);
  margin: 0;
}

h1 {
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  font-weight: var(--weight-semibold);
}
h2 {
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  font-weight: var(--weight-semibold);
}
h3 {
  font-size: var(--text-lg);
  line-height: var(--lh-lg);
  font-weight: var(--weight-medium);
}
h4 {
  font-size: var(--text-md);
  line-height: var(--lh-md);
  font-weight: var(--weight-medium);
}

/* -- Prose body: sans for long-form, mono for UI-adjacent -- */
p {
  margin: 0 0 var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-0);
  text-wrap: pretty;
}

.prose {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  max-width: var(--max-prose);
}
.prose p { font-family: inherit; font-size: inherit; line-height: inherit; }

/* -- Links -- */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-dim);
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover {
  color: var(--fg-0);
  text-decoration-color: var(--fg-0);
}
a.nav-link,
nav a {
  color: var(--fg-1);
  text-decoration: none;
}
nav a:hover { color: var(--fg-0); }
nav a[aria-current="page"] { color: var(--fg-0); }

/* -- Code -- */
code, pre, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.95em;
}
code {
  padding: 1px 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-0);
}
pre {
  padding: var(--space-5);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: 1.6;
}
pre code {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  color: var(--fg-0);
  box-shadow: 0 1px 0 var(--border-strong);
}

/* -- Labels / meta -- */
.label, .caps {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--lh-xs);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--fg-1);
  font-weight: var(--weight-medium);
}

.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fg-2);
}

/* -- Horizontal rule -- */
hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--space-7) 0;
}

/* -- Blockquote -- */
blockquote {
  margin: var(--space-6) 0;
  padding: 0 0 0 var(--space-5);
  border-left: 2px solid var(--border-strong);
  color: var(--fg-1);
  font-style: normal;
}

/* -- Lists -- */
ul, ol {
  padding-left: var(--space-6);
  margin: 0 0 var(--space-5);
}
li { margin-bottom: var(--space-2); }

/* -- Focus -- */
:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -- Prompt helper -- */
.prompt::before {
  content: "$ ";
  color: var(--accent);
  user-select: none;
}
.tilde::before {
  content: "~ ";
  color: var(--fg-2);
  user-select: none;
}

/* -- Blinking cursor -- */
.cursor {
  display: inline-block;
  width: 0.55ch;
  height: 1em;
  background: var(--accent);
  vertical-align: -2px;
  margin-left: 1px;
  animation: blink 1s step-end infinite;
}
@keyframes blink {
  50% { opacity: 0; }
}

/* ===== styles.css ===== */
/* mikepreston.org site UI kit — component styles
   Relies on tokens from ../../colors_and_type.css */

/* ---- App shell ---- */
html, body { height: 100%; }
#app { display: flex; flex-direction: column; min-height: 100%; }
main.page { flex: 1; width: 100%; max-width: var(--max-app); margin: 0 auto; padding: 40px 24px 80px; }

/* ---- TopNav ---- */
.topnav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(10,10,10,0.72);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 1px solid var(--border);
}
/* Light mode: the dark rgba composite produces mid-grey (~#4d4d4d), making
   nav text (#555 fg-1) illegible (1.1:1). Switch to a translucent warm-white
   that composites near bg-0 (#f6f5f3), giving fg-1 (#555) a ratio of 6.8:1. */
[data-theme="light"] .topnav {
  background: rgba(246,245,243,0.88);
}
.topnav-inner {
  max-width: var(--max-app); margin: 0 auto;
  height: var(--nav-h);
  padding: 0 24px;
  display: flex; align-items: center; gap: 32px;
}
.wordmark {
  font-family: var(--font-mono); font-weight: 500; font-size: 15px;
  color: var(--fg-0); text-decoration: none; letter-spacing: -0.01em;
  transition: color var(--dur-fast) var(--ease-out);
}
.wordmark:hover { color: var(--accent); }
.wordmark-dot { color: var(--accent); }
.topnav-links { display: flex; gap: 22px; flex: 1; }
.topnav-links a {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-1);
  text-decoration: none; transition: color var(--dur-fast) var(--ease-out);
}
.topnav-links a:hover { color: var(--fg-0); }
.topnav-links a[aria-current="page"] { color: var(--fg-0); }
/* The React nav wraps its links in .topnav-menu (the disclosure target);
   `contents` keeps them direct flex items of .topnav-links above the breakpoint. */
.topnav-menu { display: contents; }
.topnav .topnav-menu-toggle { display: none; } /* outranks .btn-icon-only */
.topnav-actions { display: flex; align-items: center; gap: 6px; }
.topnav-kbd-hint { display: inline-flex; align-items: center; gap: 6px; }
.btn-icon-only {
  background: transparent; border: 0; cursor: pointer;
  padding: 6px 10px; color: var(--fg-1); font-family: var(--font-mono);
  font-size: 12px; display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--radius-sm); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.btn-icon-only:hover { color: var(--fg-0); background: var(--bg-2); }
.btn-icon-only svg { width: 16px; height: 16px; stroke-width: 1.5; }

/* Narrow screens. The full nav needs ~1030px. Below 1080px drop the kbd hint
   and tighten the gaps; below 960px the links collapse:
   - .topnav-collapsible (React TopNav): links move into a disclosure panel
     under the bar, opened by .topnav-menu-toggle (must match COLLAPSED_MQ in
     TopNav.jsx).
   - plain .topnav (SSR _nav.html, no JS toggle): links drop to a second row
     that scrolls sideways, so the page itself never does. */
@media (max-width: 1079px) {
  .topnav-inner { gap: 24px; }
  .topnav-links { gap: 16px; }
  .topnav-kbd-hint { display: none; }
}
@media (max-width: 959px) {
  .topnav-inner { padding: 0 16px; gap: 6px; }
  .wordmark { margin-right: auto; white-space: nowrap; }
  .topnav .btn-icon-only { padding: 10px; }

  .topnav:not(.topnav-collapsible) .topnav-inner {
    flex-wrap: wrap; height: auto; padding-top: 10px; row-gap: 4px;
  }
  .topnav:not(.topnav-collapsible) .topnav-links {
    order: 1; flex: 1 0 100%; gap: 20px;
    overflow-x: auto; scrollbar-width: none; white-space: nowrap;
    padding: 8px 0 12px;
  }

  .topnav-collapsible .topnav-links { flex: none; }
  .topnav-collapsible .topnav-menu-toggle { display: inline-flex; }
  .topnav-collapsible .topnav-menu {
    display: none;
    position: absolute; top: calc(100% + 1px); left: 0; right: 0;
    flex-direction: column;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px 0;
    background: var(--bg-0);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-md);
  }
  .topnav-collapsible.is-open .topnav-menu {
    display: flex;
    animation: topnav-menu-in var(--dur-base) var(--ease-out);
  }
  .topnav-collapsible .topnav-menu a {
    padding: 12px 16px; font-size: 14px; line-height: 20px;
    outline-offset: -2px; /* the panel is full-bleed and clips outside outlines */
  }
  .topnav-collapsible .topnav-menu a:hover { background: var(--bg-2); }
  .topnav-collapsible .topnav-menu a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); }
  .topnav-collapsible .topnav-menu a:not(.external) + .external {
    margin-top: 8px; border-top: 1px solid var(--border);
  }
}
@media (max-width: 359px) {
  .topnav-inner { padding: 0 12px; }
  .topnav .btn-icon-only { padding: 8px; }
}
@keyframes topnav-menu-in { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) {
  .topnav-collapsible.is-open .topnav-menu { animation: none; }
}

.kbd, kbd.kbd {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-2); border: 1px solid var(--border-strong);
  border-radius: 3px; padding: 1px 5px; color: var(--fg-1);
  line-height: 1.4;
}

/* ---- Buttons ---- */
.btn {
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-1); color: var(--fg-0); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; line-height: 1;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--bg-2); }
.btn-primary { background: var(--accent); color: var(--bg-0); border-color: var(--accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-dim); border-color: var(--accent-dim); color: var(--bg-0); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--fg-1); }
.btn-ghost:hover { color: var(--fg-0); background: var(--bg-2); }
.btn-sm { font-size: 12px; padding: 5px 10px; }
.btn-icon { display: inline-flex; }
.btn-icon svg { width: 14px; height: 14px; stroke-width: 1.5; }

/* ---- Badges / tags ---- */
.badge {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px;
  letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid transparent; line-height: 16px;
  display: inline-block; vertical-align: 1px;
}
.badge-info    { background: rgba(90,200,250,0.12); color: var(--info);   border-color: rgba(90,200,250,0.3); }
.badge-draft, .badge-warn { background: rgba(255,176,32,0.12); color: var(--warn);   border-color: rgba(255,176,32,0.3); }
.badge-success { background: rgba(74,222,128,0.12); color: var(--success); border-color: rgba(74,222,128,0.3); }
.badge-muted   { background: var(--bg-2); color: var(--fg-2); border-color: var(--border); }
.badge-shipped { background: var(--accent-bg); color: var(--accent); border-color: rgba(34,211,238,0.3); }
.inline-badge { margin-left: 8px; }

.tag {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-1);
  background: transparent;
  border: 1px solid var(--border); padding: 3px 9px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.tag:hover { color: var(--fg-0); border-color: var(--border-strong); }
.tag-hash { color: var(--fg-2); margin-right: 1px; }
.tag-active { color: var(--bg-0); background: var(--accent); border-color: var(--accent); }
.tag-active .tag-hash { color: var(--bg-0); opacity: 0.6; }

/* ---- Prompt / cursor ---- */
.prompt-sigil { font-family: var(--font-mono); user-select: none; }
.prompt-accent { color: var(--accent); }
.cursor-inline {
  display: inline-block; width: 0.55ch; height: 1em;
  background: var(--accent); vertical-align: -2px; margin-left: 1px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---- Section ---- */
.section { margin-top: 56px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 20px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.section-label { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); letter-spacing: .08em; text-transform: uppercase; }
.section-more { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); text-decoration: none; }
.section-more:hover { color: var(--accent); }

/* ---- Page head ---- */
.page-head { margin-bottom: 36px; }
.page-label { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); margin-bottom: 12px; }
.page-h1 { font-family: var(--font-mono); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-0); margin: 0; }
.page-sub { font-family: var(--font-mono); font-size: 15px; color: var(--fg-1); line-height: 1.7; margin-top: 14px; max-width: 560px; }

/* ---- Skip link ---- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-1); color: var(--accent);
  border: 1px solid var(--accent-dim); border-radius: var(--radius-sm);
  padding: 8px 14px; text-decoration: none;
}
.skip-link:focus { left: 12px; top: 12px; }
#main:focus { outline: none; }

/* ---- Hero (home) ---- */
.hero { padding: 36px 0 24px; max-width: 720px; }
.hero-prompt { font-family: var(--font-mono); color: var(--fg-1); font-size: 14px; margin-bottom: 20px; }
.hero-cmd { color: var(--fg-0); }
.hero-h1 { font-family: var(--font-mono); font-size: 56px; line-height: 60px; font-weight: 600; letter-spacing: -0.03em; color: var(--fg-0); margin: 0 0 20px; }
.hero-lede { font-family: var(--font-sans); font-size: 18px; line-height: 30px; color: var(--fg-0); margin: 0 0 24px; max-width: 600px; }
.hero-lede a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-dim); text-underline-offset: 3px; }
.hero-lede a:hover { color: var(--fg-0); text-decoration-color: var(--fg-0); }
.hero-kbd-hint { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* ---- Post rows ---- */
.post-rows { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.post-rows > li { display: flex; flex-direction: column; }
.post-rows > li:last-child .post-row { border-bottom: 0; }
.post-rows .post-row { width: auto; }
.post-row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 20px;
  align-items: center; text-align: left;
  padding: 12px 8px; margin: 0 -8px;
  background: transparent; border: 0; border-radius: var(--radius-sm);
  border-bottom: 1px solid var(--border);
  cursor: pointer; font-family: var(--font-mono);
  transition: background var(--dur-fast) var(--ease-out);
}
.post-row:last-child { border-bottom: 0; }
/* Server-rendered rows are links, not buttons (no JS to navigate with). Without this they
   pick up the global link colour and underline, and read as a wall of blue. */
a.post-row { text-decoration: none; color: inherit; }
/* Likewise the filter chips, which are links (?tag=) when server-rendered. */
a.tag { text-decoration: none; }
/* Server-rendered theme toggle: both icons are in the markup (no JS to swap them), and the
   active theme picks one. :root is dark by default, so light is the explicit override. */
.theme-icon-light { display: none; }
[data-theme="light"] .theme-icon-dark { display: none; }
[data-theme="light"] .theme-icon-light { display: inline; }
.post-row:hover { background: var(--bg-1); }
.post-row:hover .post-title { color: var(--accent); }
.post-date { font-size: 12px; color: var(--fg-2); }
.post-title { font-size: 15px; color: var(--fg-0); letter-spacing: -0.005em; transition: color var(--dur-fast) var(--ease-out); }
.post-mins { font-size: 12px; color: var(--fg-2); }
/* Phones: the 110px date column squeezed titles to one word per line (and past
   the viewport at 320). Title goes full-width; dated rows (posts, series) keep
   date + minutes on the line above it, cheatsheet rows put the summary below. */
@media (max-width: 640px) {
  .post-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .post-row .post-title { grid-column: 1 / -1; }
  .post-row:has(.post-date) .post-title { grid-row: 2; }
}

/* ---- Now block ---- */
.now-block { font-family: var(--font-sans); font-size: 16px; color: var(--fg-0); line-height: 1.7; max-width: 640px; }
.now-block p { font-family: inherit; margin-bottom: 10px; }
.tilde-prefix { color: var(--accent); font-family: var(--font-mono); margin-right: 4px; }
.meta-text { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); letter-spacing: .06em; text-transform: uppercase; }

/* ---- Writing index ---- */
.filter-row { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.empty { font-family: var(--font-mono); color: var(--fg-2); padding: 40px 0; text-align: center; }

/* ---- Post page ---- */
/* Two classes (.page.page-post) to outrank main.page's max-width:var(--max-app);
   this makes the whole post a reading column so the h1, meta, body, and footer
   all share one measure. Cheatsheets reuse .page-post, so they inherit this too. */
.page.page-post { max-width: var(--max-prose); }
.breadcrumb { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); margin-bottom: 28px; }
.breadcrumb a { color: var(--fg-2); text-decoration: none; }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb b { color: var(--fg-0); font-weight: 500; }
.post-head { margin-bottom: 32px; }
.post-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); margin-bottom: 14px; display: flex; gap: 8px; }
.post-meta .sep { color: var(--fg-3); }

/* Field notes index: titles are sentence-length, so stack title over summary
   rather than squeezing the title into the 110px date column. Rows are links
   (not buttons) so they work without JS in the SSR template too. */
.page-field-notes .post-row { grid-template-columns: 1fr; gap: 4px; text-decoration: none; color: inherit; }
.page-field-notes .post-row .post-title { grid-column: auto; grid-row: auto; }

/* Field notes: the "verified <date> with <lib> <ver>" line under the title.
   Plain classes, no JS, so the SSR template (field_note.html) shares it. */
.field-note-verified { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); margin-top: 10px; line-height: 1.8; }
.field-note-verified .sep { color: var(--fg-3); margin: 0 4px; }
.field-note-badge { display: inline-block; padding: 0 6px; margin-right: 4px; border: 1px solid rgba(74,222,128,0.3); border-radius: var(--radius-sm); background: rgba(74,222,128,0.12); color: var(--success); }

/* Hero — rendered once from front-matter at the top of the post, above the
   body. Mirrors the in-prose image treatment (.prose img) so promoting an
   inline lead image into the hero looks identical. */
.post-hero { margin: 0 0 32px; }
.post-hero img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }

/* Series rail — in-context navigation for a multi-part series, shown between
   the post header and body. */
.series-rail {
  margin: 0 0 32px; padding: 14px 16px;
  background: var(--bg-1); border: 1px solid var(--border);
  border-left: 2px solid var(--accent); border-radius: var(--radius-sm);
}
.series-rail-head { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); margin-bottom: 8px; }
.series-rail-kicker { color: var(--fg-2); }
.series-rail-title { color: var(--accent); text-decoration: none; font-weight: 600; }
.series-rail-title:hover { text-decoration: underline; }
.series-rail-list { list-style: decimal; margin: 0; padding-left: 22px; font-size: 14px; }
.series-rail-list li { margin: 3px 0; color: var(--fg-2); }
.series-rail-list a { color: var(--fg-1); text-decoration: none; }
.series-rail-list a:hover { color: var(--accent); }
.series-rail-list li[aria-current="true"] { color: var(--fg-0); }
.series-rail-current { color: var(--fg-0); font-weight: 600; }
.series-badge { background: var(--accent-bg); color: var(--accent); border-color: rgba(34,211,238,0.3); text-transform: none; }
.post-h1 { font-family: var(--font-mono); font-size: 40px; line-height: 48px; font-weight: 600; letter-spacing: -0.02em; }
.post .prose { font-family: var(--font-sans); font-size: 17px; line-height: 1.75; color: var(--fg-0); }
.post .prose p { font-family: inherit; margin-bottom: 20px; }
/* Keep embedded images within the text column (applies to all prose contexts:
   writing, cheatsheets, about). Without this they render at natural width and
   overflow the layout to the right. */
.prose img { display: block; max-width: 100%; height: auto; margin: 24px auto; border-radius: var(--radius-md); }
.post .prose h2 { font-family: var(--font-mono); font-size: 22px; font-weight: 600; letter-spacing: -0.01em; margin: 40px 0 16px; }
.post .prose pre { margin: 24px 0; }
/* A wide table used to push the whole page sideways on a phone. Let the table scroll,
   not the page. */
.post .prose table { display: block; max-width: 100%; overflow-x: auto; }
.post .prose blockquote { font-family: var(--font-sans); font-style: italic; color: var(--fg-1); }
.post .prose a { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-dim); text-underline-offset: 2px; }
.post .prose a:hover { color: var(--fg-0); text-decoration-color: var(--fg-0); }
.post .prose sup.footnote-ref { font-size: 0.7em; scroll-margin-top: 80px; }
.post .prose sup.footnote-ref a { text-decoration: none; padding: 0 1px; }
.post .prose hr.footnotes-sep { border: 0; border-top: 1px solid var(--border); margin: 40px 0 24px; }
.post .prose .footnotes { font-size: 14px; color: var(--fg-1); }
.post .prose .footnotes-list { padding-left: 1.4em; }
.post .prose .footnote-item { margin-bottom: 10px; scroll-margin-top: 80px; }
.post .prose .footnote-item p { margin-bottom: 4px; word-break: break-word; }
.post .prose .footnote-backref { text-decoration: none; margin-left: 4px; }
.post .prose sup.footnote-ref a { border-radius: var(--radius-sm); }
.post .prose sup.footnote-ref a:hover,
.post .prose sup.footnote-ref a:focus-visible { background: var(--accent-bg); color: var(--accent); }

/* Footnote preview card (src/lib/footnotePopovers.js) — appended to <body>,
   so it sits outside .post .prose and is styled at the top level. Built to
   echo a link-unfurl card: source header, prose body, link footer. */
.footnote-popover {
  position: fixed; top: 0; left: 0; z-index: 60;
  max-width: min(380px, calc(100vw - 24px));
  padding: 14px 16px;
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: var(--shadow-md);
  font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--fg-1);
  opacity: 0; pointer-events: none;
  transform: translateY(2px); transition: opacity 0.12s ease, transform 0.12s ease;
}
.footnote-popover[data-placement="above"] { transform: translateY(-2px); }
.footnote-popover.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
.footnote-popover .footnote-card-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
}
.footnote-popover .footnote-card-icon { color: var(--accent); flex: none; }
.footnote-popover .footnote-card-source {
  font-weight: 500; font-size: 13px; color: var(--fg-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.footnote-popover .footnote-card-title {
  margin: 0 0 6px; font-weight: 700; font-size: 14px; line-height: 1.35; color: var(--fg-0);
}
/* Body default font is mono; .prose overrides to sans, but the card lives
   outside .prose, so set the sans family directly on its paragraphs. */
.footnote-popover .footnote-card-body p { margin: 0; font-family: var(--font-sans); }
.footnote-popover .footnote-card-body p + p { margin-top: 6px; }
.footnote-popover .footnote-card-link {
  display: inline-block; margin-top: 10px; font-size: 12px; color: var(--accent);
  text-decoration: none; word-break: break-word;
}
.footnote-popover .footnote-card-link:hover { color: var(--fg-0); text-decoration: underline; }
/* Links inside the body prose (rare — most URLs are lifted to the footer). */
.footnote-popover .footnote-card-body a {
  color: var(--accent); text-decoration: underline;
  text-decoration-color: var(--accent-dim); text-underline-offset: 2px; word-break: break-word;
}
.footnote-popover .footnote-card-body a:hover { color: var(--fg-0); text-decoration-color: var(--fg-0); }
@media (prefers-reduced-motion: reduce) { .footnote-popover { transition: none; } }

.post-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); }
.post-actions { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; }
.post-nav { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 13px; }
.post-nav a { color: var(--fg-1); text-decoration: none; }
.post-nav a:hover { color: var(--accent); }
.post-nav-disabled { color: var(--fg-2); opacity: 0.5; cursor: default; }

/* ---- Banners (components/Banners.jsx + api/app/templates/_banners.html) ----
   --banner-tone drives tint, rule, and button; --banner-ink is the tone used as
   text colour, split out because amber text on the light theme fails contrast. */
.site-banner, .post-banner { --banner-tone: var(--accent); --banner-ink: var(--banner-tone); --banner-on-tone: var(--bg-0); }
.site-banner-accent, .post-banner-accent { --banner-tone: var(--accent-2); }
.site-banner-warn, .post-banner-warn { --banner-tone: var(--warn); --banner-on-tone: #111111; }
[data-theme="light"] .site-banner-warn, [data-theme="light"] .post-banner-warn { --banner-ink: #8a5300; }

.site-banner {
  background: color-mix(in srgb, var(--banner-tone) 10%, var(--bg-0));
  border-bottom: 1px solid color-mix(in srgb, var(--banner-tone) 35%, var(--border));
  font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--fg-0);
}
.site-banner[hidden] { display: none; }
.site-banner-inner {
  max-width: var(--max-app); margin: 0 auto; padding: 7px 12px 7px 24px;
  display: flex; align-items: center; gap: 16px;
}
.site-banner-text { flex: 1; min-width: 0; margin: 0; }
.site-banner-title { color: var(--banner-ink); font-weight: 600; margin-right: 10px; }
.site-banner-msg a, .post-banner-msg a { color: var(--banner-ink); text-underline-offset: 3px; }
.site-banner-msg code, .post-banner-msg code {
  font-family: var(--font-mono); font-size: .92em;
  background: color-mix(in srgb, var(--banner-tone) 12%, transparent);
  padding: 1px 4px; border-radius: 3px;
}
.site-banner-cta { color: var(--banner-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.site-banner-cta:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-banner-close {
  flex: none; background: transparent; border: 0; cursor: pointer;
  color: var(--fg-2); font: inherit; font-size: 18px; line-height: 1;
  padding: 4px 8px; border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.site-banner-close:hover { color: var(--fg-0); background: color-mix(in srgb, var(--banner-tone) 15%, transparent); }
@media (max-width: 640px) {
  /* Message + close on the first row, the CTA wraps beneath the message. */
  .site-banner-inner { flex-wrap: wrap; align-items: flex-start; padding: 8px 8px 8px 16px; gap: 4px 12px; }
  .site-banner-text { order: 1; flex-basis: 0; }
  .site-banner-close { order: 2; margin-top: -2px; }
  .site-banner-cta { order: 3; flex-basis: 100%; padding-bottom: 2px; }
}

.post-banner {
  margin: 48px 0 0; padding: 18px 20px;
  background: color-mix(in srgb, var(--banner-tone) 6%, var(--bg-1));
  border: 1px solid var(--border); border-left: 2px solid var(--banner-tone);
  border-radius: var(--radius-sm);
}
.post-banner + .post-foot { margin-top: 32px; }
.post-banner-title { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--fg-0); margin: 0 0 6px; }
.post-banner-msg { font-family: var(--font-sans); font-size: 15px; line-height: 1.65; color: var(--fg-1); margin: 0; }
.post-banner-cta.btn-primary {
  margin-top: 14px;
  background: var(--banner-tone); border-color: var(--banner-tone); color: var(--banner-on-tone);
}
.post-banner-cta.btn-primary:hover {
  background: color-mix(in srgb, var(--banner-tone) 80%, var(--fg-0));
  border-color: color-mix(in srgb, var(--banner-tone) 80%, var(--fg-0));
  color: var(--banner-on-tone);
}

/* Admin editor (/admin/banners) */
.page.page-admin-banners { max-width: var(--max-prose); }
.banner-editor { border-top: 1px solid var(--border); padding-top: 28px; margin-top: 28px; }
.banner-editor-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.banner-editor-h2 { font-family: var(--font-mono); font-size: 16px; font-weight: 600; margin: 0; }
.banner-editor-h2 code { font-size: 12px; color: var(--fg-2); margin-left: 6px; font-weight: 400; }
.banner-editor-hint { font-size: 14px; color: var(--fg-2); margin: 6px 0 0; line-height: 1.5; }
.banner-status {
  flex: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 3px; border: 1px solid var(--border); color: var(--fg-2);
}
.banner-status-live { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.banner-status-scheduled { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
[data-theme="light"] .banner-status-live { color: #15803d; }
[data-theme="light"] .banner-status-scheduled { color: #8a5300; }
.banner-form { display: flex; flex-direction: column; gap: 18px; }
.banner-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .banner-form-row { grid-template-columns: 1fr; } }
.banner-check { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; color: var(--fg-0); cursor: pointer; }
.banner-check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.banner-opt { text-transform: none; letter-spacing: 0; color: var(--fg-3); margin-left: 4px; }
[data-theme="light"] .banner-opt { color: var(--fg-2); }
.banner-field-hint { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.banner-field-hint code { font-size: 11px; }
.banner-preview { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: 10px 12px 14px; }
.banner-preview-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 10px; }
.banner-preview-empty { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); }
.banner-preview-error { margin-top: 10px; }
.banner-preview .site-banner-inner { padding-left: 12px; }
.banner-preview .post-banner { margin: 0; }
.banner-meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }

/* Admin index (/admin) and contact submissions (/admin/contact) */
.page.page-admin { max-width: var(--max-prose); }
.admin-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.admin-link {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline;
  padding: 14px 8px; margin: 0 -8px;
  border-bottom: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.admin-link:hover { background: var(--bg-1); }
.admin-link-path { font-size: 14px; color: var(--fg-0); transition: color var(--dur-fast) var(--ease-out); }
.admin-link:hover .admin-link-path { color: var(--accent); }
.admin-link-desc { font-size: 13px; line-height: 1.55; color: var(--fg-1); }
@media (max-width: 640px) { .admin-link { grid-template-columns: 1fr; gap: 4px; } }
.admin-count { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); margin: 0 0 12px; }
.submissions { list-style: none; margin: 0; padding: 0; }
.submission { padding: 20px 0; border-top: 1px solid var(--border); }
.submission-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); margin-bottom: 10px;
}
.submission-from { font-family: var(--font-mono); font-size: 13px; color: var(--fg-0); overflow-wrap: anywhere; }
.submission-email { color: var(--fg-1); }
.submission-subject {
  font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--fg-0);
  margin: 6px 0 10px; overflow-wrap: anywhere;
}
/* Visitor text: pre-wrap keeps their line breaks, anywhere stops a long URL
   forcing a horizontal scroll, and the cap stops one wall of spam owning the page. */
.submission-message {
  font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: var(--fg-1);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 20em; overflow-y: auto;
  padding: 10px 12px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.submission-message:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
.submission-dropped .submission-message { border-style: dashed; background: transparent; }
.submission-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }

/* ---- Projects ---- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 14px; }
.project-card {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.project-card:hover { background: var(--bg-2); border-color: var(--border-strong); }
.project-card.is-open { border-color: var(--border-strong); }
.project-details {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--fg-1);
  line-height: 1.65;
  padding: 10px 12px; margin: 2px 0;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.project-details p { margin: 0 0 8px; font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.project-details p:last-child { margin-bottom: 0; }
.project-body { margin: 0 0 10px; }
.project-body :where(p, pre, ul, ol, h2, h3) { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }
.project-body h2, .project-body h3 { margin: 12px 0 6px; color: var(--fg-0); }
.project-body pre { background: var(--bg-1); padding: 10px; border-radius: var(--radius-sm); overflow-x: auto; font-size: 11.5px; margin: 8px 0; }
.project-body code { font-family: var(--font-mono); }
.project-body-loading, .project-body-empty { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); padding: 4px 0 8px; }
.project-links { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-direction: column; gap: 4px; }
.project-links li { margin: 0; }
.project-link { font-family: var(--font-mono); font-size: 12px; color: var(--accent); text-decoration: none; }
.project-link:hover { text-decoration: underline; text-decoration-color: var(--accent-dim); }
.page-notice { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); margin-top: 8px; }
.post-unavailable { color: var(--fg-2); }
.post-unavailable .btn { margin-top: 4px; }
.project-foot { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 11px; margin-top: auto; }
.project-foot-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.project-toggle {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-1);
  background: transparent; border: 1px solid var(--border); padding: 2px 8px;
  border-radius: 3px; cursor: pointer; letter-spacing: .04em; white-space: nowrap;
  transition: all var(--dur-fast) var(--ease-out);
}
.project-toggle:hover { color: var(--accent); border-color: var(--accent-dim); }
.project-cta {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  text-decoration: none; text-transform: lowercase;
  padding: 2px 8px; border-radius: 3px;
  background: rgba(74,222,128,0.12); color: var(--success);
  border: 1px solid rgba(74,222,128,0.3);
  transition: all var(--dur-fast) var(--ease-out);
}
.project-cta:hover { color: var(--accent); border-color: var(--accent-dim); background: var(--accent-bg); }
.project-cta-wip { background: rgba(255,176,32,0.12); color: var(--warn); border-color: rgba(255,176,32,0.3); }
.project-cta-muted { background: var(--bg-2); color: var(--fg-2); border-color: var(--border); }
.kbd-join { color: var(--fg-2); margin: 0 1px; font-family: var(--font-mono); font-size: 11px; }

/* ---- Tools page ---- */
.tools-group { margin-bottom: 40px; }
.tools-group-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.tool-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px 16px;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.tool-card:hover { background: var(--bg-2); border-color: var(--border-strong); }
.tool-card:hover .tool-name { color: var(--accent); }
.tool-name { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--fg-0); margin-bottom: 6px; letter-spacing: -0.005em; transition: color var(--dur-fast) var(--ease-out); }
.tool-prompt { color: var(--accent); user-select: none; }
.tool-blurb { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); line-height: 1.55; margin-bottom: 10px; }
.tool-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tool-tag { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); border: 1px solid var(--border); padding: 1px 5px; border-radius: 3px; }
.project-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.project-badges { white-space: nowrap; }
.project-name { font-family: var(--font-mono); font-size: 16px; font-weight: 500; margin: 0; color: var(--fg-0); letter-spacing: -0.01em; }
.project-prompt { color: var(--accent); user-select: none; }
.project-blurb { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); line-height: 1.55; margin: 4px 0 14px; }
.project-stars { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-2); }
.project-stars svg { width: 12px; height: 12px; stroke-width: 1.5; }
.project-stack { display: flex; gap: 4px; flex-wrap: wrap; }
.stack-chip { color: var(--fg-2); border: 1px solid var(--border); padding: 1px 6px; border-radius: 3px; font-size: 10px; letter-spacing: .04em; }

/* ---- Uses ---- */
.uses-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; }
.uses-group-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.uses-list { list-style: none; padding: 0; margin: 0; }
.uses-list li { padding: 8px 0; border-bottom: 1px dashed var(--border); display: flex; flex-direction: column; gap: 2px; }
.uses-list li:last-child { border: 0; }
.uses-name { font-family: var(--font-mono); font-size: 14px; color: var(--fg-0); }
.uses-note { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }

/* ---- About ---- */
/* Constrain the whole page to the reading column (same as posts) so the h1 and
   body share one measure; the prose then inherits --max-prose from base .prose. */
.page.page-about { max-width: var(--max-prose); }
.page-about .prose p { font-family: var(--font-sans); font-size: 17px; line-height: 1.75; color: var(--fg-0); margin: 0 0 20px; }
.page-about .prose h2 { font-family: var(--font-mono); font-size: 18px; margin: 32px 0 12px; }
.page-about .prose ul { font-family: var(--font-mono); font-size: 14px; color: var(--fg-0); line-height: 1.9; padding-left: 0; list-style: none; }
.page-about .prose li::before { content: "· "; color: var(--accent); }

/* ---- Contact ---- */
.page-contact { max-width: 600px; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-label {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
  letter-spacing: .06em; text-transform: uppercase;
}
.contact-input,
.contact-textarea {
  font-family: var(--font-mono); font-size: 14px;
  background: var(--bg-1); color: var(--fg-0);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; width: 100%; box-sizing: border-box;
  transition: border-color var(--dur-fast) var(--ease-out);
  resize: vertical;
}
.contact-input:focus,
.contact-textarea:focus {
  outline: none; border-color: var(--accent);
}
.contact-input-error { border-color: var(--danger) !important; }
.contact-error { font-family: var(--font-mono); font-size: 12px; color: var(--danger); }
.contact-actions { display: flex; align-items: center; gap: 12px; }
.contact-token-hint { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.contact-notice {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-1);
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px 16px; line-height: 1.6;
}
.contact-notice a { color: var(--accent); }
.contact-notice-warn { border-color: var(--warn); color: var(--warn); background: rgba(255,176,32,0.06); }
.contact-sent { padding: 24px 0; }
.contact-sent-msg { font-family: var(--font-mono); font-size: 16px; color: var(--fg-0); line-height: 1.7; }

/* ---- 404 ---- */
.page-404 { display: flex; align-items: center; justify-content: center; min-height: 60vh; }
.nf-box { font-family: var(--font-mono); max-width: 560px; text-align: left; }
.nf-head { font-size: 14px; color: var(--fg-0); margin-bottom: 4px; }
.nf-err { font-size: 13px; color: var(--danger); margin-bottom: 32px; }
.nf-code { font-size: 120px; line-height: 1; font-weight: 600; color: var(--accent); letter-spacing: -0.05em; margin-bottom: 24px; }
.nf-msg { font-family: var(--font-sans); font-size: 16px; color: var(--fg-1); line-height: 1.6; margin-bottom: 24px; max-width: 420px; }
.nf-actions { display: flex; gap: 10px; }

/* ---- Footer ---- */
.footer { border-top: 1px solid var(--border); margin-top: 80px; padding: 36px 0 28px; font-family: var(--font-mono); }
.footer-inner { max-width: var(--max-app); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-col a { font-size: 13px; color: var(--fg-1); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.footer-label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 6px; }
.footer-meta { font-size: 13px; color: var(--fg-1); line-height: 1.6; }
.footer-build { margin-top: 10px; font-size: 12px; color: var(--fg-2); display: flex; gap: 6px; align-items: center; }
.footer-hash { color: var(--accent); }
.footer-dot { color: var(--fg-3); }
/* Signed-in strip (FooterSession): only rendered for an authenticated session. */
.footer-session {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding-top: 16px; border-top: 1px dashed var(--border);
  font-size: 12px; color: var(--fg-2);
}
.footer-session-email { color: var(--fg-1); overflow-wrap: anywhere; }
.footer-session a,
.footer-session-btn {
  font: inherit; color: var(--fg-1); text-decoration: none;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.footer-session a:hover,
.footer-session-btn:hover { color: var(--accent); }
/* Phones: two link columns, subscribe block full-width beneath. The 1fr 1fr 2fr
   grid can't shrink below its min-content (~350px) and overflowed at 320. */
@media (max-width: 640px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .footer-col-wide { grid-column: 1 / -1; }
}

/* ---- Subscribe form ---- */
.subscribe-form-inline { gap: 10px; margin-top: 10px; }
.subscribe-form-inline .contact-input { font-size: 13px; padding: 6px 10px; }
.subscribe-form-inline .contact-actions { gap: 8px; }
.subscribe-sent-inline { font-family: var(--font-mono); font-size: 13px; color: var(--fg-1); margin-top: 10px; }
.subscribe-sent-full { font-family: var(--font-mono); font-size: 16px; color: var(--fg-0); padding: 24px 0; }

/* ---- Command palette ---- */
.palette-scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 15vh;
  animation: fade-in var(--dur-base) var(--ease-out);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.palette {
  width: 560px; max-width: calc(100% - 32px);
  background: var(--bg-1); border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.palette-input { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.palette-input input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--fg-0); font-family: var(--font-mono); font-size: 15px;
}
.palette-input input::placeholder { color: var(--fg-2); }
.palette-list { overflow-y: auto; padding: 6px 0; }
.palette-group { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); padding: 10px 16px 6px; }
.palette-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px; font-family: var(--font-mono); font-size: 13px;
  color: var(--fg-0); cursor: pointer;
}
.palette-item.active { background: var(--bg-2); }
.palette-item.active .palette-label { color: var(--accent); }
.palette-meta { font-size: 11px; color: var(--fg-2); }
.palette-kbd { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.palette-empty { padding: 24px 16px; color: var(--fg-2); font-family: var(--font-mono); font-size: 13px; text-align: center; }
.palette-hint { display: flex; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.palette-hint span { display: inline-flex; gap: 4px; align-items: center; }

/* ---- Tool detail page ---- */
.page-tool { max-width: 780px; }
.page-tool .page-h1 .tool-prompt { font-size: inherit; margin-right: 4px; }
.tool-body { margin-bottom: 40px; }
.tool-loading { font-family: var(--font-mono); font-size: 13px; color: var(--fg-2); padding: 20px 0; }
.tool-foot {
  margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}

.tool-controls {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.tool-field { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.tool-field-label { letter-spacing: .04em; }
.tool-field input, .tool-field select {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg-0); font-family: var(--font-mono); font-size: 13px;
  padding: 4px 8px; width: 100px; outline: 0;
}
.tool-field input:focus, .tool-field select:focus { border-color: var(--accent-dim); }

.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg-wrap { flex-wrap: wrap; }
.seg-btn {
  background: transparent; border: 0; color: var(--fg-1);
  font-family: var(--font-mono); font-size: 12px;
  padding: 5px 10px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.seg-btn:hover { color: var(--fg-0); background: var(--bg-2); }
.seg-active { color: var(--bg-0); background: var(--accent); }
.seg-active:hover { color: var(--bg-0); background: var(--accent); }

.tool-output {
  width: 100%; resize: vertical; min-height: 80px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg-0); font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  padding: 12px; outline: 0;
}
.tool-output:focus { border-color: var(--accent-dim); }

.tool-error {
  background: var(--bg-1); border: 1px solid var(--danger); border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.tool-error-label { font-family: var(--font-mono); font-size: 11px; color: var(--danger); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.tool-error-msg { font-family: var(--font-mono); font-size: 12px; color: var(--fg-1); line-height: 1.55; margin: 0; white-space: pre-wrap; word-break: break-word; }

.tool-warn {
  font-family: var(--font-mono); font-size: 13px; color: var(--warn);
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-top: 4px;
}

.tool-field-wide { flex: 1; min-width: 240px; }
.tool-field-wide input { width: 100%; }
.tool-field-md input { width: 200px; }

.tz-combo { position: relative; display: inline-flex; width: 200px; }
.tz-combo input { width: 100%; }
.tz-combo-list {
  position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  max-height: 260px; overflow-y: auto;
  margin: 0; padding: 4px 0; list-style: none;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  z-index: 20; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.tz-combo-option {
  padding: 5px 10px; font-family: var(--font-mono); font-size: 13px;
  color: var(--fg-1); cursor: pointer; white-space: nowrap;
}
.tz-combo-option:hover { color: var(--fg-0); }
.tz-combo-option-active { background: var(--bg-2); color: var(--fg-0); }
.tz-combo-option-selected { color: var(--accent); }
.tz-combo-option-active.tz-combo-option-selected { background: var(--accent-dim); color: var(--bg-0); }

.kv {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.kv-row {
  display: flex; align-items: baseline; gap: 20px;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 13px;
}
.kv-row:last-child { border-bottom: 0; }
.kv-label { color: var(--fg-2); min-width: 140px; font-size: 12px; }
.kv-value { color: var(--fg-0); word-break: break-all; }
.kv-value-sans { font-family: var(--font-sans); }

.cron-desc {
  font-family: var(--font-sans); font-size: 15px; color: var(--fg-0);
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; margin-bottom: 24px;
}
.cron-runs { margin-top: 24px; }
.cron-runs-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.cron-run-list { list-style: none; padding: 0; margin: 0; }
.cron-run-list li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 6px 0; font-family: var(--font-mono); font-size: 13px;
  border-bottom: 1px dashed var(--border);
}
.cron-run-list li:last-child { border: 0; }
.cron-run-idx { color: var(--fg-2); font-size: 11px; min-width: 24px; }
.cron-run-time { color: var(--fg-0); }

.now-banner {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  background: var(--accent-bg); border: 1px solid var(--accent-dim); border-radius: var(--radius-sm);
  padding: 10px 14px; margin-bottom: 20px;
  font-family: var(--font-mono); font-size: 13px;
}
.now-label { color: var(--accent); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.now-epoch { color: var(--fg-0); font-weight: 500; }
.now-iso { color: var(--fg-1); }

/* ---- Semantic tones shared by tools ---- */
.kv-tone-ok     { color: var(--success); }
.kv-tone-warn   { color: var(--warn); }
.kv-tone-hot    { color: var(--accent-2); }
.kv-tone-danger { color: var(--danger); }

.tool-note {
  margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
  border-top: 1px dashed var(--border); padding-top: 16px;
}
.tool-note summary { cursor: pointer; color: var(--fg-1); }
.tool-note summary:hover { color: var(--accent); }
.tool-note[open] summary { margin-bottom: 10px; }
.tool-note p, .tool-note ul { line-height: 1.6; margin: 0 0 8px; font-family: var(--font-sans); font-size: 13px; color: var(--fg-1); }
.tool-note ul { padding-left: 18px; }
.tool-note li { margin-bottom: 4px; }
.tool-note code { font-family: var(--font-mono); color: var(--fg-0); }

.tool-presets { display: flex; gap: 8px; align-items: center; margin-top: -4px; margin-bottom: 20px; flex-wrap: wrap; }
.tool-presets-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: .08em; text-transform: uppercase; }

.tool-def { margin: 0; font-family: var(--font-sans); font-size: 13px; color: var(--fg-1); line-height: 1.6; }
.tool-def dt { font-family: var(--font-mono); font-size: 12px; color: var(--fg-0); margin-top: 10px; }
.tool-def dt:first-child { margin-top: 0; }
.tool-def dd { margin: 4px 0 0 0; }
.tool-def code { font-family: var(--font-mono); color: var(--fg-0); background: var(--bg-2); padding: 0 4px; border-radius: 2px; }
.tool-def-note { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); }

.kv-group-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.kv-group-label-2 { margin-top: 24px; }
.kv-group-hint { font-size: 10px; color: var(--fg-2); letter-spacing: .04em; text-transform: none; font-style: italic; }

/* ---- Two-pane layout (base64, json-fmt diff) ---- */
.two-pane { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .two-pane { grid-template-columns: 1fr; } }

.pane { display: flex; flex-direction: column; gap: 6px; }
.pane-label { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); letter-spacing: .08em; text-transform: uppercase; }

/* ---- Timestamp compare ---- */
.ts-panes { align-items: start; }
.ts-pane-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ts-now-btn {
  background: transparent; border: 0; cursor: pointer; padding: 0;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .04em; transition: color var(--dur-fast) var(--ease-out);
}
.ts-now-btn:hover { color: var(--accent); }
.ts-input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: var(--fg-0); font-family: var(--font-mono); font-size: 13px;
  padding: 6px 10px; outline: 0;
}
.ts-input:focus { border-color: var(--accent-dim); }
.ts-pane-empty { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); padding: 10px 0; }
.ts-delta { margin-top: 18px; }
.ts-delta-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .1em; text-transform: uppercase;
}
.ts-delta-head svg { color: var(--accent); }
.ts-delta-head > span { margin-right: auto; }
.ts-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* ---- Regex test ---- */
.regex-results { margin-top: 20px; }
.regex-text {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; margin: 0;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6; color: var(--fg-0);
  white-space: pre-wrap; word-break: break-word;
}
.regex-hit { background: var(--accent-bg); color: var(--accent); border-radius: 2px; padding: 0 2px; }

.regex-engine {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  margin: -8px 0 14px;
}
.regex-engine b { color: var(--fg-1); font-weight: 500; }
.regex-engine code { color: var(--accent); }

.regex-list { list-style: none; padding: 0; margin: 14px 0 0; }
.regex-list li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
  font-family: var(--font-mono); font-size: 12px;
}
.regex-list li:last-child { border: 0; }
.regex-idx { color: var(--fg-2); min-width: 24px; font-size: 11px; }
.regex-hit-text { color: var(--accent); background: var(--accent-bg); padding: 0 4px; border-radius: 2px; }
.regex-pos { color: var(--fg-2); font-size: 11px; }
.regex-groups { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.regex-group { color: var(--fg-1); background: var(--bg-2); padding: 1px 5px; border-radius: 2px; font-size: 11px; }

.regex-saved { list-style: none; padding: 0; margin: 0; }
.regex-saved li {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0; border-bottom: 1px dashed var(--border);
}
.regex-saved li:last-child { border: 0; }
.regex-saved-load {
  flex: 1; display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: transparent; border: 0; color: inherit; padding: 4px 8px; cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out);
}
.regex-saved-load:hover { background: var(--bg-2); }
.regex-saved-name { font-family: var(--font-mono); font-size: 13px; color: var(--fg-0); }
.regex-saved-body { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); word-break: break-all; }

/* ---- JSON fmt ---- */
.json-output {
  white-space: pre; overflow-x: auto; margin: 0;
}
.json-diff {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; margin: 14px 0 0;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.6;
  white-space: pre; overflow-x: auto; color: var(--fg-1);
}
.diff-add  { color: var(--success); background: rgba(74, 222, 128, 0.08); display: block; }
.diff-del  { color: var(--danger);  background: rgba(255, 85, 85, 0.08);  display: block; }
.diff-same { color: var(--fg-2); display: block; }

/* ---- JWT peek ---- */
.jwt-notice {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 20px;
  padding: 10px 14px;
  background: var(--bg-1); border: 1px solid var(--warn); border-radius: var(--radius-sm);
  color: var(--warn); font-family: var(--font-mono); font-size: 12px;
}
.jwt-notice b { color: var(--fg-0); }
.jwt-notice span { color: var(--fg-1); }
.jwt-notice svg { flex: none; stroke-width: 2; }

.jwt-section { margin-bottom: 20px; }
.jwt-section-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 8px;
}
.jwt-label-header  { color: var(--accent); }
.jwt-label-payload { color: var(--accent-2); }
.jwt-label-sig     { color: var(--fg-2); }

.jwt-json {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; margin: 0;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.55; color: var(--fg-0);
  white-space: pre; overflow-x: auto;
}
.jwt-sig { color: var(--fg-1); word-break: break-all; white-space: pre-wrap; }
.jwt-sig-note { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }

.jwt-banner {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 16px 0 20px; padding: 12px 16px;
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}
.jwt-banner svg { flex: none; margin-top: 1px; stroke-width: 2; }
.jwt-banner-body { display: flex; flex-direction: column; gap: 3px; }
.jwt-banner-title {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-0);
  letter-spacing: .04em; text-transform: uppercase;
}
.jwt-banner-detail { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.jwt-banner-ok     { border-left-color: var(--success); }
.jwt-banner-ok svg,     .jwt-banner-ok .jwt-banner-title     { color: var(--success); }
.jwt-banner-warn   { border-left-color: var(--warn); }
.jwt-banner-warn svg,   .jwt-banner-warn .jwt-banner-title   { color: var(--warn); }
.jwt-banner-danger { border-left-color: var(--danger); }
.jwt-banner-danger svg, .jwt-banner-danger .jwt-banner-title { color: var(--danger); }
.jwt-banner-info   { border-left-color: var(--accent); }
.jwt-banner-info svg,   .jwt-banner-info .jwt-banner-title   { color: var(--accent); }

.jwt-countdown {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 20px; padding: 12px 16px;
  border: 1px solid var(--border); border-left-width: 4px; border-left-color: var(--accent-2);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}
.jwt-countdown svg { flex: none; stroke-width: 2; color: var(--accent-2); }
.jwt-countdown-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-2);
}
.jwt-countdown-value {
  font-family: var(--font-mono); font-size: 16px; font-variant-numeric: tabular-nums;
  color: var(--fg-0);
}
.jwt-countdown-expired { border-left-color: var(--danger); }
.jwt-countdown-expired svg { color: var(--danger); }
.jwt-countdown-expired .jwt-countdown-value { color: var(--danger); }

/* ---- Incident timer ---- */
.incident-timer {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 40px 20px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-1);
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.incident-tone-ok     { border-color: var(--success); }
.incident-tone-warn   { border-color: var(--warn); }
.incident-tone-hot    { border-color: var(--accent-2); }
.incident-tone-danger { border-color: var(--danger); }

.incident-timer:fullscreen {
  background: var(--bg-0);
  justify-content: center;
  border-radius: 0;
  border: 0;
  gap: 40px;
}
.incident-timer:fullscreen .incident-clock { font-size: 22vw; }

.incident-sev-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.sev-btn {
  font-family: var(--font-mono); font-size: 12px;
  background: transparent; border: 1px solid var(--border);
  color: var(--fg-1); padding: 6px 14px; border-radius: var(--radius-sm);
  cursor: pointer; letter-spacing: .08em;
  transition: all var(--dur-fast) var(--ease-out);
}
.sev-btn:hover { color: var(--fg-0); border-color: var(--border-strong); }
.sev-active.sev-ok     { background: var(--success); color: var(--bg-0); border-color: var(--success); }
.sev-active.sev-warn   { background: var(--warn);    color: var(--bg-0); border-color: var(--warn); }
.sev-active.sev-hot    { background: var(--accent-2); color: var(--bg-0); border-color: var(--accent-2); }
.sev-active.sev-danger { background: var(--danger);  color: var(--bg-0); border-color: var(--danger); }

.incident-clock {
  font-family: var(--font-mono); font-size: 96px; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
  color: var(--fg-0);
}
.incident-tone-ok     .incident-clock { color: var(--success); }
.incident-tone-warn   .incident-clock { color: var(--warn); }
.incident-tone-hot    .incident-clock { color: var(--accent-2); }
.incident-tone-danger .incident-clock { color: var(--danger); }

.incident-status {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .2em; text-transform: uppercase;
}
.incident-controls { display: flex; gap: 10px; flex-wrap: wrap; }
.incident-hints {
  display: flex; gap: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
}
.incident-hints span { display: inline-flex; gap: 5px; align-items: center; }

.incident-clocks {
  display: flex; gap: 56px; align-items: flex-start; justify-content: center; flex-wrap: wrap;
}
.incident-wallclock { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.incident-wall-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .1em; text-transform: uppercase;
}
.incident-wall-time {
  font-family: var(--font-mono); font-size: 28px; color: var(--fg-0);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.incident-wall-date { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }
.incident-timer:fullscreen .incident-clocks { gap: 8vw; margin-bottom: 2vh; }
.incident-timer:fullscreen .incident-wallclock { gap: 0.6vh; }
.incident-timer:fullscreen .incident-wall-time {
  font-size: 4.5vw; line-height: 1;
}
.incident-timer:fullscreen .incident-wall-label { font-size: 1.1vw; letter-spacing: .2em; }
.incident-timer:fullscreen .incident-wall-date  { font-size: 0.9vw; }

.incident-elapsed-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .2em; text-transform: uppercase;
}
.incident-tz-row { display: flex; justify-content: center; width: 100%; max-width: 320px; }
.incident-timer:fullscreen .incident-tz-row,
.incident-timer:fullscreen .incident-hints,
.incident-timer:fullscreen .incident-controls { display: none; }

/* ---- Pane label with action (copy button) ---- */
.pane-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pane-label-format { color: var(--fg-2); font-weight: normal; text-transform: none; letter-spacing: 0; }

/* ---- Nines calc ---- */
.nines-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: 20px; }
.nines-row { display: flex; align-items: center; gap: 10px; }
.nines-row-idx {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  min-width: 24px; letter-spacing: .05em;
}
.nines-row input {
  flex: 1; min-width: 0; max-width: 160px;
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-1); color: var(--fg-0);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 8px;
}
.nines-row-unit { font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }

/* ---- Colour picker ---- */
.colour-block {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 16px;
}
.colour-block-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.colour-block-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .1em; text-transform: uppercase;
}
.colour-block-body { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.colour-picker-native {
  width: 84px; height: 84px; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-1); cursor: pointer;
}
.colour-picker-native::-webkit-color-swatch-wrapper { padding: 4px; }
.colour-picker-native::-webkit-color-swatch { border-radius: 4px; border: 1px solid var(--border); }
.colour-fields {
  flex: 1; min-width: 220px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px;
}
.colour-fields .tool-field input { width: 100%; min-width: 0; }

.colour-swap-row { display: flex; justify-content: center; margin: 6px 0 16px; }

.colour-preview {
  padding: 24px;
  border: 1px solid; border-radius: var(--radius-sm);
  margin-top: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
.colour-preview-large  { font-size: 22px; font-weight: 600; line-height: 1.3; }
.colour-preview-normal { font-size: 14px; line-height: 1.55; }
.colour-preview-mono   { font-family: var(--font-mono); font-size: 13px; }

.colour-ratio {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 12px; padding: 12px 16px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.colour-ratio-number {
  font-family: var(--font-mono); font-size: 24px; color: var(--fg-0);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.wcag-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.wcag-badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  padding: 4px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  display: inline-flex; gap: 6px; align-items: center;
}
.wcag-pass { color: var(--success); border-color: var(--success); }
.wcag-fail { color: var(--danger);  border-color: var(--border); opacity: .75; }
.wcag-badge-sub { color: var(--fg-2); text-transform: none; letter-spacing: 0; }

.colour-palette {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px;
}
.colour-palette-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.colour-swatch {
  width: 28px; height: 28px; flex: none;
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; padding: 0;
}
.colour-palette-hex {
  flex: 1; font-family: var(--font-mono); font-size: 12px; color: var(--fg-0);
}

.oklch-clipped {
  color: var(--warn);
  font-style: normal;
  letter-spacing: .04em;
}

/* APCA row (companion to .colour-ratio) */
.apca-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; padding: 10px 16px;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.apca-score { display: inline-flex; align-items: baseline; gap: 8px; }
.apca-score-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-2);
}
.apca-score-value {
  font-family: var(--font-mono); font-size: 20px; color: var(--fg-0);
  font-variant-numeric: tabular-nums;
}
.apca-tier {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  padding: 4px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  text-transform: uppercase;
}
.apca-tier-pass { color: var(--success); border-color: var(--success); }
.apca-tier-warn { color: var(--warn);    border-color: var(--warn); }
.apca-tier-fail { color: var(--danger);  border-color: var(--border); opacity: .75; }
.apca-hint { font-family: var(--font-mono); font-size: 11px; color: var(--fg-2); }

/* Subsection spacer used by Ramp/Schemes/Cvd/Matrix */
.tool-subsection { margin-top: 22px; }

/* Tonal ramp */
.colour-ramp {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px;
}
.colour-ramp-step {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
}
.colour-ramp-swatch {
  height: 54px; width: 100%; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer;
}
.colour-ramp-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  text-align: center;
}
.colour-ramp-hex {
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-2);
  text-align: center; opacity: .7;
}

/* Schemes */
.colour-schemes {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px;
}
.colour-scheme-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  padding: 8px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.colour-scheme-swatch {
  height: 52px; width: 100%; padding: 0;
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer;
}
.colour-scheme-hex {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-0);
  text-align: center;
}
.colour-scheme-ratio {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  font-variant-numeric: tabular-nums; text-align: center;
}

/* CVD preview */
.cvd-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px; margin-top: 8px;
}
.cvd-cell { display: flex; flex-direction: column; gap: 6px; }
.cvd-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .1em; text-transform: uppercase;
}
.cvd-preview {
  padding: 14px;
  border: 1px solid; border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 6px;
}
.cvd-preview-large { font-size: 16px; font-weight: 600; line-height: 1.3; }
.cvd-preview-mono  { font-family: var(--font-mono); font-size: 12px; }

/* Caption above tool subsections that need explanation */
.tool-caption {
  margin: 6px 0 10px;
  font-family: var(--font-sans); font-size: 12.5px;
  color: var(--fg-1); line-height: 1.55;
  max-width: 72ch;
}

/* Contrast matrix — CSS grid */
.contrast-matrix-wrap {
  margin-top: 10px; overflow-x: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-1);
  padding: 10px;
}
.contrast-matrix {
  display: grid;
  gap: 4px;
  align-items: stretch;
  justify-items: stretch;
}
.contrast-corner {
  width: 56px; min-width: 56px;
}
.contrast-header {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 2px 0;
}
.contrast-header-row  { width: 56px; min-width: 56px; }
.contrast-header-col  { min-width: 72px; }
.contrast-header-swatch {
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--border); border-radius: 4px;
  cursor: pointer; display: block;
  transition: transform .12s ease, border-color .12s ease;
}
.contrast-header-swatch:hover {
  transform: scale(1.08);
  border-color: var(--accent);
}
.contrast-header-hex {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--fg-2); font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.contrast-cell {
  min-height: 58px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  font-family: var(--font-mono);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 4px;
  contain: content;
  cursor: help;
}
.contrast-cell-aa-text { font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.contrast-cell-score   { font-size: 11px; font-variant-numeric: tabular-nums; opacity: .9; }
.contrast-cell-self {
  background: transparent !important; color: transparent !important;
  border-style: dashed; border-color: var(--border); opacity: .35;
  cursor: default;
}
.contrast-cell-aaa       { border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
.contrast-cell-aa        { border-color: var(--success); }
.contrast-cell-aa-large  { border-color: var(--warn); }
.contrast-cell-fail      { border-color: var(--border); opacity: .55; }

.contrast-legend {
  display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-left: auto;
}
.contrast-legend-item {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  padding: 2px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: transparent;
  text-transform: uppercase;
}
.contrast-legend-item.contrast-cell-aaa       { color: var(--success); border-color: var(--success); box-shadow: inset 0 0 0 1px var(--success); }
.contrast-legend-item.contrast-cell-aa        { color: var(--success); border-color: var(--success); }
.contrast-legend-item.contrast-cell-aa-large  { color: var(--warn); border-color: var(--warn); }
.contrast-legend-item.contrast-cell-fail      { color: var(--fg-2); }

/* ---- World clock ---- */
.world-clock {
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--bg-1);
}
.world-clock:fullscreen {
  padding: 4vh 4vw; gap: 4vh;
  justify-content: center;
  border-radius: 0; border: 0;
  background: var(--bg-0);
}

.world-clock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.world-clock:fullscreen .world-clock-grid {
  gap: 4vw;
  grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr));
}

.world-clock-card {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 16px;
  background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.world-clock:fullscreen .world-clock-card {
  padding: 3vh 2vw; gap: 1vh;
  background: transparent; border: 0;
}
.world-clock-remove {
  position: absolute; top: 6px; right: 6px;
  background: transparent; border: 0; padding: 4px;
  color: var(--fg-2); cursor: pointer; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.world-clock-card:hover .world-clock-remove { opacity: 1; }
.world-clock-remove:hover { color: var(--danger); background: var(--bg-2); }
.world-clock:fullscreen .world-clock-remove { display: none; }

.world-clock-label {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  letter-spacing: .1em; text-transform: uppercase;
}
.world-clock:fullscreen .world-clock-label { font-size: 1.2vw; letter-spacing: .2em; }

.world-clock-time {
  font-family: var(--font-mono); font-size: 36px; color: var(--fg-0);
  font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1;
}
.world-clock:fullscreen .world-clock-time { font-size: 6vw; }

.world-clock-meta {
  display: flex; gap: 12px; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
}
.world-clock:fullscreen .world-clock-meta { font-size: 1vw; gap: 2vw; }
.world-clock-offset { color: var(--accent); }

.world-clock-controls { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.world-clock-hints {
  display: flex; gap: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-2);
  flex-wrap: wrap;
}
.world-clock-hints span { display: inline-flex; gap: 5px; align-items: center; }
.world-clock:fullscreen .world-clock-controls,
.world-clock:fullscreen .world-clock-hints { display: none; }

/* Shared strength-meter + crack-time grid — diceware, password-gen */
.strength-row {
  display: flex; gap: 12px; align-items: center;
  margin-top: 10px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
}
.strength-row .meter { flex: 1; min-width: 120px; max-width: 360px; }
.strength-row .strength-readout strong { color: var(--fg-0); }

.meter {
  height: 6px; background: var(--bg-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  transition: width 140ms ease, background 140ms ease;
}
.meter-fill.weak      { background: var(--danger); }
.meter-fill.fair      { background: var(--warn); }
.meter-fill.strong    { background: var(--accent); }
.meter-fill.excellent { background: var(--success); }

.crack-grid {
  margin: 14px 0 0;
  display: grid; grid-template-columns: auto 1fr; gap: 4px 16px;
  font-family: var(--font-mono); font-size: 12px;
}
.crack-grid dt { color: var(--fg-2); }
.crack-grid dd { margin: 0; color: var(--fg-0); }
.crack-grid .crack-rate { color: var(--fg-3); }

/* password-gen specific: class checkboxes row */
.pwgen-classes { margin-top: 8px; }
.pwgen-check {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
  cursor: pointer;
}
.pwgen-check input { cursor: pointer; }
.pwgen-check:hover { color: var(--fg-0); }


/* ---- codename-gen ---- */
.codename-classification {
  display: inline-block;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .25em; text-transform: uppercase;
  color: var(--danger); border: 1px solid var(--danger);
  padding: 3px 8px; margin-bottom: 20px;
}
.codename-display {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: clamp(32px, 8vw, 64px);
  line-height: 1.05; letter-spacing: .04em;
  color: var(--accent);
  margin: 0 0 10px;
  word-break: break-word;
}
.codename-spinning .codename-display { animation: codename-jitter 50ms steps(2) infinite; }
@keyframes codename-jitter {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(1px, -1px); }
  100% { transform: translate(-1px, 1px); }
}
.codename-meta {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-bottom: 28px;
}
.codename-meta b { color: var(--fg-0); font-weight: var(--weight-medium); }
.codename-madlib {
  position: relative;
  background: var(--bg-1); border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 20px 14px;
}
.codename-madlib::before {
  content: "// DECLASSIFIED EXCERPT";
  position: absolute; top: -9px; left: 16px;
  background: var(--bg-0); padding: 0 6px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .2em; color: var(--fg-2);
}
.codename-madlib p {
  font-family: var(--font-sans); font-size: 15px;
  line-height: 1.8; margin: 0 0 14px; color: var(--fg-0);
}
.codename-slot {
  font-family: var(--font-mono); font-size: 0.92em;
  color: var(--accent); background: var(--accent-bg);
  padding: 1px 5px; border-radius: var(--radius-sm);
}
.codename-spinning .codename-slot { filter: blur(2px); }
.codename-file-line {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2);
  border-top: 1px solid var(--border); padding-top: 10px;
}
.codename-controls { margin-top: 24px; align-items: center; }
.codename-status {
  font-family: var(--font-mono); font-size: 12px; color: var(--accent);
  min-height: 1em;
}
.codename-hints {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 14px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2);
}
@media (prefers-reduced-motion: reduce) {
  .codename-spinning .codename-display { animation: none; }
  .codename-spinning .codename-slot { filter: none; }
}

/* --- Mermaid diagrams (build-time Kroki SVG floor + client-side upgrade) --- */
/* The hidden <pre> carries the source the client reads to re-render; class
   selector beats `.prose pre` (same-specificity element rule) without !important. */
.prose pre.mermaid-source { display: none; }
/* Pre-rendered floor ships one SVG per theme; show the one matching the active
   theme. :root is dark (the default), so light is the explicit override. */
.mermaid-theme { display: block; }
.mermaid-theme-light { display: none; }
[data-theme="light"] .mermaid-theme-dark { display: none; }
[data-theme="light"] .mermaid-theme-light { display: block; }
.mermaid-figure {
  margin: 24px 0;
  padding: 16px;
  background: var(--bg-1);
  border: 1px solid var(--fg-3);
  border-radius: 6px;
  overflow-x: auto;
  text-align: center;
}
.mermaid-figure svg {
  max-width: 100%;
  height: auto;
}
/* tokens.css's `.label` utility (mono, xs, tracked, uppercase) also matches
   mermaid's <g class="label"> groups. Undo it inside diagrams so labels render
   in the font, size, and case the bake engine measured them in; otherwise
   they're shrunk, shouted, and (in a font the engine didn't measure) overflow. */
.mermaid-figure svg .label,
.mermaid-lightbox svg .label {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: normal;
  text-transform: none;
  font-weight: inherit;
}
.mermaid-figure.mermaid-zoomable { position: relative; }
.mermaid-figure.mermaid-zoomable svg { cursor: zoom-in; }
.mermaid-zoom-btn {
  position: absolute;
  top: 8px; right: 8px;
  padding: 2px 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-2);
  background: var(--bg-2);
  border: 1px solid var(--fg-3);
  border-radius: 4px;
  cursor: zoom-in;
  opacity: 0.7;
}
.mermaid-zoom-btn:hover, .mermaid-zoom-btn:focus-visible {
  opacity: 1;
  color: var(--fg-0);
}

/* Full-viewport zoomable diagram lightbox */
.mermaid-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: color-mix(in srgb, var(--bg-0) 98%, transparent);
}
.mermaid-lightbox-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.mermaid-lightbox-viewport:active { cursor: grabbing; }
.mermaid-lightbox-content {
  position: absolute;
  top: 0; left: 0;
  transform-origin: 0 0;
}
.mermaid-lightbox-toolbar {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  gap: 8px;
}
.mermaid-lightbox-toolbar button {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  font-family: var(--font-mono); font-size: 16px;
  color: var(--fg-1);
  background: var(--bg-2);
  border: 1px solid var(--fg-3);
  border-radius: 6px;
  cursor: pointer;
}
.mermaid-lightbox-toolbar button:hover, .mermaid-lightbox-toolbar button:focus-visible {
  color: var(--fg-0);
  border-color: var(--fg-2);
}

/* "← admin" back link on admin sub-pages (components/AdminBack.jsx) */
.admin-back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.admin-back:hover, .admin-back:focus-visible { color: var(--accent); }

/* "now" editor (/admin/now) */
.now-editor-preview .now-block { font-size: 15px; }
.now-editor-preview .now-block p:last-child { margin-bottom: 0; }

/* ===== highlight.css ===== */
/* GENERATED — do not edit by hand. See scripts/gen-highlight-css.py.
   Pygments token colours for code blocks rendered by api/app/content/renderer.py.
   Dark (monokai) is the default; light (xcode) overrides under
   [data-theme="light"]. Markup is <pre><code class="language-X highlight">
   <span class="k">…</span></code></pre> — token classes are descendants of .highlight. */

/* --- Code-block container (posts + cheatsheets share .prose) --- */
.prose pre {
  background: #272822;
  color: #f8f8f2;
  margin: 24px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.6;
  tab-size: 2;
}
/* The .highlight class sits on the <code>; keep its own box transparent so the
   <pre> chrome above shows through and inline-code styling never leaks in. */
.prose pre code.highlight {
  background: transparent;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
}
[data-theme="light"] .prose pre {
  background: #ffffff;
  color: inherit;
}

/* --- monokai (default / dark) --- */
.prose .highlight .hll { background-color: #49483e }
.prose .highlight .c { color: #959077 } /* Comment */
.prose .highlight .err { color: #ED007E; background-color: #1E0010 } /* Error */
.prose .highlight .esc { color: #F8F8F2 } /* Escape */
.prose .highlight .g { color: #F8F8F2 } /* Generic */
.prose .highlight .k { color: #66D9EF } /* Keyword */
.prose .highlight .l { color: #AE81FF } /* Literal */
.prose .highlight .n { color: #F8F8F2 } /* Name */
.prose .highlight .o { color: #FF4689 } /* Operator */
.prose .highlight .x { color: #F8F8F2 } /* Other */
.prose .highlight .p { color: #F8F8F2 } /* Punctuation */
.prose .highlight .ch { color: #959077 } /* Comment.Hashbang */
.prose .highlight .cm { color: #959077 } /* Comment.Multiline */
.prose .highlight .cp { color: #959077 } /* Comment.Preproc */
.prose .highlight .cpf { color: #959077 } /* Comment.PreprocFile */
.prose .highlight .c1 { color: #959077 } /* Comment.Single */
.prose .highlight .cs { color: #959077 } /* Comment.Special */
.prose .highlight .gd { color: #FF4689 } /* Generic.Deleted */
.prose .highlight .ge { color: #F8F8F2; font-style: italic } /* Generic.Emph */
.prose .highlight .ges { color: #F8F8F2; font-weight: bold; font-style: italic } /* Generic.EmphStrong */
.prose .highlight .gr { color: #F8F8F2 } /* Generic.Error */
.prose .highlight .gh { color: #F8F8F2 } /* Generic.Heading */
.prose .highlight .gi { color: #A6E22E } /* Generic.Inserted */
.prose .highlight .go { color: #66D9EF } /* Generic.Output */
.prose .highlight .gp { color: #FF4689; font-weight: bold } /* Generic.Prompt */
.prose .highlight .gs { color: #F8F8F2; font-weight: bold } /* Generic.Strong */
.prose .highlight .gu { color: #959077 } /* Generic.Subheading */
.prose .highlight .gt { color: #F8F8F2 } /* Generic.Traceback */
.prose .highlight .kc { color: #66D9EF } /* Keyword.Constant */
.prose .highlight .kd { color: #66D9EF } /* Keyword.Declaration */
.prose .highlight .kn { color: #FF4689 } /* Keyword.Namespace */
.prose .highlight .kp { color: #66D9EF } /* Keyword.Pseudo */
.prose .highlight .kr { color: #66D9EF } /* Keyword.Reserved */
.prose .highlight .kt { color: #66D9EF } /* Keyword.Type */
.prose .highlight .ld { color: #E6DB74 } /* Literal.Date */
.prose .highlight .m { color: #AE81FF } /* Literal.Number */
.prose .highlight .s { color: #E6DB74 } /* Literal.String */
.prose .highlight .na { color: #A6E22E } /* Name.Attribute */
.prose .highlight .nb { color: #F8F8F2 } /* Name.Builtin */
.prose .highlight .nc { color: #A6E22E } /* Name.Class */
.prose .highlight .no { color: #66D9EF } /* Name.Constant */
.prose .highlight .nd { color: #A6E22E } /* Name.Decorator */
.prose .highlight .ni { color: #F8F8F2 } /* Name.Entity */
.prose .highlight .ne { color: #A6E22E } /* Name.Exception */
.prose .highlight .nf { color: #A6E22E } /* Name.Function */
.prose .highlight .nl { color: #F8F8F2 } /* Name.Label */
.prose .highlight .nn { color: #F8F8F2 } /* Name.Namespace */
.prose .highlight .nx { color: #A6E22E } /* Name.Other */
.prose .highlight .py { color: #F8F8F2 } /* Name.Property */
.prose .highlight .nt { color: #FF4689 } /* Name.Tag */
.prose .highlight .nv { color: #F8F8F2 } /* Name.Variable */
.prose .highlight .ow { color: #FF4689 } /* Operator.Word */
.prose .highlight .pm { color: #F8F8F2 } /* Punctuation.Marker */
.prose .highlight .w { color: #F8F8F2 } /* Text.Whitespace */
.prose .highlight .mb { color: #AE81FF } /* Literal.Number.Bin */
.prose .highlight .mf { color: #AE81FF } /* Literal.Number.Float */
.prose .highlight .mh { color: #AE81FF } /* Literal.Number.Hex */
.prose .highlight .mi { color: #AE81FF } /* Literal.Number.Integer */
.prose .highlight .mo { color: #AE81FF } /* Literal.Number.Oct */
.prose .highlight .sa { color: #E6DB74 } /* Literal.String.Affix */
.prose .highlight .sb { color: #E6DB74 } /* Literal.String.Backtick */
.prose .highlight .sc { color: #E6DB74 } /* Literal.String.Char */
.prose .highlight .dl { color: #E6DB74 } /* Literal.String.Delimiter */
.prose .highlight .sd { color: #E6DB74 } /* Literal.String.Doc */
.prose .highlight .s2 { color: #E6DB74 } /* Literal.String.Double */
.prose .highlight .se { color: #AE81FF } /* Literal.String.Escape */
.prose .highlight .sh { color: #E6DB74 } /* Literal.String.Heredoc */
.prose .highlight .si { color: #E6DB74 } /* Literal.String.Interpol */
.prose .highlight .sx { color: #E6DB74 } /* Literal.String.Other */
.prose .highlight .sr { color: #E6DB74 } /* Literal.String.Regex */
.prose .highlight .s1 { color: #E6DB74 } /* Literal.String.Single */
.prose .highlight .ss { color: #E6DB74 } /* Literal.String.Symbol */
.prose .highlight .bp { color: #F8F8F2 } /* Name.Builtin.Pseudo */
.prose .highlight .fm { color: #A6E22E } /* Name.Function.Magic */
.prose .highlight .vc { color: #F8F8F2 } /* Name.Variable.Class */
.prose .highlight .vg { color: #F8F8F2 } /* Name.Variable.Global */
.prose .highlight .vi { color: #F8F8F2 } /* Name.Variable.Instance */
.prose .highlight .vm { color: #F8F8F2 } /* Name.Variable.Magic */
.prose .highlight .il { color: #AE81FF } /* Literal.Number.Integer.Long */

/* --- xcode (light) --- */
[data-theme="light"] .prose .highlight .hll { background-color: #ffffcc }
[data-theme="light"] .prose .highlight .c { color: #177500 } /* Comment */
[data-theme="light"] .prose .highlight .err { color: #000 } /* Error */
[data-theme="light"] .prose .highlight .k { color: #A90D91 } /* Keyword */
[data-theme="light"] .prose .highlight .l { color: #1C01CE } /* Literal */
[data-theme="light"] .prose .highlight .n { color: #000 } /* Name */
[data-theme="light"] .prose .highlight .o { color: #000 } /* Operator */
[data-theme="light"] .prose .highlight .ch { color: #177500 } /* Comment.Hashbang */
[data-theme="light"] .prose .highlight .cm { color: #177500 } /* Comment.Multiline */
[data-theme="light"] .prose .highlight .cp { color: #633820 } /* Comment.Preproc */
[data-theme="light"] .prose .highlight .cpf { color: #177500 } /* Comment.PreprocFile */
[data-theme="light"] .prose .highlight .c1 { color: #177500 } /* Comment.Single */
[data-theme="light"] .prose .highlight .cs { color: #177500 } /* Comment.Special */
[data-theme="light"] .prose .highlight .kc { color: #A90D91 } /* Keyword.Constant */
[data-theme="light"] .prose .highlight .kd { color: #A90D91 } /* Keyword.Declaration */
[data-theme="light"] .prose .highlight .kn { color: #A90D91 } /* Keyword.Namespace */
[data-theme="light"] .prose .highlight .kp { color: #A90D91 } /* Keyword.Pseudo */
[data-theme="light"] .prose .highlight .kr { color: #A90D91 } /* Keyword.Reserved */
[data-theme="light"] .prose .highlight .kt { color: #A90D91 } /* Keyword.Type */
[data-theme="light"] .prose .highlight .ld { color: #1C01CE } /* Literal.Date */
[data-theme="light"] .prose .highlight .m { color: #1C01CE } /* Literal.Number */
[data-theme="light"] .prose .highlight .s { color: #C41A16 } /* Literal.String */
[data-theme="light"] .prose .highlight .na { color: #836C28 } /* Name.Attribute */
[data-theme="light"] .prose .highlight .nb { color: #A90D91 } /* Name.Builtin */
[data-theme="light"] .prose .highlight .nc { color: #3F6E75 } /* Name.Class */
[data-theme="light"] .prose .highlight .no { color: #000 } /* Name.Constant */
[data-theme="light"] .prose .highlight .nd { color: #000 } /* Name.Decorator */
[data-theme="light"] .prose .highlight .ni { color: #000 } /* Name.Entity */
[data-theme="light"] .prose .highlight .ne { color: #000 } /* Name.Exception */
[data-theme="light"] .prose .highlight .nf { color: #000 } /* Name.Function */
[data-theme="light"] .prose .highlight .nl { color: #000 } /* Name.Label */
[data-theme="light"] .prose .highlight .nn { color: #000 } /* Name.Namespace */
[data-theme="light"] .prose .highlight .nx { color: #000 } /* Name.Other */
[data-theme="light"] .prose .highlight .py { color: #000 } /* Name.Property */
[data-theme="light"] .prose .highlight .nt { color: #000 } /* Name.Tag */
[data-theme="light"] .prose .highlight .nv { color: #000 } /* Name.Variable */
[data-theme="light"] .prose .highlight .ow { color: #000 } /* Operator.Word */
[data-theme="light"] .prose .highlight .mb { color: #1C01CE } /* Literal.Number.Bin */
[data-theme="light"] .prose .highlight .mf { color: #1C01CE } /* Literal.Number.Float */
[data-theme="light"] .prose .highlight .mh { color: #1C01CE } /* Literal.Number.Hex */
[data-theme="light"] .prose .highlight .mi { color: #1C01CE } /* Literal.Number.Integer */
[data-theme="light"] .prose .highlight .mo { color: #1C01CE } /* Literal.Number.Oct */
[data-theme="light"] .prose .highlight .sa { color: #C41A16 } /* Literal.String.Affix */
[data-theme="light"] .prose .highlight .sb { color: #C41A16 } /* Literal.String.Backtick */
[data-theme="light"] .prose .highlight .sc { color: #2300CE } /* Literal.String.Char */
[data-theme="light"] .prose .highlight .dl { color: #C41A16 } /* Literal.String.Delimiter */
[data-theme="light"] .prose .highlight .sd { color: #C41A16 } /* Literal.String.Doc */
[data-theme="light"] .prose .highlight .s2 { color: #C41A16 } /* Literal.String.Double */
[data-theme="light"] .prose .highlight .se { color: #C41A16 } /* Literal.String.Escape */
[data-theme="light"] .prose .highlight .sh { color: #C41A16 } /* Literal.String.Heredoc */
[data-theme="light"] .prose .highlight .si { color: #C41A16 } /* Literal.String.Interpol */
[data-theme="light"] .prose .highlight .sx { color: #C41A16 } /* Literal.String.Other */
[data-theme="light"] .prose .highlight .sr { color: #C41A16 } /* Literal.String.Regex */
[data-theme="light"] .prose .highlight .s1 { color: #C41A16 } /* Literal.String.Single */
[data-theme="light"] .prose .highlight .ss { color: #C41A16 } /* Literal.String.Symbol */
[data-theme="light"] .prose .highlight .bp { color: #5B269A } /* Name.Builtin.Pseudo */
[data-theme="light"] .prose .highlight .fm { color: #000 } /* Name.Function.Magic */
[data-theme="light"] .prose .highlight .vc { color: #000 } /* Name.Variable.Class */
[data-theme="light"] .prose .highlight .vg { color: #000 } /* Name.Variable.Global */
[data-theme="light"] .prose .highlight .vi { color: #000 } /* Name.Variable.Instance */
[data-theme="light"] .prose .highlight .vm { color: #000 } /* Name.Variable.Magic */
[data-theme="light"] .prose .highlight .il { color: #1C01CE } /* Literal.Number.Integer.Long */
[data-theme="light"] .prose .highlight .esc { color: inherit }
[data-theme="light"] .prose .highlight .g { color: inherit }
[data-theme="light"] .prose .highlight .x { color: inherit }
[data-theme="light"] .prose .highlight .p { color: inherit }
[data-theme="light"] .prose .highlight .gd { color: inherit }
[data-theme="light"] .prose .highlight .ge { color: inherit }
[data-theme="light"] .prose .highlight .ges { color: inherit }
[data-theme="light"] .prose .highlight .gr { color: inherit }
[data-theme="light"] .prose .highlight .gh { color: inherit }
[data-theme="light"] .prose .highlight .gi { color: inherit }
[data-theme="light"] .prose .highlight .go { color: inherit }
[data-theme="light"] .prose .highlight .gp { color: inherit }
[data-theme="light"] .prose .highlight .gs { color: inherit }
[data-theme="light"] .prose .highlight .gu { color: inherit }
[data-theme="light"] .prose .highlight .gt { color: inherit }
[data-theme="light"] .prose .highlight .pm { color: inherit }
[data-theme="light"] .prose .highlight .w { color: inherit }