/* ── reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { margin: 0; padding: 0; list-style: none; }
img, svg, video { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

/*
 * Long unbroken strings must never push the page sideways.
 *
 * A phone at 375px has no room for a logo URL, an asset ref or an actor id like
 * telegram:4242 — and none of those contain a space to wrap at. Without this the grid
 * column simply grows and the whole page scrolls horizontally, which on a touch device
 * means every vertical swipe drifts. Nothing overflowed visibly in a test, because a
 * test renders strings rather than measuring them.
 *
 * The code element had no style at all: the Brand screen prints the logo URL inside one,
 * so it was both unwrappable and visually indistinguishable from prose.
 */
body { overflow-wrap: break-word; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em; overflow-wrap: anywhere;
  background: var(--surface-2); padding: 0 .25em; border-radius: 3px;
}

/* ── tokens ────────────────────────────────────────────────────────────── */
:root {
  --bg:        #f6f7f9;
  --surface:   #ffffff;
  --surface-2: #f0f2f5;
  --ink:       #14181f;
  --ink-2:     #4d5666;
  /* #6b7380: 4.78:1 on --surface (was #79828f at 3.89:1 — failed AA body text). */
  --ink-3:     #6b7380;
  --line:      #dfe3e9;
  --line-2:    #eef0f4;

  --accent:      var(--brand-accent, #2f6df6);
  --accent-ink:  #ffffff;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);

  /* #a15e00: 4.75:1 on --warn-bg (was #b26a00 at 3.95:1 — failed AA body text). */
  --warn:    #a15e00;
  --warn-bg: #fff6e5;
  --danger:  #b3261e;
  --danger-bg: #fdecea;
  --ok:      #1c7c4a;
  --ok-bg:   #e8f5ee;
  /* Semantics & aliases */
  --surface-muted: var(--surface-2);
  --muted:       var(--ink-3);
  --warning:     var(--warn);

  --radius:      12px;
  --radius-m:    12px;
  --radius-s:    8px;
  --radius-sm:   8px;
  --radius-l:    16px;
  --shadow:      0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06);
  --shadow-lift: 0 2px 4px rgba(16,24,40,.08), 0 16px 40px rgba(16,24,40,.10);

  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-brand: var(--brand-font-display, var(--font));
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 68ch;
  --shell-max: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0f1216;
    --surface:   #171b21;
    --surface-2: #1e232b;
    --ink:       #e8eaee;
    --ink-2:     #a8b0bd;
    /* Split from the light value: a single grey cannot clear 4.5:1 against both
       a white and a near-black surface. #7d8794 measures 4.74:1 on dark
       --surface; the old shared #79828f was 4.45:1, just under the AA floor. */
    --ink-3:     #7d8794;
    --line:      #2a303a;
    --line-2:    #222831;

    --accent-ink: #ffffff;
    --warn:    #e0a34a; --warn-bg:   #2c2213;
    --danger:  #f2917f; --danger-bg: #2e1a17;
    --ok:      #6cc292; --ok-bg:     #14261d;

    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.45), 0 16px 40px rgba(0,0,0,.4);
  }
}

/* ── page ──────────────────────────────────────────────────────────────── */
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.shell { max-width: var(--shell-max); margin: 0 auto; padding: 0 var(--sp-4) var(--sp-8); }

/* ── top bar + nav ─────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  -webkit-backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.02);
}
.topbar__inner {
  max-width: var(--shell-max); margin: 0 auto;
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
}
.brandmark {
  font-family: var(--font-brand);
  font-weight: 700; font-size: 1.1rem; letter-spacing: -.02em;
  display: flex; align-items: center; gap: var(--sp-2);
  color: var(--ink); text-decoration: none;
}
.brandmark .studio-mark { display: block; flex: none; }
.nav { display: flex; gap: var(--sp-1); flex-wrap: wrap; }
/* Orientation strip under top bar — reduces finds their place in one glance. */
.wayfind {
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--sp-3) var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--line-2);
  background: var(--surface);
}
.wayfind__where { font-size: .95rem; color: var(--ink); margin: 0 0 var(--sp-1); }
.wayfind__crumb { font-size: .88rem; color: var(--ink-3); font-weight: 500; }
.wayfind__do { font-size: .88rem; margin: 0; max-width: 52rem; line-height: 1.5; color: var(--ink-2); }

