/* =============================================================================
   Certify design system
   Hand-written, no build step. Tokens on :root, dark palette redefined for both
   the system preference and an explicit [data-theme] so a future toggle drops
   in without a rewrite.
   ========================================================================== */

:root {
  color-scheme: light dark;

  /* Brand blue carried forward from the old #0d5396 table headers.
     Green is reserved for "done" states -- never for a generic action. */
  --brand-50:#eef5fb;  --brand-100:#d6e7f5; --brand-200:#aecff0;
  --brand-500:#1668ad; --brand-600:#0d5396; --brand-700:#0a3f73;

  --done-500:#2f9e44;  --done-600:#268139;  --done-50:#eaf7ee;

  --ok:#268139; --warn:#b45309; --danger:#b42318; --info:#0b6a9e;
  --ok-bg:#eaf7ee; --warn-bg:#fdf3e6; --danger-bg:#fdeceb; --info-bg:#e9f4fb;

  --bg:#f5f7fa;
  --surface:#ffffff;
  --surface-2:#f0f3f7;
  --surface-3:#e4eaf1;
  --border:#d9e0e8;
  --border-strong:#b4c0cd;
  --text:#111820;
  --text-muted:#5a6673;
  --text-faint:#8792a0;
  --text-inverse:#ffffff;

  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem; --space-4:1rem;
  --space-5:1.5rem; --space-6:2rem;   --space-7:3rem;   --space-8:4rem;

  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-full:999px;

  --shadow-1:0 1px 2px rgb(16 24 32 / .06), 0 1px 3px rgb(16 24 32 / .08);
  --shadow-2:0 4px 12px rgb(16 24 32 / .08), 0 2px 4px rgb(16 24 32 / .06);
  --shadow-3:0 16px 40px rgb(16 24 32 / .16);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --tap:44px;
  --content:74rem;
  --content-narrow:44rem;
  --nav-h:56px;

  --focus:0 0 0 3px color-mix(in srgb, var(--brand-600) 35%, transparent);
  --transition:140ms cubic-bezier(.2,.8,.3,1);
}

/* Dark palette. Defined twice on purpose: once for the system preference
   (guarded so an explicit light choice wins) and once for an explicit dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-50:#0f2437; --brand-100:#143b57; --brand-200:#1d5c8f;
    --brand-500:#4c9fdc; --brand-600:#6fb4e6; --brand-700:#9acbef;
    --done-500:#4ac06a; --done-600:#6bd189; --done-50:#12301c;
    --ok:#6bd189; --warn:#e0a458; --danger:#f2837a; --info:#6fb4e6;
    --ok-bg:#12301c; --warn-bg:#33260f; --danger-bg:#3a1b19; --info-bg:#0f2839;
    --bg:#0c1116; --surface:#141b23; --surface-2:#1b232d; --surface-3:#232d39;
    --border:#2a3441; --border-strong:#3d4a5a;
    --text:#e6edf3; --text-muted:#9aa7b4; --text-faint:#6f7d8c;
    --shadow-1:none; --shadow-2:0 4px 14px rgb(0 0 0 / .4); --shadow-3:0 18px 44px rgb(0 0 0 / .55);
  }
}
:root[data-theme="dark"] {
  --brand-50:#0f2437; --brand-100:#143b57; --brand-200:#1d5c8f;
  --brand-500:#4c9fdc; --brand-600:#6fb4e6; --brand-700:#9acbef;
  --done-500:#4ac06a; --done-600:#6bd189; --done-50:#12301c;
  --ok:#6bd189; --warn:#e0a458; --danger:#f2837a; --info:#6fb4e6;
  --ok-bg:#12301c; --warn-bg:#33260f; --danger-bg:#3a1b19; --info-bg:#0f2839;
  --bg:#0c1116; --surface:#141b23; --surface-2:#1b232d; --surface-3:#232d39;
  --border:#2a3441; --border-strong:#3d4a5a;
  --text:#e6edf3; --text-muted:#9aa7b4; --text-faint:#6f7d8c;
  --shadow-1:none; --shadow-2:0 4px 14px rgb(0 0 0 / .4); --shadow-3:0 18px 44px rgb(0 0 0 / .55);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ------------------------------------------------------------------ base */

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

html { -webkit-text-size-adjust:100%; }

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:1rem/1.6 var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}

