/* ============================================================
   THE AUTHORITY CODE: Design System
   Near-black canvas, champagne gold, serif display + sans body.
   Quiet authority. Premium and calm. Never bouncy.
   ============================================================ */

:root {
  /* Canvas */
  --bg-0: #0a0a0b;
  --bg-1: #0e0e10;
  --bg-2: #141417;
  --bg-3: #1b1b1f;
  --line: rgba(201, 165, 92, 0.16);
  --line-soft: rgba(255, 255, 255, 0.07);

  /* Gold */
  --gold: #c9a55c;
  --gold-bright: #e6c87e;
  --gold-deep: #9a7c3e;
  --gold-glow: rgba(201, 165, 92, 0.14);

  /* Ink */
  --ink: #f2ece0;
  --ink-soft: #d4ccbd;
  --ink-mute: #9c9588;
  --ink-faint: #6b6659;

  /* Accents */
  --red: #c0463b;
  --red-soft: rgba(192, 70, 59, 0.14);
  --green: #6f9a5e;

  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Manrope", system-ui, sans-serif;

  /* Layout */
  --col: 760px;
  --col-wide: 1080px;
  --radius: 14px;
  --radius-sm: 9px;
  --bar-h: 64px;

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --t-fast: 0.18s;
  --t: 0.32s;
  --t-slow: 0.6s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--bg-0);
  color: var(--ink);
  line-height: 1.65;
  font-size: 17px;
  letter-spacing: 0.005em;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; }
a { color: var(--gold-bright); text-decoration: none; }

/* ---------- Background atmosphere ---------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(900px 600px at 70% -10%, var(--gold-glow), transparent 60%),
    radial-gradient(700px 500px at 10% 110%, rgba(201,165,92,0.06), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
}
/* fine grain */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.15; color: var(--ink); }
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  letter-spacing: -0.01em;
}
.display em { font-style: italic; color: var(--gold-bright); }
.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gold);
}
.lead { color: var(--ink-soft); font-size: 1.08rem; }
.muted { color: var(--ink-mute); }
.serif { font-family: var(--serif); }

/* ---------- Shell / layout ---------- */
.shell {
  max-width: var(--col);
  margin: 0 auto;
  padding: 0 24px;
}
.shell-wide { max-width: var(--col-wide); margin: 0 auto; padding: 0 24px; }
.page {
  /* Go 1 B1: include the iOS status-bar inset so content clears the taller bar. */
  padding-top: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + 40px);
  padding-bottom: 120px;
}

/* ---------- Top bar ---------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* B1 herstel: the status bar is now `black` (apple-mobile-web-app-status-bar-style),
     so iOS reserves an opaque status-bar zone OUTSIDE the webview and scrolling content
     can never bleed behind the clock/wifi/battery. The env(safe-area-inset-top) below is
     a harmless fallback: without viewport-fit=cover it resolves to 0 (on iOS and desktop
     alike), so the bar height, ::before strip and page padding are unaffected. Kept in
     place so any device/config that does report a top inset is still covered. */
  height: calc(var(--bar-h) + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 24px;
  padding-right: 24px;
  background: rgba(10, 10, 11, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
/* Solid dark fill for the status-bar inset only (0 height on desktop). */
.topbar::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--bg-0);
}
.topbar__brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar__logo { height: 30px; width: auto; display: block; }
.topbar__wordmark {
  font-family: var(--serif);
  font-size: 0.96rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.topbar__title {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar__spacer { flex: 1; }
.topbar__right { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; }
/* Every control on the right of the bar shares one height and never lets its
   label wrap, so the row stays a single calm line on every width. The Admin
   chip is given the same vertical box as the ghost buttons so the heights match. */
.topbar__right .btn,
.topbar__right .chip {
  min-height: 36px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.topbar__right .chip { padding-top: 7px; padding-bottom: 7px; }

/* topbar progress group (player pages) */
.topbar__progress {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  max-width: 360px;
}
.topbar__progress-label {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* autosave indicator */
.autosave {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--ink-mute);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.autosave__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-faint);
  transition: background var(--t-fast);
}
.autosave.is-saving .autosave__dot { background: var(--gold); animation: pulse 1s infinite; }
.autosave.is-saved .autosave__dot { background: var(--green); }
@keyframes pulse { 50% { opacity: 0.35; } }

/* ---------- Progress bar ---------- */
.progress {
  position: relative;
  height: 6px;
  background: var(--bg-3);
  border-radius: 99px;
  overflow: hidden;
  flex: 1;
  max-width: 320px;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.progress__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  border-radius: 99px;
  transition: width var(--t-slow) var(--ease);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 24px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.1;
  transition: transform var(--t-fast) var(--ease), background var(--t), border-color var(--t), color var(--t), box-shadow var(--t);
  background: var(--bg-2);
  color: var(--ink);
  border-color: var(--line-soft);
}
.btn:hover { border-color: var(--line); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn--gold {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #20180a;
  border-color: transparent;
  box-shadow: 0 6px 24px -10px rgba(201,165,92,0.6);
}
.btn--gold:hover { box-shadow: 0 10px 30px -10px rgba(201,165,92,0.8); border-color: transparent; }
.btn--ghost { background: transparent; }
.btn--block { width: 100%; }
.btn--lg { padding: 16px 30px; font-size: 1rem; }

/* ---------- Forms ---------- */
.field { margin-bottom: 22px; }
.field__label {
  display: block;
  font-size: 0.98rem;
  color: var(--ink);
  margin-bottom: 10px;
  font-weight: 500;
  font-family: var(--serif);
  line-height: 1.4;
}
.input, .textarea, select.input {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 13px 15px;
  font-size: 1rem;
  line-height: 1.6;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  resize: vertical;
}
.textarea { min-height: 110px; }
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input:focus, .textarea:focus, select.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
  background: var(--bg-2);
}
/* B4: force dark styling on browser autofill (no light-blue boxes).
   The inset shadow paints over the user-agent yellow/blue fill. */
.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-1) inset;
  box-shadow: 0 0 0 1000px var(--bg-1) inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}