.nav__link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  color: var(--ink-2); text-decoration: none;
  font-weight: 550; font-size: .92rem;
  border: 1px solid transparent;
  transition: all .15s ease;
}
.nav__link:hover { background: var(--surface-2); color: var(--ink); }
.nav__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav__link[aria-current="page"] {
  background: var(--surface); color: var(--ink);
  font-weight: 650;
  border-color: var(--line); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.04);
}
.nav__count {
  min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: .74rem; font-weight: 700;
  background: var(--warn); color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.topbar__spacer { flex: 1 1 auto; }
.topbar__meta {
  color: var(--ink-2);
  font-size: .82rem;
  font-weight: 550;
  padding: 3px 10px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  letter-spacing: -.01em;
}
/*
 * One row on a desktop. Brand, seven tabs, the signed-in address and "log out"
 * did not fit the 1080px shell once the brand showed a real workspace name, so
 * "log out" dropped onto a second line of its own (measured at 1440px). The
 * address is the part that can give way: it truncates, and the tabs scroll
 * sideways before anything wraps.
 */
@media (min-width: 641px) {
  /* The bar may be wider than the reading column; the content keeps its 1080px. */
  .topbar__inner { flex-wrap: nowrap; max-width: max(var(--shell-max), 1240px); }
  .brandmark { white-space: nowrap; flex: none; }
  .topbar .nav { flex-wrap: nowrap; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .topbar .nav__link { flex: none; }
  .topbar__meta { display: block; min-width: 0; max-width: 13rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
  .topbar .btn--quiet { flex: none; white-space: nowrap; }
}
@media (min-width: 641px) and (max-width: 1100px) { .topbar__meta { display: none; } }
/* Operator screens: same bar, no client tabs; a tinted edge says "not the client's panel". */
.topbar--utility { border-bottom: 2px solid var(--warn); }

/* ── generic blocks ────────────────────────────────────────────────────── */
.section { margin-top: var(--sp-6); }
.section__head {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.section__title { font-size: 1.02rem; font-weight: 650; letter-spacing: -.01em; }
.section__hint { color: var(--ink-3); font-size: .88rem; }

/*
 * Awaiting-decision band on Today — louder than a plain section so the client
 * lands on "act here first". Warm tint + lift shadow; decision cards inside
 * keep their own elevation.
 */
.section--priority {
  padding: var(--sp-6);
  background: linear-gradient(180deg, color-mix(in srgb, var(--warn-bg) 40%, var(--surface)) 0%, var(--surface) 100%);
  border: 1px solid color-mix(in srgb, var(--warn) 22%, var(--line));
  border-radius: 18px;
  box-shadow: 0 8px 30px rgba(16, 24, 40, 0.05);
}
.section--priority > .section__head { margin-bottom: var(--sp-4); }
.section--priority .section__title {
  font-size: 1.25rem;
  font-weight: 750;
  letter-spacing: -.02em;
}
.section--priority .section__hint { margin-bottom: var(--sp-3); font-size: .95rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.card[data-role="error-state"] {
  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
  background: color-mix(in srgb, var(--danger-bg) 30%, var(--surface));
  border-inline-start: 4px solid var(--danger);
}
.card[data-state="refusal"] {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--line));
  background: color-mix(in srgb, var(--warn-bg) 30%, var(--surface));
  border-inline-start: 4px solid var(--warn);
}
.card[data-role="loading-state"] {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
}
.card[data-role="memo-proposal"],
.card[data-role="template-card"],
.card[data-role="telegram-card"],
.card[data-role="craft-rule-row"],
.card[data-role="user-invite-card"],
.card[data-role="production-card"] {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card[data-role="memo-proposal"]:hover,
.card[data-role="template-card"]:hover,
.card[data-role="craft-rule-row"]:hover,
.card[data-role="production-card"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.05);
}
.card[data-role="memo-proposal"][data-status="pending"] {
  border-inline-start: 3.5px solid var(--warn);
}
.card[data-role="memo-proposal"][data-status="accepted"] {
  border-inline-start: 3.5px solid var(--ok);
}
.card[data-role="memo-proposal"][data-status="rejected"] {
  border-inline-start: 3.5px solid var(--danger);
  opacity: .8;
}
.card__body { padding: var(--sp-4); }

.muted { color: var(--ink-3); }
.stack > * + * { margin-top: var(--sp-3); }
.stack--tight > * + * { margin-top: var(--sp-1); }
.inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
/* ── operator workspace health bar ──────────────────────────────────── */
.operator__tenant-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-s);
}
.operator__tenant-badges {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
/* Explicit spacing utility when markup uses class="row gap" (or gap alone). */
.gap { gap: var(--sp-3); }

/* ── command bar (issue a request) ─────────────────────────────────────── */
.command {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(16, 24, 40, 0.04);
  padding: var(--sp-5);
}
.command--hero {
  padding: var(--sp-6);
  border-radius: 18px;
  box-shadow: 0 6px 28px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.02);
}
.command__label {
  display: block; font-weight: 650; margin-bottom: var(--sp-2);
  letter-spacing: -.01em;
}
.command--hero .command__label { font-size: 1.35rem; }
.command__hint { color: var(--ink-3); font-size: .92rem; margin-bottom: var(--sp-4); }
.command__field { display: flex; gap: var(--sp-3); align-items: flex-end; flex-wrap: wrap; }
/* Wider than the old 170px so "Od zera — własny brief" and "Name · kind" fit. */
.command__template { min-width: 220px; flex: 0 1 280px; }
.command__template .field__select { width: 100%; min-height: 48px; border-radius: var(--radius-s); }
.command__format { min-width: 280px; flex: 0 1 360px; }
.command__format .field__select { width: 100%; min-height: 48px; border-radius: var(--radius-s); }
.command__voice { min-width: 240px; flex: 0 1 320px; }
.command__voice .field__select { width: 100%; min-height: 48px; border-radius: var(--radius-s); }
.command__language { min-width: 240px; flex: 0 1 320px; border: 0; padding: 0; margin: 0; }
.command__language .field__select { width: 100%; min-height: 48px; border-radius: var(--radius-s); }
.field__check { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; cursor: pointer; }
.command__input {
  flex: 1 1 320px; min-height: 52px; resize: vertical;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  font-size: 1rem;
}
.command--hero .command__input { min-height: 96px; }
.command__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: .94rem; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: transparent; box-shadow: var(--shadow);
}
.btn--primary:hover { filter: brightness(1.06); background: var(--accent); box-shadow: var(--shadow-lift); }
.btn--lg { padding: var(--sp-3) var(--sp-5); font-size: 1rem; }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn--danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.btn--danger:hover { background: var(--danger-bg); }

/* ── badges / pills ────────────────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--sp-2); border-radius: 999px;
  font-size: .76rem; font-weight: 650; letter-spacing: .01em;
  background: var(--surface-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.badge--warning { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.badge--ok      { background: var(--ok-bg);   color: var(--ok);   border-color: transparent; }
.badge--danger  { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
.badge--accent  { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
/* Craft produce (video render_ready FreeComposition etc.) — distinct from state badge. */
.badge--craft   { background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 700; }

.channel-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; color: var(--ink-3);
}

/* ── decision card — the loudest thing on the page ─────────────────────── */
.decision {
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--warn);
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.decision + .decision { margin-top: var(--sp-5); }
.decision__head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
  flex-wrap: wrap;
}
.decision__title { font-weight: 650; letter-spacing: -.01em; font-size: 1.05rem; }
.decision__body { padding: var(--sp-5); }
.decision__preview {
  margin: 0; padding: var(--sp-5);
  background: var(--surface); border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
  max-width: var(--measure); white-space: pre-wrap; overflow-wrap: anywhere;
  font-size: 1.02rem; line-height: 1.65; color: var(--ink);
}
.decision__preview--media { padding: 0; overflow: hidden; border-radius: 12px; background: #000000; }
/* CAP2-R: radar brief topics + closed momentum indicator chips */
.brief-topics { margin-top: var(--sp-3); }
.decision__strategy { display: grid; gap: var(--sp-3); }
.decision__strategy ul { margin: 0; padding-inline-start: 1.2em; }
.decision__strategy fieldset { border: 1px solid var(--line-2); border-radius: var(--radius-m); padding: var(--sp-3); }
.decision__strategy-slot { display: flex; align-items: baseline; gap: var(--sp-2); padding: var(--sp-1) 0; }
.decision__strategy-warning { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-m); background: var(--surface-2); color: var(--ink-2); }
.hyperframes-studio-gate {
  margin-top: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface-1);
}
.brief-topics__title {
  margin: 0 0 var(--sp-2); font-size: .9rem; font-weight: 650;
  color: var(--ink-2); letter-spacing: -.01em;
}
.brief-topics__list {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--sp-2);
}
.brief-topic {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  transition: transform .12s ease, border-color .12s ease;
}
.brief-topic:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.brief-topic__title { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.brief-topic__details { display: inline-block; margin-top: var(--sp-1); line-height: 1.45; color: var(--ink-2); }
.brief-topic__momentum {
  flex-shrink: 0; font-size: .78rem; font-weight: 650;
  letter-spacing: .02em; text-transform: uppercase;
  padding: .15rem .55rem; border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-muted); color: var(--ink-2);
}
.brief-topic__momentum--rising {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
}
.brief-topic__momentum--steady {
  border-color: var(--line-2);
  background: var(--surface-2);
  color: var(--muted);
}
.decision__editor { margin-top: var(--sp-3); }
.decision__approval-note { display: grid; gap: var(--sp-1); }
.decision__toolbar { display: flex; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-1); }
.decision__variant { padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-m); margin-top: var(--sp-2); background: var(--surface); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02); }
.decision__variant-meta { display: flex; justify-content: space-between; gap: var(--sp-2); color: var(--muted); font-size: .85rem; }
.decision__variant-preview { margin-top: var(--sp-2); padding: var(--sp-3); background: var(--surface-muted); white-space: pre-wrap; min-height: 2rem; border-radius: var(--radius-s); }
.artifact-preview video, .artifact-preview img { display: block; max-width: 100%; max-height: 360px; margin-top: var(--sp-2); border-radius: var(--radius-s); }
.artifact-ledger { margin-top: var(--sp-3); }
.artifact-ledger__item { display: grid; gap: var(--sp-1); padding: var(--sp-2); border-bottom: 1px solid var(--line); }
.learning-receipt { margin-top: var(--sp-3); }
.learning-receipt__item { display: grid; gap: var(--sp-1); padding: var(--sp-2); border-bottom: 1px solid var(--line); }
.learning-receipt__item small { color: var(--muted); }
.case-truth { border: 1px solid var(--line-2); border-radius: var(--radius-m); background: var(--surface-2); padding: var(--sp-4); }
.case-truth__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.case-truth__grid > div { display: grid; gap: var(--sp-1); }
.case-truth__grid dt { color: var(--muted); font-size: .86rem; }
.case-truth__grid dd { margin: 0; }
.case__next { margin-top: var(--sp-1); color: var(--ink); font-size: .9rem; }
.case__open { display: inline-block; margin-top: var(--sp-2); color: var(--accent); font-size: .9rem; font-weight: 600; }
.case[data-state="stalled"] { border-color: color-mix(in srgb, var(--warning) 55%, var(--line)); background: color-mix(in srgb, var(--warning) 6%, var(--surface)); }
@media (max-width: 680px) { .case-truth__grid { grid-template-columns: 1fr; } }
.decision__editor summary { cursor: pointer; font-weight: 650; }
.decision__editor-input {
  width: 100%; min-height: 150px; margin-top: var(--sp-2); padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--bg); color: var(--ink); resize: vertical; line-height: 1.5;
}
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.03); }
.table-wrap table { width: 100%; border-collapse: collapse; min-width: 620px; }
.table-wrap th, .table-wrap td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); text-align: start; vertical-align: middle; transition: background-color .12s ease; }
.table-wrap th { color: var(--ink-2); font-size: 0.85rem; font-weight: 700; background: var(--surface-2); }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); }
.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; }
.thin-reports {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.03);
}
.thin-reports__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.thin-reports__cell {
  display: grid;
  gap: 4px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.calendar__today-gate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.03);
}
.calendar__today-gate--action {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--accent) 3%, var(--surface));
  box-shadow: 0 4px 16px rgba(16, 24, 40, 0.06);
}
.calendar__today-gate-main { display: grid; gap: var(--sp-2); }
.calendar__controls { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.calendar__views { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
/*
 * The range and filter forms carry bare <input>/<select> with no field class, so they
 * rendered as browser-default controls, and the filter row was nowrap: on a phone the
 * five filters pushed the calendar page 1198px wide (measured at 390px in Chromium).
 */
.calendar__filter, .calendar__range { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.calendar__filter input, .calendar__filter select, .calendar__range input {
  min-height: 40px; padding: var(--sp-1) var(--sp-2); max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--bg); color: var(--ink);
}
.calendar__window { white-space: nowrap; }
.calendar--week, .calendar--month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-3); }
/* Month flattens section wrappers into the day grid. Week nests calendar--week
   inside each section so titles/hints stay outside the 7-col track. */
