/* ============================================================================
   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); }
.clipcard.picked { border-color: var(--clay); box-shadow: inset 0 0 0 2px var(--clay); }
.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; }
.clipsend-row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.clipsend { width: auto; padding: 7px 14px; font-size: 11px; }

/* Findings: a count as a proportioned bar. The shape of a distribution
   reads faster than a column of figures, and the clay fill keeps the eye
   on the one accent this portal has. */
.bar { height: 5px; margin-top: 6px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.07); overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--clay);
  border-radius: var(--r-pill); }

/* Trimming a cut by hand: a quiet row until it is opened, then a small
   console of nudges under the clip it belongs to. */
.trim { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.trim.open { background: rgba(0,0,0,.14); border-radius: var(--r-sm);
  padding: 9px 10px; }
.trim .tm { margin-left: 8px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.trim-wait { margin-left: 10px; color: var(--champagne); }
.callbtn.tiny { padding: 3px 8px; font-size: 11px; min-width: 0; }

.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 and queue selection: the tick floats on the card's corner, and a
   swept card carries the same clay outline the Triage grid uses. */
.cardv { position: relative; }
.cardv .pilebox { position: absolute; top: 10px; left: 10px; z-index: 3; }
.cardv.picked { border-color: var(--clay); box-shadow: inset 0 0 0 2px var(--clay); }
/* ---------- 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 */
.piewrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.pie { width: 128px; height: 128px; border-radius: 50%; flex: 0 0 auto;
  position: relative; }
.pie::after { content: ''; position: absolute; inset: 26px;
  border-radius: 50%; background: var(--panel, #33352F); }
.pielegend { display: flex; flex-direction: column; gap: 6px; min-width: 0;
  font-size: 12.5px; color: var(--text-2); }
.pielegend i { display: inline-block; width: 10px; height: 10px;
  border-radius: 3px; margin-right: 8px; }

/* 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; }

/* The donut's number belongs in the hole, not floating over the slices */
.pie span { position: absolute; inset: 26px; z-index: 1; display: flex;
  align-items: center; justify-content: center; text-align: center;
  font-size: 15px; font-weight: 600; color: var(--text-1);
  font-variant-numeric: tabular-nums; padding: 4px; }

/* The kanban: three lanes, tasks travel by hand */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  align-items: start; }
@media (max-width: 900px) { .kanban { grid-template-columns: 1fr; } }
.kcol { border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 10px; min-height: 120px; background: rgba(255,255,255,.02); }
.kcol.over { border-color: var(--clay); background: rgba(240,90,40,.06); }
.khead { font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-3); margin-bottom: 8px; }
.khead b { color: var(--clay); font-weight: 500; font-variant-numeric: tabular-nums; }
.kcard { position: relative; border: 1px solid var(--line-strong);
  border-radius: var(--r-md); background: rgba(255,255,255,.05);
  padding: 10px 26px 10px 12px; margin-bottom: 8px; cursor: grab; }
.kcard:active { cursor: grabbing; }
.kcard.dragging { opacity: .45; }
.kcard .t { font-size: 13px; color: var(--text-1); line-height: 1.4; }
.kcard .s { font-size: 11px; color: var(--text-3); margin-top: 3px; }
.kcard.kdone { opacity: .65; }
.kdel { position: absolute; top: 6px; right: 8px; font-size: 14px;
  color: var(--text-3); line-height: 1; padding: 2px; }
.kdel:hover { color: var(--destructive); }
.kempty { font-size: 12px; color: var(--text-3); text-align: center;
  padding: 18px 0; border: 1px dashed var(--line); border-radius: var(--r-md); }

/* One time / Recurring pills in the purchase form */
.pillrow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.pillrow #ac-freqs { display: inline-flex; gap: 4px; margin-left: 10px;
  padding-left: 10px; border-left: 1px solid var(--line); }
.rec-tag { color: var(--clay); }

/* Writing a document in place */
.doc-body { min-height: 180px; resize: vertical; font: inherit; font-size: 13px;
  line-height: 1.55; }

/* Per-clay verdicts: a pair is two answers, a burst is three */
.clayno { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); min-width: 44px; align-self: center; }
.calls + .calls { margin-top: 4px; }
.addclay { font-size: 11px; margin-top: 6px; display: inline-block; }

