/* ==================================================================
   Admin — a working tool, not a brochure.
   Dense where density helps, and built from the same tokens as the app
   so the two never drift apart.
   ================================================================== */

body.admin {
  padding: 0;
  background: var(--bg);
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

/* ---- Rail ---------------------------------------------------------- */
.admin-rail {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  background: var(--glass-strong);
  backdrop-filter: saturate(190%) blur(20px);
  -webkit-backdrop-filter: saturate(190%) blur(20px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.admin-rail::-webkit-scrollbar { display: none; }

.admin-rail .brand-mark { width: 28px; height: 28px; border-radius: 9px; }
.admin-rail .brand-mark svg { width: 15px; height: 15px; }

.admin-rail .wordmark {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 660;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  margin-inline-end: var(--s-3);
}
.admin-rail .wordmark small {
  display: block;
  font-size: var(--text-2xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-3);
}

.admin-rail nav { display: flex; gap: var(--s-1); }
.admin-rail nav a {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.admin-rail nav a:hover { background: var(--surface-2); color: var(--ink); }
.admin-rail nav a[aria-current='page'] { background: var(--accent-soft); color: var(--accent-ink); }

.admin-wrap {
  width: 100%;
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: var(--s-6) var(--gutter) var(--s-16);
}

.admin-head { margin-bottom: var(--s-5); }
.admin-head h1 { font-size: var(--text-2xl); margin-bottom: var(--s-1); }
.admin-head p { color: var(--ink-2); max-width: 46rem; }

/* ---- Tables ---------------------------------------------------------- */
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.admin-table th, .admin-table td {
  padding: var(--s-3);
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.admin-table thead th {
  position: sticky;
  top: 58px;
  z-index: 5;
  background: var(--surface-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--ink-3);
  white-space: nowrap;
}
.admin-table tbody tr { transition: background var(--t-fast); }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-table tbody tr.retired { opacity: 0.5; }
.admin-table .num { font-variant-numeric: tabular-nums; color: var(--ink-3); }
.admin-table .stem { max-width: 34rem; }
.admin-table .stem strong { font-weight: 550; }
.admin-table .stem .ans { display: block; margin-top: 3px; font-size: var(--text-xs); color: var(--ok); }
.admin-table .actions { white-space: nowrap; text-align: end; }
.admin-table .actions form { display: inline; }

/* ---- Filter bar --------------------------------------------------------- */
.filter-bar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding: var(--s-4);
  margin-bottom: var(--s-4);
}
@media (min-width: 720px) {
  .filter-bar { grid-template-columns: 2fr repeat(3, 1fr) auto; align-items: end; }
}
.filter-bar .field { gap: var(--s-1); }
.filter-bar .input, .filter-bar select.input { min-height: 42px; }

/* ---- Editor ---------------------------------------------------------------- */
.editor-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1000px) { .editor-grid { grid-template-columns: minmax(0, 1fr) 20rem; } }

.editor-grid .side { position: sticky; top: calc(58px + var(--s-4)); }

textarea.input { min-height: 7rem; resize: vertical; line-height: var(--leading-normal); }
textarea.input.tall { min-height: 12rem; }

.option-rows { display: grid; gap: var(--s-2); }
.option-row { display: grid; grid-template-columns: 4rem 1fr; gap: var(--s-2); }
.option-row .input { min-height: 42px; }
.option-row .input.label { text-align: center; font-weight: 650; }

.grid-2 { display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---- Derived read-outs, which the editor shows but never edits -------------- */
.derived { display: grid; gap: var(--s-2); }
.derived .row-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--line-faint);
  font-size: var(--text-sm);
}
.derived .row-item:last-child { border-bottom: 0; }
.derived .row-item span { color: var(--ink-3); }
.derived .row-item b { font-family: var(--font-sans); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- Flash ------------------------------------------------------------------- */
.flash {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  background: var(--ok-soft);
  color: var(--ok-ink);
  margin-bottom: var(--s-4);
  font-weight: 620;
  font-size: var(--text-sm);
}
.flash.bad { background: var(--bad-soft); color: var(--bad-ink); }

/* ---- Login ---------------------------------------------------------------------- */
body.admin-login {
  display: grid;
  place-items: center;
  padding: var(--s-6);
  background: var(--wash), var(--bg);
}
.login-card {
  width: min(24rem, 92vw);
  padding: var(--s-6);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
}
.login-card .brand-mark { width: 40px; height: 40px; border-radius: 12px; margin-bottom: var(--s-4); }
.login-card .brand-mark svg { width: 20px; height: 20px; }

/* ---- Bar chart, for the most-missed list ----------------------------------------- */
.bar { display: flex; align-items: center; gap: var(--s-2); }
.bar .track {
  flex: 1;
  height: 6px;
  min-width: 3rem;
  border-radius: var(--r-full);
  background: var(--line);
  overflow: hidden;
}
.bar .track > i { display: block; height: 100%; background: var(--bad); border-radius: inherit; }
.bar b { font-variant-numeric: tabular-nums; font-size: var(--text-sm); min-width: 2.6rem; text-align: end; }