/* ============================================================
   MeMachine — app design system (v3, "the synthesis")

   The product half of the approved landing concept
   (public/landing-concepts/synthesis/). Same desk, same two
   voices, same printer. A customer who signs up from the landing
   page should not feel the seam.

   THE TYPE SYSTEM IS THE CONCEPT — two voices and a hand:
     MACHINE  IBM Plex Mono. Uppercase, tracked, graphite. It
              labels, counts, stamps and files. Eyebrows, statuses,
              table data, timestamps, buttons, tab labels.
     HUMAN    Source Sans 3. Every sentence with feeling in it, and
              everything the owner actually reads.
     THE HAND Caveat, in pen red. Used about four times in the whole
              product, and never for information you need.

   COLOUR
   - Paper  #F7F4ED   the desk
   - Stock  #FFFDF7   fresh printer stock (cards)
   - Ink    #17140F   warm black. PRIMARY BUTTONS ARE INK.
   - Pen    #C1301B   felt-tip red. Human marks: the record light,
     the active tab, the caret, stamps, the flag on an account that
     costs more than it pays. Cochineal #A8172B is retired — the
     whole footprint is --accent / --accent-deep / --accent-wash.
   - Amber  #B0802A   machine status only: LEDs, greenbar banding,
     cost meters. Never used for a human decision.

   TYPE SWAP POINT
   --font-display is still one declaration. It now points at Source
   Sans 3 (the human voice). --font-mono and --font-hand are the two
   other faces. Do not hard-code a family anywhere else in this file.

   THE DARK EXCEPTION
   Filming is a viewfinder, not a document. .capture, .prompter,
   .take-review, .rotate-hint and every <video> surround stay dark,
   the way the iOS camera app does. Built on Ink, never pure black.
   Each dark region re-declares the semantic tokens for a dark ground
   (see "dark scope"), which is why .meta / var(--ok) / .btn keep
   working inside them with no per-element overrides.

   RESTRAINT
   The artifact language earns its keep or it does not appear. Mono
   plates label things that are genuinely records. Stamps mark states
   that are genuinely states. Tractor-feed rules divide genuine
   sections. The receipt treatment lives on exactly one screen — the
   one that is a receipt. Nothing here is decoration for its own sake.

   NO EMOJI anywhere. Marks and glyphs are typographic or inline SVG.
   ============================================================ */

/* ---------- self-hosted faces (no CDN) ----------
   Copied from the approved concept into /fonts so the app owns them
   independently of the landing directory. Licence: public/fonts/NOTICE.txt
   (all three are SIL OFL 1.1). */

@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/plexmono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/plexmono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plex Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/plexmono-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('/fonts/sourcesans3-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/caveat-var.woff2') format('woff2');
}