/* Sweep select: previews stand down so the mouse can paint across cards,
   and nothing on the page catches a text selection while it drags. */
/* The owner's calls on the mastersheet row */
.verdictline { color: var(--champagne); }

/* Findings drill-down: a verdict opens into the shots behind it. */
.row.pickable { cursor: pointer; }
.row.pickable:hover .t { color: var(--clay); }
.drill { margin-top: 12px; padding: 12px; border-radius: var(--r-md);
  background: rgba(0,0,0,.16); border: 1px solid var(--line); }
.drill .clipgrid { margin-top: 10px; }

/* The card last worked on. A grid of near-identical clips gives the eye
   nothing to return to, so the last one touched keeps a mark until another
   takes it. Champagne, not clay: clay already means "picked", and the two
   need to be legible at the same time on the same card. */
.clipcard.last-touched { box-shadow: 0 0 0 3px var(--champagne); }
/* Both at once: the owner outline owns `outline` (portal-select.js sets it
   !important), and picked owns the inset ring, so this stacks rather than
   replaces — a selected card that was also the last edited shows both. */
.clipcard.picked.last-touched {
  box-shadow: inset 0 0 0 2px var(--clay), 0 0 0 3px var(--champagne); }
.clipcard.last-touched .clipcap .t::after {
  content: 'last used'; margin-left: 8px; font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--champagne); }

/* ============================================================================
   Findings charts. Donuts for part-to-whole at a glance; meters where the
   point is the gap to a target, which a slice cannot show. Hues come from a
   fixed categorical order set in portal.js and checked against this surface
   for colourblind separation — a slice never carries identity alone, so
   every chart ships its legend and every segment its own title.
   ========================================================================== */
