/* ──────────────────────────────────────────────────────────────────────────
   GALVOR CONSOLE — the campaign console wearing the Galvor product skin.

   One plain CSS file. No build step, no Tailwind, no framework. Flask serves
   this file and the Google Fonts stylesheet, and that is the whole front end.

   THEME SYSTEM — lifted verbatim from web/app/globals.css so the console and
   the portal are literally the same colours, not two approximations of one
   idea. Two layers, exactly as in the product:

   1. `--c-*` PRIMITIVES are RGB *channel triplets* ("8 20 37") so any rule can
      take an opacity — rgb(var(--c-surface) / 0.8).
   2. Full-colour aliases (--surface, --on-surface, --primary, …) are
      `rgb(var(--c-*))`, defined once, and follow whichever theme is active.

   :root = dark (the product's default). `.light` overrides the primitives.

   THE COLOUR RULE this sheet follows, on top of the product palette:
     rose     = something did NOT happen and a person has to act on it
     amber    = something happened but it is not finished / needs a decision
     emerald  = done, and done well
     indigo   = in motion — we have engaged this creator and are waiting
     neutral  = nothing has happened yet
   Nothing decorative is rose, so a rose block on the page always means work.
   Colour is never the only signal: every state also prints its words.
   ────────────────────────────────────────────────────────────────────────── */

:root {
  /* surface stack */
  --c-background: 8 20 37;
  --c-surface: 8 20 37;
  --c-surface-dim: 8 20 37;
  --c-deep: 7 9 26;
  --c-sc-lowest: 4 14 31;
  --c-sc-low: 17 28 45;
  --c-sc: 21 32 49;
  --c-sc-high: 31 42 60;
  --c-sc-highest: 42 53 72;
  --c-surface-variant: 42 53 72;
  --c-surface-bright: 47 58 76;
  /* text + lines */
  --c-strong: 255 255 255;
  --c-on-surface: 216 227 251;
  --c-on-variant: 196 197 217;
  --c-outline: 142 143 162;
  --c-outline-variant: 68 70 86;
  /* accents */
  --c-primary: 187 195 255;
  --c-indigo: 43 78 255;
  --c-indigo-bright: 85 112 255;
  --c-emerald: 16 185 129;
  --c-amber: 245 179 66;
  --c-rose: 255 154 143;
  --c-error: 255 180 171;
  --c-secondary: 196 197 221;
  /* effects */
  --glass-stroke: rgba(255, 255, 255, 0.12);
  --glass-stroke-soft: rgba(255, 255, 255, 0.06);
  --panel-grad: linear-gradient(180deg, rgba(21, 32, 49, 0.72), rgba(17, 28, 45, 0.72));
  --sidebar-grad: linear-gradient(180deg, rgba(8, 20, 37, 0.6), rgba(4, 14, 31, 0.6));
  --wash-1: rgba(43, 78, 255, 0.16);
  --wash-2: rgba(43, 78, 255, 0.08);
  --overlay-soft: rgba(255, 255, 255, 0.04);
  --overlay-soft-2: rgba(255, 255, 255, 0.05);
  --track: rgba(255, 255, 255, 0.06);
  --ins-shadow-card: 0 16px 36px -20px rgba(0, 0, 0, 0.8);
  --ins-shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.55);
  --card-border: rgba(255, 255, 255, 0.09);
  --card-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.28);

  /* fonts — one calm sans for everything structural, mono for raw data only
     (file paths, phone numbers, ids). Same pairing as the portal. */
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* radii — the product's scale */
  --r: 0.375rem;
  --r-lg: 0.5rem;
  --r-xl: 0.75rem;
  --sidebar-w: 248px;
}

