/* Ridgeseek tokens: one weight, hairlines, radius 0, pills for
   buttons, tabs and chips, one accent. Night is :root; day comes from the OS or
   data-theme. Primitives (--rs-*) are read here only. */

:root {
  --rs-night: oklch(0.228 0.039 235.6);
  --rs-summit: oklch(0.29 0.053 235.7);
  --rs-snow: oklch(0.983 0.004 236.5);
  --rs-dawn: oklch(0.98 0.025 89.2);
  --rs-sky: oklch(0.58 0.145 245.4);
  --rs-sky-deep: oklch(0.53 0.135 245.7);
  --rs-sky-lift: oklch(0.76 0.115 238);
  --rs-scree-night: oklch(0.40 0.05 236);
  --rs-scree-day: oklch(0.82 0.03 236);
  --rs-ridge-night: oklch(0.66 0.045 236);
  --rs-ridge-day: oklch(0.58 0.05 236);

  --font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --dot: 2px;          /* one dither cell in the UI; the hero uses 3px */
  --pill: 40px;
  --ease: ease;
  --dur: 0.3s;

  color-scheme: dark;
  --bg: var(--rs-night);
  --bg-inset: var(--rs-summit);
  --fg: var(--rs-snow);
  --fg-muted: oklch(0.72 0.035 236);
  --accent: var(--rs-sky-lift);
  --accent-fill: var(--rs-sky-deep);
  --fg-on-accent: var(--rs-snow);
  --rule-strong: oklch(0.48 0.04 236);
  --rule: color-mix(in oklch, var(--rule-strong) 55%, transparent);
  --scree: var(--rs-scree-night);
  --ridge: var(--rs-ridge-night);
  --crest: var(--rs-snow);
  --status-good: oklch(0.80 0.11 155);
  --status-warn: oklch(0.84 0.11 85);
  --status-critical: oklch(0.74 0.13 25);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: var(--rs-snow);
    --bg-inset: var(--rs-dawn);
    --fg: var(--rs-summit);
    --fg-muted: oklch(0.50 0.04 236);
    --accent: var(--rs-sky-deep);
    --rule-strong: oklch(0.78 0.03 236);
    --rule: color-mix(in oklch, var(--rule-strong) 60%, transparent);
    --scree: var(--rs-scree-day);
    --ridge: var(--rs-ridge-day);
    --crest: var(--rs-summit);
    --status-good: oklch(0.48 0.10 155);
    --status-warn: oklch(0.50 0.10 70);
    --status-critical: oklch(0.52 0.16 25);
  }
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: var(--rs-snow);
  --bg-inset: var(--rs-dawn);
  --fg: var(--rs-summit);
  --fg-muted: oklch(0.50 0.04 236);
  --accent: var(--rs-sky-deep);
  --rule-strong: oklch(0.78 0.03 236);
  --rule: color-mix(in oklch, var(--rule-strong) 60%, transparent);
  --scree: var(--rs-scree-day);
  --ridge: var(--rs-ridge-day);
  --crest: var(--rs-summit);
  --status-good: oklch(0.48 0.10 155);
  --status-warn: oklch(0.50 0.10 70);
  --status-critical: oklch(0.52 0.16 25);
}

:root[data-theme="dark"] { color-scheme: dark; }

/* Base */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 15px/1.35 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
h1, h2, h3, strong, b, th { font-weight: 400; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; text-underline-offset: 0.2em; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-muted); }

/* Eyebrow / instrument label */
.label {
  font: 400 11px/1.1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* Buttons: pills. Solid is the one sky fill. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-block-size: 44px;
  padding-inline: 18px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--pill);
  background: transparent;
  color: var(--fg);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.btn--solid { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--fg-on-accent); }
.btn kbd { font: 400 11px/1 var(--font-mono); opacity: 0.75; }
.btn:active { opacity: 0.8; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--fg); border-color: var(--fg); color: var(--bg); }
  .btn--solid:hover { background: color-mix(in oklch, var(--accent-fill) 85%, var(--fg)); border-color: transparent; color: var(--fg-on-accent); }
}

/* Dither fills. Ordered (Bayer 4x4) levels built from conic quadrants, so
   every dot lands on the --dot grid and stays crisp. Colour is --dither-ink. */
.dither-6, .dither-12, .dither-25, .dither-50 { --dither-ink: var(--scree); }
.dither-6 {
  background: conic-gradient(at 25% 25%, transparent 75%, var(--dither-ink) 0) 0 0 / calc(var(--dot) * 4) calc(var(--dot) * 4);
}
.dither-12 {
  background:
    conic-gradient(at 25% 25%, transparent 75%, var(--dither-ink) 0) 0 0 / calc(var(--dot) * 4) calc(var(--dot) * 4),
    conic-gradient(at 25% 25%, transparent 75%, var(--dither-ink) 0) calc(var(--dot) * 2) calc(var(--dot) * 2) / calc(var(--dot) * 4) calc(var(--dot) * 4);
}
.dither-25 {
  background: conic-gradient(at 50% 50%, transparent 75%, var(--dither-ink) 0) 0 0 / calc(var(--dot) * 2) calc(var(--dot) * 2);
}
.dither-50 {
  background:
    conic-gradient(at 50% 50%, transparent 75%, var(--dither-ink) 0) 0 0 / calc(var(--dot) * 2) calc(var(--dot) * 2),
    conic-gradient(at 50% 50%, transparent 75%, var(--dither-ink) 0) var(--dot) var(--dot) / calc(var(--dot) * 2) calc(var(--dot) * 2);
}

/* Canvas art drawn at one pixel per dither cell, scaled up without smoothing. */
canvas.cells { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }

/* Status marks: survey symbols. Shapes in CSS here, the same glyphs in Unicode
   for the terminal (see direction.md). */
.mark {
  --s: 11px;
  display: inline-block;
  inline-size: var(--s);
  block-size: var(--s);
  flex: none;
  color: var(--fg-muted);
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.mark--proposed { color: var(--accent); }
.mark--recommended { color: var(--fg); clip-path: polygon(50% 0, 100% 100%, 0 100%); mask: radial-gradient(circle at 50% 68%, transparent 1.6px, #000 1.8px); }
.mark--no_change { background: none; border: 0; clip-path: none; }
.mark--no_change::before {
  content: ""; display: block; inline-size: 100%; block-size: 100%;
  background: currentColor;
  clip-path: polygon(50% 0, 100% 100%, 0 100%, 0 100%, 18% 86%, 82% 86%, 50% 22%, 18% 86%, 0 100%);
}
.mark--running { color: var(--fg); background: linear-gradient(90deg, currentColor 50%, color-mix(in oklch, currentColor 30%, transparent) 0); }
.mark--queued { --s: 7px; }
.mark--skipped { clip-path: none; block-size: 1px; align-self: center; }
.mark--failed { color: var(--status-critical); clip-path: polygon(0 14%, 14% 0, 50% 36%, 86% 0, 100% 14%, 64% 50%, 100% 86%, 86% 100%, 50% 64%, 14% 100%, 0 86%, 36% 50%); }
.mark--shipped { color: var(--status-good); clip-path: none; }