.vizgrid { display: grid; gap: 18px 16px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vizgrid figure { margin: 0; }
.vizgrid figcaption { font-size: 13px; color: var(--text-1); margin-bottom: 10px; }
.vizgrid figcaption .s { display: block; font-size: 11.5px; color: var(--text-3); }

.viz { display: flex; align-items: center; gap: 16px; }
.donut { width: 116px; height: 116px; flex: 0 0 auto; }
.donut .seg { transition: opacity 140ms var(--ease-out); }
.viz-pick .seg { cursor: pointer; }
.viz-pick:hover .seg { opacity: .45; }
.viz-pick .seg:hover, .viz-pick .seg:focus-visible { opacity: 1; }
/* Figures wear text tokens, never the series colour. */
.d-num { fill: var(--text-1); font-size: 21px; font-weight: 600;
  text-anchor: middle; font-variant-numeric: tabular-nums; }
.d-cap { fill: var(--text-3); font-size: 8.5px; text-anchor: middle;
  letter-spacing: .08em; text-transform: uppercase; }

.legend { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.lg-row { display: flex; align-items: center; gap: 8px; font-size: 12px;
  min-width: 0; }
.viz-pick .lg-row { cursor: pointer; }
.viz-pick .lg-row:hover .lg-k { color: var(--text-1); }
.sw { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.lg-k { color: var(--text-2); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lg-v { margin-left: auto; color: var(--text-3); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

@media (max-width: 520px) { .viz { flex-direction: column; align-items: flex-start; } }

/* Clay count nudges, and the two things only a person watching can record. */
.claynudge { display: flex; gap: 14px; margin-top: 6px; }
.tagrow { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.tagrow label { display: flex; flex-direction: column; gap: 4px; flex: 1 1 46%;
  min-width: 0; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-3); }
.tagrow select { width: 100%; }
/* The machine's own read of the presentation, shown beside the dropdown that
   overrides it: geometry proposes, the eye disposes. */
.tagrow .mach { text-transform: none; letter-spacing: 0; color: var(--text-2); }

/* No rendered preview yet: the source plays at the clip's own timestamps
   rather than the card sitting black promising one "within the hour". */
.clipmedia iframe { position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; }
.ytplay { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  background: rgba(31,33,32,.55); color: var(--text-1); }
.ytplay:hover { background: rgba(31,33,32,.35); }
.ytplay-i { width: 42px; height: 42px; border-radius: 50%;
  background: rgba(0,0,0,.6); display: grid; place-items: center;
  font-size: 15px; padding-left: 3px; }
.ytplay-t { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-2); text-align: center; padding: 0 10px; }

/* Full screen, and the fallback for a browser that refuses the API. */
.expand { position: absolute; top: 8px; right: 8px; z-index: 3;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: rgba(0,0,0,.6); color: var(--text-1); font-size: 14px;
  display: grid; place-items: center; opacity: 0;
  transition: opacity .12s var(--ease-out); }
.clipcard:hover .expand, .expand:focus-visible { opacity: 1; }
.expand:hover { background: rgba(0,0,0,.85); }
.clipmedia.blown { position: fixed; inset: 0; z-index: 10002;
  aspect-ratio: auto; background: #000; }
.clipmedia.blown .expand { opacity: 1; }
/* A clay's own presentation, on its own row beside its verdict. */
/* Three per-clay selects — what it did, what colour it was, what it had to
   be found against — wrap under the verdict buttons rather than squeezing
   them off the card. */
.claypres { margin-left: 0; max-width: 100%; flex: 1 1 120px; min-width: 0; }

/* The hand controls stay, but folded away: the page should not imply that
   anything needs pressing, because it does not. */
.handrun summary { font-size: 12px; color: var(--text-3); cursor: pointer;
  list-style: none; padding: 6px 0; }
.handrun summary::-webkit-details-marker { display: none; }
.handrun summary::before { content: '▸ '; }
.handrun[open] summary::before { content: '▾ '; }
.handrun summary:hover { color: var(--text-2); }

/* The day's work, in the two owners' own colours. Same blue and sage the
   clip cards are outlined with, so a tally reads as "mine" without being
   labelled twice. */
.scoreboard { margin-bottom: 18px; }
.scoreboard .stat.owner-eddie { border-color: rgba(47,111,235,.45); }
.scoreboard .stat.owner-eddie .num { color: #2F6FEB; }
.scoreboard .stat.owner-rupert { border-color: rgba(126,155,130,.5); }
.scoreboard .stat.owner-rupert .num { color: #7E9B82; }

/* The impossible: filed, not binned. Champagne rather than the destructive
   red — this is the top of the ladder, not the bottom of it. */
.clipsend.impossible { border-color: rgba(203,190,147,.45); color: var(--champagne); }
.clipsend.impossible:hover { background: rgba(203,190,147,.10); }

/* ---------- The prototype bench ---------- */
/* The drop zone invites; everything below it is evidence, set quiet. */
.proto-drop { display: flex; flex-direction: column; gap: 6px; align-items: center;
  text-align: center; padding: 34px 20px; margin-bottom: 18px; cursor: pointer;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-lg);
  background: var(--bg-raised); color: var(--text-1);
  transition: border-color .15s var(--ease-out), background .15s var(--ease-out); }
.proto-drop:hover, .proto-drop.over { border-color: var(--clay); background: var(--bg-raised2); }
.proto-drop b { font-weight: 600; }
.proto-drop .s { color: var(--text-3); max-width: 52ch; }

.proto-run { margin-bottom: 14px; }
.pnote { color: var(--text-3); margin: 4px 0 8px; }
.ppill { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  color: var(--text-2); white-space: nowrap; }
.ppill-live { color: var(--champagne); border-color: rgba(203,190,147,.45); }
.ppill-done { color: var(--hit); border-color: rgba(111,190,114,.45); }
.ppill-bad { color: var(--destructive); border-color: rgba(224,112,95,.45); }

.pshots { display: flex; flex-direction: column; gap: 10px; margin: 10px 0; }
.pshot { border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px 14px; background: var(--bg); }
.pshot-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pshot-head .linky { margin-left: auto; }
.pwhy { color: var(--text-2); margin: 6px 0 8px; }
.pev { display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  font-size: 12px; color: var(--text-3); }
.pev + .pev { margin-top: 4px; }

/* The bench call row: the owner's eyes vs the machine, one click each. */
.pcall { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.pagree { color: var(--hit); }
.pdisagree { color: var(--champagne); }

/* The verdict, colour-coded to what it means for the shooter. */
.pv { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--r-pill); }
.pv i { font-style: normal; font-weight: 500; opacity: .75; }
.pv-hit { background: rgba(111,190,114,.16); color: var(--hit); }
.pv-chipped { background: rgba(203,190,147,.16); color: var(--champagne); }
.pv-miss { background: rgba(224,112,95,.14); color: var(--destructive); }
.pv-unclear { background: rgba(255,255,255,.08); color: var(--text-2); }

/* Burst strength, drawn rather than merely printed. */
.pmeter { display: inline-block; width: 72px; height: 6px; border-radius: 3px;
  background: rgba(255,255,255,.08); vertical-align: middle; overflow: hidden; }
.pmeter i { display: block; height: 100%; background: var(--clay); border-radius: 3px; }

.pplayer { width: 100%; max-height: 420px; border-radius: var(--r-md);
  background: #000; margin: 8px 0; }
.pacts { display: flex; gap: 16px; margin-top: 8px; }
.pacts .warn { color: var(--destructive); }
.pjson { margin-top: 10px; padding: 12px; font-size: 11px; line-height: 1.5;
  font-family: ui-monospace, Menlo, monospace; color: var(--text-2);
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow-x: auto; max-height: 380px; }

/* ================= The reskin: same bones, better tailoring =================
   Appended last on purpose — these rules win the cascade, so the portal's
   look is lifted in one place without rewriting any view's markup. */

/* Rhythm and air */
main { padding: 34px 38px 60px; max-width: 1240px; }
.crm-head { margin-bottom: 26px; }
.crm-head h1 { font-size: 26px; font-weight: 650; letter-spacing: -.02em; }
.crm-head p { max-width: 560px; line-height: 1.55; margin-top: 6px; }

/* Panels: layered, softly lifted, consistent */
.panel { border-radius: 16px; padding: 20px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px rgba(0,0,0,.16); }
.p-head { margin-bottom: 14px; }
.p-title { font-size: 13px; font-weight: 650; letter-spacing: .01em; }

/* Sidebar: quieter, clearer landmarks */
.side { border-right: 1px solid rgba(255,255,255,.07);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.06)); }
.views a { transition: background .14s ease, color .14s ease; }
.views a.on { background: rgba(240,90,40,.13); }
.views .navhead { margin-top: 2px; }
.views .groupnav { border-left-color: rgba(240,90,40,.35); }

/* The three gates on Home: numbers you can read across the room */
.gatecard { border-radius: 16px; padding: 18px 20px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.gatecard:hover { transform: translateY(-2px); border-color: rgba(240,90,40,.5); }
.gatecard.live { background:
  linear-gradient(180deg, rgba(240,90,40,.10), rgba(240,90,40,.03)); }
.g-num { font-size: 34px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }

/* Buttons: one voice */
.btn, .mini-btn, .callbtn, .linky { transition: all .13s ease; }
.btn:hover:not(:disabled) { filter: brightness(1.07); }
.btn:active:not(:disabled) { transform: translateY(1px); }
:focus-visible { outline: 2px solid rgba(240,90,40,.6); outline-offset: 2px;
  border-radius: 6px; }

/* Rows: hover tells you they are alive */
.row { border-radius: 10px; transition: background .12s ease;
  padding-left: 8px; padding-right: 8px; margin: 0 -8px; }
.row:hover { background: rgba(255,255,255,.035); }

/* Stat cards */
.stat .num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }

/* Activity feed: a proper ticker */
.line { padding: 5px 0; }
.line .t { font-variant-numeric: tabular-nums; opacity: .55; }
.line.fresh .m { color: var(--text-1); }

/* Scrollbars that belong to the theme */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14);
  border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.24); }

/* ================= Systems: the machine, drawn ================= */
.sys .foot-note { margin-top: 14px; }
.sysflow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
.sysnode { flex: 1 1 128px; min-width: 118px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1); padding: 12px 13px;
  background: rgba(255,255,255,.03); }
.sysnode.lit { border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.05); }
.sysnode.you { border-color: rgba(240,90,40,.55);
  background: linear-gradient(180deg, rgba(240,90,40,.14), rgba(240,90,40,.04)); }
