/* ============================================================================
   BRACE owners portal — the estate office.
   Built to the brand bible — charcoal ground, white geometric-light type,
   the clay orange as the single accent. Same tokens as the landing page.
   ========================================================================== */
:root{
  /* Brand bible tokens — identical to the landing page. */
  --bg-sunken:#1F2120; --bg:#2A2C29; --bg-raised:#33352F; --bg-raised2:#3C3E37;
  --clay:#F05A28; --clay-dim:#C24A22; --ink-on-clay:#1A1109;
  --text-1:rgba(255,255,255,.95); --text-2:rgba(255,255,255,.64); --text-3:rgba(255,255,255,.40);
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --panel:#FFFFFF;
  --tiffany:#4ECDC4; --ink-on-tiffany:#08201E;
  --champagne:#CBBE93; --ink-on-champagne:#241E10;
  --destructive:#E0705F; --hit:#6FBE72;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --f:'Inter',system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);

  /* legacy aliases used through this file */
  --c-midnight:var(--bg); --c-midnight-raised:var(--bg-raised); --c-midnight-deep:var(--bg-sunken);
  --c-midnight-hairline:var(--line-strong);
  --c-ivory:var(--text-1); --c-ivory-90:var(--text-1); --c-ivory-72:var(--text-2);
  --c-ivory-60:var(--text-2); --c-ivory-48:var(--text-3);
  --c-sage:var(--text-2); --c-sage-hairline:var(--line-strong);
  --c-brass:var(--clay); --c-brass-bright:var(--clay-dim); --c-brass-deep:var(--clay-dim);
  --c-on-brass:var(--ink-on-clay); --c-focus:var(--clay);
  --f-display:var(--f); --f-body:var(--f); --f-mono:var(--f);
  --e-1:none; --e-2:none;
}
*,*::before,*::after { box-sizing: border-box; } * { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body { font-family: var(--f); font-size: 16px; line-height: 1.55; color: var(--c-ivory-72);
  background: var(--c-midnight); -webkit-font-smoothing: antialiased; min-height: 100vh; }
svg { display: block; } a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-sm); }

.center-load { min-height: 100vh; display: flex; align-items: center; justify-content: center; color: var(--c-ivory-48); }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }

/* ---------- Sign-in / gate cards ---------- */
.gate { min-height: 100vh; display: flex; justify-content: center; padding: 40px 16px; overflow-y: auto;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(240,90,40,.08), transparent 62%),
    var(--c-midnight); }
.gate-card { width: 100%; max-width: 432px; margin: auto; background: var(--c-midnight-raised);
  border: 1px solid var(--c-midnight-hairline); border-radius: var(--r-lg); padding: 32px 28px; box-shadow: var(--e-2); }
.gate-mark { height: 42px; width: auto; margin-bottom: 14px; }
/* the A is the way home from every screen behind the gate */
.gate-home { display: inline-block; border-radius: var(--r-sm); }
.gate-home:hover { opacity: .78; }
.gate-card.centred .gate-home { display: block; }
.gate-lede { font-size: 15px; color: var(--text-2); line-height: 1.55; margin-bottom: 18px; }
.topbar .brand img { height: 20px; width: auto; }
.gate-brand .word { font-family: var(--f-display); font-weight: 300; font-size: 1.5rem;
  letter-spacing: 0.14em; color: var(--c-ivory); }
.gate-tag { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-ivory-48); margin-bottom: 24px; }
.gate h1 { font-weight: 600; font-size: 28px; letter-spacing: -.5px; color: var(--c-ivory-90); margin-bottom: 14px; }
.field { margin-bottom: 12px; }
.field input, .field textarea { width: 100%; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--c-midnight-deep); border: 1px solid var(--c-midnight-hairline);
  color: var(--c-ivory-90); }
