/*
 * TVIAH Auto-Coaching, front-end visual system.
 * Author: Dario Esposito (Web Division), built to Theo Marchetti's token + component spec
 *   (/docs/superpowers/specs/2026-06-19-tviah-autocoaching-visual.md).
 *
 * Workbook, not dashboard. Warm-paper editorial. Clay (--ac-accent) is sacred and rare, 
 * it marks the LIVE edge only. Lock/complete states are quieter than the accent.
 *
 * Scope discipline: EVERYTHING lives under .tviah-ac with .ac-* classes. State via
 * is-/has- modifiers. State is NEVER signalled by colour alone (glyph + text always).
 *
 * Build order mirrors Theo's: tokens → buttons/badges/progress → catalog cards →
 * player shell + reflection forms → dropzone → paywall + dossier + certificate →
 * responsive + a11y + print → ADMIN BUILDER placeholder (Phase B2, not styled here).
 */

/* ============================================================================
   TOKENS  (Theo's full block, do not hardcode values defined here)
   ========================================================================== */
.tviah-ac {
  --ac-paper: var(--paper, #F4F0E8);
  --ac-paper-deep: var(--paper-deep, #ECE6DA);
  --ac-ink: var(--ink, #1B1A16);
  --ac-ink-soft: var(--ink-soft, #46423A);
  --ac-muted: var(--muted, #8B8576);
  --ac-line: var(--line, rgba(27,26,22,.16));
  --ac-line-soft: var(--line-soft, rgba(27,26,22,.08));
  --ac-accent: var(--accent, #9E4226);
  --ac-accent-ink: var(--accent-ink, #7E3219);
  --ac-serif: var(--serif, "Fraunces", Georgia, serif);
  --ac-sans: var(--sans, "Hanken Grotesk", -apple-system, sans-serif);
  --ac-step--1: var(--step--1, clamp(0.82rem,0.78rem + 0.2vw,0.9rem));
  --ac-step-0: var(--step-0, clamp(1rem,0.95rem + 0.25vw,1.125rem));
  --ac-step-1: var(--step-1, clamp(1.2rem,1.1rem + 0.5vw,1.45rem));
  --ac-step-2: var(--step-2, clamp(1.6rem,1.35rem + 1.1vw,2.3rem));
  --ac-step-3: var(--step-3, clamp(2.2rem,1.7rem + 2.4vw,3.6rem));
  --ac-step-4: var(--step-4, clamp(3rem,2rem + 4.6vw,6.5rem));
  --ac-lane: var(--ac-accent);
  --ac-complete: #55634F;
  --ac-complete-bg: color-mix(in srgb,#55634F 12%,var(--ac-paper));
  --ac-locked-ink: var(--ac-muted);
  --ac-locked-bg: color-mix(in srgb,var(--ac-ink) 4%,var(--ac-paper));
  --ac-current-bg: var(--ac-paper-deep);
  --ac-ok: #55634F; --ac-err: var(--ac-accent);
  --ac-video: #6E5A3E; --ac-written: #46423A; --ac-application: var(--ac-accent); --ac-voice: #4A5A63;
  --ac-free: #55634F; --ac-paid: var(--ac-accent-ink);
  --ac-radius-xs: 2px; --ac-radius-sm: 3px; --ac-radius-pill: 999px;
  --ac-elev-0: none; --ac-elev-1: 0 1px 0 var(--ac-line-soft);
  --ac-elev-2: 0 12px 34px rgba(27,26,22,.10); --ac-elev-focus: 0 0 0 2px var(--ac-accent);
  --ac-sp-1:.4rem; --ac-sp-2:.75rem; --ac-sp-3:1rem; --ac-sp-4:1.5rem; --ac-sp-5:2.25rem; --ac-sp-6:clamp(2.5rem,6vw,4rem);
  --ac-ease: cubic-bezier(0.2,0.7,0.2,1); --ac-dur-fast:.2s; --ac-dur:.35s; --ac-dur-slow:.6s;
  --ac-sidebar-w: 18rem; --ac-content-maxw: 46rem;
}
.tviah-ac[data-archetype="blueprint"], .tviah-ac[data-archetype="B"] { --ac-lane:#3E5A6E; }
.tviah-ac[data-archetype="flame"],     .tviah-ac[data-archetype="F"] { --ac-lane:#9E4226; }
.tviah-ac[data-archetype="well"],       .tviah-ac[data-archetype="W"] { --ac-lane:#4F6356; }
.tviah-ac[data-archetype="ghost"],      .tviah-ac[data-archetype="G"] { --ac-lane:#6A5A7A; }
.tviah-ac[data-archetype="witness"],    .tviah-ac[data-archetype="T"] { --ac-lane:#7A5A4A; }
.tviah-ac.is-admin { --ac-paper:#FBFAF6; --ac-content-maxw:none; }
@media (prefers-reduced-motion: reduce){ .tviah-ac *{transition:none!important;animation:none!important;} }

/* ============================================================================
   BASE / RESET (scoped)
   ========================================================================== */
.tviah-ac {
  color: var(--ac-ink);
  background: var(--ac-paper);
  font-family: var(--ac-sans);
  font-size: var(--ac-step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.tviah-ac *, .tviah-ac *::before, .tviah-ac *::after { box-sizing: border-box; }
.tviah-ac h1, .tviah-ac h2, .tviah-ac h3, .tviah-ac h4 {
  font-family: var(--ac-serif);
  font-weight: 350;
  line-height: 1.15;
  margin: 0;
}
.tviah-ac p { margin: 0 0 var(--ac-sp-3); }
.tviah-ac a { color: var(--ac-accent-ink); text-decoration: none; }
.tviah-ac a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* The generic link rule above out-specifies every .ac-btn-* class, so any
   button rendered as an <a> came out accent-on-ink and unreadable. Buttons
   carry their own colour; <button> elements were unaffected, which is why
   only the link-shaped ones looked wrong. */
.tviah-ac a.ac-btn-primary { color: var(--ac-paper); }
.tviah-ac a.ac-btn-primary:hover { color: var(--ac-paper); text-decoration: none; }
.tviah-ac a.ac-btn-ghost,
.tviah-ac a.ac-btn-secondary { color: var(--ac-ink); }
.tviah-ac a.ac-btn-ghost:hover,
.tviah-ac a.ac-btn-secondary:hover { text-decoration: none; }

/* Eyebrow / label / chip type role */
.ac-eyebrow,
.ac-field-label,
.ac-curric-group {
  font-family: var(--ac-sans);
  font-size: var(--ac-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--ac-muted);
  margin: 0 0 var(--ac-sp-2);
}

/* Universal focus ring, every interactive element, no exceptions. */
.tviah-ac :focus-visible {
  outline: 2px solid var(--ac-accent);
  outline-offset: 3px;
  border-radius: var(--ac-radius-xs);
}
/* Screen-reader-only helper for non-visual labels where needed. */
.ac-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================================================
   BUTTONS
   ========================================================================== */
.ac-btn-primary,
.ac-btn-secondary,
.ac-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--ac-sans);
  font-size: var(--ac-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .85em 1.5em;
  border-radius: var(--ac-radius-xs);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ac-dur-fast) var(--ac-ease),
              color var(--ac-dur-fast) var(--ac-ease),
              border-color var(--ac-dur-fast) var(--ac-ease),
              transform var(--ac-dur-fast) var(--ac-ease);
}
.ac-btn-primary:hover, .ac-btn-secondary:hover, .ac-btn-ghost:hover { text-decoration: none; }

.ac-btn-primary {
  background: var(--ac-ink);
  color: var(--ac-paper);
  border: 1px solid var(--ac-ink);
}
.ac-btn-primary:hover { background: var(--ac-accent); border-color: var(--ac-accent); }
.ac-btn-primary:active { transform: translateY(1px); }
.ac-btn-primary:disabled,
.ac-btn-primary[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  background: var(--ac-ink);
  border-color: var(--ac-ink);
}
.ac-btn-primary.is-saving { opacity: .7; cursor: progress; }
.ac-btn-primary.is-saved { background: var(--ac-complete); border-color: var(--ac-complete); }

.ac-btn-secondary {
  background: transparent;
  color: var(--ac-ink);
  border: 1px solid var(--ac-ink);
}
.ac-btn-secondary:hover { background: var(--ac-ink); color: var(--ac-paper); }

.ac-btn-ghost {
  background: transparent;
  color: var(--ac-ink-soft);
  border: 1px solid var(--ac-line);
}
.ac-btn-ghost:hover { border-color: var(--ac-ink); color: var(--ac-ink); }

/* ============================================================================
   BADGES + DELIVERY CHIPS  (outlined, never filled; label is non-negotiable)
   ========================================================================== */
.ac-badge, .ac-chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: var(--ac-sans);
  font-size: var(--ac-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .3em .8em;
  border-radius: var(--ac-radius-pill);
  border: 1px solid currentColor;
  line-height: 1;
}
.ac-chip .ac-chip-glyph, .ac-badge .ac-badge-glyph { font-size: 1.05em; line-height: 1; }

/* Access badges */
.ac-badge.is-free { color: var(--ac-free); border-color: color-mix(in srgb,var(--ac-free) 45%,transparent); }
.ac-badge.is-paid { color: var(--ac-paid); border-color: color-mix(in srgb,var(--ac-paid) 45%,transparent); }
.ac-badge.is-locked { color: var(--ac-locked-ink); border-color: color-mix(in srgb,var(--ac-locked-ink) 45%,transparent); }

/* Delivery chips, colour pulled per type, but the LABEL carries the meaning. */
.ac-chip[data-type="video"]       { color: var(--ac-video);       border-color: color-mix(in srgb,var(--ac-video) 45%,transparent); }
.ac-chip[data-type="written"]     { color: var(--ac-written);     border-color: color-mix(in srgb,var(--ac-written) 45%,transparent); }
.ac-chip[data-type="reflection"]  { color: var(--ac-written);     border-color: color-mix(in srgb,var(--ac-written) 45%,transparent); }
.ac-chip[data-type="application"] { color: var(--ac-application); border-color: color-mix(in srgb,var(--ac-application) 45%,transparent); }
.ac-chip[data-type="voice"]       { color: var(--ac-voice);       border-color: color-mix(in srgb,var(--ac-voice) 45%,transparent); }

/* ============================================================================
   PROGRESS  (always paired with text; role=progressbar in markup)
   ========================================================================== */
.ac-progress {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--ac-line-soft);
  border-radius: var(--ac-radius-pill);
  overflow: hidden;
}
.ac-progress-bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--ac-lane);
  border-radius: inherit;
  transition: width var(--ac-dur) var(--ac-ease);
}
.ac-progress-text {
  display: block;
  margin-top: var(--ac-sp-1);
  font-size: var(--ac-step--1);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ac-ink-soft);
}

/* ============================================================================
   CATALOG
   ========================================================================== */
.ac-catalog {
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--ac-sp-6) var(--ac-sp-4);
}
.ac-catalog-head { margin-bottom: var(--ac-sp-5); max-width: 42rem; }
.ac-catalog-head h1 { font-size: var(--ac-step-3); }
.ac-catalog-head .ac-eyebrow { color: var(--ac-accent-ink); }
.ac-catalog-intro { color: var(--ac-ink-soft); font-size: var(--ac-step-1); max-width: 46ch; }

/* Continue-where-you-left-off banner */
.ac-resume {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ac-sp-3);
  padding: var(--ac-sp-4);
  margin-bottom: var(--ac-sp-5);
  background: var(--ac-paper-deep);
  border: 1px solid var(--ac-line-soft);
  border-left: 3px solid var(--ac-lane);
  border-radius: var(--ac-radius-sm);
}
.ac-resume-title { font-family: var(--ac-serif); font-size: var(--ac-step-1); }

/* Seam grid, 1px gap on the line colour gives the archival "ledger" feel. */
.ac-catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--ac-line-soft);
  border: 1px solid var(--ac-line-soft);
}
@media (min-width: 40rem) {
  .ac-catalog-grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
}

.ac-card {
  display: flex;
  flex-direction: column;
  gap: var(--ac-sp-2);
  background: var(--ac-paper);
  border-top: 3px solid var(--ac-lane);
  padding: var(--ac-sp-4);
  transition: background var(--ac-dur-fast) var(--ac-ease);
}
.ac-card:hover { background: var(--ac-paper-deep); } /* no transform, keep still */
.ac-card-meta { display: flex; align-items: center; gap: var(--ac-sp-2); flex-wrap: wrap; }
.ac-card-title { font-size: var(--ac-step-2); }
.ac-card-subtitle { color: var(--ac-ink-soft); font-size: var(--ac-step-0); margin: 0; }
.ac-card-cta { margin-top: auto; padding-top: var(--ac-sp-3); }
.ac-card-progress { margin-top: var(--ac-sp-2); }

/* Free */
.ac-card.is-free { --ac-lane: var(--ac-free); }
/* Paid */
.ac-card.is-paid { --ac-lane: var(--ac-paid); }
.ac-price { font-family: var(--ac-serif); font-size: var(--ac-step-2); color: var(--ac-ink); }
.ac-price-cur { font-size: .6em; vertical-align: .5em; color: var(--ac-muted); }

/* Active (in progress) */
.ac-card.is-active .ac-card-progress { display: block; }

/* Complete */
.ac-card.is-complete { background: var(--ac-complete-bg); }
.ac-card.is-complete:hover { background: var(--ac-complete-bg); }
.ac-card.is-complete .ac-card-title { color: var(--ac-ink-soft); }
.ac-card-complete-mark {
  display: inline-flex; align-items: center; gap: .35em;
  color: var(--ac-complete); font-size: var(--ac-step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
}
.ac-card-dossier-link { font-size: var(--ac-step--1); font-weight: 600; letter-spacing: .04em; }

/* Locked */
.ac-card.is-locked {
  background: var(--ac-locked-bg);
  border-top-color: var(--ac-locked-ink);
  opacity: .72;
}
.ac-card.is-locked:hover { background: var(--ac-locked-bg); }
.ac-card-locked-note {
  display: flex; align-items: flex-start; gap: .5em;
  color: var(--ac-locked-ink); font-size: var(--ac-step--1);
  font-weight: 600; letter-spacing: .04em; text-transform: none;
}

/* ============================================================================
   PLAYER SHELL  (sidebar + pane)
   ========================================================================== */
.ac-player {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--ac-sp-6);
  max-width: 74rem;
  margin: 0 auto;
  padding: var(--ac-sp-5) var(--ac-sp-4);
}
@media (min-width: 55rem) {
  .ac-player { grid-template-columns: var(--ac-sidebar-w) minmax(0, 1fr); }
}

/* ── Sidebar / curriculum ───────────────────────────────────────────── */
.ac-sidebar { position: relative; }
@media (min-width: 55rem) {
  .ac-sidebar { position: sticky; top: 2.5rem; align-self: start; }
}
.ac-sidebar-head { margin-bottom: var(--ac-sp-4); }
.ac-sidebar-title { font-size: var(--ac-step-2); margin-bottom: var(--ac-sp-3); }

/* Mobile collapse toggle (Theme .nav-toggle pill DNA) */
.ac-curric-toggle {
  display: inline-flex; align-items: center; gap: .5em;
  width: 100%; justify-content: space-between;
  font-family: var(--ac-sans); font-size: var(--ac-step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .75em 1em; margin-bottom: var(--ac-sp-3);
  background: var(--ac-paper-deep); color: var(--ac-ink);
  border: 1px solid var(--ac-line); border-radius: var(--ac-radius-pill);
  cursor: pointer;
}
.ac-curric-toggle .ac-curric-toggle-icon { transition: transform var(--ac-dur-fast) var(--ac-ease); }
.ac-curric-toggle[aria-expanded="true"] .ac-curric-toggle-icon { transform: rotate(180deg); }
@media (min-width: 55rem) { .ac-curric-toggle { display: none; } }

/* The collapsible curriculum region. On desktop always open. */
.ac-curriculum {
  list-style: none; margin: 0; padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--ac-dur) var(--ac-ease);
}
.ac-curriculum.is-open { max-height: 200vh; }
@media (min-width: 55rem) { .ac-curriculum { max-height: none; } }

.ac-curric-group {
  margin: var(--ac-sp-4) 0 var(--ac-sp-2);
  padding-top: var(--ac-sp-3);
  border-top: 1px solid var(--ac-line-soft);
}
.ac-curric-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ac-lesson-link {
  display: grid;
  grid-template-columns: 1.4rem 1.6rem 1fr;
  align-items: baseline;
  gap: .5rem;
  padding: var(--ac-sp-2) var(--ac-sp-2) var(--ac-sp-2) calc(var(--ac-sp-2) + 3px);
  border-left: 3px solid transparent;
  color: var(--ac-ink);
  text-decoration: none;
  transition: background var(--ac-dur-fast) var(--ac-ease);
}
.ac-lesson-link:hover { background: var(--ac-paper-deep); text-decoration: none; }
.ac-lesson-status { font-size: var(--ac-step--1); line-height: 1.6; text-align: center; }
.ac-lesson-index {
  font-family: var(--ac-serif); font-size: var(--ac-step-0); font-weight: 360;
  color: var(--ac-muted); font-variant-numeric: tabular-nums;
}
.ac-lesson-name { font-family: var(--ac-serif); font-size: var(--ac-step-0); line-height: 1.3; }

/* Current */
.ac-lesson-link.is-current { background: var(--ac-current-bg); border-left-color: var(--ac-lane); }
.ac-lesson-link.is-current .ac-lesson-index { color: var(--ac-accent); }

/* Complete */
.ac-lesson-link.is-complete .ac-lesson-status { color: var(--ac-complete); }
.ac-lesson-link.is-complete .ac-lesson-name { color: var(--ac-ink-soft); }

/* Locked (rendered as a non-link <span>) */
.ac-lesson-link.is-locked { color: var(--ac-locked-ink); cursor: default; }
.ac-lesson-link.is-locked:hover { background: transparent; }
.ac-lesson-link.is-locked .ac-lesson-status,
.ac-lesson-link.is-locked .ac-lesson-index,
.ac-lesson-link.is-locked .ac-lesson-name { color: var(--ac-locked-ink); }

/* ── Pane ───────────────────────────────────────────────────────────── */
.ac-pane { max-width: var(--ac-content-maxw); }
.ac-pane-head { display: flex; align-items: center; gap: var(--ac-sp-3); flex-wrap: wrap; margin-bottom: var(--ac-sp-3); }
.ac-lesson-eyebrow { color: var(--ac-muted); margin: 0; }
.ac-lesson-heading { font-size: var(--ac-step-2); margin-bottom: var(--ac-sp-4); }

/* Video frame */
.ac-video-title { font-family: var(--ac-serif); font-size: var(--ac-step-1); margin-bottom: var(--ac-sp-2); }
.ac-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ac-ink);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-sm);
  overflow: hidden;
  margin-bottom: var(--ac-sp-4);
}
.ac-video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ac-ink); }
.ac-video-frame.is-missing {
  display: flex; align-items: center; justify-content: center;
  color: var(--ac-paper); text-align: center; padding: var(--ac-sp-4);
}
.ac-video-frame.is-missing .ac-video-missing-note { font-family: var(--ac-serif); font-size: var(--ac-step-0); opacity: .7; }

.ac-intro {
  font-family: var(--ac-serif);
  font-size: var(--ac-step-1);
  font-weight: 350;
  line-height: 1.45;
  color: var(--ac-ink-soft);
  max-width: 52ch;
  margin-bottom: var(--ac-sp-5);
}

/* ============================================================================
   REFLECTION FORM
   ========================================================================== */
.ac-reflect { margin-top: var(--ac-sp-4); }
.ac-field {
  padding-top: var(--ac-sp-5);
  margin-top: var(--ac-sp-5);
  border-top: 1px solid var(--ac-line-soft);
}
.ac-field:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ac-field-label {
  color: var(--ac-accent-ink);
  letter-spacing: .18em;
  margin-bottom: var(--ac-sp-2);
}
.ac-field-q {
  font-family: var(--ac-serif);
  font-size: var(--ac-step-1);
  font-weight: 350;
  line-height: 1.45;
  color: var(--ac-ink);
  margin-bottom: var(--ac-sp-3);
}
/* Ch8 statement-as-prose (no eyebrow-as-question) */
.ac-field-statement {
  font-family: var(--ac-serif);
  font-style: italic;
  font-size: var(--ac-step-1);
  line-height: 1.5;
  color: var(--ac-ink-soft);
  margin-bottom: var(--ac-sp-3);
}

/* Textarea */
.ac-textarea {
  display: block;
  width: 100%;
  min-height: 9rem;
  background: var(--ac-paper);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-xs);
  padding: var(--ac-sp-3);
  font-family: var(--ac-sans);
  font-size: var(--ac-step-0);
  line-height: 1.65;
  color: var(--ac-ink);
  resize: vertical;
  overflow: hidden; /* auto-grow JS manages height */
  transition: border-color var(--ac-dur-fast) var(--ac-ease), box-shadow var(--ac-dur-fast) var(--ac-ease);
}
.ac-textarea::placeholder { font-style: italic; color: var(--ac-muted); }
.ac-textarea:focus { outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-elev-focus); }

