/*
 * The guides share one sheet: they are plain static HTML, served straight from
 * public/, with no build step and no JavaScript. Crawlers — search engines and
 * the AI ones, which mostly do not run scripts — get the whole page in the
 * markup, and the tokens follow the reader's theme the way the app does.
 */

:root {
  --bg: #0f1720;
  --panel: #16202b;
  --panel2: #1d2937;
  --line: #263445;
  --text: #e6edf5;
  --muted: #8ca0b8;
  --accent: #38bdf8;
  --accent2: #0ea5e9;
  --on-accent: #04121c;
  --bar-a: #18242f;
  --bar-b: #131c26;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #eef2f7;
    --panel: #fff;
    --panel2: #f4f7fa;
    --line: #d6dfea;
    --text: #0f1c2b;
    --muted: #5a6b7f;
    --accent: #0284c7;
    --accent2: #0ea5e9;
    --bar-a: #fff;
    --bar-b: #f1f5f9;
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
a { color: var(--accent); }

header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bar-a), var(--bar-b));
}
.bar { display: flex; align-items: center; gap: 12px; padding: 14px 0; }
.mark { display: block; width: 28px; height: 28px; flex: none; }
.brand { font-weight: 650; letter-spacing: .2px; color: var(--text); text-decoration: none; }
.bar nav { margin-left: auto; display: flex; gap: 18px; font-size: 14px; }
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover { color: var(--text); }

.crumbs { font-size: 13.5px; color: var(--muted); padding: 18px 0 0; }
.crumbs a { color: var(--muted); }

h1 { font-size: clamp(27px, 4.4vw, 38px); line-height: 1.15; margin: 14px 0 12px; letter-spacing: -.4px; }
h2 { font-size: 23px; margin: 40px 0 10px; letter-spacing: -.2px; }
h3 { font-size: 17px; margin: 26px 0 6px; }
p { margin: 0 0 15px; }
.lede { font-size: 18.5px; color: var(--muted); margin-bottom: 26px; }
article { padding-bottom: 20px; }

ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 8px; }

table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 8px 0 18px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .5px; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.scroll { overflow-x: auto; }

.note {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent2);
  border-radius: 0 11px 11px 0;
  padding: 15px 18px;
  margin: 22px 0;
}
.note p:last-child { margin-bottom: 0; }
.note b { color: var(--text); }

.cta {
  display: inline-block; background: var(--accent2); color: var(--on-accent);
  font-weight: 650; padding: 11px 20px; border-radius: 10px; text-decoration: none;
}
.cta:hover { background: var(--accent); }

.next { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 20px; }
.next h2 { margin-top: 0; font-size: 18px; }
.next ul { list-style: none; padding: 0; }
.next li { margin-bottom: 9px; }

footer {
  border-top: 1px solid var(--line);
  margin-top: 48px; padding: 22px 0 40px;
  font-size: 14px; color: var(--muted);
}
footer a { color: var(--muted); }