/* Otis tokens, copied from github.com/10-01/otis tokens/otis.css. One change: the Google Fonts @import is
   replaced by the local @font-face rules below, so the site works offline. Everything after them is verbatim. */
@font-face { font-family: "Geist"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "Geist Mono"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations"); }
/* Otis tokens, draft 1. Warm neutrals, one orange, flat, fast. */

:root, [data-theme="light"] {
  --paper: #faf9f5;
  --ink: #1a1814;
  --ink-2: #6b6862;
  --ink-3: #a09e96;
  --line: #e6e3db;
  --surface: #f3f1eb;
  --well: #ece8df;                   /* grouped module on paper, one step past --surface */
  --canvas: #e3ddcd;                 /* backdrop behind an inset workspace, always past --surface */
  --chrome: #e6e9ed;                 /* cool field behind a sheet; not canvas */
  --sheet: #ffffff;                  /* lifted panel on chrome; the one white */
  --sheet-line: #e6e3db;             /* hairline and track on a sheet; --line sits under --sheet in dark */

  --accent: #ff7a3a;
  --accent-strong: #f5610f;
  --accent-text: #c2440a;            /* orange for text on paper; #ff7a3a fails contrast on light */
  --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);

  --ok: #4f8a5b;
  --warn: #b8862b;
  --bad: #b5443a;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fast: 150ms;                     /* hover, press, state */
  --move: 240ms;                     /* push, sheet, arrival, illustration state */
  --stagger: 40ms;                   /* gap between rows arriving */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --radius: 6px;
  color-scheme: light;
}

[data-theme="dark"] {
  --paper: #1a1814;
  --ink: #f0eee5;
  --ink-2: #a09e96;
  --ink-3: #6b6862;
  --line: #2a2820;
  --surface: #232017;
  --well: #2c2920;
  --canvas: #100f0c;
  --chrome: #161618;
  --sheet: #2c2920;
  --sheet-line: #3d3a30;
  --accent-text: #ff7a3a;
  --ok: #6fae7c;
  --warn: #d6a05a;
  --bad: #d46a5f;
  color-scheme: dark;
}

/* Base */
* { box-sizing: border-box; }
html { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
[data-theme] { color: var(--ink); }   /* scoped themes re-resolve inherited color */
body { margin: 0; font-size: 15px; line-height: 1.5; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; }
p { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.mono, .num { font-family: var(--mono); font-feature-settings: "tnum"; }
.muted { color: var(--ink-2); }
.faint { color: var(--ink-3); }
.small { font-size: 13px; }
.label { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }

/* Layout */
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 32px; }
.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.nav .links { display: flex; gap: 28px; font-size: 14px; }
.nav .links a { color: var(--ink-2); }
.nav .links a:hover { color: var(--ink); text-decoration: none; }
.wordmark { font-weight: 600; letter-spacing: -0.02em; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.dot { display: inline-block; width: 10px; height: 10px; background: var(--accent); border-radius: 2px; }
.section { padding: 64px 0; }
.section + .section { border-top: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }

/* Canvas and workspace: an app shell inset over a recessed backdrop, lifted by contrast, not a shadow. */
.canvas { background: var(--canvas); min-height: 100vh; padding: 16px; }
.workspace { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; min-height: calc(100vh - 32px); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: var(--radius); border: 1px solid var(--line); background: transparent; color: var(--ink);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease), transform 60ms;
}
.btn:hover { background: var(--surface); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #1a1814; }
.btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }

/* Reading mode. Articles use .prose. Share pages and indexes wrap in .reading. */
.prose { max-width: 65ch; font-size: 17px; line-height: 1.65; }
.prose h1 { font-size: 40px; line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 20px; }
.prose h2 { font-size: 24px; line-height: 1.25; margin: 56px 0 14px; }
.prose p { margin: 0 0 22px; }
.prose ul { padding-left: 20px; margin: 0 0 22px; }
.prose li { margin-bottom: 6px; }
.prose blockquote { margin: 36px 0; padding-left: 20px; border-left: 2px solid var(--accent); color: var(--ink-2); font-size: 21px; line-height: 1.4; }
.prose pre { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; font-family: var(--mono); font-size: 13.5px; line-height: 1.55; overflow: auto; margin: 0 0 22px; }
.prose code { font-family: var(--mono); font-size: .92em; }
.prose p code { background: var(--surface); padding: 1px 5px; border-radius: 4px; }
.prose table { font-size: 14px; }
.prose a, .reading a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-3);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--fast) var(--ease);
}
.prose a:hover, .reading a:hover { text-decoration-color: var(--ink); }