.input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--bg-2) inset, 0 0 0 3px var(--gold-glow);
  box-shadow: 0 0 0 1000px var(--bg-2) inset, 0 0 0 3px var(--gold-glow);
}

/* Nice-to-have: hide the visible drag corner on textareas. They keep a
   comfortable min-height and the player auto-sizes them as you write. */
.textarea { resize: none; }

/* B5: invalid-field affordance on pages that only load style.css (login). */
.field.is-invalid .input,
.field.is-invalid .textarea,
.field.is-invalid select.input { border-color: var(--red); }

/* ---------- Cards ---------- */
.card {
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color var(--t), transform var(--t-fast) var(--ease), box-shadow var(--t);
}
.card--hover:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: 0 18px 50px -30px rgba(0,0,0,0.9); }

/* ---------- Blueprint cards (dashboard) ---------- */
.bp-card { position: relative; cursor: pointer; }
.bp-card__row { display: flex; gap: 18px; align-items: flex-start; }
.bp-card__icon {
  font-size: 2rem; line-height: 0; flex-shrink: 0;
  color: var(--gold);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: linear-gradient(180deg, var(--gold-glow), transparent);
}
.bp-card.is-locked .bp-card__icon { color: var(--ink-mute); }
.bp-card__body { flex: 1; min-width: 0; }
.bp-card__head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-right: 34px; /* room for the lock/arrow top-right */
}
.bp-card__title { font-size: 1.4rem; }
.bp-card__desc { color: var(--ink-mute); margin-top: 6px; }
.bp-card__progress {
  display: flex; align-items: center; gap: 14px; margin-top: 16px;
}
.bp-card__progress .progress { max-width: none; }
.bp-card__progress-label { font-size: 0.82rem; color: var(--ink-mute); white-space: nowrap; }
.bp-card__note { color: var(--ink-mute); margin-top: 14px; font-size: 0.84rem; }
.bp-card__corner {
  position: absolute; top: 18px; right: 18px;
  color: var(--ink-mute); font-size: 1.2rem; line-height: 1;
}
.bp-card.is-locked { opacity: 0.78; }
.bp-card.is-locked .bp-card__icon,
.bp-card.is-locked .bp-card__title,
.bp-card.is-locked .bp-card__desc { opacity: 0.8; }

/* ---------- Callouts ---------- */
.callout {
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, var(--gold-glow), transparent 70%);
  padding: 18px 22px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 26px 0;
}
.callout p { color: var(--ink); font-family: var(--serif); font-size: 1.12rem; line-height: 1.5; }
.callout p + p { margin-top: 8px; color: var(--ink-soft); }

/* Mirror block: quiet, recessed, italic */
.mirror {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin: 24px 0;
}
.mirror p {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.08rem;
  line-height: 1.55;
}
.mirror p + p { margin-top: 10px; }

.after-text { color: var(--ink-soft); margin: 18px 0; }
.after-text p + p { margin-top: 10px; }

/* ---------- Expandable panels (systems / archetypes) ---------- */
.panel {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--bg-1);
  margin: 14px 0;
  overflow: hidden;
  transition: border-color var(--t);
}
.panel.is-open { border-color: var(--line); }
.panel__head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--ink);
  padding: 18px 20px;
}
.panel__icon { color: var(--gold); font-size: 1rem; }
.panel__title { font-family: var(--serif); font-size: 1.1rem; flex: 1; }
.panel__chev { color: var(--ink-mute); transition: transform var(--t) var(--ease); }
.panel.is-open .panel__chev { transform: rotate(180deg); }
.panel__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--ease);
}
.panel.is-open .panel__body { grid-template-rows: 1fr; }
.panel__body > div { overflow: hidden; }
.panel__inner { padding: 0 20px 20px; color: var(--ink-soft); }
.panel__inner p + p { margin-top: 10px; }

/* Archetype score row */
.score-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 18px;
}
.score-row__label { width: 100%; font-size: 0.82rem; color: var(--ink-mute); letter-spacing: 0.04em; margin-bottom: 2px; }
.score {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all var(--t-fast) var(--ease);
}
.score:hover { border-color: var(--gold); color: var(--ink); }
.score.is-active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #20180a;
  border-color: transparent;
  box-shadow: 0 4px 14px -6px rgba(201,165,92,0.7);
}

/* ---------- Section / step containers ---------- */
.section-head { margin-bottom: 26px; }
.section-num {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--gold);
  letter-spacing: 0.1em;
}
/* B3: blueprint-header line icon in place of the old emoji. */
.section-num--icon { line-height: 0; margin-bottom: 6px; }
.section-title {
  font-family: var(--serif);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  margin-top: 4px;
}
.intro-text { color: var(--ink-soft); margin: 16px 0; }
.intro-text p + p { margin-top: 10px; }

.divider { height: 1px; background: var(--line-soft); margin: 34px 0; border: none; }

/* ---------- Reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { scroll-behavior: auto; }
}

/* ---------- Modal / overlay ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  /* Go 1 B3: scroll the overlay and top-align (with margin:auto on the modal it
     still centers when it fits) so a modal taller than a short viewport stays
     fully reachable instead of overflowing off-screen with no way to scroll. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 24px;
  background: rgba(6,6,7,0.74);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.overlay.is-open { display: flex; opacity: 1; }
.modal {
  width: 100%;
  max-width: 480px;
  margin: auto; /* Go 1 B3: centers when it fits, top-aligns + scrolls when tall. */
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--t) var(--ease);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9);
}
.overlay.is-open .modal { transform: none; }
.modal__icon { font-size: 1.8rem; line-height: 0; margin-bottom: 14px; color: var(--gold); }
.modal__title { font-family: var(--serif); font-size: 1.5rem; margin-bottom: 12px; }
.modal__body { color: var(--ink-soft); margin-bottom: 22px; }
.modal__body p + p { margin-top: 10px; }
.modal__actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Completion overlay ---------- */
.completion {
  text-align: center;
  max-width: 540px;
}
.completion__seal {
  width: 84px; height: 84px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 2rem;
  background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold-deep));
  color: #20180a;
  box-shadow: 0 0 50px -8px var(--gold-glow);
}