.light {
  --c-background: 233 238 245;
  --c-surface: 255 255 255;
  --c-surface-dim: 240 243 248;
  --c-deep: 224 230 240;
  --c-sc-lowest: 240 243 249;
  --c-sc-low: 255 255 255;
  --c-sc: 247 249 252;
  --c-sc-high: 238 242 248;
  --c-sc-highest: 228 233 242;
  --c-surface-variant: 232 236 244;
  --c-surface-bright: 203 211 224;
  --c-strong: 14 23 38;
  --c-on-surface: 30 41 59;
  --c-on-variant: 71 85 105;
  --c-outline: 100 116 139;
  --c-outline-variant: 203 213 225;
  --c-primary: 37 56 222;
  --c-indigo: 43 78 255;
  --c-indigo-bright: 37 56 222;
  --c-emerald: 4 120 87;
  --c-amber: 176 116 12;
  --c-rose: 211 60 60;
  --c-error: 196 42 42;
  --c-secondary: 71 85 105;
  --glass-stroke: rgba(15, 23, 42, 0.12);
  --glass-stroke-soft: rgba(15, 23, 42, 0.09);
  --panel-grad: linear-gradient(180deg, #ffffff, #fbfcff);
  --sidebar-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 247, 251, 0.92));
  --wash-1: rgba(43, 78, 255, 0.07);
  --wash-2: rgba(43, 78, 255, 0.04);
  --overlay-soft: rgba(15, 23, 42, 0.04);
  --overlay-soft-2: rgba(15, 23, 42, 0.05);
  --track: rgba(15, 23, 42, 0.08);
  --ins-shadow-card: 0 14px 30px -20px rgba(15, 23, 42, 0.28);
  --ins-shadow-pop: 0 10px 28px rgba(15, 23, 42, 0.16);
  --card-border: rgba(16, 24, 40, 0.09);
  --card-shadow: 0 1px 2px 0 rgba(16, 24, 40, 0.04), 0 1px 3px 0 rgba(16, 24, 40, 0.06);
}

/* Full-colour aliases, theme-following. */
:root {
  --bg: rgb(var(--c-background));
  --deep: rgb(var(--c-deep));
  --surface: rgb(var(--c-surface));
  --sc-lowest: rgb(var(--c-sc-lowest));
  --sc-low: rgb(var(--c-sc-low));
  --sc: rgb(var(--c-sc));
  --sc-high: rgb(var(--c-sc-high));
  --sc-highest: rgb(var(--c-sc-highest));
  --strong: rgb(var(--c-strong));
  --on-surface: rgb(var(--c-on-surface));
  --on-variant: rgb(var(--c-on-variant));
  --outline: rgb(var(--c-outline));
  --outline-variant: rgb(var(--c-outline-variant));
  --primary: rgb(var(--c-primary));
  --indigo: rgb(var(--c-indigo));
  --indigo-bright: rgb(var(--c-indigo-bright));
  --emerald: rgb(var(--c-emerald));
  --amber: rgb(var(--c-amber));
  --rose: rgb(var(--c-rose));
  --error: rgb(var(--c-error));
}

/* ── base ─────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--on-surface);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 23px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* Thin, on-theme scrollbars so dense data screens stay premium. */
* { scrollbar-width: thin; scrollbar-color: rgb(var(--c-surface-bright)) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: rgb(var(--c-surface-bright)); border-radius: 999px; }

::selection { background: var(--indigo); color: #fff; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Real focus rings, on everything, in both themes. */
:focus-visible {
  outline: 2px solid var(--indigo-bright);
  outline-offset: 2px;
  border-radius: var(--r);
}

code, .mono { font-family: var(--mono); font-size: 13px; font-weight: 500; }
code {
  background: rgb(var(--c-sc-lowest));
  border: 1px solid var(--glass-stroke-soft);
  color: var(--on-surface);
  padding: 1px 6px;
  border-radius: var(--r);
  overflow-wrap: anywhere;
}

/* ── app frame: fixed left rail + offset content column ───────────────── */

.rail {
  position: fixed;
  top: 0; left: 0;
  z-index: 40;
  width: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--glass-stroke);
  background-color: var(--bg);
  background-image: var(--sidebar-grad);
  backdrop-filter: blur(12px);
}

.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 80px;
  padding: 0 24px;
  border-bottom: 1px solid var(--glass-stroke);
  flex-shrink: 0;
  text-decoration: none;
}
.lockup:hover { text-decoration: none; }
.mark {
  width: 36px; height: 36px;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--indigo-bright), var(--indigo));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 18px; letter-spacing: -0.02em;
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(43, 78, 255, 0.35);
}
.lockup .name {
  font-size: 22px; line-height: 1; font-weight: 700;
  letter-spacing: -0.02em; color: var(--strong);
}
.lockup .kicker {
  display: block; margin-top: 4px;
  font-size: 11px; line-height: 15px; color: var(--on-variant);
}

