/* Tailwind v4 auto-detects its sources, and that is too broad here.
 *
 * It honours .gitignore but scans everything else -- including MARKDOWN. This
 * file's own documentation (umtool/docs/browse.md) described the failure mode
 * by quoting the corrupt class name it produces, Tailwind extracted that quote
 * as a candidate, and every page 500d on a CSS parse error again. Documenting
 * the trap re-created the trap.
 *
 * So detection is turned off and the three directories that actually hold
 * class names are named. This makes the whole class of problem impossible: a
 * scratch dist dir, a test artefact, a fixture or a doc can no longer poison
 * the stylesheet. */
@import "tailwindcss" source(none);
@import "../../common/styles/slides.css";
@source "../app";
@source "../components";
@source "../lib";
/* The article's other shapes (release 22): the shared slides and overview
   (their stylesheet is the import above) and the verdict chip they draw.
   Named, not detected, as above. */
@source "../../common/components/report";

/* A dark, dense, keyboard-first bench. Nothing here is deployed; the only user
   is someone judging thousands of clips, or auditioning one transition, in a
   long sitting -- so contrast and hit-size beat decoration.

   COLOUR MEANS SOMETHING, OR IT IS NEUTRAL. Three hues are reserved for
   VERDICTS (good/dirty/bad), `sel` is the only INTERACTION colour, and `meter`
   is the only MEASUREMENT colour. The old `--color-accent` (a second green)
   broke that rule: it marked the active nav link while competing with
   `--color-good` two inches away, so a navigation state wore a verdict's
   clothes. It is gone rather than retuned.

   `meter` teal is the one colour risk here, and it is deliberate: it sits far
   from all three verdict hues, so a READING can never be mistaken for a
   JUDGEMENT. */
@theme {
  --color-ink: #0b0e12;
  --color-panel: #161c24;
  /* Wells -- video, waveform. The ramp is wider than it was: the old
     panel/panel-2 pair differed by so little that a well and the card it sat in
     read as one surface. */
  --color-panel-2: #1e2732;
  --color-line: #2c3743;
  --color-text: #e7edf4;
  --color-dim: #8496a8;

  /* verdicts ONLY */
  --color-good: #3fb950;
  --color-dirty: #d29922;
  --color-bad: #f85149;

  /* interaction ONLY */
  --color-sel: #58a6ff;

  /* measurement ONLY -- the pitch rail, and every number that is a reading */
  --color-meter: #56d4c4;

  /* ---------------------------------------------------------------------
     shadcn/ui's token names, MAPPED ONTO THE PALETTE ABOVE. Not imported.

     Its default theme ships `primary`, `accent` and `destructive` as their own
     hues. Adopting those would walk straight back into the rule this file
     opens with: a second green marked the active nav link while competing with
     --color-good two inches away, so a navigation state wore a verdict's
     clothes, and --color-accent was DELETED rather than retuned.

     So every shadcn name is an alias for a colour that already means something
     here, and `accent` is mapped to a SURFACE rather than to a hue -- shadcn
     uses it for hover backgrounds, which is a surface change, not a statement.
     No new colour enters the app, and `cn()` + cva give us the variants and the
     class-merging without the theme.
     --------------------------------------------------------------------- */
  --color-background: var(--color-ink);
  --color-foreground: var(--color-text);
  --color-card: var(--color-panel);
  --color-card-foreground: var(--color-text);
  --color-popover: var(--color-panel);
  --color-popover-foreground: var(--color-text);
  --color-muted: var(--color-panel-2);
  --color-muted-foreground: var(--color-dim);
  /* A surface, never a hue. */
  --color-accent: var(--color-panel-2);
  --color-accent-foreground: var(--color-text);
  --color-secondary: var(--color-panel-2);
  --color-secondary-foreground: var(--color-text);
  --color-border: var(--color-line);
  --color-input: var(--color-line);
  --color-primary: var(--color-sel);
  --color-primary-foreground: var(--color-ink);
  --color-ring: var(--color-sel);
  --color-destructive: var(--color-bad);
  --color-destructive-foreground: var(--color-ink);

  --radius: 4px;
}

html,
body {
  height: 100%;
}

body {
  background: var(--color-ink);
  color: var(--color-text);
  font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* EVERY NUMBER IS TABULAR. f0, times and durations change while you stare at
   them; proportional digits make the row jitter on every update, which in a
   tool you sit with for hours reads as instability rather than as data. */
.num,
input[type="number"],
kbd {
  font-variant-numeric: tabular-nums;
}

/* Micro-labels: only on the rail and the evidence panel, never on controls. */
.micro {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-dim);
}

/* The word under judgement is the display element -- what is being decided is a
   word, so it is set as a specimen rather than as a caption. */
.specimen {
  font: 500 34px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.14em;
  text-transform: lowercase;
}

kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--color-line);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--color-panel-2);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-dim);
}

/* The overflow fix, and it is a fix rather than a workaround.

   The old page had `main { display:grid; place-items:center }` with no
   overflow, so a card taller than the row was centred and clipped at BOTH ends
   -- the bottom disappearing under the footer was that clipping, not a
   z-index problem. Two-level verdict buttons keep the card short, but a short
   card is not a guarantee: a tall one must SCROLL, not hide. */
.deck-main {
  overflow: auto;
  align-items: start;
}

/* Canvases are dragged, and on a touch screen a drag that the browser claims
   for scrolling never reaches the pointer handlers -- the handle simply does
   not move. This is what makes the waveform draggable by thumb. */
canvas.grabbable {
  touch-action: none;
}

/* The slides and the overview (common/styles/slides.css) in this bench's
   palette: its ink and panels, `sel` as the accent (it is the interaction
   colour, and every mark on a slide that is not a verdict is a way to act). */
.rs-root {
  --rs-ground: var(--color-ink);
  --rs-paper: var(--color-panel);
  --rs-ink: var(--color-text);
  --rs-muted: var(--color-dim);
  --rs-faint: var(--color-dim);
  --rs-line: var(--color-line);
  --rs-line-strong: color-mix(in srgb, var(--color-line) 55%, var(--color-dim));
  --rs-accent: var(--color-sel);
  --rs-accent-soft: color-mix(in srgb, var(--color-sel) 16%, transparent);
  --rs-focus: var(--color-sel);
}