.field textarea { resize: vertical; font: inherit; font-size: 13px; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-ivory-48); }
.gate .err { color: var(--c-brass-bright); font-size: 0.85rem; margin: 4px 0 10px; min-height: 1.2em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px 20px; border-radius: var(--r-lg); background: var(--clay); color: var(--ink-on-clay);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: background 160ms var(--ease-out); }
.btn:hover { background: var(--c-brass-bright); }
.btn[disabled] { opacity: 0.6; cursor: default; }
.btn-ghost { background: none; border: 1px solid var(--c-midnight-hairline); color: var(--c-ivory-72); }
.btn-ghost:hover { background: rgba(242,244,247,0.06); }
.gate-foot { font-size: 0.8rem; color: var(--c-ivory-48); margin-top: 18px; line-height: 1.5; }
.gate-foot a { color: var(--c-ivory-60); border-bottom: 1px solid var(--c-sage-hairline); }

/* ---------- Portal shell ---------- */
.topbar { display: flex; align-items: center; gap: 14px; padding: 16px 24px;
  border-bottom: 1px solid var(--c-midnight-hairline); position: sticky; top: 0; z-index: 10;
  background: rgba(42,44,41,.92); backdrop-filter: blur(8px); }
.topbar .brand { display: flex; align-items: center; gap: 10px; color: var(--c-brass); }
.topbar .word { font-family: var(--f-display); font-weight: 300; font-size: 1.2rem; letter-spacing: 0.14em; color: var(--c-ivory); }
.topbar .scope { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-ivory-48); border-left: 1px solid var(--c-midnight-hairline); padding-left: 14px; }
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: 12px; font-size: 0.82rem; color: var(--c-ivory-48); min-width: 0; }
.topbar .who span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .signout { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--c-ivory-60);
  border: 1px solid var(--c-midnight-hairline); border-radius: var(--r-pill); padding: 7px 14px;
  white-space: nowrap; }
.topbar .signout:hover { background: rgba(242,244,247,0.06); }

main { max-width: 1160px; margin: 0 auto; padding: 40px 24px 80px; }
.page-head { margin-bottom: 30px; }
.page-head .over { font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-sage); margin-bottom: 8px; }
.page-head h1 { font-weight: 600; font-size: clamp(28px, 4vw, 40px); letter-spacing: -.8px;
  color: var(--c-ivory); line-height: 1.1; }
.page-head h1 em { font-style: normal; color: var(--c-brass-bright); }
.page-head p { max-width: 560px; margin-top: 10px; font-size: 0.95rem; color: var(--c-ivory-60); }

/* ---------- View switch in the bar ---------- */
.topbar .views { display: flex; align-items: center; gap: 4px; }
.topbar .views a { font-size: 13px; font-weight: 500; color: var(--text-3);
  padding: 7px 13px; border-radius: var(--r-pill); white-space: nowrap; }
.topbar .views a:hover { color: var(--text-2); background: rgba(255,255,255,.05); }
.topbar .views a.on { color: var(--text-1); background: var(--bg-raised); }
.topbar .views a b { font-weight: 500; color: var(--clay); font-variant-numeric: tabular-nums; }

/* ---------- The rail: five states, left to right ----------
   A stage with something in it lights its clay. Everything else is a hairline
   on the ground, so the eye reads the shape of the backlog in one pass. */
.rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  margin-bottom: 22px; }
.stop { min-width: 0; }
.stop-line { display: flex; align-items: center; gap: 8px; height: 14px; margin-bottom: 14px; }
.clay { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto;
  background: var(--line-strong); transition: background .3s var(--ease-out); }
.clay.on { background: var(--clay); }
.join { flex: 1; height: 1px; background: var(--line); }
.stop .num { font-size: clamp(28px, 4vw, 40px); font-weight: 500; letter-spacing: -.03em;
  line-height: 1; color: var(--text-1); font-variant-numeric: tabular-nums; }