/* Multiselect (Ch3) */
.ac-multiselect { display: flex; flex-direction: column; gap: var(--ac-sp-2); }
.ac-checkopt {
  display: flex; align-items: flex-start; gap: var(--ac-sp-2);
  padding: var(--ac-sp-3);
  background: var(--ac-paper);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-sm);
  cursor: pointer;
  transition: border-color var(--ac-dur-fast) var(--ac-ease), background var(--ac-dur-fast) var(--ac-ease);
}
.ac-checkopt:hover { border-color: var(--ac-ink-soft); }
.ac-checkopt:has(input:checked) {
  border-color: var(--ac-accent);
  background: color-mix(in srgb, var(--ac-accent) 6%, var(--ac-paper));
}
.ac-checkopt input { margin-top: .25em; accent-color: var(--ac-accent); flex-shrink: 0; }
.ac-checkopt-label { font-size: var(--ac-step-0); line-height: 1.4; }
/* Fallback for browsers without :has, selected class set by JS */
.ac-checkopt.is-selected { border-color: var(--ac-accent); background: color-mix(in srgb, var(--ac-accent) 6%, var(--ac-paper)); }

/* Scale (Ch6) 1-10 */
.ac-scale { border: 0; padding: 0; margin: 0; }
.ac-scale-steps {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--ac-sp-1);
}
.ac-scale-step {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-sm);
  font-family: var(--ac-serif);
  font-size: var(--ac-step-0);
  color: var(--ac-ink-soft);
  cursor: pointer;
  transition: background var(--ac-dur-fast) var(--ac-ease), color var(--ac-dur-fast) var(--ac-ease), border-color var(--ac-dur-fast) var(--ac-ease);
}
.ac-scale-step input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-scale-step:hover { border-color: var(--ac-ink-soft); }
.ac-scale-step.is-selected,
.ac-scale-step:has(input:checked) {
  background: var(--ac-accent);
  border-color: var(--ac-accent);
  color: var(--ac-paper);
}
.ac-scale-step:has(input:focus-visible) { outline: 2px solid var(--ac-accent); outline-offset: 2px; }
.ac-scale-ends {
  display: flex; justify-content: space-between;
  margin-top: var(--ac-sp-2);
  font-size: var(--ac-step--1); color: var(--ac-muted);
}
/* Range slider fallback (shown only when JS unavailable / .no-js) */
.ac-scale-range { width: 100%; accent-color: var(--ac-accent); }