.reading { font-size: 17px; line-height: 1.65; max-width: 720px; margin: 0 auto; padding: 40px 28px 72px; }
.reading h1 { font-size: 32px; line-height: 1.2; letter-spacing: -0.01em; max-width: 26ch; }
.reading h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.reading p { color: var(--ink-2); max-width: 62ch; }
.reading h1 + p, .reading h2 + p, .reading p + p { margin-top: 12px; }
.reading .intro { padding: 44px 0 36px; }
.reading .actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.reading a.btn, .reading a.btn:hover { text-decoration: none; }
.reading .nav a, .reading .wordmark { text-decoration: none; }
.reading .nav a { color: var(--ink-2); }
.reading .nav a:hover { color: var(--ink); }
.reading section { padding: 56px 0 12px; border-top: 1px solid var(--line); }
.reading footer { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

.reading .list { list-style: none; margin: 22px 0 0; padding: 0; }
.reading .list li { display: grid; grid-template-columns: 220px 1fr; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; }
.reading .list li:last-child { border-bottom: 0; }
.reading .list li a { font-weight: 500; }
.reading .list li span { color: var(--ink-2); }
@media (max-width: 600px) { .reading .list li { grid-template-columns: 1fr; gap: 4px; } }

/* Working mode */
.table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.3; }
.table th { text-align: left; font-weight: 500; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr { transition: background var(--fast) var(--ease); }
.table tbody tr:hover td { background: var(--surface); }
.table .num { text-align: right; white-space: nowrap; }
.table .pick { background: var(--accent-soft); }  /* the one highlighted row */
.table .sel td { background: var(--line); }       /* checkbox selection, neutral */
.table .group td { background: var(--surface); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); padding: 6px 10px; }
.boxed { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }

/* Stat strip */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.stats > div { padding: 20px 24px 20px 0; border-right: 1px solid var(--line); }
.stats > div:last-child { border-right: 0; }
.stats > div + div { padding-left: 24px; }
.stats .value { font-size: 32px; line-height: 1; letter-spacing: -0.02em; font-weight: 500; }
.stats .value.num { letter-spacing: 0; }
.stats .k { margin-top: 8px; }

/* Bars. Repeating meters fill in ink. Accent is the alarm. */
.bar { height: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--ink); border-radius: 2px; transition: width 400ms var(--ease); }
.bar.hot > i, .bar.low > i { background: var(--accent); }

/* Sheet on chrome. Menu-bar popovers and other lifted groups. */
.chrome { background: var(--chrome); }
.sheet { background: var(--sheet); border: 1px solid var(--line); border-radius: 8px; }

/* Live */
.live { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; vertical-align: middle; margin-right: 6px; }
@keyframes pulse { 50% { opacity: .3; } }

/* Arrival. Rows of a screen that just opened come in one after another, 8px up, in --move, --stagger apart.
   Once per navigation. Never on scroll. The whole choreography stays under 600ms. */
@keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.arrive > * { animation: arrive var(--move) var(--ease) both; }
.arrive > :nth-child(2) { animation-delay: calc(var(--stagger) * 1); }
.arrive > :nth-child(3) { animation-delay: calc(var(--stagger) * 2); }
.arrive > :nth-child(4) { animation-delay: calc(var(--stagger) * 3); }
.arrive > :nth-child(5) { animation-delay: calc(var(--stagger) * 4); }
.arrive > :nth-child(6) { animation-delay: calc(var(--stagger) * 5); }
.arrive > :nth-child(7) { animation-delay: calc(var(--stagger) * 6); }
.arrive > :nth-child(8) { animation-delay: calc(var(--stagger) * 7); }
.arrive > :nth-child(n+9) { animation-delay: calc(var(--stagger) * 8); }
@media (prefers-reduced-motion: reduce) { .arrive > * { animation: none; } }

/* Illustration. Ink line, 2px, round caps, the same weight at any size. Masses fill in ink.
   The one element that carries the screen's state (.state.on) fills in the accent. Nothing else is colored. */
.illo { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; display: block; }
.illo * { vector-effect: non-scaling-stroke; }
.illo .thin { stroke: var(--ink-3); stroke-width: 1; }
.illo .mass { fill: currentColor; stroke: none; }
.illo .state { fill: transparent; transition: fill var(--move) var(--ease); }
.illo .state.on { fill: var(--accent); stroke: var(--accent); }

/* Tags */
.tag { display: inline-block; font-family: var(--mono); font-size: 11px; padding: 2px 6px; border-radius: 4px; background: var(--accent-soft); color: var(--accent-text); }
.tag.plain { background: var(--surface); color: var(--ink-2); }