@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   NEXIMPERA ACADEMY — component layer
   ───────────────────────────────────────────────────────────────────────────
   HOW THIS RELATES TO THE THEMES

   This file defines COMPONENTS only. It never hard-codes a colour. Every
   value comes from a custom property that app.css already publishes, which is
   why the Academy re-skins itself for free when a learner picks Meridian,
   Slate or Axiom — those files redefine the same tokens and load after this
   one. Adding a hex value here would break that, permanently and invisibly.

   THE ACCENT SYSTEM
   [data-accent] on a card sets --acc / --acc-soft, and everything inside
   reads those. One attribute recolours a whole programme card, hero slide or
   track chip. Four accents, matched to the four tracks.

   THE ONE COLOUR RULE (inherited from the site)
     --gold  → brand / interface, never money
     --teal  → gain, exclusively
     --rose  → loss, exclusively
     --ember → streaks and effort

   ACCESSIBILITY
   Every interactive element has a visible :focus-visible ring. Every state
   that is communicated by colour is also communicated by a glyph or by text —
   a locked lesson shows a padlock, not just a dimmer grey.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Accents ─────────────────────────────────────────────────────────────── */
.ac-shell [data-accent="gold"],   .ac-shell[data-accent="gold"]   { --acc: var(--gold);   --acc-soft: var(--gold-muted); }
.ac-shell [data-accent="teal"],   .ac-shell[data-accent="teal"]   { --acc: var(--teal);   --acc-soft: rgba(16,163,127,.12); }
.ac-shell [data-accent="ember"],  .ac-shell[data-accent="ember"]  { --acc: var(--ember, #E8833A); --acc-soft: rgba(232,131,58,.12); }
.ac-shell [data-accent="purple"], .ac-shell[data-accent="purple"] { --acc: var(--purple, #7C5CFF); --acc-soft: rgba(124,92,255,.12); }

.ac-shell { --acc: var(--gold); --acc-soft: var(--gold-muted); }

/* ── Primitives ──────────────────────────────────────────────────────────── */
.ac-h2 {
  font-family: var(--font-display);
  font-size: clamp(21px, 3.4vw, 28px);
  font-weight: 700; line-height: 1.25; letter-spacing: -.01em;
  margin: 0 0 8px;
}
.ac-lede { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); margin: 0 0 22px; max-width: 62ch; }
.ac-section { padding: 34px 0; }
.ac-section:first-child { padding-top: 22px; }

.ac-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; font-weight: 650;
  line-height: 1; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; transition: var(--transition);
}
.ac-btn-primary { background: var(--acc); color: var(--bg-void); border-color: var(--acc); }
.ac-btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ac-btn-ghost   { background: transparent; color: var(--text-secondary); border-color: var(--border); }
.ac-btn-ghost:hover { border-color: var(--acc); color: var(--acc); }
.ac-btn-sm { padding: 8px 14px; font-size: 13px; }
.ac-btn-lg { padding: 14px 26px; font-size: 15.5px; }
.ac-btn-block { display: flex; width: 100%; margin-bottom: 8px; }
.ac-btn:disabled, .ac-btn.is-busy { opacity: .55; pointer-events: none; }
.ac-btn:focus-visible, .ac-shell a:focus-visible, .ac-shell button:focus-visible,
.ac-shell summary:focus-visible, .ac-shell [tabindex]:focus-visible {
  outline: 2px solid var(--acc); outline-offset: 2px;
}

.ac-pill {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  background: var(--acc-soft); color: var(--acc);
}
.ac-pill-ok { background: rgba(16,163,127,.14); color: var(--teal); }

.ac-disclaimer {
  font-size: 11.5px; line-height: 1.6; color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  padding: 18px 0 40px; margin-top: 20px; max-width: 78ch;
}
.ac-admin-note {
  background: var(--gold-muted); border: 1px solid var(--border-bright);
  border-radius: var(--radius); padding: 10px 14px; margin: 14px 0;
  font-size: 13px; color: var(--gold);
}
.ac-empty { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.ac-empty-icon { font-size: 44px; margin-bottom: 12px; }
.ac-empty h1, .ac-empty h2 { font-family: var(--font-display); font-size: 22px; color: var(--text-primary); margin-bottom: 8px; }
.ac-empty p { font-size: 14px; margin-bottom: 18px; }
.ac-empty .ac-btn { margin: 0 4px; }

/* ── Progress ring (conic-gradient; no SVG, no JS) ───────────────────────── */
.ac-ring {
  --pct: 0;
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
  background: conic-gradient(var(--acc) calc(var(--pct) * 1%), var(--bg-elevated) 0);
}
.ac-ring::after {
  content: ''; position: absolute; inset: 4px;
  background: var(--bg-card); border-radius: 50%;
}
.ac-ring > span {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--text-primary);
}
.ac-ring-lg { width: 92px; height: 92px; }
.ac-ring-lg > span { font-size: 19px; }

.ac-bar { height: 6px; background: var(--bg-elevated); border-radius: 99px; overflow: hidden; }
.ac-bar > span { display: block; height: 100%; background: var(--acc); border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); }

/* ═══════════════════════════════════════════════════════════════════════════
   CATALOG
   ═══════════════════════════════════════════════════════════════════════════ */
.ac-hero { padding: 40px 0 18px; max-width: 780px; }
.ac-hero-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-muted);
  border: 1px solid var(--border-bright);
  padding: 6px 13px; border-radius: 99px; margin-bottom: 18px;
}
.ac-hero-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 44px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 14px;
}
.ac-hero-sub { font-size: clamp(14px, 2.2vw, 16.5px); line-height: 1.7; color: var(--text-secondary); max-width: 60ch; margin: 0; }

.ac-hero-stats { display: flex; flex-wrap: wrap; gap: 26px; margin-top: 26px; }
.ac-hero-stats > div { display: flex; flex-direction: column; }
.ac-hero-stats strong { font-family: var(--font-mono); font-size: 24px; font-weight: 600; color: var(--gold); letter-spacing: -.5px; }
.ac-hero-stats span { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

/* Continue strip */
.ac-continue-grid { display: grid; gap: 12px; }
.ac-continue {
  display: block; padding: 16px 18px; text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--acc); border-radius: var(--radius);
  transition: var(--transition);
}
.ac-continue:hover { border-color: var(--acc); border-left-color: var(--acc); transform: translateY(-2px); }
.ac-continue-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ac-continue-icon { font-size: 24px; }
.ac-continue-name { font-size: 15px; font-weight: 650; line-height: 1.35; }
.ac-continue-next { font-size: 12.5px; color: var(--acc); margin-top: 4px; }

/* Track chips */
.ac-tracks { display: flex; gap: 8px; flex-wrap: wrap; }
.ac-track-chip {
  padding: 8px 15px; border-radius: 99px; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  transition: var(--transition);
}
.ac-track-chip:hover { border-color: var(--acc); color: var(--acc); }
.ac-track-chip.is-active { background: var(--acc-soft); border-color: var(--acc); color: var(--acc); }
.ac-track-blurb { font-size: 13.5px; color: var(--text-muted); margin-top: 12px; }