.rail nav { flex: 1; overflow-y: auto; padding: 24px 16px; }
.rail .group-heading {
  font-size: 11px; font-weight: 600; color: var(--on-variant);
  padding: 0 12px; margin-bottom: 8px;
}
.rail nav ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rail nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  font-size: 13.5px;
  color: var(--on-variant);
  text-decoration: none;
  transition: background-color .2s cubic-bezier(.16,1,.3,1), color .2s, border-color .2s;
}
.rail nav a:hover { color: var(--strong); background: var(--overlay-soft-2); text-decoration: none; }
.rail nav a[aria-current="page"] {
  background-image: linear-gradient(90deg, rgb(var(--c-indigo) / .2), rgb(var(--c-indigo) / .04));
  border-color: rgb(var(--c-indigo) / .3);
  color: var(--strong);
  font-weight: 500;
}
.rail .rail-foot {
  flex-shrink: 0;
  padding: 16px 20px;
  border-top: 1px solid var(--glass-stroke);
  font-size: 11px; line-height: 16px;
  color: var(--on-variant);
}
.rail .rail-foot .live { display: flex; align-items: center; gap: 8px; margin-bottom: 4px;
  font-size: 12px; color: var(--on-surface); }
.rail .rail-foot .dot {
  width: 8px; height: 8px; border-radius: 999px; background: var(--emerald);
  flex-shrink: 0;
}

.column { margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }

/* ── page header: the product's sticky topbar ─────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 30;
  background: rgb(var(--c-background) / .85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--glass-stroke);
  padding: 18px 24px;
}
.topbar .crumb { margin-bottom: 4px; }
.topbar h1 { margin-bottom: 0; }

main { padding: 32px 24px 80px; max-width: 1200px; }

/* ── type ─────────────────────────────────────────────────────────────── */

h1 {
  font-size: 26px; line-height: 32px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--strong);
  margin-bottom: 6px;
}
h2 {
  font-size: 20px; line-height: 26px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--strong);
  margin-bottom: 12px;
}
h3 {
  font-size: 16px; line-height: 22px; font-weight: 600;
  letter-spacing: -0.005em; color: var(--strong);
  margin-bottom: 8px;
}

.crumb, .sub { color: var(--on-variant); font-size: 13.5px; line-height: 20px; margin-bottom: 10px; }
.crumb { font-size: 13px; }
.sub:last-of-type { margin-bottom: 0; }
.muted { color: var(--outline); }
.small { font-size: 13.5px; line-height: 20px; }
.hint { color: var(--outline); font-size: 13px; line-height: 19px; margin-top: 6px; }
.hint.inline { margin: 0; }
.bad-text { color: var(--rose); font-weight: 600; }
p + p { margin-top: 8px; }

/* ── cards: the product's flat glass panel ────────────────────────────── */

.card {
  background: var(--sc-low);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  box-shadow: var(--card-shadow);
  padding: 22px;
  margin: 20px 0;
}
.card > h2:first-child, .card > h1:first-child { margin-top: 0; }

/* ── ALARM: something did not happen ──────────────────────────────────
   The loudest thing on the page, by design. An operator missing a rejected
   creator is the exact failure this console exists to prevent, so a rejection
   gets a rose panel, a rose rule down its left edge, an upper-case eyebrow,
   and its own elevation. It is not dismissible and it is drawn first. */

.alarm {
  position: relative;
  background: rgb(var(--c-rose) / .08);
  border: 1px solid rgb(var(--c-rose) / .35);
  border-left: 4px solid var(--rose);
  border-radius: var(--r-xl);
  padding: 18px 20px;
  margin: 20px 0;
  box-shadow: var(--ins-shadow-card);
}
.alarm::before {
  content: "Needs your attention";
  display: block;
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 8px;
}
.alarm h2, .alarm h3 { color: var(--rose); margin-bottom: 8px; }
.alarm h2 { font-size: 22px; line-height: 28px; font-weight: 700; }
.alarm > p { color: var(--on-surface); }
.alarm .grid {
  background: rgb(var(--c-sc-lowest) / .7);
  border: 1px solid rgb(var(--c-rose) / .25);
  border-radius: var(--r-lg);
  margin-top: 14px;
  overflow: hidden;
}
.alarm .grid th {
  color: var(--rose);
  background: rgb(var(--c-rose) / .08);
  border-bottom-color: rgb(var(--c-rose) / .25);
}
.alarm .grid td { border-bottom-color: var(--glass-stroke-soft); }
/* The reason a row was refused is the payload of the whole screen. */
.alarm .grid td:nth-child(2) { color: var(--rose); font-weight: 600; }
.alarm ul.plain li { border-bottom-color: rgb(var(--c-rose) / .2); }
.alarm ul.plain strong { color: var(--strong); }

/* The spreadsheet row number, in mono, so it reads as a coordinate into a
   file RD can open — not as prose. */
