/* =====================================================================
   Code Blue Training — Clinical Precision design system
   ---------------------------------------------------------------------
   Cobalt accent, cool blue-biased neutrals, medical-instrument details.
   Course-agnostic platform (owned by Code Blue Training). Loaded only by
   pages migrated to the new look, so legacy base.css pages are untouched.
   ===================================================================== */

/* ---- Tokens: light (default) --------------------------------------- */
:root {
  color-scheme: light;

  /* Cobalt — the single bold accent */
  --cobalt-50:  #eef4ff;
  --cobalt-100: #dbe7ff;
  --cobalt-200: #bad0ff;
  --cobalt-300: #8db2ff;
  --cobalt-400: #4c86ff;
  --cobalt-500: #0b5fff;
  --cobalt-600: #0a4bd6;
  --cobalt-700: #0b3da8;

  --ink: #0a0e1a;

  /* Cool, blue-biased neutrals — chosen, not default grey */
  --n0:  #ffffff;
  --n25: #fbfcfe;
  --n50: #f6f8fc;
  --n100:#edf1f8;
  --n150:#e4eaf3;
  --n200:#d6deeb;
  --n300:#bac5d8;
  --n400:#96a2b8;
  --n500:#697488;
  --n600:#4a5568;
  --n700:#333c4e;
  --n800:#1c2230;

  /* Medical semantics — separate from the accent hue */
  --ok:#12805c;     --ok-bg:#e6f4ee;   --ok-border:#b9e0ce;
  --warn:#b5540a;   --warn-bg:#fbefe2; --warn-border:#f0d4b0;
  --crit:#d3352b;   --crit-bg:#fbebea; --crit-border:#f2c9c6;

  /* Semantic role tokens */
  --bg: var(--n50);
  --surface: var(--n0);
  --surface-2: var(--n25);
  --surface-sunken: var(--n100);
  --line: var(--n150);
  --line-strong: var(--n200);
  --text: var(--ink);
  --text-2: var(--n600);
  --text-muted: var(--n500);
  --accent: var(--cobalt-500);
  --accent-hover: var(--cobalt-600);
  --accent-ink: #ffffff;
  --accent-weak: var(--cobalt-50);
  --ring: rgba(11, 95, 255, 0.28);

  /* Rotating container-border palette (cards, stats, course cards pick a
     hue by position; --edge defaults to the accent). */
  --edge: var(--accent);
  --edge-teal: #0ca678;
  --edge-violet: #7048e8;
  --edge-rose: #d6336c;

  --shadow-sm: 0 1px 2px rgba(10,14,26,.05), 0 1px 1px rgba(10,14,26,.04);
  --shadow-md: 0 6px 16px -8px rgba(10,14,26,.18), 0 2px 6px -4px rgba(10,14,26,.10);
  --shadow-lg: 0 24px 60px -28px rgba(10,14,26,.30);
  --shadow-xl: 0 40px 80px -32px rgba(10,20,45,.30);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --font-ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
             Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Cascadia Code',
               'Roboto Mono', Menlo, Consolas, monospace;
}

/* ---- Tokens: dark -------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:#0a0e17;
    --surface:#111725;
    --surface-2:#0e131f;
    --surface-sunken:#0b0f1a;
    --line:#1e2637;
    --line-strong:#2a3446;
    --text:#e7ecf5;
    --text-2:#aeb8cb;
    --text-muted:#7e8aa0;
    --accent:#3d7bff;
    --accent-hover:#5a90ff;
    --accent-ink:#ffffff;
    --accent-weak:#16203a;
    --ring: rgba(61,123,255,.40);
    --edge-teal:#2ec593;
    --edge-violet:#9775fa;
    --edge-rose:#f06595;
    --ok:#3bc492;     --ok-bg:#0f2a22;   --ok-border:#1f4a3b;
    --warn:#e39a4b;   --warn-bg:#2c2013; --warn-border:#4a381f;
    --crit:#f1766d;   --crit-bg:#2c1615; --crit-border:#4a2523;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
    --shadow-md: 0 8px 24px -10px rgba(0,0,0,.60);
    --shadow-lg: 0 30px 70px -30px rgba(0,0,0,.70);
    --shadow-xl: 0 44px 90px -34px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0a0e17;
  --surface:#111725;
  --surface-2:#0e131f;
  --surface-sunken:#0b0f1a;
  --line:#1e2637;
  --line-strong:#2a3446;
  --text:#e7ecf5;
  --text-2:#aeb8cb;
  --text-muted:#7e8aa0;
  --accent:#3d7bff;
  --accent-hover:#5a90ff;
  --accent-ink:#ffffff;
  --accent-weak:#16203a;
  --ring: rgba(61,123,255,.40);
  --edge-teal:#2ec593;
  --edge-violet:#9775fa;
  --edge-rose:#f06595;
  --ok:#3bc492;     --ok-bg:#0f2a22;   --ok-border:#1f4a3b;
  --warn:#e39a4b;   --warn-bg:#2c2013; --warn-border:#4a381f;
  --crit:#f1766d;   --crit-bg:#2c1615; --crit-border:#4a2523;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --shadow-md: 0 8px 24px -10px rgba(0,0,0,.60);
  --shadow-lg: 0 30px 70px -30px rgba(0,0,0,.70);
  --shadow-xl: 0 44px 90px -34px rgba(0,0,0,.75);
}

/* ---- Reset & base -------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.15; letter-spacing: -0.014em; }
h1, h2 { text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* =====================================================================
   Auth layout — light split, connected by a single continuous line
   ===================================================================== */
.auth {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 85% 15%, var(--accent-weak) 0%, transparent 45%),
    var(--bg);
}

/* The through-line: one continuous stroke that spans the whole viewport,
   physically connecting the sign-in form to the certificate. It draws on
   load (see @keyframes draw) — the signature moment. */
.auth__line {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.auth__line svg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 360px;
  transform: translateY(-50%);
}
/* Dash values are in the path's user units (total length ~1524), so the
   draw and pulse behave identically at every viewport width. */