/* Programme cards */
.ac-program-grid { display: grid; gap: 16px; }
.ac-program {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  padding: 22px 20px 20px; text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); transition: var(--transition);
}
.ac-program::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--acc);
}
.ac-program:hover {
  border-color: var(--acc); transform: translateY(-3px);
  box-shadow: 0 16px 36px -20px var(--acc);
}
.ac-program-top { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ac-program-icon {
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px;
  background: var(--acc-soft); border-radius: var(--radius); flex-shrink: 0;
}
.ac-program-track {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--acc);
}
.ac-program-name { font-family: var(--font-display); font-size: 19px; font-weight: 700; line-height: 1.25; margin: 0 0 3px; }
.ac-program-sub { font-size: 13px; font-weight: 600; color: var(--acc); margin-bottom: 8px; }
.ac-program-tagline { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 14px; }
.ac-program-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.ac-program-meta span {
  font-size: 11.5px; color: var(--text-muted);
  background: var(--bg-elevated); padding: 3px 9px; border-radius: 99px;
}
.ac-program-level { color: var(--acc) !important; background: var(--acc-soft) !important; }
.ac-program-progress { margin-top: 14px; }
.ac-program-progress small { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 5px; }
.ac-program-foot { margin-top: 14px; }
.ac-program-foot small { font-size: 11.5px; color: var(--text-muted); }
.ac-program-cta { margin-top: 12px; font-size: 13.5px; font-weight: 650; color: var(--acc); }
.ac-program:hover .ac-program-cta { text-decoration: underline; text-underline-offset: 3px; }

/* Why-it-works */
.ac-why-grid { display: grid; gap: 20px; }
.ac-why-item { display: flex; gap: 14px; align-items: flex-start; }
.ac-why-num {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-muted); color: var(--gold);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
}
.ac-why-item h3 { font-size: 15px; font-weight: 650; line-height: 1.35; margin: 3px 0 5px; }
.ac-why-item p { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin: 0; }

.ac-cta {
  background: var(--gradient-card); border: 1px solid var(--border);
  border-radius: var(--radius-xl); padding: 26px 22px;
  display: flex; flex-direction: column; gap: 18px;
}
.ac-cta h2 { font-family: var(--font-display); font-size: 21px; font-weight: 700; margin: 0 0 6px; }
.ac-cta p { font-size: 14px; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: 52ch; }
.ac-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRAMME PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.ac-crumbs { font-size: 12.5px; color: var(--text-muted); padding: 18px 0 14px; }
.ac-crumbs a { color: var(--text-muted); text-decoration: none; }
.ac-crumbs a:hover { color: var(--acc); }

.ac-pg-head { display: grid; gap: 24px; }
.ac-pg-eyebrow {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--acc); margin-bottom: 12px;
}
.ac-pg-icon {
  width: 34px; height: 34px; display: grid; place-items: center; font-size: 18px;
  background: var(--acc-soft); border-radius: var(--radius);
}
.ac-pg-title {
  font-family: var(--font-display); font-size: clamp(27px, 5vw, 42px);
  font-weight: 800; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 6px;
}
.ac-pg-subtitle { font-size: clamp(15px, 2.4vw, 19px); font-weight: 600; color: var(--acc); margin-bottom: 12px; }
.ac-pg-tagline { font-size: 15px; line-height: 1.7; color: var(--text-secondary); max-width: 58ch; margin: 0; }
.ac-pg-stats { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 24px; }
.ac-pg-stats > div { display: flex; flex-direction: column; }
.ac-pg-stats strong { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--text-primary); }
.ac-pg-stats span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-top: 2px; }

.ac-pg-panel {
  background: var(--bg-card); border: 1px solid var(--border);
  border-top: 3px solid var(--acc);
  border-radius: var(--radius-lg); padding: 22px 20px; height: fit-content;
}
.ac-panel-price { font-family: var(--font-mono); font-size: 30px; font-weight: 600; color: var(--acc); margin-bottom: 4px; }
.ac-panel-badge { font-size: 17px; font-weight: 700; color: var(--teal); margin-bottom: 8px; }
.ac-panel-ring { display: flex; justify-content: center; margin-bottom: 14px; }
.ac-panel-note { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px; text-align: center; }
.ac-panel-list { list-style: none; margin: 16px 0 0; padding: 0; }
.ac-panel-list li {
  position: relative; padding-left: 21px; margin-bottom: 8px;
  font-size: 12.5px; line-height: 1.55; color: var(--text-secondary);
}
.ac-panel-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--acc); font-weight: 700; }

.ac-outcomes { display: grid; gap: 10px; }
.ac-outcome {
  display: flex; gap: 11px; align-items: flex-start;
  font-size: 14px; line-height: 1.55;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: 13px 15px;
}
.ac-outcome > span { color: var(--acc); font-weight: 700; flex-shrink: 0; }

.ac-prose { font-size: 15px; line-height: 1.75; color: var(--text-secondary); max-width: 70ch; }
.ac-prose p { margin: 0 0 15px; }
.ac-prose h3 { font-family: var(--font-display); font-size: 19px; color: var(--text-primary); margin: 24px 0 10px; }
.ac-prereq {
  background: var(--bg-elevated); border-left: 3px solid var(--acc);
  border-radius: var(--radius); padding: 12px 15px; font-size: 13.5px;
}

/* Levels accordion */
.ac-levels { display: grid; gap: 10px; }
.ac-level {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ac-level[open] { border-color: var(--border); }
.ac-level.is-done { border-left: 3px solid var(--teal); }
.ac-level-head {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 13px;
  padding: 16px 18px;
}
.ac-level-head::-webkit-details-marker { display: none; }
.ac-level-num {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc);
  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
}
.ac-level.is-done .ac-level-num { background: rgba(16,163,127,.14); color: var(--teal); }
.ac-level-text { flex: 1; min-width: 0; }
.ac-level-title { display: block; font-size: 15.5px; font-weight: 650; line-height: 1.3; }
.ac-level-meta { display: block; font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.ac-level-xp { font-family: var(--font-mono); font-size: 12px; color: var(--acc); flex-shrink: 0; }
.ac-level-body { padding: 0 18px 18px; border-top: 1px solid var(--border-subtle); }
.ac-level-summary { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); padding: 14px 0 4px; margin: 0; }

.ac-module { padding: 15px 0; border-bottom: 1px solid var(--border-subtle); }
.ac-module:last-of-type { border-bottom: 0; }
.ac-module-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.ac-skill-chip {
  display: inline-block; padding: 4px 11px; border-radius: 99px;
  background: var(--acc-soft); color: var(--acc);
  font-size: 12px; font-weight: 650;
}
.ac-module.is-done .ac-skill-chip { background: rgba(16,163,127,.14); color: var(--teal); }
.ac-module-xp { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); flex-shrink: 0; }
.ac-module-title { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.ac-module-why { font-size: 12.5px; line-height: 1.55; color: var(--text-muted); margin: 5px 0 0; }

.ac-lesson-list { list-style: none; margin: 11px 0 0; padding: 0; }
.ac-lesson { margin-bottom: 2px; }
.ac-lesson > a, .ac-lesson > span {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radius); text-decoration: none; color: var(--text-secondary);
  font-size: 13.5px; transition: var(--transition);
}
.ac-lesson > a:hover { background: var(--bg-elevated); color: var(--text-primary); }
.ac-lesson-mark { width: 16px; text-align: center; flex-shrink: 0; color: var(--text-muted); font-size: 12px; }
.ac-lesson.is-done .ac-lesson-mark { color: var(--teal); }
.ac-lesson.is-open .ac-lesson-mark { color: var(--acc); }
.ac-lesson-title { flex: 1; min-width: 0; line-height: 1.4; }
.ac-lesson.is-done .ac-lesson-title { color: var(--text-muted); }
.ac-lesson-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.ac-lesson.is-locked > span { opacity: .55; cursor: not-allowed; }

.ac-boss {
  display: flex; align-items: center; gap: 13px; margin-top: 14px;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--acc-soft); border: 1px dashed var(--acc);
}
.ac-boss.is-passed { background: rgba(16,163,127,.10); border-color: var(--teal); border-style: solid; }
.ac-boss-icon { font-size: 22px; flex-shrink: 0; }
.ac-boss-text { flex: 1; min-width: 0; }
.ac-boss-text strong { display: block; font-size: 14px; font-weight: 650; }
.ac-boss-text span { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }

