/* ── A1MEDIA OS ───────────────────────────────────────────────────────────
   Soft-grey page, white cards, one azure. A1Media's brand blue carries every
   interactive affordance AND every data mark (bars, lines, meters), so the
   thing you can act on and the thing you are measuring share one voice.

   MONOCHROME IS THE RULE (owner's decision, 2026-09-30). Paper, ink, hairlines,
   azure for what can be pressed, and ONE red for what genuinely blocks. There
   is no green and no amber: `--good` and `--warn` still exist as names because
   app.js paints them on hundreds of elements, but they resolve to ink, so a
   "healthy" pill and a "watch" pill are the same paper-and-ink and only the
   word differs. A state that needs a glyph gets ● ◐ ○, not a hue.

   MOTION HAS THREE DURATIONS AND ONE EASE (see the tokens). Transform and
   opacity only; enter from ≤6px; exit shorter than enter; one infinite
   animation per view (the `live` dot) plus the load bar; no 3-D, no blur. One
   reduced-motion block at the END of this file replaces every other.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Inter";
  src: url("/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}
:root {
  color-scheme: light;
  --bg:          #f3f5f8;   /* page behind the cards */
  --paper:       #ffffff;   /* card surface, rail */
  --paper-2:     #f8fafc;   /* inset surfaces */
  --wash:        #eef2f6;   /* hover */
  --ink:         #0f172a;
  --ink-2:       #475569;
  --ink-3:       #606c80;   /* ≥ 4.7:1 on paper, bg, wash and the soft status tints — the quietest ink that still reads */
  --rule:        #e5e9f0;
  --rule-strong: #cbd3de;
  --line:        var(--rule);

  /* A1Media azure is the one interactive colour */
  --accent:      #1397d4;
  --accent-ink:  #0b6e9e;   /* accent as text on white */
  --accent-soft: #e7f4fb;

  /* STATUS IS INK. The names stay because app.js emits them on ~120 elements;
     the values are the monochrome remap: "good" is plain ink on inset paper,
     "watch" is the second ink on the hover wash. Red is the one exception and
     it is rationed for what blocks (a failed send, a drifted number, a kill
     switch) — never for "in review", "needs you" or a share of revenue. */
  --good:      var(--ink);    --good-soft:  var(--paper-2);
  --warn:      var(--ink-2);  --warn-soft:  var(--wash);
  --alert:     #c2261d;  --alert-soft: #fee2e2;

  /* Type is the identity: an old-style serif carries the headings — the
     "printed ledger" register — while data always sits in the mono with
     tabular figures. The sans does the quiet connective work between them. */
  --serif: "Charter", "Bitstream Charter", "Iowan Old Style", "Sitka Text", "Palatino Linotype", Palatino, Cambria, Georgia, serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --sans: "Inter", "Inter Variable", "Avenir Next", Avenir, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  /* tony-r1: the emoji faces BEFORE the generic family. After `sans-serif` some engines (Chromium on
     Linux via fontconfig) settle on the generic's own fallback and draw a box; listed first, an
     installed colour-emoji face wins for the emoji and the text faces still win for the letters
     (none of them has letter glyphs). Used on text a creator wrote: video titles. */
  --sans-emoji: "Inter", "Inter Variable", "Avenir Next", Avenir, "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", "EmojiOne Color", sans-serif;

  /* one data colour for every mark; status colours are never used for data */
  --chart-1: var(--accent);
  --chart-1-soft: var(--accent-soft);

  /* scale — every size below is one of these, so rhythm is a decision, not an accident */
  --t-xs: 11px;  --t-sm: 12.5px;  --t-base: 14.5px;  --t-md: 15.5px;
  --t-lg: 18px;  --t-xl: 24px;    --t-2xl: 30px;
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 6px;
  --shadow: 0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.05);
  --shadow-lift: 0 4px 12px rgba(16,24,40,.08), 0 1px 3px rgba(16,24,40,.06);
  --shadow-pop: 0 24px 60px rgba(16,24,40,.22), 0 2px 8px rgba(16,24,40,.08);
  /* THE HOUSE MOTION LANGUAGE. Three durations, one ease in, one ease out:
       --dur-1  micro     hover, press, toggle, a pill filling
       --dur-2  standard  nav state, drawer, fold, toast, tab underline
       --dur-3  enter     a view rising, a panel arriving, a slide's mark
     Exit is always the shorter one. `--dur` is the old name and it is the
     micro duration now, so the 59 existing transitions land on the scale. */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease: cubic-bezier(.22,.8,.36,1);
  --ease-out: cubic-bezier(.4,0,1,1);
  --dur: var(--dur-1);
  /* lets `height: auto` interpolate, so a <details> fold can open with a transition */
  interpolate-size: allow-keywords;
  --row-y: .72rem;
  --gap: 1.25rem;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #0b1015;
  --paper:       #141b23;
  --paper-2:     #10171e;
  --wash:        #1b242e;
  --ink:         #e9eef4;
  --ink-2:       #9fadbd;
  --ink-3:       #8896a8;   /* ≥ 5.2:1 on every dark surface */
  --rule:        #202b36;
  --rule-strong: #2e3d4c;

  --accent:      #3aabe2;
  --accent-ink:  #6cc4ee;
  --accent-soft: #10293a;

  --good:      var(--ink);    --good-soft:  var(--paper-2);
  --warn:      var(--ink-2);  --warn-soft:  var(--wash);
  --alert:     #f87171;  --alert-soft: #2e1516;

  --shadow: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --shadow-lift: 0 6px 16px rgba(0,0,0,.4);
  --shadow-pop: 0 24px 60px rgba(0,0,0,.6);
}
:root[data-density="compact"] { --row-y: .4rem; --gap: .85rem; }

* { box-sizing: border-box; }
/* a class that sets `display` outranks the UA [hidden] rule */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--t-base);
  line-height: 1.55;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01";   /* Inter: single-storey a, open digits */
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.014em; text-wrap: balance; }
a { color: var(--accent); text-underline-offset: 2px; }
code { font-family: var(--mono); font-size: .93em; }
::selection { background: var(--ink); color: var(--paper); }

/* micro-label: the workhorse of this design */
.micro {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 650; color: var(--ink-3);
}
/* Figures sit in the sans with tabular digits — they line up without looking
   like a terminal. The mono is reserved for things that ARE code: ids, keys,
   e-mail addresses, timestamps. */
.num { font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── controls ───────────────────────────────────────────────────────────── */
.btn {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1.3;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  padding: .48rem .9rem; border-radius: var(--radius-sm);
  box-shadow: 0 1px 1px rgba(16,24,40,.04);
  transition: background var(--dur), border-color var(--dur), color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.btn:hover { background: var(--wash); border-color: var(--ink-3); }
.btn:active { transform: translateY(1px) scale(.985); box-shadow: none; }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
/* brand rule: primary buttons are black pills */
.btn-pill {
  background: #0c1116; color: #fff; border-color: #0c1116; border-radius: 30px;
  padding: .66rem 1.45rem; font-weight: 600; font-size: 13.5px;
  box-shadow: 0 1px 2px rgba(16,24,40,.18);
}
:root[data-theme="dark"] .btn-pill { background: #f5f5f4; color: #0a0a0a; border-color: #f5f5f4; }
.btn-pill:hover { background: #000; border-color: #000; }
:root[data-theme="dark"] .btn-pill:hover { background: #fff; border-color: #fff; }
.btn-quiet { border-color: transparent; color: var(--ink-2); padding: .32rem .55rem; box-shadow: none; }
.btn-quiet:hover { color: var(--ink); background: var(--wash); border-color: transparent; }
.btn-block { width: 100%; }
.btn-sm { font-size: 12.5px; padding: .36rem .75rem; }
.btn-xs { font-size: 11.5px; padding: .22rem .55rem; }

input, select, textarea {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  padding: .55rem .75rem; width: 100%;
  transition: border-color var(--dur), box-shadow var(--dur);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input::placeholder { color: var(--ink-3); }
:where(input, select, textarea):focus-visible { outline: none; }
:where(.btn, .nav-item, .cmd-open, .linkish, .subtab, .client-tab, .acct-link, .job, .client-card):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.field { display: grid; gap: .3rem; margin-bottom: .9rem; }
.linkish {
  background: none; border: none; padding: 0; font: inherit; font-size: 11.5px;
  color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.linkish:hover { color: var(--ink); }
/* A thumb's target: on anything without hover the underlined word is a 44px row. */
@media (hover: none) {
  .linkish { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; margin-block: -.6rem; vertical-align: middle; }
}

/* ── sign in ────────────────────────────────────────────────────────────── */
/* Phone first: the panel is the page, edge to edge with a 16px gutter, no shadow, and every
   control is a thumb's height. From 640px it becomes the card on paper it always was. The
   inputs are 16px on purpose — under that, iOS zooms the page on focus and the client signs in
   to a half-off-screen form. */
.signin {
  min-height: 100dvh; display: grid; place-items: center;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
  background: var(--bg);
}
.signin-panel {
  width: min(420px, 100%); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.5rem 1.25rem 1.1rem;
}
@media (min-width: 640px) {
  .signin { padding: 2.5rem 1.25rem; }
  .signin-panel { width: min(440px, 94vw); border-radius: 18px; box-shadow: var(--shadow-lift); padding: 2.1rem 2.25rem 1.6rem; }
}
.signin-head { display: flex; gap: .9rem; align-items: center; margin-bottom: 1.5rem; }
.signin .field { margin-bottom: 1rem; }
.signin .field .micro { display: block; }
.signin input { min-height: 48px; font-size: 16px; padding: .6rem .85rem; }
.signin .btn-pill { min-height: 48px; font-size: 15px; margin-top: .35rem; }
/* The password field and its Show/Hide. The button sits inside the field's box, so the tap
   target does not move when the label wraps, and the input leaves room for it. Azure text,
   because it is the one thing on the row you can press. */
.signin-pw { position: relative; display: grid; }
.signin-pw input { padding-right: 4.4rem; }
.signin-eye {
  position: absolute; right: .3rem; top: 50%; transform: translateY(-50%);
  min-height: 36px; padding: 0 .7rem; border: 0; background: none; border-radius: var(--radius-xs);
  font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink); cursor: pointer;
}
.signin-eye:hover { background: var(--accent-soft); }
.signin-eye:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.signin-hint { margin: .35rem 0 0; font-size: var(--t-xs); color: var(--ink-2); }
.signin-help { margin: 1.1rem 0 0; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.signin-legal {
  display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
  margin-top: 1.4rem; padding-top: .85rem; border-top: 1px solid var(--rule);
  font-size: var(--t-xs); color: var(--ink-3);
}
.mark {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
}
.signin-logo { width: 52px; height: 52px; flex: none; object-fit: contain; }
/* The brand mark is black ink on transparent, so it always sits on a white
   tile — in dark mode too — rather than inheriting the inverted --ink. */
.mark-logo { background: #fff; border: 1px solid var(--rule); padding: 4px; }
.mark-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.signin-title { font-size: 17px; letter-spacing: .04em; font-weight: 700; }
.signin-title span { color: var(--ink-3); font-weight: 500; }
.signin-sub { margin: .15rem 0 0; font-size: 12.5px; color: var(--ink-3); }
/* The one red on the page. The server's sentence, and the same one for a wrong email and a
   wrong password — the text never says which. */
.signin-error {
  margin: 0 0 .9rem; font-size: var(--t-sm); line-height: 1.45; color: var(--alert);
  border-left: 2px solid var(--alert); padding: .1rem 0 .1rem .65rem;
}
.signin-demo { margin-top: 1.75rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.demo-list { margin-top: .5rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: .3rem; }
.demo-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .5rem;
  width: 100%; text-align: left; background: none; border: 1px solid transparent; cursor: pointer;
  font: inherit; color: var(--ink); padding: .45rem .6rem; border-radius: var(--radius-sm);
  transition: background var(--dur), border-color var(--dur);
}
.demo-row > span:first-child { min-width: 0; }
.demo-row:hover { background: var(--wash); border-color: var(--rule); }
.demo-name { font-size: 12.5px; font-weight: 600; }
.demo-lvl { font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.demo-row .row-sub { font-size: 11px; }
.signin-foot { margin: .9rem 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.55; }

/* ── shell ──────────────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 228px minmax(0, 1fr); min-height: 100vh; }
.rail {
  border-right: 1px solid var(--rule); padding: 1rem .8rem .9rem;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  background: var(--paper);
}
.rail-head { display: flex; gap: .65rem; align-items: center; padding: 0 .4rem .85rem; }
/* the drawer handle: a phone control, switched on by the 900px media query */
.rail-menu { display: none; }
.rail-id { min-width: 0; }
.rail-name { font-size: 13px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a client's own business name is the whole point of the white label — two lines beat "Johnny Performan…" */
:is(body.client-login, .cl-skin) .rail-name { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }
.rail-sub { font-size: 11px; color: var(--ink-3); }

.cmd-open {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  width: 100%; font: inherit; font-size: 12.5px; color: var(--ink-3); cursor: pointer;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: .45rem .65rem; margin-bottom: .85rem;
  transition: border-color var(--dur), background var(--dur), color var(--dur);
}
.cmd-open:hover { border-color: var(--rule-strong); color: var(--ink-2); background: var(--paper); }
kbd {
  font-family: var(--sans); font-size: 10px; font-weight: 600; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 4px; padding: .05rem .3rem; background: var(--paper);
}

.nav { flex: 1; overflow-y: auto; min-height: 0; }
/* Thirteen entries in seven groups have to clear a 900px-tall laptop without
   the rail scrolling — a nav you have to scroll to find a tab defeats the
   point of grouping it. Row height and the space above each group label are
   the two levers; both are tuned to fit, not to a round number. */
/* Thirteen entries in seven groups have to clear a 900px laptop without the
   rail scrolling. Line-height is the lever: the rows sit tight, the group
   labels tighter, and the space between groups does the separating. */
.nav-group { margin: .6rem .6rem .2rem; font-size: 10px; letter-spacing: .11em; line-height: 1.2; }
.nav-group:first-child { margin-top: .1rem; }
.nav-item {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ink-2); cursor: pointer;
  background: none; border: none; border-radius: var(--radius-sm);
  padding: .3rem .6rem; margin-bottom: 1px; line-height: 1.35;
  transition: background var(--dur), color var(--dur);
}
.nav-item:hover { color: var(--ink); background: var(--wash); }
.nav-item[aria-current="true"] { color: var(--accent-ink); font-weight: 600; background: var(--accent-soft); }
.nav-icon { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.nav-item[aria-current="true"] .nav-icon { opacity: 1; stroke: var(--accent); }
.nav-tag {
  margin-left: auto; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600;
}

/* ── sections in the rail (lib/model.js `subnav`) ────────────────────────
   Staff see a parent with its children indented under it, disclosed only
   while that tab is open. The rule down the left is what says "these belong
   to the row above"; the indent alone reads as an accident at 13px. */
/* Tight on purpose. The rail's whole budget is one 900px laptop without a
   scrollbar (see the note above .nav-group), and eight more rows have to come
   out of what is left after thirteen tabs and eight group labels. So the
   children run smaller and closer than the tabs they sit under — which is
   also the right hierarchy signal: they are inside something. */
.nav-sub { margin: .05rem 0 .3rem .9rem; padding-left: .5rem; border-left: 1px solid var(--rule); }
.nav-sub .nav-item { font-size: 12.5px; padding: .16rem .5rem; gap: .45rem; margin-bottom: 0; }
.nav-sub .nav-icon { width: 14px; height: 14px; }
.nav-subgroup { margin: .3rem .35rem .06rem; font-size: 9px; letter-spacing: .09em; line-height: 1.15; }
.nav-sub > .nav-subgroup:first-child { margin-top: .1rem; }
/* A client gets them flat and top-level, so they are ordinary rows — no rule,
   no indent, nothing to say they are "inside" anything. Their portal is not a
   place they visit, it is the app. */

/* the phone drawer's backdrop — only ever shown by the media query below */
.nav-scrim { display: none; }

.rail-foot { border-top: 1px solid var(--rule); padding-top: .65rem; margin-top: .5rem; }
/* data-source strip: live GHL vs local demo, and the Sync affordance */
.source {
  display: flex; align-items: center; gap: .45rem;
  padding: 0 .35rem .6rem; margin-bottom: .5rem; border-bottom: 1px solid var(--rule);
}
.source-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--ink-3); box-shadow: 0 0 0 3px var(--wash); }
.source-dot.live { background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.source-text { min-width: 0; display: grid; flex: 1; }
.source-name { font-size: 11px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-when { font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source .btn { flex: none; }
.flag-live { border-color: var(--accent); color: var(--accent); }
.whoami { display: flex; gap: .55rem; align-items: center; padding: 0 .35rem .6rem; }
.avatar {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-ink); border: 1px solid transparent;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.whoami-text { min-width: 0; display: grid; }
.whoami-name { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.whoami-role { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-actions { display: flex; flex-wrap: wrap; gap: .25rem; }
/* Four buttons now (Theme, Density, Password, Sign out). The base .8rem side
   padding made them too wide for the rail, so "Sign out" broke onto a second
   line. Tighten the padding, keep each label on one line, and let whole
   buttons wrap to a 2×2 grid rather than the text inside one breaking. */
.rail-actions .btn {
  flex: 1 1 40%; min-width: 0; font-size: 11.5px; font-weight: 550; padding: .38rem .3rem; white-space: nowrap;
  border-color: transparent; background: var(--paper-2); color: var(--ink-2); box-shadow: none;
}
.rail-actions .btn:hover { background: var(--wash); color: var(--ink); border-color: var(--rule); }
/* Legal links (2026-10-05): login footer and the menu's foot. Quiet, one line,
   real links to /legal/*.html (served to logged-out visitors as static files). */
.legal-links { color: var(--ink-3); font-size: var(--t-xs); }
.legal-links a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.legal-links a:hover, .legal-links a:focus-visible { color: var(--ink); }
.signin-legal .legal-links { flex-basis: 100%; }
.rail-legal { padding: .55rem .35rem 0; text-align: center; }

/* ── main ───────────────────────────────────────────────────────────────── */
.main { min-width: 0; }
/* One measure for the whole app: the header and the body share a max-width and
   centre together, so nothing stretches across a 27" monitor. */
.topbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  padding: 1.9rem 2.5rem 1.1rem; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 6;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  max-width: calc(1360px + 5rem); margin-inline: auto; width: 100%;
}
.topbar h1 { font-family: var(--serif); font-size: 28px; font-weight: 700; letter-spacing: -0.012em; line-height: 1.15; }
.topbar-title p { margin: .3rem 0 0; font-size: 14px; color: var(--ink-2); max-width: 68ch; min-height: 1.55em; }
/* min-height: the subtitle line is reserved even when a screen has none, so
   the header is the same height on every tab and nothing below it moves. */
.topbar-meta { display: flex; gap: .45rem; align-items: center; flex: none; }
.flag {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 650;
  border: 1px solid var(--ink); padding: .16rem .5rem; white-space: nowrap; border-radius: 5px;
}
.flag-quiet { border-color: var(--rule-strong); color: var(--ink-3); }
/* app.js paints #role-flag with '' for a client; an empty pill is a bug on every client screen */
.flag:empty { display: none; }
/* data-source label (lib/datamap.js → labelSources): the flag, at widget scale */
.src-label {
  display: inline-block; vertical-align: middle; margin-left: .4rem;
  font: 600 9px/1.5 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3); border: 1px solid var(--rule-strong); border-radius: 4px; padding: 0 .35rem;
  white-space: nowrap; cursor: help;
}
/* the verifier's verdict dot (lib/verify.js): green = verified, red = drifted, grey = unverified */
.src-label[data-verified]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; background: var(--verify-dot, var(--ink-3)); }

.view { padding: 0 2.5rem 5rem; max-width: calc(1360px + 5rem); margin-inline: auto; display: flow-root; }
/* flow-root: a block's top margin stays inside the view instead of collapsing
   through it, so recordSkeleton() measures every block where it really sits. */

/* section = a white card with one heading rule. Everything inside sits flat —
   no second box inside the first. */
.section {
  margin-top: var(--gap); background: var(--paper); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.15rem 1.4rem 1.35rem; box-shadow: var(--shadow);
}
.section-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem 1rem;
  padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule);
}
/* The title never breaks mid-phrase to make room for its note: the note keeps
   its own width (never squeezed under ~24ch) and drops onto the line below
   when the two do not fit side by side. In a narrow card it sits under the
   title, left-aligned, so it reads as a caption rather than a stray. */
.section-head h2 { font-size: 16px; font-weight: 650; letter-spacing: -.012em; flex: 1 1 auto; min-width: 0; max-width: 100%; }
.section-note { font-size: 12.5px; color: var(--ink-3); text-align: right; flex: 0 1 auto; min-width: min(100%, 24ch); max-width: 100%; margin-left: auto; }
.section-head .src-label { flex: none; }
@container (max-width: 480px) {
  .section-head { flex-direction: column; align-items: flex-start; gap: .1rem; }
  .section-note { text-align: left; margin-left: 0; min-width: 0; }
}
.split { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-wide { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.stack { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
/* Grid children default to min-width:auto, which lets one wide table inflate
   its whole column (and scroll the page sideways). Every layout grid below
   uses minmax(0, …) tracks AND zeroes its children, so a card can only ever be
   as wide as the space it was given. */
.split > *, .split-wide > *, .stack > * { min-width: 0; }

/* ── stat strip: figures divided by hairlines, not cards ────────────────── */
/* subgrid keeps label / value / note on the same three baselines across the
   whole strip, even when one label wraps to two lines */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr));
  grid-template-rows: auto auto auto; gap: .75rem; margin-top: var(--gap);
}
/* Balanced rows: enhanceView writes data-n (the tile count) on every strip and
   band, so six tiles sit 3+3 or 6-up rather than 5+1, and seven sit 4+3.
   Below that the container queries hand over to 2-up. */
.stats[data-n="6"], .stats[data-n="9"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stats[data-n="7"], .stats[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 700px) {
  .stats[data-n="6"], .stats[data-n="7"], .stats[data-n="8"], .stats[data-n="9"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Symmetric padding on both sides of every divider — with padding-left 0 the
   value of each cell sat flush against the rule of the cell before it. The
   first cell keeps a flush left edge so the strip aligns with the page. */
.stat {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .95rem 1.1rem 1rem; box-shadow: var(--shadow);
  display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; min-width: 0;
}
.stat-label { font-size: 12.5px; font-weight: 550; color: var(--ink-2); }
.stat-value {
  font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: .2rem;
  align-self: start; font-variant-numeric: tabular-nums;
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .4rem; min-width: 0;
}
.stat-num { min-width: 0; overflow-wrap: anywhere; }
/* the first figure in a strip is the one the screen is about: it leads */
.stats > .stat:first-child .stat-value { font-size: 36px; }
.stats > .stat:first-child .stat-label { color: var(--ink); font-weight: 600; }
.stat-value.alert { color: var(--alert); }
.stat-note { font-size: 12px; color: var(--ink-3); margin-top: .15rem; }
.stat-delta { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--good); white-space: nowrap; }
.stat-delta.down { color: var(--alert); }

/* ── tables ─────────────────────────────────────────────────────────────── */
/* shadows appear only when there is more table off-screen (local vs scroll
   background-attachment does the detection with no JS) */
.scroll-x {
  overflow-x: auto; max-width: 100%; min-width: 0;
  scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent;
  background:
    linear-gradient(to right, var(--paper) 40%, transparent) left center / 32px 100% no-repeat local,
    linear-gradient(to left, var(--paper) 40%, transparent) right center / 32px 100% no-repeat local,
    linear-gradient(to right, color-mix(in srgb, var(--ink) 26%, transparent), transparent) left center / 18px 100% no-repeat scroll,
    linear-gradient(to left, color-mix(in srgb, var(--ink) 26%, transparent), transparent) right center / 18px 100% no-repeat scroll;
}
.scroll-x::-webkit-scrollbar { height: 8px; }
.scroll-x::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 999px; }
/* enhanceView marks a table that is actually wider than its card; the hint
   is the one thing that says "there is more to the right" before you scroll */
.scroll-x[data-overflow] { padding-bottom: .35rem; }
.scroll-hint {
  display: none; margin: 0 0 .35rem; font-size: 11px; color: var(--ink-3); text-align: right;
  letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
}
.scroll-x[data-overflow] + .scroll-hint, .scroll-hint[data-on] { display: block; }
table.data { border-collapse: collapse; width: 100%; font-size: 13px; }
table.data th, table.data td {
  text-align: left; padding: var(--row-y) .85rem; white-space: nowrap; vertical-align: top;
  border-bottom: 1px solid var(--rule);
}
table.data th:first-child, table.data td:first-child { padding-left: .25rem; }
table.data th {
  font-size: 10.5px; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em;
  background: var(--paper); padding-top: .35rem; padding-bottom: .55rem; border-bottom-color: var(--rule-strong);
}
/* padding-left keeps a right-aligned column off the back of the one before it */
table.data td.num, table.data th.num {
  text-align: right; font-variant-numeric: tabular-nums;
  padding-right: 0; padding-left: 1.1rem;
}
/* a right-aligned column butts straight into whatever follows it */
table.data :is(th, td).num + :is(th, td) { padding-left: 1.1rem; }
table.data tbody tr { transition: background var(--dur); }
table.data tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
table.data tbody tr:last-child td { border-bottom: none; }
.cell-strong { font-weight: 600; }
.cell-sub { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: .1rem; white-space: normal; }
.wrap { white-space: normal; min-width: 22ch; }

/* Column priority: drop the least important columns before forcing a scroll.
   Keyed on the CONTAINER, not the viewport — a table in a half-width column is
   narrow even on a 27" screen, and viewport queries left it clipped. The
   content column at a 1280 viewport is ~970px, where a 7-column table does
   not fit: hide-md goes at 1000px of card, hide-sm at 560px. Anything still
   wider scrolls inside .scroll-x rather than clipping. */
.section, .drill, .lens-body, .modal { container-type: inline-size; }
@container (max-width: 1000px) { .hide-md { display: none; } }
@container (max-width: 560px) { .hide-sm { display: none; } }
/* fallback for anything rendered outside a container */
@media (max-width: 1180px) { .hide-md { display: none; } }
@media (max-width: 780px)  { .hide-sm { display: none; } }
/* ids and keys are one token: never wrapped across four lines of a cell */
table.data td.mono, table.data .mono { white-space: nowrap; }

/* ── state marks: glyph + word, never colour alone ──────────────────────── */
.state {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; padding: .16rem .6rem .18rem; line-height: 1.3;
  border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  letter-spacing: .005em;
}
.state::before { font-size: 8px; line-height: 1; }
.state-ok    { background: var(--good-soft);  color: var(--good); }
.state-ok::before    { content: "\25CF"; }
.state-watch { background: var(--warn-soft);  color: var(--warn); }
.state-watch::before { content: "\25D0"; }
.state-risk  { background: var(--alert-soft); color: var(--alert); }
.state-risk::before  { content: "\25B2"; }
.state-none  { background: var(--wash); color: var(--ink-3); }
.state-none::before  { content: "\2013"; }

.tag {
  display: inline-block; font-size: 11.5px; letter-spacing: .005em; font-weight: 550; line-height: 1.3;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-2); padding: .14rem .55rem; border-radius: 999px;
  white-space: nowrap;
}
.tag-solid { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag-alert { border-color: var(--alert); color: var(--alert); }
.tags { display: flex; flex-wrap: wrap; gap: .25rem; }

.note {
  font-size: 12.5px; color: var(--ink-2); border-left: 3px solid var(--accent);
  padding: .1rem 0 .1rem .8rem; margin-top: var(--gap); line-height: 1.55;
}
.note-alert { border-left-color: var(--alert); }
.note strong { font-weight: 650; }
.empty { font-size: 13px; color: var(--ink-3); padding: 1.2rem 0; }

/* ── list rows ──────────────────────────────────────────────────────────── */
.rows { display: grid; grid-template-columns: minmax(0, 1fr); }
.row {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,auto); gap: .75rem; align-items: baseline;
  padding: var(--row-y) 0; border-bottom: 1px solid var(--rule);
}
.row:last-child { border-bottom: none; }
.row-title { font-size: 13px; font-weight: 550; }
.row-sub { font-size: 11.5px; color: var(--ink-3); }
/* A value never pushes past its card: short ones stay on one line, a long
   one is cut with an ellipsis (the facts list below wraps instead). */
.row-meta { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ── facts: label / value pairs ("The basics") ──────────────────────────── */
.facts .row { grid-template-columns: max-content minmax(0, 1fr); align-items: start; }
.facts .row-title { font-weight: 400; white-space: nowrap; color: var(--ink-2); }
.facts .row-meta {
  white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .3rem .4rem; text-align: right;
}
.facts .row-meta .cell-sub { flex-basis: 100%; }
.facts .link-select { margin-left: 0; max-width: 100%; }
.facts .row-meta.mono { font-size: 11.5px; }
.alert-text { color: var(--alert); }

/* ── charts ─────────────────────────────────────────────────────────────── */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-foot { margin-top: .5rem; }
.tip {
  position: absolute; pointer-events: none; z-index: 4; transform: translate(-50%, -125%);
  background: var(--ink); color: var(--paper); padding: .35rem .6rem; border-radius: 6px;
  font-size: 11.5px; display: grid; gap: .05rem; opacity: 0; transition: opacity .09s; white-space: nowrap;
  box-shadow: var(--shadow-lift);
}
.tip.on { opacity: 1; }
.tip b { font-weight: 600; }
.tip span { font-variant-numeric: tabular-nums; }

.sm-grid { display: grid; gap: 1.1rem 1.6rem; }
.sm-panel { margin: 0; }
.sm-panel figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  border-bottom: 1px solid var(--rule); padding-bottom: .25rem; margin-bottom: .4rem;
}
.sm-name { font-size: 11.5px; font-weight: 600; }
.sm-val { font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.sm-foot { font-size: 10.5px; color: var(--ink-3); margin-top: .25rem; }

.ranked { display: grid; grid-template-columns: minmax(0, 1fr); }
.ranked-row {
  display: grid; grid-template-columns: minmax(90px, 1.1fr) minmax(60px, 2fr) auto;
  gap: .75rem; align-items: center; padding: .3rem 0; border-bottom: 1px solid var(--rule);
}
.ranked-row:last-child { border-bottom: none; }
.ranked-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranked-val { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.bar { display: block; height: 7px; background: var(--wash); border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--chart-1); border-radius: 999px; }
.spark { width: 100%; height: 30px; color: var(--chart-1); display: block; }

/* ── meter (quota / progress) ───────────────────────────────────────────── */
/* pack name → meter → ratio to the left; the row is 1200px wide and the meter
   was ending up a screen away from the account it belongs to */
.row-quota { grid-template-columns: minmax(0, 22rem) auto auto; justify-content: start; gap: 1.5rem; }
.row-quota .quota { justify-self: start; }
.quota { display: flex; gap: 2px; align-items: flex-end; height: 26px; }
.quota i { display: block; width: 9px; height: 100%; border: 1px solid var(--rule-strong); border-radius: 2px; }
.quota i.on { background: var(--chart-1); border-color: var(--chart-1); }
.quota i.over { border-color: var(--alert); background: var(--alert); }

/* ── scorecards ─────────────────────────────────────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); clip-path: inset(0 1px 1px 0); }
.card {
  min-width: 0; background: var(--paper); padding: 1rem 1.2rem 1.1rem;
  display: grid; grid-template-rows: auto auto 1fr; gap: .6rem;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.card-head { display: flex; align-items: flex-start; gap: .6rem; }
.card-id { min-width: 0; flex: 1; }
.card-name { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-role { font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-score { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
/* what the score IS: the share of metrics on target, said in words under it */
.card-on { font-size: 11px; color: var(--ink-3); margin-top: -.35rem; font-variant-numeric: tabular-nums; }
.card { grid-template-rows: auto auto auto 1fr; }
.card-spark { color: var(--chart-1); opacity: .8; }
.card-kpis { display: grid; align-content: start; grid-template-columns: minmax(0, 1fr); }
.kpi {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .55rem; align-items: baseline;
  padding: .28rem 0; border-bottom: 1px solid var(--rule); font-size: 12px;
}
.card-kpis .kpi:last-child { border-bottom: none; }
.kpi-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.kpi-val { font-variant-numeric: tabular-nums; font-size: 12px; }
.kpi-flag { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.kpi-flag.off { color: var(--alert); }

/* ── niche board ────────────────────────────────────────────────────────── */
/* per-cell borders rather than a gap-over-background trick, so a short final
   row leaves paper behind it instead of a grey block */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 228px), 1fr)); clip-path: inset(0 1px 1px 0); }
.board-cell {
  min-width: 0; background: var(--paper); padding: .85rem .9rem; min-height: 96px;
  display: grid; align-content: start; gap: .25rem;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.board-cell.claimed { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 3px 0 0 var(--accent); }
.board-cell.claimed .board-sub { color: var(--accent-ink); opacity: .75; }
.board-niche { font-size: 12.5px; font-weight: 600; }
.board-sub { font-size: 11px; color: var(--ink-3); }
.board-state { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; font-weight: 650; margin-top: auto; }

/* ── swatches (brand kit) ───────────────────────────────────────────────── */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 1rem; }
.swatch-chip { height: 62px; border: 1px solid var(--rule-strong); }
.swatch-name { font-size: 12px; font-weight: 600; margin-top: .4rem; }
.swatch-hex { font-size: 11.5px; font-family: var(--mono); color: var(--ink-2); }
.swatch-use { font-size: 11px; color: var(--ink-3); }

/* ── command palette ────────────────────────────────────────────────────── */
.palette {
  position: fixed; inset: 0; z-index: 40; display: grid; justify-items: center; align-items: start;
  padding-top: 14vh; background: rgba(16,24,40,.38);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
:root[data-theme="dark"] .palette { background: rgba(0,0,0,.55); }
.palette-box {
  width: min(560px, 92vw); background: var(--paper); border: 1px solid var(--rule-strong);
  border-radius: 14px; box-shadow: var(--shadow-pop); overflow: hidden;
  animation: pop-in var(--dur-2) var(--ease) both;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
/* A press you can see: the control that just changed state settles from 96%. --dur-1. */
@keyframes press { from { transform: scale(.96); } to { transform: none; } }
.palette-box input { border: none; border-bottom: 1px solid var(--rule); border-radius: 0; padding: .95rem 1.15rem; font-size: 15px; box-shadow: none; }
.palette-box input:focus { box-shadow: none; }
.palette-box input:focus-visible { outline: none; }
.palette-results { max-height: 46vh; overflow-y: auto; padding: .4rem; }
.palette-item {
  display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left;
  background: none; border: none; font: inherit; font-size: 13.5px; color: var(--ink);
  padding: .55rem .8rem; cursor: pointer; border-radius: 8px;
}
.palette-item:hover { background: var(--wash); }
.palette-item[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); }
.palette-item[aria-selected="true"] .palette-kind { color: var(--accent-ink); opacity: .8; }
.palette-kind { margin-left: auto; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 600; }
.palette-foot { border-top: 1px solid var(--rule); padding: .5rem 1.1rem; font-size: 11px; color: var(--ink-3); display: flex; gap: .35rem; align-items: center; background: var(--paper-2); }

/* ── toast ──────────────────────────────────────────────────────────────── */
.toast {
  /* `translate`, not `transform`, for the centring: pop-in animates transform and its `both`
     fill used to end on `transform: none`, which left the toast's LEFT edge at 50%. */
  position: fixed; bottom: 1.25rem; left: 50%; translate: -50% 0; z-index: 50;
  background: var(--ink); color: var(--paper); padding: .6rem 1rem; font-size: 13px;
  border-radius: 10px; box-shadow: var(--shadow-pop); animation: pop-in var(--dur-2) var(--ease) both;
}
.toast-bad { background: var(--alert); color: #fff; }

/* ── leaving (app.js dismiss) ───────────────────────────────────────────────
   The exit half of the motion language, for everything app.js used to cut off with
   `hidden`: toast, drawer, lens, palette, the KPI drill. --dur-2 with the out-ease — always
   shorter than the entrance it undoes. `animation: none` first, because an entrance keyframe
   held with `both` would otherwise pin opacity at 1 and the fade would never show. */
.is-leaving, .is-leaving > * { animation: none !important; }
.is-leaving {
  opacity: 0 !important; pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.toast.is-leaving { transform: translateY(6px); }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; align-content: start; }
  /* ONE ROW, 56px. The header used to be two: logo row, then avatar · Password · Sign out. A
     password is a once-a-year action and Sign out is a never-action on a phone you own; both
     live in the drawer's foot now (below), and the feed gets the 69px back. */
  .rail {
    position: static; height: auto; min-width: 0; border-right: none; border-bottom: 1px solid var(--rule);
    padding: .5rem 1rem;
  }
  .rail-head { padding-bottom: 0; }
  .cmd-open { margin: .5rem 0 0; }

  /* ── the drawer ───────────────────────────────────────────────────────
     This used to be a horizontal strip of pills with the group labels
     switched off. That was survivable at three entries and unreadable at
     ten: the client's own screens ran off the right edge with nothing to
     say there was more, and the groups that make ten destinations legible
     could not be shown at all. A phone's answer to a sidebar is a drawer,
     which is what every app on the device already does, so nobody has to
     learn it (Jakob's law). The groups come back, the rows stay rows, and
     the screen you are on is named in the header the whole time — so
     hiding the nav never costs you your place. */
  .rail-menu {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px;
    margin-left: -.35rem; border: 1px solid var(--rule); border-radius: var(--radius-sm);
    background: var(--paper-2); color: var(--ink-2); cursor: pointer;
  }
  .rail-menu svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; }
  .rail-menu:hover { background: var(--wash); color: var(--ink); }

  .nav {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
    width: min(86vw, 300px); max-width: 100%;
    background: var(--paper); border-right: 1px solid var(--rule);
    padding: 1rem .75rem 1.4rem; overflow-y: auto; overscroll-behavior: contain;
    transform: translateX(-101%); transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
    box-shadow: 0 0 40px rgba(0, 0, 0, .14);
  }
  body.nav-open .nav { transform: none; }
  /* Closed, it is out of the tab order as well as off the screen — an
     offscreen menu a Tab key can still walk into is a trap. */
  body:not(.nav-open) .nav { visibility: hidden; }
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 39;
    background: rgba(15, 20, 28, .38); border: 0; padding: 0;
    animation: fade-in var(--dur-2) var(--ease) both;   /* enter only; app.js hides it outright */
  }
  .nav-scrim[hidden] { display: none; }
  .nav-group { margin-top: .9rem; }
  .nav-group:first-child { margin-top: 0; }
  .nav-item { font-size: 14px; padding: .45rem .6rem; }
  .nav-tag { display: none; }
  .subtab .nav-tag-wip { display: inline; }   /* the WIP tag stays on a phone's sub-tab bar */
  /* ── the drawer's foot ────────────────────────────────────────────────
     The rail foot (data source · who you are · Theme · Density · Password · Sign out) is pinned
     to the bottom of the drawer and slides with it. It is a sibling of .nav in the markup, not
     a child, so it is positioned like the drawer rather than inside it — same width, same
     transform, same visibility rule, one layer above so it covers the nav's last rows rather
     than sitting under them. The nav reserves the space with padding-bottom. */
  .rail-foot {
    position: fixed; left: 0; bottom: 0; z-index: 41; width: min(86vw, 300px); max-width: 100%;
    margin: 0; padding: .7rem .9rem calc(.8rem + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--rule);
    display: grid; gap: .55rem;
    transform: translateX(-101%); visibility: hidden;
    transition: transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2);
  }
  body.nav-open .rail-foot { transform: none; visibility: visible; transition: transform var(--dur-2) var(--ease); }
  .nav { padding-bottom: 12.5rem; } /* +1.5rem for .rail-legal (2026-10-05) */
  .source { padding: 0 0 .5rem; margin: 0; }
  .whoami { padding: 0; }
  .whoami-text { display: grid; }
  .rail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
  .rail-actions .btn { min-height: 44px; font-size: 12px; }
  /* minmax(0,1fr), never plain 1fr — plain 1fr keeps the auto minimum, which
     lets a wide table inflate its own track and scroll the whole page sideways */
  .split, .split-wide { grid-template-columns: minmax(0, 1fr); }
  .split > *, .split-wide > *, .stack > * { min-width: 0; }
  .topbar { padding: 1.25rem 1.1rem .9rem; flex-wrap: wrap; position: static; }
  .topbar h1 { font-size: 24px; }
  /* two lines reserved, never more: the header is the same height on every
     tab, so switching tabs does not move the screen under a thumb */
  .topbar-title p { min-height: 3.1em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .topbar-meta { flex-wrap: wrap; }
  .view { padding: 0 1.1rem 4rem; }
  .section { padding: 1rem 1.1rem 1.15rem; }
  .stats > .stat:first-child .stat-value { font-size: 30px; }
  .stat-value { font-size: 26px; }
}
@media (max-width: 480px) {
  .source-name { max-width: 9rem; }
  /* Every control a thumb can land on is at least 40px tall here. Inline
     links grow their hit area with padding pulled back by a negative margin,
     so the text does not move and the rows keep their rhythm. */
  .nav-item, .rail-actions .btn, .btn, .subtab, .client-tab, .chip-btn, .cmd-open, .palette-item,
  .status-sel, .role-switch select, .table-search, .link-select, .demo-row, .spine-doc,
  .customise-toggle, .wp-tick, .wp-move, .kpi-tile, .cite, .job, .client-card, .idea-copy { min-height: 40px; }
  .chart-foot .linkish { min-width: 44px; justify-content: center; }
  .role-switch select { padding-block: .45rem; }
  .chip-btn { padding: .5rem .8rem; }
  .wp-tick { width: 40px; }
  .wp-move { width: 40px; }
  .acct-link, .linkish, .lens-row-link, .doc-toc a, .row-sub a, td a, .vault-hit footer a, .a1-hero-line .linkish {
    display: inline-flex; align-items: center; min-height: 40px; margin-block: -.6rem; vertical-align: middle;
  }
  .tile-sub .acct-link { min-height: 32px; margin-block: -.35rem; }
  .check { width: 32px; height: 32px; }
  .widget-opt input { width: 24px; height: 24px; }
  table.data th.sortable { padding-top: .9rem; padding-bottom: .9rem; }
  input, select, textarea { min-height: 40px; }
  .stat-value.lensable, .kpi-tile-value.lensable, .mini-value.lensable, .card-score.lensable { min-height: 40px; align-items: center; display: inline-flex; }
  .modal { max-width: calc(100vw - 2rem); }
}
@media print {
  .rail, .topbar-meta, .chart-foot, .toast { display: none !important; }
  .shell { grid-template-columns: 1fr; }
}

/* ── social channels ────────────────────────────────────────────────────── */
/* per-cell borders, not gap-over-background — a short final row would
   otherwise leave a grey filler block where no cell exists */
.channels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); clip-path: inset(0 1px 1px 0); }
/* five connector cells sit 5-up on a wide card rather than 4+1 */
.channels[data-n="5"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.channel {
  min-width: 0; background: var(--paper); padding: .85rem 1rem 1rem; display: grid; gap: .18rem; align-content: start;
  border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.channel-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem .4rem; min-width: 0; }
.channel-top .state { max-width: 100%; }
.channel-platform { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 650; color: var(--ink-3); }
.channel-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-sub { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-token { font-size: 11px; font-family: var(--mono); color: var(--ink-3); margin-top: .3rem; }
.channel-token.warn { color: var(--alert); }
.channel-token.bad { color: var(--alert); font-weight: 650; }
.row-group { grid-template-columns: minmax(0, 1fr) auto auto; gap: 1.25rem; }
.row-group > * { min-width: 0; }
.row-group .tags { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 620px) { .row-group { grid-template-columns: minmax(0, 1fr) auto; } .row-group .tags { grid-column: 1 / -1; justify-content: flex-start; } }

/* ── conversation drawer ────────────────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0; z-index: 45; display: flex; justify-content: flex-end;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.drawer-panel {
  width: min(520px, 94vw); background: var(--paper); border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; height: 100%; box-shadow: var(--shadow-pop);
  animation: slide-in var(--dur-2) var(--ease) both;
}
@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: 1.2rem 1.4rem 1rem; border-bottom: 1px solid var(--rule); flex: none;
}
.drawer-head h2 { font-size: 15px; }
.drawer-body { padding: 1.2rem 1.4rem 2rem; overflow-y: auto; flex: 1; }
.thread { display: grid; gap: .75rem; }
.msg { display: grid; gap: .2rem; max-width: 84%; }
.msg-in { justify-self: start; }
.msg-out { justify-self: end; text-align: right; }
.msg-body {
  font-size: 13px; padding: .55rem .8rem; border: 1px solid var(--rule); background: var(--paper-2);
  white-space: pre-wrap; word-break: break-word; text-align: left; border-radius: 12px 12px 12px 4px; line-height: 1.5;
}
.msg-out .msg-body { background: var(--accent-ink); color: var(--paper); border-color: var(--accent-ink); border-radius: 12px 12px 4px 12px; }
:root[data-theme="dark"] .msg-out .msg-body { color: #071019; }
.msg-meta { font-size: 11px; color: var(--ink-3); }

/* ── table tools: filter + sort ─────────────────────────────────────────── */
.table-tools { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.table-search {
  width: auto; min-width: 220px; max-width: 320px; font-size: 13px;
  padding: .4rem .7rem; border-color: var(--rule); border-radius: 999px; background: var(--paper-2);
}
.table-search:hover { border-color: var(--rule-strong); }
.table-search:focus { background: var(--paper); }
.table-count { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
table.data thead th { position: sticky; top: 0; background: var(--paper); z-index: 2; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--ink); }
.sort-mark::after { content: ""; opacity: .45; font-size: 9px; margin-left: .3rem; }
th[aria-sort="ascending"] .sort-mark::after { content: "▲"; opacity: 1; }
th[aria-sort="descending"] .sort-mark::after { content: "▼"; opacity: 1; }
.table-empty { text-align: center; }

/* severity as form, not colour alone: a stripe you can see while scanning */
tr.sev-high td:first-child { box-shadow: inset 2px 0 0 var(--alert); }
tr.sev-low td:first-child { box-shadow: inset 2px 0 0 var(--rule-strong); }

/* a sub-account name is a way in, and looks like one */
.acct-link {
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink);
  background: none; border: none; padding: 0; cursor: pointer; text-align: left;
  border-bottom: 1px solid var(--rule-strong); transition: color var(--dur), border-color var(--dur);
}
.acct-link:hover { border-bottom-color: var(--accent); color: var(--accent-ink); }
.health { display: inline-flex; align-items: center; gap: .45rem; justify-content: flex-end; }
.health b { font-weight: 650; }
.bar-sm { width: 34px; height: 5px; }

/* ── nav badges ─────────────────────────────────────────────────────────── */
.nav-label { min-width: 0; line-height: 1.25; }   /* "Marketing Intelligence" wraps rather than ellipsising */
.nav-badge {
  margin-left: auto; font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  min-width: 18px; height: 18px; padding: 0 .3rem; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ink); color: var(--paper); flex: none;
}
/* Ink, not red: a count of jobs is not an alarm. app.js adds `.bad` only when a job blocks. */
.nav-item[aria-current="true"] .nav-badge { background: var(--accent-ink); color: #fff; }
.nav-badge.bad { background: var(--alert); color: #fff; }

/* ── drawer internals ───────────────────────────────────────────────────── */
.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 90px), 1fr)); border-top: 1px solid var(--rule-strong); }
.mini { padding: .6rem .75rem .7rem 0; border-right: 1px solid var(--rule); min-width: 0; }
.mini:last-child { border-right: none; }
.mini-label { font-size: 9.5px; text-transform: uppercase; letter-spacing: .11em; font-weight: 650; color: var(--ink-3); }
.mini-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mini-note { font-size: 10.5px; color: var(--ink-3); }
.drawer-block { margin-top: 1.5rem; }
.drawer-block h3 {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 650;
  color: var(--ink-3); padding-bottom: .35rem; margin-bottom: .6rem; border-bottom: 1px solid var(--rule-strong);
}
.factors { display: grid; gap: .4rem; grid-template-columns: minmax(0, 1fr); }
.factor { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: .6rem; align-items: center; font-size: 12px; }
.factor-name { color: var(--ink-2); }
.factor-val { font-variant-numeric: tabular-nums; font-size: 12px; }
.blockers { margin: .7rem 0 0; padding-left: 1rem; font-size: 12px; color: var(--alert); }
.blockers li { margin-bottom: .25rem; }

/* ── Home: what needs you ───────────────────────────────────────────────── */
.hello { margin-top: 1.5rem; }
.hello h2 { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.hello p { margin: .3rem 0 0; font-size: 14.5px; color: var(--ink-2); }
.jobs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .75rem; margin-top: 1rem; }
/* four cards read as 2+2, never 3+1; eight as two rows of four */
.jobs[data-n="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jobs[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 620px) { .jobs[data-n] { grid-template-columns: minmax(0, 1fr); } }
.job {
  min-width: 0; display: flex; align-items: center; gap: .85rem; text-align: left; width: 100%;
  font: inherit; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .85rem 1rem; box-shadow: var(--shadow);
  transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.job:hover { border-color: var(--rule-strong); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.job:active { transform: none; }
.job:hover .job-go { color: var(--accent); transform: translateX(2px); }
.job-count {
  flex: none; min-width: 44px; height: 40px; padding: 0 .55rem; border-radius: 10px;
  display: grid; place-items: center; font-size: 18px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.job-count.bad  { background: var(--alert-soft); color: var(--alert); }
.job-count.warn { background: var(--warn-soft);  color: var(--warn); }
.job-count.ok   { background: var(--good-soft);  color: var(--good); }
.job-text { display: grid; gap: .1rem; min-width: 0; }
.job-title { font-size: 13.5px; font-weight: 600; }
.job-sub { font-size: 12px; color: var(--ink-2); }
.job-go { margin-left: auto; color: var(--ink-3); font-size: 15px; transition: transform .12s, color .12s; }

/* ── client page ────────────────────────────────────────────────────────── */
.client-bar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin-top: 1rem; padding-bottom: .75rem; border-bottom: 1px solid var(--rule);
}
.back-btn { flex: none; }
.client-tabs { display: flex; gap: .15rem; flex-wrap: wrap; }
.client-tab {
  font: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; color: var(--ink-2);
  background: none; border: none; border-radius: 999px; padding: .38rem .8rem;
  transition: background var(--dur), color var(--dur);
}
.client-tab:hover { background: var(--wash); color: var(--ink); }
.client-tab[aria-current="true"] { background: var(--ink); color: var(--paper); font-weight: 600; }
.client-status { margin-left: auto; }

/* ── client cards ───────────────────────────────────────────────────────── */
.client-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: .7rem; }
.client-card {
  display: grid; gap: .3rem; text-align: left; width: 100%; font: inherit; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: .85rem 1rem .9rem; color: var(--ink);
  transition: border-color var(--dur), transform var(--dur), box-shadow var(--dur);
}
.client-card:hover { border-color: var(--rule-strong); transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.client-card-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.client-card-name { font-size: 13.5px; font-weight: 650; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.client-card-sub { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-card { min-width: 0; }
.client-card > * { min-width: 0; }
.client-card-meters { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; min-width: 0; }
.client-card-meters .bar { flex: 1; min-width: 0; }
.client-card-score { font-size: 12.5px; font-weight: 650; flex: none; font-variant-numeric: tabular-nums; }
.client-card-top .state { flex: none; }
.client-card-foot { font-size: 11.5px; color: var(--ink-3); }

/* ── company brain ──────────────────────────────────────────────────────── */
.qa { padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.qa:last-child { border-bottom: none; }
.qa-q { font-size: 13.5px; font-weight: 650; margin-bottom: .3rem; }
.qa-a { font-size: 13.5px; color: var(--ink-2); }
.qa-from { font-size: 11.5px; color: var(--ink-3); margin-top: .35rem; }

/* ── reports ────────────────────────────────────────────────────────────── */
.build-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.build-row select { width: auto; min-width: 180px; }
.reports { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.report { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.3rem; background: var(--paper); box-shadow: var(--shadow); min-width: 0; container-type: inline-size; }
.report-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.report-client { font-size: 15px; font-weight: 650; }
.report-period { font-size: 12px; color: var(--ink-3); }
.report-headline { margin: .7rem 0 .9rem; font-size: 15px; font-weight: 550; }
.report-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr)); gap: .6rem; margin-bottom: 1rem; }
.report-metrics > div { min-width: 0; }
.report-metrics div { background: var(--paper-2); border-radius: var(--radius-sm); padding: .6rem .75rem; }
.report-metrics span { display: block; font-size: 20px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.report-metrics small { font-size: 11.5px; color: var(--ink-3); }
.report-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.report-cols > div { min-width: 0; }
.report-cols h4 { margin: 0 0 .35rem; font-size: 12px; font-weight: 650; }
.report-cols ul { margin: 0; padding-left: 1.05rem; font-size: 13px; color: var(--ink-2); }
.report-cols li { margin-bottom: .25rem; }
.report-foot { margin-top: .9rem; font-size: 11.5px; color: var(--ink-3); }

/* ── content ideas ──────────────────────────────────────────────────────── */
.idea-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap: .8rem; margin-top: var(--gap); }
.idea { min-width: 0; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--shadow); display: grid; gap: .45rem; align-content: start; }
.idea-top { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.idea-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 0; }
.idea-evidence { margin: 0; font-size: 12.5px; color: var(--ink-2); font-style: italic; }
.idea-body { font-size: 12.5px; color: var(--ink-2); }
.idea-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .2rem; }

/* ── org chart ──────────────────────────────────────────────────────────── */
.org { display: grid; gap: .35rem; grid-template-columns: minmax(0, 1fr); }
.org-node { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.org-name { display: block; font-size: 13.5px; font-weight: 600; }
.org-title { display: block; font-size: 11.5px; color: var(--ink-3); }

/* ── writing things down ────────────────────────────────────────────────── */
.check-row { grid-template-columns: auto minmax(0,1fr) auto; cursor: pointer; align-items: center; }
.check { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; }
.add-note { display: flex; gap: .5rem; margin-bottom: .9rem; }
.add-note input { flex: 1; }

/* ── chips ──────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.chip {
  display: inline-block; padding: .14rem .55rem; border-radius: 999px; line-height: 1.3;
  background: var(--wash); color: var(--ink-2); font-size: 11.5px; font-weight: 600;
  border: 1px solid transparent; white-space: nowrap;
}
.chip + .chip { margin-left: .25rem; }
.chip-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip-alert { background: var(--alert-soft); color: var(--alert); border-color: transparent; }
.avatar-sm { width: 22px; height: 22px; font-size: 10px; vertical-align: middle; margin-right: .35rem; }
.good-text { color: var(--good); }

/* ── the morning commitment ─────────────────────────────────────────────── */
.commit { display: grid; gap: .45rem; grid-template-columns: minmax(0, 1fr); }
.commit-said {
  margin: 0; font-size: 15px; font-weight: 500; color: var(--ink);
  border-left: 3px solid var(--accent); padding-left: .75rem; line-height: 1.5;
}

/* ── customise Home ─────────────────────────────────────────────────────── */
.customise { padding: 0; overflow: hidden; }
.customise-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; padding: .85rem 1.1rem; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink);
}
.customise-toggle:hover { background: var(--wash); }
.customise-caret { color: var(--ink-3); transition: transform .15s ease; }
.customise-toggle[aria-expanded="true"] .customise-caret { transform: rotate(180deg); }
.customise-body { padding: 0 1.1rem 1.1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.widget-grid {
  display: grid; gap: .5rem; margin-top: .7rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.widget-opt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55rem;
  align-items: start; padding: .55rem .65rem; border: 1px solid var(--line);
  border-radius: 9px; cursor: pointer;
}
.widget-opt:hover { background: var(--wash); }
.widget-opt input { width: 16px; height: 16px; accent-color: var(--accent); margin-top: .1rem; cursor: pointer; }
.widget-label { display: block; font-size: 13px; font-weight: 600; }

/* ── ticked lists (what an agent already knows) ─────────────────────────── */
.ticks { margin: .6rem 0 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.ticks li { position: relative; padding-left: 1.3rem; font-size: 13px; color: var(--ink-2); }
.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--good); font-weight: 700; }

/* ── report extras ──────────────────────────────────────────────────────── */
.report-rank { margin-top: 1rem; }
.report-rank h4, .report-recs h4 { margin: 0 0 .5rem; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.report-rank table { font-size: 12.5px; }
.report-rank .scroll-x { margin-top: .2rem; }
.report-recs { margin-top: 1rem; }
.report-recs ul { margin: 0; padding-left: 1.1rem; font-size: 13px; color: var(--ink-2); display: grid; gap: .3rem; }

@media print {
  .report { break-inside: avoid; border-color: #999; }
  .build-row, .table-tools, .customise { display: none !important; }
}

/* ── viewing-as switcher ────────────────────────────────────────────────── */
.role-switch { display: flex; align-items: center; gap: .4rem; }
.role-switch .micro { white-space: nowrap; }
.role-switch select {
  font: inherit; font-size: 12.5px; padding: .25rem 1.5rem .25rem .5rem;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--paper); color: var(--ink); cursor: pointer;
}
.flag-preview { background: var(--warn-soft); color: var(--warn); }
body.previewing .main { box-shadow: inset 0 0 0 2px var(--warn-soft); }

/* ── A1 Ops — the atom hero ─────────────────────────────────────────────── */
/* The one intentionally dark panel in the light theme: the atom lives in its
   own space. Deep ink, hairline border, the azure electrons doing the work. */
.atom-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 2rem; align-items: center;
  background: #0b1015; color: #e9eef4;
  border: 1px solid #202b36; border-radius: 14px;
  padding: 1.4rem 1.8rem; margin-top: var(--gap);
}
:root[data-theme="dark"] .atom-hero { background: #070b0f; border-color: #1a242e; }
@media (max-width: 780px) { .atom-hero { grid-template-columns: minmax(0, 1fr); padding: 1.1rem 1.2rem; } }
.atom-stage { min-width: 0; }
.atom-canvas { display: block; width: 100%; }
.atom-hero .micro { color: #8896a8; }
.atom-hero h2 {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.01em; margin: .3rem 0 .45rem; color: #f4f7fa;
}
.atom-hero p { margin: 0; color: #9fadbd; font-size: 13.5px; line-height: 1.6; max-width: 52ch; }
.atom-stats { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1rem; }
.atom-stats div { display: grid; }
.atom-stats span { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #e9eef4; }
.atom-stats small { font-size: 11px; color: #8896a8; letter-spacing: .04em; }
.atom-hero code { color: #9fc9e2; background: rgba(255,255,255,.05); padding: .05rem .3rem; border-radius: 4px; }
/* the hero is dark in both themes, so its pill is always the light one */
.atom-hero .btn-pill { background: #f5f5f4; color: #0a0a0a; border-color: #f5f5f4; }
.atom-hero .btn-pill:hover { background: #fff; }

.vault-ask { display: flex; gap: .5rem; margin-bottom: .8rem; }
.vault-ask input { flex: 1; min-width: 0; }
.vault-answer:empty { display: none; }
.vault-hit {
  border-left: 3px solid var(--accent); padding: .1rem 0 .1rem .85rem;
  margin-bottom: .9rem;
}
.vault-hit p { margin: 0 0 .4rem; font-size: 13.5px; line-height: 1.6; white-space: pre-wrap; }
.vault-hit footer { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: 12px; }
.vault-hit footer a { color: var(--accent); text-decoration: none; font-weight: 600; }
.vault-hit footer a:hover { text-decoration: underline; }
.vault-learned {
  border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem;
}
.vault-learned h4 { margin: 0 0 .4rem; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.vault-learned p { margin: .25rem 0; font-size: 13px; color: var(--ink-2); }
.vault-suggest { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .7rem; }
.chip-btn { cursor: pointer; font: inherit; font-size: 11px; font-weight: 600; }
.link-select { width: auto; max-width: 240px; margin-left: .5rem; padding: .2rem .5rem; font-size: 12px; vertical-align: middle; }
.chip-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ── agents ─────────────────────────────────────────────────────────────── */
.agent-grid {
  display: grid; gap: .8rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.agent {
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 1rem 1.15rem; background: var(--paper); display: grid; gap: .6rem;
  align-content: start; transition: border-color var(--dur), box-shadow var(--dur);
}
.agent:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-lift); }
.agent-mine { border-color: var(--accent); }
.agent-head { display: flex; justify-content: space-between; gap: .6rem; align-items: flex-start; }
.agent-name { font-size: 13.5px; font-weight: 650; }
.agent-flags { display: flex; align-items: center; gap: .35rem; flex: none; }
.agent-what { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; }
.agent-io { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: .7rem; }
.agent-io .ticks li { font-size: 12.5px; }
.agent-foot {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3);
  border-top: 1px solid var(--rule); padding-top: .5rem;
}
@media (max-width: 560px) { .agent-io { grid-template-columns: minmax(0,1fr); } }

/* ── sub-tab bar (a compressed tab's sections) ──────────────────────────── */
.subtabs {
  display: flex; gap: .25rem; flex-wrap: wrap; margin: .25rem 0 .35rem;
  border-bottom: 1px solid var(--rule);
}
.subtab {
  font: inherit; font-size: 13.5px; font-weight: 550; cursor: pointer; position: relative;
  background: none; border: 0; margin-bottom: -1px;
  padding: .6rem .85rem .7rem; color: var(--ink-2); border-radius: 8px 8px 0 0;
  white-space: nowrap; transition: color var(--dur), background var(--dur);
}
.subtab::after {
  content: ''; position: absolute; left: .5rem; right: .5rem; bottom: 0; height: 2px;
  background: var(--accent); border-radius: 2px 2px 0 0; opacity: 0; transform: scaleX(.6);
  transition: opacity var(--dur), transform var(--dur);
}
.subtab:hover { color: var(--ink); background: var(--wash); }
.subtab[aria-current="true"] { color: var(--ink); font-weight: 600; }
.subtab[aria-current="true"]::after { opacity: 1; transform: none; }
/* on a phone the bar scrolls sideways rather than stacking */
@media (max-width: 900px) {
  .subtabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { padding: .5rem .7rem .6rem; }
}

/* ── org board ──────────────────────────────────────────────────────────── */
.board-tools { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.board {
  position: relative; min-height: 520px; overflow: auto;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  background-image: radial-gradient(var(--rule) 1px, transparent 1px);
  background-size: 22px 22px;
}
.board-lines { position: absolute; inset: 0; pointer-events: none; }
.node {
  position: absolute; width: 192px; display: grid; gap: .4rem;
  background: var(--paper); border: 1px solid var(--rule-strong);
  border-radius: var(--radius); padding: .6rem .7rem;
  box-shadow: var(--shadow); cursor: grab; touch-action: none; user-select: none;
}
.node.dragging { cursor: grabbing; box-shadow: 0 8px 22px rgba(15,23,42,.16); z-index: 5; }
.node[data-off] { opacity: .5; border-style: dashed; }
.node-head { display: flex; gap: .45rem; align-items: center; }
.node-id { min-width: 0; }
.node-name { display: block; font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.node-title { display: block; font-size: 10.5px; color: var(--ink-3); }
.node-role select { font-size: 11.5px; padding: .2rem .4rem; }
.node-foot {
  display: flex; justify-content: space-between; align-items: center; gap: .4rem;
  font-size: 10.5px; color: var(--ink-3);
}
.node-foot .linkish { font-size: 10.5px; }

/* ── KPI bands ────────────────────────────────────────────────────────────
   Cavenaugh's dashboard groups its numbers into small bands instead of one
   long strip, and every traceable number is a button. The affordance is
   deliberately quiet — an arrow that appears on hover — because the tiles are
   read far more often than they are clicked. */
/* Separators are drawn per tile rather than by a 1px grid gap over a coloured
   background: a band whose tile count does not divide evenly by the column
   count would otherwise leave the empty cell showing as a grey block. */
.kpis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  row-gap: .5rem;
  background: var(--paper);
  clip-path: inset(0 1px 0 0);       /* trims the divider of whichever tile ends a row */
}
/* six tiles: 3+3 on a laptop column (6-up squeezes the labels), 6-up only
   when the card is wider than a thousand pixels */
.kpis-grid[data-n="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpis-grid[data-n="7"], .kpis-grid[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis-grid[data-n="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@container (min-width: 1000px) { .kpis-grid[data-n="6"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@container (max-width: 760px) {
  .kpis-grid[data-n="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpis-grid[data-n="7"], .kpis-grid[data-n="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container (max-width: 480px) {
  .kpis-grid[data-n] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* every tile indented the same, first included — the strip is one list */
  .kpi-tile:first-child { padding-left: 1.15rem; }
}
.kpi-tile {
  position: relative; min-width: 0;
  display: flex; flex-direction: column; gap: .2rem;
  padding: .55rem 1.15rem .6rem;
  background: var(--paper);
  text-align: left;
  font: inherit;
  box-shadow: inset -1px 0 0 var(--rule);
  border-radius: 8px 0 0 8px;
  transition: background var(--dur);
}
.kpi-tile:first-child { padding-left: .15rem; }
.kpi-tile:last-child { box-shadow: none; }
button.kpi-tile { cursor: pointer; border: 0; width: 100%; }
button.kpi-tile:hover { background: var(--wash); box-shadow: inset -1px 0 0 var(--rule), inset 0 0 0 1px var(--wash); }
button.kpi-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.kpi-tile-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 650;
}
.kpi-tile-value {
  font: 700 26px/1.15 var(--sans);
  color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
}
.kpi-tile-value.tone-risk { color: var(--alert); }
.kpi-tile-value.tone-ok   { color: var(--good); }
.kpi-tile-delta { font: 600 12px var(--sans); color: var(--good); letter-spacing: 0; }
.kpi-tile-delta.down { color: var(--alert); }
.kpi-tile-sub { font-size: 12px; color: var(--ink-2); }
.kpi-tile-arrow {
  position: absolute; right: .9rem; top: .55rem;
  color: var(--accent); opacity: 0; transition: opacity var(--dur), transform var(--dur);
  font-size: .9rem; transform: translateX(-3px);
}
button.kpi-tile:hover .kpi-tile-arrow,
button.kpi-tile:focus-visible .kpi-tile-arrow { transform: none; }
button.kpi-tile:hover .kpi-tile-arrow,
button.kpi-tile:focus-visible .kpi-tile-arrow { opacity: 1; }

/* ── the drill-down ─────────────────────────────────────────────────────── */
.drill {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 1.15rem 1.4rem 1.3rem;
  margin-bottom: var(--gap);
  box-shadow: var(--shadow-lift);
  animation: rise var(--dur-3) var(--ease) both;   /* it arrives under the tile you pressed */
}
.drill-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.drill-head h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.drill-note { margin: 0 0 .5rem; color: var(--ink-2); font-size: .84rem; max-width: 62ch; }
.drill-src { margin: 0; font-size: .74rem; color: var(--ink-3); display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.src-chip {
  display: inline-block; padding: .1rem .45rem;
  background: var(--accent-soft); color: var(--accent-ink);
  border-radius: 999px; font-weight: 600; font-size: .7rem;
}

/* ── customiser modal ─────────────────────────────────────────────────────
   Preview cards rather than a checkbox list: a panel is quicker to recognise
   by its shape than to identify from a label. */
.customise-bar { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: var(--gap) 0; }
.modal-back {
  position: fixed; inset: 0; z-index: 60; background: rgba(15,23,42,.45);
  display: grid; place-items: center; padding: 1.5rem;
}
:root[data-theme="dark"] .modal-back { background: rgba(0,0,0,.62); }
.modal {
  width: min(760px, 96vw); max-height: 88vh; overflow: auto;
  background: var(--paper); border-radius: 16px;
  border: 1px solid var(--rule); box-shadow: var(--shadow-pop);
  padding: 1.3rem 1.5rem 1.5rem; animation: pop-in var(--dur-2) var(--ease) both;
}
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .9rem; }
.modal-head h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.chip-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip-btn {
  font: inherit; font-size: 12px; cursor: pointer; padding: .25rem .7rem;
  border-radius: 999px; border: 1px solid var(--rule-strong);
  background: var(--paper); color: var(--ink-2);
}
.chip-btn:hover { background: var(--wash); color: var(--ink); }
/* white on brand azure is 3.3:1 — the selected chip fills with the accent INK (5.6:1 light, 8.9:1 dark) */
.chip-btn.on { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper); font-weight: 600; }

.wp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; }
.wp-card {
  min-width: 0; position: relative; border: 1px solid var(--rule); border-radius: var(--radius-sm);
  overflow: hidden; background: var(--paper-2); transition: border-color var(--dur), box-shadow var(--dur);
}
.wp-card:hover { border-color: var(--rule-strong); }
.wp-card.on { border-color: var(--accent); background: var(--paper); }
.wp-tick {
  position: absolute; top: .45rem; right: .45rem; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rule-strong); background: var(--paper);
  color: var(--ink-3); font: 600 12px/1 var(--sans);
}
.wp-card.on .wp-tick { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--paper); }
.wp-preview {
  height: 74px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .1rem; padding: .5rem; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.wp-big { font: 700 1.4rem var(--sans); color: var(--ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.wp-cap { font-size: .72rem; color: var(--ink-3); text-align: center; }
.wp-bars { width: 80%; display: grid; gap: 3px; }
.wp-bars i { display: block; height: 5px; background: var(--chart-1); border-radius: 2px; min-width: 6px; }
.wp-foot { padding: .55rem .7rem .6rem; display: grid; gap: .1rem; }
.wp-name { font-size: 13px; font-weight: 600; }
.wp-about { font-size: 11.5px; color: var(--ink-3); }
.wp-moves { display: flex; gap: .25rem; margin-top: .3rem; }
.wp-move {
  font: inherit; font-size: 11px; cursor: pointer; width: 22px; height: 20px;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-2);
  border-radius: 4px;
}
.wp-move:disabled { opacity: .35; cursor: default; }
.wp-move:not(:disabled):hover { background: var(--wash); color: var(--ink); }
.modal-acts { display: flex; gap: .4rem; align-items: center; flex: none; }

/* (the per-employee chat panel was deliberately removed — the Customize modal
   is how people arrange their own Home now) */

/* ── a panel the agent adds arrives with the same rise as everything else ──
   This was a 620ms perspective · rotateX · blur · saturate "warp-in" with a sheen sweep and an
   accent ring — the only 3-D and the only blur in the product. Motion here is transform and
   opacity, from 6px, in --dur-3, like every other arrival. */
.warp-in { animation: rise var(--dur-3) var(--ease) both; position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE 2026 PASS — components added across the whole surface area.
   Same two inks, same hairlines; the step change is typography, motion that
   carries meaning, and purpose-built layouts where a table was doing a job
   it was never right for.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── view entrance — sections settle into place, quickly and once ────────── */
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.view-enter > * { animation: rise var(--dur-3) var(--ease) both; }
.view-enter > *:nth-child(2) { animation-delay: .035s; }
.view-enter > *:nth-child(3) { animation-delay: .07s; }
.view-enter > *:nth-child(4) { animation-delay: .105s; }
.view-enter > *:nth-child(5) { animation-delay: .14s; }
.view-enter > *:nth-child(n+6) { animation-delay: .17s; }
/* The quiet twin: the first paint after boot, a stale-while-revalidate repaint,
   a theme switch, a resize. Nothing rises because nothing arrived. */
.view-still > * { animation: none; }

/* ── the landing skeleton ────────────────────────────────────────────────────
   Painted from the block heights the screen had last time (app.js:
   recordSkeleton), so the real content lands on top without moving anything.
   Quiet by design: a faint card outline, a slow sheen, no grey slabs. */
.skeleton { pointer-events: none; }
.skel-block { position: relative; overflow: hidden; border-radius: var(--radius); }
.skel-card { background: var(--paper); border: 1px solid var(--rule); box-sizing: border-box; }
.skel-grid { display: grid; gap: .75rem; grid-template-columns: repeat(var(--skel-cols, 3), minmax(0, 1fr)); }
.skel-grid[data-n="1"] { --skel-cols: 1; }
.skel-grid[data-n="2"] { --skel-cols: 2; }
.skel-grid[data-n="4"], .skel-grid[data-n="8"] { --skel-cols: 4; }
.skel-grid[data-n="5"] { --skel-cols: 5; }
.skel-grid[data-n="6"] { --skel-cols: 3; }
.skel-grid[data-n="7"] { --skel-cols: 4; }
.skel-grid > i { display: block; background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); min-height: 0; }
.skel-text-block { display: flex; flex-direction: column; justify-content: center; gap: .55rem; }
.skel-text-block > i { display: block; height: .9em; border-radius: 6px; background: var(--wash); }
.skel-text-block > i:first-child { height: 1.3em; }
.skel-block::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--wash) 70%, transparent) 50%, transparent 70%);
  transform: translateX(-100%); animation: skel-slide 1.6s ease-in-out .3s infinite;
}
@media (max-width: 900px) {
  .skel-grid[data-n] { --skel-cols: 1; }                       /* job cards and splits stack on a phone */
  .skel-grid[data-k="stats"], .skel-grid[data-k="kpis-grid"] { --skel-cols: 2; }
}

/* ── the loading hairline — appears only when a fetch is actually slow ───── */
.loadbar {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 80; overflow: hidden;
  background: transparent; pointer-events: none; opacity: 0; transition: opacity .15s;
}
.loadbar.on { opacity: 1; }
.loadbar i {
  display: block; height: 100%; width: 38%;
  background: var(--accent);
  animation: loadslide 1.1s cubic-bezier(.44,0,.56,1) infinite;
}
@keyframes loadslide { from { transform: translateX(-110%); } to { transform: translateX(380%); } }

/* ── error / degraded-section panel ──────────────────────────────────────── */
.section-error {
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  padding: 1rem 1.2rem; margin-top: var(--gap); color: var(--ink-2); font-size: 13px;
  display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap;
}
.section-error .btn { flex: none; }

/* ── empty states that say what to do next ───────────────────────────────── */
.empty-box {
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  padding: 1.8rem 1.4rem; text-align: center; color: var(--ink-3); background: var(--paper-2);
  display: grid; gap: .3rem; justify-items: center;
}
.empty-box b { color: var(--ink-2); font-weight: 600; font-size: 13.5px; }
.empty-box span { font-size: 12px; max-width: 44ch; }

/* ── meters & progress ───────────────────────────────────────────────────── */
.progress { display: block; height: 6px; background: var(--wash); border-radius: 999px; overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--chart-1); border-radius: 999px; transition: width .5s var(--ease); }
.progress.accent > i { background: var(--accent); }
.progress.alert > i { background: var(--alert); }
.seg-meter { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--wash); }
.seg-meter i { display: block; height: 100%; }
.seg-legend { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .45rem; font-size: 11.5px; color: var(--ink-2); }
.seg-legend b { font-weight: 650; font-variant-numeric: tabular-nums; }
.seg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .35rem; vertical-align: baseline; }

/* ── bookings: the day agenda ────────────────────────────────────────────── */
.agenda { display: grid; grid-template-columns: minmax(0, 1fr); }
.agenda-day {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 1.1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--rule);
}
.agenda-day:last-child { border-bottom: none; }
.agenda-date { text-align: right; padding-top: .1rem; }
.agenda-dow { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; font-weight: 650; color: var(--ink-3); }
.agenda-num { display: block; font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.1; }
.agenda-day.today .agenda-num { color: var(--accent-ink); }
.agenda-day.today .agenda-dow { color: var(--accent-ink); }
.agenda-items { display: grid; gap: .35rem; align-content: start; grid-template-columns: minmax(0, 1fr); }
.agenda-item {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: .8rem; align-items: baseline;
  padding: .4rem .6rem; border-left: 2px solid var(--rule-strong); background: var(--paper-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.agenda-item.tone-risk { border-left-color: var(--alert); }
.agenda-item.tone-ok { border-left-color: var(--accent); }
.agenda-time { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); font-weight: 500; }
.agenda-what { min-width: 0; }
.agenda-title { font-size: 12.5px; font-weight: 600; }
.agenda-sub { font-size: 11px; color: var(--ink-3); }
.agenda-flag { font-size: 11px; white-space: nowrap; }
.agenda-what { overflow-wrap: anywhere; }
@container (max-width: 480px) {
  .agenda-day { grid-template-columns: 52px minmax(0, 1fr); gap: .7rem; }
  .agenda-item { grid-template-columns: minmax(0, 1fr) auto; row-gap: .1rem; }
  .agenda-time { grid-column: 1 / -1; }
}

/* ── pipeline: the stage board ───────────────────────────────────────────── */
.kanban {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(100%, 190px), 1fr);
  gap: .7rem; overflow-x: auto; padding-bottom: .4rem;
}
.kanban-col { min-width: 0; display: grid; align-content: start; gap: .45rem; grid-template-columns: minmax(0, 1fr); }
.kanban-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  border-bottom: 2px solid var(--accent); padding-bottom: .4rem; margin-bottom: .2rem;
}
.kanban-col[data-tone="won"] .kanban-head { border-bottom-color: var(--good); }
.kanban-col[data-tone="lost"] .kanban-head { border-bottom-color: var(--rule-strong); color: var(--ink-3); }
.kanban-name { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.kanban-count { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kanban-sum { font-size: 11px; color: var(--ink-3); margin: -.1rem 0 .2rem; font-variant-numeric: tabular-nums; }
.deal {
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper);
  padding: .6rem .7rem .6rem; display: grid; gap: .15rem; box-shadow: var(--shadow);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.deal:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-lift); }
.deal-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-sub { font-size: 11px; color: var(--ink-3); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.deal-foot { display: flex; justify-content: space-between; gap: .4rem; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; margin-top: .1rem; }
.deal.stalled { border-left: 3px solid var(--alert); }
.deal .alert-text { font-weight: 650; }
/* Every deal stays on the board in its last stage column; the ones no longer
   open (GHL status won / lost / abandoned) are coloured so they cannot be
   read as pipeline. */
.deal-won { border-left: 3px solid var(--good); }
.deal-lost, .deal-abandoned { opacity: .55; border-style: dashed; }
.deal-lost .deal-name, .deal-abandoned .deal-name { text-decoration: line-through; text-decoration-color: var(--ink-3); }

/* ── "Open in …" links (public/app.js:openIn) ──────────────────────────────
   One discreet arrow per entity, at the end of a row or the top-right of a
   card; a labelled pill on a page head. Never inside another link or button —
   cards that are buttons wrap in .client-card-wrap so the arrow sits beside
   them, not in them. */
.open-in {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem; flex: none;
  min-width: 22px; height: 22px; padding: 0 .25rem; margin-left: .35rem; border-radius: 6px;
  color: var(--ink-3); text-decoration: none; font-size: 12.5px; line-height: 1; vertical-align: middle;
  transition: color var(--dur), background var(--dur);
}
.open-in:hover, .open-in:focus-visible { color: var(--accent-ink, var(--ink)); background: var(--wash); }
.open-in:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.open-in-arrow { font-size: 12px; font-weight: 700; }
.open-in-text { font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.open-in-cell { width: 1%; white-space: nowrap; text-align: right; }
td.open-in-cell .open-in { margin-left: 0; }
.row-meta .open-in { margin-left: .45rem; }
.open-in-corner { position: absolute; top: .45rem; right: .45rem; margin: 0; z-index: 1; background: var(--paper); }
.client-card-wrap { position: relative; min-width: 0; }
.client-card-wrap .open-in-corner { top: .55rem; right: .6rem; }
.client-card-wrap .client-card-top { padding-right: 1.6rem; }
.deal { position: relative; }
.deal .open-in-corner { top: .35rem; right: .35rem; }
.deal .deal-name { padding-right: 1.4rem; }
.channel { position: relative; }
.channel .open-in-corner { top: .6rem; right: .6rem; }
.channel .channel-top { padding-right: 1.5rem; }
.open-in-pill {
  height: auto; min-height: 26px; padding: .2rem .7rem .2rem .8rem; border: 1px solid var(--rule-strong); border-radius: 999px;
  color: var(--ink-2); background: var(--paper); font-size: 11.5px; gap: .35rem;
}
.open-in-pill:hover, .open-in-pill:focus-visible { border-color: var(--ink); color: var(--ink); background: var(--paper); }
.open-in-chip {
  height: auto; min-height: 22px; padding: .1rem .5rem; border: 1px solid var(--rule); border-radius: 999px; margin-left: 0;
  font-size: 11px; color: var(--ink-2); background: var(--paper);
}
.open-in-line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .7rem; }
.client-bar .client-open { margin-left: 0; }
.client-bar .client-open-alt { margin-left: 0; }
#drawer-open { display: inline-flex; align-items: center; margin-right: .5rem; }
#drawer-open .open-in { margin-left: 0; }
.planner-links { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.cal-source { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; margin: .8rem 0 .2rem; }

/* ── posting calendar: the week grid ─────────────────────────────────────── */
.calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); clip-path: inset(0 1px 1px 0); }
.calgrid-cell {
  min-height: 92px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: .4rem .5rem; display: grid; align-content: start; gap: .25rem; background: var(--paper);
}
.calgrid-cell.dim { background: var(--paper-2); }
.calgrid-cell.today { box-shadow: inset 0 2px 0 var(--accent); }
.calgrid-head { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); font-weight: 650; display: flex; justify-content: space-between; align-items: baseline; }
.calgrid-daynum { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--ink-2); }
.calgrid-cell.today .calgrid-daynum { color: var(--accent-ink); }
.cal-post {
  position: relative; font-size: 10.5px; line-height: 1.35; padding: .18rem 1.4rem .18rem .35rem; border-radius: 4px;
  background: var(--wash); border-left: 2px solid var(--rule-strong);
  overflow: hidden; cursor: default;
}
.cal-post b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-post > span { color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cal-post .open-in { position: absolute; top: 50%; right: .1rem; transform: translateY(-50%); margin: 0; min-width: 20px; height: 20px; }
.cal-post .open-in-arrow { font-size: 11px; }
.cal-media { display: inline-block; font-size: 10.5px; color: var(--ink-3); margin-bottom: .1rem; }
.cal-post.s-published { border-left-color: var(--good); }
.cal-post.s-scheduled { border-left-color: var(--accent); }
.cal-post.s-in_review { border-left-color: var(--warn); }
.cal-post.s-draft { border-left-color: var(--rule-strong); border-left-style: dashed; }
.cal-post.s-failed { border-left-color: var(--alert); }
.cal-post.s-demo { opacity: .7; }
/* Phones: every arrow is a 40px tap target. Declared after the desktop rules
   above with the same selectors, so the phone size wins wherever the desktop
   rule set one. */
@media (max-width: 480px) {
  .open-in, .row-meta .open-in, td.open-in-cell .open-in, .cal-post .open-in, .channel .open-in-corner, .deal .open-in-corner, .client-card-wrap .open-in-corner {
    min-width: 40px; height: 40px;
  }
  .open-in { margin-block: -.6rem; }
  .row-meta .open-in { margin-block: -.6rem; }
  .open-in-corner, .channel .open-in-corner, .deal .open-in-corner, .client-card-wrap .open-in-corner { top: 0; right: 0; margin: 0; }
  .cal-post { padding-right: 2.6rem; }
  .cal-post .open-in { margin: 0; right: 0; }
  .open-in-pill, .open-in-chip, .client-bar .client-open, .client-bar .client-open-alt, .open-in-line .open-in { min-height: 40px; height: auto; margin-block: 0; }
}
@media (max-width: 700px) { .calgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } .calgrid-cell { min-height: 64px; } }

/* ── onboarding runway ───────────────────────────────────────────────────── */
.onb { display: grid; gap: .8rem; grid-template-columns: minmax(0, 1fr); }
.onb-card {
  min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  box-shadow: var(--shadow); padding: 1rem 1.15rem; display: grid; gap: .7rem;
}
.onb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.onb-name { font-family: var(--serif); font-size: 17px; font-weight: 700; }
.onb-meta { font-size: 11.5px; color: var(--ink-3); }
.onb-track { display: flex; gap: 3px; }
.onb-step { flex: 1; height: 7px; border-radius: 2px; background: var(--wash); position: relative; }
.onb-step.done { background: var(--chart-1); }
.onb-step.next { background: var(--accent); animation: live 1.6s var(--ease) infinite; }
.onb-now { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.onb-now b { font-weight: 650; }
.onb-now .row-sub { flex: none; }
.onb-steps { display: grid; }
.onb-steps summary { cursor: pointer; font-size: 12px; color: var(--ink-2); list-style: none; }
.onb-steps summary::before { content: "▸ "; color: var(--ink-3); }
.onb-steps[open] summary::before { content: "▾ "; }

/* ── revenue extras ──────────────────────────────────────────────────────── */
.risk-note { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .8rem; align-items: center; }
.risk-ring { width: 52px; height: 52px; flex: none; }

/* ── the digest, set like a morning paper ────────────────────────────────── */
.paper-head {
  border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: .6rem 0 .5rem; margin-top: var(--gap);
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap;
}
.paper-title { font-family: var(--serif); font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.paper-date { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 650; }
.paper-cols { column-width: 340px; column-gap: 2.2rem; column-rule: 1px solid var(--rule); margin-top: 1rem; }
.paper-item { break-inside: avoid; margin-bottom: 1.1rem; }
.paper-item h3 { font-family: var(--serif); font-size: 15.5px; font-weight: 700; margin: 0 0 .2rem; line-height: 1.35; }
.paper-item p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.paper-item .chip { margin-top: .35rem; }

/* ── client portal: the journey ──────────────────────────────────────────── */
.journey { display: grid; gap: 0; margin-top: .3rem; grid-template-columns: minmax(0, 1fr); }
.journey-step { display: grid; grid-template-columns: 26px minmax(0,1fr); gap: .8rem; }
.journey-rail { display: grid; justify-items: center; grid-template-rows: 10px minmax(0,1fr); }
.journey-dot {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--rule-strong);
  background: var(--paper); margin-top: .2rem;
}
.journey-step.done .journey-dot { background: var(--chart-1); border-color: var(--chart-1); }
.journey-step.now .journey-dot { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 4px var(--accent-soft); }
.journey-line { width: 2px; background: var(--rule); min-height: 18px; }
.journey-step.done .journey-line { background: var(--chart-1); }
.journey-step:last-child .journey-line { display: none; }
.journey-body { padding-bottom: .9rem; }
.journey-title { font-size: 13px; font-weight: 600; }
.journey-step.done .journey-title { color: var(--ink-2); }
.journey-sub { font-size: 11.5px; color: var(--ink-3); }

/* ── vault document reader ───────────────────────────────────────────────── */
.reader-back {
  position: fixed; inset: 0; z-index: 70; background: color-mix(in srgb, var(--ink) 34%, transparent);
  display: grid; place-items: center; padding: 2rem 1.2rem;
}
:root[data-theme="dark"] .reader-back { background: rgba(0,0,0,.68); }
.reader {
  width: min(1060px, 96vw); height: min(760px, 92vh);
  background: var(--paper); border: 1px solid var(--ink); border-radius: 12px;
  box-shadow: 0 24px 70px rgba(4,10,18,.35);
  display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden;
}
.reader-top {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .75rem 1.1rem; border-bottom: 1px solid var(--rule);
}
.reader-top h2 { font-family: var(--serif); font-size: 16px; font-weight: 700; margin-right: auto; }
.reader-count { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.reader-top kbd { flex: none; }
.reader-main { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 0; }
@media (max-width: 760px) { .reader-main { grid-template-columns: minmax(0, 1fr); } .reader-spine { display: none; } }
.reader-spine {
  border-right: 1px solid var(--rule); overflow-y: auto; min-height: 0;
  background: var(--paper-2); padding: .5rem 0 1rem;
}
.spine-cat { padding: .7rem .9rem .25rem; }
.spine-doc {
  display: grid; gap: .05rem; width: 100%; text-align: left; font: inherit;
  background: none; border: 0; border-left: 2px solid transparent;
  padding: .4rem .9rem; cursor: pointer; color: var(--ink-2);
}
.spine-doc:hover { background: var(--wash); color: var(--ink); }
.spine-doc[aria-current="true"] {
  border-left-color: var(--accent); background: var(--paper); color: var(--ink);
}
.spine-title { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.spine-sub { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.reader-pane { overflow-y: auto; min-height: 0; padding: 1.6rem 2.2rem 3rem; scroll-behavior: smooth; }
.reader-doc { max-width: 62ch; margin-inline: auto; }
.reader-doc .doc-cat { margin-bottom: .4rem; }
.reader-doc h1 {
  font-family: var(--serif); font-size: 26px; font-weight: 700; letter-spacing: -.012em;
  line-height: 1.25; margin: 0 0 .4rem;
}
.doc-meta { font-size: 11.5px; color: var(--ink-3); display: flex; gap: .8rem; flex-wrap: wrap; align-items: baseline; padding-bottom: .9rem; margin-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.doc-meta a { font-weight: 600; text-decoration: none; }
.doc-meta a:hover { text-decoration: underline; }
.doc-toc { float: right; width: 180px; margin: 0 0 1rem 1.6rem; border-left: 2px solid var(--rule); padding-left: .8rem; font-size: 11.5px; }
.doc-toc .micro { display: block; margin-bottom: .35rem; }
.doc-toc a { display: block; color: var(--ink-2); text-decoration: none; padding: .12rem 0; line-height: 1.4; }
.doc-toc a:hover { color: var(--accent-ink); }
@media (max-width: 900px) { .doc-toc { float: none; width: auto; margin: 0 0 1.2rem; } }
.doc-body { font-size: 14px; line-height: 1.75; color: var(--ink); }
.doc-body h3 {
  font-family: var(--serif); font-size: 17px; font-weight: 700; margin: 1.6rem 0 .5rem;
  scroll-margin-top: 1rem;
}
.doc-body p { margin: 0 0 .9rem; }
.doc-body ul, .doc-body ol { margin: 0 0 .9rem; padding-left: 1.35rem; }
.doc-body li { margin-bottom: .3rem; }
.doc-related { border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1rem; }
.doc-related .linkish { font-size: 12.5px; margin-right: 1rem; }
.reader-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.reader-nav .btn { max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── developer diagnostics ───────────────────────────────────────────────── */
.diag { border: 1px solid var(--rule-strong); border-radius: var(--radius); margin-top: var(--gap); overflow: hidden; }
.diag-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  background: var(--paper-2); border-bottom: 1px solid var(--rule);
  padding: .7rem 1.1rem;
}
.diag-head h2 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.diag-body { padding: 1rem 1.1rem 1.2rem; display: grid; gap: 1.2rem; background: var(--paper); grid-template-columns: minmax(0, 1fr); }
.diag-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.2rem; }
.diag h3 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 700; margin: 0 0 .5rem; border-bottom: 1px solid var(--rule); padding-bottom: .3rem; }
.diag .rows { font-size: 12px; }
.diag .row { padding: .3rem 0; }
.diag-kv { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .8rem; padding: .26rem 0; border-bottom: 1px solid var(--rule); font-size: 12px; align-items: baseline; }
.diag-kv:last-child { border-bottom: none; }
.diag-kv b { font-weight: 550; color: var(--ink-2); }
.diag-kv span { font-family: var(--mono); font-size: 11.5px; text-align: right; color: var(--ink-2); }
.diag-ok { color: var(--good); }
.diag-bad { color: var(--alert); }
.diag-dim { color: var(--ink-3); }

/* ── task status control ─────────────────────────────────────────────────── */
.status-sel {
  width: auto; font-size: 11.5px; padding: .22rem 1.4rem .22rem .6rem;
  border-color: var(--rule-strong); color: var(--ink-2); background: var(--paper);
  border-radius: 999px; cursor: pointer; font-weight: 550;
}
.status-sel:hover { border-color: var(--rule-strong); color: var(--ink); }
/* A task row: title · status control · due. On a narrow card the status
   control drops to its own line under the title rather than disappearing —
   a phone is exactly where someone marks a job done. The due column is a
   fixed width so the controls line up down the list. */
.task-row { grid-template-columns: minmax(0, 1fr) auto 5.5rem; align-items: center; }
.task-row .row-meta { text-align: right; }
@container (max-width: 470px) {
  .task-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .3rem; }
  .task-row .status-sel { grid-column: 1 / -1; justify-self: start; }
}

/* ── inbox filters ───────────────────────────────────────────────────────── */
.filter-row { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .8rem; }

/* ── sign-in, restaged ───────────────────────────────────────────────────── */
.signin { position: relative; overflow: hidden; }
/* Desktop only. On a phone the atom is 170px of canvas above the fold that pushes the password
   field toward the keyboard; the mark in the header is the brand there. Its script paints one
   still frame under prefers-reduced-motion, so it needs no rule of its own here. */
.signin-atom { display: none; }
@media (min-width: 640px) {
  .signin-atom { display: block; position: relative; margin: -.5rem auto .3rem; width: min(240px, 70vw); height: 150px; pointer-events: none; }
}
/* Remembered session: hold the form back until /api/me answers, so a returning
   user sees the app appear, not a sign-in form that swaps out under them. */
html.booting #login { visibility: hidden; }
.signin-title { font-family: var(--serif); font-size: 22px; letter-spacing: .01em; }

/* ── topbar date line ────────────────────────────────────────────────────── */
.topbar-today { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-3); font-weight: 650; margin-bottom: .25rem; }

/* ── sparkline in a stat ─────────────────────────────────────────────────── */
.stat-note .spark { height: 20px; margin-top: .4rem; color: var(--ink-3); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE DEPTH PASS — purpose-built layouts for the fifteen surfaces that only
   got styling before. Same inks, same hairlines, same serif/mono pairing;
   each component below exists because a table was the wrong shape for the
   question its screen answers.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── proof triage: three lanes, one decision each ────────────────────────── */
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--gap); }
.lane { display: grid; align-content: start; gap: .5rem; min-width: 0; grid-template-columns: minmax(0, 1fr); }
.lane-head { border-bottom: 2px solid var(--ink); padding-bottom: .4rem; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.lane-head .micro { letter-spacing: .11em; color: var(--ink); }
.lane-count { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lane-use .lane-head { border-bottom-color: var(--good); }
.lane-risk .lane-head { border-bottom-color: var(--alert); }
.lane-make .lane-head { border-bottom-color: var(--rule-strong); }
.lane-sub { font-size: 11px; color: var(--ink-3); margin: -.2rem 0 .1rem; }
.proof-card {
  border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper);
  padding: .6rem .75rem .65rem; display: grid; gap: .25rem; box-shadow: var(--shadow);
}
.lane-risk .proof-card { border-left: 2px solid var(--alert); }
.lane-make .proof-card { border-style: dashed; box-shadow: none; background: var(--paper-2); }
.proof-name { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.proof-sub { font-size: 11px; color: var(--ink-3); }
.proof-note { font-size: 11.5px; color: var(--ink-2); }

/* ── asset library tiles: a visual inventory drawn in CSS/SVG ────────────── */
.tile-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); }
.tile {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: var(--shadow);
  min-width: 0;
}
.tile-art {
  aspect-ratio: 16 / 10; display: grid; place-items: center; position: relative;
  background: var(--paper-2); border-bottom: 1px solid var(--rule); color: var(--ink-3);
}
.tile-art svg { width: 34px; height: 34px; stroke: currentColor; fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tile[data-kind="Logo"] .tile-art { background: repeating-conic-gradient(var(--wash) 0% 25%, var(--paper) 0% 50%) 0 0 / 18px 18px; }
.tile[data-kind="Finished post"] .tile-art { color: var(--accent-ink); }
.tile-kind {
  position: absolute; left: .5rem; bottom: .4rem; font-size: 9px; text-transform: uppercase;
  letter-spacing: .1em; font-weight: 700; color: var(--ink-2);
  background: color-mix(in srgb, var(--paper) 82%, transparent); padding: .1rem .35rem; border-radius: 3px;
}
.tile-ratios { position: absolute; right: .45rem; bottom: .4rem; display: flex; gap: 3px; align-items: flex-end; }
.tile-ratio { display: block; border: 1px solid var(--ink-3); border-radius: 1px; background: var(--paper); }
.tile-meta { padding: .5rem .65rem .6rem; display: grid; gap: .1rem; align-content: start; }
.tile-name { font-size: 12px; font-weight: 600; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile-sub { font-size: 10.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-sub .acct-link { font-size: 10.5px; font-weight: 500; border-bottom-color: transparent; color: var(--ink-3); }
.tile-sub .acct-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.tile-foot { font-size: 10.5px; color: var(--ink-3); margin-top: .15rem; font-variant-numeric: tabular-nums; }

/* ── brand kit: the spec sheet ───────────────────────────────────────────── */
.plates { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 1rem; }
.plate { display: grid; gap: .35rem; min-width: 0; }
.plate-stage {
  height: 120px; display: grid; place-items: center; border: 1px solid var(--rule-strong);
  position: relative; overflow: hidden;
}
.plate-stage img { max-width: 60%; max-height: 64%; display: block; }
.plate-stage.on-white { background: #fff; }
.plate-stage.on-dark { background: #10151b; }
.plate-stage.on-dark::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top right, transparent calc(50% - 1px), var(--alert) calc(50% - 1px), var(--alert) calc(50% + 1px), transparent calc(50% + 1px));
}
.plate-verdict { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.plate-verdict.yes { color: var(--good); }
.plate-verdict.no { color: var(--alert); }
.plate-why { font-size: 11.5px; color: var(--ink-3); }
.swatch-copy {
  font: inherit; cursor: pointer; background: none; border: none; padding: 0; text-align: left; display: block; width: 100%;
}
.swatch-copy:hover .swatch-hex { color: var(--accent-ink); }
.swatch-copy .swatch-hex::after { content: ' ⧉'; opacity: 0; font-size: 10px; }
.swatch-copy:hover .swatch-hex::after { opacity: .8; }
.rule-ledger { margin: 0; padding: 0; list-style: none; counter-reset: rule; display: grid; }
.rule-ledger li {
  counter-increment: rule; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .6rem;
  padding: .55rem 0; border-bottom: 1px solid var(--rule); font-size: 13px; align-items: baseline;
}
.rule-ledger li:last-child { border-bottom: none; }
.rule-ledger li::before {
  content: counter(rule, decimal-leading-zero); font-family: var(--serif); font-size: 17px;
  font-weight: 700; color: var(--ink-3); line-height: 1;
}
.gotcha { border-left: 2px solid var(--warn); padding: .15rem 0 .15rem .7rem; margin-bottom: .7rem; }
.gotcha:last-child { margin-bottom: 0; }
.gotcha b { font-size: 12.5px; font-weight: 650; display: block; }
.gotcha p { margin: .1rem 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }

/* ── scorecards: the formula behind every number ─────────────────────────── */
button.kpi { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--rule); font: inherit; text-align: left; cursor: pointer; color: inherit; }
button.kpi:hover .kpi-name { color: var(--ink); }
.kpi-target { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kpi-more {
  grid-column: 1 / -1; font-size: 11px; color: var(--ink-2); line-height: 1.6;
  padding: .3rem .6rem .45rem; margin: .15rem 0 .3rem; border-left: 2px solid var(--accent);
  background: var(--paper-2);
}
.kpi-more code { font-size: 10.5px; }
.kpi-more .micro { display: inline; margin-right: .3rem; }

/* ── EOD: who still owes one ─────────────────────────────────────────────── */
.owed { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.owed-card {
  border: 1px solid var(--rule); border-left: 3px solid var(--alert); border-radius: var(--radius-sm);
  background: var(--paper); padding: .6rem .8rem; display: flex; gap: .6rem; align-items: center;
}
.owed-card .avatar { border-color: var(--alert); color: var(--alert); }
.owed-name { font-size: 13px; font-weight: 650; }
.owed-sub { font-size: 11px; color: var(--ink-3); }
.allin {
  border: 1px solid var(--rule); border-left: 3px solid var(--good); border-radius: var(--radius-sm);
  background: var(--paper); padding: .7rem .9rem; font-size: 13px; color: var(--ink-2);
}
.allin b { color: var(--good); }
.eod-row { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: baseline; }
.eod-time { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; font-weight: 500; }
.eod-row.missing .eod-time { color: var(--alert); }
.streak { font-size: 11px; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── workload: capacity, drawn ───────────────────────────────────────────── */
.next-up {
  display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--paper); padding: .8rem 1.1rem; margin-top: var(--gap); font-size: 13.5px; box-shadow: var(--shadow);
}
.next-up b { font-weight: 650; }
.cap-row {
  display: grid; grid-template-columns: minmax(140px, 15rem) minmax(0, 1fr) auto; gap: 1rem;
  align-items: center; padding: .6rem 0; border-bottom: 1px solid var(--rule);
}
.cap-row:last-child { border-bottom: none; }
.cap-who { display: flex; gap: .55rem; align-items: center; min-width: 0; }
.cap-name { font-size: 12.5px; font-weight: 600; display: block; }
.cap-title { font-size: 10.5px; color: var(--ink-3); display: block; }
.cap-bar { display: flex; gap: 2px; height: 16px; align-items: stretch; min-width: 0; }
.cap-bar i { display: block; min-width: 3px; border-radius: 2px; }
.cap-bar .seg-over { background: var(--alert); }
.cap-bar .seg-today { background: var(--warn); }
.cap-bar .seg-open { background: color-mix(in srgb, var(--chart-1) 35%, var(--wash)); }
.cap-bar .seg-none { background: transparent; border: 1px dashed var(--rule-strong); flex: 1; border-radius: 3px; }
.cap-meta { text-align: right; display: grid; gap: .1rem; justify-items: end; }
.cap-load { white-space: nowrap; }
.cap-top { font-size: 10.5px; color: var(--ink-3); max-width: 26ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 560px) {
  .cap-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cap-bar { grid-column: 1 / -1; }
  .cap-top { display: none; }
}

/* ── training: the path and the matrix ───────────────────────────────────── */
.course-row { grid-template-columns: minmax(0, 1fr) minmax(90px, 150px) auto; align-items: center; gap: 1rem; }
.course-row .progress { min-width: 0; }
@container (max-width: 520px) { .course-row { grid-template-columns: minmax(0, 1fr) auto; } .course-row .progress { display: none; } }
.next-act { font-size: 11px; font-weight: 650; color: var(--accent-ink); white-space: nowrap; }
.tm-glyph { font-size: 13px; display: inline-block; min-width: 1.2em; text-align: center; }
.tm-pass { color: var(--good); }
.tm-part { color: var(--warn); }
.tm-quiz { color: var(--accent-ink); font-weight: 700; }
.tm-none { color: var(--ink-3); }

/* ── users & roles: privilege made visible ───────────────────────────────── */
.priv-group { margin-bottom: 1.1rem; }
.priv-group:last-child { margin-bottom: 0; }
.priv-role-head {
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink); padding-bottom: .3rem; margin-bottom: .35rem;
}
.priv-role-head .micro { color: var(--ink); font-size: 10.5px; }
.priv-lvl { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.priv-powers { margin-left: auto; display: flex; gap: .3rem; flex-wrap: wrap; }
.power-tag {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700;
  padding: .08rem .4rem; border: 1px solid var(--rule-strong); border-radius: 999px; color: var(--ink-2);
  white-space: nowrap;
}
.power-tag.hot { border-color: var(--alert); color: var(--alert); }
.priv-user {
  display: grid; grid-template-columns: minmax(0, 15rem) minmax(min(100%, 60px), 1fr) auto; gap: 1rem;
  align-items: center; padding: .45rem 0; border-bottom: 1px solid var(--rule);
}
.priv-user:last-child { border-bottom: none; }
.priv-id { display: flex; gap: .55rem; align-items: center; min-width: 0; }
.priv-id > span:last-child { min-width: 0; display: grid; }
.priv-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priv-mail { font-size: 10.5px; color: var(--ink-3); font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.priv-bar { height: 8px; background: var(--wash); border-radius: 999px; overflow: hidden; min-width: 0; }
.priv-bar i { display: block; height: 100%; background: var(--chart-1); border-radius: 999px; }
.priv-bar.hot i { background: var(--alert); }
.priv-right { display: grid; justify-items: end; gap: .1rem; }
.priv-seen { font-size: 10px; color: var(--ink-3); font-family: var(--mono); white-space: nowrap; }
.priv-off { opacity: .5; }
.priv-off .priv-name::after { content: ' · deactivated'; font-weight: 400; color: var(--ink-3); }
@container (max-width: 560px) {
  .priv-user { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .priv-bar { display: none; }
  .priv-right { justify-items: start; }
  .priv-seen { white-space: normal; }
}

/* ── audit log: change, legible ──────────────────────────────────────────── */
.audit-day { font-family: var(--serif); font-size: 15px; font-weight: 700; margin: 1.1rem 0 .2rem; }
.audit-day:first-child { margin-top: 0; }
tr.evt-access td:first-child { box-shadow: inset 2px 0 0 var(--alert); }
tr.evt-agent td:first-child { box-shadow: inset 2px 0 0 var(--accent); }

/* ── agents: the day in runs ─────────────────────────────────────────────── */
.dayline { position: relative; height: 104px; margin-top: .8rem; }
.dayline-rail { position: absolute; left: 0; right: 0; top: 70px; height: 2px; background: var(--rule-strong); }
.dayline-tick { position: absolute; top: 66px; width: 1px; height: 10px; background: var(--rule-strong); }
.dayline-hour { position: absolute; top: 80px; transform: translateX(-50%); font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); }
.dayline-dot {
  position: absolute; top: 66px; width: 10px; height: 10px; border-radius: 50%;
  transform: translateX(-50%); background: var(--ink); border: 2px solid var(--paper); z-index: 2;
}
.dayline-dot.model { background: var(--accent); }
.dayline-dot.bad { background: var(--alert); }
.dayline-label {
  position: absolute; transform: translateX(-50%); white-space: nowrap; text-align: center;
  font-size: 10px; color: var(--ink-2); font-weight: 600; line-height: 1.25;
}
.dayline-label small { display: block; text-align: center; font-family: var(--mono); font-size: 9px; color: var(--ink-3); font-weight: 400; }
.dayline-label .stem { position: absolute; top: calc(100% + 2px); left: 50%; width: 1px; background: var(--rule-strong); }
.dayline-now { position: absolute; top: 58px; width: 1px; height: 26px; background: var(--alert); z-index: 1; }
.dayline-nowcap { position: absolute; top: 48px; transform: translateX(-50%); font-family: var(--mono); font-size: 8.5px; color: var(--alert); }
@container (max-width: 560px) { .dayline-label { display: none; } .dayline { height: 70px; } .dayline-rail { top: 36px; } .dayline-tick { top: 32px; } .dayline-dot { top: 32px; } .dayline-hour { top: 46px; } .dayline-now { top: 24px; } .dayline-nowcap { top: 14px; } }
.evented { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }

/* ── reports coverage ────────────────────────────────────────────────────── */
.cover-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.cover {
  min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--paper);
  padding: .55rem .75rem .6rem; display: grid; gap: .1rem;
}
.cover.owed { border-style: dashed; background: var(--paper-2); }
.cover-name { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-when { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cover.owed .cover-when { color: var(--alert); font-weight: 650; }

/* ── email: the path to first send ───────────────────────────────────────── */
.seq-chain { display: grid; gap: .4rem; grid-template-columns: minmax(0, 1fr); }
.seq-step {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: .7rem; align-items: baseline;
  padding: .45rem 0; border-bottom: 1px solid var(--rule);
}
.seq-step:last-child { border-bottom: none; }
.seq-num { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--ink-3); text-align: right; }
.seq-name { font-size: 12.5px; font-weight: 600; }
.seq-sub { font-size: 11px; color: var(--ink-3); display: block; }
.seq-sub.alert-text { color: var(--alert); font-family: var(--mono); }

/* ── idea cards: filters + copy ──────────────────────────────────────────── */
.idea-copy { margin-left: auto; }

/* ── org board additions ─────────────────────────────────────────────────── */
.node-lvl { font-family: var(--mono); font-size: 9.5px; color: var(--ink-3); margin-left: auto; flex: none; }
.board-legend { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); align-items: center; }

/* ── settings → api keys ──────────────────────────────────────────────── */
.keys-paste { width: 100%; resize: vertical; min-height: 9rem; font-size: 12.5px; line-height: 1.5; }
.keys-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.keys-hint { letter-spacing: .08em; }
.row[data-key] { grid-template-columns: minmax(0,1fr) auto auto; align-items: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   A1 OPS — the control panel. One white hero with the vitals and the kill
   switch, then bots as cards, the OpenClaw roster, and the dashboard's own
   jobs. Same tokens as everything else: status colours mean status, azure
   means "you can act here", the black pill is the primary action. The one
   deliberately loud element is the kill switch, because it should be.
   ═══════════════════════════════════════════════════════════════════════════ */
.ops-host { display: block; }
.ops-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 330px); gap: 2rem;
  margin-top: var(--gap); padding: 1.6rem 1.9rem 1.5rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 16px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
/* a faint azure wash rising from the top-right corner — presence without a dark block */
.ops-hero::before {
  content: ""; position: absolute; inset: -40% -20% auto auto; width: 60%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 9%, transparent), transparent 70%);
}
.ops-hero-lite { grid-template-columns: minmax(0, 1fr); padding-bottom: 1.4rem; }
.ops-hero-killed::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--alert) 12%, transparent), transparent 70%); }
.ops-hero > * { position: relative; }
.ops-hero-main { min-width: 0; display: grid; align-content: start; }
.ops-hero h2 {
  font-family: var(--serif); font-size: 1.65rem; font-weight: 700; line-height: 1.2;
  letter-spacing: -.012em; margin: .35rem 0 0; max-width: 30ch; text-wrap: balance;
}
.ops-vitals { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 1.1rem 1rem; margin-top: 1.45rem; }
.ops-vitals[data-n="4"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.ops-vital { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ops-vital b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.005em; }
.ops-vital small { display: block; font-size: 11.5px; color: var(--ink-3); margin-top: .05rem; }
.ops-count {
  font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1; min-width: 1.1ch;
  font-variant-numeric: tabular-nums; text-align: right;
}
.ops-count.alert { color: var(--alert); }
.ops-count.warn { color: var(--warn); }
.ops-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; flex: none; margin: 0 .35rem; }
.ops-dot.live { background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
.ops-dot.live::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--good);
  opacity: 0; animation: live 1.6s var(--ease) infinite;
}
.ops-dot.down { background: var(--alert); box-shadow: 0 0 0 4px var(--alert-soft); }
.ops-hero-foot {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--ink-3);
}
.ops-hero-foot b { color: var(--ink-2); font-weight: 600; }
.ops-foot-right .linkish { font-size: 12px; margin-left: .35rem; }

/* the kill switch: an inset panel, the one red thing on the page */
.ops-kill {
  display: flex; flex-direction: column; gap: .3rem; min-width: 0;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 14px; padding: 1.15rem 1.25rem 1.2rem;
  transition: background var(--dur), border-color var(--dur);
}
.ops-kill-state { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.ops-kill.engaged { background: var(--alert-soft); border-color: color-mix(in srgb, var(--alert) 35%, transparent); }
.ops-kill.engaged .ops-kill-state, .ops-kill.engaged .micro { color: var(--alert); }
.ops-kill-sub { margin: .15rem 0 .85rem; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.ops-kill-sub b { font-weight: 650; color: var(--ink); }
.ops-kill-btn {
  display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 50px;
  font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .005em; cursor: pointer;
  color: #fff; background: var(--alert); border: 1px solid color-mix(in srgb, var(--alert) 80%, #000); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,.18), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform var(--dur), filter var(--dur), box-shadow var(--dur);
}
.ops-kill-btn:hover { filter: brightness(1.06); box-shadow: 0 4px 12px color-mix(in srgb, var(--alert) 30%, transparent); }
.ops-kill-btn:active { transform: translateY(1px) scale(.99); }
.ops-kill-btn:disabled { opacity: .45; cursor: default; filter: none; box-shadow: none; transform: none; }
.ops-kill-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.ops-kill-btn .ops-kill-icon { width: 11px; height: 11px; background: currentColor; border-radius: 2px; flex: none; }
.ops-kill-btn.release { background: var(--good); border-color: color-mix(in srgb, var(--good) 80%, #000); }
.ops-kill-btn.release:hover { box-shadow: 0 4px 12px color-mix(in srgb, var(--good) 30%, transparent); }
.ops-kill-btn.release .ops-kill-icon { width: 12px; height: 13px; border-radius: 1px; clip-path: polygon(0 0, 100% 50%, 0 100%); }
:root[data-theme="dark"] .ops-kill-btn { color: #0b1015; }
.ops-kill-note { margin: .6rem 0 0; font-size: 11.5px; color: var(--ink-3); line-height: 1.45; }
.ops-kill-foot { margin: auto 0 0; padding-top: .9rem; font-size: 11px; color: var(--ink-3); line-height: 1.45; border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
.ops-kill.engaged .ops-kill-foot { color: color-mix(in srgb, var(--alert) 70%, var(--ink-2)); }

/* skeleton while /api/ops is answering */
.ops-skel h2 { color: var(--ink-3); }
.skel { position: relative; overflow: hidden; background: var(--wash); border-radius: 10px; min-height: 42px; min-width: 180px; border-color: transparent; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--paper) 60%, transparent), transparent);
  animation: skel-slide 1.4s ease-in-out infinite;
}
@keyframes skel-slide { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.ops-subhead {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 650; color: var(--ink-3);
  margin: 1.3rem 0 .65rem; display: flex; align-items: baseline; gap: .45rem;
}
.ops-subhead small { font-size: 10.5px; font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.ops-subhead:first-child { margin-top: .2rem; }

/* ── bots ── */
.bot-grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.bot {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.bot:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-lift); }
.bot-failed { border-color: color-mix(in srgb, var(--alert) 45%, var(--rule)); }
.bot-main { padding: 1rem 1.1rem .9rem; display: grid; gap: .65rem; align-content: start; min-width: 0; }
.bot-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.bot-id { min-width: 0; }
.bot-name { font-size: 14px; font-weight: 650; letter-spacing: -.008em; }
.bot-unit { font-size: 11px; color: var(--ink-3); margin-top: .05rem; }
.bot-flags { display: flex; align-items: center; gap: .3rem; flex: none; }
.bot-what {
  margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.9em;
}
.bot-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: .1rem 0 0; }
.bot-stats div { min-width: 0; }
.bot-stats dt { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); font-weight: 650; }
.bot-stats dd { margin: .1rem 0 0; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bot-stats dd.warn { color: var(--warn); }
.bot-acts {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  border-top: 1px solid var(--rule); padding-top: .65rem; margin-top: .1rem;
}
.bot-act-group { display: flex; gap: .3rem; }
.btn-go { border-color: var(--accent); color: var(--accent-ink); }
.btn-go:hover { background: var(--accent-soft); border-color: var(--accent); }
.btn-danger { background: var(--alert); color: #fff; border-color: var(--alert); border-radius: 30px; padding: .66rem 1.45rem; font-size: 13.5px; }
.btn-danger:hover { background: color-mix(in srgb, var(--alert) 88%, #000); border-color: transparent; }
/* an open log spans the row: card on the left, terminal on the right */
.bot.bot-open { grid-column: 1 / -1; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.bot-log { display: grid; grid-template-rows: auto minmax(0, 1fr); min-width: 0; padding: .8rem 1rem 1rem 0; }
.bot-log-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; margin-bottom: .45rem; font-size: 11.5px; }
.bot-log-body {
  margin: 0; max-height: 300px; overflow: auto; padding: .8rem .95rem;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
  color: #cfe0ee; background: #0b1015; border: 1px solid #1a242e; border-radius: 10px;
}
@media (max-width: 720px) {
  .bot.bot-open { grid-template-columns: minmax(0, 1fr); }
  .bot-log { padding: 0 1rem 1rem; }
}
.ops-confirm { width: min(460px, 96vw); }
.ops-confirm-body { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }
.ops-confirm-body b { color: var(--ink); font-weight: 650; }

/* ── OpenClaw ── */
.oc-agents { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.oc-agent {
  display: grid; gap: .45rem; align-content: start; min-width: 0;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: .95rem 1.05rem;
  transition: border-color var(--dur);
}
.oc-agent:hover { border-color: var(--rule-strong); }
.oc-default { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); background: color-mix(in srgb, var(--accent-soft) 45%, var(--paper)); }
.oc-agent-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.oc-agent-id { font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oc-model {
  justify-self: start; font-size: 11px; padding: .18rem .55rem; border-radius: 6px;
  background: var(--accent-soft); color: var(--accent-ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.oc-agent-meta { display: grid; gap: .3rem; font-size: 11.5px; color: var(--ink-3); }
.oc-agent-meta .chips { margin-top: 0; }
.oc-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; margin-top: .4rem; }
@media (max-width: 980px) { .oc-cols { grid-template-columns: minmax(0, 1fr); gap: .6rem; } }
.oc-rows .row { align-items: flex-start; }
.oc-row-meta { display: grid; justify-items: end; gap: .15rem; text-align: right; }
.oc-empty {
  border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm); padding: .9rem 1rem;
  display: grid; gap: .15rem; color: var(--ink-3); font-size: 12px; background: var(--paper-2);
}
.oc-empty b { color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
.oc-reading { border-style: solid; border-color: var(--rule); animation: live 1.6s var(--ease) infinite; }
.oc-inbox { display: grid; gap: .55rem; grid-template-columns: minmax(0, 1fr); }
.oc-msg {
  border-left: 3px solid var(--warn); background: var(--paper-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .6rem .85rem .65rem; display: grid; gap: .3rem; min-width: 0;
}
.oc-msg-from { font-size: 12.5px; }
.oc-msg-from b { font-weight: 650; }
.oc-msg-what { display: block; font-size: 11.5px; white-space: pre-wrap; word-break: break-word; color: var(--ink-2); }
.oc-msg-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

/* ── dashboard jobs ── */
.job-lines { display: grid; grid-template-columns: minmax(0, 1fr); }
.job-line {
  display: grid; grid-template-columns: minmax(0, 1.5fr) auto minmax(0, 1.2fr) auto; gap: 1.2rem; align-items: center;
  padding: .75rem 0; border-bottom: 1px solid var(--rule);
}
.job-line:last-child { border-bottom: none; }
.job-line-id { min-width: 0; }
.job-line-id .row-title { font-size: 12.5px; }
.job-line-when { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.job-line-last { min-width: 0; font-size: 12px; }
.job-note { margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-line-act { justify-self: end; }
@media (max-width: 820px) {
  .job-line { grid-template-columns: minmax(0, 1fr) auto; }
  .job-line-when { grid-column: 1; }
  .job-line-last { grid-column: 1 / -1; }
  .job-line-act { grid-row: 1; grid-column: 2; }
}

/* ── Ask A1 (A1 Ops → the founder’s "open to staff" editor) ── */
.ask-open { border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm); padding: .7rem .9rem .8rem; margin: .9rem 0 0; background: var(--paper-2); }
.ask-open legend { padding: 0 .3rem; }
.ask-open-list { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .3rem 0 .6rem; }
.ask-open-item { display: inline-flex; align-items: center; gap: .4rem; font-size: 12.5px; cursor: pointer; }
.ask-open-item input { width: auto; margin: 0; accent-color: var(--accent); }
.ask-open-acts { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
@media (max-width: 720px) {
  .ask-compose { grid-template-columns: minmax(0, 1fr); }
  .ask-compose .btn-pill { justify-self: end; }
}

@media (max-width: 900px) {
  .ops-hero { grid-template-columns: minmax(0, 1fr); gap: 1.3rem; padding: 1.3rem 1.3rem 1.25rem; }
  .ops-hero h2 { font-size: 1.4rem; }
  .ops-vitals { gap: 1rem 1.6rem; }
}

/* ── the number lens ────────────────────────────────────────────────────── */
/* Any stat / KPI / card figure the data map knows is clickable: a cursor, an
   underline that arrives on hover, a keyboard handle. Nothing else moves. */
.lensable {
  cursor: pointer; border-radius: 4px;
  text-decoration: underline transparent; text-decoration-thickness: 2px; text-underline-offset: .14em;
  transition: text-decoration-color var(--dur);
}
.lensable:hover, .lensable:focus-visible { text-decoration-color: var(--accent); }
.lensable:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.job-count.lensable { text-decoration: none; box-shadow: 0 0 0 0 var(--accent); transition: box-shadow var(--dur); }
.job-count.lensable:hover, .job-count.lensable:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
body.lens-open { overflow: hidden; }

.lens { position: fixed; inset: 0; z-index: 70; display: flex; justify-content: center; align-items: stretch; }
.lens-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 46%, transparent); backdrop-filter: blur(2px); }
.lens-panel {
  position: relative; width: min(760px, 100vw); height: 100%; background: var(--paper);
  display: flex; flex-direction: column; box-shadow: var(--shadow-pop);
  animation: lens-in var(--dur-2) var(--ease) both;
}
@keyframes lens-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) {
  .lens { align-items: center; }
  .lens-panel { height: min(92vh, 900px); border-radius: var(--radius); border: 1px solid var(--rule); }
}
.lens-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem 1rem .7rem 1.4rem; border-bottom: 1px solid var(--rule); flex: none;
}
.lens-screen { font: 650 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lens-close { font-size: 22px; line-height: 1; padding: .2rem .55rem; }
.lens-body { flex: 1; min-height: 0; overflow-y: auto; padding: 1.6rem 1.4rem 1.4rem; }
.lens-figure {
  font: 700 clamp(56px, 12vw, 160px)/1 var(--sans); letter-spacing: -.045em;
  font-variant-numeric: tabular-nums; color: var(--ink); word-break: break-word; min-height: 1em;
}
.lens-figure.skel { border-radius: 14px; min-width: 0; }
.lens-figure-none { color: var(--ink-3); }
.lens-label { font-family: var(--serif); font-size: 22px; font-weight: 700; margin-top: .5rem; letter-spacing: -.01em; }
.lens-meta { margin-top: .35rem; font-size: 12.5px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: .3rem .45rem; align-items: center; }
.lens-verify { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; font-size: 12px; }
.lens-verify[data-v="ok"] { background: var(--good-soft); color: var(--good); }
.lens-verify[data-v="drift"] { background: var(--alert-soft); color: var(--alert); }
.lens-verify[data-v="none"] { background: var(--wash); color: var(--ink-3); }
.lens-formula, .lens-caveat { margin-top: 1.1rem; font-size: 14.5px; line-height: 1.55; max-width: 64ch; }
.lens-formula .micro, .lens-caveat .micro { display: block; margin-bottom: .25rem; }
.lens-caveat { color: var(--ink-2); font-size: 13px; border-left: 2px solid var(--rule-strong); padding-left: .8rem; }
.lens-rows { margin-top: 1.5rem; }
.lens-rows h3 { font-size: 13px; font-weight: 650; margin-bottom: .5rem; }
.lens-table td { vertical-align: top; }
.lens-row-link { color: var(--ink); font-weight: 550; text-decoration: underline transparent; text-decoration-thickness: 1.5px; text-underline-offset: .12em; transition: text-decoration-color var(--dur); }
.lens-row-link:hover, .lens-row-link:focus-visible { text-decoration-color: var(--accent); }
.lens-foot {
  flex: none; padding: .9rem 1.4rem calc(.9rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--rule);
  background: var(--paper-2); display: grid; gap: .35rem; justify-items: start;
}
.lens-go { text-decoration: none; }
.lens-source { font-size: 12.5px; color: var(--ink-2); }
.lens-note { font-size: 12px; color: var(--ink-3); max-width: 64ch; }
.skel-text { display: block; background: var(--wash); border-radius: 6px; height: .8rem; }
@media (max-width: 480px) {
  .lens-body { padding: 1.2rem 1rem 1rem; }
  .lens-head { padding-left: 1rem; }
  .lens-foot { padding-inline: 1rem; }
  .lens-foot .btn-pill { width: 100%; text-align: center; }
}

/* ── A1 AI — the conversation ───────────────────────────────────────────── */
/* Paper, ink and hairlines, like everything else. The atom is small and
   top-left; the thread reads like a document; the composer stays pinned to
   the bottom of the screen while the thread scrolls behind it. */
.a1-hero {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 1.1rem; align-items: center;
  margin-top: var(--gap); padding: 1rem 1.4rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
}
.a1-atom { width: 96px; min-width: 0; }
.a1-hero-text { min-width: 0; display: grid; gap: .15rem; }
.a1-hero h2 { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.a1-hero-line { margin: .1rem 0 0; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
.a1-hero-line > span[data-count] { font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.a1-hero-line .linkish { font-size: 12.5px; color: var(--accent-ink); text-decoration-color: transparent; }
.a1-hero-line .linkish:hover { text-decoration-color: currentColor; }
.a1-dot { color: var(--rule-strong); }

/* The chat under the hero is the one chat component (.ac-panel, further
   down) on the /api/a1ai transport. Hero and chat share one reading column so
   the screen is the conversation, not a dashboard with a chat in it. */
.a1-column { max-width: 52rem; margin-inline: auto; }
.a1-chat { margin-top: var(--gap); }
.cite {
  display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 .3em; margin: 0 .02em 0 .18em;
  vertical-align: .12em; font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--accent-ink); background: var(--accent-soft); border: 1px solid transparent; border-radius: 6px;
  cursor: pointer; text-decoration: none;
}
.cite:hover { border-color: var(--accent); }
.cite:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cite-flat { cursor: default; color: var(--ink-3); background: var(--wash); }
.a1-ops-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-top: calc(var(--gap) * 1.6); padding: 0 .2rem .4rem; border-bottom: 1px solid var(--rule); }
.a1-ops-head h2 { margin: 0; font-family: var(--serif); font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.ask-link { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ask-link .btn-pill { text-decoration: none; }

@media (max-width: 480px) {
  .a1-hero { grid-template-columns: 64px minmax(0, 1fr); gap: .8rem; padding: .8rem .9rem; }
  .a1-atom { width: 64px; }
  .a1-hero h2 { font-size: 1.1rem; }
}

/* ── work in progress ─────────────────────────────────────────────────────
   One quiet dashed card (public/app.js:wipCard) wherever the server emptied a
   seeded field on a live box; the centred version (wipScreen) for a screen
   that is wholly waiting on its source. Same dashed rule as the empty state,
   so it reads as "nothing here yet", never as a number. */
.wip-card {
  border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm);
  padding: .9rem 1rem; background: var(--paper-2); color: var(--ink-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; font-size: 12.5px;
}
.wip-card .wip-title { color: var(--ink-2); font-weight: 600; font-size: 13px; flex-basis: 100%; }
.wip-card .wip-text::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--ink-3); margin-right: .5rem; vertical-align: 0; }
.wip-card .wip-link { margin-left: auto; }
.wip-card.wip-compact { padding: .7rem .8rem; font-size: 12px; }
.wip-card.wip-compact .wip-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.wip-card.wip-compact .wip-link { margin-left: 0; }
.section > .wip-card { margin-top: .2rem; }
.stats + .wip-card { margin-bottom: 1rem; }
.wip-screen {
  min-height: 48vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: .55rem;
  border: 1px dashed var(--rule-strong); border-radius: var(--radius); background: var(--paper-2); padding: 3rem 1.25rem; margin-top: .4rem;
}
.wip-screen .wip-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--ink-3); }
.wip-screen h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--ink); margin: 0; }
.wip-screen p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 46ch; }
.wip-screen .wip-what { color: var(--ink-3); font-size: 13px; }
.wip-screen .wip-link { margin-top: .6rem; }
.nav-tag-wip { color: var(--warn); border: 1px dashed currentColor; border-radius: 4px; padding: .05rem .3rem; }
.subtab .nav-tag-wip { margin-left: .35rem; font-size: 9px; }

/* ── who wrote in: Clients / Leads & DMs / All (public/app.js:VIEWS.inbox) ── */
.seg-row { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); overflow: hidden; margin: .2rem 0 .5rem; background: var(--paper); }
.seg-btn {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink-2); background: none; border: none; border-right: 1px solid var(--rule);
  padding: .45rem .8rem; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem; min-height: 40px;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--wash); }
.seg-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.seg-count { font-family: var(--mono); font-size: 11px; font-variant-numeric: tabular-nums; padding: .05rem .4rem; border-radius: 999px; background: var(--wash); color: var(--ink-2); }
.seg-btn[aria-selected="true"] .seg-count { background: rgba(255,255,255,.18); color: inherit; }
.seg-count.warn { background: var(--warn-soft); color: var(--warn); }
.seg-btn[aria-selected="true"] .seg-count.warn { background: var(--warn); color: #fff; }
@media (max-width: 480px) { .seg-row { display: flex; } .seg-btn { flex: 1; justify-content: center; padding-inline: .4rem; } }

/* ── the seven client agents (Agents tab · client portal "Your AI team") ──
   Same paper, ink and hairlines as everything else; the only colour is the
   status chip the rest of the app already uses. */
.client-agents { display: block; }
.agent-client { cursor: pointer; }
.agent-client.selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink) inset; }
.agent-deferred { opacity: .78; }
.agent-deferred .agent-name::after { content: " · deferred"; font-weight: 500; color: var(--ink-3); }
.ao-deferred { margin: -.2rem 0 0; }
.ao-toolbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin-bottom: .9rem; }
.ao-toolbar .field { display: grid; gap: .25rem; min-width: 12rem; }
.ao-toolbar select { max-width: 100%; }
.ao-list { display: grid; gap: .8rem; }
.ao-row { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); padding: .85rem 1rem 1rem; min-width: 0; }
.ao-head { display: flex; justify-content: space-between; gap: .6rem 1rem; align-items: center; flex-wrap: wrap; }
.ao-head-main { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; min-width: 0; }
.ao-head-side { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ao-actions { display: inline-flex; gap: .3rem; }
.ao-meta { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .2rem .6rem; }
.ao-note { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.ao-body { margin-top: .7rem; min-width: 0; }
.ao-hook { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.ao-why { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ao-text { white-space: pre-wrap; font: inherit; font-size: 13px; line-height: 1.55; color: var(--ink-2); margin: .3rem 0 0; overflow-wrap: anywhere; }
.ao-cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ao-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: .8rem .9rem; background: var(--paper-2); display: grid; gap: .45rem; align-content: start; min-width: 0; }
.ao-card-head { display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.ao-scripts { display: grid; gap: .5rem; }
.ao-script { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: 0 .9rem; }
.ao-script summary { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .7rem; align-items: baseline; padding: .7rem 0; cursor: pointer; list-style: none; }
.ao-script summary::-webkit-details-marker { display: none; }
.ao-script summary .ao-hook { grid-column: 2; font-weight: 500; color: var(--ink-2); }
.ao-script-n { font-family: var(--mono); font-size: 11px; color: var(--ink-3); border: 1px solid var(--rule-strong); border-radius: 999px; padding: .1rem .45rem; align-self: center; }
.ao-script-title { display: flex; flex-wrap: wrap; gap: .2rem .6rem; align-items: baseline; min-width: 0; }
.ao-script[open] summary { border-bottom: 1px solid var(--rule); }
.ao-script > *:not(summary) { margin-bottom: .8rem; }
.ao-script table.beats { margin-top: .6rem; }
.ao-onscreen { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.ao-angles { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ao-angle { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: .7rem .85rem; min-width: 0; }
.ao-angle ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .5rem; }
.ao-angle li { display: grid; gap: .1rem; }
.ao-angle .ao-hook { font-weight: 500; }
.ao-edit { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.ao-edit-main, .ao-edit-side { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.ao-excerpt { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.ao-flags { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ao-thumbs { display: grid; gap: .9rem; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; }
.ao-thumb { margin: 0; display: grid; gap: .3rem; justify-items: center; }
.ao-thumb img { display: block; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper-2); }
.ao-thumb.portrait img { height: 260px; width: auto; }
.ao-thumb.landscape img { width: 260px; height: auto; }
.ao-thumb figcaption { font-size: 11px; color: var(--ink-3); }
.ao-thumb-meta { display: grid; gap: .4rem; align-content: start; min-width: 0; }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--rule-strong); vertical-align: -1px; margin-right: 2px; }
.ao-captions { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.ao-caption { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: .7rem .85rem; min-width: 0; }
.ao-caption-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.ao-kpi { display: grid; gap: .6rem; }
.ao-kpi .stats { margin: 0; }
.profile-form fieldset { border: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.profile-form .field { display: grid; gap: .25rem; }
.profile-form textarea, .profile-form input { width: 100%; font: inherit; font-size: 13px; padding: .45rem .6rem; border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); color: var(--ink); resize: vertical; }
.profile-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 720px) {
  .ao-edit { grid-template-columns: minmax(0, 1fr); }
  .ao-thumbs { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .ao-thumb.portrait img { height: 200px; }
  .ao-thumb.landscape img { width: 100%; max-width: 320px; }
}

/* ── what a draft broke (public/app.js contractFlags) ─────────────────────
   A flagged draft has to look different from a clean one BEFORE anyone
   reaches Approve, so the flag is structural — a red edge on the row, a
   banner above the work, and a marker on the item itself — never colour
   alone: every one of them carries the words as well. Status red is the
   app's own alert token; nothing new enters the palette. Staff only: a
   client login is never sent contractIssues, so none of this can render. */
.ao-row[data-flagged] {
  border-color: var(--alert); box-shadow: inset 3px 0 0 var(--alert);
  padding-left: calc(1rem + 3px);
}
.flag-pill {
  display: inline-flex; align-items: center; gap: .3rem; flex: none;
  background: var(--alert-soft); color: var(--alert); border-radius: 999px;
  padding: .12rem .55rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .02em; text-transform: uppercase;
}
.flag-pill::before { content: "!"; font-weight: 800; }
.ao-broke {
  margin-top: .6rem; border: 1px solid var(--alert); border-radius: var(--radius);
  background: var(--alert-soft); padding: .7rem .85rem .75rem;
}
.ao-broke-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ao-broke-sub { font-size: 12px; color: var(--alert); font-weight: 600; }
.ao-broke-list { margin: .55rem 0 0; padding-left: 1.05rem; display: grid; gap: .4rem; }
.ao-broke-list > li { font-size: 12.5px; color: var(--ink); }
.ao-broke-list > li > b { font-weight: 650; }
.ao-broke-list ul { margin: .15rem 0 0; padding-left: 1rem; display: grid; gap: .15rem; }
.ao-broke-list ul li { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.ao-broke-foot { margin: .55rem 0 0; font-size: 11.5px; color: var(--ink-2); }
/* the item itself: the script, the caption, the hook that broke the rule */
.item-flag {
  display: inline-flex; align-items: center; gap: .25rem; flex: none;
  background: var(--alert-soft); color: var(--alert); border-radius: 999px;
  padding: .05rem .45rem; font-size: var(--t-xs); font-weight: 650; white-space: nowrap;
}
.item-flag::before { content: "!"; font-weight: 800; }
.item-flag-list {
  margin: .5rem 0 0; padding-left: 1rem; display: grid; gap: .2rem;
  font-size: 12px; color: var(--alert);
}
/* A flagged script is opened for the reviewer, which is the first time the
   beats table is laid out on a phone — so the column has to be allowed to
   shrink under it, or the whole page scrolls sideways. */
.ao-scripts { grid-template-columns: minmax(0, 1fr); }
.ao-script > * { min-width: 0; }
.ao-script[data-flagged] { border-color: var(--alert); background: var(--alert-soft); }
.ao-script[data-flagged] summary { align-items: center; }
.ao-caption[data-flagged] { border-color: var(--alert); background: var(--alert-soft); }
.ao-angle li[data-flagged] { border-left: 2px solid var(--alert); padding-left: .5rem; margin-left: -.5rem; }
.pipe-flag-bad { color: var(--alert); }
.pipe-flag-bad::before { background: var(--alert); }
.stage-fact-bad dd { color: var(--alert); }
.ao-confirm-lead { display: block; font-size: 13px; color: var(--ink-2); }
/* plain text, on purpose: see wireAgentOutputs */
.ao-confirm-list {
  margin: .6rem 0; max-height: 14rem; overflow: auto; text-align: left;
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper-2); padding: .6rem .8rem;
  font: inherit; font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* ── switching a client on (public/app.js openOneOfferSetup) ──────────────
   The card is the first thing on a client's page when the machine is not
   running for them, because "not on the One Offer" and "on it with no voice"
   are the only two states that stop everything. The second one is an alert:
   the agents are refusing right now. */
.oo-card {
  display: flex; gap: 1rem 1.4rem; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--rule-strong); border-radius: var(--radius);
  background: var(--paper); padding: 1rem 1.15rem; margin-bottom: var(--gap);
  box-shadow: var(--shadow);
}
.oo-card[data-state="stopped"] { border-color: var(--alert); background: var(--alert-soft); }
.oo-card-main { flex: 1 1 22rem; min-width: 0; }
.oo-card h3 { margin: 0 0 .25rem; font-family: var(--sans); font-size: var(--t-md); letter-spacing: -.01em; }
.oo-card p { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 70ch; }
.oo-card .btn { flex: none; }
/* The brief is prose, not a ledger column: its values read left-to-right
   beside the label, and the voice paragraph gets the full width. */
.oo-brief .row { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); }
.oo-brief .row-meta { justify-content: flex-start; text-align: left; max-width: 74ch; }
.oo-brief .row.oo-brief-voice { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
.oo-brief .oo-brief-voice .row-title { font-weight: 550; color: var(--ink); }
.oo-quote {
  margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* the wizard */
.oo-modal { width: min(780px, 96vw); padding-bottom: 1.1rem; }
.oo-sub { margin: .15rem 0 0; font-size: 12px; color: var(--ink-3); }
.oo-rail {
  list-style: none; display: flex; flex-wrap: wrap; gap: .35rem .5rem;
  margin: 0 0 1rem; padding: 0 0 .85rem; border-bottom: 1px solid var(--rule);
}
.oo-rail-step {
  display: flex; align-items: center; gap: .35rem; font-size: 11.5px; color: var(--ink-3);
  border: 1px solid var(--rule); border-radius: 999px; padding: .2rem .6rem .2rem .25rem;
}
.oo-rail-n {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--wash); color: var(--ink-3); font-size: 10.5px; font-weight: 700;
}
.oo-rail-step[data-at="now"] { color: var(--ink); border-color: var(--accent); font-weight: 650; }
.oo-rail-step[data-at="now"] .oo-rail-n { background: var(--accent-ink); color: var(--paper); }
.oo-rail-step[data-at="done"] { color: var(--ink-2); }
.oo-rail-step[data-at="done"] .oo-rail-n { background: var(--good-soft); color: var(--good); }
.oo-body { max-height: min(58vh, 34rem); overflow: auto; padding-right: .25rem; }
.oo-lead { margin: 0 0 1rem; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); max-width: 72ch; }
.oo-block { border-top: 1px solid var(--rule); padding-top: .9rem; margin-top: .9rem; }
.oo-block:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.oo-block h4 { margin: 0 0 .2rem; font-family: var(--sans); font-size: 13.5px; letter-spacing: -.01em; }
.oo-field { display: grid; gap: .25rem; margin-bottom: .85rem; }
.oo-label { font-size: 12.5px; font-weight: 650; color: var(--ink); }
.oo-opt { font-weight: 500; color: var(--ink-3); }
.oo-help { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.oo-help.oo-note { margin: .2rem 0 0; }
.oo-eg { display: block; color: var(--ink-3); font-style: italic; }
.oo-body textarea, .oo-body input {
  width: 100%; font: inherit; font-size: 13px; padding: .5rem .6rem;
  border: 1px solid var(--rule-strong); border-radius: 8px;
  background: var(--paper); color: var(--ink); resize: vertical; min-height: 40px;
}
.oo-body textarea:focus-visible, .oo-body input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.oo-voice { background: var(--paper-2); }
.oo-meter { display: flex; gap: .8rem; align-items: baseline; flex-wrap: wrap; margin-top: .3rem; font-size: 11.5px; color: var(--ink-3); }
.oo-meter [data-over="1"] { color: var(--alert); font-weight: 650; }
.oo-ticks, .oo-will { margin: 1rem 0 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: 12.5px; color: var(--ink-2); }
.oo-will li b { color: var(--ink); }
.oo-colors { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.oo-color { position: relative; }
.oo-swatch {
  position: absolute; right: .5rem; bottom: .55rem; width: 16px; height: 16px; border-radius: 4px;
  border: 1px solid var(--rule-strong); background-image:
    linear-gradient(45deg, var(--wash) 25%, transparent 25%, transparent 75%, var(--wash) 75%);
  background-size: 8px 8px; pointer-events: none;
}
.oo-color input { font-family: var(--mono); padding-right: 1.9rem; }
.oo-missing {
  border: 1px solid var(--warn); background: var(--warn-soft); border-radius: var(--radius);
  padding: .7rem .85rem; margin-top: 1rem;
}
.oo-missing b { font-size: 12.5px; color: var(--warn); }
.oo-missing ul { margin: .35rem 0 .4rem; padding-left: 1.1rem; font-size: 12.5px; color: var(--ink-2); display: grid; gap: .2rem; }
.oo-error { margin: .8rem 0 0; font-size: 12.5px; color: var(--alert); font-weight: 600; }
.oo-acts { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: .9rem; }
.oo-spacer { flex: 1 1 auto; }
@media (max-width: 560px) {
  .oo-modal { width: 100vw; max-height: 100dvh; border-radius: 0; padding: 1rem .9rem 1.1rem; }
  .oo-body { max-height: none; }
  .oo-acts { position: sticky; bottom: 0; background: var(--paper); }
  .oo-acts .btn { flex: 1 1 auto; }
  .oo-rail-step span:not(.oo-rail-n) { display: none; }
  .oo-rail-step[data-at="now"] span:not(.oo-rail-n) { display: inline; }
  .ao-broke-list { padding-left: .9rem; }
}

/* ── the pipeline (public/app.js pipelineHTML) ────────────────────────────
   Seven stages in the order the work flows, drawn as one machine. Phone
   first: a vertical rail with the handoff named on the connector, because a
   client opens this on a phone and a conveyor belt that scrolls sideways is
   a conveyor belt nobody sees the end of. At 1080px and up the same markup
   becomes the horizontal strip, with the chevron and the handoff word living
   in the grid gap. Nothing new in the palette — azure marks the stage you
   picked, the status three carry state, ink carries everything else. */
.pipe { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pipe-item { display: grid; gap: .5rem; min-width: 0; position: relative; }
.pipe-card {
  font: inherit; text-align: left; cursor: pointer; width: 100%; min-height: 44px;
  display: grid; gap: .18rem; align-content: start;
  padding: .6rem .75rem; background: var(--paper);
  border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink);
  transition: border-color var(--dur), box-shadow var(--dur), background var(--dur);
}
.pipe-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-lift); }
.pipe-card[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--paper); }
.pipe-top { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.pipe-n {
  font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3);
  border: 1px solid var(--rule-strong); border-radius: 999px;
  min-width: 18px; text-align: center; padding: 0 .25rem; flex: none;
}
.pipe-card[aria-pressed="true"] .pipe-n { border-color: var(--accent); color: var(--accent-ink); }
.pipe-name { font-size: 13.5px; font-weight: 650; letter-spacing: -.01em; }
.pipe-state { display: flex; align-items: center; gap: .35rem; font-size: var(--t-xs); color: var(--ink-3); min-width: 0; }
.pipe-state > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pipe-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); flex: none; }
/* state is never colour alone: the word next to the dot always says it */
[data-state="running"] .pipe-dot, .pipe-state[data-state="running"] .pipe-dot { background: var(--accent); animation: live 1.6s var(--ease) infinite; }
[data-state="produced"] .pipe-dot, .pipe-state[data-state="produced"] .pipe-dot { background: var(--good); }
[data-state="idle"] .pipe-dot, .pipe-state[data-state="idle"] .pipe-dot { background: var(--rule-strong); }
[data-state="handled"] .pipe-dot, .pipe-state[data-state="handled"] .pipe-dot { background: var(--ink-3); }
[data-state="new"] .pipe-dot, .pipe-state[data-state="new"] .pipe-dot { background: transparent; border: 1px dashed var(--rule-strong); }
[data-state="running"] .pipe-state { color: var(--accent-ink); font-weight: 600; }
[data-state="produced"] .pipe-state { color: var(--good); font-weight: 600; }
.pipe-out { font-size: 12px; color: var(--ink-2); line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
/* "1 in review" is normal flow: ink at weight 600 with an azure dot for "new for you". Red is
   reserved for `.pipe-flag-bad`, which is the one that blocks. */
.pipe-flag {
  justify-self: start; margin-top: .25rem; font-size: var(--t-xs); font-weight: 600;
  color: var(--ink); display: inline-flex; align-items: center; gap: .3rem;
}
.pipe-flag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
/* the latest line holds its height so seven cards are one straight edge */
.pipe-card .pipe-out { min-height: 2.8em; }
.pipe-arrow {
  display: flex; align-items: center; gap: .4rem; padding-left: .85rem; color: var(--ink-3);
  font-size: var(--t-xs); min-height: 14px;
}
.pipe-arrow::before { content: ""; width: 1px; height: 14px; background: var(--rule-strong); }
.pipe-arrow b { font-weight: 500; font-style: italic; }
/* The connector words (formats · scripts · hooks · cuts …) name machinery; a client gets the
   hairline between stages and nothing to read. Staff keep the words. */
:is(body.client-login, .cl-skin) .pipe-arrow b { display: none; }
.pipe-toolbar { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin-bottom: .9rem; }
.pipe-toolbar .field { display: grid; gap: .25rem; min-width: 12rem; }
.pipe-toolbar select { min-height: 40px; max-width: 100%; }
.pipe-run-note { margin: 0 0 .35rem; font-size: 12px; color: var(--ink-3); }
.pipe-detail { margin-top: .9rem; }
.pipe-hint { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.pipe-skel .skel-grid > i { min-height: 40px; }

/* The strip needs ~170px a card before the state word and the latest line
   stop truncating. With the rail taking 350px, seven across only fits from
   about 1500px — below that the line snakes four then three, which still
   reads left-to-right and keeps every card legible. */
@media (min-width: 760px) {
  .pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem 3.4rem; align-items: stretch; }
  .pipe-item { gap: 0; }
  .pipe-card { height: 100%; }
  .pipe-arrow {
    position: absolute; left: calc(100% + 1.7rem); top: 50%; transform: translate(-50%, -50%);
    width: 3.4rem; padding: 0; align-items: center; justify-content: center;
    flex-direction: column; gap: .15rem; min-height: 0; text-align: center; pointer-events: none;
  }
  .pipe-arrow::before { width: 1.6rem; height: 1px; }
  .pipe-arrow b { font-size: 9.5px; line-height: 1.1; white-space: nowrap; font-style: italic; color: var(--ink-3); }
  /* the fourth card ends the first row — its handoff would point at a wall */
  .pipe-item:nth-child(4n) .pipe-arrow { display: none; }
}
@media (min-width: 1500px) {
  .pipe { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .pipe-item:nth-child(4n) .pipe-arrow { display: flex; }
}
/* below the strip breakpoint the cards are already stacked, so the seventh
   does not need a connector dangling under it */
.pipe-item:last-child .pipe-arrow { display: none; }

/* the stage you opened: everything about one stage, in one place */
.stage-open {
  border: 1px solid var(--accent); border-radius: var(--radius); background: var(--paper);
  padding: .9rem 1rem 1rem; display: grid; gap: .7rem;
}
.stage-open-head { display: flex; justify-content: space-between; align-items: start; gap: .8rem; }
.stage-open-head h3 { margin: 0; font-family: var(--sans); font-size: var(--t-lg); letter-spacing: -.01em; }
.stage-says { margin: .2rem 0 0; font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 62ch; }
.stage-facts { display: grid; gap: .6rem 1.4rem; margin: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.stage-facts > div { display: grid; gap: .15rem; min-width: 0; }
.stage-facts dt { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.stage-facts dd { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.stage-acts { display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.stage-acts .btn { min-height: 40px; }
.stage-acts .row-sub { max-width: 46ch; }

/* ── a filled affordance, for the one action that matters ─────────────────
   The black pill stays the page-level CTA; this is the in-card affirmative
   (Approve, Retry, See this week's work). --accent-ink rather than --accent
   because white on #1397D4 is 4.0:1 and this has to clear 4.5. */
.btn-primary { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .btn-primary { color: #06212f; }
:root[data-theme="dark"] .btn-primary:hover { color: #06212f; }

/* ── the client's Home ────────────────────────────────────────────────────
   One hero that answers "how is my thing going", one Needs-you list that
   answers "what do you need from me", then the quiet supporting cards. */
.hero-card {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem 1.35rem;
  display: grid; gap: 1.1rem; margin-bottom: var(--gap);
}
.hero-hello { margin: 0; font-size: var(--t-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.hero-line {
  margin: .35rem 0 0; font-family: var(--serif); font-size: var(--t-xl); line-height: 1.22;
  letter-spacing: -.015em; font-weight: 600; color: var(--ink); max-width: 30ch;
}
.hero-sub { margin: .45rem 0 0; font-size: 13px; color: var(--ink-2); }
.hero-nums { display: grid; gap: .8rem 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); border-top: 1px solid var(--rule); padding-top: .9rem; }
.hero-num { display: grid; gap: .1rem; min-width: 0; }
.hero-num b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.hero-num b span { font-size: 16px; color: var(--ink-3); font-weight: 500; }
.hero-num-l { font-size: 12px; color: var(--ink-3); }
@media (min-width: 900px) {
  .hero-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 1.6rem; }
  .hero-nums { border-top: 0; border-left: 1px solid var(--rule); padding: .2rem 0 .2rem 1.6rem; }
}

.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.need {
  display: grid; gap: .3rem .8rem; align-items: center; min-width: 0;
  grid-template-columns: auto minmax(0, 1fr);
  border: 1px solid var(--rule); border-left: 3px solid var(--accent);
  border-radius: var(--radius); background: var(--paper-2); padding: .7rem .85rem;
}
.need-tag {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-ink); align-self: start; padding-top: .15rem;
}
.need-body { display: grid; gap: .15rem; min-width: 0; }
.need-body b { font-size: 14px; font-weight: 650; }
.need-why { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.need .btn { grid-column: 1 / -1; justify-self: start; min-height: 40px; }
@media (min-width: 720px) {
  .need { grid-template-columns: auto minmax(0, 1fr) auto; }
  .need .btn { grid-column: auto; }
}

.worklist { list-style: none; margin: 0; padding: 0; display: grid; }
.work-item {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .25rem .8rem; padding: var(--row-y) 0; border-bottom: 1px solid var(--rule); min-width: 0;
}
.work-item:last-child { border-bottom: 0; padding-bottom: 0; }
.work-title { font-size: 13.5px; font-weight: 550; min-width: 0; display: grid; gap: .1rem; }
.work-title .row-sub { font-weight: 400; }
.work-meta { display: flex; align-items: center; gap: .5rem; font-size: 12px; color: var(--ink-3); flex: none; }
.work-due.late { color: var(--alert); font-weight: 600; }
.plan-line { margin: 0 0 .4rem; font-size: 13.5px; color: var(--ink-2); }
/* two stacks side by side, each as tall as its own content — the left card
   was being stretched to match the right column and ended in 600px of white */
.split-top { align-items: start; }
.split-top > * { min-width: 0; }
/* 390px is the primary width: every control a thumb has to hit clears 40px
   there, including the small ones inside an output row. */
@media (max-width: 600px) {
  .ao-row .btn, .ao-caption .btn, .stage-acts .btn, .pipe-toolbar select, .fold > summary { min-height: 40px; }
  .ao-row .btn { display: inline-flex; align-items: center; }
}


/* Home's window onto the pipeline: seven pips, then the way in. */
.team-strip { display: flex; flex-wrap: wrap; gap: .4rem; }
/* The slot holds the height the filled strip will have, so Home does not
   jump when the AI-team answer lands a moment after the first paint. */
.team-strip-wait { min-height: 122px; align-items: start; }
.team-pip {
  display: inline-flex; align-items: center; gap: .35rem; min-width: 0;
  border: 1px solid var(--rule); border-radius: 999px; padding: .3rem .7rem;
  background: var(--paper-2); font-size: 12px;
}
.team-pip-n { font-weight: 600; color: var(--ink); }
.team-pip-s { color: var(--ink-3); }
.team-strip-act { margin-top: .85rem; }
.team-strip-act .btn { min-height: 40px; }

/* first run: a client with nothing yet gets a plan, not an empty grid */
.onboard { display: grid; gap: .85rem; margin-bottom: 1.1rem; }
.onboard-lead { margin: 0; font-size: var(--t-md); color: var(--ink); font-weight: 550; max-width: 54ch; }
.onboard-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; counter-reset: ob; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.onboard-steps li {
  counter-increment: ob; display: grid; gap: .2rem; min-width: 0;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: .8rem .9rem;
}
.onboard-steps li::before {
  content: counter(ob); font-family: var(--mono); font-size: var(--t-xs); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: 999px; width: 20px; height: 20px;
  display: grid; place-items: center; margin-bottom: .2rem;
}
.onboard-steps b { font-size: 13.5px; }
.onboard-steps span { font-size: 12.5px; color: var(--ink-2); line-height: 1.5; }
.onboard-next { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* one disclosure instead of fifteen thousand pixels of secondary machinery */
.fold { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); margin-top: var(--gap); }
.fold > summary {
  cursor: pointer; list-style: none; padding: .85rem 1.1rem; min-height: 44px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem;
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: "▾"; margin-left: auto; color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.fold[open] > summary::after { transform: rotate(180deg); }
.fold > summary:hover { background: var(--wash); border-radius: var(--radius); }
.fold-body { padding: 0 1.1rem 1.1rem; }
/* The fold opens rather than appears. `::details-content` + interpolate-size (on :root) lets the
   height run 0 → auto in --dur-2; an engine without it opens instantly, as it always did. */
.fold::details-content {
  height: 0; overflow: clip;
  transition: height var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete;
}
.fold[open]::details-content { height: auto; }
.fold-body > .section:first-child { margin-top: 0; }
.fold-body > .stats:first-child { margin-top: .2rem; }

/* ── the demo note (app.js demoNote) — one line where twenty chips used to be ── */
.demo-note {
  margin: 0 0 .2rem; font-size: 12.5px; color: var(--ink-3); display: flex; align-items: baseline; gap: .5rem;
}
.demo-note::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px dashed var(--ink-3); align-self: center; }
/* a stat that has words where its number will be ("Not counted yet") */
.stat-text { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); line-height: 1.3; padding-top: .35rem; }

/* ── an agent output, folded (app.js renderAgentOutputs { collapsed }) ──────
   The row keeps its header — kind, client, when, status, Approve — and the work itself sits
   behind a 44px summary that says what is inside in one line. A staff row that broke a house
   rule arrives open. Same height transition as `.fold`. */
.ao-more > summary {
  display: flex; align-items: center; gap: .8rem; min-height: 44px; margin-top: .45rem;
  cursor: pointer; list-style: none; border-top: 1px solid var(--rule); padding-top: .3rem;
}
.ao-more > summary::-webkit-details-marker { display: none; }
.ao-more > summary:hover .ao-more-cta { color: var(--accent); }
.ao-more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
.ao-peek { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-more-cta { flex: none; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); transition: color var(--dur-1) var(--ease); }
.ao-more-cta::after { content: " \2192"; }
.ao-more[open] > summary .ao-more-cta::after { content: " \2191"; }
.ao-more[open] > summary .ao-peek { visibility: hidden; }
.ao-more::details-content {
  height: 0; overflow: clip;
  transition: height var(--dur-2) var(--ease), content-visibility var(--dur-2) allow-discrete;
}
.ao-more[open]::details-content { height: auto; }
.ao-more-caps { margin-top: .5rem; }
.ao-more-caps > summary { border-top: none; margin-top: 0; padding-top: 0; }
.ao-more-caps .ao-captions { margin-top: .5rem; }

/* ── the bench's two columns ───────────────────────────────────────────────
   The jobs table needs the width and the phone is 390px plus its frame: at ≥1200px the phone
   gets a fixed 420px and the table the rest; below that, or with the phone hidden, one column
   (the audit's cramped table sat in a 1fr / 1.75fr split). */
.bench-split { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) { .bench-split[data-phone="on"] { grid-template-columns: minmax(0, 1fr) 420px; } }

/* ── The chat (public/app.js mountAgentChat) — every chat surface ──────────
   "Clean, like a classic ChatGPT UI." One centred 48rem reading column. Your
   words on the right in a soft bubble; the assistant's on the left as plain
   prose, no bubble — that one choice is most of the difference between a
   chat and a messaging app. The composer is sticky to the bottom of the
   screen, and to the VISUAL viewport on iOS (--ac-kb, set by app.js
   acWireViewport), so the keyboard never covers it. Paper, ink and hairlines;
   azure only on focus and a hovered send; red only on a failed turn's rule.
   Works at 390px: one column, 44px targets, nothing horizontal.
   The client's agent tabs, their A1 AI, the team's A1 AI and the Agents tab's
   "Ask <agent>" all draw exactly this. */
.ac-host { grid-column: 1 / -1; margin-top: .75rem; }
/* inside a paper stage card (the Agents tab) the pinned composer matches the card, not the page */
.ac-host .ac-composer { background: var(--paper); }
.agent:has(.ac-panel) { grid-column: 1 / -1; }
.ac-open-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
/* a column, not a grid: leftover height (from .ac-fill) must go to the THREAD,
   and only a flex-grow item takes it — a grid hands it to the auto rows */
.ac-panel { display: flex; flex-direction: column; min-width: 0; }
/* the chat IS the screen: fill the viewport under the header, so an empty
   thread sits centred over a composer that is already at the bottom */
.ac-fill { min-height: calc(100dvh - 11rem); }
.ac-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  width: 100%; max-width: 48rem; margin-inline: auto; min-height: 2.25rem;
  font-size: var(--t-sm); color: var(--ink-3);
}
.ac-head-name:empty { display: none; }
.ac-head:not(:has(.ac-head-name:not(:empty), .ac-clear:not([hidden]), .ac-histbar)) { display: none; }
.ac-clear {
  font: inherit; font-size: var(--t-sm); color: var(--ink-3); background: none; border: 1px solid transparent;
  border-radius: var(--radius-xs); padding: .4rem .6rem; margin-left: auto; margin-right: -.6rem; min-height: 36px; cursor: pointer;
  transition: color var(--dur-1), background var(--dur-1);
}
.ac-clear:hover { color: var(--ink); background: var(--wash); }
.ac-clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ac-face {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--rule-strong);
}
.ac-face-lg { width: 34px; height: 34px; font-size: 12px; }

.ac-thread {
  display: grid; gap: 1.4rem; align-content: start; grid-template-columns: minmax(0, 1fr); flex: 1 0 auto;
  width: 100%; max-width: 48rem; margin-inline: auto; padding: .6rem 0 1.2rem; min-width: 0;
}
.ac-thread.is-empty { align-content: center; }
.ac-loading, .ac-loaderr { margin: 0; font-size: var(--t-sm); color: var(--ink-3); text-align: center; }
.ac-turn { min-width: 0; animation: rise var(--dur-2) var(--ease) both; }
.ac-me { display: flex; justify-content: flex-end; }
.ac-bubble {
  max-width: min(72%, 60ch); padding: .65rem 1rem; border-radius: 20px;
  background: var(--wash); color: var(--ink); font-size: var(--t-md); line-height: 1.55;
  white-space: pre-wrap; word-break: break-word;
}
.ac-them { display: grid; gap: .3rem; justify-items: start; }
.ac-said { width: 100%; min-width: 0; font-size: var(--t-md); line-height: 1.65; color: var(--ink); word-break: break-word; }
.ac-said p { margin: 0 0 .8rem; }
.ac-said ul, .ac-said ol { margin: 0 0 .8rem; padding-left: 1.5rem; }
.ac-said li { margin: .25rem 0; }
.ac-said > :last-child { margin-bottom: 0; }
.ac-said a { color: var(--accent-ink); }
.ac-said code { font-family: var(--mono); font-size: .88em; background: var(--wash); padding: .1em .35em; border-radius: 5px; }
.ac-said pre {
  margin: 0 0 .8rem; padding: .75rem .95rem; overflow-x: auto; font-size: 13px; line-height: 1.5;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-sm);
}
.ac-said pre code { background: none; padding: 0; font-size: inherit; }
/* citations (the team's A1 AI) — the numbered chips are .cite, above */
.ac-cites { display: flex; flex-wrap: wrap; gap: .3rem .9rem; width: 100%; padding-top: .5rem; border-top: 1px solid var(--rule); font-size: var(--t-sm); }
.ac-cite-row { display: inline-flex; align-items: center; gap: .35rem; min-width: 0; }
.ac-cite-title { color: var(--ink-2); font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 34ch; }
.ac-nih .ac-said { border-left: 2px solid var(--rule-strong); padding-left: .9rem; }
.ac-turn-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; min-height: 32px;
  font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.ac-tag { border: 1px solid var(--rule-strong); border-radius: 5px; padding: .05rem .4rem; }
.ac-copy {
  font: inherit; font-size: var(--t-xs); font-weight: 550; color: var(--ink-3); cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--radius-xs);
  padding: .3rem .55rem; margin-left: -.55rem; min-height: 32px;
  transition: color var(--dur-1), background var(--dur-1), opacity var(--dur-1);
}
.ac-copy:hover { color: var(--ink); background: var(--wash); }
.ac-copy:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; opacity: 1; }
.ac-copy.is-done { color: var(--ink); }
/* on a mouse, Copy shows on hover — and always under the keyboard's focus */
@media (hover: hover) {
  .ac-copy { opacity: 0; }
  .ac-them:hover .ac-copy, .ac-them:focus-within .ac-copy, .ac-copy.is-done { opacity: 1; }
}
/* the one waiting indicator, where the answer will appear */
.ac-wait { display: flex; align-items: center; gap: .6rem; min-height: 1.65em; color: var(--ink-3); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.ac-dots { display: inline-flex; gap: 4px; }
.ac-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: live 1.6s var(--ease) infinite; }
.ac-dots i:nth-child(2) { animation-delay: .15s; }
.ac-dots i:nth-child(3) { animation-delay: .3s; }
.ac-elapsed:empty { display: none; }
.ac-first { margin: .5rem 0 0; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; max-width: 56ch; }
.ac-failed { border-left: 2px solid var(--alert); padding-left: .9rem; font-size: var(--t-base); color: var(--ink-2); }
.ac-failed b { color: var(--ink); }
/* the sentinel the page follows (app.js sets its scroll margin to the composer's height) */
.ac-end { height: 1px; }

/* empty state: a greeting and 3–4 openers that send on tap */
.ac-empty { display: grid; gap: .6rem; justify-items: center; text-align: center; padding: 1.5rem .25rem; }
.ac-hello { margin: 0; font-family: var(--serif); font-size: var(--t-xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.ac-empty-lead { margin: 0; font-size: var(--t-base); color: var(--ink-2); max-width: 46ch; line-height: 1.55; }
.ac-suggest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; width: 100%; max-width: 34rem; margin-top: .8rem; }
.ac-chip {
  font: inherit; font-size: var(--t-sm); text-align: left; line-height: 1.4; min-height: 44px; cursor: pointer;
  padding: .65rem .9rem; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--rule); color: var(--ink-2);
  transition: border-color var(--dur-1), background var(--dur-1), color var(--dur-1);
}
.ac-chip:hover { border-color: var(--rule-strong); background: var(--paper-2); color: var(--ink); }
.ac-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the composer — pinned to the bottom of the screen while the chat is on it */
.ac-composer {
  position: sticky; bottom: var(--ac-kb, 0px); z-index: 3; flex: none;
  width: 100%; max-width: 48rem; margin: 0 auto; padding: .5rem 0 .75rem; background: var(--bg);
}
.ac-jump {
  position: absolute; left: 50%; top: -.6rem; transform: translate(-50%, -100%);
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); box-shadow: var(--shadow-lift);
  animation: rise var(--dur-2) var(--ease) both;
}
.ac-jump:hover { background: var(--wash); }
.ac-jump:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-inputwrap {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .5rem;
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 26px; padding: .3rem .35rem .3rem 1.1rem;
  box-shadow: var(--shadow); transition: border-color var(--dur-1), box-shadow var(--dur-1);
}
.ac-inputwrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ac-composer textarea {
  resize: none; overflow-y: auto; min-height: 24px; max-height: 200px; width: 100%; color: var(--ink);
  font-size: var(--t-md); line-height: 1.5; padding: .6rem 0; border: 0; background: transparent; border-radius: 0;
}
.ac-composer textarea:focus { outline: none; box-shadow: none; }
.ac-send {
  width: 40px; height: 40px; flex: none; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; border: 0; background: var(--ink); color: var(--paper);
  transition: background var(--dur-1), color var(--dur-1);
}
.ac-send:hover { background: var(--accent); color: #fff; }
.ac-send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-send:disabled { background: var(--wash); color: var(--ink-3); cursor: default; }
.ac-composer-foot {
  display: flex; justify-content: center; align-items: center; gap: .75rem; padding: .35rem .5rem 0; min-height: 1.4rem;
  font-size: var(--t-xs); color: var(--ink-3);
}
.ac-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ac-count.warn { color: var(--warn); }
@media (pointer: coarse) { .ac-send { width: 44px; height: 44px; } .ac-copy { min-height: 44px; } }
@media (max-width: 480px) {
  .ac-panel .ac-thread { gap: 1.1rem; }
  /* under a hero on a phone, the greeting reads first, not from mid-screen */
  .ac-thread.is-empty { align-content: start; }
  .ac-fill { min-height: calc(100dvh - 10rem); }
  .ac-bubble { max-width: 88%; }
  .ac-suggest { grid-template-columns: 1fr; }
  .ac-hello { font-size: var(--t-lg); }
  .ac-hint { display: none; }
  .ac-composer { padding-bottom: .5rem; }
  .ac-composer-foot { min-height: 0; padding-top: 0; }
  .ac-composer-foot:not(:has([data-ac-count]:not([hidden]))) { display: none; }
}
/* Visually hidden, still read aloud — the chat composer's label. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* the journey list is an <ol> now — a numbered sequence, said as one */
.journey { list-style: none; padding: 0; }
/* a row mid-approval: the click answered before the round trip did */
.ao-row[data-pending] { opacity: .6; }

/* ══════════════════════════════════════════════════════════════════════════
   knockz — the grill, tune vs teach, the voice bank, the intake, the board.
   Everything below is drawn by knockz.js. It borrows the app's tokens and
   adds no new colour: the ONE new idea is that a permanent action (teach)
   and a one-off action (tune) must never look like each other.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── the header: one row, not three ────────────────────────────────────
   Who it is about · which screen · the ?. What this replaced was a tab bar,
   a caption under it explaining the tab, a labelled client picker and a
   sentence naming that same client again — two facts, four lines, and the
   screen itself below the fold on a phone. */
.kz-head {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 var(--gap);
}
/* The slim header the PORTAL sections share since the rail became their
   navigation: the client picker (staff only) and the ? switch, nothing else.
   The pill bar below is now only drawn on the staff Agents tab, which is still
   one surface with seven screens inside it. */
.kz-head-slim { justify-content: flex-end; gap: .45rem; margin-bottom: calc(var(--gap) * .6); }
.kz-head-slim .kz-who { margin-right: auto; }

.kz-tabs {
  display: flex; gap: .2rem; overflow-x: auto; scrollbar-width: none;
  padding: .25rem; margin: 0; min-width: 0; flex: 1 1 auto;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: 999px;
}
.kz-tabs::-webkit-scrollbar { display: none; }
.kz-tab {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--t-sm); font-weight: 500; color: var(--ink-2);
  padding: .5rem .9rem; border-radius: 999px; white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  min-height: 38px;
}
.kz-tab:hover { background: var(--wash); color: var(--ink); }
.kz-tab[aria-current="true"] { background: var(--ink); color: var(--paper); }

/* The client picker is a control, not a labelled form field: the name it
   shows IS the label, and it is the only place the client is named. */
.kz-who { flex: 0 0 auto; max-width: 15rem; }
.kz-who select {
  font-weight: 600; font-size: var(--t-sm); min-height: 40px;
  border-radius: 999px; padding-inline: .85rem 1.9rem;
  background-color: var(--paper);
}
.kz-who select:hover { border-color: var(--rule-strong); }

.kz-hint-toggle {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-3);
  font: inherit; font-size: var(--t-sm); font-weight: 700; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kz-hint-toggle:hover { color: var(--ink); border-color: var(--ink-3); }
.kz-hint-toggle[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.kz-tab-says {
  margin: calc(var(--gap) * -1 + .1rem) 0 var(--gap); padding-left: .2rem;
  font-size: var(--t-sm); color: var(--ink-3); max-width: 70ch;
}
.kz-empty-roster { margin-bottom: var(--gap); }

/* app.js blanks the page subtitle in several places, and this surface blanks
   it too (the tab bar below already says which screen is open). An empty
   subtitle should not hold a line of space open under the h1. */
#view-sub:empty { display: none; }

/* app.js's Show filter, relocated into the heading of the list it filters.
   It stays app.js's element, wired by app.js — only where it sits changed. */
.section-head .pipe-toolbar.kz-inline-filter {
  margin: 0 0 0 auto; gap: .5rem; align-items: center; flex-wrap: nowrap;
}
.section-head .kz-inline-filter .field { display: flex; align-items: center; gap: .4rem; min-width: 0; }
.section-head .kz-inline-filter .micro { margin: 0; }
.section-head .kz-inline-filter select {
  min-height: 34px; font-size: var(--t-sm); border-radius: 999px; padding-inline: .7rem 1.8rem;
}

/* Visible to a screen reader, gone from the page. Used for the labels that
   the control itself already says out loud, and for app.js's own second
   client picker on the Pipeline tab, which stays wired and stays in sync. */
.kz-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── one line of numbers, and each one is the filter ───────────────────
   Five stat cards, each with a label, a big number and a caption sentence,
   became this. The two that change what a reviewer does next are the two
   that are red and clickable. */
.kz-topline {
  display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .3rem 1.4rem; margin: 0 0 var(--gap);
  padding: .1rem 0 .85rem; border-bottom: 1px solid var(--rule);
}
.kz-count {
  display: inline-flex; align-items: baseline; gap: .38rem;
  font-size: var(--t-sm); color: var(--ink-2); border: 0; background: none;
  padding: 0; font-family: inherit; text-align: left;
}
button.kz-count { cursor: pointer; border-radius: var(--radius-xs); }
button.kz-count:hover { color: var(--ink); }
button.kz-count:hover b { text-decoration: underline; text-underline-offset: 4px; }
.kz-count b {
  font-family: var(--serif); font-size: var(--t-2xl); font-weight: 500;
  line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums;
}
.kz-count-bad b, .kz-count-bad { color: var(--alert); }
.kz-count-live b { color: var(--accent-ink); }
.kz-topline-tail {
  margin-left: auto; font-size: var(--t-xs); color: var(--ink-3);
  display: inline-flex; align-items: center; gap: .4rem;
}

/* The state of a whole screen in one line, instead of three cards counting
   the rows of the list directly underneath them. */
.kz-verdict {
  margin: 0 0 var(--gap); font-size: var(--t-md); color: var(--ink-2);
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
}
.kz-verdict b {
  font-family: var(--serif); font-size: var(--t-2xl); font-weight: 500;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.kz-verdict span { font-size: var(--t-sm); color: var(--ink-3); }
.kz-verdict-ok b { color: var(--good); }
.kz-verdict-bad b { color: var(--alert); }

.kz-lead { margin: 0 0 1rem; color: var(--ink-2); font-size: var(--t-base); max-width: 70ch; }
.kz-quiet { color: var(--ink-3); }
.kz-ok { margin: .6rem 0 0; color: var(--good); font-size: var(--t-sm); }
.kz-ok-big { font-size: var(--t-md); font-weight: 500; }
.kz-count { font-size: var(--t-xs); color: var(--ink-3); text-align: right; margin-top: .25rem; }

.kz-error {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--alert-soft); border: 1px solid var(--alert);
  border-radius: var(--radius-sm); padding: .7rem .85rem; margin-top: .7rem;
  font-size: var(--t-sm); color: var(--ink);
}
.kz-error b { color: var(--alert); }

/* ── the honest wait ──────────────────────────────────────────────────── */
.kz-wait {
  margin-top: .9rem; padding: 1rem 1.1rem;
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
}
.kz-wait-head { display: flex; align-items: center; gap: .6rem; font-size: var(--t-md); }
.kz-wait-dots { display: inline-flex; gap: 3px; }
.kz-wait-dots i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  animation: live 1.6s var(--ease) infinite;
}
.kz-wait-dots i:nth-child(2) { animation-delay: .18s; }
.kz-wait-dots i:nth-child(3) { animation-delay: .36s; }
.kz-wait-bar {
  height: 4px; border-radius: 4px; background: var(--rule);
  margin: .75rem 0 .5rem; overflow: hidden;
}
.kz-wait-bar i { display: block; height: 100%; background: var(--accent); transition: width 1s linear; }
.kz-wait-note { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.kz-wait-clock { margin: .3rem 0 0; font-size: var(--t-xs); color: var(--ink-3); }

/* ── TUNE vs TEACH — the whole point is that these look different ───────
   The two paragraphs that used to spell the difference out now ride the hint
   switch in the header (on for a client, off for staff). Everything else here
   carries it with no words at all and is not negotiable:
     · a neutral inset panel against a warm one
     · a 5px amber edge down the permanent side
     · a padlock, on the badge AND on the button
     · an amber outlined button that is nothing like the blue one opposite
   and, whatever the hint switch says, the confirm dialog spells it out in
   full before a single permanent rule is written. */
.kz-tune {
  display: grid; gap: .7rem; margin-top: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .kz-tune { grid-template-columns: 1.1fr .9fr; } }
.kz-oneoff, .kz-permanent { border-radius: var(--radius); padding: .8rem .9rem; }
.kz-oneoff { background: var(--paper-2); border: 1px solid var(--rule); }
.kz-permanent {
  background: var(--warn-soft); border: 1px solid var(--warn);
  border-left-width: 5px;
}
.kz-tune-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .5rem; }
.kz-tune-head b { font-size: var(--t-base); }
.kz-badge {
  display: inline-flex; align-items: center; gap: .28rem;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .2rem .44rem; border-radius: var(--radius-xs);
}
.kz-badge-once { background: var(--wash); color: var(--ink-2); }
.kz-badge-forever { background: var(--warn); color: #fff; }
.kz-badge-high { background: var(--accent); color: #fff; }
.kz-lock { width: 9px; height: 10.5px; flex: 0 0 auto; }
.kz-tune-says { margin: 0 0 .6rem; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.kz-tune-foot { margin: .5rem 0 0; font-size: var(--t-xs); color: var(--ink-3); }

/* The permanent button: amber, outlined, padlocked. Never the house blue —
   the blue on the left is the one that undoes itself. */
.btn.kz-btn-teach {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--paper); color: var(--warn);
  border: 1px solid var(--warn); box-shadow: inset 0 0 0 1px var(--warn-soft);
  font-weight: 600;
}
.btn.kz-btn-teach:hover:not(:disabled) { background: var(--warn); color: #fff; box-shadow: none; }
.btn.kz-btn-teach:hover:not(:disabled) .kz-lock { color: #fff; }

.kz-presets { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .45rem; }
.kz-preset {
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  border-radius: 999px; padding: .42rem .8rem; font: inherit; font-size: var(--t-sm);
  cursor: pointer; min-height: 36px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kz-preset:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.kz-preset:disabled { opacity: .5; cursor: default; }
/* One caption line under the row rather than a note under one pill breaking
   the row onto two. The contract asks for this note; Humanize has one. */
.kz-preset-note { margin: 0 0 .6rem; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.4; }
.kz-preset-note b { color: var(--ink-2); font-weight: 600; }
.kz-tune-free { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; }
.kz-grow { flex: 1 1 200px; }
.kz-tune-lost { font-size: var(--t-sm); background: var(--paper); border: 1px dashed var(--rule-strong); padding: .6rem; border-radius: var(--radius-sm); }

/* ── the grill ────────────────────────────────────────────────────────── */
/* Number and name. The caption line only appears when it is carrying a lock
   reason or the hint switch is on, so the rail sits at two lines instead of
   four and grows only when it has something to say. */
.kz-rail { display: grid; gap: .5rem; list-style: none; margin: 0 0 1.3rem; padding: 0; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .kz-rail { grid-template-columns: repeat(4, 1fr); } }
.kz-rail-item { margin: 0; display: flex; }
.kz-rail-card {
  width: 100%; text-align: left; cursor: pointer; font: inherit;
  display: flex; flex-direction: column; gap: .12rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: .6rem .75rem; color: var(--ink);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kz-rail-card:hover:not(:disabled) { border-color: var(--rule-strong); }
.kz-rail-card:disabled { cursor: default; opacity: .62; }
.kz-rail-card[data-state="now"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.kz-rail-card[data-state="done"] { background: var(--good-soft); border-color: var(--good); }
.kz-rail-n { font-size: var(--t-lg); line-height: 1.1; color: var(--ink-3); }
.kz-rail-card[data-state="now"] .kz-rail-n { color: var(--accent); }
.kz-rail-name { font-weight: 600; font-size: var(--t-sm); }
.kz-rail-says { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.35; margin-top: .1rem; }

.kz-chosen-hook {
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: .7rem .85rem; margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: .3rem; align-items: flex-start;
}
.kz-chosen-hook .kz-alt-text { margin: 0; }

.kz-grill {
  background: var(--paper-2); border: 2px solid var(--ink);
  border-radius: var(--radius); padding: 1.1rem 1.2rem;
}
.kz-grill-kicker {
  margin: 0 0 .5rem; font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .12em; color: var(--ink-3);
}
.kz-grill-question {
  margin: 0 0 .7rem; font-family: var(--serif); font-size: var(--t-xl);
  line-height: 1.32; font-weight: 500;
}
.kz-grill-promise { margin: 0 0 .9rem; font-size: var(--t-base); color: var(--ink-2); }
.kz-grill-acts { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }

.kz-grill-banner {
  display: flex; gap: .8rem; align-items: flex-start;
  border-radius: var(--radius-sm); padding: .75rem .85rem; margin-bottom: .9rem;
}
.kz-grill-answered { background: var(--good-soft); border: 1px solid var(--good); }
.kz-grill-skipped { background: var(--warn-soft); border: 1px solid var(--warn); border-left-width: 4px; }
.kz-grill-mark {
  flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: .2rem .45rem; border-radius: var(--radius-xs);
  background: var(--paper); color: var(--ink-2); border: 1px solid var(--rule-strong);
}
.kz-grill-skipped .kz-grill-mark { background: var(--warn); color: #fff; border-color: var(--warn); }
.kz-grill-body { min-width: 0; }
.kz-grill-body b { display: block; margin-bottom: .2rem; }
.kz-grill-q { margin: 0 0 .35rem; font-size: var(--t-sm); color: var(--ink-2); }
.kz-grill-a {
  margin: 0 0 .35rem; padding-left: .7rem; border-left: 2px solid var(--rule-strong);
  font-size: var(--t-sm); color: var(--ink); white-space: normal;
}
.kz-grill-says { margin: 0 0 .4rem; font-size: var(--t-xs); color: var(--ink-3); }

.kz-grills { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kz-grill-item {
  display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .7rem .8rem; background: var(--paper);
}
.kz-grill-item-main { min-width: 0; }
.kz-grill-item-q { margin: 0 0 .2rem; font-size: var(--t-sm); font-weight: 500; }
.kz-grill-item-side { flex: 0 0 auto; display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }

/* ── hooks ────────────────────────────────────────────────────────────── */
.kz-hookrow { margin-bottom: 1.2rem; }
.kz-hookset { margin-bottom: 1rem; }
.kz-hookset-head { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .5rem; }
/* One hook, one line: angle, the hook, and what you can do with it, across a
   row instead of stacked three deep. Twenty-five of these is the choice
   somebody came here to make, so none of them is hidden — they are just no
   longer three lines tall each. */
.kz-alts { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.kz-alt {
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  padding: .5rem .7rem; background: var(--paper);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .3rem .8rem;
  transition: border-color var(--dur) var(--ease);
}
.kz-alt:hover { border-color: var(--rule-strong); }
.kz-alt-chosen, .kz-alt-chosen:hover { border-color: var(--accent); background: var(--accent-soft); }
.kz-alt-main { display: flex; align-items: baseline; gap: .7rem; min-width: 0; }
.kz-alt-angle {
  flex: 0 0 4.6rem; font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-3); white-space: nowrap;
}
.kz-alt-text { margin: 0; font-family: var(--serif); font-size: var(--t-md); line-height: 1.4; min-width: 0; }
.kz-alt-acts { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.kz-alt-tune { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .kz-alt { grid-template-columns: 1fr; }
  .kz-alt-main { flex-direction: column; gap: .1rem; }
  .kz-alt-angle { flex: none; }
  .kz-alt-acts { justify-content: flex-start; }
}
.kz-chosen { font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink); }
.kz-own-hook { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.kz-words { margin: .6rem 0 0; font-size: var(--t-xs); color: var(--ink-3); }

.kz-locked, .kz-blocked, .kz-filmit {
  border: 1px dashed var(--rule-strong); border-radius: var(--radius);
  padding: 1rem 1.1rem; background: var(--paper-2);
}
.kz-blocked { border-style: solid; border-color: var(--warn); background: var(--warn-soft); }
.kz-locked h3, .kz-blocked h3, .kz-filmit h3 { margin: 0 0 .4rem; font-size: var(--t-md); }
.kz-missing { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .5rem; }
.kz-missing li {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .55rem .7rem;
}
.kz-missing li b { flex: 0 0 auto; font-size: var(--t-sm); }
.kz-missing li span { flex: 1 1 260px; font-size: var(--t-sm); color: var(--ink-2); }
.kz-missing-soft li { background: var(--paper-2); }
.kz-fix-note { font-size: var(--t-xs); color: var(--ink-3); }
.kz-filmit-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .7rem .8rem; margin: .6rem 0 .8rem; }
.kz-shots { margin: .4rem 0 0; padding-left: 1.1rem; font-size: var(--t-sm); color: var(--ink-2); }
.kz-row-foot {
  display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--rule);
}
.kz-row-foot-out { font-size: var(--t-sm); color: var(--good); }
.kz-trail { margin-top: .8rem; }
.kz-trail ul { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .25rem; }
.kz-trail li { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; font-size: var(--t-xs); }
.kz-trail-note { color: var(--ink-2); }
.kz-chip-good { background: var(--good-soft); color: var(--good); }

/* ── voice bank ─────────────────────────────────────────────────────────
   One sentence, set big, because it is the product's own promise and the
   only line on this screen worth reading twice. The three that used to
   follow it explained the mechanism of a list you can see. */
.kz-voice-lead { margin: .2rem 0 calc(var(--gap) * 1.2); }
.kz-voice-lead h2 {
  margin: 0; font-family: var(--serif); font-size: var(--t-2xl);
  font-weight: 400; line-height: 1.22; letter-spacing: -.01em;
  max-width: 24ch; color: var(--ink-2);
}
.kz-voice-lead h2 b { font-weight: 600; color: var(--ink); }
.kz-voice-lead .note { margin-top: .8rem; max-width: 70ch; }
.kz-teach-form { margin-bottom: 1rem; }
.kz-form { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.kz-form-row { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.kz-form-row .field { min-width: 170px; }
.kz-addbar { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; margin-bottom: .9rem; }
.kz-addbar .row-sub { flex: 1 1 16rem; }

.kz-exemplars, .kz-rules { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.kz-exemplar, .kz-rule {
  display: flex; gap: .8rem; justify-content: space-between; align-items: flex-start;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .65rem .8rem; background: var(--paper);
}
/* Ten pasted scripts printed in full made the one screen that has to be
   scannable into the longest page in the product. Two lines, and a click
   opens the one somebody wants. */
.kz-exemplar-main {
  min-width: 0; flex: 1 1 auto; display: block; text-align: left;
  border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer;
}
.kz-exemplar-text {
  margin: 0 0 .2rem; font-size: var(--t-sm); line-height: 1.55; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.kz-exemplar.kz-open .kz-exemplar-text { -webkit-line-clamp: unset; display: block; }
.kz-exemplar-main:hover .kz-exemplar-text { color: var(--accent-ink); }
.kz-rule { border-left: 3px solid var(--warn); }
.kz-rule-text { margin: 0; font-size: var(--t-base); }
.kz-rule-side { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.kz-choices { border: 0; margin: 0; padding: 0; display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.kz-choices-wrap { gap: .4rem; }
.kz-choices legend { padding: 0; margin-right: .3rem; }
.kz-radio {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: .35rem .7rem;
  font-size: var(--t-sm); background: var(--paper); min-height: 34px;
}
.kz-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/* ── brand intake ─────────────────────────────────────────────────────── */
.kz-intake-top { margin-bottom: var(--gap); }
.kz-intake-progress { margin-bottom: .8rem; }
.kz-intake-pct { font-size: var(--t-md); }
.kz-intake-pct b { font-size: var(--t-xl); font-family: var(--serif); }
.kz-progress { height: 6px; border-radius: 6px; background: var(--rule); overflow: hidden; margin: .35rem 0 .35rem; max-width: 420px; }
.kz-progress i { display: block; height: 100%; background: var(--accent); transition: width .4s var(--ease); }
.kz-sections { display: flex; gap: .4rem; flex-wrap: wrap; }
.kz-section-pill {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font: inherit;
  font-size: var(--t-sm); border: 1px solid var(--rule-strong); background: var(--paper);
  color: var(--ink-2); border-radius: 999px; padding: .4rem .75rem; min-height: 36px;
}
.kz-section-pill[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kz-section-n { font-size: var(--t-xs); opacity: .75; font-variant-numeric: tabular-nums; }

.kz-nag {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: .8rem .9rem; margin-bottom: var(--gap);
}
.kz-nag b { flex: 0 0 100%; }
.kz-nag span { flex: 1 1 280px; font-size: var(--t-sm); color: var(--ink-2); }

.kz-hero-field {
  border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1.2rem; background: var(--accent-soft);
}
.kz-hero-head { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; }
.kz-hero-head h3 { margin: 0; font-family: var(--serif); font-size: var(--t-lg); }
.kz-hero-why { margin: 0 0 .5rem; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55; max-width: 68ch; }
.kz-hero-field textarea { background: var(--paper); }

.kz-fields { display: grid; gap: 1rem; }
@media (min-width: 880px) { .kz-fields { grid-template-columns: 1fr 1fr; } }
.kz-field { min-width: 0; }
.kz-field-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .2rem; }
.kz-field-label { font-size: var(--t-sm); font-weight: 600; }
.kz-field-help { margin: 0 0 .3rem; font-size: var(--t-xs); color: var(--ink-3); line-height: 1.45; }
.kz-field-legacy textarea, .kz-field-legacy input { border-style: dashed; color: var(--ink-2); }
.kz-legacy {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  background: var(--warn-soft); color: var(--warn); border-radius: var(--radius-xs); padding: .15rem .35rem;
}
.kz-field-state { font-size: var(--t-xs); color: var(--ink-3); margin-left: auto; }
.kz-field-state[data-kz-ok="1"] { color: var(--good); }
.kz-field-error { margin: .3rem 0 0; font-size: var(--t-xs); color: var(--alert); }
.kz-jumped { animation: kz-flash 1.6s var(--ease); }
@keyframes live { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes kz-flash { 0%, 100% { box-shadow: none; } 25% { box-shadow: 0 0 0 4px var(--accent-soft); } }
.kz-intake-foot { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin-top: 1.2rem; }
.kz-saved { font-size: var(--t-sm); color: var(--ink-3); }

/* ── the board ────────────────────────────────────────────────────────── */
.kz-board { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .kz-board { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .kz-board { grid-template-columns: repeat(4, 1fr); } }
.kz-col { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: .6rem; min-width: 0; }
.kz-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.kz-col-n { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.kz-col-cards { display: grid; gap: .45rem; min-height: 60px; border-radius: var(--radius-sm); }
.kz-col-cards.kz-over { outline: 2px dashed var(--accent); outline-offset: 2px; }
.kz-col-empty { margin: 0; padding: .8rem 0; text-align: center; font-size: var(--t-xs); color: var(--ink-3); }
.kz-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .55rem .6rem; }
.kz-card[draggable="true"] { cursor: grab; }
.kz-card.kz-dragging { opacity: .45; }
.kz-card-title { margin: 0; font-size: var(--t-sm); font-weight: 500; line-height: 1.4; }
.kz-card-note { margin: .25rem 0 0; font-size: var(--t-xs); color: var(--ink-2); }
.kz-card-src { font-size: var(--t-xs); margin-top: .3rem; display: inline-block; }
/* Four buttons on every card, on every card on the board, was most of the
   ink on the screen. They come back on hover and on keyboard focus — and on
   a touch screen, where there is no hover, they never left. */
.kz-card-foot {
  display: flex; gap: .25rem; flex-wrap: wrap;
  opacity: 0; max-height: 0; margin-top: 0; overflow: hidden;
  transition: opacity var(--dur) var(--ease), max-height var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}
.kz-card:hover .kz-card-foot,
.kz-card:focus-within .kz-card-foot { opacity: 1; max-height: 4rem; margin-top: .45rem; }
@media (hover: none) { .kz-card-foot { opacity: 1; max-height: 4rem; margin-top: .45rem; } }
.kz-add { display: flex; gap: .3rem; margin-top: .5rem; }
.kz-add input { flex: 1 1 auto; min-width: 0; }

/* ── readiness ──────────────────────────────────────────────────────────
   A ready agent is a name, a green pill and a button — three across at desk
   width. A blocked one carries its list and spans the row, because that is
   the card somebody has to read. */
.kz-ready { display: grid; gap: .6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 720px) { .kz-ready { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1120px) { .kz-ready { grid-template-columns: repeat(3, 1fr); } }
.kz-agent { border: 1px solid var(--rule); border-radius: var(--radius); padding: .75rem .85rem; background: var(--paper); }
.kz-agent[data-state="blocked"] { border-color: var(--warn); background: var(--warn-soft); }
@media (min-width: 720px) { .kz-agent[data-state="blocked"] { grid-column: 1 / -1; } }
.kz-agent-head { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-bottom: .3rem; }
.kz-agent[data-state="ready"] .kz-force { margin-top: .5rem; }
.kz-rec { margin-top: .6rem; }
.kz-rec summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink-3); }
.kz-force { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }

/* ── progressive disclosure ────────────────────────────────────────────
   Detail lives behind a click: the questions already answered, the answer
   inside one of them, and the absolute path to the raw folder. */
.kz-asked { margin-top: var(--gap); }
.kz-answer { margin-top: .35rem; }
.kz-answer > summary {
  cursor: pointer; font-size: var(--t-xs); color: var(--ink-3);
  list-style: none; display: inline-flex; align-items: center; gap: .25rem;
}
.kz-answer > summary::-webkit-details-marker { display: none; }
.kz-answer > summary::before { content: "▸"; font-size: 9px; transition: transform var(--dur) var(--ease); }
.kz-answer[open] > summary::before { transform: rotate(90deg); }
.kz-answer > summary:hover { color: var(--ink-2); }
.kz-answer .kz-grill-a { margin-top: .3rem; }

.kz-filmnotes { margin-top: .4rem; }
.kz-filmnotes > summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: baseline; gap: .4rem;
}
.kz-filmnotes > summary::-webkit-details-marker { display: none; }
.kz-filmnotes > summary::before { content: "▸"; font-size: 9px; color: var(--ink-3); transition: transform var(--dur) var(--ease); }
.kz-filmnotes[open] > summary::before { transform: rotate(90deg); }
.kz-filmnotes > summary:hover .micro { color: var(--ink); }
.kz-filmnotes > p { margin: .35rem 0 0; }

.kz-rawdir { margin-top: 1rem; padding-top: .85rem; border-top: 1px solid var(--rule); }
.kz-rawdir > summary { cursor: pointer; font-size: var(--t-sm); color: var(--ink-2); }
.kz-rawdir > summary:hover { color: var(--ink); }
.kz-rawdir p.mono { margin: .45rem 0 .2rem; font-size: var(--t-sm); word-break: break-all; }

/* ── air and hierarchy ─────────────────────────────────────────────────
   Fewer, bigger, calmer: more space between the blocks that are left, and a
   heading that is plainly a heading. Nothing new is invented — it is the
   app's own serif and its own gap token, used harder. */
[data-kz-body] > .section + .section,
[data-kz-body] > .section + .fold { margin-top: calc(var(--gap) * 1.6); }
[data-kz-body] .section-head { margin-bottom: 1rem; }
[data-kz-body] .section-head h2 { font-size: var(--t-lg); }
.kz-h4 { font-family: var(--serif); font-weight: 500; }

/* The body cross-fades when a tab changes, so the eye knows the page moved
   under it rather than that something failed to load. */
[data-kz-body] { animation: kz-in var(--dur-2) var(--ease); }
@keyframes kz-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ── phone ────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .kz-head { flex-wrap: wrap; gap: .45rem; }
  .kz-who { flex: 1 1 100%; max-width: none; order: -1; }
  /* flex-basis 0 so the scrolling pill bar yields the ? its 34px instead of
     pushing it onto a row of its own. */
  .kz-tabs { flex: 1 1 0; min-width: 0; }
  .kz-topline { gap: .2rem 1rem; }
  .kz-count b, .kz-verdict b { font-size: var(--t-xl); }
  .kz-topline-tail { margin-left: 0; flex-basis: 100%; }
  .kz-grill { padding: .9rem; }
  .kz-grill-question { font-size: var(--t-lg); }
  .kz-grill-acts { flex-direction: column; align-items: stretch; }
  .kz-grill-acts .btn { width: 100%; justify-content: center; }
  .kz-rule, .kz-grill-item { flex-direction: column; gap: .5rem; }
  .kz-rule-side, .kz-grill-item-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; }
  /* An exemplar is one clamped line now, so it keeps its row on a phone
     rather than stacking Remove onto a line of its own. */
  .kz-exemplar { gap: .5rem; align-items: center; }
  .kz-exemplar > .btn { flex: 0 0 auto; }
  .kz-tune-free { flex-direction: column; align-items: stretch; }
  .kz-tune-free .btn { width: 100%; justify-content: center; }
  .kz-intake-foot .btn { width: 100%; }
  .kz-addbar .btn { width: 100%; justify-content: center; }
}

/* Buttons in a column form sit at their own width, not the form's. */
.kz-form > .btn, .kz-form > button.btn { align-self: flex-start; }
.kz-radio span { white-space: nowrap; }
.kz-tune-free .btn { flex: 0 0 auto; }

/* ── the video editor (addendum §A0–A10) ──────────────────────────────── */
.kz-badge-fixture { background: var(--ink); color: var(--paper); }
.kz-waitfor {
  display: flex; flex-direction: column; gap: .2rem;
  background: var(--wash); border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm); padding: .7rem .85rem; margin-top: .8rem; font-size: var(--t-sm);
}
.kz-rawdir { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.kz-rawdir p.mono { margin: .2rem 0; font-size: var(--t-sm); word-break: break-all; }
.kz-editor-run { margin-top: .9rem; }

.kz-jobs { display: grid; gap: .55rem; }
.kz-job { border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .7rem .8rem; background: var(--paper); }
.kz-job[data-state="running"] { border-color: var(--accent); }
.kz-job[data-state="failed"] { border-color: var(--alert); background: var(--alert-soft); }
.kz-job-head { display: flex; justify-content: space-between; gap: .7rem; align-items: flex-start; flex-wrap: wrap; }
.kz-job-side { display: flex; gap: .4rem; align-items: center; flex: 0 0 auto; }
.kz-job-bar { height: 5px; border-radius: 5px; background: var(--rule); overflow: hidden; margin: .55rem 0 .3rem; }
.kz-job-bar i { display: block; height: 100%; background: var(--accent); transition: width .5s var(--ease); }
.kz-job-note { margin: 0; font-size: var(--t-xs); color: var(--ink-2); }
.kz-job-note .row-sub { font-size: 10px; letter-spacing: .01em; }
.kz-job-error { margin: .4rem 0 0; font-size: var(--t-sm); color: var(--alert); }
.kz-job-foot { display: flex; gap: .5rem; align-items: center; margin-top: .55rem; }

.kz-cut { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .kz-cut { grid-template-columns: 1.3fr .7fr; } }
.kz-video { width: 100%; border-radius: var(--radius-sm); background: #000; display: block; }
.kz-cut-meta { margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.kz-cut-facts { margin: 0; }
.kz-blocked-hard { border-color: var(--alert); background: var(--alert-soft); }
.kz-h4 { margin: 1.3rem 0 .4rem; font-size: var(--t-md); }
.kz-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.kz-checks li {
  display: grid; gap: .5rem; align-items: baseline; grid-template-columns: 56px 1fr;
  border: 1px solid var(--rule); border-radius: var(--radius-xs); padding: .45rem .6rem; font-size: var(--t-sm);
}
@media (min-width: 760px) { .kz-checks li { grid-template-columns: 56px 240px 1fr; } }
.kz-check-mark {
  font-size: 10px; font-weight: 700; letter-spacing: .05em; text-align: center;
  padding: .15rem .3rem; border-radius: var(--radius-xs); background: var(--wash); color: var(--ink-2);
}
.kz-checks li[data-status="pass"] .kz-check-mark { background: var(--good-soft); color: var(--good); }
.kz-checks li[data-status="warn"] .kz-check-mark { background: var(--warn-soft); color: var(--warn); }
.kz-checks li[data-status="fail"] .kz-check-mark { background: var(--alert-soft); color: var(--alert); }
.kz-checks li[data-status="fail"] { border-color: var(--alert); }
.kz-check-detail { color: var(--ink-2); font-size: var(--t-xs); }

.kz-takes { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.kz-takes li { border: 1px solid var(--rule); border-left-width: 3px; border-radius: var(--radius-sm); padding: .6rem .7rem; }
.kz-takes li[data-used="1"] { border-left-color: var(--good); background: var(--paper); }
.kz-takes li[data-used="0"] { border-left-color: var(--rule-strong); background: var(--paper-2); }
.kz-take-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.kz-take-why { margin: .25rem 0 0; font-size: var(--t-sm); }
.kz-take-text { margin: .25rem 0 0; font-size: var(--t-xs); color: var(--ink-3); }
.kz-cut-files { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: 1.2rem; padding-top: .8rem; border-top: 1px solid var(--rule); }
.kz-review-frame {
  width: 100%; height: 620px; border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm); background: var(--paper); margin-top: .5rem;
}
@media (max-width: 640px) { .kz-review-frame { height: 420px; } }

/* ══ phase 2 — effortless for a client ═══════════════════════════════════
 * The auto-fill panel, the guess marking, the blueprint and the Start-here
 * card. Nothing below introduces a new colour: a guess is `--warn` because
 * it is the same class of thing as the legacy prefill (somebody has to look
 * at it), and the one accent-filled button per surface stays the only one.
 */

/* the ? that moved into the page header — it is a control among the flags
   now, not a lone circle floating over the screen it was explaining */
.topbar-meta .kz-hint-toggle { width: 26px; height: 26px; font-size: var(--t-xs); }

/* ── the auto-fill panel ───────────────────────────────────────────────── */
.kz-prefill {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: var(--s-4) var(--s-5); margin-bottom: var(--gap);
  border-left: 3px solid var(--rule-strong);
}
.kz-prefill-main > b { display: block; font-size: var(--t-lg); font-family: var(--serif); letter-spacing: -.01em; }
.kz-prefill-main > p { margin: .35rem 0 0; font-size: var(--t-sm); color: var(--ink-2); max-width: 78ch; }
.kz-prefill-acts { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: .8rem; }
.kz-prefill-note { margin: .45rem 0 0; font-size: var(--t-xs); color: var(--ink-3); }
.kz-prefill-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin-top: .8rem; }
.kz-prefill-form .field { flex: 1 1 260px; margin: 0; }
/* The one state with something to do gets the accent edge; the rest stay
   quiet, or the panel is shouting on every screen and on none. */
.kz-prefill-check, .kz-prefill-ask, .kz-prefill-run-cta { border-left-color: var(--accent); }
.kz-prefill-run { border-left-color: var(--warn); }
.kz-prefill-run .kz-wait-bar { margin-top: .7rem; }

/* what we will not guess — folded, but never hidden */
.kz-refuse { margin-top: .9rem; border-top: 1px solid var(--rule); padding-top: .7rem; }
.kz-refuse > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; align-items: baseline; }
.kz-refuse > summary::-webkit-details-marker { display: none; }
.kz-refuse > summary::before { content: "\25B8"; color: var(--ink-3); font-size: 10px; }
.kz-refuse[open] > summary::before { content: "\25BE"; }
.kz-refuse > summary b { font-size: var(--t-base); }
.kz-refuse > summary span { font-size: var(--t-sm); color: var(--ink-3); }
.kz-refuse-lead { margin: .6rem 0 .5rem; font-size: var(--t-sm); color: var(--ink-2); max-width: 78ch; }
.kz-refuse-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
@media (min-width: 880px) { .kz-refuse-list { grid-template-columns: 1fr 1fr; gap: .45rem 1.4rem; } }
.kz-refuse-list li { font-size: var(--t-sm); border-left: 2px solid var(--rule); padding-left: .55rem; }
.kz-refuse-list b { display: block; }
.kz-refuse-list span { color: var(--ink-3); }

/* ── the counter that does not lie ─────────────────────────────────────── */
.kz-unchecked {
  display: inline-block; margin-left: .45rem; font-size: var(--t-sm); font-weight: 600;
  color: var(--warn); background: var(--warn-soft); border-radius: var(--radius-xs); padding: .1rem .4rem;
}
.kz-progress-split { display: flex; }
.kz-progress-split i { flex: none; }
.kz-progress i.kz-progress-guess {
  background: repeating-linear-gradient(135deg, var(--warn) 0 4px, transparent 4px 8px), var(--warn-soft);
}
.kz-section-guess {
  margin-left: .3rem; font-size: 10px; font-weight: 700; line-height: 1;
  background: var(--warn-soft); color: var(--warn); border-radius: 999px; padding: .15rem .3rem;
}

/* ── a value a machine wrote and nobody has read ───────────────────────── */
.kz-guess {
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  background: var(--warn); color: #fff; border-radius: var(--radius-xs); padding: .15rem .35rem;
}
/* The wrapper carries it, not the input — a choice or multi field has no box
   to dash, and those are the ones where an unread guess is easiest to miss. */
.kz-field-guess { border-left: 2px solid var(--warn); padding-left: .6rem; }
.kz-field-guess textarea, .kz-field-guess input[type="text"], .kz-field-guess input[type="url"] {
  border-style: dashed; border-color: var(--warn);
}

/* ── the voice bank's first example ────────────────────────────────────── */
.kz-addbar-first { padding: .2rem 0 .1rem; }
.kz-voice-more { margin: .7rem 0 0; font-size: var(--t-sm); color: var(--ink-3); max-width: 70ch; }

/* ── the blueprint row ─────────────────────────────────────────────────── */
.ao-blueprint { display: grid; gap: var(--s-4); }
.ao-bp-source { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ao-bp-summary { margin: 0; font-size: var(--t-md); color: var(--ink); max-width: 80ch; }
.ao-bp-block { border-top: 1px solid var(--rule); padding-top: .8rem; }
.ao-bp-block h4 {
  margin: 0 0 .35rem; font-size: var(--t-base); display: flex; align-items: center; gap: .45rem;
}
.ao-bp-n {
  font-size: 10px; font-weight: 700; background: var(--wash); color: var(--ink-3);
  border-radius: 999px; padding: .12rem .38rem; line-height: 1;
}
.ao-bp-why { margin: 0 0 .6rem; font-size: var(--t-sm); color: var(--ink-2); max-width: 80ch; }
.ao-bp-list { margin: 0; padding-left: 1.1rem; display: grid; gap: .3rem; font-size: var(--t-sm); }
/* The refusals and the proof gap are the two blocks that make the rest of
   this page worth reading, so they are the two that carry a tint. */
.ao-bp-honest { background: var(--paper-2); border-radius: var(--radius-sm); padding: .9rem 1rem; display: grid; gap: .9rem; }
.ao-bp-honest .ao-bp-block:first-child { border-top: 0; padding-top: 0; }
.ao-bp-refused { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
@media (min-width: 880px) { .ao-bp-refused { grid-template-columns: 1fr 1fr; gap: .5rem 1.4rem; } }
.ao-bp-refused li { font-size: var(--t-sm); border-left: 2px solid var(--rule-strong); padding-left: .55rem; }
.ao-bp-refused b { display: block; }
.ao-bp-refused span { color: var(--ink-3); }
.ao-bp-proof { background: var(--warn-soft); border-radius: var(--radius-sm); border-top: 0; padding: .9rem 1rem; }
.ao-bp-proof h4 { color: var(--warn); }
.ao-bp-angles, .ao-bp-objections { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.ao-bp-angles li, .ao-bp-objections li { display: grid; gap: .15rem; font-size: var(--t-sm); }
.ao-bp-note { margin: 0; }

/* ── Start here: the client's first five minutes ───────────────────────── */
.start-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.start-step {
  display: flex; gap: .8rem; align-items: center; padding: .8rem .2rem;
  border-top: 1px solid var(--rule);
}
.start-step:first-child { border-top: 0; }
.start-n {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--t-sm); font-weight: 700;
  background: var(--wash); color: var(--ink-2);
}
.start-step[data-done="0"] .start-n { background: var(--accent-soft); color: var(--accent-ink); }
.start-step[data-done="1"] .start-n { background: var(--good-soft); color: var(--good); }
.start-step-payoff .start-n { background: var(--wash); color: var(--ink-3); }
.start-body { flex: 1 1 auto; display: grid; gap: .1rem; min-width: 0; }
.start-body b { font-size: var(--t-md); }
.start-why { font-size: var(--t-sm); color: var(--ink-2); max-width: 76ch; }
.start-step[data-done="1"] .start-body b { color: var(--ink-2); font-weight: 500; }
.start-step > .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .start-step { flex-wrap: wrap; }
  .start-step > .btn, .start-step > .state { margin-left: 34px; }
}

/* the plan, folded — a summary that earns the click, and the three counts
   that say how much of it is honestly unknown, visible without opening */
.kz-bp-fold {
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: var(--gap);
}
.kz-bp-fold > summary {
  cursor: pointer; list-style: none; display: flex; gap: var(--s-4); align-items: center;
  padding: var(--s-4) var(--s-5);
}
.kz-bp-fold > summary::-webkit-details-marker { display: none; }
.kz-bp-sum { flex: 1 1 auto; display: grid; gap: .25rem; min-width: 0; }
.kz-bp-sum > b { font-size: var(--t-md); }
.kz-bp-sum-line { font-size: var(--t-sm); color: var(--ink-2); }
.kz-bp-sum-tags { display: flex; flex-wrap: wrap; gap: .3rem; }
.kz-bp-open {
  flex: 0 0 auto; font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-xs); padding: .25rem .6rem;
}
.kz-bp-fold[open] .kz-bp-open::after { content: "\00a0\2014\00a0close"; }
.kz-bp-fold[open] .kz-bp-sum-line { display: none; }
.kz-bp-body { padding: 0 var(--s-5) var(--s-4); }
.kz-bp-body .ao-row { border: 0; box-shadow: none; padding: 0; }

/* ── the competitor-reel feed (public/knockz.js §8) ───────────────────────
   A scroll of cards, each one a rival's reel that beat that rival's own
   median. The numbers are the content, so they are set in the mono face and
   the prose underneath them stays quiet. Monochrome throughout — the only
   colour on the card is the alert tint on a flag that says "do not trust this
   number yet", which is the one thing worth interrupting for. */
.kz-reel-lead { margin-bottom: var(--gap); }
.kz-reel-lead h2 {
  font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.15;
  margin: 0 0 .45rem; max-width: 32ch; font-weight: 400;
}
.kz-reel-lead h2 b { font-weight: 600; }
.kz-reel-lead p { margin: 0; color: var(--ink-2); font-size: var(--t-sm); max-width: 62ch; }

.kz-reel-algo {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); padding: .8rem .95rem; margin-bottom: var(--gap);
}
.kz-reel-algo p { margin: 0; font-size: var(--t-sm); }
.kz-reel-algo p + p { margin-top: .45rem; }
.kz-reel-terms { display: flex; flex-wrap: wrap; gap: .3rem; }
.kz-reel-terms code, .kz-reel-rank code {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .01em;
  background: var(--wash, var(--paper)); border: 1px solid var(--rule);
  border-radius: var(--radius-xs); padding: .06rem .34rem; color: var(--ink-2);
}
.kz-reel-source { margin: 0 0 .6rem; font-size: var(--t-sm); color: var(--ink-3); font-family: var(--mono); }
.kz-reel-staff { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .8rem; }
.kz-reel-srcnote { font-size: .76rem; color: var(--ink-3); max-width: 46ch; display: block; }
/* A source that can actually run reads as live, not as another apology. */
.kz-reel-srcnote.kz-reel-srcon { color: var(--ink-2); }
.kz-reel-srcnote.kz-reel-srcon::before { content: '\25CF'; color: var(--accent); font-size: .7em; margin-right: .4em; vertical-align: .12em; }

.kz-reel-paste { margin-bottom: var(--gap); }
.kz-reel-paste > summary {
  cursor: pointer; font-size: var(--t-sm); font-weight: 600;
  padding: .5rem .7rem; border: 1px dashed var(--rule-strong); border-radius: var(--radius-sm);
}
.kz-reel-paste[open] > summary { margin-bottom: .7rem; }
.kz-reel-in {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .55rem .7rem;
  border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .7rem .8rem; margin: 0 0 .6rem;
}
.kz-reel-in legend { font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); padding: 0 .3rem; }
.kz-reel-in label { display: flex; flex-direction: column; gap: .18rem; font-size: .76rem; color: var(--ink-2); }
.kz-reel-in-wide { grid-column: 1 / -1; }
.kz-reel-paste-acts { display: flex; gap: .5rem; margin: 0; }

/* The feed itself. One column: these are read one at a time, and a grid of
   them turns a decision into a wall. */
.kz-reel-feed { display: flex; flex-direction: column; gap: .8rem; }
.kz-reel {
  border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper); padding: .95rem 1.05rem;
  transition: border-color var(--dur) var(--ease);
}
.kz-reel:hover { border-color: var(--rule-strong); }
.kz-reel-unranked { background: var(--paper-2); }
.kz-reel-done { border-left: 3px solid var(--good); }

.kz-reel-metrics {
  margin: 0 0 .2rem; font-family: var(--mono); font-size: var(--t-sm);
  color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .45rem;
}
.kz-reel-metrics b { color: var(--ink); font-size: 1.02rem; font-weight: 600; }
.kz-reel-flag {
  font-family: var(--sans); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
  background: var(--alert-soft); color: var(--alert); border: 1px solid var(--alert);
  border-radius: 999px; padding: .04rem .42rem; cursor: help;
}
.kz-reel-who {
  margin: 0 0 .7rem; font-family: var(--mono); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3);
}

/* The labelled rows. A label column so the eye can run down it, collapsing to
   stacked rows on a phone where a 9rem label column would eat the value. */
.kz-reel-rows { display: grid; grid-template-columns: 9.5rem 1fr; gap: .35rem .9rem; margin: 0; }
.kz-reel-rows dt {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-3); padding-top: .12rem;
}
.kz-reel-rows dd { margin: 0; font-size: var(--t-sm); color: var(--ink); }
.kz-reel-rows q { font-style: normal; font-weight: 500; }
.kz-reel-unknown { color: var(--ink-3); font-style: italic; cursor: help; }
.kz-reel-caption {
  margin-top: .35rem; padding: .5rem .6rem; background: var(--paper-2);
  border-left: 2px solid var(--rule); font-size: .78rem; color: var(--ink-2);
  max-height: 11rem; overflow: auto;
}
.kz-reel-rank { margin: .6rem 0 0; font-size: .74rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: .25rem; align-items: baseline; }
.kz-reel-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }

@media (max-width: 640px) {
  .kz-reel-rows { grid-template-columns: 1fr; gap: .1rem; }
  .kz-reel-rows dd { margin-bottom: .45rem; }
  .kz-reel-lead h2 { font-size: 1.4rem; }
  .kz-reel-acts .btn { flex: 1 1 auto; }
}

/* ══════════════════════════════════════════════════════════════════════════
   THE FEED — the client view
   ══════════════════════════════════════════════════════════════════════════
   Designed at 390px FIRST and widened afterwards, because on a phone this screen
   IS the feed and not a page with a feed on it: one reel per screen, snap, and
   the two buttons pinned where a thumb already is.

   TWO SKINS, ONE SLIDE. A slide with no media is a paper card and the
   outperformance multiple is the picture — that is the register the rest of the
   app is in, and most Instagram cards land here because we do not mirror
   anybody's media (lib/reel-feed.js header, docs/scraping-options.md). A slide
   that HAS media (a YouTube player, or the platform's own thumbnail hotlinked)
   goes full bleed, and `.has-media` redefines the ink tokens inside that slide
   so the same markup reads white-on-scrim. It is set on the image's `load`
   rather than on mount, so an expired signature can never leave white text on
   white paper.

   `dvh`, not `vh`: on iOS Safari `100vh` is the tallest the viewport ever gets,
   so a full-height snap slide sits a toolbar's worth below the fold and the
   buttons are unreachable. JS measures the real height on top of this (kzWireFeed
   `fit`); these are the fallbacks for the first frame.

   44px IS A FLOOR, NOT A TARGET. Both actions are 50px tall here. A tap that
   misses on a moving feed costs a scroll position.
   ------------------------------------------------------------------------ */

/* ── FULL BLEED ───────────────────────────────────────────────────────────
   knockz.js puts `kz-feed` on <body> while a rail is painted on the portal's two feed screens
   (kzFeedChrome) and takes it off for anything else. Under it, on a phone, the page IS the rail:
   the topbar (date, title, ?) goes — the title is the rail entry that is lit and the date is
   furniture — the view's padding goes, and the document never scrolls, so the thumb is always in
   the feed. What is left above the slide is the 56px header with the menu. Measured before:
   the slide started at y=269 and was 64% of the screen. On a desktop the topbar stays (it is
   one line and the founder needs the title) and the rail becomes a phone-proportioned column. */
@media (max-width: 900px) {
  body.kz-feed { overflow: hidden; height: 100dvh; }
  body.kz-feed .main { overflow: hidden; }
  body.kz-feed .topbar { display: none; }
  body.kz-feed .view { padding: 0; }
  body.kz-feed .kzf { margin: 0; }
  body.kz-feed .kzf-keys { display: none; }
}

/* ── the bar: floated over the top of the rail ────────────────────────────
   Two places to go, one thing waiting on them, sound, and where they are. It sits IN the same
   grid cell as the rail (see .kzf) so it overlays the slide at the rail's own width on every
   screen, and every chip carries its own dark disc — the same disc as the slide's controls — so
   it reads on a video, a poster and a paper card alike. The row itself lets taps through to
   the slide; only the chips catch them. The empty state's bar (`kzf-bar-flat`) is in the flow
   of the page in paper and ink, because there is no rail to float over. */
.kzf-bar {
  display: flex; align-items: center; gap: .35rem; flex-wrap: wrap;
  padding: .55rem .75rem;
}
/* ABOVE THE VIDEO, NOT ON IT (2026-10-02). The bar used to float over the top of the rail, and
   the owner photographed it on a playing Short: the chips sat on top of YouTube's own title line
   (the channel name read as "C…m…Dav" through them) and the row ran wider than the 430px column.
   The player's title strip is YouTube's and cannot be covered or moved, so the bar moved instead:
   its own row, directly above the rail, exactly the rail's width (`--kzf-w`, set by kzWireFeed
   `fit`), in the rail's own near-black so it reads as the top of the same object. It wraps rather
   than overflowing, and `fit` measures the rail from below it, so a second row costs the slide a
   few pixels and never covers anything. */
.kzf > .kzf-bar {
  grid-area: 1 / 1; justify-self: center; box-sizing: border-box;
  width: var(--kzf-w, 100%); max-width: 100%;
  gap: .3rem; padding: .4rem .5rem;
  background: #0b1015;
}
.kzf > .kzf-bar > * { flex: 0 0 auto; }
.kzf-pos {
  margin-left: auto; font-size: var(--t-xs); color: var(--ink-3);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; padding: 0 .1rem;
}
.kzf-pos i { font-style: normal; padding: 0 .12rem; }
.kzf > .kzf-bar .kzf-pos { color: rgba(255,255,255,.82); text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.kzf-bar-flat { padding: .45rem 0 .6rem; }

/* One chip shape for every number in the bar. They are buttons because every one
   of them is a place to go — the saved room, the board — and a number you cannot
   act on is a number that should not be in a bar. */
.kzf-chip, .kzf-sound {
  display: inline-flex; align-items: center; gap: .3rem;
  /* 44px, not 34. These are navigation and not the two actions, so the temptation is to make
     them small and give the feed the pixels back — but they are tapped with the same thumb on the
     same moving screen, and 44 is the floor for the whole surface rather than for the buttons we
     happen to care most about. */
  min-height: 44px; padding: .3rem .7rem;
  border: 1px solid var(--rule-strong); border-radius: 999px;
  background: var(--paper); color: var(--ink-2);
  font: inherit; font-size: var(--t-sm); cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kzf-chip b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.kzf-chip:hover, .kzf-sound:hover { border-color: var(--accent); color: var(--accent-ink); }
.kzf-chip:focus-visible, .kzf-sound:focus-visible,
.kzf-do:focus-visible, .kzf-save:focus-visible, .kzf-made:focus-visible, .kzf-out:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.kzf-chip-quiet { color: var(--ink-3); border-color: var(--rule); }
/* Something is actually happening on the box right now. A dot, not a sentence. */
.kzf-chip.is-live { border-color: var(--accent); color: var(--accent-ink); }
/* Something is waiting on the person reading this. AZURE, not red: it is a tap, not a fault. */
.kzf-chip.is-you { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.kzf-sound { gap: .35rem; }
.kzf-sound .kzf-ico { width: 18px; height: 18px; fill: currentColor; display: none; }
.kzf-sound[aria-pressed="true"] .kzf-ico-on, .kzf-sound[aria-pressed="false"] .kzf-ico-off { display: block; }
.kzf-sound[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
/* Over the rail: dark discs, white ink, the accent only as a border. */
.kzf > .kzf-bar .kzf-chip, .kzf > .kzf-bar .kzf-sound {
  background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.26);
  padding: .25rem .6rem; font-size: var(--t-xs);
}
/* Sound is its glyph in the bar at every width — the label is the button's aria-label. It is the
   one chip that is the same on every screen, and the word was what pushed the row past 430px. */
.kzf > .kzf-bar .kzf-sound span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kzf > .kzf-bar .kzf-sound { width: 44px; padding: 0; justify-content: center; }
.kzf > .kzf-bar .kzf-chip b { color: #fff; }
.kzf > .kzf-bar .kzf-chip:hover, .kzf > .kzf-bar .kzf-sound:hover { background: rgba(8,12,16,.8); border-color: rgba(255,255,255,.55); color: #fff; }
.kzf > .kzf-bar .kzf-chip.is-live, .kzf > .kzf-bar .kzf-sound[aria-pressed="true"] { border-color: var(--accent); color: #fff; }
.kzf > .kzf-bar .kzf-chip.is-you { background: rgba(19,151,212,.55); border-color: var(--accent); color: #fff; }
.kzf > .kzf-bar .kzf-chip-quiet { color: rgba(255,255,255,.8); }
.kzf > .kzf-bar .kzf-chip:focus-visible, .kzf > .kzf-bar .kzf-sound:focus-visible { outline-color: #fff; }
/* A narrow phone: the sound chip is its glyph, and the counter yields to a "needs you" chip. */
@media (max-width: 420px) {
  .kzf > .kzf-bar { gap: .25rem; padding: .35rem .4rem; }
  .kzf > .kzf-bar .kzf-chip { padding: .2rem .5rem; }
}

.kzf-dot {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: live 1.6s var(--ease) infinite;
}

/* ── the rail ─────────────────────────────────────────────────────────── */

/* One grid cell holds the bar and the rail, so the bar floats over the rail at exactly the
   rail's width — the phone's full width, the desktop's 9:16 column — without a wrapper. */
.kzf { margin: 0 calc(-1 * var(--s-4)); display: grid; grid-template-columns: 100%; justify-content: center; }
.kzf-rail {
  grid-area: 2 / 1;
  height: calc(100dvh - 3.5rem);
  overflow-y: auto; overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* Stops scroll chaining, so the page under the feed does not move while a thumb
     is inside it. kzWireFeed's `fit` is what keeps the page itself reachable. */
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: var(--paper-2);
  /* pan-y, not auto: vertical is the browser's scroll, HORIZONTAL is ours — without this the
     browser claims a sideways drag as a pan, fires pointercancel, and the swipe-left pass in
     knockz.js can never complete on a phone. The callout/selection lines stop a half-second hold
     from also popping the copy menu on iOS. */
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
.kzf-rail::-webkit-scrollbar { width: 0; height: 0; }
.kzf-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.kzf-slide {
  position: relative; isolation: isolate;
  height: calc(100dvh - 3.5rem);
  scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s-4);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}

/* ── the media layer ─────────────────────────────────────────────────────
   Absolute and behind everything, so a slide with a 9:16 poster and a slide with
   a 16:9 one look the same from the outside: `cover` crops, and the crop is
   always the middle, which is where a Reel puts its subject. */
.kzf-media { position: absolute; inset: 0; z-index: 0; background: #0b1015; opacity: 0; }
.kzf-slide.has-media .kzf-media { opacity: 1; }
.kzf-poster { width: 100%; height: 100%; object-fit: cover; display: block; }
/* THE FRAME IS THE 9:16 RECTANGLE THAT COVERS THE SLIDE. YouTube's player takes the aspect of the
   frame it is given and a Short inside a 9:16 frame fills it edge to edge — no letterbox, no
   preview furniture. The slide is never exactly 9:16 (a phone is taller, a squat window is
   wider), so kzWireFeed's `fit` works out the covering rectangle and writes the four numbers
   here; the overflow is clipped by `.kzf-slide`. The frame is this size before AND during
   playback, so nothing resizes on play. The 178%/-39% stretch that used to live here assumed a
   16:9 frame and is what stretched a Short to 178% of a landscape box on a desktop. */
.kzf-media iframe {
  position: absolute; border: 0;
  width: var(--kzf-iw, 100%); height: var(--kzf-ih, 100%);
  left: var(--kzf-ix, 0); top: var(--kzf-iy, 0);
}
/* THE FRAME TAKES NO POINTER (2026-10-02). With the pointer resting on it, YouTube's player draws
   its own hover chrome — a large ❚❚ in the middle of the picture and the title strip across the
   top — and on a desktop the pointer is ALWAYS resting on it, so the owner saw a pause glyph sat
   permanently on a playing reel next to our own Pause in the corner. Nothing is drawn over the
   player to hide that; the frame simply never hears the pointer, so it never draws it. Tap and
   click are ours instead (kzWireFeed: a tap anywhere off the buttons toggles play over the
   documented API, Space does the same, the corner button is the labelled control) and the ↗ in
   the action row is the way to the original on YouTube. */
.kzf-media iframe { pointer-events: none; }
/* The tap's answer: a glyph that flashes in the middle for well under a second and is gone —
   never there while a reel simply plays. Ours, sized like the player's, on its own dark disc. */
.kzf-flash {
  position: absolute; left: 50%; top: 45%; z-index: 3;
  width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,12,16,.55); color: #fff; pointer-events: none;
  opacity: 0; transform: scale(.85);
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.kzf-flash .kzf-ico { width: 34px; height: 34px; }
.kzf-flash.is-on { opacity: 1; transform: scale(1); }
.kzf-flash[data-kzf-flash="paused"] .kzf-ico-pause,
.kzf-flash[data-kzf-flash="playing"] .kzf-ico-play { display: block; }
/* The first slide the viewer has had before: one honest line, just above the slide's own
   controls — low, so it never sits on the player's title strip at the top of the frame. */
.kzf-again {
  position: relative; z-index: 2; margin: 0 0 .6rem; padding: .7rem .85rem;
  border-radius: var(--radius); background: rgba(8,12,16,.72); color: #fff;
  font-size: var(--t-sm); line-height: 1.4;
}
.kzf-slide:not(.has-media) .kzf-again { background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); }
.kzf-again b { display: block; font-size: var(--t-base, 1rem); margin-bottom: .15rem; }
.kzf-scrim { position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; }
.kzf-slide.has-media .kzf-scrim {
  opacity: 1;
  background: linear-gradient(180deg, rgba(4,8,12,.55) 0, rgba(4,8,12,.08) 32%, rgba(4,8,12,.72) 74%, rgba(4,8,12,.92) 100%);
}

/* THE ONE PLACE THE TOKENS ARE REDEFINED. Over media the surface is a photograph,
   so ink has to be light — and doing it with the tokens means every rule below is
   written once and reads correctly on both skins. */
.kzf-slide.has-media {
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,.86);
  --ink-3: rgba(255,255,255,.74);   /* the quietest ink on the busiest background: not below .72 */
  --rule: rgba(255,255,255,.22);
  --rule-strong: rgba(255,255,255,.34);
  --paper: rgba(255,255,255,.12);
  --paper-2: rgba(255,255,255,.1);
}

/* ── the player's own controls: hidden, and there ─────────────────────────
   Pause/play and sound, on a YouTube slide only. The row is IN THE LAYOUT at all
   times — 44px, right-aligned, just above the caption block — and only its
   opacity changes, so nothing moves when it appears or goes. knockz.js adds
   `is-shown` for two seconds when the controls are wanted (a slide coming on
   screen, a touch or a mouse on our part of the slide, the player changing
   state); a paused reel and a focused control keep it. The buttons stay real at
   opacity 0: in the tab order, in the accessibility tree, and acting on the
   first tap, because they sit in one fixed spot and a pause is harmless. Their
   own dark disc is what keeps them legible on any frame the scrim has not
   reached, and it never covers more than two 44px circles of the video. */
.kzf-ctl {
  position: relative; z-index: 2;
  display: flex; justify-content: flex-end; align-items: center; gap: .5rem;
  min-height: 44px; margin-bottom: .6rem;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.kzf-ctl.is-shown, .kzf-ctl:focus-within, .kzf-ctl[data-kzf-mode="paused"] { opacity: 1; }
.kzf-ctl-btn {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3); background: rgba(8,12,16,.58); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kzf-ctl-btn:hover { background: rgba(8,12,16,.8); border-color: rgba(255,255,255,.55); }
.kzf-ctl-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kzf-ico { width: 22px; height: 22px; fill: currentColor; display: none; }
/* One glyph per state, picked by CSS from the attributes knockz.js keeps true. */
.kzf-ctl[data-kzf-mode="playing"] .kzf-ico-pause,
.kzf-ctl:not([data-kzf-mode="playing"]) .kzf-ico-play,
.kzf-ctl-mute[aria-pressed="true"] .kzf-ico-on,
.kzf-ctl-mute[aria-pressed="false"] .kzf-ico-off { display: block; }
/* Reduced motion: the row is or is not. No fade either way. */

.kzf-body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .55rem; }

.kzf-who {
  margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem;
  font-size: var(--t-sm); font-weight: 600; color: var(--ink);
}
/* Platform, age, format: the sans at 12.5px, sentence case. They were 11px mono caps at the
   lowest ink on a video — the smallest, hardest text in the app on the busiest background.
   Mono is for ids and timestamps, not for words. */
.kzf-who span { font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); text-transform: none; }
.kzf-flag {
  font-size: var(--t-xs); font-weight: 500;
  color: var(--ink-3); border: 1px solid var(--rule); border-radius: var(--radius-xs);
  padding: .05rem .35rem; cursor: help;
}

/* The hero. The multiple is the entire thesis of this feed, so it is the biggest
   type in the app — the number IS the picture on a slide with no media. */
.kzf-hero { margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.kzf-hero b {
  font-family: var(--serif); font-weight: 600; line-height: .92; color: var(--ink);
  font-size: clamp(2.6rem, 15vw, 4.4rem); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.kzf-hero span { font-size: var(--t-sm); color: var(--ink-2); }
.kzf-hero-none b { font-size: clamp(1.5rem, 7vw, 2.1rem); color: var(--ink-3); font-style: italic; }
/* "Why this one" — one quiet line under the hero (lib/feed-rank.js whyLine). */
.kzf-why {
  margin: 0; padding: 0; align-self: stretch; text-align: left; text-indent: 0;
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
/* Something wider centres paragraphs with a max-width; this line sits flush under the hero. */
.kzf-body .kzf-why { margin: 0; max-width: none; margin-inline: 0; }

.kzf-hook {
  margin: 0; padding-left: .7rem; border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: clamp(1.05rem, 4.6vw, 1.45rem);
  line-height: 1.3; color: var(--ink);
  /* Four lines is a hook; nine is a caption. Anything longer is clipped rather
     than allowed to push the buttons off the slide. */
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.kzf-format { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.kzf-mark { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink); }
.kzf-slide.has-media .kzf-mark { color: #fff; }
/* Words that just changed rise in, once. */
.kzf-mark.is-fresh { animation: rise var(--dur-3) var(--ease) both; }
/* The line under a reel the player could not show. Plain ink, a real link; no red, because a
   video that is private is not a fault of theirs or ours. */
.kzf-dead { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.kzf-dead a { color: var(--ink); font-weight: 600; }
.kzf-slide.has-media .kzf-dead a { color: #fff; }

/* ── the two actions ─────────────────────────────────────────────────────
   Two, and only two. "Make me one" is the primary and it is the wide one,
   because it is the button this whole product exists to get pressed. */
.kzf-acts {
  position: relative; z-index: 2;
  display: flex; align-items: stretch; gap: .5rem; margin-top: .9rem;
}
.kzf-do, .kzf-save, .kzf-made, .kzf-out {
  min-height: 50px; border-radius: 999px;
  font: inherit; font-size: var(--t-md); font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.kzf-do { flex: 1 1 auto; padding: 0 1rem; border: 0; background: var(--accent); color: #fff; }
.kzf-do:hover { background: var(--accent-ink); }
.kzf-do:active { transform: scale(.985); }
.kzf-do:disabled, .kzf-save:disabled { opacity: .7; cursor: progress; }
/* A reel the player could not show: the primary is off, and it looks off. */
.kzf-slide[data-kzf-dead="1"] .kzf-do { opacity: .4; cursor: not-allowed; }

.kzf-save {
  flex: 0 0 auto; min-width: 104px; padding: 0 .9rem;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
}
.kzf-save:hover { border-color: var(--accent); color: var(--accent-ink); }
.kzf-save[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
.kzf-slide.has-media .kzf-save { background: rgba(255,255,255,.14); }
.kzf-slide.has-media .kzf-save[aria-pressed="true"] { border-color: #fff; color: #fff; }
/* Already being made: ONE hairline pill, the width of the row, and it goes to the board. */
.kzf-made {
  flex: 1 1 auto; padding: 0 1rem;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
}
.kzf-made:hover { border-color: var(--accent); color: var(--accent-ink); }
.kzf-slide.has-media .kzf-made { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
/* The control that just changed presses once (--dur-1). */
.kzf-save.is-fresh, .kzf-made.is-fresh { animation: press var(--dur-1) var(--ease) both; }

/* The link out is deliberately not one of the two: it is an affordance, not an
   action, and it is sized as one. */
.kzf-out {
  flex: 0 0 auto; width: 50px; font-size: var(--t-lg); font-weight: 400;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
}
.kzf-out:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ── the pass: a gesture on a phone, a real control on a keyboard ──────────
   "Not for me" is NOT a third button. It is clipped to nothing until it has
   keyboard focus, at which point it is a full-size pill in the row — a
   keyboard or screen-reader user gets a control that says what it does, and a
   sighted thumb on a phone sees two buttons and holds or swipes. Same
   handler as the gesture (knockz.js kzWireFeed `pass`). */
/* fix-b (2026-10-03): VISIBLE. The 1×1px version was invisible to every sighted client, so the
   only negative signal was a gesture nobody knew about. Now a 50px disc in the row, the thumb-down
   glyph, its words for a screen reader (and a tooltip); hold / swipe-left still pass too. */
.kzf-pass {
  flex: 0 0 auto; width: 50px; min-height: 50px; padding: 0; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-2);
  font: inherit; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kzf-pass-ico { width: 20px; height: 20px; fill: currentColor; display: block; }
.kzf-pass-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kzf-pass:hover { border-color: var(--accent); color: var(--accent-ink); }
.kzf-pass:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kzf-slide.has-media .kzf-pass, .kzf-slide.has-media .kzf-out { border-color: rgba(255,255,255,.4); color: #fff; }
.kzf-slide.has-media .kzf-pass:hover, .kzf-slide.has-media .kzf-out:hover { border-color: #fff; color: #fff; background: rgba(8,12,16,.5); }
/* The slide on its way out. Transform and opacity only, and none of it under
   reduced motion. */
.kzf-slide.is-passing { opacity: .7; }
.kzf-slide.is-passed .kzf-body > :not(.kzf-mark),
.kzf-slide.is-passed .kzf-acts > :not(.kzf-pass) { opacity: .45; }
.kzf-slide.is-passed .kzf-acts .kzf-do, .kzf-slide.is-passed .kzf-acts .kzf-save { pointer-events: none; }
.kzf-slide { transition: opacity var(--dur) var(--ease); }
/* Undo, inside the mark. 44px tall although the mark is one line, because it
   is the one control on the slide a client will want to hit in a hurry. */
.kzf-undo {
  display: inline-flex; align-items: center; min-height: 44px; margin-left: .35rem;
  padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--rule-strong);
  background: var(--paper); color: var(--ink); font: inherit; font-size: var(--t-sm); font-weight: 600;
  cursor: pointer; vertical-align: middle;
}
.kzf-undo:hover { border-color: var(--accent); color: var(--accent-ink); }
.kzf-undo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The live dot beside a mark that describes work happening right now. */
.kzf-mark .kzf-dot { display: inline-block; margin-right: .4rem; vertical-align: middle; }

/* ── taste, on the last slide ──────────────────────────────────────────── */
.kzf-taste { max-width: 42ch; margin: .8rem auto 0; text-align: left; }
.kzf-taste h4 { margin: 0 0 .15rem; font-family: var(--serif); font-size: var(--t-lg); color: var(--ink); text-align: center; }
.kzf-taste > p { margin: 0 0 .6rem; text-align: center; }
.kzf-taste-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.kzf-taste-row {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .35rem 0; border-top: 1px solid var(--rule);
}
.kzf-taste-row:first-child { border-top: 0; }
.kzf-taste-name { display: flex; flex-direction: column; min-width: 0; font-size: var(--t-sm); color: var(--ink); text-align: left; }
.kzf-taste-name i { font-style: normal; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.kzf-taste-votes { display: inline-flex; gap: .3rem; flex: 0 0 auto; }
.kzf-taste-btn {
  min-height: 44px; min-width: 64px; padding: 0 .8rem; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink-2);
  font: inherit; font-size: var(--t-sm); font-weight: 600; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kzf-taste-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.kzf-taste-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kzf-taste-btn[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.kzf-taste-btn[data-kzf-vote="-1"][aria-pressed="true"] { background: var(--ink-2); border-color: var(--ink-2); }
.kzf-taste-btn:disabled { opacity: .6; cursor: progress; }
.kzf-taste-note { min-height: 1.4em; margin: .5rem 0 0 !important; text-align: center; font-size: var(--t-sm); color: var(--accent-ink); }

/* One line on "what we're making" while a chain is running for this client. */
.kz-q-live {
  display: flex; align-items: center; gap: .45rem; margin: -.25rem 0 var(--gap);
  font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink);
}

/* ── the last slide, and the empty state ─────────────────────────────── */

.kzf-slide-end { justify-content: center; text-align: center; background: var(--paper-2); }
.kzf-endbody { align-items: center; }
.kzf-slide-end h3 { margin: 0 0 .5rem; font-family: var(--serif); font-size: var(--t-xl); color: var(--ink); }
.kzf-slide-end p { margin: 0 auto .8rem; max-width: 36ch; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; }
.kzf-endacts { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.kzf-why { max-width: 42ch; margin: .6rem auto 0; text-align: left; }
.kzf-why > summary {
  cursor: pointer; font-size: var(--t-sm); color: var(--ink-2);
  list-style: none; padding: .45rem 0; text-align: center;
}
.kzf-why > summary::-webkit-details-marker { display: none; }
.kzf-why > summary:hover { color: var(--accent-ink); }
.kzf-why > div {
  border-top: 1px solid var(--rule); padding-top: .6rem;
  font-size: var(--t-sm); color: var(--ink-2); line-height: 1.55;
}
.kzf-why p { margin: 0 0 .5rem; }
.kzf-why p:last-child { margin-bottom: 0; }
.kzf-why b { color: var(--ink); font-weight: 600; }
.kzf-terms { display: flex; flex-wrap: wrap; gap: .25rem; }
.kzf-terms code {
  font-family: var(--mono); font-size: var(--t-xs); background: var(--wash);
  border-radius: var(--radius-xs); padding: .05rem .3rem; color: var(--ink-2);
}

/* THE EMPTY STATE IS CALM, NOT AN ERROR. No red, no icon, no "oops" — a heading,
   one sentence, and a live dot saying the work is happening without them. */
.kzf-empty {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper);
  padding: var(--s-6) var(--s-4); text-align: center;
}
.kzf-empty h3 { margin: 0 0 .5rem; font-family: var(--serif); font-size: var(--t-xl); color: var(--ink); }
.kzf-empty p { margin: 0 auto .8rem; max-width: 46ch; font-size: var(--t-base); color: var(--ink-2); line-height: 1.55; }
.kzf-empty p:last-child { margin-bottom: 0; }
.kzf-working {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: var(--t-sm) !important; color: var(--accent-ink) !important;
}

.kzf-keys {
  margin: .5rem 0 0; text-align: center;
  font-size: var(--t-xs); color: var(--ink-3);
}
.kzf-keys kbd {
  font-family: var(--mono); font-size: 10px; border: 1px solid var(--rule-strong);
  border-radius: 4px; padding: 0 .25rem; margin: 0 .05rem; color: var(--ink-2);
}
/* A phone has no keyboard and no hover. The line is noise on one. */
/* ── the loading slide, and its button when a page fails ──────────────────
   Quiet on purpose: a dot, no words, the same paper as the end card. The button
   only exists after a failed page (or with no IntersectionObserver), is a full
   44px target, and has the same focus ring as every other control on the rail. */
.kzf-slide-more { justify-content: center; align-items: center; background: var(--paper-2); }
.kzf-morebody { align-items: center; justify-content: center; min-height: 48px; }
.kzf-more-btn {
  min-height: 48px; padding: 0 1.2rem; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  font: inherit; font-size: var(--t-md); font-weight: 600; cursor: pointer;
}
.kzf-more-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.kzf-more-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (hover: none) { .kzf-keys { display: none; } }

@media (min-width: 900px) {
  /* A DESKTOP GETS A PHONE. The rail is a centred 9:16 column at most 430px wide (kzWireFeed
     `fit` sets the exact width and height from the window), with a hairline and the house
     radius so it reads as the object it is. A 1,115×701 box with the Short stretched across it
     was a video in a letterbox, and it is the size the founder previews the client's product
     at most. The bar floats over the column's top edge, the same as on a phone. */
  .kzf { margin: 0; grid-template-columns: auto; }
  .kzf-rail { width: min(430px, calc((100dvh - 12rem) * 9 / 16)); border: 1px solid var(--rule); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
  .kzf > .kzf-bar { border: 1px solid var(--rule); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
  .kzf-hero b { font-size: clamp(2.6rem, 6vw, 3.6rem); }
}

/* ── reduced motion ──────────────────────────────────────────────────────
   Handled by the one global block at the end of this file — and by kzWireFeed, which does not
   autoplay at all under it, which is the half of this that actually matters. A play button
   appears on the slide instead. */

:root[data-theme="dark"] .kzf-do { color: #06212f; }
:root[data-theme="dark"] .kzf-taste-btn[aria-pressed="true"] { color: #06212f; }
:root[data-theme="dark"] .kzf-taste-btn[data-kzf-vote="-1"][aria-pressed="true"] { color: var(--bg); }

/* ── the glance strip on "what we're making" ─────────────────────────────
   Three numbers, not a sentence. `is-you` is the only loud one, because the
   owner's test for that screen is finding what needs a person in seconds. */
.kz-glance {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: .5rem; margin-bottom: var(--gap);
}
.kz-glance-tile {
  border: 1px solid var(--rule); border-radius: var(--radius-sm);
  background: var(--paper); padding: .7rem .8rem;
  display: flex; flex-direction: column; gap: .1rem;
}
.kz-glance-tile b {
  font-family: var(--serif); font-size: var(--t-2xl); line-height: 1;
  color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600;
}
.kz-glance-tile span {
  display: flex; align-items: center; gap: .35rem;
  font-size: var(--t-sm); color: var(--ink-2);
}
/* "Your move" is azure — it is the thing to tap, not a fault — and it is the only tile with a
   filled edge, so it is loud by weight and not by hue. */
.kz-glance-tile.is-you { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.kz-glance-tile.is-you b, .kz-glance-tile.is-you span { color: var(--accent-ink); }
.kz-glance-tile.is-live { border-color: var(--accent); }
.kz-glance-tile.is-live b, .kz-glance-tile.is-live span { color: var(--accent-ink); }
.kz-glance-tile.is-done b, .kz-glance-tile.is-done span { color: var(--ink-3); }
/* Where a script's substance came from. Four words on the stage line, and softer
   again when one of the fields behind it is still an unchecked draft. */
.kz-q-from-intake { color: var(--accent-ink); }
.kz-q-from-intake[data-soft="1"] { color: var(--warn); }

/* ══════════════════════════════════════════════════════════════════════════
   WHAT WE'RE MAKING — the autopilot's board
   ══════════════════════════════════════════════════════════════════════════
   Ordered by whose move it is, not by stage: the three things that need the
   client are at the top and everything the machine is doing on its own is a
   quiet list at the bottom. The CSS follows that — the top three sections get
   card weight and the list gets none.
   ------------------------------------------------------------------------ */

.kz-q-head { margin-bottom: var(--gap); }
.kz-q-head h2 {
  margin: 0 0 .25rem; font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.4rem, 5vw, var(--t-2xl)); line-height: 1.15; color: var(--ink);
}
.kz-q-sub { margin: 0; font-size: var(--t-sm); color: var(--ink-2); }

.kz-q-staff {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  padding: .55rem .75rem; margin-bottom: var(--gap);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-sm);
  font-size: var(--t-sm);
}
.kz-q-staff p { margin: 0; color: var(--ink-2); }

/* THE QUESTIONS. One form; each question is a card so it is obvious they are
   separate answers, and the skip is a checkbox rather than a second button
   because skipping all three in one go has to be possible. */
.kz-q-form > .note { margin: 0 0 .9rem; max-width: 62ch; }
.kz-q-ask {
  border: 1px solid var(--rule); border-radius: var(--radius); padding: .9rem 1rem 1rem;
  margin: 0 0 .8rem; background: var(--paper);
}
.kz-q-ask legend {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-3); padding: 0 .35rem;
}
.kz-q-forhook {
  margin: 0 0 .4rem; padding-left: .6rem; border-left: 2px solid var(--rule-strong);
  font-family: var(--serif); font-size: var(--t-md); color: var(--ink-2);
}
.kz-q-from { margin: 0 0 .6rem; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.kz-q-question {
  margin: 0 0 .6rem; font-size: var(--t-lg); line-height: 1.35; color: var(--ink);
  font-weight: 500; max-width: 54ch;
}
.kz-q-ask textarea {
  width: 100%; min-height: 4.5rem; resize: vertical;
  font: inherit; font-size: var(--t-base);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  padding: .55rem .6rem; background: var(--paper); color: var(--ink);
}
.kz-q-ask textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.kz-q-skip {
  display: flex; align-items: center; gap: .4rem; margin-top: .5rem;
  font-size: var(--t-xs); color: var(--ink-3);
}
.kz-q-acts { margin: 0; }

/* READY TO FILM and READY FOR YOUR YES. */
.kz-q-card {
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem;
  background: var(--paper); margin-bottom: .8rem;
}
.kz-q-approve { border-color: var(--accent); box-shadow: var(--shadow-lift); }
.kz-q-stage {
  margin: 0 0 .5rem; font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3);
}
.kz-q-hook {
  margin: 0 0 .7rem; padding-left: .7rem; border-left: 3px solid var(--accent);
  font-family: var(--serif); font-size: clamp(1.15rem, 4.5vw, 1.45rem);
  line-height: 1.25; color: var(--ink); font-weight: 500;
}
/* tony-r1: no list numbers — "2." beside a beat's "0:03" read as "2. 3 I talk…". The clock is the marker. */
.kz-q-beats { margin: 0 0 .7rem; padding-left: 0; list-style: none; display: grid; gap: .35rem; }
.kz-q-beats li { font-size: var(--t-base); color: var(--ink); line-height: 1.45; }
.kz-q-t {
  display: inline-block; min-width: 3.4rem; font-family: var(--mono);
  font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.kz-q-script { font-size: var(--t-base); color: var(--ink); line-height: 1.55; margin-bottom: .7rem; }
.kz-q-cta { margin: 0 0 .7rem; font-size: var(--t-sm); color: var(--ink-2); }
.kz-q-has { margin: 0 0 .7rem; font-size: var(--t-sm); color: var(--ink-2); }
.kz-q-cardacts { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; margin: 0; }
.kz-q-nopublish { margin: .6rem 0 0; font-size: var(--t-xs); color: var(--ink-3); }

/* EVERYTHING ELSE — a status, so it gets no card weight. Grouped under one sentence-case
   heading per stage (the stage is the group, never a label repeated on every row); a row is
   the hook, when, and a 44px Remove. */
.kz-q-group {
  margin: .9rem 0 .2rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink);
  display: flex; align-items: baseline; gap: .3rem;
}
.kz-q-group:first-child { margin-top: 0; }
.kz-q-group span { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.kz-q-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.kz-q-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "hook drop" "when drop" "why drop";
  gap: .1rem .8rem; align-items: center; padding: .45rem .2rem; border-bottom: 1px solid var(--rule);
  font-size: var(--t-sm);
}
.kz-q-row.is-parked { opacity: .78; }
.kz-q-rowhook { grid-area: hook; color: var(--ink); }
.kz-q-rowwhen { grid-area: when; font-size: var(--t-xs); color: var(--ink-3); }
.kz-q-why { grid-area: why; font-size: var(--t-xs); color: var(--ink-2); }
.kz-q-rowdrop {
  grid-area: drop; align-self: center; min-height: 44px; padding: 0 .75rem;
  font: inherit; font-size: var(--t-xs); font-weight: 600; color: var(--ink-2); cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: 999px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.kz-q-rowdrop:hover { color: var(--ink); border-color: var(--rule-strong); }
.kz-q-rowdrop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 640px) {
  .kz-q-cardacts .btn { flex: 1 1 auto; }
}
/* A hold on a post the client can still act on: the editor being off blocks the
   cut, not the filming, so this is a note under the script rather than a stage. */
.kz-q-hold {
  margin: .7rem 0 0; padding: .45rem .6rem;
  background: var(--warn-soft); color: var(--warn);
  border-radius: var(--radius-xs); font-size: var(--t-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE CLIENT SHELL (public/client.js, 2026-09-30) — one assistant, one tab
   per agent. Every tab is the same four things top to bottom: who (one line),
   what is in the works (one line, only if anything is), the chat, the work.
   Paper and ink, azure only on what can be pressed, 44px targets, the three
   durations. Nothing here is a new component: the chat is .ac-panel, the work
   is .ao-list, the strip borrows the feed's live dot.
   ═══════════════════════════════════════════════════════════════════════════ */
.cl-agent { display: grid; gap: var(--gap); }
.cl-agent-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .8rem; align-items: start; }
.cl-agent-head .ac-face-lg { width: 40px; height: 40px; font-size: 13px; margin-top: .15rem; }
.cl-agent-who { min-width: 0; }
.cl-agent-name { margin: 0; font-family: var(--serif); font-size: var(--t-lg); line-height: 1.2; letter-spacing: -.01em; }
.cl-agent-says { margin: .25rem 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; max-width: 60ch; }
.cl-agent-state { margin: .4rem 0 0; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-sm); color: var(--ink-3); }
.cl-agent-state .pipe-dot { width: 7px; height: 7px; }
.cl-agent-state[data-state="running"] .pipe-dot { background: var(--accent); animation: live 1.6s var(--ease) infinite; }
.cl-agent-state[data-state="produced"] .pipe-dot { background: var(--ink); }

/* The chat is open, not behind a button: the tab IS the agent. It is the one
   chat component (.ac-panel) filling the screen. The tab's own header already
   says who this is, so the panel's slim head keeps only Clear. */
.cl-chat .ac-head-name { display: none; }

.cl-agent-grid { display: grid; gap: var(--gap); align-items: start; }
.cl-made { margin-top: 0; }
@media (min-width: 1100px) {
  .cl-agent-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
}

/* "3 in the works · 1 ready to film · 1 for your yes →": ONE line, a button to
   the board. The count that needs the person is bold; when anything does, the
   whole line is azure, because it is a tap and not a fault. */
.cl-making-slot[hidden] { display: none; }
.cl-making {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: .55rem;
  width: 100%; min-height: 48px; padding: .55rem .9rem; text-align: left; cursor: pointer;
  font: inherit; font-size: var(--t-sm); color: var(--ink-2);
  background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cl-making:hover { border-color: var(--rule-strong); background: var(--wash); }
.cl-making:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-making .kzf-dot { color: var(--ink-3); }
.cl-making-n { font-weight: 600; color: var(--ink); white-space: nowrap; }
.cl-making-bits { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-making-bits b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-making-arrow { color: var(--ink-3); }
.cl-making.is-you { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.cl-making.is-you .kzf-dot, .cl-making.is-you .cl-making-arrow { color: var(--accent); }
.cl-making.is-you .cl-making-n, .cl-making.is-you .cl-making-bits b { color: var(--accent-ink); }
/* copytp: a make-me-one held on the client's details — the sentence and one button (client.js
   clNeedsHtml, knockz.js kzQueuePaint "waiting on your details"). A tap, not a fault: azure. */
.cl-held, .kz-q-held { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: var(--radius); }
.cl-held { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; padding: .7rem .9rem; margin-bottom: .5rem; }
.cl-held-say, .kz-q-held-say { margin: 0; flex: 1 1 14rem; min-width: 0; color: var(--accent-ink); font-weight: 600; line-height: 1.35; }
.kz-q-held-say { margin-bottom: .6rem; }
.cl-held-go, .kz-q-held [data-kz-q-needs] { min-height: 44px; }
@media (max-width: 520px) {
  .cl-making { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dot n arrow" "dot bits arrow"; row-gap: .1rem; }
  .cl-making .kzf-dot { grid-area: dot; }
  .cl-making-n { grid-area: n; }
  .cl-making-bits { grid-area: bits; white-space: normal; }
  .cl-making-arrow { grid-area: arrow; }
}

/* The Researcher's four faces, over the two that are pages (queue, ask). The
   feed and the shelf carry their own floating bar — one nav per screen. */
.cl-seg { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 var(--gap); }
.cl-seg-btn {
  display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: .3rem .85rem;
  font: inherit; font-size: var(--t-sm); cursor: pointer;
  color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 999px;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cl-seg-btn b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-seg-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.cl-seg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-seg-btn[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cl-seg-btn[aria-current="true"] b { color: var(--paper); }
.cl-seg-you { font-size: var(--t-xs); font-weight: 600; color: var(--accent-ink); padding-left: .2rem; }
.cl-seg-btn[aria-current="true"] .cl-seg-you { color: var(--paper); opacity: .85; }

/* A1 AI's landing: one greeting, one sentence about how it is going, at most
   two things that need them, then the composer. */
.cl-hello { display: grid; gap: .3rem; margin-bottom: var(--gap); }
.cl-hello .hero-line { max-width: 34ch; }
.cl-needs { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .5rem; }
.cl-need {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: center;
  border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius);
  background: var(--paper-2); padding: .65rem .85rem;
}
.cl-need-body { display: grid; gap: .1rem; min-width: 0; }
.cl-need-body b { font-size: 14px; color: var(--ink); }
.cl-need-why { font-size: 12.5px; color: var(--ink-3); }
.cl-need .btn { min-height: 40px; }
@media (max-width: 520px) {
  .cl-need { grid-template-columns: auto minmax(0, 1fr); }
  .cl-need .btn { grid-column: 1 / -1; justify-self: start; }
}
/* ── the flow (public/client.js THE FLOW) ──────────────────────────────────
   One video, eight steps. The strip is a row of small dots with a word under
   each: done is ink, here is azure (it is a button to where you are), to-do
   is a hairline. It is 44px tall at every width and scrolls sideways on a
   phone rather than wrapping into two rows — a wrapped strip reads as two
   flows. The Next is the one azure button on the screen; everything else on
   these tabs is paper and ink. */
.cl-flow-slot:empty { display: none; }
.cl-flow { display: grid; gap: .35rem; }
.cl-flow-steps {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 0; align-items: stretch;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cl-flow-steps::-webkit-scrollbar { display: none; }
.cl-flow-item { flex: 1 1 0; display: flex; position: relative; min-width: 42px; }
/* the line between steps runs under the dots, so the eye reads a sequence */
.cl-flow-item:not(:last-child)::after {
  content: ""; position: absolute; top: 15px; left: 50%; right: -50%; height: 1px; background: var(--rule-strong);
}
.cl-flow-step {
  position: relative; z-index: 1; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: .3rem;
  min-height: 44px; padding: .5rem .3rem .2rem; border: 0; background: none; color: var(--ink-3);
  font: inherit; font-size: 10.5px; font-weight: 550; letter-spacing: 0; cursor: pointer; border-radius: var(--radius-sm);
  min-width: 0; transition: color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.cl-flow-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 720px) { .cl-flow-step { font-size: var(--t-xs); letter-spacing: .01em; } }
/* the chat sits UNDER the work on these tabs, so it need not claim a whole screen */
.cl-agent-grid .cl-work + .cl-chat .ac-fill { min-height: min(calc(100dvh - 11rem), 32rem); }
.cl-flow-step.is-still { cursor: default; }
.cl-flow-dot {
  display: block; width: 11px; height: 11px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid var(--rule-strong); background: var(--paper);
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.cl-flow-step[data-state="done"] { color: var(--ink-2); }
.cl-flow-step[data-state="done"] .cl-flow-dot { background: var(--ink); border-color: var(--ink); }
.cl-flow-step[data-state="here"] { color: var(--accent-ink); font-weight: 650; }
.cl-flow-step[data-state="here"] .cl-flow-dot { background: var(--accent); border-color: var(--accent); transform: scale(1.25); box-shadow: 0 0 0 4px var(--accent-soft); }
.cl-flow-step:not(.is-still):hover { color: var(--ink); background: var(--wash); }
.cl-flow-step:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cl-flow-line { margin: 0; font-size: var(--t-sm); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-flow-line b { color: var(--ink); font-weight: 600; }

/* the hand-off */
.cl-next { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-top: var(--gap); animation: rise var(--dur-3) var(--ease) both; }
.cl-next-btn { min-height: 44px; padding-inline: 1.1rem; font-size: 14px; font-weight: 600; border-radius: 999px; }
.cl-next-note { font-size: var(--t-sm); color: var(--ink-3); max-width: 46ch; line-height: 1.4; }
@media (max-width: 720px) {
  .cl-next-btn { width: 100%; }
}

/* a tab with no chat: the work takes the whole width */
@media (min-width: 1100px) {
  .cl-agent-grid-solo { grid-template-columns: minmax(0, 1fr); }
}
.cl-hint { margin: 0 0 .8rem; }
.cl-hint .linkish { font: inherit; color: var(--accent-ink); }

/* ── choosing: one button per option, pressed = chosen ───────────────────
   The chosen thing is marked structurally — an ink border on the card, a
   tick and the word — never colour alone, and pressing the same button
   again undoes it. 44px tall everywhere. */
.cl-choose {
  flex: none; min-height: 44px; min-width: 88px; padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.cl-choose:hover { border-color: var(--accent); color: var(--accent-ink); }
.cl-choose:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-choose[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cl-choose[aria-pressed="true"]:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--paper); }
.cl-pickset { margin-top: 0; }
.cl-picks { display: grid; gap: .6rem; }
.cl-pick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem .9rem; align-items: start;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: .8rem .9rem;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.cl-pick.is-picked, .cl-hook.is-picked, .cl-cap.is-picked, .cl-thumb.is-picked { border-color: var(--ink); background: var(--paper); }
.cl-pick-main { display: grid; gap: .25rem; min-width: 0; }
.cl-pick-meta { font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.cl-pick-title { font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.cl-pick-hook { font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.cl-pick-read { margin-top: .2rem; }
.cl-pick-read > summary { cursor: pointer; font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink); list-style: none; min-height: 32px; display: inline-flex; align-items: center; }
.cl-pick-read > summary::-webkit-details-marker { display: none; }
.cl-pick-read > summary::before { content: "▸"; font-size: 9px; margin-right: .35rem; transition: transform var(--dur-1) var(--ease); }
.cl-pick-read[open] > summary::before { transform: rotate(90deg); }
.cl-pick-read > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cl-pick-body { padding-top: .4rem; display: grid; gap: .5rem; }
.cl-beats { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cl-beats li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .1rem .6rem; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.cl-beat-t { font-size: 11px; color: var(--ink-3); padding-top: .2rem; }
.cl-beat-on { grid-column: 2; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.cl-script-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }
.cl-script-cta, .cl-script-notes { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.cl-script-cta .micro, .cl-script-notes .micro { margin-right: .3rem; }
@media (max-width: 560px) {
  .cl-pick { grid-template-columns: minmax(0, 1fr); }
  .cl-pick .cl-choose { justify-self: start; }
}

/* hooks: one line per opener, the angle as a small label */
.cl-hookgroup + .cl-hookgroup { margin-top: 1rem; }
.cl-hookgroup-title { margin: 0 0 .45rem; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cl-hooks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.cl-hook {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: .3rem .8rem; align-items: center;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: .6rem .8rem;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.cl-hook-angle { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 600; }
.cl-hook-text { font-size: 14px; line-height: 1.45; color: var(--ink); font-weight: 500; }
@media (max-width: 560px) {
  .cl-hook { grid-template-columns: minmax(0, 1fr); }
  .cl-hook .cl-choose { justify-self: start; }
}

/* ── thumbnails: the gallery ──────────────────────────────────────────── */
.cl-gallery-wrap { margin-top: 0; }
.cl-gallery-tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: stretch; margin: .2rem 0 .6rem; }
.cl-brief { flex: 1 1 320px; display: flex; gap: .4rem; min-width: 0; }
.cl-brief input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; font: inherit; font-size: 14px; padding: .5rem .8rem;
  border: 1px solid var(--rule-strong); border-radius: 999px; background: var(--paper); color: var(--ink);
}
.cl-brief input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cl-brief .btn { min-height: 44px; border-radius: 999px; white-space: nowrap; flex: none; }
.cl-upload { position: relative; display: inline-flex; align-items: center; min-height: 44px; border-radius: 999px; cursor: pointer; }
.cl-upload input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.cl-upload:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-gallery-why { margin: 0 0 .6rem; }
/* The uploaded photos, tap to choose which the next cover is made from. */
.cl-photos { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .6rem; }
.cl-photos[hidden] { display: none; }
.cl-photos-label { flex: 1 0 100%; margin: 0; }
.cl-photo { width: 48px; height: 48px; min-width: 44px; padding: 0; border: 2px solid var(--line, #ccc); border-radius: 10px; background: var(--paper); overflow: hidden; cursor: pointer; opacity: .55; }
.cl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-photo.is-on { border-color: var(--ink); opacity: 1; }
.cl-photo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-gallery { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.cl-gallery > .empty-box { grid-column: 1 / -1; }
.cl-thumb {
  margin: 0; display: grid; gap: .4rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: .5rem;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease); animation: rise var(--dur-3) var(--ease) both;
}
.cl-thumb-frame {
  aspect-ratio: 9 / 16; border-radius: var(--radius-xs); overflow: hidden; background: var(--wash); border: 1px solid var(--rule);
  display: grid; place-items: center; text-align: center; padding: .4rem;
}
.cl-thumb-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The cover viewer (public/lightbox.js, 2026-10-04). A thumbnail is a button that opens it. */
.cl-lb-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.cl-lb-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-ed-cover, .cl-shoot-cover { display: flex; align-items: center; gap: .6rem; margin: .4rem 0; }
.cl-ed-cover .cl-lb-open, .cl-shoot-cover .cl-lb-open { width: 72px; height: 128px; flex: none; border-radius: var(--radius); overflow: hidden; }
.cl-ed-cover img, .cl-shoot-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
html.cl-lb-on, html.cl-lb-on body { overflow: hidden; }
.cl-lb { position: fixed; inset: 0; z-index: 2100; background: rgba(0,0,0,.92); display: grid; place-items: center; animation: cl-lb-in var(--dur-2, .2s) ease-out; }
.cl-lb-stage { position: absolute; inset: 0; display: grid; place-items: center; padding: 56px 8px; overflow: auto; }
.cl-lb-img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: pinch-zoom; cursor: zoom-in; transition: transform var(--dur-2, .2s) ease; }
.cl-lb-img.is-zoomed { transform: scale(2); cursor: zoom-out; touch-action: pan-x pan-y pinch-zoom; }
.cl-lb-btn { position: absolute; min-width: 44px; min-height: 44px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.cl-lb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cl-lb-btn[hidden], .cl-lb-count[hidden] { display: none; }
.cl-lb-close { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
.cl-lb-prev { left: max(8px, env(safe-area-inset-left)); top: 50%; transform: translateY(-50%); }
.cl-lb-next { right: max(8px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); }
.cl-lb-count { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; margin: 0; text-align: center; color: rgba(255,255,255,.85); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
@keyframes cl-lb-in { from { opacity: 0; } to { opacity: 1; } }
/* Reduced motion: the file's one reduced-motion block (at the end) already zeroes this fade and the zoom transition. */
.cl-thumb-wait, .cl-thumb-fail { font-size: var(--t-sm); color: var(--ink-3); display: inline-flex; align-items: center; gap: .4rem; line-height: 1.4; }
.cl-thumb[data-status="failed"] .cl-thumb-frame { border-style: dashed; }
.cl-thumb figcaption { display: grid; gap: .1rem; min-width: 0; }
.cl-thumb-brief { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-thumb-meta { font-size: var(--t-xs); color: var(--ink-3); }
.cl-thumb .cl-choose { min-width: 0; width: 100%; }

/* ── captions: a video card, and the captions written for it ──────────── */
.cl-videos { margin-top: 0; display: grid; gap: .8rem; }
.cl-videos > .section-head { margin-bottom: 0; }
.cl-vcard {
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); padding: .8rem .9rem; display: grid; gap: .8rem; min-width: 0;
}
.cl-vcard.is-current { border-color: var(--rule-strong); box-shadow: var(--shadow); }
.cl-vcard-video { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: .8rem; align-items: start; }
.cl-vcard-thumb {
  aspect-ratio: 9 / 16; border-radius: var(--radius-xs); overflow: hidden; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; text-align: center; padding: .3rem; border: 1px solid var(--rule);
}
.cl-vcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-vcard-nothumb { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.25; }
.cl-vcard-facts { display: grid; gap: .2rem; min-width: 0; align-content: start; }
.cl-vcard-title { font-size: 15px; letter-spacing: -.01em; color: var(--ink); }
.cl-vcard-hook { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.cl-vcard-meta { font-size: var(--t-xs); color: var(--ink-3); }
.cl-vcard-meta b { color: var(--ink); }
.cl-vcard-picked { font-size: var(--t-sm); font-weight: 600; color: var(--ink); margin-top: .2rem; }
/* the strip of captions scrolls sideways, one card at a time, on every width —
   four full captions stacked was the tallest thing on the old screen */
.cl-capstrip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: .6rem;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px .4rem; margin: 0 -2px; scrollbar-width: thin;
}
.cl-cap {
  scroll-snap-align: start; display: grid; gap: .45rem; align-content: start;
  border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: .7rem .8rem; min-width: 0;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.cl-cap-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cl-cap-read > summary { list-style: none; cursor: pointer; display: grid; gap: .3rem; }
.cl-cap-read > summary::-webkit-details-marker { display: none; }
.cl-cap-read > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.cl-cap-text {
  margin: 0; font: inherit; font-size: 13px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden;
}
.cl-cap-read[open] .cl-cap-text { display: block; -webkit-line-clamp: unset; }
.cl-cap-more { font-size: var(--t-sm); font-weight: 600; color: var(--accent-ink); }
.cl-cap-tags { margin: 0; }
.cl-cap .cl-choose { justify-self: start; }

/* ── KPI: the goal, the sources, the cards ────────────────────────────── */
.cl-kpi { margin-top: 0; display: grid; gap: var(--gap); }
.cl-goal { display: grid; gap: .45rem; }
.cl-goal-n { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.cl-goal-n b { font-family: var(--serif); font-size: var(--t-2xl); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.1; }
.cl-goal-n span { font-size: 14px; color: var(--ink-2); }
.cl-goal-text { font-size: var(--t-xl) !important; }
.cl-goal-bar { height: 4px; border-radius: 999px; background: var(--rule); overflow: hidden; }
.cl-goal-bar i { display: block; height: 100%; background: var(--ink); border-radius: 999px; transition: width .5s var(--ease); }
.cl-goal-sub { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.cl-srcs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1rem; }
.cl-src { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--t-sm); color: var(--ink-3); }
.cl-src::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--rule-strong); box-sizing: border-box; }
.cl-src[data-on="yes"]::before { background: var(--ink); border-color: var(--ink); }
.cl-src-name { font-weight: 600; color: var(--ink-2); }
.cl-vgrid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.cl-vgrid > .empty-box { grid-column: 1 / -1; }
.cl-video {
  display: grid; gap: .5rem; align-content: start; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: .5rem;
  color: inherit; text-decoration: none; min-width: 0; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
  animation: rise var(--dur-3) var(--ease) both;
}
a.cl-video:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); }
a.cl-video:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-video-thumb {
  position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-xs); overflow: hidden; background: var(--ink); color: var(--paper);
  display: grid; place-items: center; text-align: center; padding: .4rem;
}
.cl-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cl-video-nothumb { font-size: 11px; font-weight: 600; line-height: 1.3; }
.cl-video-platform {
  position: absolute; top: .4rem; left: .4rem; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 999px; background: rgba(255,255,255,.92); color: #0f172a;
}
.cl-video-facts { display: grid; gap: .15rem; min-width: 0; padding: 0 .1rem .1rem; }
.cl-video-views { font-family: var(--serif); font-size: 22px; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); }
.cl-video-views span { font-family: var(--sans); font-size: 12px; letter-spacing: 0; color: var(--ink-3); font-weight: 500; margin-left: .2rem; }
.cl-video-title { font-family: var(--sans-emoji); font-size: 12.5px; color: var(--ink-2); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-video-stats { display: flex; flex-wrap: wrap; gap: .15rem .5rem; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cl-video-when { font-size: var(--t-xs); color: var(--ink-3); }

/* ── Scripter / Hooks: only what the client asked for (2026-10-02) ───────
   The staff-only "All drafts" switch, the "Client can't see" tag on the
   drafts a client is not served, and the make-me-one empty state. */
.cl-pickset .section-head { flex-wrap: wrap; gap: .4rem .8rem; }
.cl-drafts-toggle {
  margin-left: auto; min-height: 32px; padding: .25rem .7rem; border-radius: 999px;
  border: 1px dashed var(--rule-strong); background: transparent; color: var(--ink-2);
  font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.cl-drafts-toggle[aria-pressed="true"] { border-style: solid; border-color: var(--ink); color: var(--ink); }
.cl-drafts-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-staff-tag, .cl-staffonly {
  font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  padding: .05rem .4rem; border-radius: 999px; border: 1px solid var(--rule-strong); color: var(--ink-3);
}
.cl-staffonly { margin-left: .5rem; vertical-align: middle; font-weight: 500; }
.cl-pick.is-staffonly { border-style: dashed; opacity: .85; }
.cl-older { display: inline-flex; align-items: center; min-height: 40px; margin-top: .5rem; font: inherit; font-size: var(--t-sm); color: var(--accent-ink); }
.cl-empty-pick { display: grid; gap: .7rem; justify-items: start; }
.cl-empty-pick .btn { min-height: 44px; }

/* ── A1 AI history (2026-10-02): past conversations, reopen, carry on ────
   A slim bar in the chat head — the open conversation's title, History,
   New chat — and a list that drops under it. Same reading column as the
   thread, 44px rows, nothing that needs a second look. */
.ac-histbar { display: flex; align-items: center; gap: .4rem; width: 100%; min-width: 0; }
.ac-hist-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-weight: 600; }
.ac-histbtn {
  flex: none; font: inherit; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: 999px; padding: .35rem .8rem; min-height: 36px; cursor: pointer;
  transition: color var(--dur-1), border-color var(--dur-1), background var(--dur-1);
}
.ac-histbtn:hover { color: var(--ink); border-color: var(--ink-3); }
.ac-histbtn[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ac-histbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ac-hist {
  width: 100%; max-width: 48rem; margin: .4rem auto .6rem; border: 1px solid var(--rule); border-radius: var(--radius);
  background: var(--paper-2); padding: .5rem; max-height: min(55vh, 26rem); overflow: auto;
}
.ac-hist-note, .ac-hist-empty { margin: .25rem .4rem .5rem; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.4; }
.ac-hist-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.ac-hist-row { display: flex; align-items: stretch; gap: .2rem; border-radius: var(--radius-xs); }
.ac-hist-row.is-current { background: var(--paper); box-shadow: inset 0 0 0 1px var(--ink); }
.ac-hist-open {
  flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem; text-align: left; font: inherit; background: none; border: 0;
  padding: .5rem .6rem; min-height: 44px; border-radius: var(--radius-xs); cursor: pointer; color: var(--ink);
}
.ac-hist-open:hover { background: var(--wash); }
.ac-hist-open:focus-visible, .ac-hist-del:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ac-hist-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-hist-meta { font-size: var(--t-xs); color: var(--ink-3); }
.ac-hist-del {
  flex: none; width: 44px; min-height: 44px; font: inherit; font-size: 18px; line-height: 1; color: var(--ink-3);
  background: none; border: 0; border-radius: var(--radius-xs); cursor: pointer;
}
.ac-hist-del:hover { color: var(--ink); background: var(--wash); }
@media (max-width: 560px) {
  .ac-histbtn { padding-inline: .65rem; }
  .ac-hist { max-height: 60vh; }
}


/* ── Film + Edit: the client's raw upload and their cuts (2026-10-03) ──── */
.cl-edit .section-head { align-items: baseline; }
.cl-ed-upload { display: grid; gap: .5rem; padding: 1rem; border: 1px dashed var(--line); border-radius: 12px; margin-bottom: 1rem; background: var(--paper-2, transparent); }
.cl-ed-pick { justify-self: start; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; }
.cl-ed-pick:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.cl-ed-pick.is-disabled { opacity: .55; pointer-events: none; }
.cl-ed-progress[hidden], .cl-ed-ask[hidden] { display: none; }
.cl-ed-progress { display: grid; gap: .35rem; }
.cl-ed-stop { margin-left: .5rem; min-height: 32px; }
.cl-ed-bar { height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }
.cl-ed-bar > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width .3s ease; }
.cl-ed-bar.is-busy > i { width: 35%; animation: cl-ed-busy 1.6s ease-in-out infinite; }
@keyframes cl-ed-busy { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } }
.cl-ed-list { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.cl-ed-card { display: grid; gap: .5rem; align-content: start; align-self: start; padding: .85rem; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.cl-ed-badge { justify-self: start; font-size: .75rem; font-weight: 600; letter-spacing: .02em; padding: .15rem .55rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent-ink); }
.cl-ed-badge[data-state="ready"] { background: var(--ink); color: var(--paper, #fff); }
.cl-ed-badge[data-state="needs-look"] { background: var(--wash, #f1f5f9); color: var(--ink); border: 1px solid var(--ink-3); }
.cl-ed-when { font-size: .75rem; color: var(--ink-3); }
.cl-ed-title { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.cl-ed-player { position: relative; width: 100%; aspect-ratio: 9 / 16; max-height: 70vh; background: #000; border-radius: 10px; overflow: hidden; }
.cl-ed-player video { width: 100%; height: 100%; object-fit: contain; display: block; }
.cl-ed-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.cl-ed-actions .btn, .cl-ed-actions .cl-choose { min-height: 40px; }
.cl-ed-fb { margin: 0; font-size: .875rem; color: var(--ink-2); overflow-wrap: anywhere; }
.cl-ed-fb.is-ok { color: var(--ink); font-weight: 600; }
.cl-ed-fb.is-warn { color: var(--ink); }
.cl-ed-ask { display: grid; gap: .4rem; }
.cl-ed-ask textarea { width: 100%; font: inherit; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; resize: vertical; min-height: 4.5rem; box-sizing: border-box; background: transparent; color: inherit; }

/* ── Client logins (public/client-logins.js) ─────────── */
.lg-top { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-bottom: .8rem; }
.lg-top .note { flex: 1 1 22rem; margin: 0; }
.lg-list { display: grid; }
.lg-row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .4rem 1rem; padding: .7rem 0; border-top: 1px solid var(--rule); align-items: center; }
.lg-client, .lg-pw-who { display: grid; min-width: 0; }
.lg-name { font-weight: 600; font-size: var(--t-base); overflow-wrap: anywhere; }
.lg-mail { font-size: var(--t-xs); color: var(--ink-3); overflow-wrap: anywhere; }
.lg-mail-main { font-size: var(--t-sm); overflow-wrap: anywhere; }
.lg-login { display: flex; gap: .5rem 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.lg-login + .lg-login { margin-top: .5rem; }
.lg-off .lg-mail-main { color: var(--ink-3); text-decoration: line-through; }
.lg-btns { display: flex; gap: .35rem; flex: none; }
.lg-btns .btn, .lg-new .btn { min-height: 36px; white-space: nowrap; }
.lg-new { display: flex; gap: .4rem; align-items: center; }
.lg-new input { flex: 1 1 auto; min-width: 0; min-height: 36px; font-size: 16px; padding: .3rem .55rem; }
.lg-others { margin-top: 1rem; }
.lg-others summary { cursor: pointer; padding: .4rem 0; }
.lg-modal { width: min(640px, 96vw); }
.lg-once { margin: .2rem 0 0; }
.lg-pw-list, .lg-review { display: grid; gap: .1rem; margin: .4rem 0 1rem; }
.lg-pw-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem .8rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--rule); }
.lg-pw { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; background: var(--wash); padding: .3rem .5rem; border-radius: var(--radius-sm); user-select: all; overflow-wrap: anywhere; }
.lg-rev-row { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 15rem); gap: .4rem .7rem; align-items: center; padding: .5rem 0; border-top: 1px solid var(--rule); cursor: pointer; }
.lg-rev-row input[type="checkbox"] { width: 20px; height: 20px; }
.lg-rev-row .lg-email { min-height: 36px; font-size: 16px; padding: .3rem .55rem; min-width: 0; }
.lg-acts { justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 640px) {
  .lg-row { grid-template-columns: minmax(0, 1fr); }
  .lg-login { align-items: flex-start; }
  .lg-pw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .lg-pw-row .lg-pw-who { grid-column: 1 / -1; }
  .lg-rev-row { grid-template-columns: auto minmax(0, 1fr); }
  .lg-rev-row .lg-email { grid-column: 1 / -1; }
  .lg-modal { padding: 1rem; }
  .lg-acts .btn { flex: 1 1 auto; }
}


/* ── the feed, live-test pass (fix-b, 2026-10-03) ───────────────────────────
   One block so it reads as one change. */
/* "Being made · see it →" stays white on a dark slide, hovered or not (it went accent-on-black
   under a resting mouse — 2.6:1). */
.kzf-slide.has-media .kzf-made, .kzf-slide.has-media .kzf-made:hover, .kzf-slide.has-media .kzf-made:focus-visible {
  color: #fff; border-color: rgba(255,255,255,.75); background: rgba(8,12,16,.55);
}
.kzf-slide.has-media .kzf-made:hover { border-color: #fff; }
/* The row fits four controls on a 360–430px phone without "Make me one" breaking onto two lines. */
.kzf-do { white-space: nowrap; padding: 0 .6rem; min-width: 0; }
.kzf-save { min-width: 92px; padding: 0 .7rem; white-space: nowrap; }
.kzf-out, .kzf-pass { width: 46px; }
/* Only a reel nobody has acted on can be passed — the disc is not offered on the others. */
.kzf-slide:not([data-kzf-state="none"]) .kzf-pass { display: none; }
/* ONE mute: the bar's. The slide's own speaker duplicated it. M still toggles. */
.kzf-ctl-mute { display: none; }
/* Toasts on the feed sit at the TOP, under the bar, never over Make me one / Save. */
body.kz-feed .toast { bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 7.5rem); }
@media (min-width: 901px) { body.kz-feed .toast { top: 6rem; } }
/* The player is invisible until it actually plays (knockz.js KZF_SHOW_MS), so YouTube's own
   buffering ring never sits on the creator's handle. The poster shows underneath meanwhile. */
.kzf-media iframe.kzf-wait { opacity: 0; }
.kzf-media iframe { transition: opacity var(--dur-2) var(--ease); }
/* A narrow phone: the chip bar is ONE row. The counter yields to a "needs you" chip, chips get
   tighter, and if it still does not fit it scrolls sideways rather than wrapping. */
@media (max-width: 420px) {
  .kzf > .kzf-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .kzf > .kzf-bar::-webkit-scrollbar { display: none; }
  .kzf > .kzf-bar .kzf-chip { padding: .2rem .45rem; }
  .kzf > .kzf-bar:has(.is-you) .kzf-pos { display: none; }
}
@media (max-width: 380px) {
  .kzf > .kzf-bar { gap: .2rem; padding: .3rem .3rem; }
  .kzf > .kzf-bar .kzf-chip { padding: .15rem .4rem; font-size: 11.5px; }
  .kzf-acts { gap: .4rem; }
  .kzf-save { min-width: 84px; padding: 0 .6rem; }
  .kzf-out, .kzf-pass { width: 44px; }
  .kzf-do { font-size: var(--t-base, 1rem); }
}
/* THE SIDE PANEL — a wide screen gets the reel's words beside the phone-shaped rail. */
.kzf-side { display: none; }
@media (min-width: 1100px) {
  .kzf.kzf-has-side { grid-template-columns: max-content minmax(260px, 360px); column-gap: 2.2rem; justify-content: center; align-items: start; }
  .kzf.kzf-has-side > .kzf-side {
    display: block; grid-column: 2; grid-row: 1 / span 2; align-self: center;
    max-height: 100%; overflow: auto; padding: 1.1rem 1.25rem;
    background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius, 14px);
    font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5;
  }
  .kzf-side:empty { visibility: hidden; }
  .kzf-side h4 { margin: .9rem 0 .25rem; font-family: var(--sans); font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
  .kzf-side p { margin: 0; }
  .kzf-side blockquote { margin: 0; padding-left: .7rem; border-left: 2px solid var(--accent); font-family: var(--serif); font-size: var(--t-lg); line-height: 1.35; color: var(--ink); }
  .kzf-side-who { font-weight: 600; color: var(--ink); }
  .kzf-side-x { margin-top: .35rem !important; }
  .kzf-side-x b { font-family: var(--serif); font-size: 2rem; color: var(--ink); margin-right: .3rem; }
  .kzf-side-keys { margin-top: 1rem !important; color: var(--ink-3); font-size: var(--t-xs); }
  .kzf-side-keys kbd { font-family: var(--mono); font-size: .9em; border: 1px solid var(--rule-strong); border-radius: 4px; padding: 0 .3rem; }
}

/* ── fix-a (2026-10-03): boot fallback, A1 AI opening, Get help ───────────── */
/* "This page didn't load — tap to retry" (app.js render): the whole line is the button. */
.view-retry { width: 100%; min-height: 48px; cursor: pointer; font: inherit; text-align: left; }
/* A1 AI's fresh screen: the last conversation, one tap away. */
.ac-continue {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .2rem .6rem;
  width: 100%; max-width: 30rem; margin: .2rem auto .8rem; padding: .7rem .9rem; min-height: 48px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.ac-continue:hover, .ac-continue:focus-visible { border-color: var(--accent); }
.ac-continue-k { font-size: var(--t-xs, 12px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.ac-continue-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.ac-continue-m { font-size: var(--t-xs, 12px); color: var(--ink-2); }
.ac-empty-extra { margin-top: .9rem; }
.cl-help-link {
  background: none; border: 0; padding: .5rem .2rem; min-height: 44px; font: inherit; font-size: .92em;
  color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
/* The Get help sheet (client.js clOpenHelp), in the shared drawer. */
.cl-help-explain { margin: 0 0 .8rem; line-height: 1.55; color: var(--ink); }
.cl-help-tips { margin: 0 0 1.2rem; }
* + .cl-help { border-top: 1px solid var(--line); padding-top: 1rem; }
.cl-help-h { font-size: 15px; margin: 0 0 .5rem; }
.cl-help-name { margin: 0 0 .7rem; }
.cl-help-list { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .6rem; }
.cl-help-row { display: grid; grid-template-columns: 4.5rem 1fr; grid-template-areas: "k v" "a a"; gap: .3rem .6rem; align-items: center; }
.cl-help-k { grid-area: k; font-size: var(--t-xs, 12px); color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.cl-help-v { grid-area: v; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.cl-help-row .btn { grid-area: a; justify-self: start; min-height: 40px; }
[data-selectable] { -webkit-user-select: text; user-select: text; cursor: text; }
.cl-help-fallback { margin: 0; }
.cl-help-ai { margin: 1.1rem 0 0; }

/* ── fix-c (2026-10-03): client copy + the make-me-one chain ─────────────── */
/* The Results report: the whole title row is the control, 44px+, with a chevron you can see. */
.cl-kpi-report .fold > summary { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: .2rem .6rem; min-height: 56px; }
.cl-kpi-report .fold > summary b { grid-column: 1; }
.cl-kpi-report .fold > summary .row-sub { grid-column: 1; white-space: normal; overflow: visible; text-overflow: clip; }
.cl-kpi-report .fold > summary::after {
  grid-column: 2; grid-row: 1 / span 2; margin: 0; width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; font-size: 18px; color: var(--ink-2); background: var(--wash); border: 1px solid var(--rule);
}
/* A step the chain is still doing ("Openers for … are being written"). */
.cl-pending .empty-box { border-style: dashed; }
.cl-pending[data-cl-pending-live] .empty-box b::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); margin-right: .5rem; vertical-align: middle; animation: live 1.6s ease-in-out infinite; }
.cl-flow-auto { color: var(--ink-3); font-weight: 400; }
/* Eight plain step names across a 390px phone without an ellipsis. */
@media (max-width: 719px) { .cl-flow-step { padding-inline: 0; font-size: 10px; } .cl-flow-label { overflow: visible; text-overflow: clip; } }
.cl-draft-tag { color: var(--ink-2); font-style: italic; }
.cl-draft-note { margin: 0 0 .6rem; }
/* Covers: a short placeholder that fits a phone. */
.cl-brief input::placeholder { color: var(--ink-3); }
@media (max-width: 719px) { .cl-brief { flex-wrap: wrap; } .cl-brief input { flex: 1 1 100%; } }
/* Editor: which script a take is for. */
.cl-ed-for { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin: 0 0 .7rem; font-size: 14px; color: var(--ink-2); }
.cl-ed-for select { min-height: 44px; max-width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: .4rem .6rem; }
.cl-ed-for-line { margin: .1rem 0 .3rem; }
/* The "Tell us" form (client.js clAskOpen), in the shared drawer. */
.cl-ask { display: grid; gap: 1rem; }
.cl-ask-why { margin: 0; line-height: 1.55; color: var(--ink-2); }
.cl-ask-draft { border: 1px solid var(--rule); border-radius: var(--radius); padding: .8rem 1rem; background: var(--wash); display: grid; gap: .5rem; justify-items: start; }
.cl-ask-quote { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.cl-ask-draft .btn { min-height: 44px; }
.cl-ask-q { display: grid; gap: .35rem; }
.cl-ask-label { font-weight: 600; font-size: 14.5px; }
.cl-ask-q input { min-height: 44px; font: inherit; font-size: 16px; padding: .5rem .7rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); width: 100%; box-sizing: border-box; }
.cl-ask-q input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cl-ask-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.cl-ask-actions .btn { min-height: 44px; }

/* r2b (SEV1, 360px): a paused or not-yet-started reel on a phone shows its poster, not the
   frame — that is when YouTube's player draws its own big centre button, a second pause/play on
   top of the card next to ours. Nothing covers the player; the frame is simply not shown. */
@media (max-width: 480px) {
  .kzf-slide:has(.kzf-ctl:not([data-kzf-mode="playing"])) .kzf-media iframe { opacity: 0; }
}

/* r2a (2026-10-03): help that stays put. "Need a person?" under the A1 AI composer, after the
   first message too; the feed's ? as a chip in its own bar (the top bar is hidden there); and the
   staff note on the "Tell us" form. */
.cl-help-under { margin: .2rem 0 0; text-align: center; }
.kzf-chip.kzf-help { min-width: 32px; justify-content: center; font-weight: 700; }
.cl-ask-staff { flex-basis: 100%; color: var(--warn-ink, var(--ink-2)); }

/* Per-Short stats row (views · likes · comments): same voice as the meta line, one line, comments dropped first when narrow. */
.kzf-stats {
  margin: 0; display: flex; flex-wrap: nowrap; align-items: baseline; gap: .3rem .7rem; overflow: hidden; white-space: nowrap;
  font-size: var(--t-sm); font-weight: 400; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.kzf-stats i { font-style: normal; }
.kzf-stats em { font-style: normal; }
@media (max-width: 380px) { .kzf-stats .kzf-st-c { display: none; } }
.kzf-side-stats { margin-top: .35rem !important; }

/* ── r3b (2026-10-03 round 3): phone layout ─────────────────────────────────
   360 / 390 px fixes from the live re-test. */
/* The feed chip bar fits a 360px phone on one row: tighter chips and gaps, and the "3 / 41"
   counter (a fact, not a control) goes at 360 and under. Sound stays a 44px-tall glyph. */
@media (max-width: 380px) {
  .kzf > .kzf-bar { gap: .15rem; padding: .3rem .25rem; }
  .kzf > .kzf-bar .kzf-chip { padding: .1rem .38rem; font-size: 11px; gap: .2rem; }
  .kzf > .kzf-bar .kzf-sound { width: 38px; }
  .kzf > .kzf-bar .kzf-chip.kzf-help { min-width: 30px; padding: 0; }
}
@media (max-width: 360px) {
  .kzf > .kzf-bar .kzf-pos { display: none; }
}
/* The step strip: every label whole. Items take their label's width (never squeezed below it)
   and share what is left; on a screen too narrow for all eight the strip scrolls sideways. */
@media (max-width: 719px) {
  .cl-flow-item { flex: 1 0 auto; min-width: 0; }
  .cl-flow-step { padding-inline: .15rem; }
  .cl-flow-label { overflow: visible; text-overflow: clip; white-space: nowrap; }
}
/* "This video: …" wraps to two lines instead of being cut off mid-title. */
.cl-flow-line {
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
/* In the works: the glance tiles stay ONE row on a phone, however many there are. */
@media (max-width: 480px) {
  .kz-glance { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; }
  .kz-glance-tile { padding: .55rem .55rem; min-width: 0; }
  .kz-glance-tile span { overflow-wrap: anywhere; }
}
/* The ? in the page header: a 26px circle to look at, a 44px target to hit. */
/* r5: the button ITSELF is 44x44 (what a finger and an audit both measure); the 26px circle is drawn by
   ::before and the -9px margin keeps the header's footprint exactly as it was. */
.topbar-meta .kz-hint-toggle { position: relative; width: 44px; height: 44px; margin: -9px; border: 0; background: transparent; z-index: 0; }
.topbar-meta .kz-hint-toggle::before { content: ""; position: absolute; left: 9px; top: 9px; width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--rule-strong); background: var(--paper); z-index: -1; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.topbar-meta .kz-hint-toggle:hover::before { border-color: var(--ink-3); }
.topbar-meta .kz-hint-toggle[aria-pressed="true"]::before { background: var(--accent-soft); border-color: var(--accent); }
/* The staff client picker over the full-bleed feed: a gutter, not flush to the glass. */
@media (max-width: 640px) {
  body.kz-feed .kz-head-slim { padding-inline: 12px; }
  /* The ? plus a staff role switch must not push the header past the glass. */
  .topbar-meta { max-width: 100%; min-width: 0; }
  .role-switch { min-width: 0; flex-wrap: wrap; }
  .role-switch select { max-width: 100%; min-width: 0; }
}

/* ── r4 (2026-10-03 round 4): the client feed ───────────────────────────────── */
/* "Your scripts": the label on the pinned reels that have a script (knockz.js kzPinScripts). */
.kzf-pin {
  align-self: flex-start; margin: 0; padding: .2rem .6rem; border-radius: 999px;
  font-size: var(--t-xs, 12px); font-weight: 700; letter-spacing: .02em;
  background: var(--accent); color: #fff;
}
:root[data-theme="dark"] .kzf-pin { color: #06212f; }
/* "Make me one" is never clipped: the text sets the button's floor and the hairline Save gives
   way first. Every slide is a size container, so the row follows the RAIL's width — on a desktop
   the rail is a 9:16 column ~300–340px wide, narrower than a 390px phone, and the 1440px layout
   cut "Make me one" off on the left. */
.kzf-slide { container-type: inline-size; }
.kzf-acts .kzf-do { min-width: max-content; flex: 1 0 auto; }
.kzf-acts .kzf-save { flex: 0 1 auto; min-width: max-content; }
@container (max-width: 380px) {
  .kzf-acts { gap: .4rem; }
  .kzf-acts .kzf-do, .kzf-acts .kzf-save, .kzf-acts .kzf-made { font-size: var(--t-base, 1rem); }
  .kzf-acts .kzf-do { padding: 0 .75rem; }
  .kzf-acts .kzf-save { padding: 0 .7rem; }
  .kzf-acts .kzf-out, .kzf-acts .kzf-pass { width: 44px; }
}
@container (max-width: 330px) {
  .kzf-acts { gap: .3rem; }
  .kzf-acts .kzf-do, .kzf-acts .kzf-save, .kzf-acts .kzf-made { font-size: 15px; }
  .kzf-acts .kzf-do { padding: 0 .6rem; }
  .kzf-acts .kzf-save { padding: 0 .55rem; }
  .kzf-acts .kzf-out, .kzf-acts .kzf-pass { width: 42px; }
}
/* The chip bar keeps a real gutter on a phone: 12px each side (it was 4px at 360 and 390). */
@media (max-width: 420px) {
  .kzf > .kzf-bar { padding-left: 12px; padding-right: 12px; scroll-padding-inline: 12px; }
}

/* ── Film: the shoot sheet (2026-10-03, public/client.js clShootWork). Big type, phone first. ── */
.cl-shoot { display: grid; gap: var(--gap); max-width: 46rem; }
.cl-shoot-head { display: grid; gap: .5rem; }
.cl-shoot-title { margin: 0; font-size: clamp(24px, 6vw, 34px); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.cl-shoot-based { margin: 0; color: var(--ink-2); font-size: var(--t-md); }
.cl-shoot-switch { display: flex; align-items: center; gap: .6rem; font-size: var(--t-sm); color: var(--ink-2); }
.cl-shoot-switch select { flex: 1 1 auto; min-width: 0; min-height: 44px; font: inherit; font-size: var(--t-md); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: .35rem .6rem; }
.cl-shoot-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; }
.cl-shoot-actions .btn { min-height: 48px; font-size: var(--t-md); padding-inline: 1.1rem; }
.cl-shoot-block { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.1rem; display: grid; gap: .6rem; }
.cl-shoot-h { margin: 0; font-size: var(--t-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cl-shoot-h-row { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.cl-shoot-sub { margin: .4rem 0 0; font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.cl-shoot-open { margin: 0; font-size: clamp(21px, 5.2vw, 26px); line-height: 1.35; font-weight: 600; color: var(--ink); }
.cl-shoot-opener { border-color: var(--ink); }
.cl-shoot-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.cl-shoot-line { display: grid; grid-template-columns: minmax(0, 1fr); gap: .15rem; font-size: clamp(19px, 4.8vw, 22px); line-height: 1.5; color: var(--ink); }
.cl-shoot-lines.has-t .cl-shoot-line { grid-template-columns: 3rem minmax(0, 1fr); column-gap: .6rem; }
.cl-shoot-t { font-size: var(--t-sm); color: var(--ink-3); padding-top: .45em; }
.cl-shoot-say { display: block; }
.cl-shoot-line.is-opener .cl-shoot-say, .cl-shoot-line.is-cta .cl-shoot-say { font-weight: 600; }
.cl-shoot-tag { display: inline-block; margin-right: .5rem; padding: .05rem .45rem; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); vertical-align: .2em; }
.cl-shoot-on { display: block; margin-top: .2rem; font-size: var(--t-base); line-height: 1.45; color: var(--ink-2); font-weight: 400; }
.cl-shoot-notes { margin: 0; font-size: var(--t-md); line-height: 1.55; color: var(--ink); }
.cl-shoot-list { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; font-size: var(--t-md); line-height: 1.5; color: var(--ink); }
.cl-shoot-check { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.cl-shoot-check label { display: flex; align-items: center; gap: .7rem; min-height: 44px; font-size: var(--t-md); color: var(--ink); cursor: pointer; }
.cl-shoot-check input { width: 22px; height: 22px; accent-color: var(--ink); flex: none; }
.cl-shoot-check input:checked + span { color: var(--ink-3); text-decoration: line-through; }
.cl-shoot-fold { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0 1.1rem; }
.cl-shoot-fold > summary { min-height: 52px; display: flex; align-items: center; cursor: pointer; font-weight: 600; font-size: var(--t-md); color: var(--ink); }
.cl-shoot-fold[open] { padding-bottom: 1rem; }
.cl-shoot-fold[open] > summary { margin-bottom: .2rem; }
.cl-shoot-cap { margin: 0 0 .6rem; white-space: pre-wrap; font-family: var(--sans); font-size: var(--t-md); line-height: 1.5; color: var(--ink); }
.cl-shoot-link { display: flex; gap: .5rem; }
.cl-shoot-link input { flex: 1 1 auto; min-width: 0; min-height: 40px; font: inherit; font-size: var(--t-sm); color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: .3rem .55rem; }
/* A [PROOF NEEDED] in a script: never raw, a filled chip that says what goes there. */
.cl-proof { background: var(--ink); color: var(--paper); border-radius: var(--radius-xs); padding: .05em .4em; font-weight: 600; font-size: .86em; white-space: nowrap; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.cl-shoot-empty .cl-empty-pick { max-width: 34rem; }

/* ── Editor: why a take failed, the script it was for (editor-ux, 2026-10-03) ── */
.cl-ed-file { margin: -.3rem 0 0; font-size: .75rem; color: var(--ink-3); overflow-wrap: anywhere; }
.cl-ed-card[data-state="needs-look"] .cl-ed-fb.is-warn { font-weight: 500; line-height: 1.45; }
.cl-ed-detail { margin: 0; font-size: .75rem; color: var(--ink-3); border-left: 2px solid var(--line); padding-left: .5rem; overflow-wrap: anywhere; }
.cl-ed-err { margin: 0; font-size: .875rem; font-weight: 600; color: var(--ink); border: 1px solid var(--ink-3); border-radius: 8px; padding: .55rem .7rem; background: var(--wash, transparent); }
.cl-ed-err[hidden] { display: none; }

/* ── r6 (2026-10-03): hit areas, the script-written link ───────── */
/* The feed bar's ? and Ask (and any chip squeezed under 44px by the phone rules above) are 44px wide as well as tall. */
.kzf > .kzf-bar .kzf-chip, .kzf > .kzf-bar .kzf-chip.kzf-help, .kzf-chip.kzf-help { min-width: 44px; min-height: 44px; justify-content: center; }
/* "Your script is written →" is a link: it reads as one and it is one. */
.kzf-mark-go { appearance: none; background: none; border: 0; padding: .6rem 0; margin: -.6rem 0; min-height: 44px; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; text-align: left; }
.kzf-mark-go:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
/* r7: the feed bar at 360 (dark and light). The whole bar used to be the sideways scroller, so Sound (its last
   button) was cut off at the edge. Now only the chips scroll (.kzf-chips, knockz.js kzFeedBar), with a fade at
   the edge that says there is more, and Sound sits outside the scroller at the end of the bar: always whole.
   Wider than a phone the row is display: contents, so the bar wraps exactly as before. The fade covers only the
   row's end padding, so a row that fits shows no fade on its last chip. */
.kzf-chips { display: contents; }
@media (max-width: 420px) {
  .kzf > .kzf-bar { flex-wrap: nowrap; overflow: visible; }
  .kzf > .kzf-bar > .kzf-chips {
    display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: inherit;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    padding: 3px 18px 3px 3px; margin: -3px 0 -3px -3px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  .kzf > .kzf-bar > .kzf-chips::-webkit-scrollbar { display: none; }
  .kzf > .kzf-bar > .kzf-chips > * { flex: 0 0 auto; }
  .kzf > .kzf-bar > .kzf-sound { flex: none; }
}
/* tony-r1 (2026-10-04): at 360 the sideways chip row still hid the "?" past its fade and the counter
   (hidden by the r3b / r4 rules), and Sound was cut at the edge on the live test (dark and light).
   A phone bar now WRAPS instead of scrolling: every chip, "?", Sound and the counter are whole and
   visible, on a second row when the first is full. kzWireFeed `fit` measures the rail from below the
   bar, so a second row costs the slide a few pixels and never covers it. Placed after the r3b / r4 /
   r7 phone rules on purpose: it overrides them. */
@media (max-width: 420px) {
  .kzf > .kzf-bar { flex-wrap: wrap; overflow: visible; row-gap: .25rem; }
  .kzf > .kzf-bar > .kzf-chips { display: contents; }
  .kzf > .kzf-bar .kzf-pos, .kzf > .kzf-bar:has(.is-you) .kzf-pos { display: inline-block; }
}
/* tony-r1: compliance (finance clients). The client's line is plain and amber-free: a fact, not an error. */
.kz-compliance, .ao-compliance { margin: .5rem 0; font-size: var(--t-sm); color: var(--ink-2); line-height: 1.45; }
.kz-compliance.is-required, .ao-compliance.is-required { border-left: 3px solid var(--warn, var(--accent)); padding: .35rem .6rem; background: var(--wash, transparent); border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0; }
.kz-compliance.is-ok { color: var(--ink-3); font-size: var(--t-xs); }
.kz-compliance-tag, .ao-compliance-tag { display: inline-block; margin-right: .45rem; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.ao-compliance-tag.is-ok { color: var(--ink-2); }
.ao-compliance-head { margin: 0; }
.ao-compliance-flags { margin: .4rem 0 0; padding-left: 1rem; display: grid; gap: .3rem; }
.ao-compliance-where { font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); }
.ao-compliance-text { display: block; color: var(--ink); }
.ao-compliance-hit { background: var(--accent-soft); color: inherit; padding: 0 .15em; border-radius: 3px; }
.ao-compliance-acts { margin: .45rem 0 0; display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.kz-q-cardacts .btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — the one block. Anyone who asked the OS to stop moving things
   gets every animation and transition collapsed to a frame, no smooth scrolling,
   and the things that MEANT "alive" shown as a steady state instead. This is
   the whole of it: there are no other reduced-motion rules in this file. The
   feed's autoplay-off under the same preference is JS (knockz.js kzCalm), not CSS.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Test cleanup (founder / developer only; app.js canTestClean) ───────────────────────────
   The per-item "Delete test item" is a quiet link, not a button: it sits on client screens a
   client never sees it on, and it must not compete with the real actions there. */
.tc-del { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--t-sm); }
.tc-del-btn.linkish { color: var(--ink-2); font-size: var(--t-sm); text-decoration: underline; text-decoration-color: var(--rule-strong); }
.tc-del-btn.linkish:hover, .tc-del-btn.linkish:focus-visible { color: var(--alert); text-decoration-color: currentColor; }
.tc-del.is-open { flex-basis: 100%; }
.tc-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem .75rem; border: 1px solid var(--alert); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); font-size: var(--t-sm); line-height: 1.45; }
.tc-confirm-text { flex: 1 1 16rem; }
.tc-confirm-client { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-weight: 600; }
.tc-confirm-actions { display: inline-flex; gap: .5rem; }
.tc-confirm-actions .btn { min-height: 44px; min-width: 44px; }
.ac-hist-row { flex-wrap: wrap; }
.ac-hist-row .tc-del { padding-inline: .5rem; }
.kzf-body .tc-del-btn.linkish { color: rgba(255,255,255,.82); text-decoration-color: rgba(255,255,255,.5); }
.kzf-body .tc-confirm { color: var(--ink); }
.cl-hook .tc-del, .cl-cap .tc-del { margin-top: .25rem; }
.cl-ed-card .tc-del { margin-top: .5rem; }
/* the Settings screen */
.tc-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: var(--t-sm); }
.tc-toggle input, .tc-row-label input, .tc-confirm-client input { width: 18px; height: 18px; padding: 0; flex: none; margin: 0; }
.tc-client { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.tc-client-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tc-client-head h3 { margin: 0; font-size: var(--t-md); }
.tc-type { margin: .75rem 0 .25rem; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.tc-list { list-style: none; margin: 0; padding: 0; }
.tc-row { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.tc-row-label { display: flex; align-items: flex-start; gap: .6rem; flex: 1 1 18rem; min-height: 44px; cursor: pointer; }
.tc-row-label input { margin-top: .2rem; width: 18px; height: 18px; flex: none; }
.tc-row-main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1 1 14rem; }
.tc-row-title { font-weight: 600; overflow-wrap: anywhere; }
.tc-badge { display: inline-flex; align-items: center; padding: .1rem .5rem; border: 1px solid var(--rule-strong); border-radius: 999px; font-size: var(--t-xs); color: var(--ink-2); white-space: nowrap; }
.tc-badge-client { border-color: var(--alert); color: var(--alert); }
.tc-badge-quiet { border-style: dashed; }
.tc-acts { display: inline-flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.tc-acts .btn { min-height: 44px; }
.tc-bar { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; padding: .75rem 0; background: var(--paper); border-top: 1px solid var(--rule-strong); }
.tc-fail { color: var(--alert); }
.tc-note { border-left: 3px solid var(--ink); padding-left: .75rem; }

/* ── Creator watch (2026-10-04) ─────────────────────────────────────────────
   Staff screen (Clients → Creator watch) and the Instagram embed on the client feed. */
.cw-toolbar { align-items: flex-end; }
.cw-conn { margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--radius-sm); }
.cw-conn-ok { border-left: 3px solid var(--accent); }
.cw-conn-off { display: flex; flex-direction: column; gap: .3rem; border: 1px solid var(--alert); color: var(--ink); background: color-mix(in srgb, var(--alert) 7%, var(--paper)); }
.cw-conn-off span { font-size: var(--t-sm); color: var(--ink-2); }
.cw-add, .cw-paste { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem .75rem; margin-bottom: 1rem; }
.cw-add .field, .cw-paste .field { margin-bottom: 0; }
.cw-add .btn, .cw-paste .btn { min-height: 44px; }
.cw-grow { flex: 1 1 16rem; min-width: 0; }
.cw-n { flex: 0 1 7rem; }
.cw-help { flex: 1 1 100%; margin: 0; }
.cw-table td, .cw-dive td { vertical-align: top; }
.cw-table .row-sub, .cw-dive .row-sub { display: block; }
.cw-table td.cw-who { white-space: normal; max-width: 22rem; }
.cw-err { display: block; white-space: normal; margin-top: .25rem; font-size: var(--t-xs); color: var(--alert); max-width: 28rem; }
.cw-who { min-width: 15rem; }
.cw-acts { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.cw-acts .btn { min-height: 40px; }
.cw-hook { max-width: 12rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cw-held { color: var(--ink-3); }
.cw-deep { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule-strong); }
.cw-deep h3 { margin: 0 0 .5rem; }
.cw-deep h4 { margin: 1rem 0 .4rem; font-size: var(--t-sm); }
.cw-sum, .cw-formats { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.cw-ai { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 1rem 0; }
.cw-ai .btn { min-height: 44px; }
.cw-ai-out { flex: 1 1 100%; padding: .75rem 1rem; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--paper)); }
.cw-ai-out p { margin: .3rem 0 0; }
.kz-reel-flag-watch { border-color: var(--accent); color: var(--accent-ink); }
.kz-reel-watchonly { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: var(--t-sm); }
/* The Instagram embed: same no-pointer rule as YouTube's frame (THE FRAME TAKES NO POINTER) until
   a tap arms it (`is-ig-live`), so hold / swipe / scroll stay the feed's. White behind it because
   Instagram's embed card is white and loads in a beat after the frame. */
.kzf-media iframe.kzf-ig-frame { background: #fff; }
.kzf-slide.is-ig-live .kzf-media iframe.kzf-ig-frame { pointer-events: auto; }
.kzf-ig-hint {
  position: relative; z-index: 2; align-self: center; margin: 0 0 .6rem; padding: .3rem .75rem;
  border-radius: 999px; background: rgba(8,12,16,.6); color: #fff; font-size: var(--t-xs);
}
.kzf-slide.is-ig-live .kzf-ig-hint { pointer-events: none; }
.kzf-ig-open { margin: 0; font-size: var(--t-sm); }
.kzf-ig-open a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--ink); }
.kzf-slide.has-media .kzf-ig-open a { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE CLIENT VIEW, REDRESSED (2026-10-04) — "the studio call sheet"
   ═══════════════════════════════════════════════════════════════════════════
   "More friendly and less technical" (product call, 2026-10-04). Scoped to
   `body.client-login` — a client's own login AND the Test bench's ?preview=
   (app.js sets the class for both), so staff screens keep the house look.

   THE DIRECTION. A creator's day is a call sheet: what to shoot, what is
   cut, what went out. So the page reads like one — a soft cool-grey studio
   floor, white cards with generous corners lifted on navy-tinted shadows, the
   A1 azure as the "on air" light, and one display face with character
   (Bricolage Grotesque, OFL — public/fonts/BricolageGrotesque-OFL.txt) on the
   things a person reads first: the greeting, the screen title, a hook, a
   number. Inter stays the body face. Status gets its hue back here, and only
   here: green = done / approved, amber = needs a look, red = blocked.
   The memorable bit is the step track: one azure line that fills to where
   THIS video is, with a check on every finished step.

   THE MASCOT SLOT. `--a1ai-mascot` below is the ONE place the A1AI robot is
   named. public/img/a1ai-mascot.svg is a placeholder; replace the file (or
   this one line) when the owner's robot arrives. It is decorative (CSS
   background), drawn in the A1 AI greeting, every empty state and loading.

   MOTION. Transform and opacity only. The house durations plus one longer
   one (--dur-4) and one spring, for the moments that answer a tap: a choice
   landing, a step completing, a number counting up (public/client-motion.js).
   The file's ONE reduced-motion block (the end) zeroes all of it; the script
   checks the same media query and paints the final state at once.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/BricolageGrotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* A metric-matched stand-in while the display face loads, so a swap does not
   move a single line (no layout shift). Measured against Liberation/Arial. */
@font-face {
  font-family: "Bricolage Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 98%;
  ascent-override: 96%;
  descent-override: 26%;
  line-gap-override: 0%;
}

/* ── tokens ─────────────────────────────────────────────────────────────── */
:is(body.client-login, .cl-skin) {
  /* THE MASCOT SLOT — swap the robot here (or replace the file). */
  --a1ai-mascot: url("/img/a1ai-mascot.svg");

  /* type: two families, one scale (≈1.25, rounded to whole-ish pixels) */
  --display: "Bricolage Grotesque", "Bricolage Fallback", var(--sans);
  --ct-xs: 12px; --ct-sm: 13.5px; --ct-base: 15px; --ct-md: 17px;
  --ct-lg: 20px; --ct-xl: 25px;   --ct-2xl: 32px; --ct-3xl: 40px;

  /* spacing: a 4px rhythm */
  --cs-1: 4px; --cs-2: 8px; --cs-3: 12px; --cs-4: 16px; --cs-5: 20px;
  --cs-6: 24px; --cs-7: 32px; --cs-8: 48px;

  /* radii: soft containers, tighter insides, pills for every tap */
  --cr-xs: 8px; --cr-sm: 12px; --cr-md: 16px; --cr-lg: 22px; --cr-pill: 999px;

  /* colour roles (light) */
  --bg:          #eef2f6;   /* the studio floor */
  --paper:       #ffffff;
  --paper-2:     #f6f8fb;
  --wash:        #e9eef4;
  --rule:        #e1e7ef;
  --rule-strong: #c9d3df;
  --ink:         #0d1b2a;
  --ink-2:       #3e4c5e;
  --ink-3:       #5b687a;   /* 5.0:1 on paper, 4.6:1 on --bg */
  --accent:      #1397d4;   /* brand azure: marks, track, focus, icons */
  --accent-ink:  #0a6c9f;   /* azure as text: 5.6:1 on white */
  --accent-soft: #e4f3fb;
  --accent-strong: #0a72a8; /* filled buttons: white text 5.2:1 */
  --accent-glow: rgba(19,151,212,.28);

  --st-ok: #146c3a;      --st-ok-soft: #e3f4ea;     /* 6.1:1 on its tint */
  --st-warn: #8a4b06;    --st-warn-soft: #fcf0dc;   /* 6.3:1 on its tint */
  --st-bad: #b42318;     --st-bad-soft: #fde8e6;    /* 5.6:1 on its tint */

  /* elevation: one light source, shadows tinted to the navy ink */
  --ce-1: 0 1px 2px rgba(13,40,70,.06), 0 1px 1px rgba(13,40,70,.04);
  --ce-2: 0 2px 4px rgba(13,40,70,.05), 0 8px 24px -8px rgba(13,40,70,.14);
  --ce-3: 0 4px 8px rgba(13,40,70,.06), 0 22px 48px -12px rgba(13,40,70,.24);
  --shadow: var(--ce-1); --shadow-lift: var(--ce-2); --shadow-pop: var(--ce-3);
  --radius: var(--cr-md); --radius-sm: var(--cr-sm); --radius-xs: var(--cr-xs);

  /* motion: the house three, plus one longer and one spring */
  --dur-4: 480ms;
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-emph: cubic-bezier(.2,.9,.1,1);
  --stagger: 45ms;

  --gap: 1.25rem;
  font-size: var(--ct-base);
}
:root[data-theme="dark"] :is(body.client-login, .cl-skin) {
  --bg:          #0a1017;
  --paper:       #121a24;
  --paper-2:     #0f161f;
  --wash:        #1a2531;
  --rule:        #1f2b38;
  --rule-strong: #2e3e50;
  --ink:         #eaf0f6;
  --ink-2:       #a9b6c5;
  --ink-3:       #8b98a9;   /* 5.6:1 on paper */
  --accent:      #3aabe2;
  --accent-ink:  #74c9f0;
  --accent-soft: #0f2a3b;
  --accent-strong: #3aabe2; /* dark text on it (#04202e): 7.4:1 */
  --accent-glow: rgba(58,171,226,.35);
  --st-ok: #6fd99a;      --st-ok-soft: #10281b;
  --st-warn: #f2bb62;    --st-warn-soft: #2b1f0c;
  --st-bad: #ff8f86;     --st-bad-soft: #2e1513;
  --ce-1: 0 1px 2px rgba(0,0,0,.4);
  --ce-2: 0 2px 4px rgba(0,0,0,.3), 0 10px 28px -8px rgba(0,0,0,.55);
  --ce-3: 0 4px 10px rgba(0,0,0,.35), 0 24px 56px -12px rgba(0,0,0,.7);
}

/* ── type: the display face on what is read first ───────────────────────── */
:is(body.client-login, .cl-skin) :is(.topbar h1, .hero-line, .ac-hello, .cl-agent-name, .kz-q-head h2, .cl-shoot-title,
  .cl-goal-n b, .kzf-hero b, .kz-glance-tile b, .stat-value, .cl-video-views, .section-head h2, .drawer-head h2,
  .kz-q-hook, .kzf-hook, .cl-pick-title, .cl-vcard-title) {
  font-family: var(--display);
  font-optical-sizing: auto;
}
:is(body.client-login, .cl-skin) .topbar h1 { font-size: var(--ct-2xl); font-weight: 700; letter-spacing: -.025em; line-height: 1.08; }
:is(body.client-login, .cl-skin) .topbar-title p { font-size: var(--ct-sm); color: var(--ink-2); }
:is(body.client-login, .cl-skin) .topbar-today { font-size: var(--ct-xs); letter-spacing: .02em; text-transform: none; font-weight: 600; color: var(--ink-3); }
:is(body.client-login, .cl-skin) .section-head h2 { font-size: var(--ct-md); font-weight: 650; letter-spacing: -.015em; }
:is(body.client-login, .cl-skin) .section-note { font-size: var(--ct-xs); }
:is(body.client-login, .cl-skin) .micro { font-size: 11px; letter-spacing: .04em; text-transform: none; font-weight: 650; }

/* ── the shell ─────────────────────────────────────────────────────────── */
:is(body.client-login, .cl-skin) .rail { background: var(--paper); border-right-color: var(--rule); }
:is(body.client-login, .cl-skin) .mark { border-radius: var(--cr-sm); background: linear-gradient(145deg, var(--accent), var(--accent-strong)); color: #fff; box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .rail-name { font-family: var(--display); font-size: 14px; letter-spacing: -.005em; }
:is(body.client-login, .cl-skin) .nav-item {
  min-height: 40px; padding: .45rem .7rem; border-radius: var(--cr-sm); font-size: 14px; gap: .7rem;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
:is(body.client-login, .cl-skin) .nav-item:active { transform: scale(.98); }
:is(body.client-login, .cl-skin) .nav-item[aria-current="true"] {
  background: var(--accent-soft); color: var(--accent-ink);
  box-shadow: inset 3px 0 0 var(--accent);
}
:is(body.client-login, .cl-skin) .nav-group { text-transform: none; letter-spacing: .02em; font-size: 11px; }
:is(body.client-login, .cl-skin) .avatar { border-radius: var(--cr-sm); }
:is(body.client-login, .cl-skin) .rail-actions .btn { min-height: 36px; border-radius: var(--cr-sm); }
:is(body.client-login, .cl-skin) .topbar { border-bottom-color: transparent; }

/* ── controls: one button family, every tap ≥ 44px ──────────────────────── */
:is(body.client-login, .cl-skin) .btn {
  min-height: 44px; border-radius: var(--cr-pill); padding: .55rem 1.1rem; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease);
}
:is(body.client-login, .cl-skin) .btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .btn:active:not(:disabled) { transform: scale(.96); box-shadow: none; transition-duration: 60ms; }
:is(body.client-login, .cl-skin) .btn-sm { min-height: 40px; font-size: 13.5px; padding: .45rem .95rem; }
:is(body.client-login, .cl-skin) .btn-xs { min-height: 36px; font-size: 13px; padding: .35rem .8rem; }
:is(body.client-login, .cl-skin) .btn-primary {
  background: var(--accent-strong); border-color: var(--accent-strong); color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 6px 16px -6px var(--accent-glow);
}
:is(body.client-login, .cl-skin) .btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; box-shadow: 0 10px 22px -8px var(--accent-glow); }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .btn-primary,
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .btn-primary:hover:not(:disabled) { color: #04202e; }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .btn-primary:hover:not(:disabled) { background: var(--accent-ink); border-color: var(--accent-ink); }
:is(body.client-login, .cl-skin) .btn-quiet:hover:not(:disabled) { box-shadow: none; transform: none; }
:is(body.client-login, .cl-skin) :where(.btn, .cl-choose, .ac-chip, .cl-seg-btn, .kzf-chip, .kzf-sound, .cl-flow-step, .nav-item, .cl-making, .ac-send, .ac-histbtn, .kzf-do, .kzf-save, .kzf-made, .kzf-out, summary, a, input, textarea, select):focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 6px var(--accent-glow);
}
:is(body.client-login, .cl-skin) :where(input, select, textarea) { border-radius: var(--cr-sm); min-height: 44px; font-size: 15px; }
:is(body.client-login, .cl-skin) :where(input, select, textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }

/* ── cards ─────────────────────────────────────────────────────────────── */
:is(body.client-login, .cl-skin) .section {
  border-radius: var(--cr-lg); border-color: var(--rule); box-shadow: var(--ce-2);
  padding: var(--cs-5) var(--cs-6) var(--cs-6);
}
:is(body.client-login, .cl-skin) .section-head { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--cs-4); }
:is(body.client-login, .cl-skin) .fold { border-radius: var(--cr-lg); box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .fold > summary { min-height: 56px; }
@media (max-width: 600px) {
  :is(body.client-login, .cl-skin) .section { padding: var(--cs-4) var(--cs-4) var(--cs-5); border-radius: var(--cr-md); }
}

/* ── status: hue is back for the client, and it means the same everywhere ─ */
:is(body.client-login, .cl-skin) .state-ok    { background: var(--st-ok-soft);   color: var(--st-ok); }
:is(body.client-login, .cl-skin) .state-watch { background: var(--st-warn-soft); color: var(--st-warn); }
:is(body.client-login, .cl-skin) .state-risk  { background: var(--st-bad-soft);  color: var(--st-bad); }
:is(body.client-login, .cl-skin) .state { padding: .22rem .7rem; font-size: 12px; }
:is(body.client-login, .cl-skin) .chip { border-radius: var(--cr-pill); font-size: 12px; padding: .18rem .6rem; }
:is(body.client-login, .cl-skin) .chip-warn { background: var(--st-warn-soft); color: var(--st-warn); }
:is(body.client-login, .cl-skin) .chip-alert { background: var(--st-bad-soft); color: var(--st-bad); }
:is(body.client-login, .cl-skin) :is(.kz-compliance, .ao-compliance).is-required {
  border-left: 0; border-radius: var(--cr-sm); padding: .55rem .8rem;
  background: var(--st-warn-soft); color: var(--st-warn);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem;
}
:is(body.client-login, .cl-skin) :is(.kz-compliance, .ao-compliance).is-required :is(.kz-compliance-tag, .ao-compliance-tag) {
  color: var(--st-warn); text-transform: none; letter-spacing: .01em; font-size: 12.5px;
}
:is(body.client-login, .cl-skin) :is(.kz-compliance, .ao-compliance).is-required :is(.kz-compliance-tag, .ao-compliance-tag)::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .4rem; background: currentColor; vertical-align: .05em;
}
:is(body.client-login, .cl-skin) .cl-ed-badge[data-state="ready"] { background: var(--st-ok-soft); color: var(--st-ok); }
:is(body.client-login, .cl-skin) .cl-ed-badge[data-state="needs-look"] { background: var(--st-warn-soft); color: var(--st-warn); border-color: transparent; }
:is(body.client-login, .cl-skin) .cl-src[data-on="yes"]::before { background: var(--st-ok); border-color: var(--st-ok); }
:is(body.client-login, .cl-skin) .cl-ed-fb.is-ok { color: var(--st-ok); }

/* ── empty states: the mascot, a sentence, one way forward ──────────────── */
:is(body.client-login, .cl-skin) .empty-box {
  border: 0; border-radius: var(--cr-lg); background: var(--paper-2);
  padding: var(--cs-6) var(--cs-5); gap: var(--cs-2);
}
:is(body.client-login, .cl-skin) .empty-box::before {
  content: ""; width: 64px; height: 64px; margin-bottom: var(--cs-1);
  background: var(--a1ai-mascot) center / contain no-repeat;
  animation: rise var(--dur-4) var(--ease-spring) both;
}
:is(body.client-login, .cl-skin) .empty-box b { font-family: var(--display); font-size: var(--ct-md); font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
:is(body.client-login, .cl-skin) .empty-box span { font-size: var(--ct-sm); color: var(--ink-2); line-height: 1.5; }
:is(body.client-login, .cl-skin) .cl-empty-pick { justify-items: center; }
:is(body.client-login, .cl-skin) .cl-empty-pick > .empty-box { width: 100%; }

/* ── loading: skeletons that look like what is coming, the mascot on top ── */
:is(body.client-login, .cl-skin) .skel-card, :is(body.client-login, .cl-skin) .skel-grid > i { border-radius: var(--cr-lg); border-color: var(--rule); background: var(--paper); }
:is(body.client-login, .cl-skin) .skeleton { position: relative; }
:is(body.client-login, .cl-skin) .skeleton::before {
  content: ""; position: absolute; z-index: 2; right: 0; top: 0; width: 48px; height: 48px;
  background: var(--a1ai-mascot) center / contain no-repeat; opacity: .9;
  animation: live 1.6s var(--ease) infinite;
}
.cl-skel { display: grid; gap: var(--cs-3); }
.cl-skel-row {
  position: relative; overflow: hidden; border-radius: var(--cr-md); background: var(--paper-2);
  border: 1px solid var(--rule); min-height: 72px;
}
.cl-skel-grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.cl-skel-grid .cl-skel-row { aspect-ratio: 9 / 16; min-height: 0; }
.cl-skel-row::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 25%, color-mix(in srgb, var(--wash) 80%, transparent) 50%, transparent 75%);
  transform: translateX(-100%); animation: skel-slide 1.4s ease-in-out infinite;
}

/* ── the step track — where THIS video is ─────────────────────────────────
   Done steps carry a check; the line between two finished steps is azure;
   the current step is the big azure dot, and it lands with a spring. */
:is(body.client-login, .cl-skin) .cl-flow { gap: var(--cs-2); padding: var(--cs-3) var(--cs-3) var(--cs-2); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--cr-lg); box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .cl-flow-item:not(:last-child)::after {
  top: 19px; height: 3px; border-radius: 3px; background: var(--rule);
  left: calc(50% + 12px); right: calc(-50% + 12px);
}
:is(body.client-login, .cl-skin) .cl-flow-item:has(> .cl-flow-step[data-state="done"]):not(:last-child)::after {
  background: var(--accent); transform-origin: left center;
  animation: cl-draw var(--dur-4) var(--ease-emph) both;
}
:is(body.client-login, .cl-skin) .cl-flow-item:nth-child(2)::after { animation-delay: 60ms; }
:is(body.client-login, .cl-skin) .cl-flow-item:nth-child(3)::after { animation-delay: 120ms; }
:is(body.client-login, .cl-skin) .cl-flow-item:nth-child(4)::after { animation-delay: 180ms; }
:is(body.client-login, .cl-skin) .cl-flow-item:nth-child(5)::after { animation-delay: 240ms; }
:is(body.client-login, .cl-skin) .cl-flow-item:nth-child(n+6)::after { animation-delay: 300ms; }
@keyframes cl-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
:is(body.client-login, .cl-skin) .cl-flow-step { font-size: 11.5px; font-weight: 600; gap: .35rem; padding-top: .55rem; min-height: 52px; }
:is(body.client-login, .cl-skin) .cl-flow-dot {
  width: 20px; height: 20px; border-width: 2px; border-color: var(--rule-strong); background: var(--paper);
  display: grid; place-items: center;
}
:is(body.client-login, .cl-skin) .cl-flow-step[data-state="done"] { color: var(--ink-2); }
:is(body.client-login, .cl-skin) .cl-flow-step[data-state="done"] .cl-flow-dot {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  border-color: var(--accent);
}
:is(body.client-login, .cl-skin) .cl-flow-step[data-state="here"] { color: var(--accent-ink); font-weight: 700; }
:is(body.client-login, .cl-skin) .cl-flow-step[data-state="here"] .cl-flow-dot {
  background: var(--paper); border: 6px solid var(--accent); transform: scale(1.15);
  box-shadow: 0 0 0 5px var(--accent-soft), 0 4px 12px -2px var(--accent-glow);
  animation: cl-land var(--dur-4) var(--ease-spring) .2s both;
}
@keyframes cl-land { from { transform: scale(.4); opacity: 0; } to { transform: scale(1.15); opacity: 1; } }
:is(body.client-login, .cl-skin) .cl-flow-line { font-size: var(--ct-sm); color: var(--ink-2); white-space: normal; padding: 0 var(--cs-1); }
:is(body.client-login, .cl-skin) .cl-flow-line b { font-family: var(--display); font-weight: 650; }

/* the hand-off: the one big button on a tab */
:is(body.client-login, .cl-skin) .cl-next { padding: var(--cs-4); border-radius: var(--cr-lg); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
:is(body.client-login, .cl-skin) .cl-next-btn { min-height: 52px; font-size: 15.5px; padding-inline: 1.5rem; }
:is(body.client-login, .cl-skin) .cl-next-note { color: var(--ink-2); }

/* the "in the works" line, and the Researcher's four faces */
:is(body.client-login, .cl-skin) .cl-making { min-height: 52px; border-radius: var(--cr-lg); padding: .65rem 1rem; box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .cl-making:hover { transform: translateY(-1px); box-shadow: var(--ce-2); }
:is(body.client-login, .cl-skin) .cl-making { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), background var(--dur-1), border-color var(--dur-1); }
:is(body.client-login, .cl-skin) .cl-making .cl-making-arrow { transition: transform var(--dur-2) var(--ease-spring); }
:is(body.client-login, .cl-skin) .cl-making:hover .cl-making-arrow { transform: translateX(3px); }
:is(body.client-login, .cl-skin) .cl-seg { gap: var(--cs-1); padding: var(--cs-1); background: var(--paper); border: 1px solid var(--rule); border-radius: var(--cr-pill); width: fit-content; max-width: 100%; box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .cl-seg-btn { border-color: transparent; background: transparent; }
:is(body.client-login, .cl-skin) .cl-seg-btn:hover { background: var(--wash); border-color: transparent; color: var(--ink); }
:is(body.client-login, .cl-skin) .cl-seg-btn[aria-current="true"] { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; box-shadow: 0 4px 12px -4px var(--accent-glow); }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .cl-seg-btn[aria-current="true"],
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .cl-seg-btn[aria-current="true"] b,
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .cl-seg-btn[aria-current="true"] .cl-seg-you { color: #04202e; }
@media (max-width: 520px) {
  :is(body.client-login, .cl-skin) .cl-seg { width: 100%; border-radius: var(--cr-lg); }
  :is(body.client-login, .cl-skin) .cl-seg-btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; border-radius: var(--cr-md); padding-inline: .7rem; }
  :is(body.client-login, .cl-skin) .cl-flow { padding-inline: var(--cs-2); }
  :is(body.client-login, .cl-skin) .cl-flow-step { font-size: 10.5px; padding-inline: .15rem; }
  :is(body.client-login, .cl-skin) .cl-flow-item { min-width: 52px; }
  :is(body.client-login, .cl-skin) .cl-flow-dot { width: 18px; height: 18px; }
  :is(body.client-login, .cl-skin) .cl-flow-item:not(:last-child)::after { top: 18px; left: calc(50% + 11px); right: calc(-50% + 11px); }
  :is(body.client-login, .cl-skin) .cl-need { grid-template-columns: minmax(0, 1fr); }
  :is(body.client-login, .cl-skin) .cl-need .need-tag { justify-self: start; }
  :is(body.client-login, .cl-skin) .cl-need .btn { grid-column: 1; }
}

/* ── A1 AI: the greeting, with the robot ──────────────────────────────────── */
:is(body.client-login, .cl-skin) .cl-hello {
  grid-template-columns: auto minmax(0, 1fr); column-gap: var(--cs-4); align-items: center;
  padding: var(--cs-5); border-radius: var(--cr-lg); background:
    radial-gradient(120% 140% at 0% 0%, var(--accent-soft) 0%, transparent 60%), var(--paper);
  border: 1px solid var(--rule); box-shadow: var(--ce-2);
}
:is(body.client-login, .cl-skin) .cl-hello::before {
  content: ""; grid-row: 1 / span 2; width: 76px; height: 76px; align-self: start;
  background: var(--a1ai-mascot) center / contain no-repeat;
  animation: cl-wave var(--dur-4) var(--ease-spring) .1s both;
}
@keyframes cl-wave { from { transform: translateY(10px) rotate(-8deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
:is(body.client-login, .cl-skin) .cl-hello > :not(.cl-needs) { grid-column: 2; }
:is(body.client-login, .cl-skin) .cl-hello .cl-needs { grid-column: 1 / -1; }
:is(body.client-login, .cl-skin) .hero-hello { font-family: var(--display); text-transform: none; letter-spacing: -.005em; font-size: var(--ct-md); font-weight: 600; color: var(--accent-ink); }
:is(body.client-login, .cl-skin) .hero-line { font-size: clamp(1.45rem, 5.4vw, var(--ct-2xl)); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; max-width: 26ch; }
@media (max-width: 520px) {
  :is(body.client-login, .cl-skin) .cl-hello { padding: var(--cs-4); column-gap: var(--cs-3); }
  :is(body.client-login, .cl-skin) .cl-hello::before { width: 56px; height: 56px; }
}
:is(body.client-login, .cl-skin) .cl-need {
  border: 1px solid var(--rule); border-radius: var(--cr-md); background: var(--paper);
  padding: .8rem .95rem; box-shadow: var(--ce-1); position: relative; overflow: hidden;
}
:is(body.client-login, .cl-skin) .cl-need::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); }
:is(body.client-login, .cl-skin) .need-tag {
  font-size: 11.5px; letter-spacing: .02em; text-transform: none; border-radius: var(--cr-pill);
  background: var(--accent-soft); padding: .2rem .55rem; align-self: center;
}
:is(body.client-login, .cl-skin) .cl-need-body b { font-size: 15px; }
:is(body.client-login, .cl-skin) .cl-need .btn { min-height: 44px; }

/* the chat */
:is(body.client-login, .cl-skin) .ac-hello { font-size: var(--ct-xl); font-weight: 700; letter-spacing: -.02em; }
:is(body.client-login, .cl-skin) .ac-chip {
  border-radius: var(--cr-md); background: var(--paper); box-shadow: var(--ce-1); color: var(--ink);
  padding: .75rem 1rem; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), border-color var(--dur-1);
}
:is(body.client-login, .cl-skin) .ac-chip:hover { transform: translateY(-2px); box-shadow: var(--ce-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
:is(body.client-login, .cl-skin) .ac-chip:active { transform: scale(.98); }
:is(body.client-login, .cl-skin) .ac-inputwrap { border-radius: var(--cr-lg); box-shadow: var(--ce-2); border-color: var(--rule-strong); padding-left: 1.2rem; }
:is(body.client-login, .cl-skin) .ac-send { width: 44px; height: 44px; background: var(--accent-strong); color: #fff; transition: transform var(--dur-2) var(--ease-spring), background var(--dur-1); }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .ac-send { color: #04202e; }
:is(body.client-login, .cl-skin) .ac-send:active:not(:disabled) { transform: scale(.9); }
:is(body.client-login, .cl-skin) .ac-send:disabled { background: var(--wash); color: var(--ink-3); }
:is(body.client-login, .cl-skin) .ac-bubble { background: var(--accent-soft); border-radius: 20px 20px 6px 20px; }
:is(body.client-login, .cl-skin) .ac-histbtn, :is(body.client-login, .cl-skin) .ac-clear { min-height: 40px; border-radius: var(--cr-pill); }
:is(body.client-login, .cl-skin) .ac-face { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
:is(body.client-login, .cl-skin) .ac-dots i { background: var(--accent); }

/* the agent header on every tab */
:is(body.client-login, .cl-skin) .cl-agent-head .ac-face-lg { width: 44px; height: 44px; font-size: 14px; border-radius: var(--cr-sm); font-family: var(--display); }
:is(body.client-login, .cl-skin) .cl-agent-name { font-size: var(--ct-lg); font-weight: 700; letter-spacing: -.015em; }
:is(body.client-login, .cl-skin) .cl-agent-says { font-size: var(--ct-sm); }

/* ── Script: hooks and scripts as cards you pick ──────────────────────────── */
:is(body.client-login, .cl-skin) :is(.cl-hook, .cl-pick, .cl-cap, .cl-thumb, .cl-vcard, .cl-ed-card, .cl-video, .kz-q-card, .ao-card) {
  border-radius: var(--cr-md); background: var(--paper); border-color: var(--rule); box-shadow: var(--ce-1);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
@media (hover: hover) {
  :is(body.client-login, .cl-skin) :is(.cl-hook, .cl-pick, .cl-cap, .cl-thumb, .cl-video):hover { box-shadow: var(--ce-2); transform: translateY(-1px); }
}
:is(body.client-login, .cl-skin) :is(.cl-pick, .cl-hook, .cl-cap, .cl-thumb).is-picked {
  border-color: var(--accent); background: var(--paper);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--ce-2);
}
:is(body.client-login, .cl-skin) .cl-hook { padding: .8rem 1rem; grid-template-columns: 7rem minmax(0, 1fr) auto; }
:is(body.client-login, .cl-skin) .cl-hook-angle {
  justify-self: start; text-transform: none; letter-spacing: .01em; font-size: 12px; font-weight: 650;
  color: var(--accent-ink); background: var(--accent-soft); border-radius: var(--cr-pill); padding: .2rem .6rem;
}
:is(body.client-login, .cl-skin) .cl-hook-text { font-family: var(--display); font-size: var(--ct-md); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
:is(body.client-login, .cl-skin) .cl-pick { padding: 1rem 1.05rem; }
:is(body.client-login, .cl-skin) .cl-pick-meta { text-transform: none; letter-spacing: .01em; font-weight: 600; font-size: 12px; }
:is(body.client-login, .cl-skin) .cl-pick-title { font-size: var(--ct-md); font-weight: 650; letter-spacing: -.015em; }
:is(body.client-login, .cl-skin) .cl-choose {
  min-height: 44px; font-size: 14px; border-radius: var(--cr-pill);
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-spring);
}
:is(body.client-login, .cl-skin) .cl-choose:active { transform: scale(.94); }
:is(body.client-login, .cl-skin) .cl-choose[aria-pressed="true"] {
  background: var(--accent-strong); border-color: var(--accent-strong); color: #fff;
  animation: cl-pop var(--dur-3) var(--ease-spring) both;
}
:is(body.client-login, .cl-skin) .cl-choose[aria-pressed="true"]::before { content: "✓"; margin-right: .35rem; font-weight: 800; }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .cl-choose[aria-pressed="true"] { color: #04202e; }
:is(body.client-login, .cl-skin) .cl-choose[aria-pressed="true"]:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .cl-choose[aria-pressed="true"]:hover { color: #04202e; }
@keyframes cl-pop { 0% { transform: scale(.9); } 100% { transform: scale(1); } }
:is(body.client-login, .cl-skin) .cl-beat-t, :is(body.client-login, .cl-skin) .kz-q-t, :is(body.client-login, .cl-skin) .cl-shoot-t { font-family: var(--sans); font-weight: 600; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
:is(body.client-login, .cl-skin) .cl-beat-on { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
:is(body.client-login, .cl-skin) .cl-fullscript .cl-shoot-line { font-size: var(--ct-md); }

/* ── Film: the shoot sheet ─────────────────────────────────────────────── */
:is(body.client-login, .cl-skin) .cl-shoot-title { font-weight: 700; letter-spacing: -.025em; }
:is(body.client-login, .cl-skin) :is(.cl-shoot-block, .cl-shoot-fold) { border-radius: var(--cr-lg); box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .cl-shoot-opener { border: 0; box-shadow: 0 0 0 2px var(--accent), var(--ce-2); background: linear-gradient(180deg, var(--accent-soft), var(--paper) 70%); }
:is(body.client-login, .cl-skin) .cl-shoot-h { text-transform: none; letter-spacing: .01em; font-size: var(--ct-sm); color: var(--ink-2); }
:is(body.client-login, .cl-skin) .cl-shoot-open { font-family: var(--display); letter-spacing: -.015em; }
:is(body.client-login, .cl-skin) .cl-shoot-tag { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; font-weight: 650; }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .cl-shoot-tag { color: #04202e; }
:is(body.client-login, .cl-skin) .cl-shoot-check input { accent-color: var(--accent-strong); }
:is(body.client-login, .cl-skin) .cl-shoot-check input:checked + span { color: var(--st-ok); }

/* ── Thumbnails, Captions, Edit, Results ───────────────────────────────── */
:is(body.client-login, .cl-skin) .cl-thumb { padding: .55rem; }
:is(body.client-login, .cl-skin) .cl-thumb-frame { border-radius: var(--cr-sm); border: 0; }
:is(body.client-login, .cl-skin) .cl-lb-open img { transition: transform var(--dur-3) var(--ease); }
@media (hover: hover) { :is(body.client-login, .cl-skin) .cl-lb-open:hover img { transform: scale(1.03); } }
:is(body.client-login, .cl-skin) .cl-brief input, :is(body.client-login, .cl-skin) .cl-brief .btn { min-height: 48px; }
:is(body.client-login, .cl-skin) .cl-vcard { padding: 1rem; box-shadow: none; }
:is(body.client-login, .cl-skin) .cl-vcard-thumb, :is(body.client-login, .cl-skin) .cl-video-thumb { border-radius: var(--cr-sm); }
:is(body.client-login, .cl-skin) .cl-cap { background: var(--paper-2); box-shadow: none; }
:is(body.client-login, .cl-skin) .cl-cap-head .chip { background: var(--accent-soft); color: var(--accent-ink); }
:is(body.client-login, .cl-skin) .cl-ed-upload {
  border: 2px dashed color-mix(in srgb, var(--accent) 45%, var(--rule-strong)); border-radius: var(--cr-lg);
  background: radial-gradient(100% 120% at 50% 0%, var(--accent-soft), transparent 70%), var(--paper-2);
  padding: var(--cs-5); justify-items: start;
}
:is(body.client-login, .cl-skin) .cl-ed-bar { height: 10px; background: var(--wash); }
.cl-gallery > .cl-skel, .cl-ed-list > .cl-skel { grid-column: 1 / -1; }
:is(body.client-login, .cl-skin) .cl-ed-bar > i { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); }
:is(body.client-login, .cl-skin) .cl-ed-badge { font-size: 12px; padding: .22rem .65rem; }
:is(body.client-login, .cl-skin) .cl-ed-player { border-radius: var(--cr-md); }
:is(body.client-login, .cl-skin) .cl-goal-n b { font-size: var(--ct-3xl); font-weight: 750; letter-spacing: -.035em; }
:is(body.client-login, .cl-skin) .cl-goal-text { font-size: var(--ct-xl) !important; }
:is(body.client-login, .cl-skin) .cl-goal-bar { height: 10px; background: var(--wash); }
:is(body.client-login, .cl-skin) .cl-goal-bar i { background: linear-gradient(90deg, var(--accent), var(--accent-strong)); transform-origin: left; animation: cl-draw 900ms var(--ease-emph) .15s both; }
:is(body.client-login, .cl-skin) .stat { border-radius: var(--cr-md); box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .stat-value { font-weight: 700; letter-spacing: -.03em; }
:is(body.client-login, .cl-skin) .cl-video-views { font-weight: 700; }
:is(body.client-login, .cl-skin) .cl-video-platform { border-radius: var(--cr-pill); }

/* ── In the works ──────────────────────────────────────────────────────── */
:is(body.client-login, .cl-skin) .kz-q-head h2 { font-weight: 700; letter-spacing: -.025em; }
:is(body.client-login, .cl-skin) .kz-glance { gap: var(--cs-3); }
:is(body.client-login, .cl-skin) .kz-glance-tile { border-radius: var(--cr-md); background: var(--paper); box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .kz-glance-tile b { font-size: var(--ct-2xl); font-weight: 700; letter-spacing: -.03em; }
:is(body.client-login, .cl-skin) .kz-glance-tile.is-you { box-shadow: inset 0 4px 0 var(--accent), var(--ce-2); }
:is(body.client-login, .cl-skin) .kz-q-stage { font-family: var(--sans); text-transform: none; letter-spacing: .01em; font-weight: 650; font-size: 12.5px; color: var(--st-ok); }
:is(body.client-login, .cl-skin) .kz-q-card { padding: 1.1rem 1.15rem; }
:is(body.client-login, .cl-skin) .kz-q-row { padding: .7rem .3rem; }
:is(body.client-login, .cl-skin) .kz-q-ask { border-radius: var(--cr-md); box-shadow: var(--ce-1); }
:is(body.client-login, .cl-skin) .kz-q-ask legend { font-family: var(--sans); text-transform: none; letter-spacing: .01em; font-size: 12.5px; font-weight: 650; color: var(--accent-ink); }

/* ── The feed's chrome: quieter, so the video speaks ───────────────────────
   Frosted discs over the near-black bar, a single row on a phone where it
   fits, icons for the numbers (the emoji stay in the markup for the screen
   reader's label and the tests — they are swapped for drawn icons here), and
   the why line as a small glass tag. The video itself is never covered more
   than it was. */
:is(body.client-login, .cl-skin) .kzf > .kzf-bar { gap: .3rem; padding: .45rem .5rem; background: linear-gradient(180deg, #070b10, #0b1015); }
:is(body.client-login, .cl-skin) .kzf > .kzf-bar .kzf-chip, :is(body.client-login, .cl-skin) .kzf > .kzf-bar .kzf-sound {
  background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.9);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-spring);
}
:is(body.client-login, .cl-skin) .kzf > .kzf-bar .kzf-chip:active, :is(body.client-login, .cl-skin) .kzf > .kzf-bar .kzf-sound:active { transform: scale(.94); }
:is(body.client-login, .cl-skin) .kzf > .kzf-bar .kzf-chip b { color: #fff; }
:is(body.client-login, .cl-skin) .kzf > .kzf-bar .kzf-chip.is-you { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .kzf > .kzf-bar .kzf-chip.is-you { color: #04202e; }
:is(body.client-login, .cl-skin) .kzf-hero b { font-family: var(--display); font-weight: 750; letter-spacing: -.045em; }
:is(body.client-login, .cl-skin) .kzf-hook { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; border-left-width: 3px; border-radius: 1px; }
:is(body.client-login, .cl-skin) .kzf-stats { gap: .3rem .8rem; align-items: center; }
:is(body.client-login, .cl-skin) .kzf-stats > span { display: inline-flex; align-items: center; gap: .3rem; }
:is(body.client-login, .cl-skin) .kzf-stats i { font-size: 0; display: block; flex: none; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--kzf-ico) center / contain no-repeat; mask: var(--kzf-ico) center / contain no-repeat; }
:is(body.client-login, .cl-skin) .kzf-st-v i { --kzf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5C6.5 5 2.7 9.6 2 12c.7 2.4 4.5 7 10 7s9.3-4.6 10-7c-.7-2.4-4.5-7-10-7zm0 11a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/%3E%3C/svg%3E"); }
:is(body.client-login, .cl-skin) .kzf-st-l i { --kzf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 20.5l-1.4-1.3C5.4 14.5 2 11.4 2 7.6 2 4.5 4.4 2 7.5 2c1.7 0 3.4.8 4.5 2.1C13.1 2.8 14.8 2 16.5 2 19.6 2 22 4.5 22 7.6c0 3.8-3.4 6.9-8.6 11.6L12 20.5z'/%3E%3C/svg%3E"); }
:is(body.client-login, .cl-skin) .kzf-st-c i { --kzf-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
:is(body.client-login, .cl-skin) .kzf-do { background: var(--accent-strong); box-shadow: 0 8px 22px -8px var(--accent-glow); transition: background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease-spring); }
:is(body.client-login, .cl-skin) .kzf-do:active { transform: scale(.96); }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .kzf-do { color: #04202e; }
:is(body.client-login, .cl-skin) .kzf-slide.has-media .kzf-why {
  justify-self: start; align-self: start; width: auto; max-width: 100%;
  padding: .25rem .65rem; border-radius: var(--cr-pill);
  background: rgba(8,12,18,.5); color: rgba(255,255,255,.92);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
:is(body.client-login, .cl-skin) .kzf-slide.has-media .kzf-scrim { background: linear-gradient(180deg, transparent 38%, rgba(5,8,12,.55) 62%, rgba(5,8,12,.88) 100%); }

/* ── the drawers (Get help, the "Tell us" forms) ──────────────────────────── */
:is(body.client-login, .cl-skin) .drawer-panel { border-radius: var(--cr-lg) 0 0 var(--cr-lg); box-shadow: var(--ce-3); }
:is(body.client-login, .cl-skin) .drawer-head { border-bottom-color: var(--rule); }
:is(body.client-login, .cl-skin) .drawer-head h2 { font-size: var(--ct-lg); font-weight: 700; letter-spacing: -.02em; }
:is(body.client-login, .cl-skin) .drawer-body .field label, :is(body.client-login, .cl-skin) .drawer-body .micro { text-transform: none; letter-spacing: .01em; font-size: 13px; color: var(--ink-2); }
:is(body.client-login, .cl-skin) .drawer-body textarea { min-height: 5rem; }
@media (max-width: 600px) { :is(body.client-login, .cl-skin) .drawer-panel { border-radius: var(--cr-lg) var(--cr-lg) 0 0; } }

/* ── toasts ────────────────────────────────────────────────────────────── */
:is(body.client-login, .cl-skin) .toast {
  display: flex; align-items: center; gap: .6rem; padding: .75rem 1.1rem .75rem .85rem; font-size: 14px; font-weight: 550;
  border-radius: var(--cr-pill); background: var(--ink); color: var(--paper); box-shadow: var(--ce-3);
  bottom: max(1.25rem, env(safe-area-inset-bottom)); max-width: min(92vw, 34rem);
  animation: cl-toast var(--dur-3) var(--ease-spring) both;
}
:is(body.client-login, .cl-skin) .toast::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--st-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .toast::before { background-color: #1f8a4c; }
:is(body.client-login, .cl-skin) .toast.toast-bad { background: var(--st-bad); color: #fff; }
:is(body.client-login, .cl-skin) .toast.toast-bad::before { background: rgba(255,255,255,.22) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v6M10 14.5v.5' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .toast.toast-bad { background: #b42318; }
@keyframes cl-toast { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

/* ── page and list motion ────────────────────────────────────────────────
   The screen arrives in a short cascade; the lists inside it are staggered by
   public/client-motion.js (WAAPI, transform + opacity, first paint only). */
:is(body.client-login, .cl-skin) .view-enter > * { animation: cl-enter var(--dur-4) var(--ease-emph) both; }
:is(body.client-login, .cl-skin) .view-enter > *:nth-child(2) { animation-delay: 50ms; }
:is(body.client-login, .cl-skin) .view-enter > *:nth-child(3) { animation-delay: 100ms; }
:is(body.client-login, .cl-skin) .view-enter > *:nth-child(4) { animation-delay: 150ms; }
:is(body.client-login, .cl-skin) .view-enter > *:nth-child(n+5) { animation-delay: 200ms; }
:is(body.client-login, .cl-skin) .view-still > * { animation: none; }
@keyframes cl-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* critique pass (2026-10-04) */
:is(body.client-login, .cl-skin) .kzf > .kzf-bar .kzf-chip.is-you { background: var(--accent-strong); border-color: var(--accent-strong); }
:is(body.client-login, .cl-skin) .kz-q-film .kz-q-cardacts [data-kz-goto-drafts] {
  background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; min-height: 44px; padding-inline: 1.2rem; font-size: 14px;
}
:root[data-theme="dark"] :is(body.client-login, .cl-skin) .kz-q-film .kz-q-cardacts [data-kz-goto-drafts] { color: #04202e; }
:is(body.client-login, .cl-skin) .kzf-side { border-radius: var(--cr-lg); box-shadow: var(--ce-2); }
:is(body.client-login, .cl-skin) .kzf-side-x b { font-family: var(--display); font-weight: 750; letter-spacing: -.04em; }
:is(body.client-login, .cl-skin) .kzf-side blockquote { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; border-left-width: 3px; }
:is(body.client-login, .cl-skin) .kzf-side h4 { text-transform: none; letter-spacing: .01em; font-size: 12.5px; }
:is(body.client-login, .cl-skin) .cl-chat .ac-fill { min-height: min(calc(100dvh - 14rem), 36rem); }

/* the error panel, in the same voice */
:is(body.client-login, .cl-skin) .section-error { border-radius: var(--cr-md); background: var(--paper-2); border: 1px solid var(--rule); color: var(--ink-2); }
:is(body.client-login, .cl-skin) .cl-error .empty-box { border: 0; background: transparent; padding-bottom: var(--cs-3); }
.cl-error-acts { display: flex; justify-content: center; margin: 0; }

/* ── the feed archive + "New today" (2026-10-04, lib/feed-maintain.js) ── */
.kzf-chip-new { cursor: default; }
.kzf-chip-new:hover { border-color: var(--rule); color: var(--ink-3); }
.kzf > .kzf-bar .kzf-chip-new:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.26); color: rgba(255,255,255,.8); }
.kz-reel-fresh { margin: 0 0 .8rem; font-size: var(--t-sm); color: var(--ink-3); font-family: var(--mono); }
.kz-archive { border: 1px solid var(--rule); border-radius: 10px; padding: .8rem; margin: 0 0 1rem; background: var(--paper); }
.kz-archive h4, .kz-archive h5 { margin: 0 0 .4rem; }
.kz-archive-tabs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .4rem 0 .6rem; }
.kz-archive-tabs .kzf-chip { min-height: 36px; }
.kz-archive-dead { margin: 0 0 .6rem; }
.kz-archive-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; max-height: 60vh; overflow: auto; }
.kz-archive-list li { display: grid; gap: .15rem; padding: .5rem 0; border-top: 1px solid var(--rule); min-width: 0; }
.kz-archive-list li a { overflow-wrap: anywhere; }
.kz-archive-list li .btn { justify-self: start; }
.kz-archive-why { font-size: var(--t-sm); color: var(--ink-2); }
.cw-fresh { margin: .2rem 0 .8rem; font-size: var(--t-sm); color: var(--ink-3); font-family: var(--mono); }

/* ══ golive (2026-10-04): fixes from the final Tony test ═══════════════════════════════════════ */

/* 1. The hook picker. Phones: the angle pill, then the hook at full width, then Choose on the
   right under it. A three-column row only from 640px AND only where the hook still gets at least
   15rem (240px) — the container query is what guarantees the width, the media query the intent.
   (The old :is(body.client-login, .cl-skin) rule out-ranked the 560px phone rule, so phones got a 46px text column.) */
.cl-hooks { container-type: inline-size; container-name: clhooks; }
.cl-hook, :is(body.client-login, .cl-skin) .cl-hook {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "angle angle" "text text" ". choose";
  align-items: center; row-gap: .55rem; column-gap: .8rem;
}
.cl-hook > .cl-hook-angle { grid-area: angle; justify-self: start; }
.cl-hook > .cl-hook-text { grid-area: text; min-width: 0; overflow-wrap: break-word; }
.cl-hook > .cl-choose { grid-area: choose; justify-self: end; min-width: 7.5rem; }
.cl-hook > .tc-del { grid-column: 1 / -1; }
@media (min-width: 640px) {
  @container clhooks (min-width: 32rem) {
    .cl-hook, :is(body.client-login, .cl-skin) .cl-hook {
      grid-template-columns: 7rem minmax(15rem, 1fr) auto;
      grid-template-areas: "angle text choose";
      row-gap: .3rem;
    }
    .cl-hook > .cl-choose { min-width: 0; }
  }
}
@media (max-width: 360px) {
  :is(body.client-login, .cl-skin) .cl-hook { padding: .75rem .8rem; }
  :is(body.client-login, .cl-skin) .cl-pickset { padding-inline: .75rem; }
}

/* 2. Phones: the tab's own work starts in the first screen. The shared header is one line of
   context — the agent card (the h1 already names the tab) goes, the date goes, the subtitle is one
   line, the "in the works" pill and its "Tell us" share one row, the step track is dots. */
.cl-agent > *, .cl-agent-grid > *, .cl-work > * { min-width: 0; }
.cl-making-row { display: flex; gap: .5rem; align-items: center; min-width: 0; }
.cl-making-row > .cl-making { flex: 1 1 auto; min-width: 0; }
.cl-making-row > .cl-making-tell { flex: none; min-height: 44px; }
.cl-making-row .cl-making {
  display: flex; align-items: center; gap: .45rem; white-space: nowrap; grid-template-areas: none;
}
.cl-making-row .cl-making-bits { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-making-row .cl-making-n::after { content: " ·"; color: var(--ink-3); font-weight: 400; }
@media (max-width: 639px) {
  .cl-agent > .cl-agent-head { display: none; }
  .cl-agent { gap: .75rem; }
  :is(body.client-login, .cl-skin) .topbar-today { display: none; }
  :is(body.client-login, .cl-skin) .topbar-title p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  :is(body.client-login, .cl-skin) .topbar-title { min-width: 0; max-width: 100%; }
  :is(body.client-login, .cl-skin) .topbar { padding-top: .85rem; padding-bottom: .5rem; row-gap: .4rem; }
  :is(body.client-login, .cl-skin) .cl-making-row .cl-making { min-height: 44px; padding: .45rem .8rem; }
  :is(body.client-login, .cl-skin) .cl-making-row .cl-making-tell { padding-inline: .9rem; }
  :is(body.client-login, .cl-skin) .cl-agent .kz-compliance, :is(body.client-login, .cl-skin) .cl-agent .ao-compliance { margin-block: .25rem; }
}

/* 7. The step track. Progress and position are two facts: `data-state` is progress (done = a
   filled check, todo = hollow), `data-here` is position (an outline ring + the bold label). A
   step can be both. Phones: the seven dots fit in one row with no labels, and one line under them
   says "Step 2 of 7 · Script"; nothing is off the right edge. */
.cl-flow-now { display: none; margin: 0; font-size: var(--t-sm); color: var(--ink-2); }
.cl-flow-now b { color: var(--accent-ink); font-weight: 650; }
.cl-flow-step[data-state] .cl-flow-dot { transform: none; }
.cl-flow-step[data-here="true"], :is(body.client-login, .cl-skin) .cl-flow-step[data-here="true"] { color: var(--accent-ink); font-weight: 700; }
.cl-flow-step[data-here="true"] .cl-flow-dot,
:is(body.client-login, .cl-skin) .cl-flow-step[data-here="true"] .cl-flow-dot {
  outline: 2.5px solid var(--accent); outline-offset: 3px; animation: none; box-shadow: none;
}
:is(body.client-login, .cl-skin) .cl-flow-step[data-here="true"][data-state="todo"] .cl-flow-dot { background: var(--paper); border-color: var(--accent); border-width: 2px; }
@media (max-width: 639px) {
  .cl-flow-steps, :is(body.client-login, .cl-skin) .cl-flow-steps { overflow: visible; }
  .cl-flow-item, :is(body.client-login, .cl-skin) .cl-flow-item { flex: 1 1 0; min-width: 0; }
  .cl-flow-step, :is(body.client-login, .cl-skin) .cl-flow-step { min-height: 40px; padding: .55rem 0 .25rem; gap: 0; }
  .cl-flow-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cl-flow-now { display: block; padding: 0 var(--cs-1, 4px); }
  :is(body.client-login, .cl-skin) .cl-flow { gap: .3rem; padding: .35rem .6rem .55rem; }
  :is(body.client-login, .cl-skin) .cl-flow-item:not(:last-child)::after { top: 19px; }
  .cl-flow-line, :is(body.client-login, .cl-skin) .cl-flow-line { -webkit-line-clamp: 1; line-clamp: 1; }
}

/* 8. Toasts never cover the controls they confirm: on a phone they drop in at the top, under the
   menu bar, clear of every action row (Make me one, Copy for teleprompter, Choose). */
@media (max-width: 900px) {
  .toast, :is(body.client-login, .cl-skin) .toast {
    bottom: auto; top: calc(env(safe-area-inset-top, 0px) + 4.4rem);
    animation-name: golive-toast-down;
  }
  body.kz-feed .toast { top: calc(env(safe-area-inset-top, 0px) + 7.5rem); }
}
@keyframes golive-toast-down { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }

/* 9. The feed. The chip row is ONE line at every width: the chips scroll sideways under an edge fade
   while "?", Sound and the counter are pinned whole at the end (supersedes the tony-r1 wrap). Over
   a video, everything the slide says sits on its own dark gradient footer, so it never fights the
   captions burned into the reel. */
.kzf > .kzf-bar { flex-wrap: nowrap; overflow: visible; }
.kzf > .kzf-bar > .kzf-chips {
  display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: inherit;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  padding: 3px 18px 3px 3px; margin: -3px 0 -3px -3px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
}
.kzf > .kzf-bar > .kzf-chips::-webkit-scrollbar { display: none; }
.kzf > .kzf-bar > .kzf-chips > * { flex: 0 0 auto; }
.kzf > .kzf-bar > :not(.kzf-chips) { flex: none; }
.kzf > .kzf-bar .kzf-pos, .kzf > .kzf-bar:has(.is-you) .kzf-pos { display: inline-block; }
.kzf-slide.has-media .kzf-scrim {
  background: linear-gradient(180deg, rgba(4,8,12,.5) 0, rgba(4,8,12,.06) 26%, rgba(4,8,12,.55) 52%, rgba(4,8,12,.9) 70%, rgba(4,8,12,.96) 100%);
}
:is(body.client-login, .cl-skin) .kzf-slide.has-media .kzf-scrim {
  background: linear-gradient(180deg, rgba(5,8,12,.5) 0, rgba(5,8,12,.06) 26%, rgba(5,8,12,.55) 52%, rgba(5,8,12,.9) 70%, rgba(5,8,12,.96) 100%);
}
.kzf-slide.has-media .kzf-body::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--s-4)); right: calc(-1 * var(--s-4)); top: -2.5rem; bottom: -12rem;
  background: linear-gradient(180deg, rgba(5,8,12,0) 0, rgba(5,8,12,.82) 2.5rem, rgba(5,8,12,.93) 100%);
}
.kzf-slide.has-media .kzf-body { text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.kzf-slide.has-media .kzf-why { white-space: nowrap; }

/* 12c. Research on a wide screen: the side panel is a real column beside the reel, top-aligned
   with it and wider, instead of a small card floating in the middle of the empty right half. */
@media (min-width: 1100px) {
  .kzf.kzf-has-side { grid-template-columns: max-content minmax(320px, 440px); column-gap: 2.5rem; }
  .kzf.kzf-has-side > .kzf-side { align-self: start; margin-top: 4.25rem; padding: 1.4rem 1.5rem; font-size: var(--t-base, 15px); }
  :is(body.client-login, .cl-skin) .kzf-side-x b { font-size: 2.6rem; }
  :is(body.client-login, .cl-skin) .kzf-side blockquote { font-size: 1.35rem; }
}

/* critique pass (golive): on a phone the "?" and the preview flag sit on the h1's row (top right)
   instead of a row of their own; the "in the works" pill gives its counts a second line rather
   than cutting "ready to film" to "r…"; the feed counter yields while a "needs you" chip shows,
   so the chip that needs a tap is whole, not under the fade. */
@media (max-width: 639px) {
  :is(body.client-login, .cl-skin) .topbar { position: relative; }
  :is(body.client-login, .cl-skin) .topbar-meta { position: absolute; top: .85rem; right: 1.1rem; }
  :is(body.client-login, .cl-skin) .topbar h1 { padding-right: 3rem; }
  body.previewing-client .topbar h1 { padding-right: 12rem; }
  :is(body.client-login, .cl-skin) .cl-making-row .cl-making { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dot n arrow" "dot bits arrow"; row-gap: .05rem; white-space: normal; }
  .cl-making-row .cl-making .kzf-dot { grid-area: dot; }
  .cl-making-row .cl-making-n { grid-area: n; }
  .cl-making-row .cl-making-n::after { content: none; }
  .cl-making-row .cl-making-bits { grid-area: bits; white-space: normal; }
  .cl-making-row .cl-making-arrow { grid-area: arrow; }
}
@media (max-width: 420px) {
  .kzf > .kzf-bar:has(.is-you) .kzf-pos { display: none; }
  .kzf > .kzf-bar .kzf-chips .kzf-chip { padding-inline: .5rem; }
}

/* 10. Staff on Client View see what the client sees. Every client-redesign rule above is written
   `:is(body.client-login, .cl-skin)`: a client login styles the whole page (body), staff get the
   same styling on the Client View's own content only — app.js render puts `.cl-skin` on <main>
   while the portal tab is open — so the staff rail and its chrome stay staff-styled. */
.main.cl-skin { background: var(--bg); color: var(--ink); }

/* ── dayone (2026-10-04): Tony's day-one polish ───────────────────────────────────────────────── */
/* 5. The feed's chip row, by priority (knockz.js kzFeedBar): "needs you" > "New today" > In the
   works / Saved > Ask. Wider than a phone NOTHING folds and the bar wraps — every chip whole at
   1440. On a phone the first two stay, the rest fold into "More" (a second row when opened), and
   the counter stays as a compact "1/6". Placed last: it supersedes the golive one-line rule. */
.kzf-fold { display: none; }
@media (min-width: 640px) {
  .kzf > .kzf-bar { flex-wrap: wrap; row-gap: .3rem; }
  .kzf > .kzf-bar > .kzf-chips { display: contents; }
}
@media (max-width: 639px) {
  .kzf > .kzf-bar .kzf-fold { display: inline-flex; }
  .kzf > .kzf-bar:not(.is-more) .kzf-lo { display: none; }
  .kzf > .kzf-bar.is-more { align-items: flex-start; }
  .kzf > .kzf-bar.is-more > .kzf-chips { flex-wrap: wrap; overflow: visible; row-gap: .3rem; -webkit-mask-image: none; mask-image: none; padding-right: 3px; }
  .kzf > .kzf-bar .kzf-pos, .kzf > .kzf-bar:has(.is-you) .kzf-pos { display: inline-block; font-size: 11px; padding: 0; letter-spacing: -.02em; }
  .kzf > .kzf-bar .kzf-pos i { padding: 0 .05rem; }
  /* a folded row fits by construction: no sideways scroll, so no fade and no fade padding */
  .kzf > .kzf-bar.has-fold { gap: 3px; padding-inline: 5px; }
  .kzf > .kzf-bar.has-fold > .kzf-chips { padding-right: 3px; -webkit-mask-image: none; mask-image: none; }
  .kzf > .kzf-bar.has-fold .kzf-chips .kzf-chip { padding-inline: .45rem; }
}

/* 6a. Page subtitles and the step track's "This video: …" line wrap to two lines on a phone
   instead of being cut to "Pick the hook — it beco…". */
@media (max-width: 639px) {
  :is(body.client-login, .cl-skin) .topbar-title p {
    white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: 0;
  }
  .cl-flow-line, :is(body.client-login, .cl-skin) .cl-flow-line { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* 6b. Meta text is never under 13px on a client screen. */
:is(body.client-login, .cl-skin) { --ct-xs: 13px; }
:is(body.client-login, .cl-skin) :is(.cl-pick-meta, .cl-hook-angle, .kz-q-rowwhen, .kz-q-stage, .cl-flow-now, .row-sub, .note, .cl-next-note) { font-size: 13px; }
:is(body.client-login, .cl-skin) :is(.kz-compliance, .cl-making-bits, .kzf-stats, .cl-shoot-on) { font-size: 13.5px; }

/* 6c. A "Your scripts" card: "Script ready · see it →" is the primary pill; ↗ is the quiet one. */
.kzf-made.is-ready, .kzf-slide.has-media .kzf-made.is-ready,
.kzf-slide.has-media .kzf-made.is-ready:hover, .kzf-slide.has-media .kzf-made.is-ready:focus-visible {
  background: var(--accent-strong, var(--accent)); border-color: var(--accent-strong, var(--accent)); color: #fff;
}
.kzf-made.is-ready:hover { filter: brightness(1.06); }
:root[data-theme="dark"] .kzf-made.is-ready { color: #04202e; }
.kzf-acts:has(.kzf-made.is-ready:not([hidden])) .kzf-out {
  width: 44px; min-height: 44px; align-self: center; font-size: var(--t-md, 15px);
  border-color: rgba(255,255,255,.22); opacity: .85;
}

/* 6d. The approve-details sheet says where you are: "1 of 5" under the title and a thin bar. */
.cl-ask-step { height: 4px; border-radius: 4px; background: var(--rule); overflow: hidden; margin: 0 0 .8rem; }
.cl-ask-step i { display: block; height: 100%; background: var(--accent); border-radius: inherit; transition: width var(--dur-2, .2s) var(--ease, ease); }
#drawer-sub:empty { display: none; }

/* 6e. Research's tab row never wraps "Ask" at 390: "1 needs you" folds to a count badge on a phone. */
.cl-seg-you-n { font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  :is(body.client-login, .cl-skin) .cl-seg { flex-wrap: nowrap; }
  :is(body.client-login, .cl-skin) .cl-seg-btn { padding-inline: .55rem; min-width: 0; }
  .cl-seg-you-w { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cl-seg-you { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; margin-left: .3rem;
    border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; }
  :is(body.client-login, .cl-skin) .cl-seg-btn[aria-current="true"] .cl-seg-you { background: #fff; color: var(--accent-ink); opacity: 1; }
}

/* 6f. The step track: DONE is a filled check, CURRENT-and-not-done is a ring. A step that is both is
   the filled check with a small accent tick under it — never a check inside a ring. */
.cl-flow-step[data-here="true"][data-state="done"] .cl-flow-dot,
:is(body.client-login, .cl-skin) .cl-flow-step[data-here="true"][data-state="done"] .cl-flow-dot { outline: none; box-shadow: none; }
.cl-flow-step[data-here="true"][data-state="done"]::after {
  content: ""; display: block; width: 14px; height: 3px; border-radius: 3px; background: var(--accent); margin: 4px auto 0;
}
.cl-flow-step[data-here="true"][data-state="todo"] .cl-flow-dot,
:is(body.client-login, .cl-skin) .cl-flow-step[data-here="true"][data-state="todo"] .cl-flow-dot {
  background: var(--paper); border: 3px solid var(--accent); outline: none; box-shadow: 0 0 0 4px var(--accent-soft);
}

/* 6g. Home at 390: the chat ("What can I help with?") starts inside the first screen. The hero
   card's stacked blocks tighten — a smaller robot and headline, each need on one compact row (its
   tag folded into the left rule, the why line clamped to two lines, the button beside it). */
@media (max-width: 520px) {
  :is(body.client-login, .cl-skin) .cl-hello { padding: var(--cs-3) var(--cs-3) var(--cs-3); column-gap: var(--cs-2); row-gap: 0; }
  :is(body.client-login, .cl-skin) .cl-hello::before { width: 40px; height: 40px; grid-row: 1; }
  :is(body.client-login, .cl-skin) .hero-hello { font-size: 15px; margin: 0; }
  :is(body.client-login, .cl-skin) .hero-line { font-size: 19px; grid-column: 1 / -1 !important; margin: .35rem 0 0; max-width: none; }
  :is(body.client-login, .cl-skin) .cl-hello .cl-needs { margin-top: .55rem; gap: .4rem; }
  :is(body.client-login, .cl-skin) .cl-need { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; padding: .55rem .7rem .55rem .85rem; }
  :is(body.client-login, .cl-skin) .cl-need .need-tag { display: none; }
  :is(body.client-login, .cl-skin) .cl-need-body b { font-size: 14.5px; }
  :is(body.client-login, .cl-skin) .cl-need-why { font-size: 13px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
  :is(body.client-login, .cl-skin) .cl-need .btn { grid-column: 2; justify-self: end; min-height: 44px; padding-inline: .9rem; white-space: nowrap; }
}
/* The feed card's why line ("Your script — ready to film · posting waits on compliance approval")
   wraps to two lines rather than cutting the rule off mid-word. */
.kzf-slide .kzf-why, .kzf-slide.has-media .kzf-why { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* The "✓" on a pressed choose button is drawn once (the skin's ::before), not twice. */
:is(body.client-login, .cl-skin) .cl-choose[aria-pressed="true"] > span[aria-hidden="true"] { display: none; }

/* 2. The hook picker says which opener the video uses ("Using: As written"). */
.cl-hook-using { margin: 0 0 .6rem; font-size: 13.5px; color: var(--ink-2); }
.cl-hook-using b { color: var(--accent-ink); font-weight: 650; }
.cl-hook-using span { color: var(--ink-3); }



/* ── "Creators I like" (2026-10-04, public/client-creators.js) ── */
.clc-box { margin: .75rem 0 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper, transparent); }
.clc-h { margin: 0 0 .2rem; font-size: 1.05rem; }
.clc-sub { margin: 0 0 .6rem; font-size: 13.5px; color: var(--ink-2); }
.clc-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end; margin: 0 0 .6rem; }
.clc-field { display: flex; flex-direction: column; gap: .2rem; font-size: 12.5px; color: var(--ink-3); }
.clc-field select, .clc-field input { min-height: 40px; font: inherit; font-size: 15px; padding: .3rem .5rem; color: var(--ink); }
.clc-grow { flex: 1 1 12rem; min-width: 0; }
.clc-grow input { width: 100%; box-sizing: border-box; }
.clc-form .btn { min-height: 40px; }
.clc-msg { margin: 0 0 .6rem; font-size: 13.5px; color: var(--ink-2); }
.clc-msg.bad { color: var(--ink); font-weight: 600; }
.clc-empty { margin: .25rem 0 0; color: var(--ink-2); }
.clc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.clc-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .75rem; padding: .5rem 0; border-top: 1px solid var(--line); }
.clc-who { display: flex; flex-direction: column; flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.clc-plat { font-size: 12.5px; color: var(--ink-3); }
.clc-status { font-size: 13.5px; color: var(--ink-2); }
.clc-rm { min-height: 36px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* the live dots: a state, not a motion */
  .kzf-dot, .pipe-dot, .ac-dots i, .kz-wait-dots i,
  .onb-step.next, .oc-reading, .ops-dot.live::after { opacity: .85 !important; }
  /* the load bar: a still 2px azure line rather than a sweep that ends off screen */
  .loadbar i { animation: none !important; transform: none; width: 100%; }
  .skel-block::after, .skel::after { animation: none !important; }
  /* the feed's tap glyph: there or not, no grow */
  .kzf-flash { transform: none; }
}

/* ── review: one-tap reject reasons + "Needs review" badge (2026-10-03) ── */
.ao-needs { cursor: pointer; font-family: inherit; align-self: center; margin-right: auto; }
.ao-reasons { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0 .25rem; }
.ao-reasons[hidden], .ao-reason-other[hidden] { display: none; }
.ao-reason-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.ao-reason-chips .btn { min-height: 36px; }
.ao-reason-other { display: flex; gap: .4rem; align-items: center; }
.ao-reason-other input { flex: 1 1 auto; min-width: 0; min-height: 36px; font: inherit; padding: .3rem .5rem; }