/* Chair Umpire — the whole panel's stylesheet.
 *
 * Sizes come from design_handoff_chair_umpire/SPEC.md and are not arbitrary:
 *
 * 11.5px IS THE FLOOR. The previous build ran 9.5–10px labels. Nothing here goes below 11.5px, body
 * text is 13.5–15px, table rows 14.5px. Uppercase tracking is .06–.1em, never .14em.
 *
 * tabular-nums IS SCOPED, NEVER GLOBAL. In Schibsted Grotesk the tabular set gives `.` and `:` a full
 * digit advance, so hoisting it to the root renders emails as "foundryforty1 . com" and timestamps as
 * "8 : 02pm". It belongs on right-aligned numeric cells and stat numerals only.
 *
 * NO MEDIA QUERIES. Every grid is auto-fit and every row group is wrap-safe flex, so the layout
 * reflows continuously rather than snapping at breakpoints.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#cu-root {
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }

/* Every interactive element needs a visible focus ring — the old build had none. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@keyframes cuFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cuPulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  /* The pulse is decorative; the dot still reads as present. Never rely on motion alone to say
     "this needs you" — the status card carries text too. */
  * { animation: none !important; transition: none !important; }
}

/* ---------- shell ---------- */

/* Fixed 60px, single row. If the bar is allowed to wrap, the section header — which sticks at
   exactly 60px — slides underneath it. */
.cu-tabbar {
  position: sticky; top: 0; z-index: 22;
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 0 26px; display: flex; align-items: center; gap: 22px;
  flex-wrap: nowrap; height: 60px; overflow: hidden;
}
.cu-brand { display: flex; align-items: center; gap: 9px; flex: none; }
.cu-brand span { font-size: 16.5px; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; }
.cu-tabs {
  display: flex; align-items: stretch; gap: 2px; flex-wrap: nowrap;
  overflow-x: auto; scrollbar-width: none; min-width: 0; height: 60px;
}
.cu-tabs::-webkit-scrollbar { display: none; }
.cu-tab {
  padding: 19px 11px 17px; font: inherit; font-size: 14.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; background: none; border: none;
  border-bottom: 3px solid transparent; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.cu-tab:hover { color: var(--ink); }
.cu-tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.cu-tab .count { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.cu-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: cuPulse 2.4s infinite; flex: none;
}
.cu-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex: none; }
.cu-themebtn {
  display: flex; align-items: center; gap: 8px; background: var(--bg);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 11px; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 800; color: var(--ink);
}
.cu-themebtn:hover { border-color: var(--accent); }
.cu-swatch { display: flex; gap: 2px; flex: none; }
.cu-swatch i { width: 9px; height: 14px; border-radius: 2px; display: block; }
.cu-signout {
  font: inherit; font-size: 13px; color: var(--muted); font-weight: 700; cursor: pointer;
  text-decoration: underline; white-space: nowrap; background: none; border: none;
}