.stop .cap { font-size: 13px; color: var(--text-2); margin-top: 8px; }
.stop .sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.tally { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13px;
  color: var(--text-3); padding: 14px 0 26px; border-top: 1px solid var(--line); }
.tally .warn { color: var(--destructive); }

/* ---------- Panels ---------- */
.grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 18px; align-items: start; }
.panel { background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px; }
.panel .p-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 18px; }
.panel .p-title { font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); }
.panel .p-act { font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); }
.panel .p-act:hover { color: var(--text-1); }
.empty { font-size: 14px; color: var(--text-3); line-height: 1.55; }

/* ---------- Run buttons ---------- */
.runs { display: grid; gap: 16px; }
.run { display: grid; grid-template-columns: 172px minmax(0, 1fr); gap: 16px; align-items: start; }
.run .btn { width: 100%; padding: 11px 14px; font-size: 13px; }
.run p { font-size: 13px; color: var(--text-3); line-height: 1.5; padding-top: 2px; }
.foot-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-3); line-height: 1.55; }

/* Labelling: clip on the left, instrument panel on the right. */
.aiwrap { flex: 1; min-width: 0; display: flex; gap: 22px; align-items: flex-start;
  flex-wrap: wrap; }
.aileft { flex: 1 1 300px; min-width: 0; }
.aimetrics { flex: 0 0 200px; display: grid; gap: 8px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(0,0,0,.14); }
.metric { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; font-size: 13px; }
.metric .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); }
.metric .v { color: var(--text-1); font-variant-numeric: tabular-nums;
  text-transform: capitalize; white-space: nowrap; }
.metric .na { color: var(--text-3); font-size: 11px; text-transform: none; }

.split-line { font-size: 12px; color: var(--text-3); margin: -6px 0 14px;
  line-height: 1.5; }
.split-line b { color: var(--text-1); font-variant-numeric: tabular-nums; }
/* ---------- Dataset strategy ladder ---------- */
.level .lv-sub { font-size: 13px; color: var(--text-2); line-height: 1.55;
  margin: -8px 0 14px; }
.level .lv-pct { font-size: 13px; color: var(--text-1);
  font-variant-numeric: tabular-nums; }
.lv-bar { height: 6px; border-radius: var(--r-pill); background: rgba(255,255,255,.07);
  overflow: hidden; margin-bottom: 12px; }
.lv-bar span { display: block; height: 100%; background: var(--clay);
  border-radius: var(--r-pill); transition: width .4s ease; }
.level-done .lv-bar span { background: #4caf7d; }
.lv-nums { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px;
  color: var(--text-3); align-items: baseline; }
.lv-nums b { color: var(--text-1); font-weight: 600; }
.lv-nums .linky { margin-left: auto; }

/* ---------- Coverage matrix ---------- */
.matrix { width: 100%; border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums; }
.matrix th { text-align: left; font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
  padding: 6px 14px 8px 0; border-bottom: 1px solid var(--line); }
.matrix td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--line);
  color: var(--text-2); }
.matrix td:first-child { color: var(--text-1); text-transform: capitalize; }
.matrix tr:last-child td { border-bottom: none; }
.matrix .dim { color: var(--text-3); }
.matrix-tot td { color: var(--text-1); border-top: 1px solid var(--line-strong); }

/* ---------- Activity ---------- */
.line { display: flex; gap: 12px; font-size: 13px; padding: 6px 0;
  color: var(--text-3); font-variant-numeric: tabular-nums; }
.line .t { flex: 0 0 auto; color: var(--text-3); opacity: .7; }
.line .m { min-width: 0; overflow-wrap: anywhere; }
.line.fresh .m { color: var(--text-1); }
.line.good .m { color: var(--hit); }
.line.bad .m { color: var(--destructive); }

/* ---------- Review queue ---------- */
.queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.cardv { background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out); }
.cardv.gone { opacity: 0; transform: scale(.97); }
.cardv .thumb { position: relative; display: block; background: var(--bg-sunken);
  aspect-ratio: 16 / 9; }