/* ---------- Utilities ---------- */
.stack > * + * { margin-top: 16px; }
.center { text-align: center; }
.flex { display: flex; }
.gap { gap: 12px; }
.hidden { display: none !important; }
.full { width: 100%; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--line-soft); color: var(--ink-mute);
}
.chip--gold { color: var(--gold); border-color: var(--line); }
.chip--green { color: var(--green); border-color: rgba(111,154,94,0.4); }
.chip--locked { color: var(--ink-faint); }
.chip--mute { color: var(--ink-mute); }
/* A6: clickable filter chip (Drills Library). */
.chip--filter {
  cursor: pointer; background: transparent;
  transition: color var(--t), border-color var(--t), background var(--t);
}
.chip--filter:hover { color: var(--ink-soft); border-color: var(--line); }
.chip--filter.is-active {
  color: var(--gold); border-color: var(--gold);
  background: var(--gold-glow);
}

/* ---------- Drills Library controls (A6) ---------- */
.drill-controls {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 26px;
}
.drill-search { margin-bottom: 16px; }
.drill-filter { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.drill-filter__label {
  flex: 0 0 86px;
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); padding-top: 4px;
}
.drill-filter__chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.drill-controls__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.drill-count { font-size: 0.84rem; }
.drill-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
@media (max-width: 640px) {
  .drill-filter { flex-direction: column; gap: 6px; }
  .drill-filter__label { flex-basis: auto; padding-top: 0; }
}

/* ---------- Custom line icons (B3) ---------- */
.ic { display: inline-block; vertical-align: middle; color: var(--gold); }
.ic--lock { color: var(--ink-mute); }

/* spinner */
.spinner {
  width: 26px; height: 26px;
  border: 2px solid var(--line-soft);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.loading-screen { min-height: 70vh; display: grid; place-items: center; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Quiet inline text-button (Go 2: "Forgot your password?" / "Back to login").
   Calm, in the muted line, with a gentle gold lift on hover. No shouting. */
.link-quiet {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--sans); font-size: 0.86rem; color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.link-quiet:hover { color: var(--gold); border-bottom-color: rgba(201,165,92,0.5); }

/* toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--bg-3); border: 1px solid var(--line);
  color: var(--ink); padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: 0.9rem; z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity var(--t), transform var(--t) var(--ease);
}
.toast.is-show { opacity: 1; transform: translateX(-50%); }
.toast--err { border-color: rgba(192,70,59,0.5); }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .page { padding-top: calc(var(--bar-h) + 28px); padding-bottom: 80px; }

  /* A4: compact, breathing header */
  .topbar { gap: 10px; padding-left: 16px; padding-right: 16px; } /* keep padding-top inset (B1) */
  .topbar__title { display: none; }
  .topbar__right { gap: 10px; }
  .topbar__wordmark { font-size: 0.86rem; letter-spacing: 0.14em; }
  .topbar__progress { max-width: none; gap: 8px; }
  .topbar__progress-label { font-size: 0.66rem; letter-spacing: 0.1em; }

  /* A7: wider, even side margins; no horizontal overflow.
     Use logical left/right only so the .page top offset (which clears the
     fixed header) is never reset by this shorthand. */
  .shell, .shell-wide { padding-left: 20px; padding-right: 20px; }
  .card { padding: 20px; }
  .modal { padding: 24px; }

  /* B8: the 1-10 rating buttons form two even rows of five, each a
     comfortable tap target instead of cramped wrapping. */
  .score-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
  }
  .score-row__label { grid-column: 1 / -1; }
  .score { width: 100%; height: 46px; font-size: 1rem; }

  /* A7: comfortable tap targets */
  .btn { min-height: 44px; padding: 12px 20px; }
  .nav-item { min-height: 44px; }
  .panel__head { padding: 16px; min-height: 44px; }

  /* A5: callouts and long serif body sit smaller and tighter on a phone */
  .callout { padding: 16px 18px; margin: 22px 0; }
  .callout p { font-size: 1rem; line-height: 1.45; }
  .callout p + p { font-size: 0.96rem; }
  .mirror { padding: 18px 18px; }
  .mirror p { font-size: 1rem; line-height: 1.5; }
  .video-gate__body p { font-size: 1rem; line-height: 1.55; }
  .profile__lead { font-size: 1rem; }

  /* A6: shorter textareas (JS auto-grows them as the student writes) */
  .textarea { min-height: 84px; }

  /* A3: dashboard cards stack fully vertically on a phone */
  .bp-card__row { flex-direction: column; gap: 14px; }
  .bp-card__icon { font-size: 1.8rem; }
  .bp-card__head { flex-direction: column; align-items: flex-start; gap: 8px; padding-right: 28px; }
  .bp-card__progress { flex-direction: column; align-items: stretch; gap: 8px; }
  .bp-card__progress-label { white-space: normal; }
}

/* Phone widths: keep the whole right cluster of the top bar on one line. The
   ghost buttons tighten (the inline padding from the markup is overridden here
   only) and the Admin chip shrinks with them, so even the heaviest variant
   (Admin + The Log + Calls + Log out) fits without wrapping or unequal heights.
   Log out stays fully readable. Touches the top bar only; desktop is unchanged. */
@media (max-width: 440px) {
  .topbar { gap: 8px; padding-left: 12px; padding-right: 12px; } /* keep padding-top inset (B1) */
  .topbar__right { gap: 7px; }
  .topbar__right .btn { padding: 8px 11px !important; font-size: 0.84rem; }
  .topbar__right .chip { padding-left: 9px; padding-right: 9px; font-size: 0.68rem; }
}

/* ============================================================
   Golf 1: read-only access banner + locked write surfaces
   A calm note for a student whose program window has ended. No
   countdown, no alarm colour. Inputs become non-interactive so the
   library still reads perfectly but nothing new can be written.
   ============================================================ */
.access-banner {
  position: fixed;
  top: var(--bar-h); left: 0; right: 0;
  z-index: 40;
  padding: 9px 24px;
  text-align: center;
  font-size: 0.84rem;
  color: var(--ink-soft);
  background: rgba(14, 14, 16, 0.86);
  backdrop-filter: blur(10px) saturate(140%);
  border-bottom: 1px solid var(--line-soft);
  letter-spacing: 0.01em;
}
body.is-readonly .page { padding-top: calc(var(--bar-h) + 40px + 38px); }
/* When read-only, every write surface is quietly inert. Reading is
   untouched; only the act of entering or saving is removed. */