.sysnode.you .sy-k::after { content: ' — you'; color: var(--clay); }
.sysnode.train { border-style: dashed; }
.sy-n { font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; color: var(--text-1); }
.sy-k { font-size: 12.5px; font-weight: 650; color: var(--text-1); margin-top: 2px; }
.sy-s { font-size: 11px; color: var(--text-3); line-height: 1.45; margin-top: 4px; }
.sys-arrow { align-self: center; color: var(--text-3); flex: 0 0 auto; }
.sysloop { margin-top: 12px; font-size: 12px; color: var(--champagne);
  border-top: 1px dashed rgba(255,255,255,.12); padding-top: 10px; }

.lanes { display: flex; flex-direction: column; gap: 0; }
.lane { border: 1px solid rgba(255,255,255,.1); border-radius: 14px;
  padding: 14px 16px; background: rgba(255,255,255,.02); }
.lane-head { font-size: 13px; font-weight: 650; color: var(--text-1);
  display: flex; align-items: center; gap: 10px; }
.lane-tag { font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 99px; }
.lane-tag.llm { background: rgba(143,155,255,.16); color: #aab4ff; }
.lane-tag.vision { background: rgba(111,190,114,.16); color: #8fd192; }
.lane-sub { font-size: 11px; color: var(--text-3); margin: 3px 0 10px; }
.lane-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lane-row .sysnode { flex: 1 1 160px; }
.lane-bridge { text-align: center; font-size: 11.5px; color: var(--text-3);
  padding: 10px 0; letter-spacing: .03em; }

.splitpic { display: flex; flex-direction: column; gap: 10px; }
.split-arrows { display: flex; justify-content: space-around;
  font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.split-bins { display: flex; gap: 8px; }
.bin { flex: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 10px;
  padding: 10px 12px; font-size: 13px; font-weight: 650; color: var(--text-1); }
.bin i { display: block; font-style: normal; font-size: 10.5px; font-weight: 400;
  color: var(--text-3); margin-top: 3px; }
.bin.gold { border-color: rgba(203,190,147,.5);
  background: rgba(203,190,147,.07); }

.bangline .bl-track { position: relative; height: 40px; border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,.04) 0 18%,
    rgba(240,90,40,.12) 18% 62%, rgba(255,255,255,.04) 62%); }
.bl-bang { position: absolute; top: -20px; transform: translateX(-50%);
  font-size: 11px; color: var(--clay); white-space: nowrap; }
.bl-tick { position: absolute; top: 8px; bottom: 8px; width: 3px;
  border-radius: 2px; background: var(--champagne); transform: translateX(-50%); }
.bl-caption { font-size: 11.5px; color: var(--text-3); margin-top: 10px;
  line-height: 1.5; }

/* ==================== Redesign: navigation you can read ====================
   The sidebar had become twelve identical links in a flat column with the
   other four sections stacked underneath — no hierarchy, no sense of where
   you were. Inside Agentic it is now that section alone, its pages sorted
   into what they are for, with one way back out. */

.side { padding: 22px 14px 18px; }
.brand { display: block; margin: 0 8px 22px; opacity: .95; }
.brand img { width: 92px; height: auto; }

/* Way out of a section — the first thing in the column, so it is never a trap */
.navback { display: block; font-size: 11.5px; letter-spacing: .04em;
  color: var(--text-3); padding: 4px 12px 10px; }
.navback:hover { color: var(--clay); }

/* Which section you are in */
.navtitle { font-size: 19px; font-weight: 650; letter-spacing: -.01em;
  color: var(--text-1); padding: 0 12px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 10px; }

/* The four rooms, when you are outside one */
.views .navhead { display: block; padding: 11px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--text-2);
  border: 1px solid transparent; margin-bottom: 3px; }