.calendar--month .section { display: contents; }
.calendar--week .calday, .calendar--month .calday { min-height: 150px; margin: 0; }
/*
 * A week shows only the days that hold something, and each day's cards carry a
 * status, channels and a plan form. In seven fixed tracks those cards were about
 * 140px wide and spilled over the neighbouring day (measured at 1440px). Days
 * now take readable columns that wrap, with the label above the cards.
 */
.calendar--week { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.calendar--week .calday, .calendar--month .calday { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); min-width: 0; }
.calendar--week .calday__label, .calendar--month .calday__label { position: static; }
.calendar--week .calday { align-content: start; }
/* In a column the plan form goes under the card, not beside it as a 3-word-wide strip. */
.calendar--week .calday .case, .calendar--month .calday .case { flex-direction: column; align-items: stretch; }
.calendar-week { display: grid; gap: var(--sp-5); }
.calendar-week .section__hint { margin: 0 0 var(--sp-3); }
.notification-preferences form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.decision__editor-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.decision__editor-preview { margin: var(--sp-3) 0 0; padding: var(--sp-3); background: var(--surface-muted); border-radius: var(--radius-sm); min-height: 2.5rem; }
.decision__variants { margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.decision__variants summary { cursor: pointer; font-weight: 650; }
.decision__dry-run { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.decision__dry-run-lines { margin: var(--sp-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.85em; }
.decision__suggestions { margin-top: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-s); background: #f8fbff; }
.decision__suggestion { display: block; width: 100%; margin-top: var(--sp-2); padding: var(--sp-2); text-align: start; border: 1px solid #cbd8f5; border-radius: var(--radius-s); background: white; cursor: pointer; }
/* CAP3: read-only per-channel format preview on the decision card */
.channel-format-previews {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.channel-format-previews__title { margin: 0 0 var(--sp-2); font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.channel-format-previews__list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.channel-format-preview {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.02);
}
.channel-format-preview__channel { margin: 0 0 var(--sp-2); font-size: .95rem; font-weight: 700; color: var(--ink); }
.channel-format-preview__fields { margin: 0; display: grid; gap: var(--sp-2); }
.channel-format-preview__field { margin: 0; }
.channel-format-preview__field dt {
  margin: 0;
  font-size: .75rem;
  font-weight: 650;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.channel-format-preview__field dd {
  margin: 2px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .92rem;
  color: var(--ink-2);
}
/* CAP3 clip warning — plain language, never collapsed. */
.channel-format-preview__clip {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line));
  background: var(--warn-bg);
  color: var(--warn);
  font-size: .88rem;
}
.channel-format-preview__disclaimer-risk {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-s);
  border: 1px solid color-mix(in srgb, var(--danger, #b42318) 40%, var(--line));
  background: color-mix(in srgb, var(--danger, #b42318) 8%, var(--surface));
  color: var(--danger, #b42318);
  font-size: .88rem;
  font-weight: 650;
}
/* CAP3b: research citations (titles + domains) on the decision card */
.research-citations {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.research-citations__title { margin: 0 0 var(--sp-2); font-size: 1.02rem; font-weight: 700; color: var(--ink); }
.research-citations__list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.research-citation {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  font-size: .92rem;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.research-citation:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: 0 3px 8px rgba(16, 24, 40, 0.04);
}
.research-citation__title { font-weight: 650; color: var(--ink); }
.research-citation__domain {
  color: var(--muted);
  font-size: .85rem;
}
.research-citation__unverified {
  margin-inline-start: auto;
  padding: 1px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  background: var(--warn-bg);
  color: var(--warn);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .02em;
}
/* What an edit did to a photograph: depictive (loud) vs tonal (quiet).
   The two lines must not read alike — the depictive one carries the warning
   colour and the ask, the tonal one stays on the muted surface. */
.decision__photo-edit {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.decision__photo-edit-title { margin: 0 0 var(--sp-2); font-size: 1rem; font-weight: 650; }
.decision__photo-edit-list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.decision__photo-edit-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  font-size: .92rem;
}
.decision__photo-edit-text { color: var(--ink); }
.decision__photo-edit-ask {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  border-radius: var(--radius-s);
  background: var(--warn-bg);
  color: var(--warn);
  font-size: .9rem;
  font-weight: 650;
}
/* Interview editorial review: where the conversation sags; only word cuts carry a tick box. */
.decision__editorial {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.decision__editorial-sections { margin: var(--sp-2) 0 0; padding-inline-start: var(--sp-3); font-size: 0.9rem; }
.decision__editorial-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.decision__editorial-item {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.decision__editorial-time { font-variant-numeric: tabular-nums; }
.decision__editorial-excerpt { font-size: 0.9rem; overflow-wrap: anywhere; }
/* Voice delivery / picture quality / shot variety: three verdicts, not two.
   The per-item colour comes from the chip, so a cannot_check can never end up
   wearing the same treatment as a pass. */
.decision__quality {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.decision__quality-title { margin: 0 0 var(--sp-2); font-size: 1rem; font-weight: 650; }
.decision__quality-list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.decision__quality-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  font-size: .92rem;
}
.decision__quality-kind { font-weight: 650; color: var(--ink); }
.decision__quality-checks {
  flex: 1 0 100%;
  list-style: none;
  display: grid;
  gap: var(--sp-1);
  margin: var(--sp-1) 0 0;
  padding: var(--sp-2) 0 0;
  border-top: 1px solid var(--line);
}
.decision__quality-check {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: .86rem;
}
.decision__quality-check-name { flex: 1 1 12rem; color: var(--ink); }
.decision__quality-check-required { font-size: .78rem; }
/* Going back to an earlier version, consequence first. */
.decision__restore {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.decision__restore-title { margin: 0 0 var(--sp-2); font-size: 1rem; font-weight: 650; }
.decision__restore-list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.decision__restore-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  font-size: .92rem;
}
.decision__restore-version { font-weight: 650; color: var(--ink); }
/* The consequence sits BEFORE the button and takes the width, so it cannot be
   skipped on the way to clicking. */
.decision__restore-consequence { flex: 1 1 18rem; color: var(--muted); }
/* Publish now / schedule: the choice made together with the approval. Full
   width in the actions row so it reads before the buttons, not beside them. */
.decision__release {
  flex: 1 1 100%;
  display: grid;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.02);
}
.decision__release legend { padding: 0; font-weight: 700; color: var(--ink); }
.decision__release-option { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: baseline; min-height: 44px; cursor: pointer; padding: var(--sp-1) var(--sp-2); border-radius: var(--radius-s); transition: background-color .12s ease; }
.decision__release-option:hover { background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }
.decision__release-at { display: grid; gap: var(--sp-1); max-width: 22rem; }
/* Per-channel delivery receipts on the case detail. */
.delivery-receipts .stack { list-style: none; margin: 0; padding: 0; }
.delivery-receipts__item { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line-2); overflow-wrap: anywhere; }
.delivery-receipts__item:last-child { border-bottom: 0; }
/* CAP2-C: opening (hook) variant picker on the decision card */
.decision__openings {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.decision__openings legend { padding: 0; font-weight: 700; color: var(--ink); }
.decision__opening-options { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.decision__opening-option {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--sp-2);
  row-gap: 2px;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.decision__opening-option:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.decision__opening-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.decision__opening-option input { grid-row: 1 / span 2; margin-top: 3px; }
.decision__opening-option-label { font-weight: 650; font-size: .9rem; }
.decision__opening-option-text {
  grid-column: 2;
  color: var(--ink-2);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: .92rem;
}
.decision__thumbnails {
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-m);
  background: var(--surface-2);
}
.decision__thumbnails legend { padding: 0; font-weight: 700; color: var(--ink); }
.decision__thumbnail-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.decision__thumbnail-option {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-2);
  row-gap: var(--sp-2);
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  cursor: pointer;
}
.decision__thumbnail-option:has(input:checked) {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}
.decision__thumbnail-option-label { font-weight: 650; font-size: .9rem; }
.decision__thumbnail-image, .decision__thumbnail-text { grid-column: 1 / span 2; width: 100%; border-radius: var(--radius-s); }
.decision__thumbnail-image { display: block; aspect-ratio: auto; max-height: 240px; object-fit: contain; background: #111; }
.decision__thumbnail-text { color: var(--ink-2); font-size: .92rem; }
.safe-frame-preview { position: relative; width: min(100%, 420px); overflow: hidden; background: #111; }
.safe-frame-preview > video, .safe-frame-preview > img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.safe-frame-overlay { position: absolute; inset: 0; pointer-events: none; border: 2px dashed rgba(255, 193, 7, .85); color: #fff; font-size: .7rem; text-shadow: 0 1px 2px #000; }
.safe-frame-overlay__top, .safe-frame-overlay__bottom, .safe-frame-overlay__rail { position: absolute; background: rgba(180, 30, 30, .42); padding: 3px 5px; }
.safe-frame-overlay__top { inset: 0 0 auto; height: 12%; }
.safe-frame-overlay__bottom { inset: auto 0 0; height: 18%; }
.safe-frame-overlay__rail { inset: 12% 0 18% auto; width: 12%; writing-mode: vertical-rl; }
.case-assistant { border-top: 1px solid var(--line); }
.calendar__milestones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.calendar__milestone { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; background: var(--surface-muted); }
.calendar__milestone-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.calendar__milestone time { color: var(--muted); }
.calendar__dependencies { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 5px; font-size: .78rem; }
.calendar__dependency { color: var(--accent); text-decoration: underline; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-3); }
.asset-upload { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-4); border: 1.5px dashed var(--line); border-radius: var(--radius-m); background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); transition: border-color .15s ease, background-color .15s ease; }
.asset-upload:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: var(--surface-2); }
.asset-card__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--line-2); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; transition: background-color .12s ease; }
.data-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 65%, var(--surface)); }
.notification-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: end; }
.notification-queues { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.notification-queue-count { display: inline-grid; min-width: 1.35em; min-height: 1.35em; place-items: center; padding: 0 3px; border-radius: 999px; background: var(--accent); color: white; font-size: .78em; }
.asset-card { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); box-shadow: 0 1px 3px rgba(16, 24, 40, 0.03); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; position: relative; }
.asset-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); box-shadow: 0 6px 16px rgba(16, 24, 40, 0.06); }
.elevenlabs-voice-row { gap: var(--sp-2); }
.conversation-attachments { display: grid; gap: var(--sp-2); margin-block: var(--sp-3); }
.dropzone {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: 1px dashed var(--line);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone--dragover {
  border-color: var(--accent);
  background: var(--surface-muted);
}
.conversation-prompts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin-block: var(--sp-2);
}
.conversation-prompts__label {
  font-size: .8rem;
  color: var(--ink-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.conversation-prompts__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 5px var(--sp-3);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .84rem;
  font-weight: 550;
  cursor: pointer;
  transition: all .15s ease;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.02);
}
.chip:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  transform: translateY(-1px);
}
.chip--prompt {
  border-color: var(--line);
}
.chat-msg {
  display: grid;
  gap: 4px;
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-2);
  border-radius: var(--radius-m);
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.02);
  line-height: 1.5;
}
.chat-msg--assistant {
  background: var(--surface);
  border-inline-start: 3.5px solid var(--accent);
}
.chat-msg--user {
  background: var(--surface-2);
  border-inline-start: 3.5px solid var(--ink-3);
}
.chat-msg--operator {
  background: color-mix(in srgb, var(--warn-bg) 40%, var(--surface));
  border-inline-start: 3.5px solid var(--warn);
}
.chat-msg--system {
  background: var(--surface-muted);
  border-inline-start: 3.5px solid var(--line);
}
.chat-msg__attachment {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: .85rem;
}
.chat-msg__work-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: .85rem;
}
.notification-list { display: grid; gap: var(--sp-2); }
.notification {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.02);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.notification:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.05);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.notification--unread {
  border-inline-start: 3.5px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}