:root {
  /* --- brand ground truth --- */
  --paper: #f7f4ed;
  --paper-2: #efe9db;   /* recessed: inputs, tracks, quiet chips */
  --paper-3: #fffdf7;   /* raised: cards — "fresh printer stock" */
  --paper-4: #faf6ea;   /* a second sheet, laid on the first */
  --ink: #17140f;
  --ink-2: #3a332a;
  --ink-3: #554e42;     /* body-adjacent: dates, counts, error text */
  --ink-4: #6e6659;     /* graphite: labels that must not compete */
  --ink-press: #0b0906; /* hover/active ink — still warm, never #000 */
  --rule: rgba(23, 20, 15, 0.16);
  --rule-soft: rgba(23, 20, 15, 0.075);

  /* --- the accent (pen red), and its entire footprint --- */
  --accent: #c1301b;
  --accent-deep: #8f2011;
  --accent-wash: rgba(193, 48, 27, 0.07);
  --accent-glass: rgba(193, 48, 27, 0.14);
  --accent-on: #fffdf7;              /* text that sits on an accent fill */

  /* --- machine status. Amber never carries a human decision. --- */
  --amber: #b0802a;
  --amber-wash: rgba(176, 128, 42, 0.10);

  /* --- type ---
     ONE swap point for the display face. --font-mono is the machine
     voice, --font-hand is the pen. Nothing else declares a family. */
  --font-text: 'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Source Sans 3', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'Plex Mono', ui-monospace, 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
  --font-hand: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  --display-weight: 600;
  --display-tracking: -0.028em;

  /* --- semantic aliases the views use directly ---
     Kept under the v1 names (--text/--muted/--surface/--ok/--bad…) so
     inline `color: var(--bad)` in the views keeps working, and so the
     dark scope below can re-point them wholesale. */
  --bg: var(--paper);
  --surface: var(--paper-3);
  --surface-2: var(--paper-2);
  --line: var(--rule);
  --text: var(--ink-2);
  --heading: var(--ink);
  --muted: var(--ink-3);
  --muted-2: var(--ink-4);
  --accent-ink: var(--accent-on);
  --ok: #185831;
  --ok-wash: rgba(28, 100, 55, 0.10);
  --warn: #7a5606;
  --warn-wash: var(--amber-wash);
  --bad: var(--accent);
  --bad-wash: var(--accent-wash);

  /* Machines do not have rounded corners. */
  --radius: 3px;
  --radius-btn: 2px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --shadow-card: 0 1px 0 rgba(23, 20, 15, 0.04), 0 18px 30px -30px rgba(23, 20, 15, 0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
/* The hidden attribute must beat any display: set by a class (flex/inline-flex
   otherwise resurrect "hidden" overlays — this bug blocked the record button). */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  background-color: var(--bg);
  /* the faint dot-matrix field from the landing: the paper remembers
     being printed on. Kept well below the threshold of noticing. */
  background-image: radial-gradient(rgba(23, 20, 15, 0.038) 1px, transparent 1.1px);
  background-size: 6px 6px;
  color: var(--text);
  font: 400 16.5px/1.58 var(--font-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}
img, svg, video { display: block; max-width: 100%; }
/* Form controls don't inherit type or colour on their own; without this the
   bookings checkboxes and the record button fall back to UA Arial / #000. */
button, input, select, textarea { font-family: var(--font-text); color: var(--ink); }
input[type="checkbox"] { accent-color: var(--accent); }
::selection { background: var(--accent-glass); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Generous margins. The old 16px gutter made a phone feel like a form. */
.view {
  max-width: 620px;
  margin: 0 auto;
  padding: max(22px, env(safe-area-inset-top)) 22px calc(112px + var(--safe-b));
  min-height: 100%;
}
@media (min-width: 900px) {
  .view { max-width: 760px; padding: 40px 36px calc(120px + var(--safe-b)); }
}

/* ---------- typography ---------- */
h1 {
  font-family: var(--font-display);
  font-size: clamp(31px, 7.6vw, 40px);
  font-weight: var(--display-weight);
  line-height: 1.03;
  letter-spacing: var(--display-tracking);
  color: var(--heading);
  margin: 4px 0 8px;
}
/* Section breaks are a tractor-feed rule and a machine label, never
   another big title. */
h2 {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2);
  margin: 36px 0 14px;
  padding-top: 15px;
  border-top: 1px dashed var(--rule);
}
h3 {
  font-family: var(--font-text);
  font-size: 18px; font-weight: 600; letter-spacing: -0.012em; line-height: 1.28;
  color: var(--heading);
}
.sub {
  color: var(--muted);
  font-size: 16px; line-height: 1.55;
  margin-bottom: 28px;
  max-width: 48ch;
}
p { color: var(--text); }
b, strong { font-weight: 600; color: var(--heading); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }

/* the machine's own voice, wherever it needs to speak inline */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }

/* THE HAND — Caveat, in pen. Rare on purpose: if it shows up twice on
   one screen, one of them is wrong. */
.hand {
  font-family: var(--font-hand);
  color: var(--accent);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.1;
}

/* ---------- the machine label ("STATION" plate) ----------
   .kicker is the v2 name and stays for compatibility; .eyebrow is the
   same object. Mono, tracked, graphite, with a hairline running out of
   it like a form field. */
.kicker, .eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.kicker::after, .eyebrow::after { content: ""; height: 1px; flex: 1; background: var(--rule); max-width: 72px; }
.kicker.pen, .eyebrow.pen { color: var(--accent); }
.kicker.pen::after, .eyebrow.pen::after { background: rgba(193, 48, 27, .3); }

/* ---------- grouped cards ----------
   A sheet of fresh stock held down by a hairline. Printed, not glassy. */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 20px;
  margin-bottom: 14px;
}
.card > h3 + .meta { margin-top: 5px; }
.card .meta { color: var(--muted); font-size: 14.5px; margin-top: 5px; line-height: 1.5; }
.meta { color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* A sheet's filing header: what this record is, and its serial. Only on
   cards that really are records. */
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--muted-2);
  padding-bottom: 10px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.sheet-foot {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted-2);
  margin-top: 14px; padding-top: 9px; border-top: 1px dashed var(--rule);
}

/* the tractor-feed divider: a torn perforation across the page */
.tear {
  height: 7px; margin: 26px 0;
  background-image: radial-gradient(circle at 4.5px 3.5px, var(--paper) 2.4px, transparent 2.5px);
  background-size: 9px 7px;
  border-top: 1px dashed var(--rule-soft); border-bottom: 1px dashed var(--rule-soft);
}

/* ---------- buttons — ink slab, machine label ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ink); color: var(--paper-3);
  border: 1px solid var(--ink); border-radius: var(--radius-btn);
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase;
  padding: 14px 22px; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background .16s, color .16s, border-color .16s, box-shadow .16s, transform .1s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-on); box-shadow: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled, .btn[disabled] { opacity: 0.38; pointer-events: none; }

.btn.secondary { background: transparent; color: var(--heading); border-color: var(--rule); }
.btn.secondary:hover { background: rgba(23, 20, 15, .04); color: var(--heading); border-color: var(--ink); box-shadow: none; }

/* Destructive is outlined, never a slab — it does not get to be the
   loudest thing on a screen. */
.btn.danger { background: transparent; color: var(--accent); border-color: var(--accent); }
.btn.danger:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-on); box-shadow: none; }

.btn.small { padding: 9px 14px; font-size: 10.5px; letter-spacing: 0.12em; }
/* .btn.small computes to ~33px tall (9px padding * 2 + line box + border) —
   under the 44px touch-target minimum, flagged at 390px. Coarse pointers
   (touch) only: bump the box to 44px via min-height, which the button's own
   flex centering (align-items: center on .btn) absorbs as extra vertical
   whitespace around the unchanged label — no font-size/padding/letter-
   spacing change, so mouse/desktop density is untouched. */
@media (pointer: coarse) {
  .btn.small { min-height: 44px; }
}
.btn.block { display: flex; width: 100%; }