.views .navhead:hover { background: rgba(255,255,255,.05); color: var(--text-1); }
.views .navhead.on { background: rgba(240,90,40,.12);
  border-color: rgba(240,90,40,.32); color: var(--text-1); }

/* What each cluster of pages is for */
.navgroup { font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--text-3); opacity: .65;
  padding: 14px 12px 5px; }
.navgroup:first-child { padding-top: 2px; }

/* The pages themselves: one row, badge hard right, a rail when open */
.views .groupnav { border-left: none; padding-left: 0; margin: 0; }
.views .groupnav a { display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 9px; font-size: 13.5px;
  color: var(--text-2); position: relative; }
.views .groupnav a:hover { background: rgba(255,255,255,.05); color: var(--text-1); }
.views .groupnav a.on { background: rgba(240,90,40,.13); color: var(--text-1);
  font-weight: 600; }
.views .groupnav a.on::before { content: ''; position: absolute; left: 0;
  top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0;
  background: var(--clay); }
.views .groupnav a b { margin-left: auto; font-size: 11.5px; font-weight: 650;
  color: var(--clay); font-variant-numeric: tabular-nums;
  background: rgba(240,90,40,.14); padding: 1px 7px; border-radius: 99px; }
.views .groupnav a.on b { background: rgba(240,90,40,.24); }