.rownum {
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;
  white-space: nowrap;
  color: var(--strong);
}

/* ── notes ───────────────────────────────────────────────────────────── */

.note {
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  padding: 10px 14px;
  margin: 10px 0;
  font-size: 14px; line-height: 21px;
}
.note-ok    { background: rgb(var(--c-emerald) / .12); border-color: rgb(var(--c-emerald) / .3); color: var(--emerald); }
.note-warn  { background: rgb(var(--c-amber)   / .12); border-color: rgb(var(--c-amber)   / .3); color: var(--amber); }
.note-error { background: rgb(var(--c-rose)    / .12); border-color: rgb(var(--c-rose)    / .35); color: var(--rose); font-weight: 600; }
.note a { color: inherit; text-decoration: underline; }
.flashes { margin-bottom: 18px; }

/* ── tables ──────────────────────────────────────────────────────────── */

.table-scroll { overflow-x: auto; margin: 12px -4px; padding: 0 4px; }

table.grid { width: 100%; border-collapse: collapse; margin: 12px 0; }
.grid th {
  text-align: left;
  font-size: 11px; line-height: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--on-variant);
  padding: 10px 12px;
  border-bottom: 1px solid var(--glass-stroke);
  white-space: nowrap;
}
.grid td {
  padding: 12px;
  border-bottom: 1px solid var(--glass-stroke-soft);
  vertical-align: top;
}
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: var(--overlay-soft); }
.grid td.tick { width: 34px; padding-right: 0; }
.grid td strong { color: var(--strong); font-weight: 600; }

/* A short identity cell (a brand, a creator's name, a link) must not be broken
   across four lines just because a neighbouring column is greedy; a long
   machine string (a brief's file path) breaks anywhere so it never dictates
   the width of the whole table. Both were real on the send queue. */
.grid td strong, .grid td > a, .grid td:first-child { white-space: nowrap; }
.grid td.mono { white-space: nowrap; }
/* …except a file path, which breaks anywhere rather than setting the width of
   every other column (this shredded the send queue's name and time columns). */
.grid td.mono.muted { white-space: normal; overflow-wrap: anywhere; }
.grid td.small { min-width: 150px; }
.grid td.counts { min-width: 210px; }

/* A person who cannot be sent to is dimmed and has no checkbox at all — see
   the note in campaign.html for why the box is absent rather than disabled. */
.row-blocked td { color: var(--outline); background: rgb(var(--c-amber) / .04); }
.row-blocked:hover td { background: rgb(var(--c-amber) / .07); }
.row-why td {
  border-bottom: 1px solid var(--glass-stroke);
  color: var(--amber);
  background: rgb(var(--c-amber) / .1);
  padding-top: 2px;
  font-weight: 500;
}
.row-why:hover td { background: rgb(var(--c-amber) / .1); }
.no { color: var(--outline); font-family: var(--mono); }

/* ── status pills ─────────────────────────────────────────────────────
   Four colour bands come from the server (good / warn / bad / wait). The
   template also stamps the raw state as a class, which lets the three
   "in motion with the creator" states lift out of neutral into indigo
   WITHOUT the server's tone map changing:

     emerald  Approved
     amber    Edits asked for
     rose     Reshoot needed · They said no · Opted out — do not message
     indigo   Brief sent · Waiting for their video · Video being checked
     neutral  Not contacted yet  (nothing has happened)

   Every pill prints its words, so none of this depends on seeing colour. */

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; line-height: 16px; font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--glass-stroke);
  background: rgb(var(--c-sc));
  color: var(--on-variant);
  margin: 2px 5px 2px 0;
  white-space: nowrap;
}
.pill::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; opacity: .85; flex-shrink: 0;
}
.pill-good { background: rgb(var(--c-emerald) / .15); color: var(--emerald); border-color: rgb(var(--c-emerald) / .35); }
.pill-warn { background: rgb(var(--c-amber)   / .15); color: var(--amber);   border-color: rgb(var(--c-amber)   / .35); }
.pill-bad  { background: rgb(var(--c-rose)    / .15); color: var(--rose);    border-color: rgb(var(--c-rose)    / .4); font-weight: 600; }
.pill-wait { background: rgb(var(--c-sc-highest) / .7); color: var(--on-variant); border-color: var(--glass-stroke); }