body.is-readonly .input,
body.is-readonly .textarea,
body.is-readonly select.input,
body.is-readonly .score,
body.is-readonly .autosave {
  pointer-events: none;
  opacity: 0.55;
}
body.is-readonly .autosave { display: none; }
@media (max-width: 640px) {
  .access-banner { padding: 8px 16px; font-size: 0.78rem; }
  body.is-readonly .page { padding-top: calc(var(--bar-h) + 28px + 44px); }
}

/* ============================================================
   Golf 1: Admin Students tab (progress overview)
   Same dark/gold language as the rest of the console. Metadata only;
   no student answer text ever renders here.
   ============================================================ */
.adm-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line-soft);
}
.adm-tab {
  background: transparent; border: none;
  color: var(--ink-mute);
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 10px 4px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  transition: color var(--t), border-color var(--t);
}
.adm-tab:hover { color: var(--ink-soft); }
.adm-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.adm-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.adm-toolbar .input { flex: 1; min-width: 200px; }
.adm-sort {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.78rem; color: var(--ink-mute);
}
.adm-sort select.input { width: auto; padding: 9px 12px; font-size: 0.86rem; }

.adm-table { display: flex; flex-direction: column; gap: 10px; }
.adm-row {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-color var(--t);
}
.adm-row.is-open { border-color: var(--line); }
.adm-row__head {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.7fr 0.8fr 0.7fr 0.95fr;
  align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: transparent; border: none; color: var(--ink);
  padding: 14px 18px;
}
.adm-row__head:hover { background: var(--bg-3); }
.adm-who { min-width: 0; }
.adm-who__name { font-family: var(--serif); font-size: 1.04rem; display: flex; align-items: center; gap: 8px; }
.adm-who__email { font-size: 0.74rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-drift-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-faint); flex-shrink: 0;
}
.adm-mini {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.adm-mini__label { font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.adm-mini__bar { display: flex; align-items: center; gap: 8px; }
.adm-mini .progress { height: 5px; max-width: none; }
.adm-mini__val { font-size: 0.78rem; color: var(--ink-soft); white-space: nowrap; }
.adm-cell { font-size: 0.82rem; color: var(--ink-soft); min-width: 0; }
.adm-cell--mute { color: var(--ink-mute); }
.adm-clock { font-size: 0.78rem; color: var(--ink-mute); }
.adm-clock.is-soon { color: var(--red); }

.adm-row__detail {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--t) var(--ease);
}
.adm-row.is-open .adm-row__detail { grid-template-rows: 1fr; }
.adm-row__detail > div { overflow: hidden; }
.adm-detail__inner {
  padding: 4px 18px 20px;
  border-top: 1px solid var(--line-soft);
}
.adm-access {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 16px; margin: 16px 0;
}
.adm-access .field { margin-bottom: 0; }
.adm-access .field__label { font-size: 0.8rem; font-family: var(--sans); margin-bottom: 6px; }
.adm-access .input { padding: 10px 12px; font-size: 0.9rem; }
.adm-detail__group { margin-top: 16px; }
.adm-detail__group h4 { font-size: 0.96rem; margin-bottom: 8px; color: var(--ink); }
.adm-lessons { display: flex; flex-direction: column; gap: 6px; }
.adm-lesson {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 0.82rem; color: var(--ink-soft);
  padding: 8px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}
.adm-skeleton {
  height: 56px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2));
  background-size: 200% 100%;
  animation: adm-shimmer 1.3s linear infinite;
}
@keyframes adm-shimmer { to { background-position: -200% 0; } }

@media (max-width: 760px) {
  .adm-row__head {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
  }
  .adm-who { grid-column: 1 / -1; }
  .adm-access { flex-direction: column; align-items: stretch; }
  .adm-access .field, .adm-access .btn { width: 100%; }
}

/* ============================================================
   Golf 1 run 2: Calls hub
   ============================================================ */
/* Upcoming, the prominent next call */
.call-next { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.call-next .chip { margin-bottom: 2px; }
.call-next__title { font-size: 1.6rem; }
.call-next__when { color: var(--ink-soft); font-size: 1.02rem; }
.call-next__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; }

/* The quiet list of further scheduled calls */
.call-soon { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.call-soon__row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-top: 1px solid var(--line-soft);
}
.call-soon__title { flex: 1; min-width: 0; color: var(--ink); }
.call-soon__when { color: var(--ink-mute); font-size: 0.84rem; white-space: nowrap; }

/* Recordings archive */
.rec-list { display: flex; flex-direction: column; gap: 10px; }
.rec-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  padding: 14px 18px;
  transition: border-color var(--t), background var(--t);
}
.rec-row:hover { border-color: var(--line); background: var(--bg-3); }
.rec-row__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: transparent; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px var(--line-soft);
}
.rec-row__dot.is-unseen {
  background: var(--gold);
  box-shadow: 0 0 10px -1px var(--gold-glow);
}
.rec-row__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rec-row__title { font-family: var(--serif); font-size: 1.08rem; }
.rec-row__meta { font-size: 0.8rem; color: var(--ink-mute); letter-spacing: 0.02em; }
.rec-row__chev { color: var(--ink-mute); font-size: 1.1rem; }

/* Modal close + responsive embed */
.rec-close {
  position: absolute; top: 16px; right: 18px;
  background: transparent; border: none;
  color: var(--ink-mute); font-size: 1.6rem; line-height: 1;
}
.rec-close:hover { color: var(--ink); }
.modal { position: relative; }
.rec-embed {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: var(--radius-sm); overflow: hidden;
  background: #000; border: 1px solid var(--line-soft);
}
.rec-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Admin Calls tab ---------- */
.adm-call-form {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 26px;
}
.adm-call-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.adm-call-grid .field { margin-bottom: 0; }
.adm-call-grid .full-col { grid-column: 1 / -1; }
.adm-tz-note { font-size: 0.78rem; color: var(--ink-mute); margin-top: 6px; }
.adm-toggle-line { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.adm-switch {
  position: relative; width: 46px; height: 26px; flex-shrink: 0;
  border-radius: 99px; border: 1px solid var(--line-soft);
  background: var(--bg-1); transition: background var(--t), border-color var(--t);
}
.adm-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink-mute); transition: transform var(--t) var(--ease), background var(--t);
}
.adm-switch.is-on { background: var(--gold-glow); border-color: var(--gold); }
.adm-switch.is-on::after { transform: translateX(20px); background: var(--gold); }