h1,h2,h3,h4 { margin:0 0 var(--space-3); line-height:1.25; font-weight:650; letter-spacing:-.01em; }
h1 { font-size:1.6rem; }
h2 { font-size:1.2rem; }
h3 { font-size:1.02rem; }
p  { margin:0 0 var(--space-4); }
p:last-child { margin-bottom:0; }

a { color:var(--brand-600); text-decoration:none; }
a:hover { text-decoration:underline; }

img { max-width:100%; height:auto; vertical-align:middle; }
hr { border:0; border-top:1px solid var(--border); margin:var(--space-6) 0; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline:2px solid transparent; box-shadow:var(--focus); border-radius:var(--radius-sm);
}

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

.skip-link {
  position:absolute; left:var(--space-3); top:-3rem; z-index:100;
  background:var(--surface); color:var(--text); padding:var(--space-2) var(--space-4);
  border-radius:var(--radius-md); box-shadow:var(--shadow-2); transition:top var(--transition);
}
.skip-link:focus { top:var(--space-3); }

.icon { flex:none; vertical-align:-.2em; }

/* ------------------------------------------------------------------- nav */

.nav {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--border);
}
.nav__inner {
  max-width:var(--content); margin-inline:auto;
  min-height:var(--nav-h); padding:0 var(--space-4);
  display:flex; align-items:center; gap:var(--space-4);
}
.nav__brand {
  display:flex; align-items:center; gap:var(--space-2);
  font-weight:650; color:var(--text); letter-spacing:-.01em; flex:none;
}
.nav__brand:hover { text-decoration:none; }

.nav__links { display:flex; align-items:center; gap:var(--space-1); margin-inline-start:auto; }
.nav__link {
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding:var(--space-2) var(--space-3); border-radius:var(--radius-md);
  color:var(--text-muted); font-size:.925rem; font-weight:550;
  transition:background var(--transition), color var(--transition);
}
.nav__link:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.nav__link[aria-current="page"] { background:var(--brand-50); color:var(--brand-700); }

.nav__toggle {
  display:none; margin-inline-start:auto;
  min-width:var(--tap); min-height:var(--tap);
  align-items:center; justify-content:center;
  background:none; border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--text); cursor:pointer;
}

.nav__account { position:relative; flex:none; }
.nav__account > summary {
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:2px;
  min-width:var(--tap); min-height:36px; padding:0 var(--space-2);
  border:1px solid var(--border); border-radius:var(--radius-full);
  color:var(--text-muted);
}
.nav__account > summary::-webkit-details-marker { display:none; }
.nav__menu {
  position:absolute; right:0; top:calc(100% + 6px); min-width:12rem; z-index:60;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-3); padding:var(--space-1);
}
.nav__menu a, .nav__menu button {
  display:flex; align-items:center; gap:var(--space-2); width:100%;
  padding:var(--space-2) var(--space-3); border:0; border-radius:var(--radius-sm);
  background:none; color:var(--text); font:inherit; font-size:.925rem;
  text-align:left; cursor:pointer;
}
.nav__menu a:hover, .nav__menu button:hover { background:var(--surface-2); text-decoration:none; }
.nav__menu form { margin:0; }

.nav--public .nav__inner { justify-content:center; }

@media (max-width:820px) {
  .nav__toggle { display:inline-flex; }
  .nav__links {
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--surface); border-bottom:1px solid var(--border);
    padding:var(--space-2); box-shadow:var(--shadow-2);
  }
  .nav__links.is-open { display:flex; }
  .nav__link { min-height:var(--tap); font-size:1rem; }
  .nav__account { order:3; }
}

/* ------------------------------------------------------------------ page */

.page {
  max-width:var(--content); margin-inline:auto;
  padding:var(--space-6) var(--space-4) var(--space-8);
}
.page--narrow { max-width:var(--content-narrow); }
.page--wide   { max-width:96rem; }

.page-header {
  display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between;
  gap:var(--space-4); margin-bottom:var(--space-5);
}
.page-header h1 { margin:0; }
.page-header__sub { margin:var(--space-1) 0 0; color:var(--text-muted); font-size:.95rem; }
.page-header__actions { display:flex; flex-wrap:wrap; gap:var(--space-2); }