.auth__line .flow {
  fill: none;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-dasharray: 1560;
  stroke-dashoffset: 1560;
  filter: drop-shadow(0 2px 10px rgba(11,95,255,.30));
  animation: draw 1.8s cubic-bezier(.16,.8,.3,1) 0.3s forwards;
}
/* A bright signal pulse that travels the full line once it has drawn. */
.auth__line .flow-pulse {
  fill: none;
  stroke: #4c86ff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 90 1500;
  stroke-dashoffset: 1560;
  opacity: 0;
  filter: drop-shadow(0 0 5px rgba(76,134,255,.95))
          drop-shadow(0 0 2px #ffffff);
  animation: travel 3s linear 2.1s infinite, pulsein .5s ease 2.1s forwards;
}

.auth__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 4vw, 3rem);
}

.auth__main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: center;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 1rem clamp(1.4rem, 4vw, 3rem) 2rem;
}

.auth__form {
  width: 100%;
  max-width: 25rem;
  justify-self: center;
}

.auth__aside {
  justify-self: center;
  width: 100%;
  max-width: 27rem;
}

.auth__foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1.4rem, 4vw, 3rem);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.auth__foot-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.auth__foot-links a { color: var(--text-2); }

/* =====================================================================
   Brand mark & wordmark
   ===================================================================== */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.brand-lockup:hover { text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--cobalt-500);
  box-shadow: 0 6px 16px -6px rgba(11,95,255,.7);
  flex: none;
}
.brand-mark svg { width: 22px; height: 22px; display: block; }
.brand-word { display: flex; flex-direction: column; line-height: 1.05; }
.brand-word b {
  font-weight: 660;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.brand-word span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 2px;
}

/* =====================================================================
   Forms
   ===================================================================== */
.form-head { margin-bottom: 1.6rem; }
.form-head h2 { margin-top: 0.55rem; font-size: 1.6rem; }
.form-head p { margin-top: 0.55rem; color: var(--text-2); }

form { margin: 0; }

.field { margin-bottom: 1.05rem; }
.field > label,
.label-row > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.label-row a { font-size: 0.82rem; font-weight: 500; }

.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.64rem 0.78rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder { color: var(--text-muted); }
.field input:not([type="checkbox"]):focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}
.field.has-error input:not([type="checkbox"]) { border-color: var(--crit); }

.input-affix { position: relative; display: flex; }
.input-affix input { padding-right: 4.2rem !important; }
.input-affix .affix-btn {
  position: absolute;
  right: 0.35rem;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.input-affix .affix-btn:hover { color: var(--accent); background: var(--surface-sunken); }

.field-hint { margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-muted); }
.field-error { margin-top: 0.4rem; font-size: 0.82rem; color: var(--crit); }
.field-error ul, .field-error p { margin: 0; padding-left: 1rem; }

/* Multi-checkbox groups (Django CheckboxSelectMultiple): one option
   per row, plain-weight option labels under the bold field label. */
.field--choices > div { display: grid; gap: 0.35rem; }
.field--choices > div label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--text-2);
}

.checkbox { display: flex; align-items: flex-start; gap: 0.6rem; }
.checkbox input[type="checkbox"] {
  width: 1.1rem; height: 1.1rem; margin-top: 0.15rem;
  accent-color: var(--accent); flex: none;
}
.checkbox label { font-size: 0.9rem; color: var(--text-2); font-weight: 500; }
.checkbox label a { font-weight: 600; }

/* Two-up field row (e.g. first / last name), stacks on narrow screens */
.field-row { display: flex; gap: 0.9rem; }
.field-row > .field { flex: 1; min-width: 0; }

/* Live inline validity check (HTMX-swapped partials/check_result.html) */
.check { display: inline-block; font-size: 0.82rem; margin-top: 0.4rem; }
.check-ok    { color: var(--ok); }
.check-error { color: var(--crit); }
.check-warn  { color: var(--warn); }
.check-hint  { display: block; color: var(--text-muted); font-size: 0.8rem; margin-top: 0.2rem; }
.check-suggest {
  margin-left: 0.4rem; font-size: 0.82rem; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline;
}

/* Inline text button (show/hide password, "use suggestion") */
.link-button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent); font: inherit; font-size: 0.82rem;
  font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase;
}
.link-button:hover { color: var(--accent-hover); }

/* Password strength meter (HTMX-swapped partials/password_meter.html) */
.meter {
  height: 6px; border-radius: 999px; background: var(--surface-sunken);
  overflow: hidden; margin-top: 0.55rem;
}
.meter span { display: block; height: 100%; transition: width .25s ease, background-color .25s ease; }
.meter-red span    { width: 33%;  background: var(--crit); }
.meter-yellow span { width: 66%;  background: var(--warn); }
.meter-green span  { width: 100%; background: var(--ok); }
.meter-label { display: inline-block; margin-top: 0.35rem; font-size: 0.8rem; color: var(--text-muted); }

/* Honeypot: parked off-screen, never display:none so bots still fill it */
.hp-wrapper, .hp-field {
  position: absolute; left: -9999px; top: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* Visually hidden but available to screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Invite rows (registration step 4) */
.invite-head {
  display: grid;
  grid-template-columns: 1fr 11rem 2.5rem;
  gap: 0.6rem;
  margin-bottom: 0.45rem;
}
.invite-head span { font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.invite-rows { display: flex; flex-direction: column; gap: 0.7rem; }
.invite-row {
  display: grid;
  grid-template-columns: 1fr 11rem 2.5rem;
  gap: 0.6rem;
  align-items: start;
}
.invite-row .field { margin-bottom: 0; }
.invite-add { margin-top: 0.9rem; }
.btn--sm { padding: 0.5rem 0.85rem; font-size: 0.85rem; }

@media (max-width: 560px) {
  .invite-head, .invite-row { grid-template-columns: 1fr 8rem 2.5rem; }
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.74rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease,
              transform .06s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 8px 20px -8px rgba(11,95,255,.6);
}
.btn--primary:hover { background: var(--accent-hover); box-shadow: 0 10px 24px -8px rgba(11,95,255,.7); }

.btn--ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--surface-sunken); border-color: var(--n300); }

/* Destructive confirm action. A committed danger red in both themes (white
   text on it clears AA), rather than the theme-swapped --crit token whose
   dark value is too light to carry white text. */