.adm-call-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 14px 18px; margin-bottom: 10px;
}
.adm-call-row__body { flex: 1; min-width: 0; }
.adm-call-row__title { font-family: var(--serif); font-size: 1.08rem; }
.adm-call-row__meta { font-size: 0.8rem; color: var(--ink-mute); margin-top: 2px; }
.adm-call-row__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Attendance panel */
.adm-att {
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 16px; margin-top: 12px;
}
.adm-att__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.adm-att__count { font-size: 0.86rem; color: var(--ink-soft); }
.adm-att__list { display: flex; flex-direction: column; gap: 8px; }
.adm-att-row {
  display: flex; align-items: center; gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
}
.adm-att-row__who { flex: 1; min-width: 0; }
.adm-att-row__name { color: var(--ink); }
.adm-att-row__email { font-size: 0.74rem; color: var(--ink-faint); }
.adm-att-toggle {
  min-width: 116px; min-height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: var(--bg-1); color: var(--ink-mute);
  font-weight: 600; font-size: 0.86rem;
  transition: all var(--t-fast) var(--ease);
}
.adm-att-toggle.is-present {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #20180a; border-color: transparent;
}

@media (max-width: 640px) {
  .call-next__title { font-size: 1.35rem; }
  .call-soon__row { flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
  .call-soon__title { flex: 1 1 auto; }
  .call-soon__when { flex: 1 0 100%; white-space: normal; font-size: 0.8rem; }
  .adm-call-grid { grid-template-columns: 1fr; }
  .adm-call-row { flex-direction: column; align-items: stretch; }
  .adm-att-row { gap: 10px; }
  .adm-att-toggle { min-width: 96px; }
}

/* ============================================================
   Golf 1 run 3: The Log + Commit & Review
   Quiet authority. No daily streak, no broken state, no red,
   no celebration. The reps are the point, not the platform.
   ============================================================ */
/* Quick log: four large tap targets */
.ql-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ql-tile {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  min-height: 76px;
  padding: 16px 18px;
  text-align: left;
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  color: var(--ink);
  transition: border-color var(--t), transform var(--t-fast) var(--ease), box-shadow var(--t);
}
.ql-tile:hover {
  border-color: var(--line);
  transform: translateY(-2px);
  box-shadow: 0 18px 50px -30px rgba(0,0,0,0.9);
}
.ql-tile__label { font-family: var(--serif); font-size: 1.06rem; line-height: 1.2; }
.ql-tile__plus {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--gold); font-size: 1.2rem; line-height: 1;
  background: linear-gradient(180deg, var(--gold-glow), transparent);
}

/* Quick-log entry modal: count stepper */
.log-stepper {
  display: flex; align-items: center; justify-content: center;
  gap: 22px;
  margin-top: 8px;
}
.log-step {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--gold);
  font-size: 1.6rem; line-height: 1;
  transition: border-color var(--t), background var(--t), transform var(--t-fast) var(--ease);
}
.log-step:hover { border-color: var(--gold); background: var(--bg-3); }
.log-step:active { transform: scale(0.94); }
.log-count {
  font-family: var(--serif);
  font-size: 2.6rem;
  color: var(--ink);
  min-width: 72px; text-align: center;
}

/* Commit and review */
.commit-set .commit-line {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
}
.commit-lead {
  flex: 0 0 56px;
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold);
  font-size: 1rem;
}
.commit-line .input { flex: 1; min-width: 0; }
.commit-sentence {
  font-family: var(--serif);
  font-size: 1.3rem; line-height: 1.4;
  color: var(--ink);
}
.commit-target { color: var(--ink-mute); font-size: 0.9rem; margin-top: 8px; }
.commit-outcome { margin-top: 14px; }
.commit-reflection {
  color: var(--ink-soft);
  font-style: italic;
  margin-top: 12px;
  padding-left: 14px;
  border-left: 2px solid var(--line);
}

/* Review buttons: three sober choices, gold when chosen. No red on Missed. */
.review-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.review-opt {
  flex: 1; min-width: 92px; min-height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
  background: var(--bg-2);
  color: var(--ink-soft);
  font-weight: 600; font-size: 0.92rem;
  transition: all var(--t-fast) var(--ease);
}
.review-opt:hover { border-color: var(--line); color: var(--ink); }
.review-opt.is-active {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  color: #20180a; border-color: transparent;
  box-shadow: 0 4px 14px -6px rgba(201,165,92,0.7);
}

/* This week: totals + grand + calm lines */
.wk-totals {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-bottom: 18px;
}
.wk-total {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.wk-total__n { font-family: var(--serif); font-size: 1.8rem; color: var(--ink); line-height: 1; }
.wk-total__k { font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ink-mute); text-align: center; }
.wk-grand {
  display: flex; align-items: baseline; gap: 10px;
  padding-top: 16px; border-top: 1px solid var(--line-soft);
}
.wk-grand__n { font-family: var(--serif); font-size: 2.1rem; color: var(--gold); }
.wk-grand__k { color: var(--ink-mute); font-size: 0.92rem; }
.wk-line { color: var(--ink-soft); font-size: 0.95rem; margin-top: 10px; }
.wk-line--soft { color: var(--ink-mute); font-size: 0.88rem; margin-top: 4px; }