/* The foot of the column: quiet until wanted */
.side-foot { border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px; }
.side-line { font-size: 11px; color: var(--text-3); padding: 1px 12px; }
.signout { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 12px; border-radius: 9px; font-size: 12.5px; color: var(--text-3);
  margin-top: 4px; }
.signout:hover { background: rgba(255,255,255,.05); color: var(--text-1); }

/* ==================== Redesign: the page itself ==================== */

main { padding: 30px 40px 72px; }
.crm-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding-bottom: 18px; margin-bottom: 22px;
  border-bottom: 1px solid rgba(255,255,255,.07); }
.crm-head h1 { font-size: 27px; }
.crm-head p { font-size: 13.5px; color: var(--text-3); }

/* Panels: one card language everywhere */
.panel { padding: 20px 22px; margin-bottom: 18px; }
.panel + .panel { margin-top: 0; }
.p-head { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.06); }

/* The office front door */
.rooms { gap: 14px; }
.room { padding: 22px 20px; }
.room-name { font-size: 17px; }

/* Empty states earn their space instead of whispering */
.empty { padding: 30px 20px; text-align: center; font-size: 13px;
  color: var(--text-3); border: 1px dashed rgba(255,255,255,.1);
  border-radius: 12px; }

/* Foot-notes: present, but plainly secondary */
.foot-note { font-size: 11.5px; line-height: 1.65; color: var(--text-3);
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed rgba(255,255,255,.08); max-width: 74ch; }

/* Every clickable thing says so */
a, button, .linky, .callbtn, summary { cursor: pointer; }
.btn:disabled, .mini-btn:disabled { cursor: not-allowed; opacity: .45; }

@media (max-width: 900px) {
  .crm { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.08); }
  main { padding: 22px 18px 60px; }
}

/* The column's own layout: the nav takes the height, the foot stays put,
   and a long section scrolls inside itself rather than pushing sign-out
   off the bottom of the screen. */
.side { gap: 0; }
.side .brand { margin: 0 6px 20px; }
.side .brand img { height: 19px; }
.views { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; }
.views::-webkit-scrollbar { width: 6px; }
.side-foot { margin-top: 16px; }

/* ============ The front door: rooms with faces, not a list of links ============
   Six cards, each with its own colour block and a couple of words about what
   is inside — the same idea as a console's model cards. Aiming at a coloured
   face is faster than reading six lines that all look alike. */

.hello { margin-bottom: 22px; }
.hello h1 { font-size: 30px; font-weight: 650; letter-spacing: -.025em;
  color: var(--text-1); }
.hello p { font-size: 14px; color: var(--text-3); margin-top: 5px; }

/* Three numbers worth knowing before choosing a door */
.deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px; margin-bottom: 30px; }
.deckcard { border: 1px solid rgba(255,255,255,.09); border-radius: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); }
.dk-k { font-size: 10.5px; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--text-3); }
.dk-n { font-size: 25px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px;
  color: var(--text-1); font-variant-numeric: tabular-nums; }
.dk-n.good { color: #8fd192; }
.dk-n.warn { color: var(--champagne); }
.dk-s { font-size: 11.5px; color: var(--text-3); margin-top: 4px; }

.secthead { font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }

.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px; }
.room { display: block; overflow: hidden; padding: 0;
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px;
  background: rgba(255,255,255,.02);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.room:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.2);
  box-shadow: 0 14px 30px rgba(0,0,0,.28); }

/* The face: a colour block with a mark drawn in it, one per room */
.room-face { height: 78px; position: relative; display: flex;
  align-items: center; justify-content: center; }
.room-mark { width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid rgba(0,0,0,.5); position: relative; }
.room-mark::after { content: ''; position: absolute; inset: 8px;
  border-radius: 50%; background: rgba(0,0,0,.45); }