/* Saved read-only response */
.ac-field.is-saved .ac-response-read {
  background: var(--ac-paper-deep);
  border-left: 3px solid var(--ac-lane);
  border-radius: var(--ac-radius-xs);
  padding: var(--ac-sp-3);
  font-size: var(--ac-step-0);
  color: var(--ac-ink);
  white-space: pre-wrap;
}
.ac-field .ac-update-link {
  display: inline-block; margin-top: var(--ac-sp-2);
  font-size: var(--ac-step--1); font-weight: 600; letter-spacing: .04em;
  background: none; border: 0; color: var(--ac-accent-ink); cursor: pointer; padding: 0;
}

/* Per-field inline error */
.ac-field-error {
  display: none;
  margin-top: var(--ac-sp-2);
  color: var(--ac-err);
  font-size: var(--ac-step--1);
  font-weight: 600;
}
.ac-field.has-error .ac-field-error { display: flex; align-items: center; gap: .4em; }
.ac-field.has-error .ac-textarea { border-color: var(--ac-err); }

/* Form footer */
.ac-form-footer { margin-top: var(--ac-sp-5); display: flex; align-items: center; gap: var(--ac-sp-3); flex-wrap: wrap; }
.ac-form-status { font-size: var(--ac-step--1); color: var(--ac-ink-soft); margin: 0; }
.ac-form-status.is-error { color: var(--ac-err); font-weight: 600; }
.ac-form-status.is-ok { color: var(--ac-ok); font-weight: 600; }

/* ============================================================================
   DROPZONE (voice upload + admin MP4 reuse)
   ========================================================================== */
.ac-voice { margin-top: var(--ac-sp-3); }
.ac-voice-controls { display: flex; flex-wrap: wrap; gap: var(--ac-sp-2); align-items: center; margin-bottom: var(--ac-sp-3); }
.ac-voice-timer { font-variant-numeric: tabular-nums; font-size: var(--ac-step--1); font-weight: 600; color: var(--ac-ink-soft); letter-spacing: .04em; }
.ac-voice-rec-dot {
  display: inline-block; width: .6em; height: .6em; border-radius: 50%;
  background: var(--ac-err); margin-right: .4em; vertical-align: middle;
}
.ac-voice.is-recording .ac-voice-rec-dot { animation: ac-pulse 1.2s var(--ac-ease) infinite; }
@keyframes ac-pulse { 50% { opacity: .25; } }
.ac-voice-playback { display: block; width: 100%; margin: var(--ac-sp-3) 0; }
.ac-voice-divider { font-size: var(--ac-step--1); color: var(--ac-muted); text-transform: uppercase; letter-spacing: .14em; text-align: center; margin: var(--ac-sp-3) 0; }

