/* Calibrated — tokens and base
   Quiet panels on a darker desk, warm ink, low-contrast hairlines and one
   lamp: an amber line, text or star that marks the one live thing. Red marks
   faults and limits; green marks what passed. Everything else stays ink.

   Seeds: --bg (panel), --fg (ink), --live (lamp), plus --desk-depth.
   --muted, --title, --ok, --fault, --shade and every other ink, line and
   surface derive from them with color-mix(), so a theme is three colours and
   a scoped region re-derives all of them. Any of the derived inks can still
   be overridden after this file. See references/theming.md. */

:root, [data-theme="film"], [data-theme="light"] {
  /* ── seeds · "film" (light, default) */
  --bg: #f4f2ec;            /* paper panel */
  --fg: #262b2e;            /* ink */
  --live: #8a5d05;          /* lamp, dark enough to read as text on paper (≥4.5:1) */
  --desk-depth: 14%;
  color-scheme: light;
}

/* ── "night" dark theme: warm ink on slate panels */
[data-theme="night"], [data-theme="dark"] {
  --bg: #1b2225;
  --fg: #e5e0d3;
  --live: #dcb662;
  --desk-depth: 70%;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    --bg: #1b2225; --fg: #e5e0d3; --live: #dcb662;
    --desk-depth: 70%; color-scheme: dark;
  }
}

/* ── page settings, set on <html> (see references/looks.md)
   data-frame="paper": no desk; panels sit flush on the paper, split by rules.
   data-space="open": wider gaps and section spacing, for one big figure per screen. */
html:root[data-frame="paper"] { --desk-depth: 0%; }   /* beats a page's own dark-mode seed block */
:root[data-space="open"] { --gap: 28px; --pad: 26px; }

/* Derived tokens are declared on every theme root, so a section with its own
   data-theme (or .cal-theme plus seed overrides) recomputes them. */
:root, [data-theme], .cal-theme {
  /* ── type: a typewriter mono for words, a tighter mono for legends and figures */
  --font-body: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: var(--font-body);   /* headings only: may be a non-mono face (references/looks.md) */
  --display-case: uppercase;          /* none with a sans headline face */
  --display-weight: 500;              /* up to 700 with a sans headline face; mono titles stay 500 */
  --font-legend: "Chivo Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-body: 14px;
  --fs-small: 12.5px;
  --fs-legend: 11px;        /* every SVG label, tag, table head */
  --fs-control: 12px;       /* what people click or fill in: buttons, tabs, field labels */
  --fs-h2: 16px;            /* section heads: between titles and labels */
  --fs-h3: 19px;
  --fs-h1: clamp(28px, 3.2vw, 42px);
  --track-legend: .05em;
  --track-title: .03em;
  --stretch-title: 100%;    /* kept for old pages; titles no longer condense */

  /* ── line weights: hairlines for structure, a heavier rule for plates */
  --line-thick: 1.6px;
  --line-thin: 1px;

  /* ── derived supporting inks: they follow --bg and --fg, so a region that
     re-seeds only the panel and ink keeps readable titles, secondary text and
     status colours. The title pushes the ink further from mid-grey; ok and
     fault keep their hue and take the lightness of an ink-to-panel mix. All
     hold 4.5:1 on panel, raised and well when --fg on --bg is 11:1. */
  --title: oklch(from var(--fg) calc(l + (round(l) - l) * .35) calc(c * .5) h);
  --muted: color-mix(in oklab, var(--fg) 70%, var(--bg));      /* secondary text */
  --ok: oklch(from color-mix(in oklab, var(--fg) 75%, var(--bg)) l .09 148);
  --fault: oklch(from color-mix(in oklab, var(--fg) 66%, var(--bg)) l .15 32);
  --shade: color-mix(in srgb, var(--bg) 45%, black);   /* what the desk sinks towards */

  /* ── derived surfaces */
  --gutter: color-mix(in srgb, var(--bg), var(--shade) var(--desk-depth, 24%));   /* desk */
  --panel: var(--bg);
  --well: color-mix(in srgb, var(--bg) 90%, var(--shade));
  --raised: color-mix(in srgb, var(--bg) 94%, var(--fg));

  /* ── derived lines and inks */
  --edge: color-mix(in srgb, var(--bg) 86%, var(--fg));
  --edge-strong: color-mix(in srgb, var(--bg) 70%, var(--fg));
  --legend: color-mix(in srgb, var(--fg) 86%, var(--bg));
  --faint: color-mix(in oklab, var(--fg) 52%, var(--bg));      /* marks, never text: ticks, leaders, open nodes, field lines (≥3:1) */
  --key: color-mix(in oklab, var(--fg) 72%, var(--bg));        /* small text: keys, terms, scale numbers, quiet tags (≥4.5:1) */
  --glow: color-mix(in srgb, var(--live) 55%, transparent);     /* halo around the lamp star */
  --swipe: color-mix(in srgb, var(--live) 16%, transparent);    /* a faint lamp tint, for areas */
  --on-swipe: var(--fg);
  --hover: color-mix(in srgb, var(--fg) 5%, transparent);
  --current: color-mix(in srgb, var(--fg) 8%, transparent);
  --select-bg: color-mix(in srgb, var(--live) 30%, transparent);
  --select-fg: var(--fg);
  --star: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);

  /* ── spacing */
  --gap: 14px;
  --pad: 18px;
  --wrap: 1240px;
}