/* ---------- chips: the machine's one-word verdict ---------- */
.chip {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 2px;
  background: var(--paper-2); color: var(--ink-2);
  border: 1px solid var(--rule-soft);
  white-space: nowrap;
}
.chip.ok { background: var(--ok-wash); color: var(--ok); border-color: transparent; }
.chip.warn { background: var(--amber-wash); color: var(--warn); border-color: transparent; }
.chip.bad { background: var(--bad-wash); color: var(--accent-deep); border-color: transparent; }
/* Emphasis without spending the pen: a solid ink stamp. */
.chip.accent { background: var(--ink); color: var(--paper-3); border-color: var(--ink); }

/* ---------- the rubber stamp ----------
   For states that are genuinely states — PAID, TRIAL, PAUSED, LIVE.
   Slightly off-square, because a hand pressed it. */
.stamp {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent); border: 2px solid var(--accent); border-radius: 2px;
  padding: 5px 9px; transform: rotate(-2deg);
  background: transparent;
}
.stamp.ink { color: var(--ink); border-color: var(--ink); }
.stamp.amber { color: var(--warn); border-color: var(--amber); }
.stamp.ok { color: var(--ok); border-color: var(--ok); }
.stamp.faded { opacity: .45; }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row .grow { flex: 1; min-width: 0; }
.stack > * + * { margin-top: 12px; }

/* ---------- inputs ---------- */
input[type="text"], input[type="password"], input[type="email"], input[type="time"], textarea, select {
  width: 100%;
  background: var(--paper-3);
  color: var(--heading);
  border: 1px solid var(--rule);
  border-radius: var(--radius-btn);
  padding: 12px 13px;
  font-size: 16px; font-family: var(--font-text); line-height: 1.4;
  appearance: none;
  transition: border-color .14s, box-shadow .14s;
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
textarea { min-height: 96px; resize: vertical; }
select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
/* a field's machine label, above the control */
.field-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 5px;
}

/* ============================================================
   HERO — the terminal.
   The landing page has exactly one dark object: a terminal that
   reads the machine's state out loud and then prints a human
   sentence. Home's "what do I do next" card IS that object, so the
   product opens on the same picture the marketing page closed on.
   Nothing else on Home is filled.
   ============================================================ */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  color: rgba(239, 232, 218, 0.82);
  margin-bottom: 26px;
  box-shadow: 0 30px 50px -34px rgba(23, 20, 15, .8);
}
/* the status bar, with the amber LED */
.hero .kicker, .hero .eyebrow {
  display: flex; align-items: center; gap: 10px; margin: 0;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(239, 232, 218, 0.16);
  font-size: 10px; letter-spacing: 0.15em;
  color: rgba(239, 232, 218, 0.55);
}
.hero .kicker::after, .hero .eyebrow::after { display: none; }
.hero .kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--amber); box-shadow: 0 0 8px rgba(176, 128, 42, .9);
  animation: blink 2.6s steps(1) infinite;
}
@keyframes blink { 0%, 70% { opacity: 1 } 71%, 100% { opacity: .28 } }

.hero-body { padding: 20px 16px 20px; }
.hero .readout {
  font-family: var(--font-mono);
  font-size: 12px; line-height: 1.85; color: rgba(239, 232, 218, 0.42);
}
.hero .readout .tp { color: var(--amber); }
.hero h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 5.6vw, 26px); font-weight: var(--display-weight);
  letter-spacing: -0.022em; line-height: 1.16;
  color: #fffdf7; margin: 12px 0 8px;
}
/* the pen-red caret: the one human mark inside the machine */
.hero h3::after {
  content: ""; display: inline-block;
  width: .5ch; height: .92em; vertical-align: -.12em;
  background: var(--accent); margin-left: 5px;
  animation: caret 1.1s steps(1) infinite;
}
@keyframes caret { 0%, 50% { opacity: 1 } 51%, 100% { opacity: 0 } }
.hero .meta { color: rgba(239, 232, 218, 0.68); font-size: 15px; margin-bottom: 18px; max-width: 44ch; }
/* Inside the terminal the ink button would vanish, so primary inverts. */
.hero .btn { background: var(--paper-3); border-color: var(--paper-3); color: var(--ink); }
.hero .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.hero .btn.secondary { background: transparent; border-color: rgba(239, 232, 218, .3); color: rgba(239, 232, 218, .92); }
.hero .btn.secondary:hover { background: rgba(239, 232, 218, .08); border-color: rgba(239, 232, 218, .6); color: #fffdf7; }
.hero select {
  background-color: rgba(239, 232, 218, .1); border-color: rgba(239, 232, 218, .28); color: #fffdf7;
  background-image: linear-gradient(45deg, transparent 50%, rgba(239, 232, 218, .8) 50%), linear-gradient(135deg, rgba(239, 232, 218, .8) 50%, transparent 50%);
}
.hero select option { color: var(--ink); background: var(--paper-3); }
.hero select:focus { border-color: #fffdf7; box-shadow: 0 0 0 3px rgba(239, 232, 218, .16); }

/* the brand line, printed under the terminal like a footer stamp */
.brandline {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-2);
  display: flex; align-items: center; gap: 10px;
  margin: -12px 0 26px;
}
.brandline::before { content: ""; height: 1px; width: 22px; background: var(--rule); flex: none; }
.brandline b { color: var(--accent); font-weight: 500; }

/* the split wordmark: the human half humanist, the machine half mono */
.wm-me { font-family: var(--font-text); font-weight: 700; }
.wm-machine { font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.02em; }

/* ---------- journey checklist — the job card ---------- */
.steps-group {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px; overflow: hidden;
}
.step { display: flex; gap: 14px; align-items: center; padding: 15px 18px; transition: background .14s; }
.step + .step { border-top: 1px dotted var(--rule-soft); }
.step:hover { background: rgba(23, 20, 15, 0.02); }
.step .dot {
  width: 25px; height: 25px; flex: none; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
/* Done is quiet — a filled ink box with a paper tick. Active is the one
   pen mark, so the eye finds "you are here" instantly. */
.step.done .dot { background: var(--ink); border-color: var(--ink); color: var(--paper-3); }
.step.active .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.step.done h3 { color: var(--ink-3); }
.step h3 { font-size: 16px; font-weight: 600; }
.step .meta { font-size: 13.5px; margin-top: 2px; }
.step .dot svg { width: 13px; height: 13px; }

/* ---------- tab bar ----------
   The translucent iOS tab bar survives; it is now bone-paper glass on a
   hairline rule, with mono labels and the active tab in pen. */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; justify-content: space-around; align-items: flex-start;
  background: rgba(247, 244, 237, 0.9);
  -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%);
  border-top: 1px solid var(--rule);
  padding: 9px 0 calc(8px + var(--safe-b));
  z-index: 40;
}
.tabbar a {
  /* ink-3, not ink-4 — 9.5px tab labels need to clear 7:1 on the glass */
  color: var(--ink-3); text-decoration: none;
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 52px; padding-top: 3px;
  position: relative;
  transition: color .15s;
}
.tabbar a:hover { color: var(--ink-2); }
.tabbar a.active { color: var(--accent); }
/* a short pen rule over the active tab — the printed equivalent of a tint */
.tabbar a.active::before {
  content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  width: 26px; height: 2px; background: var(--accent);
}
.tabbar svg { width: 23px; height: 23px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(112px + var(--safe-b));
  transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  font-size: 14.5px; font-weight: 500; line-height: 1.4;
  padding: 12px 18px; border-radius: var(--radius-btn); z-index: 60;
  max-width: 88vw; text-align: center;
  border-left: 3px solid var(--accent);
  box-shadow: 0 16px 40px -20px rgba(23, 20, 15, 0.8);
}