.cu-header {
  position: sticky; top: 60px; z-index: 20;
  background: var(--bg); border-bottom: 1px solid var(--line); padding: 16px 26px 0;
}
.cu-header .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cu-eyebrow { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.cu-title { font-size: 25px; font-weight: 900; letter-spacing: -.025em; margin-top: 3px; }
.cu-rule { height: 3px; background: var(--accent); width: 52px; margin-top: 14px; border-radius: 2px; }

.cu-body { padding: 20px 26px 90px; display: flex; flex-direction: column; gap: 26px; max-width: 1240px; width: 100%; }
.cu-section { animation: cuFade .16s ease; display: flex; flex-direction: column; gap: 26px; }

/* ---------- window selector ---------- */
.cu-seg { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.cu-seg button {
  padding: 7px 13px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
  background: transparent; color: var(--muted); border: none;
}
.cu-seg button[aria-pressed="true"] { background: var(--accent); color: var(--accentInk); }
.cu-seglabel { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- status strip ---------- */
/* Wrap-safe flex, never a fixed-column grid: three items in a two-track grid leaves a visible hole. */
.cu-strip { display: flex; flex-wrap: wrap; gap: 10px; }
.cu-status {
  display: flex; align-items: center; gap: 11px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 11px; padding: 11px 14px; flex: 1 1 260px;
  font: inherit; color: var(--ink); text-align: left; text-decoration: none;
}
.cu-status.act { background: rgba(215,226,74,.09); border-color: rgba(215,226,74,.32); cursor: pointer; flex-basis: 300px; }
.cu-status.act:hover { background: rgba(215,226,74,.15); }
.cu-status .sdot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.cu-status .t { font-size: 14.5px; font-weight: 800; }
.cu-status .d { font-size: 13px; color: var(--muted); margin-top: 1px; }
.cu-status .chev { margin-left: auto; color: var(--accent); font-size: 16px; font-weight: 800; }

/* ---------- cards ---------- */
.cu-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); padding: 18px 20px; }
.cu-cardtitle { font-size: 12.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

.cu-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 11px; }
.cu-stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px; position: relative; text-align: left; font: inherit; color: var(--ink);
  text-decoration: none; display: block; width: 100%;
}
button.cu-stat, a.cu-stat { cursor: pointer; }
button.cu-stat:hover, a.cu-stat:hover { border-color: var(--accent); }
/* NOT tabular. Verified in the browser 2026-08-02: at 900 weight the tabular set gives `.` a full
   digit advance, so "$12.18" renders as "$12 . 18". Tabular buys vertical alignment between stacked
   figures — a stat card's numeral has nothing above or below it to align WITH, so it pays the
   penalty for no benefit. Tabular stays on table cells, where the alignment is the whole point. */
.cu-stat .n { font-size: 28px; font-weight: 900; line-height: 1; }
.cu-stat .l { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 3px; font-weight: 700; }
.cu-stat .chev { position: absolute; top: 13px; right: 14px; color: var(--muted); font-size: 16.5px; font-weight: 800; }