.breadcrumb { margin-bottom:var(--space-3); font-size:.875rem; }
.breadcrumb ol { list-style:none; display:flex; flex-wrap:wrap; gap:var(--space-2); margin:0; padding:0; }
.breadcrumb li + li::before { content:"/"; color:var(--text-faint); margin-inline-end:var(--space-2); }
.breadcrumb span { color:var(--text-muted); }

/* --------------------------------------------------------------- layout  */

.stack > * + * { margin-block-start:var(--space-4); }
.stack--tight > * + * { margin-block-start:var(--space-2); }
.cluster { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); }
.cluster--between { justify-content:space-between; }
.grid-auto { display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr)); }
.spacer { flex:1 1 auto; }
.muted { color:var(--text-muted); }
.faint { color:var(--text-faint); }
.small { font-size:.875rem; }
.nowrap { white-space:nowrap; }
.mono { font-family:var(--font-mono); font-size:.9em; }

/* ------------------------------------------------------------------ card */

.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-1);
}
.card + .card { margin-block-start:var(--space-4); }
.card__header {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:var(--space-3); padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border);
}
.card__header h2, .card__header h3 { margin:0; }
.card__body   { padding:var(--space-5); }
.card__footer { padding:var(--space-4) var(--space-5); border-top:1px solid var(--border); background:var(--surface-2);
                border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.card--accent { border-left:3px solid var(--brand-600); }
.card--flush .card__body { padding:0; }

/* --------------------------------------------------------------- buttons */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  min-height:var(--tap); padding:0 var(--space-4);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface); color:var(--text);
  font:inherit; font-size:.925rem; font-weight:600; line-height:1;
  cursor:pointer; text-align:center;
  transition:background var(--transition), border-color var(--transition),
             color var(--transition), box-shadow var(--transition);
}
.btn:hover { background:var(--surface-2); text-decoration:none; }
.btn:active { transform:translateY(1px); }