/* History: a calm per-week list, newest first */
.hist-list { display: flex; flex-direction: column; gap: 12px; }
.hist-week {
  background: var(--bg-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.hist-week__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.hist-week__range { font-family: var(--serif); font-size: 1.08rem; color: var(--ink); }
.hist-week__grand { color: var(--gold); font-size: 0.9rem; }
.hist-tots { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hist-tot {
  font-size: 0.8rem; color: var(--ink-soft);
  padding: 4px 10px; border-radius: 99px;
  border: 1px solid var(--line-soft); background: var(--bg-1);
}
.hist-commit {
  padding: 12px 14px; margin-bottom: 12px;
  background: var(--bg-1);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.hist-commit__text { color: var(--ink); font-family: var(--serif); font-size: 1.02rem; line-height: 1.4; }
.hist-commit__outcome { margin-top: 8px; }
.hist-commit__refl { color: var(--ink-soft); font-style: italic; font-size: 0.92rem; margin-top: 8px; }
.hist-notes { margin-top: 4px; }
.hist-notes__label {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.hist-note { color: var(--ink-soft); font-size: 0.9rem; margin-top: 4px; }
.hist-note__type { color: var(--gold); font-size: 0.78rem; letter-spacing: 0.02em; }

@media (max-width: 640px) {
  .ql-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ql-tile { min-height: 68px; padding: 14px 16px; }
  .wk-totals { grid-template-columns: 1fr 1fr; }
  .commit-sentence { font-size: 1.16rem; }
  .commit-lead { flex-basis: 48px; font-size: 0.94rem; }
  .review-opt { min-width: 0; }
}

/* ============================================================
   RUN 4: Operator Status + identity reflection
   Quiet, dark, gold. Rank is typography, never a badge. No bars
   that scream, no red, no percentages.
   ============================================================ */

/* --- Dashboard rank line + latest statement --- */
.op-line { margin-top: 14px; }
.op-rank {
  display: inline-flex; align-items: baseline; gap: 12px;
  padding: 8px 16px;
  background: var(--bg-1);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.op-rank:hover { border-color: var(--gold-deep); background: var(--bg-2); }
.op-rank__label {
  font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.op-rank__name {
  font-family: var(--serif); font-size: 1.04rem; letter-spacing: 0.04em;
  color: var(--gold); font-weight: 500;
}
.op-rank__more {
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
}
.op-statement {
  margin-top: 12px; max-width: 540px;
  font-family: var(--serif); font-style: italic;
  font-size: 1rem; line-height: 1.5; color: var(--ink-soft);
}

/* --- Rank panel --- */
.rank-modal { max-width: 520px; text-align: left; }
/* Go 1 B3: the rank list can be tall (four ranks, several criteria each). Cap the
   modal to the viewport and scroll inside it, with the close button pinned to the
   top so it is always reachable on a short or 390px screen. */
.rank-modal { max-height: calc(100dvh - 48px); overflow-y: auto; }
.rank-modal__bar { position: sticky; top: 0; height: 0; z-index: 3; }
.rank-modal__bar .rec-close { top: 0; right: 0; }
.rank-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.rank-row {
  padding: 14px 16px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
  opacity: 0.72;
  transition: opacity 0.2s ease;
}
.rank-row.is-reached { opacity: 1; }
.rank-row.is-current {
  opacity: 1;
  border-color: var(--gold-deep);
  background: var(--bg-2);
  box-shadow: inset 0 0 0 1px rgba(201,165,92,0.18);
}
.rank-row__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.rank-row__name {
  font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.06em;
  color: var(--ink);
}
.rank-row.is-current .rank-row__name { color: var(--gold); }
.rank-row__here {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold);
  padding: 3px 9px; border: 1px solid var(--gold-deep); border-radius: 99px;
}
.rank-row__done {
  font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-faint);
}
.rank-crit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rank-crit li {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-size: 0.9rem; color: var(--ink-mute);
}
.rank-crit li.is-met { color: var(--ink-soft); }
.rank-tick {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex-shrink: 0; color: var(--gold);
}
.rank-foot {
  margin-top: 20px;
  font-family: var(--sans); font-size: 0.84rem; line-height: 1.5;
  color: var(--ink-faint);
}

/* --- Identity reflection card --- */
.reflect-modal { max-width: 480px; text-align: left; }
.reflect-stem {
  margin-top: 6px;
  font-family: var(--serif); font-style: italic; font-size: 1.18rem;
  color: var(--gold);
}
.reflect-input {
  width: 100%; resize: vertical; min-height: 84px;
  font-family: var(--serif); font-size: 1.02rem; line-height: 1.5;
}
.reflect-note {
  margin-top: 14px;
  font-family: var(--sans); font-size: 0.82rem; color: var(--ink-faint);
}

/* --- Promotion moment --- */
.promo-modal { max-width: 440px; text-align: center; }
.promo-eyebrow {
  font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-faint);
}
.promo-rank {
  margin-top: 10px;
  font-family: var(--serif); font-size: 2.4rem; letter-spacing: 0.06em;
  color: var(--gold); font-weight: 500;
}
.promo-line {
  margin-top: 12px;
  font-family: var(--sans); font-size: 0.96rem; line-height: 1.55;
  color: var(--ink-soft);
}

/* --- Your statements (The Log) --- */
.stmt-list { display: flex; flex-direction: column; gap: 14px; }
.stmt-item {
  padding: 16px 18px;
  background: var(--bg-1);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.stmt-text {
  font-family: var(--serif); font-style: italic; font-size: 1.06rem;
  line-height: 1.5; color: var(--ink);
}
.stmt-meta {
  margin-top: 10px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.stmt-when { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-faint); }
.stmt-ref {
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold);
}

/* --- Admin rank cell --- */
.adm-rank {
  font-family: var(--serif); font-size: 0.94rem; letter-spacing: 0.04em;
  color: var(--gold);
}

@media (max-width: 640px) {
  .promo-rank { font-size: 2rem; }
  .op-rank { width: 100%; justify-content: space-between; }
}

/* ============================================================
   RUN 5: Today section (top of the dashboard) + PWA niceties
   A compass, not a dashboard: one greeting, the rank line, ONE main
   action, three quiet context lines. Dark/gold, mobile-first.
   ============================================================ */

.today__greet { margin-top: 12px; }

/* The single main action: the largest, warmest element on the page. */
.today-main { margin-top: 22px; }

.tmain {
  position: relative;
  display: block;
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(201,165,92,0.10) 0%, rgba(201,165,92,0.03) 100%),
    var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 56px 22px 24px;
  transition: border-color 0.22s ease, transform 0.22s ease, background 0.22s ease;
}
.tmain:hover {
  border-color: rgba(201,165,92,0.42);
  transform: translateY(-1px);
}
.tmain__eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.tmain__label {
  display: block;
  font-family: var(--serif);
  font-size: 1.62rem;
  line-height: 1.15;
  color: var(--ink);
}
.tmain__sub {
  display: block;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.tmain__go {
  position: absolute;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--gold);
  transition: transform 0.22s ease;
}
.tmain:hover .tmain__go { transform: translateY(-50%) translateX(4px); }

/* Three quiet context lines. Small, one each, only if relevant. */
.today-context {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tctx {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 2px;
  text-decoration: none;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 0.95rem;
  transition: color 0.18s ease;
}
.tctx:hover { color: var(--ink); }
.tctx__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-faint);
  flex: 0 0 auto;
}
.tctx__dot.is-gold {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold-glow);
}
.tctx__text { line-height: 1.3; }

/* Skeleton-first placeholders (a calm shimmer, no spinner jank). */
.tmain--skel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
}
.skel {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg,
    var(--bg-2) 0%, var(--bg-3) 50%, var(--bg-2) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
.skel--line { height: 13px; }
.skel--lg { height: 26px; }
.today-context .skel { margin: 6px 0; }
/* Go 2: extra skeleton shapes, same calm shimmer in the dark/gold line. */
.skel--pill { height: 22px; width: 92px; border-radius: 999px; }
.skel--bar { height: 8px; border-radius: 999px; }
.skel--icon { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px; }
.skel--block { height: 56px; }
/* A card-shaped skeleton that reuses the real card frame so the layout keeps its
   shape while the data loads (no spinner jank, no reflow when content arrives). */
.skel-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  pointer-events: none;
}
.skel-card__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; }
.skel-stack { display: flex; flex-direction: column; gap: 18px; }
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skel, .adm-skeleton { animation: none; }
}