.cardv .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cardv .dur { position: absolute; right: 8px; bottom: 8px; font-size: 12px;
  font-variant-numeric: tabular-nums; color: var(--text-1);
  background: rgba(31,33,32,.86); border-radius: var(--r-sm); padding: 2px 7px; }
.cardv .body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.cardv .score { font-size: 12px; color: var(--text-3); margin-bottom: 8px;
  font-variant-numeric: tabular-nums; }
.cardv .score b { font-size: 20px; font-weight: 500; color: var(--clay); letter-spacing: -.02em; }
.cardv .score span { margin-left: 2px; }
.cardv h2 { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--text-1);
  letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; }
.cardv .meta { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.cardv .notes { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-top: 10px; }
.cardv .judge { display: flex; gap: 8px; margin-top: auto; padding-top: 16px; }
.cardv .judge .btn { width: auto; flex: 1; padding: 9px 12px; font-size: 13px; }

@media (max-width: 900px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  .rail { grid-template-columns: repeat(2, 1fr); row-gap: 22px; }
  .stop:nth-child(2) .join { display: none; }
  /* Below this the bar is a row too many: wordmark, section, three tabs, an
     email and two buttons. The tabs drop to their own line rather than push
     the sign-out button off the side of the page. */
  .topbar { flex-wrap: wrap; row-gap: 10px; }
  .topbar .scope { display: none; }
  .topbar .views { order: 3; width: 100%; overflow-x: auto; }
}
@media (max-width: 560px) {
  .topbar { padding: 14px 16px; gap: 10px; }
  .topbar .scope { display: none; }
  .topbar .who span { display: none; }
  main { padding: 28px 16px 64px; }
  .run { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .queue { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================================
   Two-factor gate — sign in, set-up, challenge
   Separation is a hairline or a step up the ramp, never a nested box.
   ========================================================================== */
.gate-card.centred { text-align: center; }
.gate-card.centred .gate-mark { margin-left: auto; margin-right: auto; }
.gate-card.centred .gate-lede { margin-left: auto; margin-right: auto; max-width: 34ch; }

.gate-card .rule { height: 1px; background: var(--line); margin: 26px 0; }

.step-label {
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: 16px;
}

/* the QR sits on its own plate — the only white on the page, so it is framed
   rather than dropped straight onto the charcoal */
.qr-plate {
  width: 216px; margin: 0 auto; padding: 12px; border-radius: var(--r-xl);
  background: var(--panel);
  box-shadow: 0 0 0 1px var(--line-strong);
}
.qr-plate .qr { width: 192px; height: 192px; display: block; }
.qr-plate .qr svg, .qr-plate .qr img { width: 100%; height: 100%; display: block; }

/* the code field: the one place a figure dominates */
.gate-card input[inputmode="numeric"] {
  width: 100%; text-align: center;
  font-size: 32px; font-weight: 500; line-height: 1;
  letter-spacing: .32em; text-indent: .32em; font-variant-numeric: tabular-nums;
  padding: 18px 12px; border-radius: var(--r-lg);
  background: var(--bg-sunken); border: 1px solid var(--line-strong); color: var(--text-1);
  transition: border-color .18s var(--ease-out);
}
.gate-card input[inputmode="numeric"]:focus { border-color: var(--clay); outline: none; }
.gate-card input[inputmode="numeric"]::placeholder { color: rgba(255,255,255,.18); }
.gate-card form .btn { width: 100%; margin-top: 14px; }
.gate-card .err:empty { display: none; }
.gate-card .err { margin-top: 12px; }

/* the fallback, folded away */
.alt { margin-top: 18px; }
.alt summary {
  cursor: pointer; list-style: none; font-size: 13px; color: var(--text-3);
  transition: color .18s var(--ease-out);
}
.alt summary:hover { color: var(--text-2); }
.alt summary::-webkit-details-marker { display: none; }
.alt-body { padding-top: 14px; }
.secret-row { display: flex; gap: 8px; align-items: stretch; }
.secret-row code {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center;
  padding: 10px 12px; border-radius: var(--r-sm);
  background: var(--bg-sunken); border: 1px solid var(--line);
  color: var(--text-2); font-size: 13px; letter-spacing: .06em; word-break: break-all;
}
.btn-copy {
  flex: 0 0 auto; padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: none; color: var(--text-2);
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  transition: color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.btn-copy:hover { color: var(--text-1); border-color: var(--text-3); }

.gate-card.centred .gate-foot { text-align: center; margin-top: 22px; }

/* ---------- Sources ----------
   .row and .dot went out with the old dashboard and nothing used them until
   now, so they are rebuilt here rather than left as dead selectors. */

/* Several panels stacked inside one column of .grid. The explicit single
   track matters: a grid with no template gets an implicit `auto` column,
   whose floor is the widest row's min-content — which is wider than the
   1.35fr track it sits in, so the panels paint out over the column beside
   them. minmax(0, 1fr) lets the track be narrower than its contents, and the
   rows then ellipsis as intended. */
.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

.row { display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-top: 1px solid var(--line); }
.row:first-of-type { border-top: none; }
.row .main { flex: 1; min-width: 0; }
.row .t { font-size: 14px; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .s { font-size: 12px; color: var(--text-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
  background: var(--line-strong); }
.dot.on { background: var(--clay); }
.dot.off { background: var(--text-3); opacity: .4; }

/* Clip-check selection */
label.row, .pickside { cursor: pointer; }
.row .tick { width: 16px; height: 16px; accent-color: var(--clay); flex: 0 0 auto; }
.cliprow { align-items: flex-start; }
.cliprow .pickside { padding-top: 4px; }
.clipvid { width: 100%; max-width: 400px; aspect-ratio: 16 / 9; background: #000;
  border-radius: var(--r-md); display: block; margin-bottom: 8px; }

/* Triage clip cards: one uniform card per cut whether or not its preview has
   rendered — the media box holds its 16:9 shape either way, so the grid
   never staggers into a mix of players and bare text rows. */
.clipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px 14px; }
.clipgrid .grouphead { grid-column: 1 / -1; }
.clipcard { border: 1px solid var(--line); border-radius: var(--r-md);
  overflow: hidden; background: rgba(0,0,0,.14); }
.clipmedia { position: relative; aspect-ratio: 16 / 9; background: #000; }
.clipmedia video, .clipmedia img { position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: contain; }
.clipmedia .rendering { position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center; text-align: center;
  padding: 0 16px; font-size: 12px; color: var(--text-3); }
.clipmedia .rendering.badge { inset: auto 8px 8px auto; padding: 3px 9px;
  background: rgba(0,0,0,.62); border-radius: var(--r-pill); font-size: 11px; }
.clippick { position: absolute; top: 8px; left: 8px; z-index: 2;
  display: grid; place-items: center; width: 26px; height: 26px;
  background: rgba(0,0,0,.55); border-radius: var(--r-sm); cursor: pointer; }
.clippick .tick { width: 15px; height: 15px; accent-color: var(--clay); }
.clipcap { padding: 9px 12px 11px; }
.clipcap .t { font-size: 13px; color: var(--text-1); }
.clipcap .s { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.mini-btn { width: auto; display: inline-flex; padding: 7px 14px; font-size: 11px; }

.row.src.off { opacity: .5; }
.row .end { margin-left: auto; flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; }
.perm { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 3px 9px; white-space: nowrap; }
.perm-granted { color: var(--hit); border-color: rgba(111,190,114,.35); }
.perm-declined { color: var(--destructive); border-color: rgba(224,112,95,.35); }
.perm-requested { color: var(--champagne); border-color: rgba(203,190,147,.35); }
.linky { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* Small inline select in a panel head — the batch-size dial. */
.mini { font-size: 12px; color: var(--text-2); background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; }

/* ============================================================================
   CRM shell — sidebar + working area. The old top bar survives only for the
   gate screens, which never use it; the dashboard lives in here.
   ========================================================================== */
.crm { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100dvh; }

.side { display: flex; flex-direction: column; gap: 26px; padding: 22px 18px;
  border-right: 1px solid var(--c-midnight-hairline); background: var(--bg-raised);
  position: sticky; top: 0; height: 100dvh; }
.side .brand img { height: 18px; width: auto; display: block; }

.side .views { display: flex; flex-direction: column; gap: 4px; }
.side .views a { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--text-3);
  padding: 9px 12px; border-radius: var(--r-md); }
.side .views a:hover { color: var(--text-2); background: rgba(255,255,255,.05); }
.side .views a.on { color: var(--text-1); background: var(--bg-sunken); }
.side .views a b { font-weight: 600; font-size: 11.5px; color: var(--clay);
  font-variant-numeric: tabular-nums; background: rgba(224,112,95,.12);
  border-radius: var(--r-pill); padding: 2px 8px; }

.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--line); }
.side-line { font-size: 12px; color: var(--text-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* .signout's look lived under .topbar, which the CRM shell no longer has. */
.side-foot .signout { display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; font-size: 0.8rem; color: var(--c-ivory-60);
  border: 1px solid var(--c-midnight-hairline); border-radius: var(--r-pill);
  padding: 7px 14px; white-space: nowrap; }
.side-foot .signout:hover { background: rgba(242,244,247,0.06); }

.crm main { max-width: none; margin: 0; padding: 34px 38px 72px; min-width: 0; }

.crm-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 26px; }
.crm-head h1 { font-weight: 600; font-size: 24px; letter-spacing: -.4px; color: var(--c-ivory); }
.crm-head p { font-size: 13.5px; color: var(--text-3); margin-top: 5px; max-width: 60ch; }
.crm-head .warn { color: var(--destructive); }
.chip-on { color: var(--clay) !important; }
.v-hit { color: var(--hit); font-weight: 600; }
.v-miss { color: var(--champagne); font-weight: 600; }
.v-chip { color: var(--clay); font-weight: 600; }
.grouphead { font-size: 13px; font-weight: 600; color: var(--text-1);
  padding: 18px 0 4px; border-top: 1px solid var(--line-strong); margin-top: 8px; }
.grouphead:first-child { border-top: none; margin-top: 0; padding-top: 4px; }
.pager { display: flex; align-items: center; justify-content: center; gap: 16px;
  padding-top: 16px; margin-top: 8px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--text-3); }

/* Stat cards: number first, identity dot from the pipeline rail reused as a
   live indicator. Warn state only when there is actually something wrong. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 14px; }
.stat { background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 16px 18px; position: relative; }
.stat .clay { position: absolute; top: 16px; right: 16px; }
.stat .num { font-size: 26px; font-weight: 600; letter-spacing: -.5px;
  color: var(--text-1); font-variant-numeric: tabular-nums; }
.stat .cap { font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-top: 4px; }
.stat .sub { font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.stat-warn { border-color: rgba(224,112,95,.4); }
.stat-warn .num { color: var(--destructive); }

@media (max-width: 900px) {
  .crm { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; border-right: none;
    border-bottom: 1px solid var(--c-midnight-hairline); }
  .side .views { flex-direction: row; width: 100%; order: 3; overflow-x: auto; }
  .side-foot { margin-top: 0; margin-left: auto; padding-top: 0; border-top: none;
    flex-direction: row; align-items: center; }
  .side-foot .side-line.who { display: none; }
  .crm main { padding: 24px 16px 56px; }
}
.linky:hover { color: var(--text-1); }
.linky.bad:hover { color: var(--destructive); }

.field select { width: 100%; padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-strong); background: var(--bg-sunken);
  color: var(--text-1); font-size: 15px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
                    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.field select:focus, .field input:focus { border-color: var(--clay); outline: none; }

/* Rejected-video audit on the Mastersheet */
.row .why { white-space: normal; color: var(--text-2); margin-top: 3px; }
.embedrow { padding: 6px 0 14px 28px; }
.embedrow iframe { width: 100%; max-width: 560px; aspect-ratio: 16 / 9;
  border: 1px solid var(--line); border-radius: var(--r-md); background: #000; }

/* Criteria labels on the review card: what the footage holds, judged
   against the dataset strategy rather than a bare score. */
.crit { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; }
.crit-tag { font-size: 11px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-1); background: rgba(240,90,40,.14);
  border: 1px solid rgba(240,90,40,.35); border-radius: var(--r-pill);
  padding: 3px 10px; text-transform: lowercase; }
.crit-tag.lv { background: rgba(255,255,255,.06); border-color: var(--line-strong);
  color: var(--text-2); text-transform: none; }
.judge .mini { flex: 0 0 auto; }

/* Health page */
.dot.warned { background: var(--champagne); }
.h-warn { color: var(--champagne); }
.h-fail { color: var(--destructive); }
.row .dim2 { opacity: .7; }

/* Sidebar sub-item: the rejected pile lives under Triage */
.views .sub { display: block; font-size: 12px; color: var(--text-3);
  padding: 4px 12px 4px 26px; border-radius: var(--r-pill); }
.views .sub:hover { color: var(--text-2); }
.views .sub.on { color: var(--text-1); }
.views .sub b { color: var(--clay); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Rejected pile cards: press the thumbnail, the video plays in its place */
.cardv.rej .thumb { display: block; width: 100%; padding: 0; border: none;
  cursor: pointer; }
.cardv.rej .thumb.playing { cursor: default; }
.cardv.rej .thumb iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Pile selection: the tick floats on the card's corner */
.cardv.rej { position: relative; }
.cardv.rej .pilebox { position: absolute; top: 10px; left: 10px; z-index: 3; }

/* ---------- Home: the gates, the machine line, the flow ----------
   The page's job is to say what needs a human, not to list state. The three
   gates lead; the funnel shows where work is sitting; the run buttons — which
   the hourly beat presses anyway — shrink to a row. */
.gates { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; margin-bottom: 16px; }
.gatecard { display: block; padding: 20px 22px; border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--bg-raised);
  transition: border-color 160ms var(--ease-out), background 160ms var(--ease-out); }
.gatecard:hover { border-color: var(--line-strong); background: var(--bg-raised2); }
.gatecard.live { border-color: rgba(240,90,40,.45); background: rgba(240,90,40,.07); }
.gatecard.live:hover { border-color: var(--clay); }
.gatecard .g-num { font-size: 34px; font-weight: 600; line-height: 1;
  color: var(--text-3); font-variant-numeric: tabular-nums; }
.gatecard.live .g-num { color: var(--clay); }
.gatecard .g-lab { font-size: 14px; color: var(--text-1); margin-top: 8px; }
.gatecard .g-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; }

.machine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12px; color: var(--text-3); margin-bottom: 20px; }
.machine a { border-bottom: 1px solid var(--line-strong); }
.machine a:hover { color: var(--text-1); }
.machine .m-sep { opacity: .5; }
.m-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3);
  opacity: .5; flex: 0 0 auto; }
.m-dot.on { background: var(--hit); opacity: 1; }
.m-dot.bad { background: var(--destructive); opacity: 1; }

.flow-label { font-size: 11px; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-3); margin: 4px 0 8px; }
.flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 4px;
  margin-bottom: 18px; }