.btn--danger {
  background: #d3352b;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(211, 53, 43, .55);
}
.btn--danger:hover { background: #bd2c23; box-shadow: 0 10px 24px -8px rgba(211, 53, 43, .7); }

.stack { display: flex; flex-direction: column; gap: 0.7rem; }

.divider {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.35rem 0;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-family: var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.auth__aside-note {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-2);
}

/* =====================================================================
   Alerts / flash messages
   ===================================================================== */
.alert {
  display: flex; gap: 0.6rem; align-items: center;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface-sunken);
  font-size: 0.88rem; color: var(--text);
  margin-bottom: 1rem;
}
.alert svg { flex: none; width: 19px; height: 19px; }
.alert ul { margin: 0; padding: 0; list-style: none; }
.alert li { list-style: none; }
.alert--error {
  background: var(--crit-bg); border-color: var(--crit); color: var(--crit);
  box-shadow: 0 0 0 3px rgba(217,53,43,.12), 0 10px 28px -8px rgba(217,53,43,.35);
}
.alert--success { background: var(--ok-bg);   border-color: var(--ok-border);   color: var(--ok); }
.alert--warning { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.alert--info    { background: var(--accent-weak); border-color: var(--cobalt-200); color: var(--accent-hover); }
.messages { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.25rem; }

/* Address confirmation modal (Google Address Validation review step) */
.addr-modal {
  border: 0;
  padding: 0;
  max-width: 27rem;
  width: calc(100% - 2rem);
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.addr-modal::backdrop {
  background: rgba(10, 14, 26, 0.5);
  backdrop-filter: blur(2px);
}
.addr-modal__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1.6rem;
  overflow: hidden;
}
.addr-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
}
.addr-modal__panel--corrected::before { background: var(--accent); }
.addr-modal__panel--unconfirmed::before { background: var(--warn); }
.addr-modal__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.addr-modal__close:hover { background: var(--surface-sunken); color: var(--text); }
.addr-modal__close svg { width: 18px; height: 18px; }
.addr-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.addr-modal__panel--corrected .addr-modal__eyebrow { color: var(--accent-hover); }
.addr-modal__panel--unconfirmed .addr-modal__eyebrow { color: var(--warn); }
.addr-modal__title { margin-top: 0.45rem; font-size: 1.2rem; padding-right: 1.5rem; }
.addr-modal__lead { margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-2); }
.addr-modal__addr {
  margin-top: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.9rem; line-height: 1.5;
  color: var(--text);
  padding: 0.75rem 0.85rem;
  background: var(--accent-weak);
  border: 1px solid var(--cobalt-200);
  border-radius: var(--radius-sm);
}
.addr-modal__actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.35rem; }
.addr-modal[open] { animation: modalpop 0.18s cubic-bezier(.2,.7,.3,1); }
@keyframes modalpop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Generic confirmation modal — the in-app replacement for window.confirm(),
   driven by any form[data-confirm] (see app.js). */
.confirm-modal {
  border: 0;
  padding: 0;
  max-width: 26rem;
  width: calc(100% - 2rem);
  background: transparent;
  color: var(--text);
  overflow: visible;
}
.confirm-modal::backdrop {
  background: rgba(10, 14, 26, 0.5);
  backdrop-filter: blur(2px);
}
.confirm-modal__panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1.6rem;
}
.confirm-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-muted);
}
.confirm-modal__msg {
  margin-top: 0.55rem;
  font-size: 0.98rem; line-height: 1.5;
  color: var(--text);
}
.confirm-modal__actions {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.6rem;
  margin-top: 1.5rem;
}
.confirm-modal[open] { animation: modalpop 0.18s cubic-bezier(.2,.7,.3,1); }

/* Google Places Autocomplete dropdown, restyled to the design system */
.pac-container {
  margin-top: 4px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-family: var(--font-ui);
}
.pac-container::after { display: none; }  /* hide the "powered by Google" spacer row image */
.pac-item {
  padding: 0.45rem 0.7rem;
  border-top: 1px solid var(--line);
  color: var(--text-2);
  font-size: 0.85rem;
  cursor: pointer;
}
.pac-item:first-child { border-top: 0; }
.pac-item:hover, .pac-item-selected { background: var(--surface-sunken); }
.pac-item-query { color: var(--text); font-size: 0.9rem; }
.pac-matched { color: var(--accent); }

/* =====================================================================
   Certificate — the product artifact shown as proof
   ===================================================================== */
.cert-stack { position: relative; }
/* A faint second card behind, hinting "many credentials" */
.cert-stack::before {
  content: "";
  position: absolute;
  inset: 18px -14px -18px 14px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  opacity: 0.55;
  z-index: 0;
}

.cert-card {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: 1.4rem 1.5rem 1.3rem;
  overflow: hidden;
  animation: floaty 7s ease-in-out 1.8s infinite;
}
/* Cobalt cap where the through-line docks into the certificate */
.cert-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(var(--accent), var(--cobalt-400));
}
.cert-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.15rem;
}
.cert-brand { display: inline-flex; align-items: center; gap: 0.45rem; }
.cert-brand .brand-mark { width: 26px; height: 26px; border-radius: 7px; }
.cert-brand .brand-mark svg { width: 17px; height: 17px; }
.cert-brand b { font-size: 0.82rem; font-weight: 640; letter-spacing: -0.01em; }

.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.26rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--text-2);
}
.pill--ok { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-border); }
.pill__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: dotpulse 2.4s ease-out infinite;
}