/* ============================================================
   TALK — the producer call. The orb is the input device's status
   light: amber while it listens, pen while it is recording you.
   ============================================================ */
.talk-orb {
  width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #3a332a 0%, var(--ink) 62%, #000 140%);
  box-shadow: 0 26px 60px -30px rgba(23, 20, 15, .8), 0 0 0 10px rgba(23, 20, 15, .05);
  position: relative;
  transition: transform .3s ease;
  animation: breathe 3.2s ease-in-out infinite;
}
/* the LED at its centre: amber = the machine is talking */
.talk-orb::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 18px rgba(193, 48, 27, .85);
}
.talk-orb.speaking::after { background: var(--amber); box-shadow: 0 0 22px rgba(176, 128, 42, .95); }
.talk-orb.speaking { animation: talk-pulse .9s ease-in-out infinite; }
/* the call timer lives on paper here, not in the viewfinder */
.talk-timer { color: var(--muted); font-family: var(--font-mono); }
@keyframes breathe { 50% { transform: scale(1.035); } }
@keyframes talk-pulse {
  50% { transform: scale(1.1); box-shadow: 0 26px 70px -28px rgba(23, 20, 15, .85), 0 0 0 20px rgba(23, 20, 15, .05); }
}

/* ============================================================
   CAPTURE — THE DARK EXCEPTION.
   A viewfinder, not a document: filming and playback stay dark so the
   presenter's eyes and the phone's exposure both behave. Built on Ink
   rather than pure black so it is visibly the same family.

   Each dark region re-declares the semantic tokens for a dark ground,
   which is why .meta, .btn, var(--ok) and var(--bad) all keep working
   inside with no per-element overrides.
   ============================================================ */
.capture, .take-review, .rotate-hint {
  --surface: rgba(239, 232, 218, 0.08);
  --surface-2: rgba(239, 232, 218, 0.13);
  --line: rgba(239, 232, 218, 0.2);
  --rule: rgba(239, 232, 218, 0.2);
  --rule-soft: rgba(239, 232, 218, 0.12);
  --text: #efe8da;
  --heading: #fffdf7;
  --muted: rgba(239, 232, 218, 0.68);
  --muted-2: rgba(239, 232, 218, 0.42);
  --ok: #74d194;
  --warn: var(--amber);
  --bad: #e0674f;
  --accent-live: #e0674f;   /* the pen, lifted so it carries on ink */
  color: var(--text);
}
/* Inside the dark scope the ink button would vanish, so primary inverts
   to paper and secondary becomes a light hairline. */
.capture .btn, .take-review .btn, .rotate-hint .btn {
  background: var(--paper-3); border-color: var(--paper-3); color: var(--ink);
}
.capture .btn:hover, .take-review .btn:hover, .rotate-hint .btn:hover {
  background: #fff; border-color: #fff; color: var(--ink); box-shadow: none;
}
.capture .btn.secondary, .take-review .btn.secondary, .rotate-hint .btn.secondary {
  background: transparent; color: var(--heading); border-color: rgba(239, 232, 218, 0.32);
}
.capture .btn.secondary:hover, .take-review .btn.secondary:hover, .rotate-hint .btn.secondary:hover {
  background: rgba(239, 232, 218, .08); border-color: rgba(239, 232, 218, 0.6); color: var(--heading);
}
.capture .btn.danger, .take-review .btn.danger {
  background: transparent; color: var(--accent-live); border-color: var(--accent-live);
}