/* ── a themed section inside the page paints its own sheet and ink */
[data-theme]:not(:root), .cal-theme { background: var(--bg); color: var(--fg); }

/* ── base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--gutter); }
body {
  color: var(--fg);
  font: 400 var(--fs-body)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--select-bg); color: var(--select-fg); }
:focus-visible { outline: var(--line-thin) solid var(--live); outline-offset: 2px; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--edge-strong); }
::-webkit-scrollbar-track { background: transparent; }
* { scrollbar-color: var(--edge-strong) transparent; scrollbar-width: thin; }
input, textarea { caret-color: var(--fg); }
code, kbd, samp { font-family: var(--font-legend); font-size: .82em; color: var(--fg); }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--edge-strong); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--fg); }
img, svg { display: block; max-width: 100%; }
svg { height: auto; }

/* ── type roles */
.lg {                          /* legend: labels, tags, numbers */
  font-family: var(--font-legend);
  font-variant-ligatures: none;
  font-size: var(--fs-legend);
  letter-spacing: var(--track-legend);
  font-variant-numeric: tabular-nums;
}
.up { text-transform: uppercase; }
.title {                       /* titles: typewriter caps, medium weight, tracked */
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  text-transform: var(--display-case);
  letter-spacing: var(--track-title);
  line-height: 1.2;
  color: var(--title);
  text-wrap: balance;
}
.word {                        /* the wordmark */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--title);
}
/* the ruled lockup: the word sits on a scale of ten with the lamp at 7 */
.word.ruled { display: inline-block; position: relative; padding-bottom: 12px; }
.word.ruled::before,
.word.ruled::after { content: ""; position: absolute; bottom: 0; }
.word.ruled::before {          /* the live graduation: a lamp tick centred on the 7 (no glow: the star's is the only blur) */
  left: calc((100% - .14em) * .7 - .3px); width: 1.6px; height: 9px; z-index: 1;
  background: var(--live);
}
.word.ruled::after {           /* the scale: hairline, long ticks at 0/5/10, short ticks between */
  left: 0; right: .14em; height: 7px;
  border-top: var(--line-thin) solid var(--edge-strong); border-right: var(--line-thin) solid var(--faint);
  background:
    repeating-linear-gradient(90deg, var(--faint) 0 1px, transparent 1px 50%) top / 100% 7px no-repeat,
    repeating-linear-gradient(90deg, var(--edge-strong) 0 1px, transparent 1px 10%) top / 100% 4px no-repeat;
}

/* ── ink utilities */
.mut { color: var(--muted); }
.fnt { color: var(--faint); }
.okc { color: var(--ok); }
.flt { color: var(--fault); }
.live { color: var(--live); }  /* the lamp: the one live thing, in lamp ink */
.star {                        /* the lamp star, inline: <span class="star"></span> */
  display: inline-block; width: 9px; height: 9px; vertical-align: -1px;
  background: var(--live); clip-path: var(--star);
  filter: drop-shadow(0 0 3px var(--glow));
}
.star.ok { background: var(--ok); filter: none; }

/* ── layout */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(16px, 3vw, 32px); }

/* ── figures: every Calibrated SVG sets its labels in legend type */
svg[data-cal] {
  font-family: var(--font-legend);
  font-variant-ligatures: none;
  font-size: var(--fs-legend);
  font-variant-numeric: tabular-nums;
  overflow: visible;
  text-rendering: geometricPrecision;   /* labels keep their measured width when a figure scales */
}

/* ── the mark: a ruler with one live graduation (draw with <svg class="cal-mark"><use href="#cal-mark"/></svg>) */
.cal-mark { width: 28px; height: 22px; color: var(--fg); flex: none; }

/* ── status marks, same vocabulary as figure nodes */
.cal-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border: var(--line-thin) solid var(--faint);
  background: var(--panel);
  vertical-align: -1px;
}
.cal-dot.done { background: var(--fg); border-color: var(--fg); }
.cal-dot.on { border: 0; background: var(--live); clip-path: var(--star); width: 11px; height: 11px; vertical-align: -2px; }
.cal-dot.ok { background: var(--ok); border-color: var(--ok); }
.cal-dot.fault { background: var(--fault); border-color: var(--fault); }

/* ── forced colours: the inks become system colours, so figures (which paint
   with var() fills and strokes the browser doesn't force) follow the user's
   palette. !important outranks seeds set inline. Marks drawn as backgrounds
   opt out of forcing so filled and open stay apart. */
@media (forced-colors: active) {
  :root, [data-theme], .cal-theme {
    --bg: Canvas !important; --fg: CanvasText !important; --live: Highlight !important;
    --title: CanvasText !important; --legend: CanvasText !important; --key: CanvasText !important;
    --muted: CanvasText !important; --ok: CanvasText !important; --fault: CanvasText !important;
    --edge-strong: CanvasText !important; --faint: GrayText !important; --edge: GrayText !important;
    --panel: Canvas !important; --raised: Canvas !important; --well: Canvas !important; --gutter: Canvas !important;
    --glow: transparent !important; --swipe: transparent !important;
    --hover: transparent !important; --current: transparent !important;
    --on-swipe: CanvasText !important; --select-fg: HighlightText !important; --select-bg: Highlight !important;
  }
  .cal-dot, .star, .word.ruled::before, .word.ruled::after { forced-color-adjust: none; }
  .star { filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}