.cert-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cert-card__title {
  margin-top: 0.35rem;
  font-size: 1.32rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.cert-card__holder { margin-top: 0.5rem; font-size: 0.92rem; color: var(--text-2); }
.cert-card__holder b { color: var(--text); font-weight: 620; }

.cert-card__meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin: 1.2rem 0 0;
  padding-top: 1.15rem;
  border-top: 1px solid var(--line);
}
.cert-card__meta div { display: flex; flex-direction: column; gap: 0.25rem; }
.cert-card__meta dt {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cert-card__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.cert-card__foot {
  display: flex; align-items: center; gap: 0.45rem;
  margin-top: 1.15rem;
  font-size: 0.78rem;
  color: var(--ok);
}
.cert-card__foot svg { width: 15px; height: 15px; }

.cert-caption {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 24rem;
  margin-left: auto;
  margin-right: auto;
}

/* =====================================================================
   Step tracker — the aside for multi-step wizards
   ===================================================================== */
.steps { display: flex; flex-direction: column; }
.step {
  position: relative;
  display: flex;
  gap: 0.9rem;
  padding-bottom: 1.7rem;
}
.step:last-child { padding-bottom: 0; }
/* connector between markers */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 34px;
  bottom: 2px;
  width: 2px;
  background: var(--line-strong);
}
.step--done:not(:last-child)::before { background: var(--accent); }
.step__marker {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  z-index: 1;
}
.step__marker svg { width: 16px; height: 16px; }
.step--active .step__marker {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-weak);
}
.step--done .step__marker {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
}
.step__body { padding-top: 0.35rem; }
.step__body b { display: block; font-size: 0.95rem; font-weight: 620; color: var(--text); }
.step--todo .step__body b { color: var(--text-2); }
.step__body span { font-size: 0.85rem; color: var(--text-muted); }

/* =====================================================================
   Theme toggle
   ===================================================================== */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-2);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font: inherit; font-size: 0.78rem;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--text); border-color: var(--n300); }
.theme-toggle svg { width: 15px; height: 15px; }
.theme-toggle .theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .theme-toggle__moon { display: inline; }
}
:root[data-theme="dark"] .theme-toggle .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle .theme-toggle__moon { display: inline; }
:root[data-theme="light"] .theme-toggle .theme-toggle__sun { display: inline; }
:root[data-theme="light"] .theme-toggle .theme-toggle__moon { display: none; }

/* =====================================================================
   Motion — page-load sequence & ambient
   ===================================================================== */
.reveal {
  opacity: 0;
  animation: rise .6s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms + 200ms);
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes travel { from { stroke-dashoffset: 1560; } to { stroke-dashoffset: -90; } }
@keyframes pulsein { to { opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes dotpulse {
  0%   { box-shadow: 0 0 0 0 rgba(18,128,92,.5); }
  70%  { box-shadow: 0 0 0 6px rgba(18,128,92,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,128,92,0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; }
  .auth__line .flow { stroke-dashoffset: 0; }
  .auth__line .flow-pulse { opacity: 0 !important; }
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 900px) {
  .auth__main {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding-top: 0.5rem;
    padding-bottom: 3rem;
    align-items: start;
  }
  .auth__form { justify-self: stretch; max-width: 26rem; margin: 0 auto; order: 1; }
  .auth__aside { order: 2; max-width: 26rem; }
  /* Stacked layout: the horizontal line can no longer connect the two
     sections, so it would just cut across the form — hide it. */
  .auth__line { display: none; }
  .cert-card { animation: none; }
}

@media (max-width: 560px) {
  .auth__aside { display: none; }
  .auth__foot { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .cert-card__meta { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Authenticated app shell + dashboards
   ---------------------------------------------------------------------
   The signed-in surface. Reuses the token system and the generic
   components above; the sign-in layout (.auth__*, .cert-*, .flow) is not
   used here. A cobalt hairline that draws under the header on load echoes
   the sign-in through-line, carrying the brand signature across the door.
   ===================================================================== */
.app {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Keyboard skip link: off-screen until focused, then pinned top-left */
.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3.5rem;
  z-index: 60;
  padding: 0.55rem 0.9rem;
  background: var(--surface);
  color: var(--accent);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 0.85rem;
  font-weight: 600;
  transition: top 0.16s ease;
}
.skip-link:focus { top: 0.75rem; text-decoration: none; }

/* ---- Top app bar --------------------------------------------------- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface);
  box-shadow: 0 1px 0 var(--line);
}
.appbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.3rem);
  width: 100%;
  margin: 0 auto;
  padding: 0.6rem clamp(1rem, 3vw, 2rem);
}
.appbar .brand-lockup { flex: none; }
/* the cobalt through-line echo, docked to the header's bottom edge */
.appbar__rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--accent-weak) 0%, var(--accent) 26%,
    var(--cobalt-400) 62%, var(--accent) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  box-shadow: 0 1px 8px -2px rgba(11,95,255,.5);
  animation: raildraw 1.2s cubic-bezier(.16,.8,.3,1) 0.15s forwards;
}
@keyframes raildraw { to { transform: scaleX(1); } }

/* primary nav */
.appnav { display: flex; align-items: center; gap: 0.15rem; }
.appnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.72rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--text-2);
}
.appnav__link:hover {
  color: var(--text);
  background: var(--surface-sunken);
  text-decoration: none;
}
.appnav__link--active { color: var(--accent); }
.appnav__link--active::after {
  content: "";
  position: absolute;
  left: 0.72rem;
  right: 0.72rem;
  bottom: -0.62rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  z-index: 1;
}

/* right-hand cluster */
.appbar__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.appbar .theme-toggle { padding: 0.34rem 0.4rem; }
.appbar .theme-toggle > span:last-child { display: none; }

/* live session countdown pill (text + .warn class set by app.js) */
.session-countdown {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.34rem 0.62rem;
  white-space: nowrap;
}
.session-countdown.warn {
  color: var(--warn);
  background: var(--warn-bg);
  border-color: var(--warn-border);
}

/* ---- Disclosure menus (org switcher + user menu) ------------------- */
.menu { position: relative; }
.menu > summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.3rem 0.5rem;
  color: var(--text);
  font-size: 0.85rem;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--n300); background: var(--surface-sunken); }