.flow-arrow { align-self: center; color: var(--text-3); opacity: .45; font-size: 15px; }
.flow-step { flex: 1 1 84px; padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); }
.flow-step.on { border-color: rgba(240,90,40,.4); background: rgba(240,90,40,.06); }
.flow-step.bad { border-color: rgba(224,112,95,.45); background: rgba(224,112,95,.08); }
.flow-step .fnum { font-size: 19px; font-weight: 600; color: var(--text-3);
  font-variant-numeric: tabular-nums; line-height: 1.2; }
.flow-step.on .fnum { color: var(--text-1); }
.flow-step.bad .fnum { color: var(--destructive); }
.flow-step .flab { font-size: 11px; color: var(--text-3); margin-top: 2px; }

.runrow { display: flex; flex-wrap: wrap; gap: 8px; }
.runrow .btn { width: auto; flex: 0 0 auto; }

/* Model trials: each model's call under the clip it judged */
.clipcap .tm { display: inline-block; min-width: 94px; color: var(--text-3);
  font-size: 11px; }

/* The owner's own call on a shot — the only ground truth in the system */
.yourcall { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.yourcall .k { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); }
.calls { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.callbtn { font-size: 11px; padding: 4px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--text-3); text-transform: capitalize; }
.callbtn:hover { border-color: var(--line-strong); color: var(--text-1); }
.callbtn.on { background: var(--clay); border-color: var(--clay);
  color: var(--ink-on-clay); font-weight: 600; }