.notification__dot {
  width: 8px; height: 8px; margin-top: 7px;
  border-radius: 50%; background: var(--line); flex: 0 0 auto;
}
.notification--unread .notification__dot { background: var(--accent); }
.notification__body { flex: 1; min-width: 0; }
.notification__head { display: flex; justify-content: space-between; gap: var(--sp-3); }
.notification__body p { margin: 4px 0 8px; line-height: 1.5; }
.notification__next { color: var(--ink); font-size: .92rem; }
.notification__body form { display: inline-block; margin-inline-start: var(--sp-2); }
.notification--read { opacity: .76; }
.notification-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding-top: var(--sp-2); }
.asset-card__thumb { display: block; width: 100%; height: 154px; object-fit: cover; border-radius: var(--radius-s); background: var(--surface-2); border: 1px solid var(--line-2); }
.asset-card__thumb--generic { display: grid; place-items: center; color: var(--ink-3); font-size: .82rem; font-weight: 550; letter-spacing: .06em; text-transform: uppercase; }
.asset-filters { display: flex; align-items: end; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.asset-filters .field { min-width: 190px; flex: 1 1 220px; }
.asset-card__attach { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.asset-card__links { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.asset-card__links .badge { display: inline-flex; align-items: center; gap: 4px; }
.asset-card__detach { display: inline; }
.asset-card__detach button { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; font-size: 1rem; line-height: 1; }
.empty--compact { padding: var(--sp-4); }

/* The regulatory disclaimer is never collapsed and never subtle. */
.disclaimer {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--line));
  background: var(--warn-bg);
  border-radius: var(--radius-s);
  color: var(--warn);
  font-size: .88rem;
}
.disclaimer__label {
  display: block; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .7rem; margin-bottom: 4px;
}

/*
 * The preview + its required disclaimer, grouped for screen readers (role="group").
 * The class was rendered with no rule at all, so the group had no spacing of its own
 * and the disclaimer sat flush against the draft — on the one component where the
 * regulator's notice has to read as part of what is being approved, not as a
 * footnote someone can skip.
 */
.decision__content { display: flex; flex-direction: column; gap: var(--sp-3); }

/*
 * A stopped case, distinguished from work in progress without shouting. Same row
 * shape (it is still a case), muted so a dead item does not compete with live ones
 * for attention, and a left edge that says "this one is not moving".
 */
/* Doubled class on purpose. This rule sits above `.case`, which sets the
   `border` shorthand and therefore wiped the stripe at equal specificity — so
   the marker for a stopped case has never actually rendered. Found while
   checking the right-to-left flip in a browser, not by reading the file. */
.case.case--stopped { border-inline-start: 3px solid var(--warn); opacity: .92; }
.case--stopped .case__title { text-decoration: none; }

.decision__facts {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  margin-top: var(--sp-3); font-size: .86rem; color: var(--ink-3);
}
.decision__actions {
  display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2);
  border-top: 1px solid var(--line-2);
}
.decision__actions .btn--primary.btn--lg {
  background: #10b981;
  color: #ffffff;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.28);
}
.decision__actions .btn--primary.btn--lg:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(16, 185, 129, 0.36);
}
.decision__actions .btn--ghost { margin-inline-start: auto; }