.ac-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ac-sp-2);
  text-align: center;
  padding: var(--ac-sp-5);
  background: var(--ac-paper-deep);
  border: 1.5px dashed var(--ac-line);
  border-radius: var(--ac-radius-sm);
  cursor: pointer;
  transition: border-color var(--ac-dur-fast) var(--ac-ease), background var(--ac-dur-fast) var(--ac-ease);
}
.ac-dropzone:hover { border-color: var(--ac-ink-soft); }
.ac-dropzone.is-dragover { border-color: var(--ac-accent); background: color-mix(in srgb, var(--ac-accent) 6%, var(--ac-paper-deep)); }
.ac-dropzone-icon { font-size: var(--ac-step-2); color: var(--ac-muted); line-height: 1; }
.ac-dropzone-prompt { font-size: var(--ac-step-0); color: var(--ac-ink-soft); }
.ac-dropzone-help { font-size: var(--ac-step--1); color: var(--ac-muted); }
.ac-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

.ac-dropzone.has-file {
  flex-direction: row; align-items: center; justify-content: space-between;
  text-align: left; border-style: solid; cursor: default;
}
.ac-file-meta { display: flex; flex-direction: column; gap: .15em; min-width: 0; }
.ac-file-name { font-size: var(--ac-step-0); color: var(--ac-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-file-size { font-size: var(--ac-step--1); color: var(--ac-muted); }

.ac-voice-note { font-size: var(--ac-step--1); color: var(--ac-muted); font-style: italic; margin-top: var(--ac-sp-2); }

/* ============================================================================
   PAYWALL  (the one place --ac-elev-2 is allowed)
   ========================================================================== */
.ac-paywall {
  max-width: 30rem;
  margin: var(--ac-sp-6) auto;
  padding: var(--ac-sp-5);
  text-align: center;
  background: var(--ac-paper);
  border: 1px solid var(--ac-line);
  border-top: 3px solid var(--ac-lane);
  border-radius: var(--ac-radius-sm);
  box-shadow: var(--ac-elev-2);
}
.ac-paywall .ac-eyebrow { color: var(--ac-accent-ink); }
.ac-paywall-title { font-size: var(--ac-step-2); margin-bottom: var(--ac-sp-3); }
.ac-paywall-bridge { font-family: var(--ac-serif); font-size: var(--ac-step-1); line-height: 1.45; color: var(--ac-ink-soft); margin-bottom: var(--ac-sp-4); }
.ac-includes { list-style: none; margin: 0 0 var(--ac-sp-4); padding: 0; text-align: left; }
.ac-includes li {
  display: flex; gap: .5em; padding: var(--ac-sp-2) 0;
  border-top: 1px solid var(--ac-line-soft);
  font-size: var(--ac-step-0); color: var(--ac-ink-soft);
}
.ac-includes li::before { content: "-"; color: var(--ac-lane); }
.ac-paywall .ac-price { display: block; font-size: var(--ac-step-3); margin: var(--ac-sp-3) 0; }
.ac-paywall-locked-note { font-size: var(--ac-step--1); color: var(--ac-muted); margin-top: var(--ac-sp-3); }
.ac-paywall-quiz { color: var(--ac-ink-soft); }

/* ============================================================================
   COMPLETION MOMENTS  (earned, not awarded)
   ========================================================================== */
/* Phase 1 threshold, quiet reveal */
.ac-threshold {
  max-width: var(--ac-content-maxw);
  margin: var(--ac-sp-6) auto;
  text-align: center;
}
.ac-threshold-statement {
  font-family: var(--ac-serif);
  font-size: var(--ac-step-2);
  font-weight: 350;
  line-height: 1.4;
  color: var(--ac-ink);
}
.ac-reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--ac-dur-slow) var(--ac-ease), transform var(--ac-dur-slow) var(--ac-ease); }
.ac-reveal.is-revealed { opacity: 1; transform: none; }

/* Phase 2 certificate */
.ac-certificate { margin: var(--ac-sp-6) auto; }
.ac-certificate-statement {
  background: var(--ac-ink);
  color: var(--ac-paper);
  padding: var(--ac-sp-6) var(--ac-sp-4);
  text-align: center;
}
.ac-certificate-statement p {
  font-family: var(--ac-serif);
  font-size: var(--ac-step-3);
  font-weight: 320;
  line-height: 1.3;
  max-width: 24ch;
  margin: 0 auto;
}
.ac-certificate-statement .ac-cert-clause { font-style: italic; color: color-mix(in srgb, var(--ac-accent) 70%, var(--ac-paper)); }

.ac-certificate-card {
  max-width: 34rem;
  margin: calc(-1 * var(--ac-sp-5)) auto var(--ac-sp-5);
  padding: var(--ac-sp-6) var(--ac-sp-5);
  background: var(--ac-paper);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-sm);
  box-shadow: var(--ac-elev-2);
  text-align: center;
}
.ac-cert-eyebrow { color: var(--ac-muted); }
.ac-cert-name { font-family: var(--ac-serif); font-size: var(--ac-step-3); font-weight: 320; margin: var(--ac-sp-2) 0; }
.ac-cert-arch { color: var(--ac-ink-soft); font-size: var(--ac-step-0); }
.ac-cert-rule { width: 4rem; height: 2px; background: var(--ac-accent); border: 0; margin: var(--ac-sp-4) auto; }
.ac-cert-date { font-size: var(--ac-step--1); color: var(--ac-muted); letter-spacing: .04em; }
.ac-cert-wordmark { font-family: var(--ac-serif); font-size: var(--ac-step-1); letter-spacing: .1em; margin-top: var(--ac-sp-3); }
.ac-cert-audio { margin: var(--ac-sp-4) auto 0; max-width: 30rem; }
.ac-cert-actions { display: flex; flex-wrap: wrap; gap: var(--ac-sp-3); justify-content: center; margin-top: var(--ac-sp-5); }

/* ============================================================================
   STRIPE RETURN
   ========================================================================== */
.ac-welcome { max-width: 32rem; margin: var(--ac-sp-6) auto; text-align: center; padding: var(--ac-sp-5) var(--ac-sp-4); }
.ac-welcome-title { font-size: var(--ac-step-2); margin-bottom: var(--ac-sp-3); }
.ac-welcome-status { color: var(--ac-ink-soft); display: flex; align-items: center; justify-content: center; gap: .6em; }
.ac-spinner {
  width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid var(--ac-line); border-top-color: var(--ac-accent);
  animation: ac-spin 0.8s linear infinite;
}
@keyframes ac-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   REGISTER / LOGIN
   ========================================================================== */
.ac-auth { max-width: 26rem; margin: var(--ac-sp-6) auto; padding: 0 var(--ac-sp-4); }
.ac-auth-title { font-size: var(--ac-step-2); margin-bottom: var(--ac-sp-2); }
.ac-auth-intro { color: var(--ac-ink-soft); margin-bottom: var(--ac-sp-4); }
.ac-auth-arch { display: inline-flex; gap: .5em; align-items: center; margin-bottom: var(--ac-sp-4); }
.ac-form-row { margin-bottom: var(--ac-sp-3); }
.ac-form-row label { display: block; font-size: var(--ac-step--1); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-ink-soft); margin-bottom: var(--ac-sp-1); }
.ac-input {
  display: block; width: 100%;
  background: var(--ac-paper); border: 1px solid var(--ac-line); border-radius: var(--ac-radius-xs);
  padding: .7em var(--ac-sp-3); font-family: var(--ac-sans); font-size: var(--ac-step-0); color: var(--ac-ink);
  transition: border-color var(--ac-dur-fast) var(--ac-ease), box-shadow var(--ac-dur-fast) var(--ac-ease);
}
.ac-input:focus { outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-elev-focus); }
.ac-auth-privacy { font-size: var(--ac-step--1); color: var(--ac-muted); margin: var(--ac-sp-3) 0; }
.ac-auth-alt { font-size: var(--ac-step--1); color: var(--ac-ink-soft); margin-top: var(--ac-sp-4); }
/* WP's own login form, lightly tamed */
.ac-login form .button,
.ac-login form #wp-submit {
  background: var(--ac-ink) !important; color: var(--ac-paper) !important;
  border: 1px solid var(--ac-ink) !important; border-radius: var(--ac-radius-xs) !important;
  text-transform: uppercase; letter-spacing: .14em; font-weight: 600; box-shadow: none !important;
}
.ac-login form input[type="text"],
.ac-login form input[type="password"] {
  background: var(--ac-paper); border: 1px solid var(--ac-line); border-radius: var(--ac-radius-xs);
}