.btn--primary { background:var(--brand-600); border-color:var(--brand-600); color:#fff; }
.btn--primary:hover { background:var(--brand-700); border-color:var(--brand-700); }

.btn--danger { background:var(--danger); border-color:var(--danger); color:#fff; }
.btn--danger:hover { filter:brightness(.92); }

.btn--ghost { background:none; border-color:transparent; color:var(--text-muted); }
.btn--ghost:hover { background:var(--surface-2); color:var(--text); }

.btn--sm { min-height:36px; padding:0 var(--space-3); font-size:.875rem; }
.btn--icon { padding:0; width:var(--tap); }
.btn--icon.btn--sm { width:36px; }
.btn--block { width:100%; }
.btn--lg { min-height:52px; font-size:1.05rem; padding:0 var(--space-5); }

.btn[disabled], .btn[aria-disabled="true"] { opacity:.5; cursor:not-allowed; pointer-events:none; }
.btn[aria-busy="true"] { position:relative; color:transparent; }
.btn[aria-busy="true"]::after {
  content:""; position:absolute; inset:0; margin:auto; width:1.1em; height:1.1em;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  color:var(--text); animation:spin .7s linear infinite;
}
.btn--primary[aria-busy="true"]::after, .btn--danger[aria-busy="true"]::after { color:#fff; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ----------------------------------------------------------------- forms */

.field { display:block; margin-block-end:var(--space-4); }
.field:last-child { margin-block-end:0; }
.label { display:block; margin-block-end:var(--space-2); font-size:.9rem; font-weight:600; }
.label .req { color:var(--danger); }

.input, .select, .textarea {
  display:block; width:100%;
  min-height:var(--tap); padding:var(--space-2) var(--space-3);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  font:inherit; font-size:1rem;
  transition:border-color var(--transition), box-shadow var(--transition);
}
.textarea { min-height:8rem; line-height:1.5; resize:vertical; }
.input::placeholder, .textarea::placeholder { color:var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
  border-color:var(--brand-600); box-shadow:var(--focus); outline:none;
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color:var(--danger); background:var(--danger-bg);
}
.select {
  appearance:none; padding-inline-end:var(--space-6);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235a6673' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right var(--space-3) center;
}
/* The chevron is a data-URI, so its stroke can't inherit currentColor --
   restate it for dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .select {
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa7b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] .select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%239aa7b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.hint  { display:block; margin-block-start:var(--space-1); color:var(--text-muted); font-size:.85rem; }
.error { display:block; margin-block-start:var(--space-1); color:var(--danger); font-size:.85rem; font-weight:550; }
.counter { float:inline-end; color:var(--text-faint); font-size:.8rem; font-weight:500; font-variant-numeric:tabular-nums; }
.counter.is-over { color:var(--danger); font-weight:650; }

.field-row { display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); }
fieldset { border:0; margin:0 0 var(--space-5); padding:0; }
legend { padding:0; margin-block-end:var(--space-3); font-weight:650; font-size:.95rem; }

/* checkboxes -- the row is the tap target, not just the box */
.check {
  display:flex; align-items:center; gap:var(--space-3);
  min-height:var(--tap); padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md); cursor:pointer;
  transition:background var(--transition);
}
.check:hover { background:var(--surface-2); }
.check input[type="checkbox"], .check input[type="radio"] {
  flex:none; width:24px; height:24px; margin:0; accent-color:var(--done-600); cursor:pointer;
}
.check__text { flex:1; min-width:0; }
.check:has(input:checked) { background:var(--done-50); }
.check:has(input:checked) .check__text { color:var(--text); }
.check:has(input:disabled) { opacity:.55; cursor:not-allowed; }

.switch { display:flex; align-items:flex-start; gap:var(--space-3); cursor:pointer; }
.switch input { flex:none; width:22px; height:22px; margin-block-start:2px; accent-color:var(--brand-600); cursor:pointer; }
.switch__text strong { display:block; font-weight:600; }
.switch__text span { display:block; color:var(--text-muted); font-size:.875rem; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

.table { width:100%; border-collapse:collapse; font-size:.925rem; }
.table th, .table td { padding:var(--space-3) var(--space-4); text-align:left; vertical-align:middle; }
.table thead th {
  position:sticky; top:0; z-index:1;
  background:var(--surface-2); color:var(--text-muted);
  font-size:.78rem; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
  border-block-end:1px solid var(--border); white-space:nowrap;
}
.table tbody tr { border-block-end:1px solid var(--border); }
.table tbody tr:last-child { border-block-end:0; }
.table tbody tr:hover { background:var(--surface-2); }
.table .num { text-align:right; font-variant-numeric:tabular-nums; }
.table__actions { display:flex; gap:var(--space-1); justify-content:flex-end; }

/* Below 720px each row becomes its own card, labelled from data-label. */
@media (max-width:720px) {
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display:block; width:100%; }
  .table--stack thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .table--stack tr {
    background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
    margin-block-end:var(--space-3); padding:var(--space-2) var(--space-3);
  }
  .table--stack tr:hover { background:var(--surface); }
  .table--stack td {
    display:grid; grid-template-columns:7.5rem 1fr; gap:var(--space-3);
    align-items:baseline; padding:var(--space-2) 0; border:0;
  }
  .table--stack td + td { border-block-start:1px dashed var(--border); }
  .table--stack td::before {
    content:attr(data-label); color:var(--text-muted);
    font-size:.78rem; font-weight:650; letter-spacing:.04em; text-transform:uppercase;
  }
  .table--stack .num { text-align:left; }
  .table--stack .table__actions { justify-content:flex-start; }
}

/* ----------------------------------------------------------- pills/badges */

.pill {
  display:inline-flex; align-items:center; gap:var(--space-1);
  padding:2px var(--space-2); border-radius:var(--radius-full);
  font-size:.78rem; font-weight:650; letter-spacing:.01em; white-space:nowrap;
  background:var(--surface-3); color:var(--text-muted);
}
.pill--ok      { background:var(--ok-bg);     color:var(--ok); }
.pill--warn    { background:var(--warn-bg);   color:var(--warn); }
.pill--danger  { background:var(--danger-bg); color:var(--danger); }
.pill--info    { background:var(--info-bg);   color:var(--info); }
.pill--brand   { background:var(--brand-50);  color:var(--brand-700); }
.pill--neutral { background:var(--surface-3); color:var(--text-muted); }
/* counts read as one token -- no gap between "10" and "/10" */
.pill--count { gap:0; }

/* -------------------------------------------------------------- progress */

.progress {
  position:relative; height:8px; border-radius:var(--radius-full);
  background:var(--surface-3); overflow:hidden;
}
.progress__fill {
  height:100%; border-radius:inherit;
  background:linear-gradient(90deg, var(--brand-500), var(--brand-600));
  transition:width 320ms cubic-bezier(.2,.8,.3,1);
}
.progress--done .progress__fill { background:linear-gradient(90deg, var(--done-500), var(--done-600)); }
.progress--slim { height:4px; }

/* lesson dot strip on the report */
.dots { display:flex; flex-wrap:wrap; gap:3px; }
.dot { width:12px; height:12px; border-radius:3px; background:var(--surface-3); }
.dot--partial { background:var(--brand-200); }
.dot--full    { background:var(--done-500); }

/* ----------------------------------------------------------------- stats */

.stat {
  display:flex; flex-direction:column; gap:2px;
  padding:var(--space-4); background:var(--surface);
  border:1px solid var(--border); border-radius:var(--radius-md);
}
.stat__label { color:var(--text-muted); font-size:.8rem; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.stat__value { font-size:1.5rem; font-weight:680; line-height:1.15; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat__note  { color:var(--text-faint); font-size:.825rem; }

/* ------------------------------------------------------- flash + toasts  */

.flashes { display:grid; gap:var(--space-2); margin-block-end:var(--space-5); }
.flash {
  display:flex; align-items:flex-start; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border:1px solid var(--border); border-left-width:3px;
  border-radius:var(--radius-md); background:var(--surface); font-size:.94rem;
}
.flash--ok    { border-left-color:var(--ok);     background:var(--ok-bg);     color:var(--ok); }
.flash--error { border-left-color:var(--danger); background:var(--danger-bg); color:var(--danger); }
.flash--warn  { border-left-color:var(--warn);   background:var(--warn-bg);   color:var(--warn); }
.flash--info  { border-left-color:var(--info);   background:var(--info-bg);   color:var(--info); }

.toast-region {
  position:fixed; z-index:90; left:50%; transform:translateX(-50%);
  bottom:max(var(--space-4), env(safe-area-inset-bottom));
  display:grid; gap:var(--space-2); width:min(28rem, calc(100vw - 2rem)); pointer-events:none;
}
.toast {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--text); color:var(--bg);
  border-radius:var(--radius-md); box-shadow:var(--shadow-3);
  font-size:.9rem; pointer-events:auto;
  animation:toast-in 200ms cubic-bezier(.2,.8,.3,1);
}
.toast--error { background:var(--danger); color:#fff; }
.toast button { background:none; border:0; color:inherit; font:inherit; font-weight:650; text-decoration:underline; cursor:pointer; }
@keyframes toast-in { from { opacity:0; transform:translateY(8px); } }

/* ---------------------------------------------------------------- dialog */

dialog.modal {
  width:min(34rem, calc(100vw - 2rem)); padding:0;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-3);
}
dialog.modal::backdrop { background:rgb(8 12 18 / .55); backdrop-filter:blur(2px); }
dialog.modal .card__header, dialog.modal .card__body, dialog.modal .card__footer { border-radius:0; }
dialog.modal .card__footer { border-radius:0 0 var(--radius-lg) var(--radius-lg); display:flex; justify-content:flex-end; gap:var(--space-2); }

/* ------------------------------------------------------------ empty/zone */

.empty {
  display:grid; justify-items:center; gap:var(--space-2);
  padding:var(--space-7) var(--space-4); text-align:center;
  color:var(--text-muted);
}
.empty__icon  { color:var(--text-faint); }
.empty__title { margin:0; font-size:1.05rem; font-weight:650; color:var(--text); }
.empty__body  { margin:0 0 var(--space-3); max-width:34rem; }

.danger-zone { border-color:color-mix(in srgb, var(--danger) 35%, var(--border)); }
.danger-zone .card__header { color:var(--danger); }

/* ------------------------------------------------------------ pagination */

.pagination { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); margin-block-start:var(--space-5); justify-content:center; }
.pagination__page, .pagination__step {
  display:inline-flex; align-items:center; gap:var(--space-1);
  min-width:var(--tap); min-height:var(--tap); padding:0 var(--space-3);
  justify-content:center; border-radius:var(--radius-md);
  color:var(--text-muted); font-size:.9rem; font-weight:600; font-variant-numeric:tabular-nums;
}
.pagination__page:hover, .pagination__step:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.pagination__page.is-current { background:var(--brand-600); color:#fff; }
.pagination__step.is-disabled { opacity:.4; pointer-events:none; }
.pagination__gap { padding:0 var(--space-1); color:var(--text-faint); }

/* ------------------------------------------------------------------ misc */

.toolbar {
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2);
  margin-block-end:var(--space-4);
}
.toolbar .input, .toolbar .select { width:auto; min-width:12rem; flex:1 1 12rem; }

details.accordion { border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); }
details.accordion > summary {
  display:flex; align-items:center; gap:var(--space-2);
  padding:var(--space-3) var(--space-4); min-height:var(--tap);
  cursor:pointer; font-weight:600; list-style:none;
}
details.accordion > summary::-webkit-details-marker { display:none; }
details.accordion > summary::after { content:"›"; margin-inline-start:auto; color:var(--text-faint); transform:rotate(90deg); transition:transform var(--transition); }
details.accordion[open] > summary::after { transform:rotate(-90deg); }
details.accordion > .accordion__body { padding:0 var(--space-4) var(--space-4); border-block-start:1px solid var(--border); padding-block-start:var(--space-4); }

/* ----------------------------------------------------------------- print */

@media print {
  :root { --bg:#fff; --surface:#fff; --surface-2:#fff; --surface-3:#e5e5e5;
          --text:#000; --text-muted:#333; --border:#bbb; --shadow-1:none; --shadow-2:none; }
  .nav, .toolbar, .page-header__actions, .toast-region, .skip-link, .pagination, .table__actions { display:none !important; }
  .page { max-width:none; padding:0; }
  .card { break-inside:avoid; box-shadow:none; }
  .table tbody tr { break-inside:avoid; }
  a { color:inherit; text-decoration:none; }
}

/* ----------------------------------------------------------------- login */

.login { display:grid; gap:var(--space-5); padding-block:var(--space-6); }
.login__brand { display:grid; justify-items:center; gap:var(--space-3); text-align:center; }
.login__brand img { border-radius:var(--radius-md); }
.login__brand h1 { margin:0; font-size:1.35rem; }
.login .g-recaptcha { display:flex; justify-content:center; }

/* --------------------------------------------------------- program cards */

.program-card {
  display:flex; align-items:center; gap:var(--space-4);
  min-height:72px; padding:var(--space-4) var(--space-5);
  background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);
  transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.program-card:hover {
  text-decoration:none; border-color:var(--brand-600);
  box-shadow:var(--shadow-2); transform:translateY(-1px);
}
.program-card__body { display:grid; gap:2px; flex:1; min-width:0; }
.program-card__body strong { font-size:1.05rem; }
.program-card .icon { color:var(--text-faint); }

/* ------------------------------------------------------- points-claim page */

.claim-head {
  position:sticky; top:var(--nav-h); z-index:20;
  margin:calc(var(--space-6) * -1) calc(var(--space-4) * -1) var(--space-4);
  padding:var(--space-4) var(--space-4) var(--space-3);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--border);
}
.claim-head__row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-block-end:var(--space-3); }
.claim-head__name h1 { margin:0; font-size:1.3rem; }
.claim-head__name .small { display:block; line-height:1.2; }
#claim-count { font-variant-numeric:tabular-nums; flex:none; }