.capture { position: fixed; inset: 0; background: var(--ink); z-index: 50; }
.capture video.preview-cam {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
.capture video.preview-cam.mirror { transform: scaleX(-1); }

.face-guide {
  position: absolute; left: 50%; top: 38%;
  width: 46vw; max-width: 240px; aspect-ratio: 3/4;
  transform: translate(-50%, -50%);
  border: 1.5px dashed rgba(255, 253, 247, .45);
  border-radius: 50%;
  pointer-events: none;
}

.prompter {
  position: absolute; left: 0; right: 0; top: 0;
  padding: max(14px, env(safe-area-inset-top)) 20px 20px;
  background: linear-gradient(rgba(23, 20, 15, .88), rgba(23, 20, 15, .58) 75%, transparent);
  min-height: 30vh;
  display: flex; flex-direction: column; justify-content: flex-start;
  color: #fffdf7;
}
.prompter .line-prev, .prompter .line-next {
  color: rgba(239, 232, 218, .42); font-size: 15px; min-height: 1.4em; line-height: 1.35;
}
.prompter .line-now {
  color: #fffdf7;
  font-size: clamp(21px, 5.8vw, 30px); font-weight: 600;
  letter-spacing: -0.018em; line-height: 1.25; margin: 10px 0;
}
/* Stage directions are the pen, lifted so it survives on ink. */
.prompter .direction {
  font-family: var(--font-mono);
  color: var(--accent-live); font-size: 12px; font-weight: 500; letter-spacing: 0.06em;
}
.prompter .shot-count {
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em;
  color: var(--accent-live); text-transform: uppercase; margin-bottom: 8px;
}

.capture .controls {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 14px 18px calc(18px + var(--safe-b));
  background: linear-gradient(transparent, rgba(23, 20, 15, .82));
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
}
/* The record light IS the pen. This is the colour's origin story. */
.rec-btn {
  width: 74px; height: 74px; border-radius: 50%;
  border: 4px solid #fffdf7; background: var(--accent);
  cursor: pointer; flex: none;
  transition: border-radius .2s;
}
.rec-btn.recording { border-radius: 16px; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { opacity: .6; } }

.pill-btn {
  background: rgba(255, 253, 247, .16); color: #fffdf7;
  border: 1px solid rgba(255, 253, 247, .18);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-radius: var(--radius-btn); padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.11em; text-transform: uppercase;
  cursor: pointer;
}
.pill-btn:hover { background: rgba(255, 253, 247, .26); }
.rec-timer { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 15px; }
.capture .rec-timer, .take-review .rec-timer { color: #fffdf7; }

.rotate-hint {
  position: absolute; inset: 0; z-index: 5;
  background: rgba(23, 20, 15, .94); color: #fffdf7;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; text-align: center; padding: 30px; font-weight: 500; line-height: 1.5;
}
.rotate-hint .big { color: rgba(255, 253, 247, .7); }
.rotate-hint .big svg { width: 44px; height: 44px; }

/* Take preview after stop — playback surround, stays dark. */
.take-review {
  position: absolute; inset: 0; z-index: 8; background: var(--ink);
  display: flex; flex-direction: column;
}
/* min-height: 0 is load-bearing — without it a tall portrait video refuses to
   shrink and shoves the Retake/Keep bar off the bottom of the screen. */
.take-review video { flex: 1; min-height: 0; width: 100%; object-fit: contain; background: var(--ink); }
.take-review .bar { display: flex; gap: 10px; padding: 14px 16px calc(18px + var(--safe-b)); }
.take-review .bar .btn { flex: 1; }
.take-review h2 {
  border-top: 0; padding-top: 0; margin: 0;
  font-family: var(--font-display);
  font-size: 23px; font-weight: var(--display-weight); letter-spacing: var(--display-tracking);
  text-transform: none; color: var(--heading);
}
.take-review .meta { max-width: 40ch; }
.take-panel { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 28px; text-align: center; }
.take-panel .btn { width: 100%; max-width: 320px; }

/* the success tick — inline SVG, never an emoji */
.done-tick { color: var(--ok); }
.done-tick svg { width: 38px; height: 38px; }

.progressbar { height: 4px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.progressbar > div { height: 100%; background: var(--accent); width: 0%; transition: width .2s; }

/* ---------- script lines — the printed script sheet ---------- */
.script-lines {
  margin: 14px 0; background: var(--paper-4);
  border: 1px solid var(--rule-soft); padding: 4px 14px;
}
.script-lines .ln {
  padding: 10px 0; border-bottom: 1px dotted var(--rule-soft);
  font-size: 16px; line-height: 1.42; color: var(--heading);
}
.script-lines .ln:last-child { border-bottom: 0; }
.script-lines .ln .dir {
  font-family: var(--font-mono);
  color: var(--accent); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; margin-top: 5px;
  padding-left: 14px; position: relative;
}
.script-lines .ln .dir::before {
  content: ""; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--accent);
}
/* the CTA, boxed in dashed pen at the foot of the sheet */
.script-cta {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
  border: 1px dashed rgba(193, 48, 27, .5); padding: 9px 10px; text-align: center;
  margin-top: 12px;
}

/* Playback thumbnails keep a dark surround — see the dark exception. */
video.take-thumb {
  width: 100%; border-radius: var(--radius); background: var(--ink);
  max-height: 320px; margin-top: 12px;
  border: 1px solid var(--rule);
}

/* ---------- Bookings: availability editor ---------- */
.hours { margin-top: 18px; border-top: 1px solid var(--rule); }
.hour-row {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0; border-bottom: 1px dotted var(--rule-soft);
  flex-wrap: wrap;
}
.day-toggle { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 15.5px; cursor: pointer; color: var(--heading); }
.day-toggle input { width: 19px; height: 19px; accent-color: var(--accent); flex: none; }
.hour-times { display: flex; align-items: center; gap: 7px; }
.hour-times input[type="time"] { width: auto; padding: 8px 10px; font-size: 14.5px; font-family: var(--font-mono); }
.hour-times .meta { font-size: 13px; }
label > .meta { margin-bottom: 6px; }

/* ---------- disclosure ---------- */
details summary {
  cursor: pointer; padding: 8px 0;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); list-style: none;
  display: flex; align-items: center; gap: 8px;
}
details summary::-webkit-details-marker { display: none; }
details summary::before {
  content: ""; flex: none;
  width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .15s;
}
details[open] summary::before { transform: rotate(90deg); }
details summary:hover { color: var(--accent-deep); }

.prose { font-size: 15.5px; color: var(--text); white-space: pre-wrap; line-height: 1.55; }
.prose-muted { font-size: 14.5px; color: var(--muted); white-space: pre-wrap; line-height: 1.55; }
.transcript { border-left: 2px solid var(--rule); padding-left: 14px; }

/* ============================================================
   THE RECEIPT — billing, and only billing.
   The one screen in the product that is literally a receipt gets
   the full treatment: continuous-form banding, dashed rules, a torn
   bottom edge. Everywhere else this restraint is deliberate.
   ============================================================ */
.receipt {
  position: relative;
  padding: 28px 26px 24px;
  border: 1px solid var(--rule); border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(23, 20, 15, .018) 25px 26px),
    var(--paper-3);
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.05em; color: var(--muted);
  box-shadow: var(--shadow-card);
}
.receipt-zig {
  height: 11px; background: var(--paper-3);
  margin-bottom: 14px;
  filter: drop-shadow(0 1px 0 rgba(23, 20, 15, .16));
  clip-path: polygon(
    0% 0%,
    2.5% 100%, 5% 0%, 7.5% 100%, 10% 0%, 12.5% 100%, 15% 0%, 17.5% 100%, 20% 0%,
    22.5% 100%, 25% 0%, 27.5% 100%, 30% 0%, 32.5% 100%, 35% 0%, 37.5% 100%, 40% 0%,
    42.5% 100%, 45% 0%, 47.5% 100%, 50% 0%, 52.5% 100%, 55% 0%, 57.5% 100%, 60% 0%,
    62.5% 100%, 65% 0%, 67.5% 100%, 70% 0%, 72.5% 100%, 75% 0%, 77.5% 100%, 80% 0%,
    82.5% 100%, 85% 0%, 87.5% 100%, 90% 0%, 92.5% 100%, 95% 0%, 97.5% 100%, 100% 0%
  );
}
.receipt-head { text-align: center; }
.rc-brand { font-size: 23px; color: var(--ink); }
.rc-sub { margin-top: 8px; font-size: 10px; letter-spacing: 0.18em; color: var(--muted-2); }
.rc-meta { margin-top: 6px; font-size: 10px; letter-spacing: 0.12em; color: var(--muted-2); }
.receipt-rule { border-top: 1px dashed var(--rule); margin: 18px 0; }
.ri { display: flex; align-items: baseline; gap: 7px; padding: 6px 0; }
.ri-q { color: var(--muted-2); min-width: 3ch; }
.ri-d { color: var(--ink-2); letter-spacing: 0; font-family: var(--font-text); font-size: 14.5px; }
.ri-l { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.ri-p { color: var(--muted-2); }
.receipt-totals { display: grid; gap: 7px; }
.rt { display: flex; justify-content: space-between; gap: 12px; letter-spacing: 0.1em; }
.rt-big { font-size: 16px; font-weight: 600; color: var(--ink); border-top: 2px solid var(--ink); margin-top: 7px; padding-top: 11px; }
.receipt-hand { text-align: center; margin: 20px 0 22px; }
.receipt-hand .hand { transform: rotate(-1.6deg); display: inline-block; font-size: 25px; }
.receipt-fine { margin-top: 14px; font-size: 10.5px; line-height: 1.7; letter-spacing: 0.04em; color: var(--muted-2); text-align: center; }
.receipt-thanks { text-align: center; margin-top: 12px; font-size: 9.5px; letter-spacing: 0.22em; color: var(--muted-2); }
/* the stamp sits in the corner, but in flow — absolute positioning let a
   long wordmark slide under it at narrow widths */
.receipt-stampline { display: flex; justify-content: flex-end; margin-bottom: 10px; min-height: 26px; }

/* ============================================================
   ADMIN — the machine room.
   The most machine surface in the product: the founder reading the
   machine's books. Mono everywhere, greenbar banding on the cost
   meters, and a pen flag on any account that costs more than it pays.
   ============================================================ */
.admin-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.admin-stat-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.15em;
  color: var(--muted-2); text-transform: uppercase;
}
.admin-stat-value {
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; margin-top: 5px;
  color: var(--heading);
}
.admin-stat-value.pen { color: var(--accent); }
.admin-stat .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; margin-top: 3px; }