/* Certificate preview
   ───────────────────────────────────────────────────────────────────────────
   THE ONE PLACE THIS FILE HARD-CODES COLOUR, AND DELIBERATELY SO.

   Everything else here reads theme tokens. This block does not, because it is
   a preview of a PRINTED artefact: the PNG that includes/certificate.php draws
   is always dark navy and gold, whatever theme the learner is using. If this
   frame followed the theme, someone on Meridian would see a cream certificate
   on screen and then download a navy one. The preview has to lie about the
   theme in order to tell the truth about the certificate.

   Keep these values in sync with the palette in includes/certificate.php. */
.ac-certpreview { display: grid; gap: 24px; align-items: center; }
.ac-certframe {
  aspect-ratio: 1.414 / 1; border-radius: var(--radius);
  background: #0B1120; border: 3px solid var(--gold);
  padding: 10px; overflow: hidden;
}
.ac-certframe-inner {
  height: 100%; border: 1px solid rgba(212,175,55,.45); border-radius: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; padding: 14px;
}
.ac-certframe-crest {
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--gold); color: var(--gold);
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
}
.ac-certframe-org { font-size: 8.5px; letter-spacing: .22em; color: #F0ECE0; }
.ac-certframe-name {
  font-family: var(--font-display); font-size: clamp(17px, 3.4vw, 26px);
  font-weight: 700; color: #fff; line-height: 1.1;
}
.ac-certframe-prog { font-size: 11px; color: var(--gold); line-height: 1.3; max-width: 80%; }
.ac-certframe-foot { font-family: var(--font-mono); font-size: 8px; color: #96A0B4; margin-top: 4px; }
.ac-certtext p { font-size: 14px; line-height: 1.65; color: var(--text-secondary); }
.ac-fineprint { font-size: 11.5px !important; color: var(--text-muted) !important; margin-top: 14px; }

/* FAQ */
.ac-faq { display: grid; gap: 9px; }
.ac-faq-item { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius); overflow: hidden; }
.ac-faq-item[open] { border-color: var(--border); }
.ac-faq-q {
  list-style: none; cursor: pointer; position: relative;
  padding: 15px 46px 15px 17px; font-size: 14.5px; font-weight: 650; line-height: 1.45;
}
.ac-faq-q::-webkit-details-marker { display: none; }
.ac-faq-q::after {
  content: '+'; position: absolute; right: 17px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 19px; color: var(--acc);
}
.ac-faq-item[open] .ac-faq-q::after { content: '\2212'; }
.ac-faq-a { padding: 0 17px 16px; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }

/* ═══════════════════════════════════════════════════════════════════════════
   LESSON READER
   ═══════════════════════════════════════════════════════════════════════════ */
.ac-readbar { position: sticky; top: 0; z-index: 40; height: 3px; background: var(--bg-elevated); }
.ac-readbar-fill { height: 100%; background: var(--acc); transition: width .4s ease; }

.ac-reader-wrap { max-width: 720px; }
.ac-reader-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 18px 0 14px; flex-wrap: wrap;
}
.ac-reader-back { font-size: 13px; color: var(--text-muted); text-decoration: none; }
.ac-reader-back:hover { color: var(--acc); }
.ac-reader-pos { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }

.ac-skillbanner {
  background: var(--acc-soft); border: 1px solid var(--acc);
  border-radius: var(--radius); padding: 13px 16px; margin-bottom: 26px;
}
.ac-skillbanner-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ac-skillbanner-xp { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--acc); }
.ac-skillbanner-why { font-size: 12.5px; line-height: 1.55; color: var(--text-secondary); margin: 8px 0 0; }

.ac-article-head { margin-bottom: 30px; }
.ac-article-title {
  font-family: var(--font-display); font-size: clamp(25px, 4.6vw, 36px);
  font-weight: 800; line-height: 1.15; letter-spacing: -.02em; margin: 0 0 10px;
}
.ac-article-sub { font-size: 16px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 12px; }
.ac-article-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); }

/* ── Blocks ──────────────────────────────────────────────────────────────── */
.ac-block { margin-bottom: 26px; }

.ac-text { font-size: 16.5px; line-height: 1.8; color: var(--text-secondary); }
.ac-text p { margin: 0 0 17px; }
.ac-text strong { color: var(--text-primary); font-weight: 650; }
.ac-text ul, .ac-text ol { margin: 0 0 17px; padding-left: 22px; }
.ac-text li { margin-bottom: 8px; }
.ac-text a { color: var(--acc); }

.ac-figure { margin: 0 0 26px; }
.ac-figure img { width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border-subtle); }
.ac-caption { font-size: 12.5px; color: var(--text-muted); margin-top: 8px; text-align: center; }

/* The ribbon marks the three beats that are not plain reading. Shape, not
   colour alone, so a learner scrolling back finds "the bit with the example"
   without reading a word. */
.ac-ribbon {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px;
  border-radius: 99px; background: var(--acc); color: var(--bg-void);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
}
.ac-ribbon-do  { background: var(--teal); }
.ac-ribbon-own { background: var(--ember, #E8833A); }

.ac-example {
  background: var(--bg-elevated);
  border: 1px solid var(--border); border-left: 4px solid var(--acc);
  border-radius: var(--radius-lg); padding: 20px 20px 18px;
}
.ac-example-title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.ac-example-body { font-size: 15px; line-height: 1.75; color: var(--text-secondary); }
.ac-example-body p { margin: 0 0 13px; }
.ac-steps { width: 100%; border-collapse: collapse; margin: 14px 0 4px; }
.ac-steps td { padding: 9px 6px; border-bottom: 1px solid var(--border-subtle); font-size: 14px; vertical-align: top; }
.ac-steps tr:last-child td { border-bottom: 0; }
.ac-step-n {
  width: 26px; color: var(--acc); font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
}
.ac-step-label { color: var(--text-secondary); }
.ac-step-value { text-align: right; font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); white-space: nowrap; }
.ac-example-result {
  margin-top: 14px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--acc-soft); color: var(--acc);
  font-size: 14.5px; font-weight: 650; line-height: 1.5;
}

.ac-callout { border-radius: var(--radius-lg); padding: 17px 19px; }
.ac-callout-label {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px;
}
.ac-callout-body { font-size: 14.5px; line-height: 1.7; }
.ac-callout-body p { margin: 0 0 11px; }
.ac-callout-body p:last-child { margin-bottom: 0; }

.ac-takeaway { background: var(--acc-soft); border: 1px solid var(--acc); }
.ac-takeaway .ac-callout-label { color: var(--acc); }
.ac-takeaway .ac-callout-body { color: var(--text-primary); }