.card__body--verses { padding:var(--space-2); display:grid; gap:2px; }

.verse { position:relative; min-height:56px; padding-inline:var(--space-3); }
.verse .check__text { font-size:1.02rem; }
.verse__state { flex:none; width:20px; height:20px; }

.verse.is-saving  .verse__state {
  border:2px solid var(--border-strong); border-top-color:var(--brand-600);
  border-radius:50%; animation:spin .7s linear infinite;
}
.verse.is-saved .verse__state {
  background:var(--done-600);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.verse.is-failed { box-shadow:inset 3px 0 0 var(--danger); background:var(--danger-bg); }

.claim-done {
  display:grid; justify-items:center; gap:var(--space-1);
  margin-block-start:var(--space-5); padding:var(--space-6);
  text-align:center; background:var(--done-50);
  border:1px solid color-mix(in srgb, var(--done-600) 30%, var(--border));
  border-radius:var(--radius-lg); color:var(--done-600);
}
.claim-done strong { color:var(--text); font-size:1.05rem; }

@media (max-width:520px) {
  .claim-head__row { flex-direction:column; align-items:flex-start; gap:var(--space-2); }
}

/* A row just created or edited, so it's findable after the redirect. */
.table tbody tr.is-highlight,
.table tbody tr.is-highlight:hover { background:var(--brand-50); box-shadow:inset 3px 0 0 var(--brand-600); }

/* ---------------------------------------------------------- inline menus */

details.menu { position:relative; }
details.menu > summary { list-style:none; }
details.menu > summary::-webkit-details-marker { display:none; }
.menu__panel {
  position:absolute; right:0; top:calc(100% + 4px); z-index:40; min-width:12rem;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); box-shadow:var(--shadow-3); padding:var(--space-1);
}
.menu__panel a, .menu__panel button {
  display:flex; align-items:center; gap:var(--space-2); width:100%;
  min-height:38px; padding:var(--space-2) var(--space-3);
  border:0; border-radius:var(--radius-sm); background:none;
  color:var(--text); font:inherit; font-size:.9rem; text-align:left; cursor:pointer;
}
.menu__panel a:hover, .menu__panel button:hover { background:var(--surface-2); text-decoration:none; }
.menu__panel form { margin:0; }
.menu__panel .danger { color:var(--danger); }
@media (max-width:720px) { .menu__panel { right:auto; left:0; } }