/* ============================================================================
   DOSSIER  (document, not dashboard)
   ========================================================================== */
.ac-dossier {
  max-width: var(--ac-content-maxw);
  margin: 0 auto;
  padding: var(--ac-sp-6) var(--ac-sp-4);
}
.ac-dossier-head { margin-bottom: var(--ac-sp-6); padding-bottom: var(--ac-sp-4); border-bottom: 2px solid var(--ac-accent); }
.ac-dossier-head h1 { font-size: var(--ac-step-3); font-weight: 320; }
.ac-dossier-meta { display: flex; flex-wrap: wrap; gap: var(--ac-sp-3); margin-top: var(--ac-sp-3); color: var(--ac-ink-soft); font-size: var(--ac-step-0); }
.ac-dossier-meta span { display: inline-flex; align-items: center; gap: .4em; }

.ac-dossier-course { margin-bottom: var(--ac-sp-6); }
.ac-dossier-course-title { font-size: var(--ac-step-2); margin-bottom: var(--ac-sp-4); }
.ac-dossier-section-label { font-size: var(--ac-step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--ac-muted); margin: var(--ac-sp-4) 0 var(--ac-sp-2); }
.ac-dossier-lesson { margin-bottom: var(--ac-sp-5); }
.ac-dossier-lesson-title { font-size: var(--ac-step-1); color: var(--ac-ink-soft); margin-bottom: var(--ac-sp-3); }

.ac-dossier-entry {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--ac-sp-3);
  padding: var(--ac-sp-3) 0;
  border-top: 1px solid var(--ac-line-soft);
}
.ac-dossier-index { font-family: var(--ac-serif); font-size: var(--ac-step-1); font-weight: 360; color: var(--ac-accent); font-variant-numeric: tabular-nums; }
.ac-dossier-prompt { font-family: var(--ac-serif); font-style: italic; font-size: var(--ac-step-0); color: var(--ac-ink-soft); margin-bottom: var(--ac-sp-2); }
.ac-dossier-response { color: var(--ac-ink); white-space: pre-wrap; }
.ac-dossier-list { margin: 0; padding-left: 1.2em; }
.ac-dossier-scale { font-family: var(--ac-serif); font-size: var(--ac-step-1); color: var(--ac-ink); }
.ac-dossier-audio { width: 100%; max-width: 26rem; margin-top: var(--ac-sp-2); }
.ac-dossier-empty { color: var(--ac-ink-soft); font-family: var(--ac-serif); font-size: var(--ac-step-1); font-style: italic; }

/* ============================================================================
   PRINT  (Dossier + certificate export, strip chrome)
   ========================================================================== */
@media print {
  .tviah-ac { background: #fff; color: #000; }
  .ac-curric-toggle, .ac-form-footer, .ac-btn-primary, .ac-btn-secondary, .ac-btn-ghost,
  .ac-update-link, .ac-cert-actions, .ac-resume { display: none !important; }
  .ac-dossier, .ac-certificate-card { box-shadow: none; max-width: 100%; }
  .ac-dossier-entry, .ac-dossier-lesson { break-inside: avoid; }
  .ac-dossier-audio { display: none; } /* audio cannot print, note left in markup */
  .ac-certificate-statement { background: #fff !important; color: #000 !important; }
}

/* ============================================================================
   === ADMIN BUILDER (Phase B2) =============================================
   Dario Esposito. The Course Builder lives inside wp-admin but holds TVIAH's
   hairline-and-serif discipline: warm #FBFAF6 paper, thin rules, Fraunces for
   titles, clay reserved for the live edge (primary action, index numerals,
   drag-active). Reads like Teachable/Kajabi, a draggable section→lesson
   outline separate from a focused lesson editor. Everything scoped under
   .tviah-ac.is-admin so it never bleeds into the rest of wp-admin.

   Scope note: wp-admin wraps our markup in .wrap; we mount .tviah-ac.is-admin
   INSIDE .wrap so tokens + reset apply. Default wp-admin font is overridden only
   within our scope.
   ========================================================================== */

.tviah-ac.is-admin {
  max-width: 1100px;
  margin: var(--ac-sp-4) 0 var(--ac-sp-6);
  padding: var(--ac-sp-5) var(--ac-sp-5) var(--ac-sp-6);
  border: 1px solid var(--ac-line-soft);
  border-top: 3px solid var(--ac-accent);
  border-radius: var(--ac-radius-sm);
}
.tviah-ac.is-admin h1 { font-size: var(--ac-step-2); margin-bottom: var(--ac-sp-1); }
.tviah-ac.is-admin h2 { font-size: var(--ac-step-1); }
.tviah-ac.is-admin .ac-admin-lede { color: var(--ac-ink-soft); max-width: 60ch; margin-bottom: var(--ac-sp-5); }

/* Tame WP's own inputs/selects inside our scope so they read like the workbook. */
.tviah-ac.is-admin input[type="text"],
.tviah-ac.is-admin input[type="number"],
.tviah-ac.is-admin input[type="search"],
.tviah-ac.is-admin select,
.tviah-ac.is-admin textarea {
  background: var(--ac-paper);
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius-xs);
  color: var(--ac-ink);
  font-family: var(--ac-sans);
  font-size: var(--ac-step-0);
  padding: .55em var(--ac-sp-2);
  box-shadow: none;
  min-height: 0;
  line-height: 1.4;
}
.tviah-ac.is-admin textarea { line-height: 1.6; padding: var(--ac-sp-2) var(--ac-sp-3); }
.tviah-ac.is-admin input:focus,
.tviah-ac.is-admin select:focus,
.tviah-ac.is-admin textarea:focus {
  outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-elev-focus);
}
.tviah-ac.is-admin label { font-family: var(--ac-sans); color: var(--ac-ink); }

/* Admin field label (small-caps) reused across the builder + editor */
.ac-admin-label {
  display: block;
  font-family: var(--ac-sans);
  font-size: var(--ac-step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ac-ink-soft);
  margin-bottom: var(--ac-sp-1);
}
.ac-admin-hint { font-size: var(--ac-step--1); color: var(--ac-muted); margin-top: var(--ac-sp-1); }

/* Notices (saved / error), hairline, never WP's heavy banners */
.ac-admin-notice {
  display: flex; align-items: center; gap: .5em;
  padding: var(--ac-sp-2) var(--ac-sp-3);
  margin-bottom: var(--ac-sp-4);
  border: 1px solid var(--ac-line-soft);
  border-left: 3px solid var(--ac-ok);
  border-radius: var(--ac-radius-xs);
  background: var(--ac-complete-bg);
  font-size: var(--ac-step--1); font-weight: 600; letter-spacing: .04em;
  color: var(--ac-ink-soft);
}
.ac-admin-notice.is-error { border-left-color: var(--ac-err); background: color-mix(in srgb,var(--ac-err) 8%,var(--ac-paper)); }

/* ── Track switcher (archetype-scoped editing context) ──────────────── */
.ac-track-switcher {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-sp-2);
  padding: var(--ac-sp-2);
  margin-bottom: var(--ac-sp-4);
  background: var(--ac-paper-deep);
  border: 1px solid var(--ac-line-soft);
  border-radius: var(--ac-radius-pill);
}
.ac-track-switcher-label {
  font-size: var(--ac-step--1); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ac-muted); padding: 0 var(--ac-sp-2);
}
.ac-track {
  appearance: none; -webkit-appearance: none;
  font-family: var(--ac-sans); font-size: var(--ac-step--1); font-weight: 600;
  letter-spacing: .06em;
  padding: .45em 1em;
  border: 1px solid transparent;
  border-radius: var(--ac-radius-pill);
  background: transparent; color: var(--ac-ink-soft);
  cursor: pointer;
  transition: background var(--ac-dur-fast) var(--ac-ease), color var(--ac-dur-fast) var(--ac-ease), box-shadow var(--ac-dur-fast) var(--ac-ease);
}
.ac-track:hover { background: var(--ac-paper); }
.ac-track.is-active {
  background: var(--ac-paper); color: var(--ac-ink);
  box-shadow: inset 0 0 0 1px var(--ac-lane), 0 1px 0 var(--ac-line-soft);
}
.ac-track .ac-track-swatch {
  display: inline-block; width: .65em; height: .65em; border-radius: 50%;
  background: var(--ac-lane); margin-right: .45em; vertical-align: middle;
}