/* ── keyboard shortcut badges on decision actions ───────────────────────── */
.decision__shortcuts {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8rem;
}
.decision__shortcut-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kbd {
  display: inline-block;
  padding: 1px 5px;
  font-size: 0.72rem;
  font-family: var(--mono);
  line-height: 1;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
}

/* ── copy quality editorial review ─────────────────────────────────────── */
.decision__copy-quality {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
}
.copy-quality__head {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.copy-quality__title-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}
.copy-quality__title {
  font-size: 0.95rem;
  font-weight: 650;
  margin: 0;
}
.copy-quality__dimensions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px dashed var(--line);
}
.copy-quality__dim {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-1);
  border-radius: var(--radius-s);
  background: var(--surface-2);
  font-size: 0.78rem;
}
.copy-quality__dim-name {
  color: var(--ink-2);
  font-weight: 500;
}
.copy-quality__dim-val {
  font-weight: 700;
  font-size: 0.85rem;
}
.copy-quality__dim-val--pass { color: var(--ok); }
.copy-quality__dim-val--warn { color: var(--warn); }
.copy-quality__findings {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line-2);
}
.copy-quality__findings-title {
  display: block;
  font-size: 0.82rem;
  color: var(--ink-2);
  margin-bottom: var(--sp-1);
}
.copy-quality__findings-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.copy-quality__finding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: 0.82rem;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.copy-quality__finding-msg {
  color: var(--ink);
  flex: 1;
}
.copy-quality__fix {
  font-size: 0.78rem;
  padding: 2px var(--sp-2);
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* What approving actually does. Sits next to the button on purpose — a client
   should not have to remember the promise, they should read it here. */
.decision__outcome { font-size: .84rem; flex: 1 1 220px; min-width: 0; }

/* The gate guarantee, on every card. Quiet, but never absent. */

/* Refine is a first-class action, not a footnote — reject is the quiet one.
   The panel is a sibling AFTER .decision__actions (not inside .decision__body)
   so that when it opens, both visual order and keyboard tab order stay
   preview -> disclaimer -> facts -> Approve -> Ask for a change -> Discard,
   with the refine fields coming last, only once the panel is actually open. */
.refine {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--line-2);
}
.refine[hidden] { display: none; }
.refine__input {
  width: 100%; min-height: 72px; padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--bg); color: var(--ink); resize: vertical;
}
.refine__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Reject: five closed codes, no free-text box (same product question as Telegram). */
.reject-reasons {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--line-2);
}
.reject-reasons[hidden] { display: none; }
.reject-reasons__choices {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2);
}
.reject-reasons__choice { flex: 1 1 140px; }

/* ── case list ─────────────────────────────────────────────────────────── */
.cases { display: grid; gap: var(--sp-2); }
.case {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.03);
  text-decoration: none; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.case:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.06);
}
.case__main { min-width: 0; flex: 1 1 auto; }
/*
 * A case row may never be wider than its column. With a real topic as the title
 * (nowrap + ellipsis) the row's min-content was the whole title, so the Cases
 * list pushed a 390px phone 78px sideways (measured with the showcase data).
 */