/* ------------------------------------------------------- program builder */

.tier-ladder { display:grid; gap:var(--space-2); grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr)); margin-top:var(--space-3); }
.tier-ladder__item {
  display:flex; align-items:baseline; gap:var(--space-2); flex-wrap:wrap;
  padding:var(--space-3); background:var(--surface-2);
  border-radius:var(--radius-md); font-size:.9rem;
}
.tier-ladder__item strong { font-size:1.15rem; font-variant-numeric:tabular-nums; }

.lesson-list { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-2); }
.lesson-row {
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-3) var(--space-4); margin:0;
}
.lesson-row.is-dragging { opacity:.4; }
.lesson-row.is-over { box-shadow:inset 0 3px 0 var(--brand-600); }
.lesson-row__grip { color:var(--text-faint); cursor:grab; flex:none; touch-action:none; }
.lesson-row__num {
  flex:none; display:grid; place-items:center;
  width:28px; height:28px; border-radius:var(--radius-full);
  background:var(--surface-3); color:var(--text-muted);
  font-size:.8rem; font-weight:700; font-variant-numeric:tabular-nums;
}
.lesson-row__body { flex:1; min-width:0; display:grid; gap:1px; }
.lesson-row__name { font-weight:600; font-size:1rem; }
.lesson-row__actions { display:flex; align-items:center; gap:var(--space-2); flex:none; }
.lesson-row__actions form { margin:0; }