/* the ledger: mono rows, dotted leaders, greenbar banding */
.ledger { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); background: var(--paper-3); }
.ledger caption {
  text-align: left; font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
  padding: 10px 12px; border-bottom: 1px solid var(--rule);
}
.ledger th {
  text-align: left; font-family: var(--font-mono); font-weight: 500;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2);
  padding: 9px 12px; border-bottom: 1px solid var(--rule);
}
.ledger td {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--ink-2); padding: 10px 12px;
  border-bottom: 1px dotted var(--rule-soft); vertical-align: baseline;
  font-variant-numeric: tabular-nums;
}
.ledger tbody tr:nth-child(odd) td { background: var(--amber-wash); }
.ledger tbody tr:last-child td { border-bottom: 0; }
.ledger .num { text-align: right; white-space: nowrap; }
.ledger .name { font-family: var(--font-text); font-size: 15px; letter-spacing: 0; color: var(--ink); }
.ledger .pos { color: var(--ok); font-weight: 600; }
.ledger .neg { color: var(--accent); font-weight: 600; }
.ledger tr.flagged td { background: var(--accent-wash); }
.ledger tr.flagged .name { color: var(--accent-deep); }
.ledger-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -20px; padding: 0 20px; }
.ledger-scroll .ledger { min-width: 520px; }