.case { min-width: 0; max-width: 100%; }
.section > .case, .stack > .case { box-sizing: border-box; }
.case__title {
  font-weight: 650; font-size: 1.02rem; color: var(--ink); letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.case__meta { color: var(--ink-3); font-size: .84rem; margin-top: 3px; }
.case__side { flex: none; display: flex; gap: var(--sp-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; }

/* Progress: a thin honest bar, not a spinner that lies about time. */
.progress {
  height: 5px; border-radius: 999px; background: var(--line-2);
  overflow: hidden; margin-top: 8px; max-width: 220px;
}
.progress__fill { height: 100%; background: var(--accent); border-radius: 999px; }

/* ── empty state ───────────────────────────────────────────────────────── */
.empty {
  padding: var(--sp-7) var(--sp-5);
  text-align: center; color: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.02);
}
.empty__title { font-weight: 700; color: var(--ink); margin-bottom: var(--sp-2); font-size: 1.1rem; letter-spacing: -.01em; }

/* ── wizard (onboarding) ───────────────────────────────────────────────── */
.wizard { max-width: 640px; margin: var(--sp-7) auto; padding: 0 var(--sp-3); }
.wizard__steps {
  display: flex; gap: var(--sp-3); margin-bottom: var(--sp-6);
  font-size: .84rem; color: var(--ink-3);
}
.wizard__step {
  flex: 1 1 0; padding-top: var(--sp-2);
  border-top: 3px solid var(--line);
  transition: border-color .15s ease, color .15s ease;
}
.wizard__step[aria-current="step"] { border-top-color: var(--accent); color: var(--ink); font-weight: 650; }
.wizard__step--done { border-top-color: var(--ok); color: var(--ink-2); font-weight: 550; }
.field { display: block; margin-bottom: var(--sp-4); }
.field--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 0;
}
.field__label { display: block; font-weight: 600; margin-bottom: var(--sp-1); }
.media-plan { border-top: 1px solid var(--line); padding-top: var(--sp-4); }
.media-plan__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); align-items: end; }
.media-plan__form .field:last-of-type { grid-column: 1 / -1; }
.media-plan__form .checkbox { grid-column: 1 / -1; display: flex; gap: var(--sp-2); align-items: center; }
.media-plan__form .btn { justify-self: start; }
.media-plan__assets { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
@media (max-width: 760px) { .media-plan__form { grid-template-columns: 1fr; } .media-plan__form .field:last-of-type, .media-plan__form .checkbox { grid-column: auto; } }
.field__hint { display: block; color: var(--ink-3); font-size: .85rem; margin-bottom: var(--sp-2); }
.field__input, .field__textarea, .field__select {
  width: 100%; padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  background: var(--bg); color: var(--ink);
}
.field__textarea { min-height: 96px; resize: vertical; }
.field__input:focus-visible, .field__textarea:focus-visible, .field__select:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.field__error { color: var(--danger); font-size: .85rem; margin-top: var(--sp-1); }
.check { display: flex; gap: var(--sp-2); align-items: flex-start; margin-bottom: var(--sp-2); }
.check input { margin-top: 4px; }

/* ── calendar ──────────────────────────────────────────────────────────── */
.calendar { display: grid; gap: var(--sp-4); }
.calendar__reschedule { display: flex; gap: var(--sp-2); align-items: center; margin-top: var(--sp-2); }
.calendar__reschedule input[type="datetime-local"] { max-width: 12rem; }
.calday--drop { outline: 2px dashed var(--accent); outline-offset: -4px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.calendar__plan { margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: var(--sp-2); }
.calendar__plan summary { cursor: pointer; font-weight: 650; }
.calendar__plan form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-2); }
.calendar__plan label { display: grid; gap: 4px; font-size: .9rem; }
.calendar__plan label:last-of-type { grid-column: 1 / -1; }
.calendar__plan button { justify-self: start; }
@media (max-width: 760px) { .calendar__plan form { grid-template-columns: 1fr; } .calendar__plan label:last-of-type { grid-column: auto; } }
.calday {
  display: grid; grid-template-columns: 116px 1fr; gap: var(--sp-4);
  align-items: start;
  padding-bottom: var(--sp-3);
}
.calday__label {
  position: sticky; top: 72px;
  font-weight: 700; font-size: .92rem; color: var(--ink);
  padding-top: var(--sp-1);
  letter-spacing: -.01em;
}
.calday__label small { display: block; color: var(--ink-3); font-weight: 450; font-size: .8rem; margin-top: 2px; }
.calday__items { display: grid; gap: var(--sp-2); }

/* ── detail / audit ────────────────────────────────────────────────────── */
.timeline { border-inline-start: 2px solid var(--line); padding-inline-start: var(--sp-4); }
.timeline__item { position: relative; padding-bottom: var(--sp-4); }
.timeline__item::before {
  content: ""; position: absolute; left: calc(-1 * var(--sp-4) - 5px); top: 7px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line); border: 2px solid var(--surface);
}
.timeline__item--done::before { background: var(--ok); }
.timeline__item--fail::before { background: var(--danger); }
.timeline__when { color: var(--ink-3); font-size: .8rem; }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); }
.kv dt { color: var(--ink-3); font-size: .86rem; }
/* min-width:0 as well: a grid child will not shrink below its content without it. */
.kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.cost { font-variant-numeric: tabular-nums; }
.cost__breakdown { display: flex; gap: var(--sp-3); flex-wrap: wrap; font-size: .82rem; color: var(--ink-3); }

/* ── control room (operator) ────────────────────────────────────────────── */
/*
 * The operator's diagnosis tool had NO styles at all: its route built its own document and
 * never linked this stylesheet, so ~16 class names rendered as plain HTML. For a screen whose
 * own header promises "diagnose in under 2 minutes", that is the difference between scanning
 * and reading. Deliberately plainer than the client surface — this is a workbench, and the
 * only thing that should stand out is a case that needs a person.
 */
.studio-control-room { display: grid; gap: var(--sp-5); }
.studio-control-room__header h2 { margin: 0 0 var(--sp-1); }
.studio-control-room__tenant-usage { color: var(--ink-3); font-size: .86rem; }
.studio-control-room__list { display: grid; gap: var(--sp-3); }
.studio-control-room__empty { color: var(--ink-3); }

.studio-control-room__case {
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); overflow: hidden;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.03);
}
.cr-header {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
}
.cr-id { font-family: var(--mono); font-size: .86rem; font-weight: 600; color: var(--ink); }
.cr-age { margin-inline-start: auto; color: var(--ink-3); font-size: .82rem; }
.cr-state { text-transform: none; }

/* Why a person is needed, on the card. Warm, not alarming — most of these are waiting. */
.cr-attention { margin: var(--sp-3) var(--sp-4) 0; }

.cr-body { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
.cr-field { display: grid; grid-template-columns: 140px 1fr; gap: var(--sp-3); }
.cr-label { color: var(--ink-3); font-size: .84rem; }
/* min-width:0 + wrap: a step error or an asset ref must not widen the page. */
.cr-value { min-width: 0; overflow-wrap: anywhere; }
.cr-scope { color: var(--ink-3); font-size: .82rem; }
/* The finding text on an onboarding card — same treatment as a case's value. */
.cr-detail { min-width: 0; overflow-wrap: anywhere; color: var(--ink-2); }
.cr-field--error .cr-value, .cr-error { color: var(--danger); }
.cr-artifact {
  margin: 0; padding: var(--sp-3); border-radius: var(--radius-s);
  background: var(--surface-2); font-size: .84rem;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 12rem; overflow: auto;
}

/* ── tenant settings (operator workbench) ───────────────────────────────── */
/*
 * The operator's other screen. Same story as the control room: its route emitted its own
 * document and never linked this stylesheet, so ~20 class names rendered as plain HTML.
 * Styled to the same standard — legible, scannable, nothing decorative — because the person
 * reading it is mid-incident, not browsing.
 */
.studio-tenant-settings { display: grid; gap: var(--sp-5); }
.settings-tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.tab-button {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line);
  border-radius: var(--radius-s); background: var(--surface); color: var(--ink-2);
  font-weight: 500; cursor: pointer;
}
.tab-button:hover { background: var(--surface-2); color: var(--ink); }
.tab-button.active, .active {
  border-color: transparent; background: var(--accent); color: var(--accent-ink);
}
.settings-panel { display: grid; gap: var(--sp-4); }