/* In motion: we have engaged this creator and the ball is in their court. */
.pill.st-brief_sent,
.pill.st-awaiting_video,
.pill.st-in_review {
  background: rgb(var(--c-indigo) / .18);
  color: var(--primary);
  border-color: rgb(var(--c-indigo) / .45);
}
/* Nothing has happened yet — deliberately the quietest chip on the page. */
.pill.st-pending {
  background: rgb(var(--c-sc-highest) / .55);
  color: var(--on-variant);
  border-color: var(--glass-stroke-soft);
}

.counts { margin: 8px 0 12px; }
.counts .pill { font-size: 12px; padding: 4px 11px; }

/* ── forms ───────────────────────────────────────────────────────────── */

.field { margin-bottom: 18px; max-width: 640px; }
.field.narrow { max-width: 280px; }
label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 6px;
}
input[type=text], input[type=number], input:not([type]), textarea, input[type=file] {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--sans); font-size: 15px; line-height: 22px;
  color: var(--on-surface);
  background: rgb(var(--c-sc-lowest));
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r-lg);
  transition: border-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: var(--outline); }
input[type=text]:focus, input[type=number]:focus, input:not([type]):focus, textarea:focus, input[type=file]:focus {
  border-color: var(--indigo-bright);
  box-shadow: 0 0 0 3px rgb(var(--c-indigo) / .22);
  outline: none;
}
textarea { font-family: var(--mono); font-size: 13px; line-height: 20px; }
input[type=file] { padding: 9px 12px; cursor: pointer; }
input[type=file]::file-selector-button {
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--on-surface);
  background: rgb(var(--c-sc-high));
  border: 1px solid var(--glass-stroke);
  border-radius: var(--r);
  padding: 6px 12px; margin-right: 12px;
  cursor: pointer;
}

/* Big enough to hit, native enough to be driven entirely from the keyboard. */
input[type=checkbox] {
  width: 18px; height: 18px;
  accent-color: var(--indigo);
  cursor: pointer;
  margin-top: 2px;
}
input[type=checkbox]:focus-visible { outline: 2px solid var(--indigo-bright); outline-offset: 3px; }

/* ── buttons ─────────────────────────────────────────────────────────── */

button, .button {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600; letter-spacing: 0;
  padding: 10px 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-stroke);
  background: rgb(var(--c-sc-high));
  color: var(--on-surface);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s cubic-bezier(.16,1,.3,1);
}
button:hover, .button:hover {
  border-color: var(--primary); color: var(--primary); text-decoration: none;
}
button.primary {
  background: var(--indigo);
  border-color: rgb(var(--c-primary) / .2);
  color: #fff;
}
button.primary:hover {
  background: var(--indigo);
  border-color: rgb(var(--c-primary) / .4);
  color: #fff;
  box-shadow: 0 0 30px rgba(43, 78, 255, 0.5);
  transform: translateY(-1px);
}
/* The irreversible one. A different colour from every other button in the
   console, and it only ever appears on the confirm screen. */
button.primary.danger {
  background: var(--error);
  border-color: var(--error);
  color: rgb(var(--c-deep));
}
.light button.primary.danger { color: #fff; }
button.primary.danger:hover {
  background: var(--rose); border-color: var(--rose);
  box-shadow: 0 0 30px rgb(var(--c-rose) / .45);
}

.toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 14px 0;
  padding: 14px;
  background: rgb(var(--c-sc-lowest) / .6);
  border: 1px solid var(--glass-stroke-soft);
  border-radius: var(--r-lg);
}

/* ── lists ───────────────────────────────────────────────────────────── */

ul.plain { list-style: none; }
ul.plain li { padding: 7px 0; border-bottom: 1px solid var(--glass-stroke-soft); }
ul.plain li:last-child { border-bottom: 0; }
ul.plain strong { color: var(--strong); }

ul.findings { list-style: none; margin: 8px 0; }
ul.findings li {
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-stroke-soft);
  font-size: 14px; line-height: 21px;
}
ul.findings li:last-child { border-bottom: 0; }
.sev {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: var(--r);
  margin-right: 8px;
  border: 1px solid var(--glass-stroke);
  background: rgb(var(--c-sc));
  color: var(--on-variant);
  vertical-align: 1px;
}
.sev-critical, .sev-high, .sev-major {
  background: rgb(var(--c-rose) / .15); color: var(--rose); border-color: rgb(var(--c-rose) / .4);
}
.sev-medium, .sev-minor {
  background: rgb(var(--c-amber) / .15); color: var(--amber); border-color: rgb(var(--c-amber) / .35);
}