/* One clear way out of the sign-in screen */
.gate-foot .btn { width: auto; padding: 9px 16px; font-size: 11px; }

/* ---------- The office: four rooms in the left column ---------- */

/* Section heads in the nav — Agentic folds its ten pages beneath it */
.views .navhead { display: block; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--text-2); padding: 7px 12px;
  border-radius: var(--r-pill); }
.views .navhead:hover { color: var(--text-1); }
.views .navhead.on { color: var(--text-1); background: rgba(255,255,255,.06); }
.views .navhead b { color: var(--clay); font-weight: 500;
  font-variant-numeric: tabular-nums; }
.views .groupnav { margin: 2px 0 6px; padding-left: 6px;
  border-left: 1px solid var(--line); }

/* Donut charts drawn with a conic gradient — no library, no canvas */
.donutwrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donut { width: 128px; height: 128px; border-radius: 50%; flex: 0 0 auto;
  position: relative; }
.donut::after { content: ''; position: absolute; inset: 26px;
  border-radius: 50%; background: var(--panel, #33352F); }
.legend { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.legend .leg { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--text-2); }
.legend .swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.legend .leg b { color: var(--text-1); font-weight: 600;
  font-variant-numeric: tabular-nums; margin-left: auto; padding-left: 12px; }

/* Office forms: one row, inputs that match the dark theme */
.formrow { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.formcol { display: flex; flex-direction: column; gap: 4px; }
.formcol .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-3); }
.inp { background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text-1); font: inherit;
  font-size: 13px; padding: 8px 11px; min-width: 0; }
.inp:focus { outline: none; border-color: var(--line-strong); }
.inp::placeholder { color: var(--text-3); }
select.inp { appearance: none; }
.grow { flex: 1 1 160px; }
.formrow .btn { width: auto; flex: 0 0 auto; }

/* The done pile: crossed off, kept forever */
.donehead { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); border-top: 1px solid var(--line);
  margin-top: 14px; padding-top: 12px; }
.struck { text-decoration: line-through; color: var(--text-3); }

/* Portal home: four rooms behind the wordmark */
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px; }
.room { display: block; padding: 20px 18px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: rgba(255,255,255,.02); }
.room:hover { border-color: var(--line-strong); background: rgba(255,255,255,.05); }
.room-name { font-size: 16px; font-weight: 600; color: var(--text-1); }
.room-name b { color: var(--clay); font-weight: 500;
  font-variant-numeric: tabular-nums; margin-left: 4px; }
.room-blurb { font-size: 12.5px; color: var(--text-3); margin-top: 6px;
  line-height: 1.5; }