/* ---------- hero ---------- */
.cu-hero { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
/* gap:1px over a --line background makes the gaps read as hairline rules without extra borders. */
.cu-herorow { display: flex; flex-wrap: wrap; gap: 1px; background: var(--line); }
.cu-herocell { padding: 22px 24px; background: var(--surface); flex: 1 1 260px; min-width: 0; text-align: left; font: inherit; color: var(--ink); border: none; }
button.cu-herocell { cursor: pointer; }
button.cu-herocell:hover { background: var(--surface2); }
.cu-herolabel { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
/* Also not tabular — same reason, and at 38px the gapped decimal point is unmissable. */
.cu-heronum { font-size: 38px; font-weight: 900; letter-spacing: -.03em; margin-top: 8px; line-height: 1; }
.cu-herosub { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.cu-herolink { font-size: 13px; color: var(--accent); font-weight: 700; margin-top: 12px; }
.cu-herofoot { border-top: 1px solid var(--line); padding: 12px 24px; font-size: 13.5px; color: var(--muted); line-height: 1.5; background: var(--surface2); }

/* ---------- pills ---------- */
.cu-pill { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.cu-pill.good { background: rgba(143,208,166,.16); color: var(--good); }
.cu-pill.accent { background: rgba(215,226,74,.16); color: var(--accent); }
.cu-pill.blue { background: rgba(127,178,224,.16); color: var(--blue); }
.cu-pill.bad { background: rgba(224,119,106,.16); color: var(--bad); }
.cu-pill.plain { background: var(--surface2); color: var(--muted); }

/* ---------- tables ---------- */
.cu-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rad); overflow: hidden; }
.cu-tablehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cu-scroll { overflow-x: auto; }
.cu-tr { display: grid; align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cu-tr:last-child { border-bottom: none; }
.cu-th {
  display: grid; padding: 9px 18px; border-bottom: 1px solid var(--line);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
.cu-th button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; padding: 0; text-align: inherit; white-space: nowrap; }
.cu-th button:hover { color: var(--ink); }
.cu-th .on { color: var(--accent); }
a.cu-tr, button.cu-tr { cursor: pointer; font: inherit; color: var(--ink); text-decoration: none; text-align: left; width: 100%; background: none; border: none; border-bottom: 1px solid var(--line); }
a.cu-tr:hover, button.cu-tr:hover { background: var(--surface2); }
/* Right-alignment and tabular figures are SEPARATE concerns, and conflating them is what produces
   "8/2 9 : 40 am". Tabular gives every glyph a digit-width advance — including `.` and `:` — so it
   belongs only on cells that are pure digits. dataTable adds .tnum for those and leaves money,
   dates and timestamps proportional. Digits in this face are near-uniform anyway, so a money
   column still reads as aligned without it. */
.cu-tr .r { text-align: right; }
.cu-tr .tnum { font-variant-numeric: tabular-nums; }
.cu-tr .clip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-empty { padding: 26px; text-align: center; color: var(--muted); font-size: 13.5px; }

/* ---------- inputs ---------- */
.cu-input, .cu-select, .cu-textarea {
  font: inherit; font-size: 14.5px; background: var(--bg); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; outline: none; width: 100%;
}
.cu-textarea { min-height: 74px; resize: vertical; }
.cu-input:focus, .cu-select:focus, .cu-textarea:focus { border-color: var(--accent); }
.cu-field { display: block; }
.cu-field > span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.cu-btn {
  font: inherit; font-size: 14.5px; font-weight: 800; border: none; border-radius: 9px;
  padding: 11px 18px; background: var(--good); color: var(--accentInk); cursor: pointer;
}
.cu-btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink); }
.cu-btn.ghost:hover { border-color: var(--accent); color: var(--accent); }
.cu-btn.danger { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.cu-btn.danger:hover { border-color: var(--bad); color: var(--bad); }
.cu-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cu-result { font-size: 13.5px; margin-top: 10px; min-height: 18px; }
.cu-result.ok { color: var(--good); }
.cu-result.err { color: var(--bad); }

/* ---------- bars ---------- */
.cu-track { height: 9px; border-radius: 5px; background: var(--surface2); overflow: hidden; }
.cu-track > i { display: block; height: 100%; border-radius: 5px; transition: width .5s ease; }
.cu-spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin-top: 12px; }
.cu-spark i { flex: 1; border-radius: 2px 2px 0 0; opacity: .85; min-height: 2px; }
.cu-split { display: flex; height: 11px; border-radius: 6px; overflow: hidden; background: var(--surface2); }
.cu-split i { display: block; height: 100%; }
.cu-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; font-size: 13px; color: var(--muted); }
.cu-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cu-legend i { width: 9px; height: 9px; border-radius: 3px; }

/* ---------- drill pages ---------- */
.cu-drillhead {
  border-bottom: 1px solid var(--line); padding: 16px 26px; display: flex; align-items: center;
  gap: 14px; position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.cu-drillurl { font-size: 13px; color: var(--muted); font-weight: 600; }
.cu-drillbody { padding: 26px 26px 90px; max-width: 1560px; width: 100%; animation: cuFade .16s ease; }
.cu-drilltitle { font-size: 32px; font-weight: 900; letter-spacing: -.03em; margin-top: 4px; }
.cu-drillsub { font-size: 15px; color: var(--muted); margin-top: 6px; }
.cu-emptybox { background: var(--surface); border: 1px dashed var(--line); border-radius: 12px; padding: 52px 32px; text-align: center; }
.cu-emptybox .t { font-size: 17px; font-weight: 800; }
.cu-emptybox .b { font-size: 14.5px; color: var(--muted); line-height: 1.6; margin: 8px auto 0; max-width: 460px; }

/* ---------- login ---------- */
.cu-login { max-width: 360px; margin: 14vh auto 0; text-align: center; padding: 0 20px; }
.cu-login .box { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 26px 22px; }
.cu-login h2 { margin: 0 0 4px; font-size: 20px; }
.cu-login p { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }

/* ---------- misc ---------- */
.cu-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.cu-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 11px; }
.cu-rows { display: flex; flex-direction: column; }
.cu-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cu-row:last-child { border-bottom: none; }
.cu-est { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: .04em; }