.ac-coach {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 4px solid var(--ember, #E8833A);
}
.ac-coach-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.ac-coach-avatar {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(232,131,58,.14); font-size: 15px; flex-shrink: 0;
}
.ac-coach .ac-callout-label { color: var(--ember, #E8833A); margin-bottom: 0; }
.ac-coach .ac-callout-body { color: var(--text-secondary); font-style: italic; }
.ac-coach-intro { font-style: normal; }

.ac-tryit { background: var(--bg-elevated); border: 1px dashed var(--acc); }
.ac-tryit .ac-callout-label { color: var(--acc); }
.ac-tryit .ac-callout-body { color: var(--text-secondary); }

.ac-disclaimer-block, .ac-disclaimer.ac-block {
  font-size: 11.5px; line-height: 1.6; color: var(--text-muted);
  border-top: 1px solid var(--border-subtle); padding-top: 14px;
}

/* Inline check */
.ac-check {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 18px 19px;
}
.ac-check-q { font-size: 15.5px; font-weight: 650; line-height: 1.45; margin-bottom: 13px; }
.ac-check-opts { display: grid; gap: 8px; }
.ac-check-opt {
  text-align: left; padding: 11px 14px; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); color: var(--text-primary);
  font-family: var(--font-body); font-size: 14px; line-height: 1.45;
  transition: var(--transition);
}
.ac-check-opt:hover { border-color: var(--border-bright); }
.ac-check-opt.is-right { border-color: var(--teal); background: rgba(16,163,127,.12); color: var(--teal); }
.ac-check-opt.is-wrong { border-color: var(--rose); background: rgba(225,72,90,.10); color: var(--rose); }
.ac-check-opt.is-muted { opacity: .5; }
.ac-check-why {
  margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--border-subtle);
  font-size: 13.5px; line-height: 1.7; color: var(--text-secondary);
}

/* ── Interactive widgets ─────────────────────────────────────────────────── */
.ac-widget {
  background: var(--bg-card); border: 1px solid var(--teal);
  border-radius: var(--radius-lg); padding: 20px;
}
.ac-widget-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.ac-widget-intro { font-size: 14px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 16px; }
.ac-widget-note { font-size: 11.5px; line-height: 1.55; color: var(--text-muted); margin: 14px 0 0; }
.ac-widget-error {
  background: rgba(225,72,90,.10); border: 1px solid var(--rose);
  border-radius: var(--radius); padding: 12px 15px; font-size: 13px; color: var(--rose);
}

.ac-range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
  background: var(--bg-elevated); border-radius: 99px; outline: none; cursor: pointer;
}
.ac-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); border: 3px solid var(--bg-card); cursor: pointer;
}
.ac-range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--teal); border: 3px solid var(--bg-card); cursor: pointer; border-width: 3px;
}
.ac-slider-row { margin-bottom: 16px; }
.ac-slider-row label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 13px; color: var(--text-secondary); margin-bottom: 7px;
}
.ac-out { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--text-primary); }

.ac-sip-result {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); overflow: hidden; margin-top: 6px;
}
.ac-sip-cell { background: var(--bg-elevated); padding: 13px 10px; text-align: center; }
.ac-sip-cell span { display: block; font-family: var(--font-mono); font-size: 16px; font-weight: 600; letter-spacing: -.4px; }
.ac-sip-cell small { display: block; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; }
.ac-sip-gain span  { color: var(--teal); }
.ac-sip-total span { color: var(--acc); }

.ac-redflag { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ac-flag-item {
  position: relative; padding: 13px 44px 13px 15px; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); font-size: 14px; line-height: 1.5;
  transition: var(--transition);
}
.ac-flag-item:hover { border-color: var(--border-bright); }
.ac-flag-mark {
  position: absolute; right: 14px; top: 13px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--text-muted);
}
.ac-flag-item.is-picked { border-color: var(--acc); background: var(--acc-soft); }
.ac-flag-item.is-correct   { border-color: var(--teal); background: rgba(16,163,127,.12); }
.ac-flag-item.is-incorrect { border-color: var(--rose); background: rgba(225,72,90,.10); }
.ac-flag-item.is-missed    { border-color: var(--ember, #E8833A); border-style: dashed; }
.ac-flag-why { display: none; font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); margin-top: 8px; }
.ac-flag-item.is-revealed .ac-flag-why { display: block; }
.ac-flag-score { font-size: 13.5px; font-weight: 600; margin: 14px 0 10px; min-height: 20px; }

.ac-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: acord; }
.ac-order-item {
  display: flex; align-items: center; gap: 11px; padding: 12px 14px; cursor: grab;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); font-size: 14px; line-height: 1.45;
}
.ac-order-item.is-dragging { opacity: .4; }
.ac-order-item.is-right { border-color: var(--teal); }
.ac-order-item.is-wrong { border-color: var(--rose); }
.ac-order-grip { color: var(--text-muted); flex-shrink: 0; }
.ac-order-text { flex: 1; min-width: 0; }
.ac-order-moves { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.ac-order-moves button {
  width: 24px; height: 18px; padding: 0; cursor: pointer; line-height: 1; font-size: 9px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 4px; color: var(--text-muted);
}
.ac-order-moves button:hover { border-color: var(--acc); color: var(--acc); }
.ac-order-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.ac-order-result { font-size: 13.5px; font-weight: 600; }

.ac-prompt-compare { display: grid; gap: 12px; }
.ac-prompt-col { border-radius: var(--radius); padding: 14px; border: 1px solid var(--border-subtle); background: var(--bg-elevated); }
.ac-prompt-bad  { border-color: var(--rose); }
.ac-prompt-good { border-color: var(--teal); }
.ac-prompt-tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-bottom: 9px;
}
.ac-prompt-bad  .ac-prompt-tag { color: var(--rose); }
.ac-prompt-good .ac-prompt-tag { color: var(--teal); }
.ac-prompt-text {
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; margin: 0; color: var(--text-primary);
}
.ac-prompt-out { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--border-subtle); }
.ac-prompt-out small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ac-prompt-out p { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin: 5px 0 0; }
.ac-prompt-build { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border-subtle); }
.ac-prompt-build-label { font-size: 13.5px; font-weight: 600; margin: 0 0 10px; }
.ac-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.ac-chip {
  padding: 7px 13px; cursor: pointer; border-radius: 99px;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: 12.5px; font-weight: 600;
  transition: var(--transition);
}
.ac-chip:hover { border-color: var(--teal); color: var(--teal); }
.ac-chip.is-used { opacity: .45; }
.ac-prompt-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  color: var(--text-primary); font-family: var(--font-mono); font-size: 13px;
  line-height: 1.6; resize: vertical;
}
.ac-prompt-meter { font-size: 12.5px; color: var(--text-muted); margin-top: 9px; min-height: 18px; }

.ac-scenario-setup {
  background: var(--bg-elevated); border-radius: var(--radius);
  padding: 14px 16px; font-size: 14.5px; line-height: 1.65; margin-bottom: 14px;
}
.ac-scenario-choices { display: grid; gap: 8px; }
.ac-scenario-choice {
  text-align: left; padding: 13px 15px; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); color: var(--text-primary);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  transition: var(--transition);
}
.ac-scenario-choice:hover { border-color: var(--border-bright); }
.ac-scenario-choice.is-chosen[data-verdict="good"] { border-color: var(--teal); background: rgba(16,163,127,.12); }
.ac-scenario-choice.is-chosen[data-verdict="ok"]   { border-color: var(--acc);  background: var(--acc-soft); }
.ac-scenario-choice.is-chosen[data-verdict="poor"] { border-color: var(--rose); background: rgba(225,72,90,.10); }
.ac-scenario-choice.is-dim { opacity: .45; }
.ac-scenario-feedback { margin-top: 14px; font-size: 13.5px; line-height: 1.7; color: var(--text-secondary); }

.ac-alloc-row { margin-bottom: 15px; }
.ac-alloc-row label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 7px; }
.ac-alloc-note { font-size: 11.5px; color: var(--text-muted); margin: 6px 0 0; }
.ac-alloc-total {
  margin-top: 6px; padding: 11px 14px; border-radius: var(--radius);
  background: var(--bg-elevated); font-size: 13.5px; font-weight: 600;
}
.ac-alloc-total.is-off { color: var(--rose); }
.ac-alloc-total.is-ok  { color: var(--teal); }