/* the cost meters: greenbar rows with an amber fill */
.bars { border: 1px solid var(--rule-soft); }
.bar-row {
  position: relative; display: flex; align-items: baseline; gap: 8px;
  padding: 10px 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted);
}
.bar-row:nth-child(odd) { background: var(--amber-wash); }
.br-k, .br-v, .br-l { position: relative; z-index: 1; }
.br-k { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-l { flex: 1; min-width: 16px; border-bottom: 1px dotted var(--rule); transform: translateY(-3px); }
.br-v { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 5ch; text-align: right; }
.br-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(176, 128, 42, .22); z-index: 0; }
.bar-row.hot .br-v { color: var(--accent); }
.bar-row.hot .br-fill { background: var(--accent-wash); }
/* the sub-label under a metered row */
.br-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--muted-2); padding: 0 12px 9px; }

.admin-user { padding: 13px 0; }
.admin-user + .admin-user { border-top: 1px dotted var(--rule-soft); }
.admin-user-nums {
  display: flex; flex-wrap: wrap; gap: 3px 14px;
  margin-top: 6px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.admin-user-nums .pos { color: var(--ok); font-weight: 600; }
.admin-user-nums .neg { color: var(--accent); font-weight: 600; }
/* an account costing more than it pays gets a pen bar down its edge */
.admin-user.flagged {
  border-left: 2px solid var(--accent); padding-left: 12px;
  margin-left: -14px; background: var(--accent-wash);
}

/* The scrim is ink, but the sheet itself is paper — it is a document
   view, not a viewfinder, so it never enters the dark scope. */
.admin-sheet {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(23, 20, 15, 0.58);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow-y: auto;
}
.admin-sheet-inner {
  max-width: 620px; margin: 0 auto; min-height: 100%;
  background: var(--paper);
  padding: max(24px, env(safe-area-inset-top)) 22px calc(40px + var(--safe-b));
}
.admin-sheet-inner h2 { border-top: 0; padding-top: 0; margin-top: 0; }

/* ---------- Meta asset pickers (settings) ---------- */
.asset-slot + .asset-slot { margin-top: 14px; }

/* ============================================================
   THE GUIDED PROCESS (v3.1)
   Additive block. Five surfaces the process needs and the
   document language did not yet have:
     .today     Home's short list of secondary actions
     .folder    the Scripts filing cabinet
     .ladder    the four-rung status strip on a script
     .ad-glance the three numbers on a running ad
     .tour      the first-login walkthrough
   Everything here is built from tokens already declared above.
   No new colours, no new faces, no emoji.
   ============================================================ */

/* ---------- hero: the reason, and the tally ----------
   The engine's justification for what it just told you to do. Pen rule down
   its edge, because it is the machine talking to a person about a decision,
   not filing a record. */
.hero-why {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.07em; line-height: 1.6;
  color: rgba(239, 232, 218, 0.62);
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 11px;
  margin: 0 0 16px;
  max-width: 46ch;
}
.hero-note {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(239, 232, 218, 0.42);
  margin-top: 10px; text-align: center;
}

/* ---------- "also today" ----------
   Never more than four. Hairline-separated rows on paper, deliberately
   quieter than the terminal above them. */
.today {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
  overflow: hidden;
}
.today-head {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted-2);
  padding: 12px 18px 10px;
  border-bottom: 1px solid var(--rule);
}
.today-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 18px; min-height: 44px;
  text-decoration: none; color: inherit;
  transition: background .14s;
}
.today-row + .today-row { border-top: 1px dotted var(--rule-soft); }
.today-row:hover { background: rgba(23, 20, 15, 0.025); color: inherit; }
.today-row .grow { flex: 1; min-width: 0; display: block; }
.today-label { display: block; font-size: 15.5px; font-weight: 600; color: var(--heading); }
.today-note {
  display: block; margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.07em; color: var(--muted-2);
  font-variant-numeric: tabular-nums;
}
.today-arrow { color: var(--muted-2); flex: none; display: flex; }
.today-arrow svg { width: 16px; height: 16px; }
.today-row:hover .today-arrow { color: var(--accent); }