/* Quiet "Add to Home Screen" footer line (no banner, no popup). Hidden by
   default; shown only on a touch device, and never once already installed. */
.pwa-hint {
  display: none;
  margin-top: 32px;
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--ink-faint);
  text-align: center;
}
@media (hover: none) and (pointer: coarse) {
  .pwa-hint { display: block; }
}
@media (display-mode: standalone) {
  .pwa-hint { display: none !important; }
}

@media (max-width: 640px) {
  .tmain { padding: 20px 48px 20px 20px; }
  .tmain__label { font-size: 1.42rem; }
  .tmain__go { right: 18px; }
}

/* ============================================================
   Run 6: Onboarding "Start here" path (dashboard, new students)
   A calm card above Today. Ordered steps with done / now / next
   state, each a quiet link. Phases out from data; can be hidden.
   ============================================================ */
.onb {
  margin: 22px 0 6px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.onb__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.onb__hide {
  background: none; border: none; cursor: pointer;
  font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--ink-faint); padding: 4px 6px; border-radius: 6px;
  transition: color var(--t);
}
.onb__hide:hover { color: var(--ink-mute); }
.onb__lead {
  margin: 10px 0 16px; max-width: 520px;
  font-size: 0.96rem; color: var(--ink-soft); line-height: 1.5;
}
.onb__steps { display: flex; flex-direction: column; gap: 8px; }
.onb-step {
  display: flex; align-items: center; gap: 13px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  border: 1px solid transparent; background: transparent;
  text-decoration: none; color: var(--ink-soft);
  transition: background var(--t), border-color var(--t), color var(--t);
}
.onb-step:hover { background: rgba(255,255,255,0.02); }
.onb-step__mark {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 99px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-soft); color: var(--ink-mute);
}
.onb-step__num { font-family: var(--sans); font-size: 0.8rem; font-weight: 600; }
.onb-step__label { flex: 1; font-size: 1rem; }
.onb-step__go { color: var(--gold); font-size: 1.1rem; }

/* done: quietly checked, recedes */
.onb-step.is-done { color: var(--ink-mute); }
.onb-step.is-done .onb-step__mark { color: var(--gold); border-color: var(--line); }
.onb-step.is-done .onb-step__label { text-decoration: none; }

/* now: the single live step, gently lifted in gold */
.onb-step.is-now {
  background: var(--gold-glow);
  border-color: var(--line);
  color: var(--ink);
}
.onb-step.is-now .onb-step__mark {
  color: var(--gold); border-color: var(--gold);
  background: rgba(201,165,92,0.08);
}
.onb-step.is-now .onb-step__label { font-weight: 600; }

/* next: dimmed, waiting its turn */
.onb-step.is-next { color: var(--ink-faint); }
.onb-step.is-next .onb-step__mark { color: var(--ink-faint); }

/* ============================================================
   Run 6: Operator Dossier action (dashboard, OPERATOR+ only)
   A quiet earned-record card under the blueprint cards.
   ============================================================ */