/* ── 6/8-dot drag handle (shared: course rows, sections, lessons) ───── */
.ac-drag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.8rem; flex-shrink: 0;
  border: 0; background: transparent; padding: 0;
  color: var(--ac-muted);
  cursor: grab;
  border-radius: var(--ac-radius-xs);
  touch-action: none;
}
.ac-drag:hover { color: var(--ac-ink-soft); }
.ac-drag:active { cursor: grabbing; }
.ac-drag .ac-drag-dots {
  display: grid; grid-template-columns: repeat(2, 3px); gap: 3px;
}
.ac-drag .ac-drag-dots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; }
/* 8-dot variant (sections) gets a taller grid via 4 rows of 2 */
.ac-drag.is-eight .ac-drag-dots { grid-template-rows: repeat(4, 3px); }

/* Keyboard reorder controls, the a11y alternative to drag, on every row. */
.ac-move {
  display: inline-flex; flex-direction: column; gap: 1px;
}
.ac-move button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: .9rem;
  border: 1px solid var(--ac-line); background: var(--ac-paper);
  color: var(--ac-ink-soft); cursor: pointer; padding: 0; line-height: 1;
  font-size: .7rem;
}
.ac-move button:first-child { border-radius: var(--ac-radius-xs) var(--ac-radius-xs) 0 0; border-bottom: 0; }
.ac-move button:last-child { border-radius: 0 0 var(--ac-radius-xs) var(--ac-radius-xs); }
.ac-move button:hover:not(:disabled) { border-color: var(--ac-ink); color: var(--ac-ink); }
.ac-move button:disabled { opacity: .35; cursor: not-allowed; }

/* Drag states for any sortable row */
.ac-sortable.is-dragging { opacity: .5; }
.ac-sortable.is-drop-target { box-shadow: inset 0 2px 0 var(--ac-accent); }
.ac-sortable.is-drop-target-after { box-shadow: inset 0 -2px 0 var(--ac-accent); }

/* ── Catalog Manager (course rows) ──────────────────────────────────── */
.ac-catalog-manager { margin-bottom: var(--ac-sp-6); }
.ac-course-list { list-style: none; margin: 0 0 var(--ac-sp-4); padding: 0;
  border: 1px solid var(--ac-line-soft); border-radius: var(--ac-radius-sm); overflow: hidden; }
.ac-course-row {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: var(--ac-sp-3);
  padding: var(--ac-sp-3);
  background: var(--ac-paper);
  border-top: 1px solid var(--ac-line-soft);
}
.ac-course-row:first-child { border-top: 0; }
.ac-course-row.is-archived { opacity: .6; }
.ac-course-handle { display: inline-flex; align-items: center; gap: var(--ac-sp-1); }
.ac-course-index {
  font-family: var(--ac-serif); font-size: var(--ac-step-1); font-weight: 360;
  color: var(--ac-accent); font-variant-numeric: tabular-nums; min-width: 1.4rem; text-align: center;
}
.ac-course-main { min-width: 0; }
.ac-course-title-row { display: flex; align-items: baseline; gap: var(--ac-sp-2); flex-wrap: wrap; }
.ac-course-title {
  font-family: var(--ac-serif); font-size: var(--ac-step-1); font-weight: 350; color: var(--ac-ink);
}
.ac-course-slug { font-size: var(--ac-step--1); color: var(--ac-muted); font-variant-numeric: tabular-nums; }
.ac-course-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ac-sp-2); margin-top: var(--ac-sp-2); }
.ac-lesson-count { font-size: var(--ac-step--1); color: var(--ac-ink-soft); letter-spacing: .04em; }
.ac-course-actions { display: flex; align-items: center; gap: var(--ac-sp-2); }

/* Status pill */
.ac-status {
  font-size: var(--ac-step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  padding: .25em .7em; border-radius: var(--ac-radius-pill); border: 1px solid currentColor; line-height: 1;
}
.ac-status[data-status="published"] { color: var(--ac-ok); border-color: color-mix(in srgb,var(--ac-ok) 45%,transparent); }
.ac-status[data-status="draft"]     { color: var(--ac-muted); border-color: color-mix(in srgb,var(--ac-muted) 50%,transparent); }
.ac-status[data-status="archived"]  { color: var(--ac-locked-ink); border-color: color-mix(in srgb,var(--ac-locked-ink) 45%,transparent); }

/* Inline course editor (expand/collapse under a row) */
.ac-course-editor {
  grid-column: 1 / -1;
  margin-top: var(--ac-sp-2);
  padding-top: var(--ac-sp-3);
  border-top: 1px dashed var(--ac-line);
}
.ac-course-editor[hidden] { display: none; }
.ac-field-grid {
  display: grid; gap: var(--ac-sp-3);
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.ac-field-grid > p, .ac-field-grid .ac-admin-cell { margin: 0; }
.ac-admin-cell input, .ac-admin-cell select { width: 100%; }
.ac-admin-cell.is-inline { display: flex; align-items: center; gap: var(--ac-sp-2); }
/* Paid sub-config reveal: price + Stripe ID only matter for paid courses */
.ac-paid-config[hidden] { display: none; }
.ac-checkbox-row { display: flex; align-items: center; gap: var(--ac-sp-2); font-size: var(--ac-step-0); }
.ac-checkbox-row input[type="checkbox"] { accent-color: var(--ac-accent); width: 1.05em; height: 1.05em; }

/* ── Outline Builder (section → lesson tree) ────────────────────────── */
.ac-outline { margin-bottom: var(--ac-sp-5); }
.ac-section {
  border: 1px solid var(--ac-line-soft);
  border-radius: var(--ac-radius-sm);
  background: var(--ac-paper);
  margin-bottom: var(--ac-sp-3);
}
.ac-section-head {
  display: grid;
  grid-template-columns: auto auto auto minmax(0,1fr) auto;
  align-items: center;
  gap: var(--ac-sp-2);
  padding: var(--ac-sp-3);
  border-bottom: 1px solid var(--ac-line-soft);
  background: var(--ac-paper-deep);
  border-radius: var(--ac-radius-sm) var(--ac-radius-sm) 0 0;
}
.ac-section.is-collapsed .ac-section-head { border-bottom: 0; border-radius: var(--ac-radius-sm); }
.ac-section-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border: 0; background: transparent; cursor: pointer;
  color: var(--ac-ink-soft); font-size: .8rem;
}
.ac-section-toggle .ac-caret { transition: transform var(--ac-dur-fast) var(--ac-ease); }
.ac-section.is-collapsed .ac-section-toggle .ac-caret { transform: rotate(-90deg); }
.ac-section-title {
  font-family: var(--ac-serif); font-size: var(--ac-step-1); font-weight: 350; color: var(--ac-ink);
  border: 1px solid transparent; background: transparent; border-radius: var(--ac-radius-xs);
  padding: .15em .35em; margin: 0 -.35em; width: 100%; min-width: 4rem;
}
.ac-section-title:hover { border-color: var(--ac-line-soft); }
.ac-section-title:focus { outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-elev-focus); background: var(--ac-paper); }
.ac-section-track-tag {
  font-size: var(--ac-step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ac-muted); white-space: nowrap;
}

.ac-lesson-list { list-style: none; margin: 0; padding: 0; }
.ac-lesson-list[hidden] { display: none; }
.ac-lesson-row {
  display: grid;
  grid-template-columns: auto auto 1.8rem minmax(0,1fr) auto auto;
  align-items: center;
  gap: var(--ac-sp-2);
  padding: var(--ac-sp-2) var(--ac-sp-3);
  border-top: 1px solid var(--ac-line-soft);
  background: var(--ac-paper);
}
.ac-lesson-row:first-child { border-top: 0; }
.ac-lesson-row.is-editing { background: var(--ac-current-bg); box-shadow: inset 3px 0 0 var(--ac-lane); }
.ac-lesson-row .ac-lesson-num {
  font-family: var(--ac-serif); font-size: var(--ac-step-0); color: var(--ac-muted);
  font-variant-numeric: tabular-nums; text-align: center;
}
.ac-lesson-row .ac-lesson-title-link {
  font-family: var(--ac-serif); font-size: var(--ac-step-0); color: var(--ac-ink); line-height: 1.3;
}
.ac-lesson-row .ac-lesson-rename {
  font-family: var(--ac-serif); font-size: var(--ac-step-0); color: var(--ac-ink);
  border: 1px solid transparent; background: transparent; border-radius: var(--ac-radius-xs);
  padding: .1em .3em; margin: 0 -.3em; width: 100%;
}
.ac-lesson-row .ac-lesson-rename:hover { border-color: var(--ac-line-soft); }
.ac-lesson-row .ac-lesson-rename:focus { outline: none; border-color: var(--ac-accent); box-shadow: var(--ac-elev-focus); background: var(--ac-paper); }
.ac-lesson-track-tag { font-size: var(--ac-step--1); color: var(--ac-muted); letter-spacing: .06em; white-space: nowrap; }