/* ---------- filters + sort ----------
   Chips that are controls, not verdicts — outlined until chosen, then an
   ink slab. The count rides inside the chip in tabular figures. */
.script-controls { margin: 18px 0 22px; }
.filter-row, .sort-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sort-row { margin-top: 10px; }
.sort-label {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-2);
  margin-right: 3px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 8px 10px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s;
}
.filter-chip .n { color: var(--muted-2); font-variant-numeric: tabular-nums; }
.filter-chip:hover { border-color: var(--ink); }
.filter-chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper-3); }
.filter-chip.on .n { color: rgba(255, 253, 247, 0.6); }
.filter-chip:disabled { opacity: 0.34; pointer-events: none; }
@media (pointer: coarse) { .filter-chip { min-height: 44px; } }

/* ---------- the folder ----------
   A batch of scripts is a folder: same day, same market read, same aim. The
   plate above it is a filing tab — mono serial, human title. */
.folder { margin-bottom: 30px; }
.folder-head {
  padding: 12px 0;
  border-top: 2px solid var(--ink);
  margin-bottom: 14px;
}
.folder-no {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 5px;
}
/* .folder-title is an h2 and must shed every h2 rule — this is a title, not
   a section break. */
h2.folder-title {
  font-family: var(--font-display);
  font-size: 21px; font-weight: var(--display-weight); letter-spacing: -0.018em;
  text-transform: none; color: var(--heading);
  margin: 0; padding: 0; border-top: 0;
  cursor: text;
}
.folder-head input[type="text"] { font-size: 19px; font-weight: 600; }
.folder-counts {
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted-2);
  margin-top: 6px; font-variant-numeric: tabular-nums;
}

/* ---------- the ladder ----------
   All four rungs, always, lit as far as this script has actually got. The
   unlit ones are the instruction: this is what happens next. */
.ladder { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.rung {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 5px 8px; border-radius: 2px;
  border: 1px dashed var(--rule);
  color: var(--muted-2);
  background: transparent;
}
.rung.on { border-style: solid; border-color: var(--ink); background: var(--ink); color: var(--paper-3); }
/* The last rung is the only one that is an outcome rather than a step, so
   when it lights, it lights in pen. */
.rung.on:last-child { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }

/* ---------- an ad's numbers ----------
   Three figures and a timestamp: the whole read-back, on the card. */
.ad-glance {
  margin-top: 12px;
  border: 1px solid var(--rule);
  background: var(--paper-4);
  cursor: pointer;
}
/* The strip is always there; the three figures come out on hover, or on a
   tap where there is no hover to speak of. */
.ad-glance-grid { display: none; grid-template-columns: repeat(3, 1fr); }
.ad-glance.show .ad-glance-grid { display: grid; }
@media (hover: hover) { .card.ad:hover .ad-glance-grid { display: grid; } }
.ad-cell { padding: 11px 12px; }
.ad-cell + .ad-cell { border-left: 1px dotted var(--rule-soft); }
.ad-cell-k {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted-2);
}
.ad-cell-v {
  font-family: var(--font-mono);
  font-size: 19px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--heading); font-variant-numeric: tabular-nums; margin-top: 3px;
}
.ad-glance-foot {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.08em; color: var(--muted-2);
  padding: 8px 12px; border-top: 1px dotted var(--rule-soft);
  background: var(--amber-wash);
}
.ad-glance-empty { font-size: 13.5px; color: var(--muted); padding: 11px 12px; line-height: 1.45; }

/* ---------- raw footage, demoted ----------
   A second sheet laid under the finished ones. */
.card.take { background: var(--paper-4); }

/* ============================================================
   THE TOUR — shown once, to somebody who has never seen this.
   A spotlight ring cut out of an ink scrim (one box-shadow, no second
   element), a card, and one hand-drawn arrow in pen.
   ============================================================ */
.tour { position: fixed; inset: 0; z-index: 80; }
.tour-ring {
  position: absolute;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: 0 0 0 9999px rgba(23, 20, 15, 0.66);
  pointer-events: none;
  transition: left .22s, top .22s, width .22s, height .22s;
}
/* With no target (the welcome card) the scrim comes from the root itself. */
.tour.no-target { background: rgba(23, 20, 15, 0.66); }
.tour-card {
  position: absolute;
  background: var(--paper-3);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 30px 60px -30px rgba(23, 20, 15, .8);
  padding: 18px;
}
.tour-card.centered {
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 28px));
}
.tour-step {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 7px;
}
.tour-card h3 { margin-bottom: 6px; }
.tour-card .meta { font-size: 14.5px; }
.tour-bar { display: flex; gap: 8px; margin-top: 16px; }
.tour-bar .btn { flex: 1; }
/* the hand: once per screen, and never carrying information */
.tour-hand { position: absolute; top: -27px; left: 18px; transform: rotate(-4deg); font-size: 21px; }
.tour-arrow { position: absolute; color: var(--accent); width: 52px; }
.tour-card.above .tour-arrow { bottom: -30px; right: 24px; transform: rotate(38deg); }
.tour-card.below .tour-arrow { top: -30px; right: 24px; transform: rotate(-142deg); }
.tour-card.centered .tour-arrow { display: none; }