.room.flame .room-face { background: linear-gradient(135deg, #F05A28, #c9451c); }
.room.drophere { border-color: var(--clay); transform: scale(.98); }
.room.plum  .room-face { background: linear-gradient(135deg, #8f9bff, #6570d8); }
.room.sage  .room-face { background: linear-gradient(135deg, #6FBE72, #4f9a52); }
.room.sky   .room-face { background: linear-gradient(135deg, #4ECDC4, #2f9d96); }
.room.sand  .room-face { background: linear-gradient(135deg, #CBBE93, #a89a6c); }
.room.stone .room-face { background: linear-gradient(135deg, #9aa0a6, #6e747a); }

.room-body { padding: 15px 17px 17px; }
.room-name { font-size: 16px; font-weight: 650; color: var(--text-1);
  display: flex; align-items: center; gap: 8px; }
.room-name b { font-size: 11.5px; font-weight: 650; color: var(--clay);
  background: rgba(240,90,40,.14); padding: 1px 8px; border-radius: 99px;
  font-variant-numeric: tabular-nums; }
.room-blurb { font-size: 12.5px; line-height: 1.5; color: var(--text-3);
  margin-top: 6px; }
.room-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.room-tags span { font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--text-2); background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08); padding: 3px 9px; border-radius: 99px; }

/* Clicking a card picks it — no dragging anywhere */
.cardv, .clipcard { cursor: pointer; }
.cardv.picked, .clipcard.picked { border-color: rgba(240,90,40,.6);
  box-shadow: 0 0 0 1px rgba(240,90,40,.35) inset; }

/* ============ The control room, tidied ============
   Three overlapping run panels became one. These rules also settle the
   argument between the two design languages that collided on this page:
   solid hairlines, sentence-case buttons, and a feed with a rhythm. */

.grid.ctrl { grid-template-columns: 5fr 4fr; align-items: start; gap: 16px; }
@media (max-width: 980px) { .grid.ctrl { grid-template-columns: 1fr; } }

.p-head { border-bottom: 1px solid rgba(255,255,255,.07) !important; }
.dialwrap { display: inline-flex; align-items: center; gap: 8px; }
.dialwrap .s { font-size: 11px; color: var(--text-3); text-transform: uppercase;
  letter-spacing: .08em; }

.btn-master { width: 100%; padding: 14px 18px; font-size: 14.5px;
  font-weight: 650; letter-spacing: .01em; text-transform: none;
  border-radius: 12px; margin-top: 2px; }
.runnote { font-size: 12px; line-height: 1.6; color: var(--text-3);
  margin: 12px 0 0; }

.runlabel { font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-3); opacity: .7;
  margin: 18px 0 8px; }
.runrow { display: flex; flex-wrap: wrap; gap: 7px; }
.runrow .btn { text-transform: none; letter-spacing: 0; font-weight: 600;
  font-size: 12.5px; padding: 8px 13px; border-radius: 9px; }

/* The feed: a ledger, not a wall of red */
.line { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px;
  align-items: baseline; padding: 8px 0; margin: 0;
  border-bottom: 1px solid rgba(255,255,255,.05); font-size: 12.5px;
  line-height: 1.55; }
.line:last-child { border-bottom: none; }
.line .t { font-size: 11px; color: var(--text-3); opacity: 1;
  font-variant-numeric: tabular-nums; }
.line .m { color: var(--text-2); overflow-wrap: break-word; }
.line.good .m { color: var(--text-2); }
.line.good .m::before { content: '✓ '; color: var(--sage, #6FBE72); }
.line.bad .m { color: #e0907c; }
.line.bad .m::before { content: '✕ '; }
.line.fresh .m { color: var(--text-1); }

/* The Detection room's face on the front door */
.room.ember .room-face { background: linear-gradient(135deg, #E0705F, #b04a3a); }

/* The tracer rides on top of the bench player */
.pwrap { position: relative; }
.ptracer { position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; }

/* The instrument reading on a bench shot */
.pspeed { color: var(--champagne); font-weight: 650; }

/* The shot's instrument row: five clean readings, misses show their dashes */
.kpis { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.kpi { display: inline-flex; flex-direction: column; gap: 1px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 9px;
  padding: 6px 12px; background: rgba(255,255,255,.03); min-width: 64px; }
.kpi i { font-style: normal; font-size: 9.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.kpi b { font-size: 14px; font-weight: 650; color: var(--text-1);
  font-variant-numeric: tabular-nums; }
.kpi-off { opacity: .45; }

/* The shot's own player, clipped to its window, under its own numbers */
.pinlinewrap { margin-top: 10px; }
.pinline { width: 100%; max-height: 420px; border-radius: 10px;
  background: #000; display: block; }
.pclays { color: var(--champagne); font-weight: 650; }