/* ============================================================================
   admin.css — the Erudia admin console.

   This file deliberately does NOT follow the app theme. The learner app is warm
   espresso + amber; this is cool slate + data-ink, always dark, in both app
   themes. That is the point: the console is a different tool, and looking like
   the product it measures makes it easy to mistake a number for a page.

   Everything is scoped under `.ac`, plus `body.ac-mode` for the two container
   overrides (width + page background). js/app.js `route()` toggles `ac-mode` on
   every navigation, so leaving the admin area always restores the app chrome —
   the class is never removed by the admin renderers themselves, which is what
   made earlier attempts at this leak into learner views.

   Colour rules
     · data-ink (good/warn/bad) is reserved for values that carry a judgement.
       A count is never green. An accuracy against a target band is.
     · one accent (blue) for the primary series, one (violet) for a comparison
       series. Nothing else is coloured.
     · `thin` is grey, not red: a small sample is not a bad result, it is an
       absent one.
   ========================================================================== */

body.ac-mode { background:#0b0f14; }
body.ac-mode #app { max-width:1560px; padding:0 20px 80px; }
/* The app topbar stays (it is the way back out) but must not glow amber over a
   slate page. */
body.ac-mode .topbar { background:#0d1219; border-bottom-color:#1c2530; }

.ac {
  /* surfaces */
  --ac-bg:#0b0f14; --ac-panel:#111823; --ac-panel-2:#161f2b; --ac-panel-3:#1c2836;
  --ac-line:#1f2b3a; --ac-line-2:#2b3a4d;
  /* ink */
  --ac-ink:#e8eef6; --ac-ink-2:#93a3b6; --ac-ink-3:#5f7186;
  /* data ink */
  --ac-good:#3fb950; --ac-warn:#d9a326; --ac-bad:#f0564a;
  --ac-good-bg:rgba(63,185,80,.12); --ac-warn-bg:rgba(217,163,38,.12); --ac-bad-bg:rgba(240,86,74,.12);
  /* series */
  --ac-s1:#4d9fff; --ac-s2:#a97bff; --ac-s1-bg:rgba(77,159,255,.14);
  --ac-mono:"JetBrains Mono","SF Mono",Consolas,ui-monospace,monospace;
  --ac-sans:"Spline Sans","Inter",-apple-system,"Segoe UI",system-ui,sans-serif;

  color:var(--ac-ink);
  font-family:var(--ac-sans);
  font-size:13px;
  line-height:1.5;
  /* Numbers must not shift width as they tick over. */
  font-variant-numeric:tabular-nums;
  padding-bottom:40px;
}
.ac *, .ac *::before, .ac *::after { box-sizing:border-box; }

/* ── header ─────────────────────────────────────────────────────────────── */
.ac-top {
  display:flex; align-items:baseline; flex-wrap:wrap; gap:10px 16px;
  padding:18px 0 12px;
}
.ac-title { font-family:var(--ac-mono); font-size:15px; font-weight:600; letter-spacing:.02em; margin:0; color:var(--ac-ink); }
.ac-title b { color:var(--ac-s1); font-weight:600; }
.ac-sub { font-size:12px; color:var(--ac-ink-3); font-family:var(--ac-mono); margin:0; }
.ac-top-right { margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

.ac-tabs { display:flex; gap:2px; border-bottom:1px solid var(--ac-line); margin:0 0 18px; flex-wrap:wrap; }
.ac-tab {
  padding:8px 15px; font-size:12.5px; font-family:var(--ac-mono); letter-spacing:.01em;
  color:var(--ac-ink-3); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  white-space:nowrap;
}
.ac-tab:hover { color:var(--ac-ink); background:var(--ac-panel); }
.ac-tab.active { color:var(--ac-s1); border-bottom-color:var(--ac-s1); }

/* range picker */
.ac-range { display:flex; gap:0; border:1px solid var(--ac-line-2); border-radius:6px; overflow:hidden; }
.ac-range button {
  padding:5px 11px; font-family:var(--ac-mono); font-size:11.5px; background:var(--ac-panel);
  color:var(--ac-ink-2); border:0; border-left:1px solid var(--ac-line); cursor:pointer;
}
.ac-range button:first-child { border-left:0; }
.ac-range button:hover { background:var(--ac-panel-3); color:var(--ac-ink); }
.ac-range button.on { background:var(--ac-s1); color:#04121f; font-weight:600; }

.ac-btn {
  padding:5px 12px; font-family:var(--ac-mono); font-size:11.5px; cursor:pointer;
  background:var(--ac-panel); color:var(--ac-ink-2); border:1px solid var(--ac-line-2); border-radius:6px;
}
.ac-btn:hover { background:var(--ac-panel-3); color:var(--ac-ink); }
.ac-btn:disabled { opacity:.45; cursor:default; }
.ac-btn.danger:hover { border-color:var(--ac-bad); color:var(--ac-bad); }

/* ── section headings ───────────────────────────────────────────────────── */
.ac-h {
  font-family:var(--ac-mono); font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.09em; color:var(--ac-ink-3); margin:26px 0 9px;
  display:flex; align-items:center; gap:9px;
}
.ac-h::after { content:""; flex:1; height:1px; background:var(--ac-line); }
.ac-h:first-child { margin-top:4px; }
.ac-note { font-size:12px; color:var(--ac-ink-3); margin:-4px 0 10px; max-width:78ch; line-height:1.55; }

/* ── stat tiles ─────────────────────────────────────────────────────────── */
.ac-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:9px; margin:0 0 6px; }
.ac-tile {
  background:var(--ac-panel); border:1px solid var(--ac-line); border-radius:8px;
  padding:11px 13px 12px; min-width:0;
}
.ac-tile-lab {
  font-family:var(--ac-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--ac-ink-3); margin:0 0 6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ac-tile-val { font-family:var(--ac-mono); font-size:23px; font-weight:600; line-height:1.05; letter-spacing:-.01em; }
.ac-tile-sub { font-family:var(--ac-mono); font-size:10.5px; color:var(--ac-ink-3); margin-top:5px; }
.ac-delta { font-family:var(--ac-mono); font-size:11px; font-weight:600; margin-left:7px; letter-spacing:0; }
.ac-up { color:var(--ac-good); } .ac-down { color:var(--ac-bad); } .ac-flat { color:var(--ac-ink-3); }
.ac-good { color:var(--ac-good); } .ac-warn { color:var(--ac-warn); } .ac-bad { color:var(--ac-bad); }
.ac-dim { color:var(--ac-ink-3); }

/* ── signal cards: only rendered when they fire, so an empty Pulse is good news ── */
.ac-signals { display:flex; flex-direction:column; gap:7px; margin:2px 0 4px; }
.ac-signal {
  display:flex; gap:11px; align-items:flex-start; padding:11px 13px;
  border:1px solid var(--ac-line-2); border-left-width:3px; border-radius:7px;
  background:var(--ac-panel); font-size:12.5px; line-height:1.5;
}
.ac-signal.bad  { border-left-color:var(--ac-bad);  background:linear-gradient(90deg,var(--ac-bad-bg),transparent 60%); }
.ac-signal.warn { border-left-color:var(--ac-warn); background:linear-gradient(90deg,var(--ac-warn-bg),transparent 60%); }
.ac-signal.good { border-left-color:var(--ac-good); background:linear-gradient(90deg,var(--ac-good-bg),transparent 60%); }
.ac-signal.info { border-left-color:var(--ac-s1);   background:linear-gradient(90deg,var(--ac-s1-bg),transparent 60%); }
.ac-signal-b { font-family:var(--ac-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  padding:2px 6px; border-radius:4px; white-space:nowrap; margin-top:1px; }
.ac-signal.bad  .ac-signal-b { background:var(--ac-bad-bg);  color:var(--ac-bad); }
.ac-signal.warn .ac-signal-b { background:var(--ac-warn-bg); color:var(--ac-warn); }
.ac-signal.good .ac-signal-b { background:var(--ac-good-bg); color:var(--ac-good); }
.ac-signal.info .ac-signal-b { background:var(--ac-s1-bg);   color:var(--ac-s1); }
.ac-signal-t { min-width:0; }
.ac-signal-t b { color:var(--ac-ink); font-weight:600; }
.ac-signal-t .ac-why { display:block; color:var(--ac-ink-3); font-size:11.5px; margin-top:3px; }

/* ── panels + charts ────────────────────────────────────────────────────── */
.ac-panel { background:var(--ac-panel); border:1px solid var(--ac-line); border-radius:8px; padding:14px; margin:0 0 10px; }
.ac-grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:10px; }
.ac-chart { width:100%; display:block; overflow:visible; }
.ac-chart text { font-family:var(--ac-mono); fill:var(--ac-ink-3); font-size:9.5px; }
.ac-chart .ac-grid-line { stroke:var(--ac-line); stroke-width:1; }
.ac-chart .ac-zero { stroke:var(--ac-line-2); stroke-width:1; }
.ac-chart .ac-area { fill:var(--ac-s1-bg); }
.ac-chart .ac-line { fill:none; stroke:var(--ac-s1); stroke-width:1.75; stroke-linejoin:round; stroke-linecap:round; }
.ac-chart .ac-line2 { fill:none; stroke:var(--ac-s2); stroke-width:1.5; stroke-dasharray:3 3; }
.ac-chart .ac-dot { fill:var(--ac-s1); }
.ac-chart .ac-bar { fill:var(--ac-s1); }
.ac-chart .ac-bar:hover { fill:#7ab8ff; }
.ac-legend { display:flex; gap:14px; flex-wrap:wrap; font-family:var(--ac-mono); font-size:10.5px; color:var(--ac-ink-3); margin-top:8px; }
.ac-legend i { display:inline-block; width:9px; height:2.5px; margin-right:5px; vertical-align:middle; border-radius:2px; }
.ac-legend .s1 i { background:var(--ac-s1); } .ac-legend .s2 i { background:var(--ac-s2); }

/* ── funnel ─────────────────────────────────────────────────────────────── */
.ac-funnel { display:flex; flex-direction:column; gap:3px; }
.ac-fstep { display:grid; grid-template-columns:minmax(120px,190px) 1fr 96px; align-items:center; gap:12px; }
.ac-fstep-lab { font-size:12px; color:var(--ac-ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ac-fstep-bar { height:22px; background:var(--ac-panel-2); border-radius:4px; overflow:hidden; position:relative; }
.ac-fstep-bar > i { display:block; height:100%; background:linear-gradient(90deg,var(--ac-s1),#3d7fd0); border-radius:4px; }
.ac-fstep-val { font-family:var(--ac-mono); font-size:12px; text-align:right; white-space:nowrap; }
.ac-fdrop { font-family:var(--ac-mono); font-size:10.5px; padding-left:2px; }

/* ── cohort heatmap ─────────────────────────────────────────────────────── */
.ac-cohort { width:100%; border-collapse:separate; border-spacing:3px; font-family:var(--ac-mono); font-size:11px; }
.ac-cohort th { font-weight:500; font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--ac-ink-3); padding:0 0 4px; text-align:center; }
.ac-cohort th:first-child, .ac-cohort td:first-child { text-align:left; }
.ac-cohort td { padding:6px 4px; text-align:center; border-radius:4px; background:var(--ac-panel-2); color:var(--ac-ink-2); white-space:nowrap; }
.ac-cohort td.wk { background:transparent; color:var(--ac-ink-2); font-size:10.5px; }
.ac-cohort td.n  { background:transparent; color:var(--ac-ink); }
/* Immature cells read as "too early to tell", never as a real 0%. */
.ac-cohort td.imm { background:repeating-linear-gradient(45deg,var(--ac-panel-2),var(--ac-panel-2) 4px,transparent 4px,transparent 8px); color:var(--ac-ink-3); }

/* ── tables ─────────────────────────────────────────────────────────────── */
.ac-tw { overflow-x:auto; border:1px solid var(--ac-line); border-radius:8px; background:var(--ac-panel); }
.ac-table { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; }
.ac-table th {
  position:sticky; top:0; z-index:1; background:var(--ac-panel-3);
  font-family:var(--ac-mono); font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  color:var(--ac-ink-2); text-align:right; padding:8px 11px; border-bottom:1px solid var(--ac-line-2);
  cursor:pointer; user-select:none;
}
.ac-table th:first-child, .ac-table td:first-child { text-align:left; }
.ac-table th.nosort { cursor:default; }
.ac-table th:hover:not(.nosort) { color:var(--ac-ink); }
.ac-table th .ac-arrow { color:var(--ac-s1); margin-left:4px; }
.ac-table td { padding:7px 11px; border-bottom:1px solid var(--ac-line); text-align:right; font-family:var(--ac-mono); font-size:11.5px; color:var(--ac-ink-2); }
.ac-table td:first-child { font-family:var(--ac-sans); font-size:12.5px; color:var(--ac-ink); white-space:normal; min-width:210px; }
.ac-table tbody tr:hover td { background:var(--ac-panel-2); }
.ac-table tbody tr:last-child td { border-bottom:0; }
.ac-table tr.thin td { color:var(--ac-ink-3); }
.ac-table tr.thin td:first-child { color:var(--ac-ink-3); }

/* lesson links — the thing that makes the table actionable */
.ac-lesson { color:var(--ac-ink); text-decoration:none; border-bottom:1px solid var(--ac-line-2); }
.ac-lesson:hover { color:var(--ac-s1); border-bottom-color:var(--ac-s1); }
.ac-lesson-ch { display:block; font-family:var(--ac-mono); font-size:10px; color:var(--ac-ink-3); letter-spacing:.02em; margin-top:1px; }
.ac-lesson-missing { color:var(--ac-ink-3); font-family:var(--ac-mono); font-size:11.5px; }

.ac-pill { font-family:var(--ac-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.06em;
  padding:1px 5px; border-radius:3px; margin-left:6px; vertical-align:1px; }
.ac-pill.thin { background:var(--ac-panel-3); color:var(--ac-ink-3); }
.ac-pill.bad  { background:var(--ac-bad-bg);  color:var(--ac-bad); }
.ac-pill.warn { background:var(--ac-warn-bg); color:var(--ac-warn); }
.ac-pill.good { background:var(--ac-good-bg); color:var(--ac-good); }
.ac-pill.s1   { background:var(--ac-s1-bg);   color:var(--ac-s1); }

/* accuracy band meter inside a table cell */
.ac-meter { display:inline-block; width:56px; height:5px; background:var(--ac-panel-3); border-radius:3px; overflow:hidden; margin-right:7px; vertical-align:middle; }
.ac-meter > i { display:block; height:100%; border-radius:3px; }

/* ── accounts ───────────────────────────────────────────────────────────── */
.ac-input {
  width:100%; max-width:330px; padding:7px 11px; font-family:var(--ac-mono); font-size:12px;
  background:var(--ac-panel); color:var(--ac-ink); border:1px solid var(--ac-line-2); border-radius:6px;
}
.ac-input:focus { outline:none; border-color:var(--ac-s1); }
.ac-users { display:flex; flex-direction:column; gap:5px; }
.ac-user {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px;
  padding:9px 13px; background:var(--ac-panel); border:1px solid var(--ac-line); border-radius:7px;
}
.ac-user:hover { border-color:var(--ac-line-2); }
.ac-user.banned { opacity:.5; }
.ac-user.attn { border-color:var(--ac-warn); }
.ac-user-name { display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:var(--ac-ink); text-decoration:none; font-weight:500; min-width:0; }
a.ac-user-name:hover { color:var(--ac-s1); }
.ac-user-email { font-family:var(--ac-mono); font-size:10.5px; color:var(--ac-ink-3); flex-basis:100%; }
.ac-user-meta { font-family:var(--ac-mono); font-size:11px; color:var(--ac-ink-3); white-space:nowrap; text-align:right; }
.ac-user-acts { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.ac-noname { color:var(--ac-ink-3); font-style:italic; }

/* ── step-up dialog ─────────────────────────────────────────────────────── */
.ac-stepup { max-width:400px; }
.ac-stepup p { font-size:12.5px; color:var(--ac-ink-2); line-height:1.55; margin:0 0 12px; }
.ac-stepup label { display:block; font-family:var(--ac-mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--ac-ink-3); margin:0 0 5px; }
.ac-stepup input { width:100%; max-width:none; margin-bottom:12px; }
.ac-stepup-cap { margin:0 0 12px; min-height:0; }
.ac-stepup-err { color:var(--ac-bad); font-size:12px; margin:0 0 10px; font-family:var(--ac-mono); }
.ac-stepup-acts { display:flex; gap:8px; justify-content:flex-end; }

/* ── misc ───────────────────────────────────────────────────────────────── */
.ac-empty { padding:16px; text-align:center; color:var(--ac-ink-3); font-family:var(--ac-mono); font-size:12px;
  border:1px dashed var(--ac-line-2); border-radius:8px; }
.ac-kv { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px; }
.ac-kv > div { display:flex; justify-content:space-between; gap:10px; padding:7px 11px;
  background:var(--ac-panel); border:1px solid var(--ac-line); border-radius:6px; }
.ac-kv span { color:var(--ac-ink-3); font-size:11.5px; }
.ac-kv b { font-family:var(--ac-mono); font-size:11.5px; font-weight:600; text-align:right; }
.ac-code { font-family:var(--ac-mono); font-size:11px; background:var(--ac-panel-3); color:var(--ac-s1);
  padding:1px 5px; border-radius:3px; }
.ac-setup { border-left:3px solid var(--ac-warn); background:var(--ac-warn-bg); padding:12px 14px;
  border-radius:6px; font-size:12.5px; line-height:1.55; margin:0 0 12px; }
.ac-setup b { color:var(--ac-ink); }

@media (max-width:900px) {
  body.ac-mode #app { padding:0 12px 60px; }
  .ac-fstep { grid-template-columns:minmax(90px,130px) 1fr 74px; gap:8px; }
  .ac-user { grid-template-columns:minmax(0,1fr); gap:7px; }
  .ac-user-meta, .ac-user-acts { justify-content:flex-start; text-align:left; }
}
@media (prefers-reduced-motion:no-preference) {
  .ac-fstep-bar > i, .ac-meter > i { transition:width .45s cubic-bezier(.2,.7,.2,1); }
}