.menu[open] > summary { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.menu__caret { width: 14px; height: 14px; color: var(--text-muted); transition: transform .15s ease; flex: none; }
.menu[open] .menu__caret { transform: rotate(180deg); }
.org-switch__icon { width: 18px; height: 18px; color: var(--text-muted); flex: none; }
.org-switch__name {
  font-weight: 600;
  max-width: 11rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.avatar {
  position: relative;
  overflow: hidden;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: linear-gradient(150deg, var(--cobalt-400), var(--accent));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
/* Uploaded photo overlays the initials; it's removed on load error so the
   initials (not a blank blue circle) show when the image can't load. */
.avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Hide the initials while a photo is present so only the photo shows; when the
   photo fails to load app.js removes the img and the initials return. */
.avatar:has(.avatar__img) { color: transparent; }

.menu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  min-width: 15.5rem;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  animation: menupop .14s ease;
}
@keyframes menupop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.menu__label {
  padding: 0.5rem 0.6rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.menu__id { padding: 0.35rem 0.6rem 0.55rem; }
.menu__id b { display: block; font-size: 0.9rem; font-weight: 640; }
.menu__id span { font-size: 0.8rem; color: var(--text-muted); word-break: break-all; }
.menu__form { display: block; margin: 0; }
.menu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding: 0.52rem 0.6rem;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.88rem;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
}
.menu__item:hover { background: var(--surface-sunken); color: var(--text); text-decoration: none; }
.menu__item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu__item .role-badge { margin-left: auto; flex: none; }
.menu__item--danger:hover { color: var(--crit); background: var(--crit-bg); }
.menu__sep { height: 1px; background: var(--line); margin: 0.35rem 0.3rem; }

/* ---- Full-width notification banners (verify email, session warn) --- */
.appbanner { background: var(--surface-2); box-shadow: 0 1px 0 var(--line); }
.appbanner__inner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 0.7rem clamp(1rem, 3vw, 2rem);
  font-size: 0.88rem;
  color: var(--text-2);
}
.appbanner__inner > svg { width: 18px; height: 18px; flex: none; }
.appbanner__inner form { display: inline; margin: 0; }
.appbanner--warn { background: var(--warn-bg); box-shadow: 0 1px 0 var(--warn-border); color: var(--warn); }
.appbanner--warn a, .appbanner--warn .link-button { color: var(--warn); }
.appbanner__grow { margin-left: auto; }

/* ---- Main + footer ------------------------------------------------- */
.app-main {
  flex: 1;
  width: 100%;
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.4rem) clamp(1rem, 3vw, 2rem) 3.5rem;
}
/* One vertical rhythm for every stacked content block — cards, grids,
   headers, notes — at both the page and narrow-column level. This replaces
   the fragile per-block margins (which only spaced adjacent cards and left
   gaps wherever a grid or note sat between them). The page header keeps its
   larger margin-bottom, which collapses with this to give it extra room. */
.app-main > * + *,
.content-narrow > * + * {
  margin-top: 1.4rem;
}

.app-foot { box-shadow: 0 -1px 0 var(--line); background: var(--surface); }
.app-foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 auto;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.app-foot__links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.app-foot__links a { color: var(--text-2); }

/* ---- Page header --------------------------------------------------- */
.page-head { margin-bottom: 1.7rem; }
.page-head__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-head h1 { font-size: clamp(1.5rem, 3vw, 1.85rem); margin-top: 0.5rem; }
.page-head .lead { margin-top: 0.55rem; color: var(--text-2); font-size: 0.98rem; }
.page-head__meta { margin-top: 0.75rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.page-head__meta p { margin: 0; }
.page-head__actions { display: flex; gap: 0.6rem; flex: none; }

/* ---- Stat grid ----------------------------------------------------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}
/* Every stat tile gets a COMPLETE border in its color — accent cobalt by
   default, semantic color when statused — so tiles read uniformly instead
   of mixing a left accent bar with full status borders. */
.stat {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.25rem;
}
.stat--ok { border-color: var(--ok); }
.stat--warn { border-color: var(--warn); }
.stat--crit { border-color: var(--crit); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.stat__value {
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.stat__hint { margin-top: 0.45rem; font-size: 0.8rem; color: var(--text-muted); }

/* ---- Generic card -------------------------------------------------- */
/* A COMPLETE colored border on all four sides. The hue comes from --edge:
   cobalt by default, rotated through the edge palette by position (see the
   rotation rules below the row components), and inherited by the rows,
   tables, and empty states inside the card so each card's contents
   harmonize with its border. Status variants recolor the whole border. */
.card {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.3rem 1.4rem;
}
.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.05rem;
}
.card__title { font-size: 1.05rem; font-weight: 640; }
.card__action {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: none;
}
.card__foot {
  margin-top: 1.15rem;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--text-muted);
}
.card__foot a { font-weight: 500; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1.15rem;
}
/* Asymmetric admin layout: a compact form beside a wider table/list */
.admin-split {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
}
@media (max-width: 800px) { .admin-split { grid-template-columns: 1fr; } }

/* ---- Clinical data table ------------------------------------------- */
/* Tables get the same complete colored border as cards — all four sides,
   in the surrounding card's hue (accent when standalone). */
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.card .table-wrap { box-shadow: none; }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table thead th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  padding: 0.72rem 0.95rem;
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.data-table tbody td {
  padding: 0.72rem 0.95rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--surface-sunken); }
.data-table th.num, .data-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.data-table .name-cell, .data-table .name-cell a { font-weight: 600; color: var(--text); }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  margin-top: 1.2rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}
.pagination a { font-weight: 550; }
.pagination span { font-family: var(--font-mono); font-size: 0.8rem; }

/* ---- Labelled rows (role counts, locked accounts, org lists) ------- */
.membership-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.membership-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  /* Edge-tinted complete border so each row reads as its own item in
     both themes, in its card's hue (status classes recolor it outright). */
  border: 1px solid color-mix(in srgb, var(--edge) 35%, var(--line-strong));
  border-radius: var(--radius);
  background: var(--surface-2);
}
.membership-list > li > span:first-child {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-weight: 550;
}
.membership-list .count {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
}
.inline-form { display: inline; margin: 0; }

/* small muted status tag */
.tag-muted {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.22rem 0.5rem;
  white-space: nowrap;
}
.tag-muted--warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.tag-muted--crit { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-border); }

/* role badge (header + role-badge partial + org lists) */
.role-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.63rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-hover);
  background: var(--accent-weak);
  border-radius: 999px;
  padding: 0.24rem 0.55rem;
  white-space: nowrap;
}