.studio-form, .credential-form, .consent-grant-form, .consent-revoke-form {
  display: grid; gap: var(--sp-3);
}
.form-group { display: grid; gap: var(--sp-1); }
.form-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.integration-grid, .consent-grid {
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.integration-card, .consent-card, .asset-card {
  border: 1px solid var(--line); border-radius: var(--radius-m);
  background: var(--surface); padding: var(--sp-3);
  display: grid; gap: var(--sp-2); min-width: 0;
}
.consent-history { color: var(--ink-3); font-size: .84rem; }

.feed-list { display: grid; gap: var(--sp-2); }
.feed-item {
  display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius-s);
  min-width: 0; overflow-wrap: anywhere;
}

/* Variants the workbench uses that the client surface never needed. */
.badge--secondary { background: var(--surface-2); color: var(--ink-2); }
.badge--success { background: var(--ok-bg); color: var(--ok); }
.btn--sm { padding: var(--sp-1) var(--sp-2); font-size: .86rem; }
.btn--success { background: var(--ok); color: var(--accent-ink); border-color: transparent; }

/* ── banners ───────────────────────────────────────────────────────────── */
.banner {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-s);
  margin-bottom: var(--sp-4); font-size: .92rem;
  border: 1px solid transparent;
}
.banner--error { background: var(--danger-bg); color: var(--danger); }
/* Distinct from error on purpose: "not moving" is not "broken", and telling a
   client their work failed when it is merely slow is its own kind of wrong. */
.banner--warning { background: var(--warn-bg); color: var(--warn); }
.banner--ok    { background: var(--ok-bg);     color: var(--ok); }
.banner--info  { background: var(--accent-soft); color: var(--accent); }

/* ── accessibility ─────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: -9999px;
  background: var(--surface); color: var(--ink);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-s); z-index: 100;
  border: 1px solid var(--line);
  text-decoration: none;
}
.skip-link:focus {
  left: var(--sp-4); top: var(--sp-3);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

/* ── narrow screens: the client approves from a phone ──────────────────── */
@media (max-width: 640px) {
  .shell { padding: 0 var(--sp-3) var(--sp-7); }
  .case__side { flex: 0 1 auto; min-width: 0; max-width: 45%; }
  .topbar__inner { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
  .nav { width: 100%; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav__link { flex: none; }
  .calday { grid-template-columns: 1fr; gap: var(--sp-2); }
  .calday__label { position: static; }
  /* A seven-column month is unusable on a phone. Keep the same data, but turn
     each day into a readable agenda row and omit empty month cells. */
  .calendar--week, .calendar--month { grid-template-columns: 1fr; gap: var(--sp-2); }
  .calendar--month .calday:not(:has(.calday__items > *)) { display: none; }
  .decision__actions { flex-direction: column; align-items: stretch; }
  .decision__actions .btn { width: 100%; }
  .decision__actions .btn--ghost { margin-inline-start: 0; }
  .kv { grid-template-columns: 1fr; gap: var(--sp-1); }
  /* Same reason as .kv: a 140px label column leaves nothing for the value at 375px. */
  .cr-field { grid-template-columns: 1fr; gap: var(--sp-1); }
  /* One card per row on a phone; 240px minimums would otherwise overflow at 375px. */
  .integration-grid, .consent-grid, .asset-grid { grid-template-columns: 1fr; }

  /*
   * Touch targets on the primary navigation.
   *
   * .nav__link computes to about 39px tall (8px padding each side plus a 1.55
   * line-height on a 15px font) — under the 44px minimum every touch guideline agrees
   * on. And on a phone .nav becomes a horizontally scrolling strip, which is the worst
   * pairing: a mis-tap on a small target inside a scroller scrolls the strip instead of
   * navigating, so the client's second attempt starts from a different position.
   *
   * The buttons are already fine (padding 12px + line-height puts .btn near 48px), so
   * this is deliberately only the nav.
   */
  .nav__link { min-height: 44px; }

  /*
   * A radio row: the whole label is the target, and its own height came from the text.
   * These are the three likeness-consent choices — the one place in onboarding where a
   * mis-tap changes a compliance answer.
   */
  .check { min-height: 44px; align-items: center; }

  /*
   * Stopped rows stack on a phone.
   *
   * A stopped row carries a title, a reason, a "stopped 20 minutes ago", a hint that
   * can be two sentences long (the cost one names two amounts), AND up to two buttons.
   * At 375px the row's flex layout gave .case__side whatever the buttons needed and
   * squeezed the rest: min-width 0 meant the title ellipsised to almost nothing and
   * the hint wrapped into a two-words-per-line column beside the buttons. Nothing
   * overflowed, so it looked "responsive" while being unreadable.
   *
   * In-progress rows are deliberately left alone: their side holds one short badge, and
   * stacking would make three of them twice as tall for nothing.
   */
  .case--stopped { flex-direction: column; align-items: stretch; }
  .case--stopped .case__side { text-align: start; }
  .case--stopped .case__side .btn { width: 100%; }
  .case--stopped .case__side { display: flex; flex-direction: column; gap: var(--sp-2); }

  /*
   * Phone pass, 2026-10-22 — every rule below answers a measurement taken in Chromium
   * at 390px (isMobile, touch) on the local alpha host and the snapshot set, not a guess.
   */

  /* The outcome line sits between the decision buttons and carried flex: 1 1 220px. In
     the stacked column that basis is a HEIGHT, so the card grew a 220px blank gap
     between "Try again" and "Ask for a change". */
  .decision__actions .decision__outcome { flex: none; }
  .decision__shortcuts { display: none; }

  /* Every control the thumb lands on clears 44px. Bare inputs measured 31px and bare
     selects 24px (Calendar, Brand gallery search, Notifications, Templates, case
     production settings); file pickers 25px; "Channel variants" / "Edit before
     approval" disclosures 25px; the rich-editor "I" button 38px wide. */
  /* Buttons already clear 44px in height (padding + line-height, pinned by
     theme-coverage.test.ts); a one-letter button ("I") did not in width. */
  .btn { min-width: 44px; }
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  select { min-height: 44px; }
  input[type="file"] { padding-block: var(--sp-2); }
  summary { padding-block: 10px; }
  .checkbox, label.checkbox { min-height: 44px; align-items: center; }
  .brandmark { min-height: 44px; }
  .case__title { display: block; padding-block: 10px; }
  .chip--prompt { min-height: 44px; }

  /* A fieldset's default min-inline-size is min-content, and a select is as wide as its
     longest option: Board's attachments fieldset pushed the page to 429px, the
     Templates engine select to 619px. */
  fieldset { min-inline-size: 0; }
  select { max-width: 100%; }
  /* The attachments fieldset is a grid: its implicit column still sized itself to the
     widest select option, so the column needs an explicit zero minimum too. */
  .conversation-attachments, .dropzone { grid-template-columns: minmax(0, 1fr); }
  /* The command bar's pickers carry 220–280px minimums: at 320px the format picker
     alone pushed Today to 325px (357px with work in flight). One per row instead. */
  .command__template, .command__format, .command__voice { min-width: 0; flex: 1 1 100%; }
  /* An in-progress row's side was flex: none, sized for "one short badge". Polish
     state badges are not short ("Materiał przygotowany — jeszcze nie do decyzji"):
     at 320px one pushed Today to 357px. The badge may wrap; the title keeps the rest. */
  .case__side { flex: 0 1 auto; min-width: 0; max-width: 55%; }
  .case__side .badge { white-space: normal; }
  /* A file input's intrinsic width (button + "no file chosen") is ~344px. */
  input[type="file"] { width: 100%; max-width: 100%; }

  /* Calendar controls: one label/control pair per row, the submit full width; the
     four view buttons share one row instead of breaking 3 + 1. */
  .calendar__controls { display: grid; gap: var(--sp-3); }
  .calendar__views { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0; }
  .calendar__views .btn { padding-inline: var(--sp-2); }
  .calendar__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
  .calendar__window { flex-basis: 100%; }
  .calendar__filter, .calendar__range { display: grid; grid-template-columns: auto minmax(0, 1fr); width: 100%; margin-bottom: 0; }
  .calendar__filter input, .calendar__filter select, .calendar__range input { width: 100%; min-height: 44px; }
  .calendar__filter .btn, .calendar__range .btn { grid-column: 1 / -1; }
  .calendar__reschedule { flex-wrap: wrap; }
  .calendar__reschedule input[type="datetime-local"] { max-width: none; flex: 1 1 12rem; }
}

/* Keyboard shortcut hints mean nothing on a touch screen and took a row of the
   decision card's action area on every phone. The narrow-screen block hides them on
   phones; this covers touch tablets wider than 640px. */
@media (hover: none) and (pointer: coarse) {
  .decision__shortcuts { display: none; }
}

/* A pressed button that is waiting for the server says so. The approve handler already
   sets aria-busy, and plain forms get it from the browser script on submit — before
   this it only dimmed, which on a slow phone connection reads as "nothing happened"
   and invites a second tap. */
.btn[aria-busy="true"] { cursor: progress; opacity: .75; }
.btn[aria-busy="true"]::after {
  content: ""; width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%;
  animation: btn-busy-spin .7s linear infinite;
}
@keyframes btn-busy-spin { to { transform: rotate(360deg); } }

/* The email-code sign-in had no spacing rules at all: title, hint, label, input and
   button sat flush against each other, and the submit was a small inline button at
   the bottom of a phone screen. One column, real gaps, a full-width submit, and a
   code field that reads as eight digits. */
[data-role="login-email-form"] { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
[data-role="login-email-form"] .btn { width: 100%; margin-top: var(--sp-2); }
[data-role="login-email-form"] input[name="code"] { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
[data-role="login-request-code-link"], [data-role="login-support-link"] { display: inline-block; padding-block: var(--sp-2); margin-top: var(--sp-2); }

/*
 * ── Public auth screens (login / register) ─────────────────────────────────
 *
 * The logo lockup and the plan picker live only on the two unauthenticated
 * screens. The picker hides the native radio but keeps it focusable, so the
 * selected card is announced normally and :focus-within draws the ring.
 */
.authbrand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 var(--sp-4);
}

.authbrand .studio-lockup { display: block; max-width: min(100%, 216px); height: auto; }

.planpick-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

.planpick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}

.planpick__option { position: relative; }

.planpick__option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.planpick__card {
  display: block;
  height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.03);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.planpick__card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}

.planpick__option input:checked + .planpick__card {
  border-color: var(--accent);
  box-shadow: 0 0 0 1.5px var(--accent) inset, 0 4px 12px rgba(16, 24, 40, 0.06);
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.planpick__option:focus-within .planpick__card {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.planpick__name { display: block; font-weight: 700; font-size: 1rem; color: var(--ink); }

.planpick__desc {
  display: block;
  color: var(--ink-3);
  font-size: .84rem;
  line-height: 1.45;
  margin-top: 4px;
}

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
}

.consent input { margin-top: 3px; }

@media (max-width: 640px) {
  .planpick { grid-template-columns: 1fr; }
}

/*
 * ── Calendar month grid ──────────────────────────────────────────────────
 *
 * Ported from decks-engine's kalendarz.html (.cal/.dow/.grid/.cell, status as
 * a chip's left border) plus CalendarGrid.tsx's "today" cell treatment
 * (gradient into the surface colour, translucent inset outline, inset top
 * shadow) — see dashboard/src/screens/calendar-month.ts for the full port
 * note. Palette translated onto the product's own tokens (--surface,
 * --line, --ink, --accent, ...) instead of the source's literal cream/navy
 * hex values, so it themes with the tenant and the dark-mode block above.
 */
.cal-month {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.cal-month__dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--ink);
  color: var(--surface);
}
.cal-month__dow-cell {
  padding: var(--sp-2);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-align: center;
}
.cal-month__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.cal-month__cell {
  min-height: 104px;
  border-inline-end: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: var(--sp-1) var(--sp-2);
  font-size: .78rem;
  position: relative;
  background: var(--surface);
}
.cal-month__cell--pad { background: var(--surface-2); }
.cal-month__cell--past { opacity: .55; }
/* Today: gradient fading into the surface + translucent inset outline + inset top shadow. */
.cal-month__cell--today {
  background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 55%);
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: -2px;
  box-shadow: inset 0 3px 0 var(--accent);
}
.cal-month__daynum {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 700;
  font-size: .8rem;
  color: var(--ink-3);
}
.cal-month__cell--today .cal-month__daynum { color: var(--accent); font-size: .86rem; }
.cal-month__today-badge {
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
}
/* Status is never colour-only: every chip below pairs its left-border colour
   with visible text from the labels parameter (.cal-month__chip-status). */