/* ── OWN block ───────────────────────────────────────────────────────────── */
.ac-own {
  background: var(--bg-card);
  border: 1px solid var(--ember, #E8833A);
  border-radius: var(--radius-lg); padding: 20px;
}
.ac-own-prompt { font-size: 16px; font-weight: 650; line-height: 1.45; margin-bottom: 8px; }
.ac-own-body { font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); margin-bottom: 12px; }
.ac-own-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  color: var(--text-primary); font-family: var(--font-body); font-size: 14.5px;
  line-height: 1.6; resize: vertical;
}
.ac-own-input:focus { border-color: var(--ember, #E8833A); outline: none; }
.ac-own-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 11px; }
.ac-own-status { font-size: 12.5px; color: var(--teal); }
.ac-own-signin { font-size: 13.5px; color: var(--text-muted); }
.ac-own-signin a { color: var(--acc); }
.ac-own .ac-btn-primary { background: var(--ember, #E8833A); border-color: var(--ember, #E8833A); }

/* ── Complete ────────────────────────────────────────────────────────────── */
.ac-complete {
  margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--border-subtle); text-align: center;
}
.ac-complete-tease {
  background: var(--acc-soft); border-radius: var(--radius); padding: 13px 16px;
  font-size: 14px; line-height: 1.6; color: var(--text-primary); margin: 0 0 16px;
}
.ac-complete-note { font-size: 12px; color: var(--text-muted); margin: 10px 0 0; }
.ac-complete-done { display: flex; flex-direction: column; align-items: center; gap: 13px; }
.ac-complete-done > span { font-size: 14.5px; font-weight: 600; color: var(--teal); }

.ac-pager { display: grid; gap: 10px; margin: 30px 0 60px; }
.ac-pager-link {
  display: block; padding: 15px 17px; text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); transition: var(--transition);
}
.ac-pager-link:hover { border-color: var(--acc); }
.ac-pager-link small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 4px; }
.ac-pager-link span { font-size: 14px; font-weight: 600; line-height: 1.4; }
.ac-pager-next { text-align: right; }

/* ── Celebration ─────────────────────────────────────────────────────────── */
.ac-celebrate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 20px;
  background: rgba(6, 10, 20, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: acFade .3s ease;
}
.ac-celebrate[hidden] { display: none; }
@keyframes acFade { from { opacity: 0 } to { opacity: 1 } }
.ac-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ac-celebrate-card {
  position: relative; z-index: 1; max-width: 440px; width: 100%; text-align: center;
  background: var(--bg-card); border: 1px solid var(--acc);
  border-radius: var(--radius-xl); padding: 32px 26px;
  animation: acPop .45s cubic-bezier(.2,1.2,.4,1);
}
@keyframes acPop { from { transform: scale(.88) translateY(14px); opacity: 0 } to { transform: none; opacity: 1 } }
.ac-celebrate-icon { font-size: 46px; margin-bottom: 10px; }
.ac-celebrate-eyebrow {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-bottom: 8px;
}
.ac-celebrate-title { font-family: var(--font-display); font-size: 25px; font-weight: 800; line-height: 1.2; margin: 0 0 12px; }
.ac-celebrate-why { font-size: 14.5px; line-height: 1.7; color: var(--text-secondary); margin: 0 0 18px; }
.ac-celebrate-xp {
  display: inline-block; font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--acc); background: var(--acc-soft);
  padding: 8px 16px; border-radius: 99px; margin-bottom: 20px;
}
.ac-celebrate-actions { display: flex; flex-direction: column; gap: 9px; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
.ac-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 250; max-width: 90vw;
  background: var(--bg-card); border: 1px solid var(--border-bright);
  border-radius: 99px; padding: 11px 20px;
  font-size: 13.5px; color: var(--text-primary); box-shadow: var(--shadow-lg);
  animation: acToast .3s ease;
}
.ac-toast.is-error { border-color: var(--rose); color: var(--rose); }
@keyframes acToast { from { opacity: 0; transform: translate(-50%, 12px) } to { opacity: 1; transform: translate(-50%, 0) } }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 640px) {
  .ac-continue-grid  { grid-template-columns: repeat(2, 1fr); }
  .ac-program-grid   { grid-template-columns: repeat(2, 1fr); }
  .ac-outcomes       { grid-template-columns: 1fr 1fr; }
  .ac-why-grid       { grid-template-columns: 1fr 1fr; gap: 24px 28px; }
  .ac-pager          { grid-template-columns: 1fr 1fr; }
  .ac-prompt-compare { grid-template-columns: 1fr 1fr; }
  .ac-celebrate-actions { flex-direction: row; justify-content: center; }
}

@media (min-width: 900px) {
  .ac-section        { padding: 44px 0; }
  .ac-continue-grid  { grid-template-columns: repeat(3, 1fr); }
  .ac-program-grid   { grid-template-columns: repeat(3, 1fr); }
  .ac-pg-head        { grid-template-columns: 1fr 330px; gap: 40px; align-items: start; }
  .ac-certpreview    { grid-template-columns: 380px 1fr; gap: 36px; }
  .ac-cta            { flex-direction: row; align-items: center; justify-content: space-between; padding: 32px 34px; }
  .ac-cta-actions    { flex-shrink: 0; }
  .ac-why-grid       { grid-template-columns: repeat(2, 1fr); }
}

/* Reduced motion: keep every state change, remove every movement. */
@media (prefers-reduced-motion: reduce) {
  .ac-program:hover, .ac-continue:hover, .ac-btn-primary:hover { transform: none; }
  .ac-celebrate, .ac-celebrate-card, .ac-toast { animation: none; }
  .ac-bar > span, .ac-readbar-fill { transition: none; }
  .ac-confetti { display: none; }
}

/* Print — a learner printing a lesson wants the lesson, not the chrome. */
@media print {
  .ac-readbar, .ac-reader-top, .ac-complete, .ac-pager,
  .ac-celebrate, .ac-widget, .ac-own { display: none !important; }
  .ac-article { max-width: 100%; }
  .ac-example, .ac-callout { break-inside: avoid; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EXAMS
   ═══════════════════════════════════════════════════════════════════════════ */
.ac-exam-intro { text-align: center; max-width: 620px; margin: 0 auto; padding: 20px 0 60px; }
.ac-exam-icon { font-size: 50px; margin-bottom: 12px; }
.ac-exam-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-bottom: 10px;
}
.ac-exam-title {
  font-family: var(--font-display); font-size: clamp(24px, 4.4vw, 34px);
  font-weight: 800; line-height: 1.15; margin: 0 0 14px;
}
.ac-exam-lede { font-size: 15px; line-height: 1.7; color: var(--text-secondary); margin: 0 auto 26px; max-width: 50ch; }

.ac-exam-rules {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 26px;
}
.ac-exam-rules > div { background: var(--bg-card); padding: 16px 10px; }
.ac-exam-rules strong {
  display: block; font-family: var(--font-mono); font-size: 22px;
  font-weight: 600; color: var(--text-primary); letter-spacing: -.5px;
}
.ac-exam-rules span {
  display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 4px;
}

.ac-exam-history { text-align: left; margin-bottom: 26px; }
.ac-attempt-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 0; border-bottom: 1px solid var(--border-subtle); font-size: 13px;
}
.ac-attempt-row:last-child { border-bottom: 0; }
.ac-attempt-n { font-family: var(--font-mono); color: var(--text-muted); width: 28px; }
.ac-attempt-score { font-family: var(--font-mono); font-size: 15px; font-weight: 600; min-width: 46px; }
.ac-attempt-score.is-pass { color: var(--teal); }
.ac-attempt-meta { color: var(--text-muted); flex: 1; min-width: 120px; }
.ac-attempt-date { color: var(--text-muted); font-size: 12px; }