/* +Add affordances, quiet dashed, muted → clay on hover */
.ac-add {
  display: flex; align-items: center; gap: .5em;
  width: 100%;
  padding: var(--ac-sp-2) var(--ac-sp-3);
  border: 0; border-top: 1px dashed var(--ac-line);
  background: transparent;
  color: var(--ac-muted);
  font-family: var(--ac-sans); font-size: var(--ac-step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em;
  cursor: pointer; text-align: left;
  transition: color var(--ac-dur-fast) var(--ac-ease), background var(--ac-dur-fast) var(--ac-ease);
}
.ac-add:hover { color: var(--ac-accent); background: color-mix(in srgb,var(--ac-accent) 4%,var(--ac-paper)); }
.ac-add .ac-add-plus { font-size: 1.2em; line-height: 1; }
.ac-add.ac-add-section { border-top: 1px dashed var(--ac-line); margin-top: var(--ac-sp-2); justify-content: flex-start; }
.ac-add.ac-add-lesson { color: var(--ac-muted); }

/* Inline add forms (revealed by the +Add buttons) */
.ac-inline-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ac-sp-2);
  padding: var(--ac-sp-3);
  background: var(--ac-paper-deep);
  border-top: 1px dashed var(--ac-line);
}
.ac-inline-form[hidden] { display: none; }
.ac-inline-form .ac-admin-cell { display: flex; flex-direction: column; gap: var(--ac-sp-1); }

/* ── Lesson Editor (focused right-column form) ──────────────────────── */
.ac-lesson-editor { position: relative; }
.ac-lesson-editor .ac-editor-grid { display: grid; gap: var(--ac-sp-4); }
.ac-editor-field { margin: 0; }

