/* NOVA International School Skopje — Admissions Tracker
   Brand colours and typography from the school's Brand Guide:
   navy #14242A, yellow #FFCB05, orange #FAA61A, background grey #F2F2F2,
   Fira Sans. The font is bundled rather than loaded from Google so the app
   keeps working on the school network with no internet.

   Student statuses are the one deliberate exception to "brand colours only":
   they carry the exact fills from the admissions workbook's Legend tab, so a
   row on screen looks like the same row in Excel. Those values come from the
   server (config.py). */

@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/assets/fonts/fira-400-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/assets/fonts/fira-400-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400;
  font-display: swap; src: url(/assets/fonts/fira-400-cyr.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url(/assets/fonts/fira-500-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url(/assets/fonts/fira-500-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500;
  font-display: swap; src: url(/assets/fonts/fira-500-cyr.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(/assets/fonts/fira-600-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(/assets/fonts/fira-600-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600;
  font-display: swap; src: url(/assets/fonts/fira-600-cyr.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url(/assets/fonts/fira-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url(/assets/fonts/fira-700-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700;
  font-display: swap; src: url(/assets/fonts/fira-700-cyr.woff2) format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

:root {
  color-scheme: light;
  --surface-1: #fcfcfb;
  --surface-2: #F2F2F2;      /* brand background grey */
  --page: #F7F7F7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #898781;
  --gridline: #e1e0d9;
  --baseline: #c3c2b7;
  --border: rgba(11, 11, 11, 0.10);
  --border-strong: rgba(11, 11, 11, 0.18);
  --navy: #14242A;
  --yellow: #FFCB05;
  --orange: #FAA61A;
  --accent: #14242A;          /* brand navy carries primary actions */
  --accent-ink: #ffffff;
  --highlight: #FFCB05;       /* brand yellow marks the active thing */
  --good: #0ca30c;
  --critical: #d03b3b;
  --shadow: 0 1px 2px rgba(11, 11, 11, .06), 0 8px 24px rgba(11, 11, 11, .07);
  --radius: 10px;
  --font: "Fira Sans", Calibri, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface-1: #14242A;
    --surface-2: #1c313a;
    --page: #0e1a1f;
    --text-primary: #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted: #898781;
    --gridline: #2c2c2a;
    --baseline: #383835;
    --border: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);
    --navy: #14242A;
    --yellow: #FFCB05;
    --orange: #FAA61A;
    --accent: #FFCB05;        /* on dark, the yellow is the readable mark */
    --accent-ink: #14242A;
    --highlight: #FFCB05;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface-1: #14242A;
  --surface-2: #1c313a;
  --page: #0e1a1f;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --navy: #14242A;
  --yellow: #FFCB05;
  --orange: #FAA61A;
  --accent: #FFCB05;
  --accent-ink: #14242A;
  --highlight: #FFCB05;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

/* The drawer and the scrim set their own `display`, which would otherwise beat
   the browser's [hidden] rule and leave them on screen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 16px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; margin: 20px 0 8px; color: var(--text-secondary); }
p { margin: 0; }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92em;
  background: var(--surface-2);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ── top bar ───────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 210px; }
.brand-mark {
  height: 34px; width: auto; flex: none;
  /* Clear space around the mark, per the brand guide. */
  margin-right: 6px;
}
.gate-brand .brand-mark { height: 44px; }
/* The navy wordmark would vanish on the navy header, and the yellow shield
   would wash out on white, so each surface gets the mark drawn for it. */
.brand-on-dark { display: none; }
.brand-on-light { display: block; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .brand-on-dark { display: block; }
  :root:where(:not([data-theme="light"])) .brand-on-light { display: none; }
}
:root[data-theme="dark"] .brand-on-dark { display: block; }
:root[data-theme="dark"] .brand-on-light { display: none; }
.brand-on-dark { height: 32px; }
.brand-sub { font-size: 12px; color: var(--text-muted); }
.topbar-search { flex: 1; max-width: 520px; }
.topbar-search input {
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.topbar-search input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  font: inherit;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { filter: brightness(1.1); background: var(--accent); }
.btn-quiet { border-color: transparent; background: transparent; color: var(--text-secondary); padding: 5px 10px; }
.btn-quiet:hover { background: var(--surface-2); }
.btn-danger { border-color: var(--critical); color: var(--critical); background: transparent; }
.btn-danger:hover { background: color-mix(in srgb, var(--critical) 10%, transparent); }
.btn-icon { padding: 7px 10px; }

/* ── tabs ──────────────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 2px;
  padding: 0 24px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 55px;
  z-index: 39;
  overflow-x: auto;
}
.tab {
  font: inherit;
  font-weight: 500;
  padding: 10px 14px;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.tab:hover { color: var(--text-primary); }
.tab.is-active { color: var(--text-primary); border-bottom-color: var(--highlight); }
.tab-count {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 20px;
  padding: 1px 7px;
}

main { padding: 20px 24px 60px; max-width: 1500px; }
.view { display: none; }
.view.is-active { display: block; }

/* ── panels ────────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
  margin-bottom: 16px;
}
.panel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.panel-row > .panel { margin-bottom: 16px; }
.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.panel-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; max-width: 62ch; }
.pill {
  font-size: 12px; font-weight: 600;
  padding: 3px 10px; border-radius: 20px;
  background: var(--surface-2); color: var(--text-secondary);
}
.hint { font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* ── hero + stat tiles ─────────────────────────────────────────────────── */
.hero-row {
  display: grid;
  grid-template-columns: minmax(220px, 300px) 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.hero {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-label { font-size: 13px; color: var(--text-secondary); }
.hero-value { font-size: 54px; font-weight: 600; line-height: 1.05; margin: 6px 0 4px; }
.hero-note { font-size: 12px; color: var(--text-muted); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.stat {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 7px;
}
.stat-dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.stat-value { font-size: 28px; font-weight: 600; line-height: 1.15; }
.stat-note { font-size: 11px; color: var(--text-muted); }

/* ── legend ────────────────────────────────────────────────────────────── */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-secondary);
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ── charts ────────────────────────────────────────────────────────────── */
.chart { display: flex; flex-direction: column; gap: 5px; }

.bar-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 10px;
}
/* Track and total together, so the total rides the bar's tip instead of
   floating at the far right of the panel. */
.bar-body { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-label { font-size: 12px; color: var(--text-secondary); text-align: right; }
/* Cycle names like "2026-27" need more room than a grade number. */
.chart-wide-labels .bar-row { grid-template-columns: 58px 1fr; }
/* Category names sit on the axis, so they need real room. */
.source-row { grid-template-columns: 210px 1fr !important; }
.source-row .bar-label { text-align: right; white-space: normal; line-height: 1.3; }
.chart-wide-labels .bar-label { white-space: nowrap; }
.bar-total {
  font-size: 12px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.bar-track {
  display: flex;
  gap: 2px;                       /* the 2px surface gap between segments */
  height: 20px;
  align-items: stretch;
  border-radius: 2px;
  flex: none;
}
.bar-seg {
  min-width: 3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.bar-seg:first-child { border-radius: 3px 0 0 3px; }
.bar-seg:last-child { border-radius: 0 4px 4px 0; }
.bar-seg:only-child { border-radius: 3px 4px 4px 3px; }
.bar-seg-value {
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.bar-row:hover .bar-seg { filter: saturate(.55) opacity(.55); }
.bar-row:hover .bar-seg:hover { filter: none; }

/* grouped (paired) bars — two measures side by side, never stacked */
.pair-bars { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pair-line { display: flex; align-items: center; gap: 7px; }
.pair-bar { height: 11px; border-radius: 0 4px 4px 0; min-width: 2px; flex: none; }
.pair-value {
  font-size: 11px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.chart-columns { flex-direction: row; align-items: flex-end; gap: 4px; height: 130px; padding-top: 18px; }
.col-item { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 5px; }
.col-bar { width: 100%; max-width: 24px; border-radius: 4px 4px 0 0; background: var(--chart-accent, #2a78d6); min-height: 2px; }
.col-cap { font-size: 10px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.col-label { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

.chart-empty { font-size: 13px; color: var(--text-muted); padding: 20px 0; }

/* tooltips */
[data-tip] { cursor: default; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--surface-1);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 6px 9px;
  border-radius: 6px;
  white-space: pre;
  z-index: 30;
  pointer-events: none;
  box-shadow: var(--shadow);
}

/* table views */
.table-view { margin-top: 14px; overflow-x: auto; }
.table-view table { border-collapse: collapse; width: 100%; font-size: 12px; }
.table-view th, .table-view td {
  padding: 5px 10px;
  text-align: right;
  border-bottom: 1px solid var(--gridline);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.table-view th:first-child, .table-view td:first-child { text-align: left; font-variant-numeric: normal; }
.table-view thead th { color: var(--text-secondary); font-weight: 500; }

/* attrition */
.attrition { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.attrition-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.attrition-tile .stat-value { font-size: 30px; }

.channel-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gridline);
  font-size: 12px;
  color: var(--text-secondary);
}
.channel-strip b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* year-on-year comparison */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.compare-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
}
.compare-now { font-size: 27px; font-weight: 600; line-height: 1.15; margin: 2px 0; }
.compare-older { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* follow-up list */
.follow-list { display: flex; flex-direction: column; max-height: 330px; overflow-y: auto; }
.follow-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--gridline);
}
.follow-item:hover { background: var(--surface-2); }
.follow-open {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.follow-clear {
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-muted);
  border-radius: 6px;
  width: 26px; height: 26px;
  flex: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.follow-clear:hover { color: var(--good); border-color: var(--good); }
.follow-name { font-weight: 500; flex: 1; }
.follow-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ── filters ───────────────────────────────────────────────────────────── */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 12px;
}
.filter-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filter-group-end { margin-left: auto; }
.filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-strong);
  background: var(--surface-1);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.chip:hover { background: var(--surface-2); }
.chip.is-on { background: var(--text-primary); border-color: var(--text-primary); color: var(--surface-1); }
.chip .chip-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }

.field-inline { display: flex; align-items: center; gap: 8px; }
select, input[type="text"], input[type="date"], input[type="search"], textarea {
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 6px 10px;
}
textarea { resize: vertical; }
select:focus, input:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--text-muted);
}

/* ── student table ─────────────────────────────────────────────────────── */
.table-wrap {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
}
.grid { border-collapse: collapse; width: 100%; font-size: 13px; }
.grid thead th {
  position: sticky;
  top: 0;
  background: var(--surface-1);
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
  z-index: 2;
}
.grid tbody tr { cursor: pointer; border-bottom: 1px solid var(--gridline); }
.grid tbody tr:hover { filter: brightness(.97); }
:root[data-theme="dark"] .grid tbody tr:hover,
:root:where(:not([data-theme="light"])) .grid tbody tr:hover { filter: brightness(1.35); }
.grid td { padding: 9px 12px; vertical-align: top; }
/* Rows carry the spreadsheet's own fills, which are strong light colours.
   Grey secondary text disappears on them, so the table uses black text on a
   coloured fill exactly as the spreadsheet does — which also happens to be the
   highest-contrast choice on the red rows. */
.grid tbody td { color: #000000; }
.grid tbody td.muted, .grid tbody td .muted { color: #333333; }
:root[data-theme="dark"] .grid tbody td,
:root:where(:not([data-theme="light"])) .grid tbody td { color: var(--text-primary); }
:root[data-theme="dark"] .grid tbody td.muted,
:root:where(:not([data-theme="light"])) .grid tbody td.muted { color: var(--text-secondary); }
.col-status { width: 190px; }
.col-grade { width: 62px; }
.col-date { width: 110px; }
.grid td.cell-clip {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.status-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; }
.status-tag .dot { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.grade-badge {
  display: inline-block;
  min-width: 30px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.muted { color: var(--text-muted); }
.empty-row { padding: 30px; text-align: center; color: var(--text-muted); }

.empty-state { text-align: center; padding: 70px 20px; }
.empty-state h2 { font-size: 20px; margin-bottom: 8px; }
.empty-state p { color: var(--text-secondary); max-width: 46ch; margin: 0 auto 18px; }

/* ── timeline ──────────────────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; }
.tl-item {
  display: grid;
  grid-template-columns: 96px 92px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 9px 4px;
  border-bottom: 1px solid var(--gridline);
  font-size: 13px;
}
.tl-item.is-link { cursor: pointer; }
.tl-item.is-link:hover { background: var(--surface-2); }
.tl-date { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl-channel { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.tl-channel .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--baseline); }
.tl-note { color: var(--text-primary); overflow-wrap: anywhere; }
.tl-who { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.tl-actions { display: flex; gap: 4px; }
.tl-del {
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 14px; padding: 0 4px; line-height: 1;
}
.tl-del:hover { color: var(--critical); }

/* ── drawer ────────────────────────────────────────────────────────────── */
.drawer-scrim {
  position: fixed; inset: 0;
  background: rgba(11, 11, 11, .35);
  z-index: 50;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(620px, 100%);
  background: var(--surface-1);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow);
  z-index: 51;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px 24px 40px;
}
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.drawer-head h2 { font-size: 21px; }
.drawer-eyebrow { font-size: 12px; color: var(--text-muted); }
.drawer-status { margin: 16px 0 6px; }
.status-desc { font-size: 12px; color: var(--text-muted); margin-top: 6px; max-width: 60ch; }

.drawer-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 16px 0 4px; }
.dtab {
  font: inherit; font-size: 13px; font-weight: 500;
  padding: 8px 12px;
  border: none; border-bottom: 2px solid transparent;
  background: none; color: var(--text-secondary); cursor: pointer;
}
.dtab.is-active { color: var(--text-primary); border-bottom-color: var(--accent); }
.dpane { display: none; padding-top: 14px; }
.dpane.is-active { display: block; }

.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field > span { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 600; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field-grid .field.wide { grid-column: 1 / -1; }
.drawer-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--gridline); }

.contact-form { background: var(--surface-2); border-radius: var(--radius); padding: 14px 16px 6px; margin-bottom: 18px; }
.contact-form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.contact-form .btn { margin-bottom: 12px; }

.raw-log { margin-top: 18px; font-size: 12px; color: var(--text-muted); }
.raw-log summary { cursor: pointer; }
.raw-log pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-2); padding: 10px 12px; border-radius: 8px; margin-top: 8px; }

.ladder { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 6px; }
.rung {
  font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
}
.rung.is-past { color: var(--text-secondary); }
.rung.is-now { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ── spreadsheet + guide ───────────────────────────────────────────────── */
.result-box {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  font-size: 13px;
}
.result-box.is-error { border-color: var(--critical); color: var(--critical); }
.result-box ul { margin: 8px 0 0; padding-left: 18px; }
.result-box li { margin-bottom: 2px; }

.sync-log { font-size: 13px; }
.sync-row { display: grid; grid-template-columns: 150px 78px 1fr; gap: 12px; padding: 7px 4px; border-bottom: 1px solid var(--gridline); }
.sync-row .muted { font-variant-numeric: tabular-nums; }

.legend-table { display: flex; flex-direction: column; }
.legend-row { display: grid; grid-template-columns: 26px 190px 1fr 120px; gap: 14px; align-items: start; padding: 11px 4px; border-bottom: 1px solid var(--gridline); }
.legend-chip { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border-strong); }
.legend-name { font-weight: 600; }
.legend-desc { font-size: 13px; color: var(--text-secondary); }
.legend-excel { font-size: 11px; color: var(--text-muted); }
.legend-excel .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; border: 1px solid var(--border-strong); }

.prose h3 { margin-top: 22px; }
.prose p, .prose li { color: var(--text-secondary); max-width: 74ch; }
.prose ul, .prose ol { margin: 8px 0; padding-left: 22px; }
.prose li { margin-bottom: 4px; }

.rollover { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.rollover .field { margin-bottom: 0; }

/* ── match review ──────────────────────────────────────────────────────── */
.match-card {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.match-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.match-kind { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.match-why { font-size: 12px; color: var(--text-muted); }
.match-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.match-side {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 12px 14px;
}
.match-year {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 600;
}
.match-name { font-size: 15px; font-weight: 600; margin: 2px 0 8px; }
.match-fields { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.match-field { display: grid; grid-template-columns: 88px 1fr; gap: 8px; }
.match-field dt { color: var(--text-muted); }
.match-field dd { margin: 0; overflow-wrap: anywhere; }
/* A field that reads the same on both sides is evidence, so it is marked. */
.match-field.is-same dd { font-weight: 600; }
.match-field.is-same dt::after { content: " ✓"; color: var(--good); }
.match-field.is-diff dd { color: var(--text-secondary); }
.match-sub {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--gridline);
  font-size: 11px;
  color: var(--text-muted);
}
.match-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gridline);
  align-items: center;
}
.match-actions .spacer { flex: 1; }

/* ── funnel ────────────────────────────────────────────────────────────── */
.path { display: flex; align-items: center; gap: 4px; }
.path-step {
  width: 10px; height: 10px; border-radius: 3px; flex: none;
  border: 1px solid transparent;
}
.path-step.is-absent {
  background: transparent;
  border: 1px dashed var(--baseline);
}
.year-cell { font-size: 12px; white-space: nowrap; }
.year-cell .dot { width: 8px; height: 8px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.year-cell.is-absent { color: var(--text-muted); }
.history-note { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.history-note .flag {
  font-size: 11px; font-weight: 600;
  color: var(--accent);
  margin-left: 6px;
}

/* ── trends ────────────────────────────────────────────────────────────── */
.head-controls { display: flex; align-items: center; gap: 8px; }
.multiple-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  font-weight: 600;
  margin: 16px 0 6px;
}
.multiple-title:first-child { margin-top: 0; }
.bar-label.is-now, .bar-total.is-now { color: var(--text-primary); font-weight: 600; }

.stat-delta { font-size: 12px; font-weight: 500; color: var(--text-secondary); }
.stat-delta.is-good { color: var(--good); }
.stat-delta.is-bad { color: var(--critical); }
:root[data-theme="dark"] .stat-delta.is-good { color: #0ca30c; }

.retention { display: flex; flex-direction: column; }
.retention-row {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: center;
  padding: 12px 4px;
  border-bottom: 1px solid var(--gridline);
}
.retention-rate { font-size: 26px; font-weight: 600; line-height: 1.1; }
.retention-detail { font-size: 13px; }

/* ── sign in ───────────────────────────────────────────────────────────── */
.gate {
  position: fixed;
  inset: 0;
  background: var(--page);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.gate-card {
  width: min(420px, 100%);
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px;
  box-shadow: var(--shadow);
}
.gate-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.gate-brand h1 { font-size: 18px; }
.gate-note { font-size: 13px; color: var(--text-secondary); margin-bottom: 16px; }
.gate-row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.gate-error {
  margin-top: 14px;
  font-size: 13px;
  color: var(--critical);
  background: color-mix(in srgb, var(--critical) 10%, transparent);
  padding: 9px 12px;
  border-radius: 8px;
}
.btn-block { width: 100%; justify-content: center; margin-top: 6px; }

/* ── who / team ────────────────────────────────────────────────────────── */
.who { position: relative; }
.who-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 210px;
  background: var(--surface-1);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 60;
}
.who-detail { font-size: 12px; color: var(--text-muted); padding: 6px 10px 8px; }
.who-item {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 7px 10px;
  border: none;
  border-radius: 7px;
  background: none;
  color: var(--text-primary);
  cursor: pointer;
}
.who-item:hover { background: var(--surface-2); }

.live-dot {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 4px 10px;
  border-radius: 20px;
  align-self: center;
}

.share-url code { font-size: 15px; padding: 4px 10px; }
.team-list { display: flex; flex-direction: column; margin-bottom: 6px; }
.team-row {
  display: grid;
  grid-template-columns: 1fr 130px 90px 110px auto;
  gap: 12px;
  align-items: center;
  padding: 9px 4px;
  border-bottom: 1px solid var(--gridline);
  font-size: 13px;
}
.team-name { font-weight: 500; }
.team-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 14px;
  align-items: end;
}
.team-form .btn { margin-bottom: 12px; }
.team-edit {
  font: inherit;
  font-weight: 500;
  width: 100%;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: inherit;
}
.team-edit:hover { border-color: var(--border-strong); }
.team-edit:focus { border-color: var(--accent); background: var(--surface-1); }
.team-edit.is-saved { border-color: var(--good); }
.team-edit-initials { width: 64px; text-transform: uppercase; }

.btn-remove { color: var(--critical); }
.btn-remove:hover {
  background: color-mix(in srgb, var(--critical) 10%, transparent);
}

.badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text-secondary);
}

.conflict-box {
  border: 1px solid var(--critical);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 13px;
  background: color-mix(in srgb, var(--critical) 8%, transparent);
}
.conflict-box .btn { margin-top: 10px; margin-right: 8px; }

/* ── toast ─────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--text-primary);
  color: var(--surface-1);
  padding: 10px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  z-index: 90;
  box-shadow: var(--shadow);
}
.toast.is-error { background: var(--critical); color: #fff; }

@media (max-width: 1000px) {
  .panel-row { grid-template-columns: 1fr; }
  .hero-row { grid-template-columns: 1fr; }
  .field-grid { grid-template-columns: 1fr; }
  .contact-form-row { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .tabs { top: 0; position: static; }
}