.ac-exam-action { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ac-exam-warn { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); max-width: 44ch; margin: 0; }
.ac-exam-attempts { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin: 0; }
.ac-exam-blocked {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px;
  font-size: 14px; line-height: 1.6; color: var(--text-secondary); max-width: 48ch;
}
.ac-exam-passed { font-size: 15px; font-weight: 650; color: var(--teal); }

/* ── The paper ───────────────────────────────────────────────────────────── */
.ac-exam-bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; margin-bottom: 4px;
  background: var(--bg-void); border-bottom: 1px solid var(--border-subtle);
}
.ac-exam-bar-title { display: block; font-size: 14px; font-weight: 650; line-height: 1.3; }
.ac-exam-bar-count { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ac-exam-clock {
  font-family: var(--font-mono); font-size: 21px; font-weight: 600;
  color: var(--text-primary); font-variant-numeric: tabular-nums; flex-shrink: 0;
  padding: 5px 13px; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
}
.ac-exam-clock.is-warning { color: var(--ember, #E8833A); border-color: var(--ember, #E8833A); }
.ac-exam-clock.is-urgent  { color: var(--rose); border-color: var(--rose); animation: acPulse 1s infinite; }
@keyframes acPulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

.ac-exam-progress {
  position: sticky; top: 62px; z-index: 29;
  height: 3px; background: var(--bg-elevated); margin-bottom: 26px;
}
.ac-exam-progress > span { display: block; height: 100%; background: var(--acc); transition: width .3s ease; }

.ac-q {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--bg-card); padding: 20px; margin: 0 0 14px;
}
.ac-q.is-answered { border-color: var(--border); }
.ac-q-legend { padding: 0; margin-bottom: 14px; width: 100%; }
.ac-q-num {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin-bottom: 6px;
}
.ac-q.is-answered .ac-q-num::after { content: '  \2713'; color: var(--teal); }
.ac-q-text { display: block; font-size: 16px; font-weight: 600; line-height: 1.5; }
.ac-q-opts { display: grid; gap: 8px; }
.ac-q-opt {
  position: relative;
  display: flex; align-items: flex-start; gap: 11px; padding: 12px 14px; cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); font-size: 14.5px; line-height: 1.5;
  transition: var(--transition);
}
.ac-q-opt:hover { border-color: var(--border-bright); }
.ac-q-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.ac-q-dot {
  flex-shrink: 0; width: 17px; height: 17px; margin-top: 2px;
  border: 2px solid var(--text-muted); border-radius: 50%; transition: var(--transition);
}
/* :has() is progressive enhancement here — the dot below already communicates
   the selection on its own, so a browser without :has() loses only the tint. */
.ac-q-opt:has(input:checked) { border-color: var(--acc); background: var(--acc-soft); }
.ac-q-opt input:checked ~ .ac-q-dot {
  border-color: var(--acc); background: var(--acc);
  box-shadow: inset 0 0 0 3px var(--bg-card);
}
.ac-q-opt input:focus-visible ~ .ac-q-dot { outline: 2px solid var(--acc); outline-offset: 2px; }
.ac-q-label { flex: 1; min-width: 0; }

.ac-exam-submit { text-align: center; padding: 26px 0 60px; }
.ac-exam-submit-note { font-size: 13.5px; color: var(--text-muted); margin: 0 0 14px; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESULT
   ═══════════════════════════════════════════════════════════════════════════ */
.ac-result {
  text-align: center; padding: 34px 22px; margin: 20px 0 12px;
  border-radius: var(--radius-xl); border: 1px solid var(--border);
  background: var(--bg-card);
}
.ac-result.is-pass { border-color: var(--teal); }
.ac-result-icon { font-size: 46px; margin-bottom: 10px; }
.ac-result-score {
  font-family: var(--font-mono); font-size: clamp(42px, 9vw, 62px);
  font-weight: 600; line-height: 1; letter-spacing: -2px;
}
.ac-result.is-pass .ac-result-score { color: var(--teal); }
.ac-result.is-fail .ac-result-score { color: var(--text-primary); }
.ac-result-detail { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); margin-top: 8px; }
.ac-result-title { font-family: var(--font-display); font-size: 25px; font-weight: 800; margin: 18px 0 10px; }
.ac-result-msg { font-size: 15px; line-height: 1.7; color: var(--text-secondary); max-width: 50ch; margin: 0 auto 22px; }
.ac-result-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.ac-review { display: grid; gap: 10px; }
.ac-review-item {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  background: var(--bg-card); overflow: hidden;
}
.ac-review-item.is-wrong { border-left: 3px solid var(--rose); }
.ac-review-item.is-right { border-left: 3px solid var(--teal); }
.ac-review-head { display: flex; gap: 11px; padding: 15px 17px 11px; }
.ac-review-mark {
  flex-shrink: 0; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
}
.ac-review-item.is-right .ac-review-mark { background: rgba(16,163,127,.16); color: var(--teal); }
.ac-review-item.is-wrong .ac-review-mark { background: rgba(225,72,90,.14); color: var(--rose); }
.ac-review-q { font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.ac-review-body { padding: 0 17px 15px 49px; }
.ac-review-line { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; font-size: 13.5px; }
.ac-review-line small {
  flex-shrink: 0; width: 92px; font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--text-muted);
}
.ac-review-mine span  { color: var(--rose); }
.ac-review-right span { color: var(--teal); font-weight: 600; }
.ac-review-why {
  margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--border-subtle);
  font-size: 13px; line-height: 1.7; color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CERTIFICATE PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
.ac-cert-page { padding-bottom: 60px; }
.ac-cert-head { text-align: center; padding: 14px 0 24px; }
.ac-cert-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-bottom: 10px;
}
.ac-cert-title { font-family: var(--font-display); font-size: clamp(24px, 4.4vw, 34px); font-weight: 800; line-height: 1.15; margin: 0 0 10px; }
.ac-cert-meta { font-size: 13.5px; color: var(--text-muted); }
.ac-cert-image img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
.ac-cert-fallback {
  background: var(--bg-elevated); border: 1px dashed var(--border);
  border-radius: var(--radius-lg); padding: 26px 22px; text-align: center;
  font-size: 14px; line-height: 1.7; color: var(--text-secondary);
}
.ac-cert-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 22px; }
.ac-cert-verify {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 18px 20px;
}
.ac-cert-id { margin-bottom: 14px; }
.ac-cert-id small, .ac-cert-link small {
  display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 5px;
}
.ac-cert-id code { font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--acc); }
.ac-cert-link input {
  width: 100%; padding: 10px 13px; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-family: var(--font-mono); font-size: 12.5px;
}
.ac-cert-count { font-size: 12px; color: var(--text-muted); margin: 11px 0 0; }
.ac-revoked-note {
  background: rgba(225,72,90,.10); border: 1px solid var(--rose);
  border-radius: var(--radius); padding: 15px 18px; margin: 18px 0;
  font-size: 13.5px; line-height: 1.65; color: var(--rose);
}
.ac-revoked-note span { display: block; margin-top: 5px; color: var(--text-secondary); }