/* status pill variants (base .pill/.pill--ok/.pill__dot defined above) */
.pill--warn   { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); }
.pill--crit   { color: var(--crit); background: var(--crit-bg); border-color: var(--crit-border); }
.pill--muted  { color: var(--text-muted); background: var(--surface-sunken); border-color: var(--line); }
.pill--accent {
  color: var(--accent-hover);
  background: var(--accent-weak);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ---- Empty / "coming soon" states ---------------------------------- */
.empty {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1.1rem 1.15rem;
  border: 1px dashed color-mix(in srgb, var(--edge) 45%, var(--line-strong));
  border-radius: var(--radius);
  background: var(--surface-2);
}
.empty__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-weak);
  color: var(--accent);
}
.empty__icon svg { width: 20px; height: 20px; }
.empty__body b { display: block; font-size: 0.94rem; font-weight: 600; color: var(--text); margin-bottom: 0.15rem; }
.empty__body p { font-size: 0.87rem; color: var(--text-muted); }

.help { font-size: 0.86rem; color: var(--text-muted); }
.help a { font-weight: 500; }

/* ---- Content width helper for single-column settings / forms ------- */
.content-narrow { max-width: 44rem; margin-inline: auto; }

/* ---- Detail rows (devices, sessions, members: title + metadata) ---- */
.detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.detail-list > li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.85rem 0.95rem;
  /* Same edge-tinted complete border as .membership-list rows. */
  border: 1px solid color-mix(in srgb, var(--edge) 35%, var(--line-strong));
  border-radius: var(--radius);
  background: var(--surface-2);
}
.detail-list__body { min-width: 0; }
.detail-list__title { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-weight: 600; }
.detail-list__meta {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-family: var(--font-mono);
  line-height: 1.55;
  overflow-wrap: break-word;
}
.detail-list__empty { color: var(--text-muted); font-size: 0.9rem; padding: 0.6rem 0.1rem; }
/* Status-coded rows (certifications): a full border in the status color plus
   a faint tint around the whole row. */
.detail-list > li.is-ok {
  background: var(--ok-bg);
  border-color: var(--ok);
}
.detail-list > li.is-warn {
  background: var(--warn-bg);
  border-color: var(--warn);
}
.detail-list > li.is-crit {
  background: var(--crit-bg);
  border-color: var(--crit);
}
/* Accent-coded rows: pickable/featured items (e.g. class templates). */
.detail-list > li.is-accent {
  background: var(--accent-weak);
  border-color: var(--accent);
}

/* Status-coded section cards (certification groups): border in the status
   color so each section reads as Valid / Expiring Soon / Expired at a glance.
   `.card.card--x` outranks the base `.card` border. */
.card.card--ok { border-color: var(--ok); }
.card.card--warn { border-color: var(--warn); }
.card.card--crit { border-color: var(--crit); }

/* Per-organization verification badges under a certification row. */
.cert-verify {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.cert-verify__note {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
}
/* Compact inline rejection-reason input in the approvals queue. */
.reject-note {
  width: 12rem;
  max-width: 42vw;
  padding: 0.4rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.reject-note::placeholder { color: var(--text-muted); }
.reject-note:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
}

/* ---- Inline code + QR (2FA enrollment) ----------------------------- */
code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  padding: 0.08rem 0.36rem;
  border-radius: 5px;
}
.qr-code {
  display: inline-block;
  padding: 0.9rem;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.qr-code svg, .qr-code img { display: block; width: 190px; height: 190px; }

/* ---- Public document shell (legal / long-form, no app chrome) ------ */
.doc { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.doc__top { box-shadow: 0 1px 0 var(--line); background: var(--surface); }
.doc__top-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0.8rem clamp(1rem, 3vw, 2rem);
}
.doc__main {
  flex: 1;
  width: 100%;
  padding: clamp(1.7rem, 3vw, 2.8rem) clamp(1rem, 3vw, 2rem) 3.5rem;
}

/* ---- Prose (legal / long-form content) ----------------------------- */
.prose { max-width: 46rem; margin-inline: auto; color: var(--text-2); }
.prose > h1 { font-size: clamp(1.5rem, 3vw, 1.85rem); }
.prose h2 { font-size: 1.15rem; margin-top: 2rem; color: var(--text); }
.prose h3 { font-size: 1rem; margin-top: 1.4rem; color: var(--text); }
.prose p { margin-top: 0.9rem; line-height: 1.7; }
.prose ul, .prose ol { margin: 0.9rem 0; padding-left: 1.35rem; }
.prose li { margin-top: 0.4rem; line-height: 1.7; }
.prose a { font-weight: 500; }

/* ---- App shell responsive ------------------------------------------ */
@media (max-width: 720px) {
  .session-countdown { display: none; }
  .org-switch__name { max-width: 7rem; }
}
@media (max-width: 640px) {
  .appnav { display: none; }
  .page-head__row { flex-direction: column; }
  .page-head__actions { width: 100%; }
}
@media (max-width: 480px) {
  .brand-word span { display: none; }
  .org-switch__name { display: none; }
}

/* Profile: grouped checkbox/input fields, specialty groups, chips */
.field--group {
  border: 0;
  padding: 0;
  margin: 0 0 1rem;
  min-inline-size: auto;
}
.field--group > legend {
  display: block;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.specialty-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.7rem 0.9rem 0.9rem;
  margin: 0 0 0.7rem;
}
.specialty-group legend {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 0 0.4rem;
}
.specialty-group__items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.35rem 0.9rem;
}
.chip-list {
  list-style: none;
  margin: 0.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.25rem 0.4rem 0.25rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text);
}
.chip__remove {
  border: 0;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  padding: 0 0.35rem;
  border-radius: 999px;
}
.chip__remove:hover { color: var(--crit); }

/* Form-field leading icons */
.field-control { position: relative; }
.field--icon .field-control__icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.05rem;
  height: 1.05rem;
  color: var(--text-muted);
  pointer-events: none;
}
.field--icon .field-control__icon svg { width: 100%; height: 100%; display: block; }
/* Specificity must beat the base `.field input:not(...):not(...)` padding rule
   so the icon isn't overlapped by the text. */
.field--icon .field-control input:not([type="checkbox"]):not([type="radio"]),
.field--icon .field-control select { padding-left: 2.4rem; }