.cal-month__chip {
  display: block;
  margin-top: 3px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--ink-3);
  border-radius: var(--radius-s);
  padding: 2px var(--sp-2);
  font-size: .68rem;
  line-height: 1.3;
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.cal-month__chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(16, 24, 40, 0.08);
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
}
.cal-month__chip-title {
  display: block;
  font-weight: 650;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-month__chip-status { display: block; color: var(--ink-3); font-size: .62rem; }
.cal-month__chip--decision  { border-inline-start-color: var(--warn); }
.cal-month__chip--progress  { border-inline-start-color: var(--accent); }
.cal-month__chip--fix       { border-inline-start-color: var(--danger); }
.cal-month__chip--published { border-inline-start-color: var(--ok); }
.cal-month__chip--stopped   { border-inline-start-color: var(--ink-3); opacity: .7; }

@media (max-width: 640px) {
  /* Same 44px touch-target reasoning as .nav__link/.check above: a day cell's
     tappable surface (the number + its chips) must clear the touch minimum. */
  .cal-month__cell { min-height: 44px; }
  .cal-month__daynum { min-height: 44px; }
}

/* ── operator fleet overview ───────────────────────────────────────────── */
/* One card per workspace. The cells wrap on their own, so the same markup is a
   two-column list at 375 px and a single dense row on a wide screen. */
.operator-fleet .fleet { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.fleet__row {
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  padding: var(--sp-3) var(--sp-4); display: grid; gap: var(--sp-3); min-width: 0;
}
.fleet__row--attention { border-inline-start: 4px solid var(--danger); }
.fleet__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.fleet__name { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.fleet__reasons { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 12rem; }
.fleet__reasons a.badge { text-decoration: none; }
.fleet__cells {
  margin: 0; display: grid; gap: var(--sp-2) var(--sp-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}
.fleet__cell { min-width: 0; }
.fleet__label { color: var(--ink-3); font-size: .76rem; font-weight: 650; }
.fleet__value { margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.fleet__cell--alert .fleet__value, .fleet__cell--alert .fleet__link { color: var(--danger); }
.fleet__link { display: inline-block; min-height: 24px; color: var(--ink); }
.fleet__detail { display: block; color: var(--ink-3); font-size: .76rem; font-weight: 500; }
@media (max-width: 640px) {
  .fleet__cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fleet__link { min-height: 44px; display: inline-flex; align-items: center; }
}