.ac-skill-grid { display: grid; gap: 8px; }
.ac-skill-tile {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--acc); border-radius: var(--radius);
  padding: 12px 15px; font-size: 14px; line-height: 1.45;
}
.ac-skill-tile > span { color: var(--acc); font-weight: 700; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════════
   VERIFICATION
   ═══════════════════════════════════════════════════════════════════════════ */
.vf-wrap { padding: 28px 0 70px; }
.vf-verdict {
  text-align: center; padding: 34px 24px; border-radius: var(--radius-xl);
  border: 2px solid var(--border); background: var(--bg-card); margin-bottom: 22px;
}
.vf-verdict.is-valid   { border-color: var(--teal); }
.vf-verdict.is-revoked { border-color: var(--rose); }
.vf-verdict-icon {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
  display: grid; place-items: center; font-size: 30px; font-weight: 700;
}
.vf-verdict.is-valid   .vf-verdict-icon { background: rgba(16,163,127,.16); color: var(--teal); }
.vf-verdict.is-invalid .vf-verdict-icon { background: var(--bg-elevated); color: var(--text-muted); }
.vf-verdict.is-revoked .vf-verdict-icon { background: rgba(225,72,90,.14); color: var(--rose); }
.vf-verdict.is-unknown .vf-verdict-icon { background: var(--bg-elevated); }
.vf-verdict-title { font-family: var(--font-display); font-size: clamp(25px, 5vw, 36px); font-weight: 800; margin: 0 0 12px; }
.vf-verdict.is-valid   .vf-verdict-title { color: var(--teal); }
.vf-verdict.is-revoked .vf-verdict-title { color: var(--rose); }
.vf-verdict-line { font-size: 16px; line-height: 1.7; color: var(--text-secondary); max-width: 46ch; margin: 0 auto; }
.vf-verdict-line strong { color: var(--text-primary); }
.vf-note { font-size: 13px; line-height: 1.65; color: var(--text-muted); max-width: 46ch; margin: 16px auto 0; }
.vf-lookup { text-align: center; padding: 40px 24px; }
.vf-form { display: flex; gap: 9px; max-width: 400px; margin: 22px auto 0; flex-wrap: wrap; justify-content: center; }
.vf-form input {
  flex: 1; min-width: 210px; padding: 12px 15px; border-radius: var(--radius);
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-primary); font-family: var(--font-mono);
  font-size: 14px; text-transform: uppercase; letter-spacing: .04em;
}
.vf-form input:focus { border-color: var(--acc); outline: none; }

.vf-facts {
  display: grid; gap: 1px; background: var(--border-subtle);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  overflow: hidden; margin: 0 0 26px;
}
.vf-facts > div { background: var(--bg-card); padding: 14px 18px; display: flex; gap: 14px; flex-wrap: wrap; }
.vf-facts dt {
  width: 120px; flex-shrink: 0; font-size: 11.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin: 0;
}
.vf-facts dd { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.45; flex: 1; min-width: 140px; }
.vf-facts code { font-family: var(--font-mono); font-size: 13.5px; color: var(--acc); }
.vf-skills, .vf-about { margin-bottom: 30px; }
.vf-about p { font-size: 14px; line-height: 1.75; color: var(--text-secondary); margin: 0 0 13px; max-width: 62ch; }

.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;
}

@media (min-width: 640px) {
  .ac-exam-rules     { grid-template-columns: repeat(4, 1fr); }
  .ac-skill-grid     { grid-template-columns: 1fr 1fr; }
  .ac-result-actions { flex-direction: row; justify-content: center; }
}
@media (min-width: 900px) {
  .ac-skill-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Printing a certificate page should print the certificate, nothing else. */
@media print {
  .ac-crumbs, .ac-cert-actions, .ac-cert-verify, .ac-fineprint,
  .vf-form, .ac-exam-bar, .ac-exam-progress { display: none !important; }
  .ac-cert-image img { border: 0; box-shadow: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKILL PASSPORT · PLAYBOOK · MY LEARNING · PATH · LEAGUE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared page header ──────────────────────────────────────────────────── */
.ac-sp-head { padding: 18px 0 24px; }
.ac-sp-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--acc); margin-bottom: 9px;
}
.ac-sp-title {
  font-family: var(--font-display); font-size: clamp(26px, 5vw, 38px);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 10px;
}
.ac-sp-sub { font-size: 14.5px; line-height: 1.65; color: var(--text-secondary); max-width: 54ch; margin: 0; }
.ac-sp-count {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px;
  background: var(--acc-soft); color: var(--acc);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  vertical-align: middle;
}

/* ── Skill Passport ──────────────────────────────────────────────────────── */
.ac-sp-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 10px;
}
.ac-sp-stats > div { background: var(--bg-card); padding: 16px 12px; text-align: center; }
.ac-sp-stats strong {
  display: block; font-family: var(--font-mono); font-size: 24px;
  font-weight: 600; color: var(--gold); letter-spacing: -.6px;
}
.ac-sp-stats span {
  display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 4px;
}

.ac-sp-certs { display: grid; gap: 9px; }
.ac-sp-cert {
  display: flex; align-items: center; gap: 13px; padding: 15px 17px;
  text-decoration: none; color: inherit;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--acc); border-radius: var(--radius);
  transition: var(--transition);
}
.ac-sp-cert:hover { border-color: var(--acc); transform: translateX(2px); }
.ac-sp-cert.is-revoked { border-left-color: var(--rose); opacity: .7; }
.ac-sp-cert-icon { font-size: 24px; flex-shrink: 0; }
.ac-sp-cert-body { min-width: 0; }
.ac-sp-cert-name { display: block; font-size: 15px; font-weight: 650; line-height: 1.35; }
.ac-sp-cert-meta { display: block; font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }

.ac-sp-grid { display: grid; gap: 10px; }
.ac-sp-tile {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--acc); border-radius: var(--radius-lg);
  padding: 16px 17px;
}
.ac-sp-tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ac-sp-tile-check {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acc-soft); color: var(--acc); font-size: 12px; font-weight: 700;
}
.ac-sp-tile-xp { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.ac-sp-tile-name { font-size: 15px; font-weight: 650; line-height: 1.35; margin-bottom: 6px; }
.ac-sp-tile-meta { font-size: 12.5px; color: var(--text-secondary); }
.ac-sp-tile-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); margin-top: 7px; }

/* ── Playbook ────────────────────────────────────────────────────────────── */
.ac-pb-msg {
  background: var(--acc-soft); border: 1px solid var(--acc);
  border-radius: var(--radius); padding: 11px 15px; margin-bottom: 18px;
  font-size: 13.5px; color: var(--acc);
}
.ac-pb-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); margin-bottom: 6px; }
.ac-pb-list { display: grid; gap: 12px; }
.ac-pb-entry {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--ember, #E8833A);
  border-radius: var(--radius-lg); padding: 17px 19px;
}
.ac-pb-entry-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.ac-pb-type {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ember, #E8833A);
  background: rgba(232,131,58,.12); padding: 3px 10px; border-radius: 99px;
}
.ac-pb-entry-head time { font-size: 11.5px; color: var(--text-muted); }
.ac-pb-prompt {
  font-size: 13.5px; font-weight: 600; line-height: 1.5;
  color: var(--text-secondary); margin-bottom: 10px;
  padding-left: 12px; border-left: 2px solid var(--border);
}
/* The learner's own words get the most readable treatment on the page. */
.ac-pb-content { font-size: 15.5px; line-height: 1.75; color: var(--text-primary); }
.ac-pb-entry-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border-subtle);
}
.ac-pb-context { font-size: 12px; color: var(--text-muted); }
.ac-pb-del { margin: 0; }
.ac-pb-del button {
  background: none; border: 0; cursor: pointer; padding: 2px 4px;
  font-family: var(--font-body); font-size: 12px; color: var(--text-muted);
  text-decoration: underline; text-underline-offset: 2px;
}
.ac-pb-del button:hover { color: var(--rose); }
.ac-pb-privacy {
  font-size: 12.5px; line-height: 1.6; color: var(--text-muted);
  background: var(--bg-elevated); border-radius: var(--radius);
  padding: 13px 16px; margin: 26px 0 50px;
}

/* ── My learning ─────────────────────────────────────────────────────────── */
.ac-ml-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; padding: 18px 0 22px;
}
.ac-theme-switch { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
.ac-theme-switch label {
  font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}
.ac-theme-switch select {
  padding: 8px 12px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-primary); font-family: var(--font-body); font-size: 13px; cursor: pointer;
}
.ac-theme-switch select:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