@media (max-width:720px) {
  .lesson-row { flex-wrap:wrap; }
  .lesson-row__body { flex:1 1 100%; order:3; }
  .lesson-row__actions { order:4; flex:1 1 100%; justify-content:flex-end; }
  .lesson-row__grip { display:none; }
}

/* ------------------------------------------------------------ verse grid */

.verse-table .tier-col { width:56px; text-align:center; }
.verse-table td.tier-col { text-align:center; }
.verse-table input[type="checkbox"] { width:22px; height:22px; accent-color:var(--brand-600); cursor:pointer; }
.verse-table .input { min-height:38px; padding:var(--space-1) var(--space-2); }
.verse-table tr.is-saving { background:var(--surface-2); }
.verse-table tr.is-saved  { background:var(--done-50); transition:background 600ms ease; }
.verse-table tr.is-failed { background:var(--danger-bg); }

.preview-row--duplicate { color:var(--text-muted); }
.preview-row--error td { color:var(--danger); }

.badge-earners { display:grid; gap:2px; grid-template-columns:repeat(auto-fill, minmax(18rem, 1fr)); }
.badge-earners .check__text { display:flex; align-items:baseline; gap:var(--space-2); }

/* The signed-in Cortex user's name, in the account menu. */
.nav__account-name { font-size:.875rem; font-weight:600; max-width:9rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:820px) { .nav__account-name { display:none; } }

/* Staff entrance on the public pages -- present but not competing with the
   task a hearer actually came to do. */
.staff-link {
  margin-block-start:var(--space-7);
  padding-block-start:var(--space-4);
  border-block-start:1px solid var(--border);
  text-align:center;
}
.staff-link a {
  display:inline-flex; align-items:center; gap:var(--space-2);
  min-height:var(--tap); padding:0 var(--space-3);
  color:var(--text-faint); font-size:.85rem;
  transition:color var(--transition);
}
.staff-link a:hover { color:var(--text-muted); text-decoration:none; }