/* Delivery-type segmented control */
.ac-segmented {
  display: inline-flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--ac-line); border-radius: var(--ac-radius-xs); overflow: hidden;
  padding: 0; margin: 0;
}
.ac-segmented legend { float: left; width: 100%; }
.ac-segmented .ac-seg {
  position: relative;
  font-family: var(--ac-sans); font-size: var(--ac-step--1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .55em 1em; cursor: pointer; color: var(--ac-ink-soft);
  border-right: 1px solid var(--ac-line);
  transition: background var(--ac-dur-fast) var(--ac-ease), color var(--ac-dur-fast) var(--ac-ease);
}
.ac-segmented .ac-seg:last-of-type { border-right: 0; }
.ac-segmented .ac-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ac-segmented .ac-seg:hover { background: var(--ac-paper-deep); }
.ac-segmented .ac-seg:has(input:checked) { background: var(--ac-ink); color: var(--ac-paper); }
.ac-segmented .ac-seg.is-active { background: var(--ac-ink); color: var(--ac-paper); }
.ac-segmented .ac-seg:has(input:focus-visible) { outline: 2px solid var(--ac-accent); outline-offset: -2px; }

/* Editor MP4 dropzone reuses .ac-dropzone; add admin progress chrome */
.ac-lesson-editor .ac-dropzone { background: var(--ac-paper-deep); }
.ac-upload-progress { display: none; width: 100%; margin-top: var(--ac-sp-2); }
.ac-upload-progress.is-active { display: block; }
.ac-upload-meta { display: flex; justify-content: space-between; font-size: var(--ac-step--1); color: var(--ac-ink-soft); margin-top: var(--ac-sp-1); letter-spacing: .04em; }
.ac-upload-error { color: var(--ac-err); font-size: var(--ac-step--1); font-weight: 600; margin-top: var(--ac-sp-2); }
.ac-video-thumb { width: 4rem; height: 2.4rem; background: var(--ac-ink); border-radius: var(--ac-radius-xs); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: var(--ac-paper); font-size: .8rem; }

/* ── Response-field builder ─────────────────────────────────────────── */
.ac-responsebuilder { margin: 0; }
.ac-rf-list { list-style: none; margin: 0 0 var(--ac-sp-3); padding: 0; }
.ac-rf {
  border: 1px solid var(--ac-line-soft); border-left: 3px solid var(--ac-lane);
  border-radius: var(--ac-radius-xs); background: var(--ac-paper);
  padding: var(--ac-sp-3); margin-bottom: var(--ac-sp-3);
}
.ac-rf-head { display: flex; align-items: center; gap: var(--ac-sp-2); margin-bottom: var(--ac-sp-3); }
.ac-rf-head .ac-drag { margin-left: -.3rem; }
.ac-rf-num {
  font-family: var(--ac-serif); font-size: var(--ac-step-0); color: var(--ac-accent);
  font-variant-numeric: tabular-nums;
}
.ac-rf-head .ac-rf-type {
  font-size: var(--ac-step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ac-ink-soft); margin-left: auto;
}
.ac-rf-remove {
  border: 1px solid var(--ac-line); background: var(--ac-paper); color: var(--ac-ink-soft);
  border-radius: var(--ac-radius-xs); padding: .25em .6em; cursor: pointer; font-size: var(--ac-step--1);
}
.ac-rf-remove:hover { border-color: var(--ac-err); color: var(--ac-err); }
.ac-rf-grid { display: grid; gap: var(--ac-sp-2); grid-template-columns: repeat(auto-fit,minmax(10rem,1fr)); }
.ac-rf-grid .ac-admin-cell { display: flex; flex-direction: column; gap: var(--ac-sp-1); }
.ac-rf-grid textarea, .ac-rf-grid input, .ac-rf-grid select { width: 100%; }

/* Progressive sub-config blocks (revealed by type) */
.ac-rf-subconfig { margin-top: var(--ac-sp-3); padding-top: var(--ac-sp-3); border-top: 1px dashed var(--ac-line-soft); }
.ac-rf-subconfig[hidden] { display: none; }

/* Multiselect option rows */
.ac-rf-options { list-style: none; margin: 0 0 var(--ac-sp-2); padding: 0; }
.ac-rf-option { display: flex; align-items: center; gap: var(--ac-sp-2); margin-bottom: var(--ac-sp-2); }
.ac-rf-option input { flex: 1; }
.ac-rf-option .ac-rf-opt-remove {
  border: 1px solid var(--ac-line); background: var(--ac-paper); color: var(--ac-muted);
  border-radius: var(--ac-radius-xs); width: 1.8rem; height: 1.8rem; cursor: pointer; flex-shrink: 0; line-height: 1;
}
.ac-rf-option .ac-rf-opt-remove:hover { border-color: var(--ac-err); color: var(--ac-err); }
.ac-rf-add-option {
  border: 1px dashed var(--ac-line); background: transparent; color: var(--ac-muted);
  border-radius: var(--ac-radius-xs); padding: .35em .8em; cursor: pointer;
  font-size: var(--ac-step--1); font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
}
.ac-rf-add-option:hover { color: var(--ac-accent); border-color: var(--ac-accent); }

/* Scale min/max */
.ac-rf-scale { display: flex; flex-wrap: wrap; gap: var(--ac-sp-3); align-items: flex-end; }
.ac-rf-scale .ac-admin-cell { max-width: 6rem; }

.ac-rf-add {
  display: flex; align-items: center; gap: .5em;
  width: 100%; padding: var(--ac-sp-3);
  border: 1px dashed var(--ac-line); background: transparent; border-radius: var(--ac-radius-xs);
  color: var(--ac-muted); font-family: var(--ac-sans); font-size: var(--ac-step--1); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; cursor: pointer; justify-content: center;
}
.ac-rf-add:hover { color: var(--ac-accent); border-color: var(--ac-accent); background: color-mix(in srgb,var(--ac-accent) 4%,var(--ac-paper)); }

/* Mirror of the response builder into the textarea the backend reads */
.ac-rf-json { display: none; }
.ac-rf-json.is-visible { display: block; }
.ac-rf-jsontoggle {
  background: none; border: 0; color: var(--ac-accent-ink); cursor: pointer; padding: 0;
  font-size: var(--ac-step--1); font-weight: 600; letter-spacing: .04em; margin-top: var(--ac-sp-2);
}

/* ── Sticky save bar ────────────────────────────────────────────────── */
.ac-savebar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: flex-end; gap: var(--ac-sp-3);
  margin: var(--ac-sp-5) calc(-1 * var(--ac-sp-5)) calc(-1 * var(--ac-sp-6));
  padding: var(--ac-sp-3) var(--ac-sp-5);
  background: color-mix(in srgb, var(--ac-paper) 92%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-top: 1px solid var(--ac-line);
}
.ac-savebar .ac-savebar-status { margin-right: auto; font-size: var(--ac-step--1); color: var(--ac-muted); letter-spacing: .04em; }
.ac-savebar .ac-savebar-status.is-dirty { color: var(--ac-accent-ink); font-weight: 600; }

/* WP admin scope: keep our reduced-motion + focus rules already cover this. */
@media (max-width: 50rem) {
  .ac-course-row { grid-template-columns: auto minmax(0,1fr); }
  .ac-course-row .ac-course-main { grid-column: 2; }
  .ac-course-row .ac-course-actions { grid-column: 1 / -1; }
  .ac-section-head { grid-template-columns: auto auto auto minmax(0,1fr); }
  .ac-section-head .ac-section-track-tag { grid-column: 4; justify-self: end; }
}

/* ═══════════════════════════════════════════════════════════════════════
   THE HONEST LOOK, COMPLETION
   Certificate first, then the letter. The certificate is the reward and the
   letter is the ask; they are separated by a rule so they do not blur.
   ═══════════════════════════════════════════════════════════════════════ */
.ac-complete { max-width: var(--maxw, 1180px); margin-inline: auto; }

/* ── The certificate ─────────────────────────────────────────────────
   Sized in container units against the sheet's own width. The layout is
   absolute percentages, so fixed font sizes broke the moment the sheet was
   made smaller, the type stayed put while the box shrank around it. In cqw
   everything scales together, at any width, including print. Design width
   is 940px, so 1cqw = 9.4px there. */
.ac-cert-sheet {
  width: 100%; max-width: 470px; aspect-ratio: 940/740; position: relative;
  container-type: inline-size;
  background: #FCFAF4; margin: 0 auto; overflow: hidden;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; color: #1B1A16;
  box-shadow: 0 2px 4px rgba(27,26,22,.12), 0 30px 70px -40px rgba(27,26,22,.6);
}
.ac-cert-art { position: absolute; inset: 0; width: 100%; height: 100%; }

.ac-cert-mark { position: absolute; top: 4.4%; left: 0; right: 0; text-align: center; z-index: 2; }
.ac-cert-word {
  font-family: "Outfit", var(--ac-sans), sans-serif;
  font-size: 2.2cqw; font-weight: 700; letter-spacing: .42em;
  color: #F4F0E8; margin: 0 0 0 .42em;
}
.ac-cert-tag {
  font-family: var(--ac-sans), sans-serif; font-size: 1.16cqw; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: #333333; margin: .9cqw 0 0;
}

/* Hand-pressed seals never land square, hence the tilt. */
.ac-cert-seal {
  position: absolute; top: 13%; left: 50%; transform: translateX(-50%) rotate(-4deg);
  z-index: 3; width: 14.5cqw; height: 14.5cqw;
  filter: drop-shadow(0 .6cqw 1cqw rgba(27,26,22,.45));
}
.ac-cert-seal svg { width: 100%; height: 100%; display: block; }
.ac-cert-die { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ac-cert-die img {
  width: 70%; height: auto; display: block;
  /* The die is a warm highlight, not black. A dark mark on dark wax has no
     contrast and simply disappears, a real impression is read by the light
     catching its pressed edge, with the shadow sitting above it. */
  opacity: 1;
  filter: drop-shadow(0 -.16cqw .12cqw rgba(52,10,2,.9))
          drop-shadow(0 .08cqw .06cqw rgba(255,225,200,.35));
}

/* Flow, not absolute placement. Two absolutely positioned blocks aimed at
   each other will collide the moment any content or proportion changes, 
   which is exactly what kept happening. Flex makes the overlap impossible. */
.ac-cert-inner {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  padding: 27% 8% 6%;              /* clears the band and the seal */
  text-align: center;
}
.ac-cert-body { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.ac-cert-title { font-size: 4.6cqw; letter-spacing: .2em; text-transform: uppercase;
  font-weight: 600; margin: 0; line-height: 1; }
.ac-cert-sub { font-size: 1.8cqw; letter-spacing: .3em; text-transform: uppercase;
  color: #46423A; margin: 1cqw 0 0; font-weight: 400; }
.ac-cert-presented { font-family: var(--ac-sans), sans-serif; font-size: 1.36cqw;
  color: #46423A; margin: 2.9cqw 0 .3cqw; }

/* The script face has long descenders, so the rule tucks under the baseline
   rather than sitting a gap below it. */
.ac-cert-name { font-family: "Pinyon Script", cursive; font-size: 6.6cqw; line-height: 1.1; margin: 0; }
.ac-cert-nameline { width: 62%; height: 1px; background: #1B1A16; opacity: .55;
  margin: -.6cqw auto 2.4cqw; }

.ac-cert-for { font-family: var(--ac-sans), sans-serif; font-size: 1.5cqw; color: #31302A;
  margin: 0 auto; line-height: 1.7; text-wrap: balance; }
.ac-cert-for strong { color: #1B1A16; }
.ac-cert-arch { font-family: var(--ac-sans), sans-serif; font-size: 1.16cqw; letter-spacing: .2em;
  text-transform: uppercase; color: #8E7229; font-weight: 600; margin: 2.4cqw 0 0; }

.ac-cert-feet { flex: 0 0 auto; display: flex; justify-content: space-between;
  align-items: flex-end; gap: 4cqw; padding-inline: 4%; margin-top: 3cqw; }
.ac-cert-foot { flex: 1; text-align: center; }
.ac-cert-footline { height: 1px; background: #1B1A16; opacity: .5; }
.ac-cert-footlbl { font-family: var(--ac-sans), sans-serif; font-size: 1.02cqw; letter-spacing: .22em;
  text-transform: uppercase; color: #46423A; font-weight: 600; margin: .8cqw 0 0; }
.ac-cert-date { font-size: 1.8cqw; margin: 0 0 -.2cqw; }
.ac-cert-sig { font-family: "Pinyon Script", cursive; font-size: 3.1cqw; line-height: 1; margin: 0 0 -.5cqw; }
.ac-cert-sig img { max-height: 5.5cqw; width: auto; display: block; margin: 0 auto -.3cqw; }

.ac-cert-actions { display: flex; gap: .7rem; justify-content: center; flex-wrap: wrap;
  margin-top: var(--ac-sp-4); }

/* ── The letter ──────────────────────────────────────────────────────── */
.ac-letter-divider { display: flex; align-items: center; gap: 1.2rem; margin: var(--ac-sp-6) 0 var(--ac-sp-5); }
.ac-letter-divider .ln { height: 1px; background: var(--ac-line); flex: 1; }
.ac-letter-divider .lbl { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ac-ink-soft); font-weight: 600; flex: none; }

.ac-letter { max-width: 60ch; margin-inline: auto; }
.ac-letter-sal { font-family: var(--ac-serif); font-size: 1.45rem; font-weight: 500; margin: 0 0 1.3rem; }
.ac-letter p { margin: 0 0 1.05em; color: var(--ac-ink-soft); line-height: 1.75; }
.ac-letter-pivot { font-family: var(--ac-serif); font-size: clamp(1.25rem, 3vw, 1.6rem);
  line-height: 1.25; color: var(--ac-ink); margin: 1.5rem 0; font-weight: 500; }
.ac-letter-price { font-family: var(--ac-serif); font-size: 1.12rem; font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums; color: var(--ac-ink); }
.ac-letter-sig { font-family: var(--ac-serif); font-size: 1.02rem; letter-spacing: .1em;
  margin-top: 1.5rem; font-weight: 500; color: var(--ac-ink); }
.ac-letter-ps { font-size: .85rem; font-style: italic; color: var(--ac-ink-soft);
  max-width: 52ch; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ac-accent); }
.ac-letter-actions { margin-top: var(--ac-sp-4); display: flex; align-items: center;
  flex-wrap: wrap; gap: .8rem; }
.ac-letter-decline { font-size: .88rem; color: var(--ac-ink-soft); }

@media (max-width: 820px) {
  .ac-cert-sheet { aspect-ratio: auto; padding-bottom: 2rem; }
  .ac-cert-mark, .ac-cert-seal, .ac-cert-body { position: static; transform: none; margin-inline: auto; }
  .ac-cert-art { display: none; }
  .ac-cert-feet { position: static; margin-top: 2rem; padding-inline: 1.5rem; }
}

/* ── Print: the certificate only ─────────────────────────────────────── */
@media print {
  body * { visibility: hidden !important; }
  .ac-cert-sheet, .ac-cert-sheet * { visibility: visible !important; }
  .ac-cert-sheet {
    position: absolute !important; inset: 0 auto auto 0;
    width: 100%; max-width: 100%; box-shadow: none !important;
    aspect-ratio: 940/740;
  }
  .ac-cert-actions, .ac-letter, .ac-letter-divider { display: none !important; }
  @page { size: landscape; margin: 12mm; }
}