/* ── one video submission ────────────────────────────────────────────── */

.submission {
  background: rgb(var(--c-sc-lowest) / .6);
  border: 1px solid var(--glass-stroke-soft);
  border-radius: var(--r-lg);
  padding: 16px;
  margin-bottom: 12px;
}
.submission:last-child { margin-bottom: 0; }
.submission h3 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.submission h3 .pill { margin: 0; }

/* ── misc ────────────────────────────────────────────────────────────── */

.empty {
  color: var(--on-variant);
  background: rgb(var(--c-sc-lowest) / .5);
  border: 1px dashed var(--glass-stroke);
  border-radius: var(--r-lg);
  padding: 18px;
  font-size: 14px;
}

details {
  margin: 12px 0;
  border: 1px solid var(--glass-stroke-soft);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  background: rgb(var(--c-sc-lowest) / .5);
}
summary {
  cursor: pointer;
  color: var(--primary);
  font-size: 13px; font-weight: 600;
}
summary:hover { text-decoration: underline; }
details[open] summary { margin-bottom: 8px; }

.foot {
  padding: 0 24px 40px;
  color: var(--outline);
  font-family: var(--mono);
  font-size: 12px; line-height: 18px;
  max-width: 1200px;
}

/* ── responsive: the rail becomes a top strip, nothing scrolls sideways ─ */

@media (max-width: 900px) {
  .rail {
    position: static;
    width: auto; height: auto;
    flex-direction: row; align-items: center;
    gap: 8px;
    border-right: 0;
    border-bottom: 1px solid var(--glass-stroke);
    padding-right: 12px;
    overflow-x: auto;
  }
  .lockup { height: 64px; padding: 0 16px; border-bottom: 0; }
  .lockup .kicker { display: none; }
  .mark { width: 30px; height: 30px; font-size: 15px; }
  .lockup .name { font-size: 19px; }
  .rail nav { padding: 0; overflow: visible; flex: 0 0 auto; }
  .rail .group-heading { display: none; }
  .rail nav ul { flex-direction: row; gap: 6px; }
  .rail nav a { padding: 8px 12px; white-space: nowrap; }
  .rail .rail-foot { display: none; }
  .column { margin-left: 0; }
  .topbar { padding: 14px 16px; }
  main { padding: 20px 16px 64px; }
  .foot { padding: 0 16px 32px; }
  h1 { font-size: 22px; line-height: 28px; }
  h2 { font-size: 18px; line-height: 24px; }
  .alarm { padding: 14px 16px; border-radius: var(--r-lg); }
  .card { padding: 16px; border-radius: var(--r-lg); }
  .toolbar { padding: 12px; }
  .toolbar button, .toolbar .button { flex: 1 1 auto; }
  .field, .field.narrow { max-width: 100%; }
  /* Dense tables stay readable by scrolling INSIDE their wrapper — the page
     itself never scrolls sideways. */
  .table-scroll { margin: 12px 0; padding: 0; }
  .grid { min-width: 560px; }
  .grid th, .grid td { padding: 10px 8px; }
}

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

/* ── the sign-in gate ─────────────────────────────────────────────────────
   login.html is a standalone page (it does not extend base.html, on purpose
   — the frame would leak the nav to someone who has not signed in), so it
   gets its own small block here rather than reusing .card. Same tokens, same
   type, same radii as everything else; it just has no rail. */

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background-image: radial-gradient(ellipse at top, var(--wash-1), var(--bg) 55%, var(--bg));
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--sc-low);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xl);
  box-shadow: var(--ins-shadow-card);
  padding: 32px 28px;
}
.login-mark {
  font-size: 26px; line-height: 32px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--strong);
  margin-bottom: 4px;
}
.login-mark span { color: var(--primary); }
.login-sub { color: var(--on-variant); font-size: 13.5px; line-height: 20px; margin-bottom: 20px; }
.login-error {
  background: rgb(var(--c-rose) / .12);
  border: 1px solid rgb(var(--c-rose) / .35);
  border-radius: var(--r-lg);
  color: var(--rose);
  font-size: 14px; font-weight: 600;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.login-card label { margin-top: 14px; }
.login-card input { margin-bottom: 2px; }
.login-card button { width: 100%; margin-top: 20px; background: var(--indigo); border-color: rgb(var(--c-primary) / .2); color: #fff; }
.login-card button:hover { color: #fff; border-color: rgb(var(--c-primary) / .4); box-shadow: 0 0 30px rgba(43, 78, 255, 0.5); }