/* Profile photo row in the Account section */
.profile-photo {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.profile-photo__preview {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--surface-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.profile-photo__preview img[hidden] { display: none; }
.profile-photo__preview img { width: 100%; height: 100%; object-fit: cover; }
.profile-photo__placeholder { width: 42px; height: 42px; color: var(--text-muted); }
.profile-photo__placeholder[hidden] { display: none; }
.profile-photo__controls { flex: 1; min-width: 12rem; display: flex; flex-direction: column; gap: 0.5rem; }
.profile-photo__controls > label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}
.profile-photo__actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.profile-photo__actions .field-hint { margin: 0; }
/* Keyboard focus on the hidden file input shows on its "Choose photo" label. */
.profile-photo__choose:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Visually-hidden file input, still openable via its "Choose photo" label. */
.profile-photo__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
}

/* Colored borders per certification body's specialty group (uniform width) */
.specialty-group[data-provider="aha"] { border-color: #d64545; }
.specialty-group[data-provider="red_cross"] { border-color: #c8102e; }
.specialty-group[data-provider="ansi"] { border-color: #0b7285; }
.specialty-group[data-provider="naemt"] { border-color: #2f9e44; }
.specialty-group[data-provider="nremt"] { border-color: #7048e8; }

/* ------------------------------------------------------------------
   Instructor calendar (month grid)
   ------------------------------------------------------------------ */
.calendar-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar-grid thead th {
  padding: 0.5rem 0.4rem; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted); border-bottom: 1px solid var(--line);
  text-align: center;
}
.calendar-grid tbody td {
  height: 5.2rem; padding: 0.35rem 0.4rem; vertical-align: top;
  border: 1px solid var(--line-strong); font-size: 0.85rem;
}
.calendar-grid .cal-day__num { font-weight: 600; }
.calendar-grid .is-outside { background: var(--surface-sunken); }
.calendar-grid .is-outside .cal-day__num { color: var(--text-muted); font-weight: 400; }
.calendar-grid .is-today .cal-day__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem; border-radius: 999px;
  background: var(--cobalt-500); color: var(--n0);
}
.calendar-grid .is-blocked { background: var(--crit-bg); }
.cal-day__tag {
  display: block; margin-top: 0.3rem; font-size: 0.72rem;
  color: var(--crit); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* Class chips on the instructor calendar, colored per organization: a
   COMPLETE border in the org color (thicker on the left edge), not just
   a left bar on a borderless tint. */
.cal-day__class {
  display: block; margin-top: 0.3rem; padding: 0.1rem 0.35rem;
  font-size: 0.72rem; border-radius: 0.35rem;
  border: 1px solid; border-left-width: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: none; color: inherit;
}
.cal-org-0 { background: rgba(59, 130, 246, 0.14); border-color: #3b82f6; }
.cal-org-1 { background: rgba(16, 185, 129, 0.14); border-color: #10b981; }
.cal-org-2 { background: rgba(245, 158, 11, 0.16); border-color: #f59e0b; }
.cal-org-3 { background: rgba(139, 92, 246, 0.14); border-color: #8b5cf6; }
.cal-org-4 { background: rgba(236, 72, 153, 0.14); border-color: #ec4899; }
.cal-org-5 { background: rgba(20, 184, 166, 0.14); border-color: #14b8a6; }
span.pill.cal-org-0, span.pill.cal-org-1, span.pill.cal-org-2,
span.pill.cal-org-3, span.pill.cal-org-4, span.pill.cal-org-5 {
  border-left: 3px solid; color: var(--text);
}

/* Intro text inside a card (the page-head .lead rule doesn't reach here). */
.card > .lead {
  margin: 0 0 1rem; color: var(--text-muted); font-size: 0.9rem;
  line-height: 1.5;
}

/* ---- Public course catalog (FS 1.4) -------------------------------- */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.course-card {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 1.1rem;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--edge) 35%, var(--line-strong));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  text-decoration: none; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.course-card:hover {
  border-color: var(--edge);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.course-card > .pill { align-self: flex-start; }
.course-card__title { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.course-card__meta { font-size: 0.85rem; color: var(--text-muted); }
.course-card__foot {
  margin-top: auto; padding-top: 0.5rem;
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--line);
}
.course-card__price { font-weight: 700; color: var(--text); }

.catalog-filter-actions {
  display: flex; gap: 0.6rem; align-items: flex-end;
}

.public-course-layout {
  display: grid; grid-template-columns: 2fr 1fr; gap: 1.25rem;
  align-items: start;
}
@media (max-width: 760px) {
  .public-course-layout { grid-template-columns: 1fr; }
}
.card-text {
  margin: 0 0 1rem; color: var(--text-2); font-size: 0.95rem;
  line-height: 1.6;
}

.team-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.team-member { display: flex; gap: 0.9rem; align-items: flex-start; }
.team-member__photo {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; border: 1px solid var(--line);
}
.team-member__photo--empty {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-weak); color: var(--accent-hover);
  font-weight: 700; font-size: 1.2rem;
}
.team-member__body b { display: block; margin-bottom: 0.2rem; }
.team-member__body p {
  margin: 0; font-size: 0.88rem; color: var(--text-muted); line-height: 1.5;
}

.enroll-box { display: grid; gap: 0.7rem; justify-items: start; }
.enroll-box__price { font-size: 1.7rem; font-weight: 800; color: var(--text); }
.enroll-box__note { margin: 0; font-size: 0.9rem; color: var(--text-2); }
.enroll-box .btn { width: 100%; }
.enroll-box .help { margin: 0; }

/* =====================================================================
   Design pass (issue #74) — shared primitives that retire inline styles
   ===================================================================== */

/* ---- Tooltip --------------------------------------------------------
   Pure CSS, driven by data-tip; inverted surface reads in both themes.
   Pair with aria-label on icon-only controls (the tooltip text is
   ::after content, invisible to screen readers). */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 2px);
  z-index: 40;
  width: max-content;
  max-width: 16rem;
  padding: 0.38rem 0.6rem;
  font: 500 0.75rem/1.4 var(--font-ui);
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
  text-align: center;
  color: var(--bg);
  background: var(--text);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease .05s, transform .12s ease .05s;
}
[data-tip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease .05s;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after,
[data-tip]:hover::before, [data-tip]:focus-visible::before { opacity: 1; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { transform: translate(-50%, 0); }
/* Controls near a container's left edge: left-align the bubble instead. */
.tip-start[data-tip]::after { left: 0; transform: translate(0, 2px); }
.tip-start[data-tip]:hover::after, .tip-start[data-tip]:focus-visible::after { transform: translate(0, 0); }

/* ---- Icon button ----------------------------------------------------
   Compact quick action for table rows and row lists; sized for the
   17px stroke icons in partials/_icon.html. Works on <button> and <a>.
   Always pair with aria-label + data-tip. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.icon-btn svg { width: 17px; height: 17px; display: block; }
.icon-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-weak);
  text-decoration: none;
}
.icon-btn:active { transform: translateY(1px); }
.icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.icon-btn--danger:hover {
  color: var(--crit);
  border-color: var(--crit);
  background: var(--crit-bg);
}
/* Leading icon inside a labelled .btn (e.g. "Approve" with a check). */
.btn svg { width: 16px; height: 16px; flex: none; }

/* ---- Table action cluster -------------------------------------------
   One layout for the per-row actions in .data-table cells AND in
   .detail-list / .membership-list rows (replaces .row-actions,
   .detail-list__actions, .membership-actions as templates migrate). */
.table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex: none;
}
/* Rows align their content to the top (multi-line meta), but the action
   cluster reads better vertically centered against the whole row. */
.detail-list > li > .table-actions { align-self: center; }
/* CSRF form wrappers participate in the flex gap instead of breaking it. */
.table-actions .inline-form { display: contents; }
.table-actions .link-button { align-self: center; }
.data-table td.table-actions {
  width: 1%;
  white-space: nowrap;
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
}

/* ---- Reveal stagger ranks -------------------------------------------
   Replace style="--i:N" (.reveal consumes --i via animation-delay).
   Usage: class="card reveal r2". */
.r0 { --i: 0; }
.r1 { --i: 1; }
.r2 { --i: 2; }
.r3 { --i: 3; }
.r4 { --i: 4; }
.r5 { --i: 5; }
.r6 { --i: 6; }
.r7 { --i: 7; }
.r8 { --i: 8; }
/* Loop-rendered siblings: the container assigns ranks; items past the
   fifth arrive together rather than queueing indefinitely. */
.reveal-seq > .reveal:nth-child(1) { --i: 1; }
.reveal-seq > .reveal:nth-child(2) { --i: 2; }
.reveal-seq > .reveal:nth-child(3) { --i: 3; }
.reveal-seq > .reveal:nth-child(4) { --i: 4; }
.reveal-seq > .reveal:nth-child(n+5) { --i: 5; }

/* ---- Content flow ---------------------------------------------------
   Vertical rhythm inside a card body / conditional block; one class on
   the container replaces per-element inline margin-tops. */
.flow > * + * { margin-top: var(--flow, 0.9rem); }
.flow--tight { --flow: 0.45rem; }

/* ---- Form & row layout modifiers ------------------------------------ */
/* A form displayed as its own block under preceding text (was
   .inline-form + inline display:block overrides). */
.form-block { display: block; margin: 0.9rem 0 0; }
/* Submit/cancel action row at the end of a form. */
.form-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}
/* Space-between split row (card feet, list rows). */
.row-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
/* Card foot variants. */
.card__foot--flush { border-top: 0; padding-top: 0; margin-top: 0.75rem; }
.card__foot--links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.card__action--muted { color: var(--text-muted); }
/* The row owns its bottom spacing; fields inside stop double-spacing. */
.field-row { margin-bottom: 1.05rem; }
.field-row > .field { margin-bottom: 0; }
.field-row--end { align-items: flex-end; }
/* Field width/rhythm modifiers. */
.field--tight { margin-bottom: 0.75rem; }
.field--w9 { flex: 0 0 9rem; }
.field--w11 { flex: 0 0 11rem; }
/* Empty-state CTA button clears the copy above it. */
.empty__body .btn { margin-top: 0.6rem; }
/* Wide content that scrolls sideways without .table-wrap's chrome. */
.scroll-x { overflow-x: auto; }
/* Margin-top scale for true one-offs (prefer the component fixes above). */
.mt-xs { margin-top: 0.35rem; }
.mt-sm { margin-top: 0.6rem; }
.mt-md { margin-top: 0.9rem; }
.mt-lg { margin-top: 1.25rem; }

/* ---- Section sub-nav (org settings tabs) ---------------------------- */
.subnav {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--line-strong);
}
.subnav__link {
  padding: 0.5rem 0.8rem 0.6rem;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--text-2);
  white-space: nowrap;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.subnav__link:hover {
  color: var(--text);
  background: var(--surface-sunken);
  text-decoration: none;
}
.subnav__link--active {
  color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent);
}

/* ---- Rotating edge palette ------------------------------------------
   Containers pick their border hue from their position among siblings,
   so pages read colorful but deterministic: cobalt, teal, violet, rose,
   repeat. Zero-specificity :where() keeps every status variant
   (.card--ok, .stat--warn, row .is-crit...) winning unchanged, and the
   --edge variable inherits into the container's rows/tables/empty
   states so each card's contents match its border. */
:where(.card, .stat, .course-card):nth-child(4n+2) { --edge: var(--edge-teal); }
:where(.card, .stat, .course-card):nth-child(4n+3) { --edge: var(--edge-violet); }
:where(.card, .stat, .course-card):nth-child(4n) { --edge: var(--edge-rose); }

/* ---- Card-internal rhythm -------------------------------------------
   A row list that follows other card content (an add form, intro text,
   a table) gets breathing room; adjacent margins collapse, so lists at
   natural positions don't double-space. */
.card > * + .detail-list,
.card > * + .membership-list,
.card > * + .empty { margin-top: 1.15rem; }

/* ---- Mobile primary nav ---------------------------------------------
   The desktop .appnav is hidden under 640px; this disclosure menu
   (same links, .menu chrome) takes over so navigation never vanishes. */
.nav-menu { display: none; }
.nav-menu > summary { padding: 0.3rem 0.55rem; }
.nav-menu__icon { width: 18px; height: 18px; color: var(--text-2); }
.nav-menu .menu__panel { left: 0; right: auto; }
@media (max-width: 640px) {
  .nav-menu { display: block; }
}