.dossier {
  margin: 26px 0 4px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--bg-2), var(--bg-1));
}
.dossier__card {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.dossier__text { flex: 1; min-width: 220px; }
.dossier__title {
  font-family: var(--serif); font-weight: 400;
  font-size: 1.5rem; color: var(--ink); margin: 0 0 6px;
}
.dossier__sub { font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5; max-width: 460px; }
.dossier__card .btn { flex: 0 0 auto; }

@media (max-width: 640px) {
  .onb { padding: 20px; }
  .dossier { padding: 20px; }
  .dossier__card .btn { width: 100%; }
}

/* ============================================================
   Golf 1: route map ("landkaart") for the blueprint overviews,
   the blueprint hub and the drills overview. One reusable
   component (js/route-map.js, TAC.route). All motion uses the
   golf 0 tokens from css/motion.css; transform/opacity only.
   ============================================================ */
:root {
  --route-line: #26262b;        /* the vertical path line */
  --route-card-border: #2a2a30; /* continue-card border */
  --route-locked-ring: #34343a; /* hollow locked dot ring */
  --route-dim: #54545a;         /* locked text */
}

/* --- Section head: gold label + quiet meta --- */
.route-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.route-head__label {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.route-head__meta {
  font-size: 0.82rem;
  color: var(--ink-mute);
  white-space: nowrap;
}

/* --- Continue card --- */
.route-cont {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--route-card-border);
  border-radius: var(--radius);
  padding: 18px 72px 18px 20px;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-cont__tag {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(201, 165, 92, 0.66);
  margin-bottom: 8px;
}
.route-cont__title {
  display: block;
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.25;
  color: var(--ink);
}
.route-cont__sub {
  display: block;
  margin-top: 5px;
  font-size: 0.85rem;
  color: var(--ink-mute);
}
.route-cont__btn {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: #20180a;
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  transition: transform var(--dur-micro, 160ms) var(--ease-settle, ease);
}
.route-cont:active {
  transform: scale(0.97);
  transition: transform var(--dur-micro, 160ms) var(--ease-settle, ease);
}
.route-cont:active .route-cont__btn { transform: translateY(-50%) scale(0.92); }
/* Hover only where hover exists; an opacity-only ring so nothing repaints heavy. */
.route-cont::after {
  content: "";
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(201, 165, 92, 0.42);
  border-radius: var(--radius);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-micro, 160ms) var(--ease-settle, ease);
}
@media (hover: hover) {
  .route-cont:hover::after { opacity: 1; }
}

/* --- "The path" label --- */
.route-pathlabel {
  margin: 26px 0 10px;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* --- The route: vertical line + station rows --- */
.route { position: relative; }
.route__line {
  position: absolute;
  left: 13px;
  top: 10px;
  bottom: 10px;
  width: 1px;
  background: var(--route-line);
  transform-origin: top;
  transition: transform var(--dur-draw, 420ms) var(--ease-settle, ease);
}
.route__line.is-undrawn { transform: scaleY(0); }

.route-item { position: relative; }
.route-item__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 52px;
  padding: 13px 2px 13px 0;
  background: transparent;
  border: none;
  text-align: left;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-item__row::before {
  content: "";
  position: absolute;
  inset: 2px -8px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-micro, 160ms) var(--ease-settle, ease);
}
@media (hover: hover) {
  .route-item:not(.route-item--locked) .route-item__row:hover::before { opacity: 1; }
}
.route-item:not(.route-item--locked) .route-item__row:active {
  transform: scale(0.97);
  transition: transform var(--dur-micro, 160ms) var(--ease-settle, ease);
}
.route-item--locked .route-item__row { cursor: default; }

/* Marker dots sit on the line (z-index above it, opaque centre masks it). */
.route-item__dot {
  position: relative;
  z-index: 1;
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-0);
  border: 1px solid var(--line);
  color: #20180a;
}
.route-item--done .route-item__dot {
  background: var(--gold);
  border-color: transparent;
}
.route-item--current .route-item__dot {
  background: var(--bg-0);
  border: 1px solid var(--gold);
  box-shadow: 0 0 16px var(--gold-glow);
}
.route-item--current .route-item__dot::after {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.route-item--locked .route-item__dot {
  background: var(--bg-0);
  border: 1.5px solid var(--route-locked-ring);
}

.route-item__num {
  flex: 0 0 24px;
  font-variant-numeric: tabular-nums;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: rgba(201, 165, 92, 0.62);
}
.route-item__title {
  flex: 1;
  min-width: 0;
  font-family: var(--serif);
  font-size: 1.02rem;
  line-height: 1.3;
  color: var(--ink-soft);
}
.route-item--current .route-item__title { color: var(--ink); }
.route-item--locked .route-item__num,
.route-item--locked .route-item__title { color: var(--route-dim); }

.route-item__chev {
  flex: 0 0 auto;
  color: var(--ink-mute);
  font-size: 0.85rem;
  transition: transform var(--dur-micro, 160ms) var(--ease-settle, ease);
}
.route-item.is-open .route-item__chev--down { transform: rotate(180deg); }

/* Quiet "not yet" feedback on a locked row: one small nudge, never a shake. */
@keyframes route-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}
.is-nudge { animation: route-nudge calc(var(--dur-micro, 160ms) * 2) var(--ease-settle, ease); }

/* --- Expand panel: the golf 0 grid technique, never height --- */
.route-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-exit, 200ms) var(--ease-settle, ease);
}
.route-item.is-open .route-panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-enter, 280ms) var(--ease-settle, ease);
}
.route-panel > div { overflow: hidden; }
.route-panel__inner { padding: 0 0 14px 41px; }

/* Children of an opened panel come in with their own light stagger. */
.route-panel__item {
  opacity: 0;
  transform: translateY(var(--motion-distance, 8px));
}
.route-item.is-open .route-panel__item.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-enter, 280ms) var(--ease-arrive, ease),
    transform var(--dur-enter, 280ms) var(--ease-arrive, ease);
}

/* --- Lesson rows inside a phase --- */
.route-lesson {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 9px 2px;
  background: transparent;
  border: none;
  text-align: left;
  font-size: 0.92rem;
  color: var(--ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.route-lesson:active {
  transform: scale(0.97);
  transition: transform var(--dur-micro, 160ms) var(--ease-settle, ease);
}
.route-lesson__mark {
  width: 18px;
  flex: 0 0 18px;
  display: grid;
  place-items: center;
  color: var(--gold);
}
.route-lesson__title { flex: 1; min-width: 0; line-height: 1.35; }
.route-lesson--current { color: var(--gold-bright); }
.route-lesson--locked { color: var(--route-dim); cursor: default; }
.route-lesson--locked .route-lesson__mark { color: var(--route-dim); }
.route-lesson--locked:active { transform: none; }

/* --- Standalone route marker (blueprint hub cards) --- */
.route-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.route-dot--done { background: var(--gold); }
.route-dot--current {
  background: var(--bg-0);
  border: 1px solid var(--gold);
  box-shadow: 0 0 10px var(--gold-glow);
}
.route-dot--locked {
  background: var(--bg-0);
  border: 1.5px solid var(--route-locked-ring);
}

/* Hub cards (golf 1): marker + label stay on one quiet row, every width. */
.bp-card__progress--route {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* The check inside a filled gold dot is dark (the shared .ic helper would
   paint it gold-on-gold). */
.route-item--done .route-item__dot .ic { color: #20180a; }