.ac-ml-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  background: var(--border-subtle); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 8px;
}
.ac-ml-stat {
  background: var(--bg-card); padding: 16px 12px; text-align: center;
  text-decoration: none; color: inherit; transition: var(--transition);
}
a.ac-ml-stat:hover { background: var(--bg-hover); }
.ac-ml-stat strong {
  display: block; font-family: var(--font-mono); font-size: 23px;
  font-weight: 600; color: var(--gold); letter-spacing: -.6px;
}
.ac-ml-stat span {
  display: block; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 4px;
}

.ac-ml-sechead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ac-ml-sechead .ac-h2 { margin: 0; }
.ac-ml-grid { display: grid; gap: 14px; }
.ac-ml-card {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--acc); border-radius: var(--radius-lg);
  padding: 18px 19px; display: flex; flex-direction: column;
}
.ac-ml-card.is-done { border-top-color: var(--teal); }
.ac-ml-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ac-ml-card-icon {
  width: 40px; height: 40px; display: grid; place-items: center; font-size: 20px;
  background: var(--acc-soft); border-radius: var(--radius);
}
.ac-ml-card-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; margin: 0; }
.ac-ml-card-name a { color: inherit; text-decoration: none; }
.ac-ml-card-name a:hover { color: var(--acc); }
.ac-ml-card-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.ac-ml-card-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.ac-ml-card .ac-btn { margin-top: auto; }

.ac-ml-links { display: flex; flex-wrap: wrap; gap: 9px; }
.ac-ml-links a {
  padding: 11px 17px; border-radius: var(--radius); text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  color: var(--text-secondary); font-size: 13.5px; font-weight: 600;
  transition: var(--transition);
}
.ac-ml-links a:hover { border-color: var(--acc); color: var(--acc); }

/* ── Path map ────────────────────────────────────────────────────────────── */
.ac-path-head { text-align: center; padding: 16px 0 26px; }
.ac-path-title { font-family: var(--font-display); font-size: clamp(22px, 4vw, 30px); font-weight: 800; margin: 0 0 16px; }
.ac-path-progress { display: flex; justify-content: center; margin-bottom: 18px; }

/* The connecting trail is a single centred rule behind the nodes, so nothing
   needs measuring and it reflows correctly at any width. */
.ac-path { list-style: none; margin: 0 auto; padding: 0 0 40px; max-width: 560px; position: relative; }
.ac-path::before {
  content: ''; position: absolute; left: 50%; top: 0; bottom: 40px;
  width: 2px; margin-left: -1px;
  background: repeating-linear-gradient(
    to bottom, var(--border) 0 8px, transparent 8px 16px);
}
.ac-path-marker {
  position: relative; z-index: 1; text-align: center;
  margin: 26px auto 18px; padding: 9px 16px;
  background: var(--bg-void); display: inline-block; left: 50%; transform: translateX(-50%);
}
.ac-path-marker-num {
  display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--acc);
}
.ac-path-marker-title { display: block; font-size: 14px; font-weight: 650; margin-top: 3px; }

.ac-path-item { position: relative; z-index: 1; display: flex; margin-bottom: 14px; }
.ac-path-item.is-left   { justify-content: flex-start; }
.ac-path-item.is-centre { justify-content: center; }
.ac-path-item.is-right  { justify-content: flex-end; }

.ac-node {
  display: flex; align-items: center; gap: 12px;
  width: min(300px, 82%); padding: 13px 16px;
  background: var(--bg-card); border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg); text-decoration: none; color: inherit;
  transition: var(--transition);
}
.ac-node-dot {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 16px; font-weight: 700;
  background: var(--bg-elevated); color: var(--text-muted);
}
.ac-node-body { min-width: 0; }
.ac-node-skill { display: block; font-size: 14px; font-weight: 650; line-height: 1.35; }
.ac-node-meta { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 3px; }

.ac-node.is-done { border-color: var(--teal); }
.ac-node.is-done .ac-node-dot { background: rgba(16,163,127,.16); color: var(--teal); }
.ac-node.is-open { border-color: var(--border); }
.ac-node.is-open:hover { border-color: var(--acc); transform: translateY(-2px); }
.ac-node.is-current {
  border-color: var(--acc); background: var(--acc-soft);
  box-shadow: 0 0 0 4px var(--acc-soft);
}
.ac-node.is-current .ac-node-dot { background: var(--acc); color: var(--bg-void); }
.ac-node.is-locked { opacity: .5; cursor: not-allowed; }
.ac-node.is-boss.is-current, .ac-node.is-final.is-current { border-style: dashed; }

.ac-node-flag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  z-index: 2; padding: 2px 11px; border-radius: 99px;
  background: var(--acc); color: var(--bg-void);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.ac-path-foot { text-align: center; padding-bottom: 50px; }

/* ── League ──────────────────────────────────────────────────────────────── */
.ac-podium {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  align-items: end; margin-bottom: 22px;
}
.ac-podium-slot {
  text-align: center; padding: 16px 8px; border-radius: var(--radius-lg);
  background: var(--bg-card); border: 1px solid var(--border-subtle);
}
.ac-podium-slot.is-gold   { padding-top: 26px; border-color: var(--gold); }
.ac-podium-slot.is-silver { padding-top: 18px; }
.ac-podium-slot.is-me     { background: var(--acc-soft); }
.ac-podium-medal { font-size: 30px; margin-bottom: 6px; }
.ac-podium-name { font-size: 14px; font-weight: 650; line-height: 1.3; }
.ac-podium-xp { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--gold); margin-top: 5px; }
.ac-podium-skills { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.ac-lb {
  background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden;
}
.ac-lb-mine { margin-top: 12px; border-color: var(--acc); }
.ac-lb-row {
  display: grid; grid-template-columns: 34px 1fr auto;
  gap: 10px; align-items: center; padding: 12px 15px;
  border-bottom: 1px solid var(--border-subtle);
}
.ac-lb-row:last-child { border-bottom: 0; }
.ac-lb-row.is-me { background: var(--acc-soft); }
.ac-lb-rank {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--text-muted); text-align: center;
}
.ac-lb-rank.is-top { color: var(--gold); }
.ac-lb-name { font-size: 14px; font-weight: 600; line-height: 1.3; min-width: 0; }
.ac-lb-name small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.ac-lb-name .ac-pill { margin-left: 6px; vertical-align: middle; }
.ac-lb-skills { display: none; font-size: 12px; color: var(--text-muted); }
.ac-lb-xp {
  font-family: var(--font-mono); font-size: 15px; font-weight: 600;
  color: var(--gold); text-align: right; font-variant-numeric: tabular-nums;
}
.ac-lb-nudge {
  font-size: 12.5px; line-height: 1.6; color: var(--text-secondary);
  padding: 12px 15px; margin: 0; border-top: 1px solid var(--border-subtle);
}
.ac-lb-note {
  font-size: 12px; line-height: 1.65; color: var(--text-muted);
  margin: 22px 0 50px; max-width: 62ch;
}
.ac-lb-note a { color: var(--acc); }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (min-width: 560px) {
  .ac-lb-row    { grid-template-columns: 40px 1fr auto auto; }
  .ac-lb-skills { display: block; }
}
@media (min-width: 640px) {
  .ac-sp-stats, .ac-ml-stats { grid-template-columns: repeat(4, 1fr); }
  .ac-sp-grid  { grid-template-columns: 1fr 1fr; }
  .ac-ml-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .ac-sp-grid  { grid-template-columns: repeat(3, 1fr); }
  .ac-ml-grid  { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .ac-sp-cert:hover, .ac-node.is-open:hover { transform: none; }
}