/* ═══════════════════════════════════════════════════════════════
   ACADEMY (/academy) — the Concept A student app.
   The shell lives in .acad__*; everything below is page content.
   ═══════════════════════════════════════════════════════════════ */
/* ── Shared section layout ─────────────────────────────────────── */
.academy-page__header { margin-bottom: var(--space-6); }
.academy-page__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}
.academy-page__desc {
  font-size: max(1rem, var(--text-base));
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 62ch;
}

/* ── Empty states ──────────────────────────────────────────────
   Used wherever a section has nothing to show. An honest empty
   state, never invented placeholder content. */
.academy-empty {
  background: var(--color-bg-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.academy-empty__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.academy-empty__body {
  font-size: max(1rem, var(--text-sm));
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 48ch;
  margin: 0 auto var(--space-5);
}
.academy-empty__body:last-child { margin-bottom: 0; }

/* ── "Not built yet" notice ────────────────────────────────────
   For sections whose phase has not run. Deliberately visually
   distinct from an empty state: "there is nothing here yet" and
   "this is not finished" are different messages to a student. */
.academy-unbuilt {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-cta);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}
.academy-unbuilt__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-cta);
  margin-bottom: var(--space-3);
}

/* ── Lesson progress bar ───────────────────────────────────────── */
/* Shared by the curriculum list and the lesson page, so one level's
   percentage cannot be drawn two different ways.

   The width lives in a style attribute on .lesson-progress__fill and
   nowhere else. That is the documented exception to "no inline styles in
   views": the value is a computed percentage, so it cannot be a class, and
   a CSS custom property set inline would be the same inline attribute with
   an extra step. */
.lesson-progress { margin-bottom: var(--space-6); }
.lesson-progress__bar {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-hover);
  overflow: hidden;
}
.lesson-progress__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--gradient-electric);
  transition: width var(--ease-base);
}
.lesson-progress__label {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Lesson page ───────────────────────────────────────────────── */
.lesson-crumbs { margin-bottom: var(--space-6); }
.lesson-crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.lesson-crumbs li + li::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-border);
}
.lesson-crumbs a { color: var(--color-text-muted); }
.lesson-crumbs a:hover,
.lesson-crumbs a:focus-visible { color: var(--color-electric); }

.lesson__header { margin-bottom: var(--space-6); }
.lesson__counter {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-cta);
  margin-bottom: var(--space-2);
}
.lesson__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-2);
}
.lesson__done-flag {
  font-size: var(--text-sm);
  color: var(--color-teal);
}

.lesson__body { font-size: var(--text-base); line-height: var(--leading-prose); }
.lesson__body p { margin-bottom: var(--space-4); }
.lesson__body ul {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-6);
  display: grid;
  gap: var(--space-2);
}
.lesson__empty { color: var(--color-text-muted); }
.lesson__resource { margin-bottom: var(--space-6); }

.lesson-assignment {
  margin-bottom: var(--space-8);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-cta);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}
.lesson-assignment__title {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-cta);
  margin-bottom: var(--space-3);
}
.lesson-assignment p { margin-bottom: var(--space-3); }
.lesson-assignment p:last-child { margin-bottom: 0; }
.lesson-assignment__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lesson-actions { margin-bottom: var(--space-8); }
.lesson-actions__note {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Mobile first: stacked, and only side by side once there is room. */
.lesson-nav {
  display: grid;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
}
.lesson-nav__link {
  display: block;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
}
.lesson-nav__link:hover,
.lesson-nav__link:focus-visible {
  border-color: var(--color-electric);
  background: var(--color-bg-hover);
}
.lesson-nav__dir {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.lesson-nav__name { display: block; font-weight: var(--font-weight-semibold); }

@media (min-width: 640px) {
  .lesson-nav { grid-template-columns: 1fr 1fr; }
  /* A lone "Next" belongs on the right, where it would be if there were a
     "Previous" beside it. */
  .lesson-nav__link--next:only-child { grid-column: 2; text-align: right; }
}

/* ===============================================================
   CONCEPT A — "CAREER COMMAND CENTER" APP SHELL
   ===============================================================
   Replaces the horizontal .academy-nav strip with a real application
   shell: dark navy sidebar, top bar, content column, and a bottom
   navigation bar on phones.

   Namespaced .acad__* so it cannot collide with the older .academy-*
   page styles above, which the screens still use while they are
   migrated one at a time.

   Built from the existing brand tokens only. --color-electric
   (#1B6EF3) is the primary and --color-navy-darker the sidebar; no
   new colour system was introduced.

   The sidebar stays navy in both themes: it is application chrome,
   like a window frame, and inverting it in light mode weakened both
   the active state and the logo. Everything else follows the
   site-wide light/dark toggle.

   Mobile first: the sidebar is a drawer below 1024px and a permanent
   column above it. */

.acad { min-height: 100vh; background: var(--color-bg-base); }

/* ── Sidebar ─────────────────────────────────────────────────── */
.acad__side {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: var(--z-modal);
  width: min(276px, 86vw);
  display: flex;
  flex-direction: column;
  background: var(--color-navy-darker);
  color: #fff;
  transform: translateX(-100%);
  transition: transform var(--ease-base);
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.acad-nav-open .acad__side { transform: translateX(0); }

.acad__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(2, 8, 16, 0.6);
}

.acad__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6) var(--space-5);
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.acad__brand-text {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  line-height: 1.35;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.74);
}
.acad__brand-text strong { display: block; color: #fff; font-weight: var(--font-weight-bold); }

/* Who is signed in, and what they are studying — the two things the
   brief wants a student to know before reading anything else. */
.acad__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.acad__avatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gradient-electric);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
}
.acad__who-text { min-width: 0; }
.acad__who-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acad__who-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-wide);
  color: rgba(255, 255, 255, 0.52);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.acad__nav { flex: 1; padding: var(--space-4) var(--space-3); }
.acad__nav-group {
  margin: var(--space-5) var(--space-3) var(--space-2);
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  /* 0.38 measured 3.48:1 on --color-navy-darker, and at 10px these
     count as small text, so they needed 4.5. 0.6 gives 7.3:1 and
     still reads as a quiet divider against the white nav links. */
  color: rgba(255, 255, 255, 0.6);
}
.acad__nav-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.acad__nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 11px var(--space-3);
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: background var(--ease-fast), color var(--ease-fast);
}
.acad__nav-link:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
/* A light ring: the site default dark focus outline is invisible here. */
.acad__nav-link:focus-visible { outline: 2px solid var(--color-sky); outline-offset: 2px; color: #fff; }
.acad__nav-link.is-active {
  background: var(--color-electric);
  color: #fff;
  font-weight: var(--font-weight-semibold);
}

/* Geometric glyphs rather than an icon font or a dozen inline SVGs —
   no extra request and nothing to go stale. The label carries the
   meaning, so they are aria-hidden. */
.acad__ico {
  flex-shrink: 0;
  width: 16px; height: 16px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.5;
}
.acad__nav-link.is-active .acad__ico { opacity: 1; }
.acad__ico--dash    { border-radius: 2px; }
.acad__ico--book    { border-radius: 2px 6px 6px 2px; }
.acad__ico--levels  { border-radius: 6px 6px 2px 2px; }
.acad__ico--class   { border-radius: 50%; }
.acad__ico--assess  { border-radius: 2px; height: 13px; }
.acad__ico--career  { border-radius: 50% 50% 3px 3px; }
.acad__ico--people  { border-radius: 50%; }
.acad__ico--profile { border-radius: 50% 50% 4px 4px; }
.acad__ico--bell    { border-radius: 50% 50% 3px 3px; }
.acad__ico--help    { border-radius: 50%; }

.acad__nav-label { flex: 1; }
/* A count, not a dot: "3" is actionable, a dot is only decorative. */
.acad__nav-badge {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: var(--color-cta);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-align: center;
}
.acad__nav-link.is-active .acad__nav-badge { background: rgba(255, 255, 255, 0.22); }

.acad__side-foot {
  padding: var(--space-4) var(--space-5) var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.acad__logout {
  width: 100%;
  padding: 10px var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-md);
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font: inherit;
  font-size: var(--text-sm);
  cursor: pointer;
}
.acad__logout:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.acad__logout:focus-visible { outline: 2px solid var(--color-sky); outline-offset: 2px; }

/* ── Content column ──────────────────────────────────────────── */
.acad__body { display: flex; flex-direction: column; min-height: 100vh; min-width: 0; }

.acad__top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}
.acad__burger {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;              /* a real tap target */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--text-lg);
  cursor: pointer;
}
.acad__burger:hover { background: var(--color-bg-hover); }
.acad__top-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acad__top-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); }

/* Track and level, so a student never has to remember what they bought. */
.acad__chip {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: var(--color-electric-muted);
  /* --color-electric on this tint measured 3.92:1, and at 12.8px the
     chip is small text needing 4.5. --color-sky is the design
     system's own blue for accent text on light surfaces: 5.93:1. */
  color: var(--color-sky);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}
.acad__bell {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
}
.acad__bell:hover { background: var(--color-bg-hover); color: var(--color-electric); }
.acad__bell-dot {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 17px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-cta);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: var(--font-weight-bold);
  line-height: 17px;
  text-align: center;
}

/* The bottom padding clears the mobile tab bar. */
.acad__main { flex: 1; padding: var(--space-6) var(--space-4) calc(var(--space-24) + 56px); }

/* ── Mobile bottom navigation ────────────────────────────────── */
/* The five destinations the brief names. Thumb-reachable, leaving the
   drawer for the deeper sections. */
.acad__tabs {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.acad__tab {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 9px 2px;
  min-height: 56px;
  color: var(--color-text-muted);
  font-size: 10px;
  text-align: center;
  text-decoration: none;
}
.acad__tab:hover { color: var(--color-electric); }
.acad__tab:focus-visible { outline: 2px solid var(--color-electric); outline-offset: -2px; }
.acad__tab.is-active { color: var(--color-electric); font-weight: var(--font-weight-semibold); }
.acad__tab .acad__ico { opacity: 0.55; width: 18px; height: 18px; }
.acad__tab.is-active .acad__ico { opacity: 1; }

@media (min-width: 640px) {
  .acad__chip { display: inline-flex; }
}

@media (min-width: 1024px) {
  .acad { display: grid; grid-template-columns: 276px minmax(0, 1fr); }
  .acad__side { position: sticky; top: 0; height: 100vh; transform: none; width: auto; }
  .acad__scrim,
  .acad__burger,
  .acad__tabs { display: none; }
  .acad__top { padding: var(--space-4) var(--space-8); }
  .acad__top-title { font-size: var(--text-lg); }
  .acad__main { min-width: 0; max-width: 100%; padding: var(--space-8) var(--space-8) var(--space-24); }
}


/* ── Adapting the existing page markup to the shell ──────────────
   The migrated screens still wrap their content in the public site's
   .section / .container / .page-hero, which add their own vertical
   padding and a 1280px max-width centred in the viewport. Inside the
   Academy content column that produces a double gutter and content
   that drifts away from the sidebar.

   Neutralising them here, scoped to .acad__main, adapts eight screens
   in one place instead of editing eight files — and leaves the same
   markup working unchanged on the public site, which still needs it. */
.acad__main .section { padding-block: 0; }
.acad__main .container,
.acad__main .container--copy,
.acad__main .container--center {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
}
/* The lesson reader is the one place a measure still helps: long prose
   at full column width is hard to read. */
.acad__main .container--copy { max-width: var(--container-copy); }

/* The dashboard still opens with the public site's hero band. Inside an
   app shell that band is redundant chrome above a page that already has
   a title in the top bar. */
.acad__main .page-hero {
  padding-block: 0;
  background: none;
  min-height: 0;
}
.acad__main .page-hero__eyebrow { display: none; }


/* ===============================================================
   CONCEPT A — DASHBOARD ("Career Command Center")
   ===============================================================
   .cc-* = command center. Built on the same brand tokens as the
   shell; no new colours.

   Mobile first throughout: one column, stacking, then two columns of
   stats at 640px, four at 1280px, and a 1.5fr/1fr split at 1100px. */

.cc-kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

/* ── Programme hero ──────────────────────────────────────────── */
.cc-hero {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--gradient-surface, var(--color-bg-surface));
}
.cc-hero__main { flex: 1 1 260px; min-width: 0; }
.cc-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}
.cc-hero__level {
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-electric);
  margin-bottom: var(--space-3);
}
.cc-hero__milestone {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}
.cc-hero__ring { text-align: center; }
.cc-hero__ringlabel {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* A conic-gradient ring: no SVG, no chart library, one element.
   The percentage is also printed inside it, so the shape is never the
   only way the number is communicated. */
.cc-ring {
  width: 104px; height: 104px;
  margin-inline: auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    conic-gradient(var(--color-electric) calc(var(--p, 0) * 1%), var(--color-bg-hover) 0);
  position: relative;
}
.cc-ring::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: var(--color-bg-surface);
}
.cc-ring__num {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
}

/* ── Quick stats ─────────────────────────────────────────────── */
.cc-stats { display: grid; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 640px)  { .cc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .cc-stats { grid-template-columns: repeat(4, 1fr); } }

.cc-stat {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
.cc-stat__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.cc-stat__value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}
.cc-stat__of { font-size: var(--text-lg); color: var(--color-text-muted); font-weight: var(--font-weight-normal); }
.cc-stat__note {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ── Two-column body ─────────────────────────────────────────── */
.cc-cols { display: grid; gap: var(--space-6); }
.cc-col { display: grid; gap: var(--space-6); align-content: start; }
@media (min-width: 1100px) { .cc-cols { grid-template-columns: 1.5fr 1fr; } }

/* ── Cards ───────────────────────────────────────────────────── */
.cc-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  overflow: hidden;
}
/* The one card that should pull the eye: what to do right now. */
.cc-card--accent { border-color: var(--color-electric); box-shadow: var(--shadow-sm); }
.cc-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.cc-card__title { font-size: var(--text-base); font-weight: var(--font-weight-semibold); margin: 0; }
.cc-card__link { margin-left: auto; font-size: var(--text-sm); color: var(--color-electric); }
.cc-card__body { padding: var(--space-5) var(--space-6); }

.cc-lesson__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}
.cc-lesson__meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* ── Next actions ────────────────────────────────────────────── */
.cc-actions { list-style: none; margin: 0; padding: 0; }
.cc-action {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.cc-action:last-child { border-bottom: 0; }
.cc-action__text { flex: 1 1 200px; min-width: 0; }
.cc-action__title { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.cc-action__meta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.cc-pri {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 3px 8px;
  border-radius: var(--radius-full);
}
.cc-pri--high { background: rgba(245, 158, 11, 0.16); color: #92400e; }
:root[data-theme="dark"] .cc-pri--high { color: #fcd34d; }

/* ── Level ladder ────────────────────────────────────────────── */
.cc-ladder { list-style: none; margin: 0; padding: 0; }
.cc-rung {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.cc-rung:last-child { border-bottom: 0; }
.cc-rung__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
}
.cc-rung.is-held .cc-rung__num {
  background: var(--color-electric);
  border-color: var(--color-electric);
  color: #fff;
}
.cc-rung__text { flex: 1; min-width: 0; }
.cc-rung__title { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.cc-rung__state { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.cc-rung.is-held .cc-rung__state { color: var(--color-teal); }
.cc-ladder__note {
  padding: var(--space-4) var(--space-6);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ── Career bars ─────────────────────────────────────────────── */
.cc-bars { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }
.cc-bar__top { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); }
.cc-bar__label { font-weight: var(--font-weight-semibold); }
.cc-bar__pct { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted); }
.cc-bar__track {
  display: block;
  height: 6px;
  margin: 6px 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-bg-hover);
  overflow: hidden;
}
.cc-bar__fill { display: block; height: 100%; border-radius: var(--radius-full); background: var(--gradient-electric); }
.cc-bar__hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ── Simple lists (opportunities, community) ─────────────────── */
.cc-opps { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-3); }
.cc-opp { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-divider); }
.cc-opp:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-opp__title { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.cc-opp__meta { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* ── Activity feed ───────────────────────────────────────────── */
.cc-feed { list-style: none; margin: 0; padding: 0; }
.cc-feed__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.cc-feed__item:last-child { border-bottom: 0; }
.cc-feed__dot {
  flex-shrink: 0;
  width: 7px; height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--color-electric);
}
.cc-feed__what { display: block; font-size: var(--text-sm); }
.cc-feed__when {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}


/* ===============================================================
   CONCEPT A — MY CURRICULUM
   ===============================================================
   .cur-* . Module accordions are native <details>, so they work with
   a keyboard and without JavaScript; no accordion script exists.

   Status is always carried by a WORD ("Completed", "3/5 done") as
   well as by colour and the tick, so the page is readable without
   colour perception. */

.cur-level { margin-bottom: var(--space-12); }
.cur-level:last-child { margin-bottom: 0; }

.cur-level__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-end;
  margin-bottom: var(--space-3);
}
.cur-level__ident { flex: 1 1 240px; min-width: 0; }
.cur-level__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.cur-level__prog { text-align: right; }
.cur-level__pct {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  color: var(--color-electric);
}
.cur-level__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Module accordion ────────────────────────────────────────── */
.cur-modules { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.cur-mod {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
  overflow: hidden;
}
.cur-mod[open] { border-color: var(--color-electric); }
.cur-mod--complete { background: var(--color-bg-elevated); }

.cur-mod__summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
  min-height: 56px;              /* comfortable tap target on a phone */
}
.cur-mod__summary::-webkit-details-marker { display: none; }
.cur-mod__summary:hover { background: var(--color-bg-hover); }
.cur-mod__summary:focus-visible { outline: 2px solid var(--color-electric); outline-offset: -2px; }

.cur-mod__num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-bg-base);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}
.cur-mod--complete .cur-mod__num {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: #fff;
}
.cur-mod--in-progress .cur-mod__num {
  border-color: var(--color-electric);
  color: var(--color-electric);
}

.cur-mod__text { flex: 1; min-width: 0; }
.cur-mod__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.cur-mod__title {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-snug);
}
.cur-mod__state {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: right;
}
.cur-mod--complete .cur-mod__state { color: var(--color-teal); }

.cur-mod__body {
  padding: var(--space-2) var(--space-5) var(--space-5);
  border-top: 1px solid var(--color-divider);
}
.cur-mod__objectives {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: var(--space-4) 0;
}

/* ── Lesson rows ─────────────────────────────────────────────── */
.cur-lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }

.cur-lesson__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
  min-height: 44px;
}
.cur-lesson__link:hover { background: var(--color-bg-hover); }
.cur-lesson__link:focus-visible { outline: 2px solid var(--color-electric); outline-offset: -2px; }

.cur-lesson__mark {
  flex-shrink: 0;
  width: 18px;
  margin-top: 2px;
  text-align: center;
  color: var(--color-border);
  font-size: var(--text-sm);
}
.cur-lesson.is-done .cur-lesson__mark { color: var(--color-teal); }

.cur-lesson__text { min-width: 0; }
.cur-lesson__title { display: block; font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.cur-lesson.is-done .cur-lesson__title { color: var(--color-text-muted); }
.cur-lesson__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: 3px;
}

.cur-kind {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.cur-kind--project { background: var(--color-electric-muted); color: var(--color-electric); border-color: transparent; }

.cur-lesson__res,
.cur-lesson__doneword {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-muted);
}
.cur-lesson__doneword { color: var(--color-teal); }

/* ── Module assignment ───────────────────────────────────────── */
.cur-assign {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-cta);
  border-radius: var(--radius-md);
  background: var(--color-bg-base);
}
.cur-assign__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-cta);
  margin-bottom: var(--space-2);
}
.cur-assign__text { font-size: var(--text-sm); line-height: var(--leading-relaxed); }
.cur-assign__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* ===============================================================
   CONCEPT A — MY ACCESS LEVELS
   ===============================================================
   .lvl-* . The job of this page is to make one rule unmistakable:
   levels are bought individually and in any order. The explainer
   block is therefore the first thing on the page, above any price
   or padlock, and every card below repeats the same wording. */

.lvl-model {
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
  border: 1px solid var(--color-electric);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  background: var(--color-electric-muted);
}
.lvl-model__title {
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-3);
}
.lvl-model__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.lvl-model__list li { padding-left: var(--space-5); position: relative; }
.lvl-model__list li::before {
  content: "\2192";
  position: absolute;
  left: 0;
  color: var(--color-electric);
}

/* ── Track groups ────────────────────────────────────────────── */
.lvl-track { margin-bottom: var(--space-10, var(--space-8)); }
.lvl-track:last-of-type { margin-bottom: var(--space-8); }
.lvl-track__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.lvl-track__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
.lvl-track__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── Level cards ─────────────────────────────────────────────── */
/* One column on a phone, three across once there is room. Three is
   the natural number: a track has exactly three levels, so the row
   reads as the whole ladder rather than an arbitrary grid. */
.lvl-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 720px)  { .lvl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .lvl-grid { grid-template-columns: repeat(3, 1fr); } }

.lvl-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
/* Held levels are the ones the student came here to use, so they get
   the brand border. Locked ones recede rather than shouting. */
.lvl-card.is-held { border-color: var(--color-electric); }

.lvl-card__top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.lvl-card__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
}
.lvl-card__state {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}
.lvl-card.is-held .lvl-card__state { color: var(--color-teal); }

.lvl-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-3);
}
.lvl-card__reason {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.lvl-card__price {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.1;
}
.lvl-card__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-2);
}
/* Push the action to the bottom so cards of different heights still
   line their buttons up. */
.lvl-card .btn { margin-top: auto; align-self: flex-start; }
.lvl-card .lesson-progress { margin-bottom: var(--space-2); }

/* ── How to pay ──────────────────────────────────────────────── */
.lvl-pay {
  padding: var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
.lvl-pay__title { font-size: var(--text-base); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.lvl-pay__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 62ch;
}
.lvl-pay__actions { margin-top: var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-3); }


/* ===============================================================
   CONCEPT A - GO TO CLASS
   ===============================================================
   .cls-* . Three states, each visually distinct but all built from
   the same card so a class is recognisable wherever it appears.
   Status is always a word as well as a colour. */

.cls-section { margin-bottom: var(--space-8); }

.cls-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-4);
}

/* A live class is the one thing on this page that is time-critical,
   so it gets the only animated element in the Academy. Respects
   prefers-reduced-motion. */
.cls-livedot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #dc2626;
  box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.6);
  animation: cls-pulse 2s infinite;
}
@keyframes cls-pulse {
  70%  { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cls-livedot { animation: none; }
}

.cls-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }

.cls-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
.cls-card--live { border-color: #dc2626; border-left-width: 3px; }
.cls-card--past { background: var(--color-bg-elevated); }

.cls-card__main { flex: 1 1 260px; min-width: 0; }
.cls-card__week {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.cls-card__title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}
.cls-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.cls-card__action { flex-shrink: 0; }

.cls-status {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.cls-status--live    { background: rgba(220, 38, 38, 0.12); color: #b91c1c; border-color: transparent; }
.cls-status--soon    { background: var(--color-electric-muted); color: var(--color-electric); border-color: transparent; }
.cls-status--present { background: rgba(16, 185, 129, 0.14); color: #065f46; border-color: transparent; }
.cls-status--absent  { background: rgba(245, 158, 11, 0.16); color: #92400e; border-color: transparent; }
:root[data-theme="dark"] .cls-status--live    { color: #fca5a5; }
:root[data-theme="dark"] .cls-status--present { color: #6ee7b7; }
:root[data-theme="dark"] .cls-status--absent  { color: #fcd34d; }

.cls-note {
  padding: var(--space-5) var(--space-6);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
.cls-note__title { font-size: var(--text-base); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.cls-note__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  max-width: 62ch;
}

/* ===============================================================
   CONCEPT A - ASSESSMENTS
   ===============================================================
   .asm-* . Tabs are links, not scripted panels, so each filter is a
   real URL. State is always a word as well as a colour. */

.asm-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-3);
}
.asm-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  min-height: 40px;
}
.asm-tab:hover { background: var(--color-bg-hover); color: var(--color-text-primary); }
.asm-tab:focus-visible { outline: 2px solid var(--color-electric); outline-offset: 2px; }
.asm-tab.is-active {
  background: var(--color-electric-muted);
  border-color: rgba(27, 110, 243, 0.25);
  color: var(--color-electric);
  font-weight: var(--font-weight-semibold);
}
.asm-tab__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
}
.asm-tab.is-active .asm-tab__count { background: var(--color-electric); color: #fff; }

.asm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }

.asm-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}

.asm-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.asm-card__week {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.asm-kind {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
/* An exam is sat somewhere else entirely, so it is marked differently
   from work submitted here. */
.asm-kind--exam { background: var(--color-electric-muted); color: var(--color-electric); border-color: transparent; }

.asm-state {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
}
.asm-state--submitted { background: rgba(27, 110, 243, 0.12); color: var(--color-electric); }
.asm-state--graded    { background: rgba(16, 185, 129, 0.14); color: #065f46; }
.asm-state--overdue   { background: rgba(220, 38, 38, 0.12);  color: #b91c1c; margin-left: 0; }
:root[data-theme="dark"] .asm-state--graded  { color: #6ee7b7; }
:root[data-theme="dark"] .asm-state--overdue { color: #fca5a5; }

.asm-card__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
}
.asm-card__body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.asm-card__meta { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.asm-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); align-items: center; }

.asm-result {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  border-left: 3px solid var(--color-teal);
}
.asm-result__score {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}
.asm-result__feedback {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.asm-form {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}
.asm-form input[type="url"] { max-width: 56ch; }

/* ===============================================================
   CONCEPT A - CAREER DEVELOPMENT
   ===============================================================
   .cr-* . Every figure here is measured, so the page spends more
   words than usual explaining what was counted. */

.cr-overall {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-electric);
  line-height: 1;
}

.cr-explain {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  max-width: 62ch;
}

/* The "what was counted" line under each bar. Smaller than the figure
   it explains, but always present. */
.cr-measures {
  display: block;
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  opacity: 0.85;
  line-height: 1.5;
}

/* ── Applications ────────────────────────────────────────────── */
.cr-apps { list-style: none; margin: 0; padding: 0; }
.cr-app {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.cr-app:last-child { border-bottom: 0; }
.cr-app__text { flex: 1 1 180px; min-width: 0; }
.cr-app__title { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.cr-app__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.cr-status {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  background: var(--color-bg-elevated);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  white-space: nowrap;
}
/* Progress through the pipeline, warm to green. The word is always
   there too, so colour is never the only signal. */
.cr-status--introduced,
.cr-status--interviewing { background: rgba(27,110,243,0.12);  color: var(--color-electric); border-color: transparent; }
.cr-status--hired,
.cr-status--fee_paid     { background: rgba(16,185,129,0.14);  color: #065f46; border-color: transparent; }
.cr-status--closed       { opacity: 0.7; }
:root[data-theme="dark"] .cr-status--hired,
:root[data-theme="dark"] .cr-status--fee_paid { color: #6ee7b7; }

/* ===============================================================
   CONCEPT A - COMMUNITY
   ===============================================================
   .com-* . A hub, not a feed. There is no discussions table, so
   there is nothing here that resembles one. */

.com-lead {
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  border: 1px solid var(--color-electric);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  background: var(--color-electric-muted);
}
.com-lead__title { font-size: var(--text-lg); font-weight: var(--font-weight-bold); margin-bottom: var(--space-2); }
.com-lead__body {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  max-width: 68ch;
  margin-bottom: var(--space-4);
}

/* The business case runs long; it is a quote, not body copy. */
.com-case {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

/* "Your entry" — the one part of this page about the student. */
.com-mine {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  border-left: 3px solid var(--color-teal);
}
.com-mine__label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}
.com-mine__title { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.com-mine__meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 4px; }

.com-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.com-status--shortlisted { background: rgba(27,110,243,0.12); color: var(--color-electric); border-color: transparent; }
.com-status--winner      { background: rgba(16,185,129,0.14); color: #065f46; border-color: transparent; }
:root[data-theme="dark"] .com-status--winner { color: #6ee7b7; }

/* ── Events ──────────────────────────────────────────────────── */
.com-events { list-style: none; margin: 0; padding: 0; }
.com-event {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.com-event:last-child { border-bottom: 0; }
.com-event__text { flex: 1 1 200px; min-width: 0; }
.com-event__title { display: block; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.com-event__meta {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

/* ===============================================================
   CONCEPT A - PROFILE & PAYMENTS
   =============================================================== */

/* Read-only facts, under the editable ones. */
.pf-fixed {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
}

.pf-sub {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin: var(--space-5) 0 var(--space-3);
}
.pf-sub:first-child { margin-top: 0; }

/* The two payment tables sit inside a card body, so they lose the
   standalone border the admin tables carry. */
.cc-card__body .adm-table-wrap { border: 0; border-radius: var(--radius-md); }

/* ===============================================================
   CONCEPT A - NOTIFICATIONS
   ===============================================================
   .ntf-* . Unread is signalled three ways -- a dot, heavier text and
   the word "New" -- so it never depends on colour or weight alone. */

.ntf-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-4);
}
.ntf-head form { margin-left: auto; }

.ntf-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }

.ntf {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-surface);
}
.ntf.is-unread { border-left: 3px solid var(--color-electric); }

.ntf__dot {
  flex-shrink: 0;
  width: 8px; height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--color-border);
}
.ntf.is-unread .ntf__dot { background: var(--color-electric); }

.ntf__text { flex: 1 1 220px; min-width: 0; }
.ntf__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ntf__title { font-size: var(--text-sm); }
.ntf.is-unread .ntf__title { font-weight: var(--font-weight-bold); }

.ntf__new {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px 6px;
  border-radius: var(--radius-full);
  background: var(--color-electric-muted);
  color: var(--color-electric);
}

.ntf__body {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-top: 2px;
}
.ntf__meta {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.ntf__type { text-transform: uppercase; letter-spacing: var(--tracking-wide); }

.ntf__actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* A quiet text button: marking one as read is a minor action beside
   "Open", and two solid buttons would compete. */
.ntf__mark {
  border: 0;
  background: none;
  padding: var(--space-2);
  min-height: 36px;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: underline;
  cursor: pointer;
}
.ntf__mark:hover { color: var(--color-electric); }
.ntf__mark:focus-visible { outline: 2px solid var(--color-electric); outline-offset: 2px; }

/* ===============================================================
   CONCEPT A - SUPPORT
   =============================================================== */

.sp-topics {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-5);
  display: grid;
  gap: var(--space-2);
}
@media (min-width: 560px) {
  .sp-topics { grid-template-columns: 1fr 1fr; }
}

/* The whole row is the target, not just the 16px radio. */
.sp-topic {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  min-height: 44px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  cursor: pointer;
}
.sp-topic:hover { background: var(--color-bg-hover); border-color: var(--color-electric); }
.sp-topic:focus-within { outline: 2px solid var(--color-electric); outline-offset: 1px; }
.sp-topic input { accent-color: var(--color-electric); }
.sp-topic input:checked ~ span { font-weight: var(--font-weight-semibold); }

.sp-faq { margin-bottom: var(--space-2); }

.sp-hist { list-style: none; margin: 0; padding: 0; }
.sp-msg {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.sp-msg:last-child { border-bottom: 0; }
.sp-msg__top {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: baseline;
  margin-bottom: var(--space-2);
}
.sp-msg__type {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  background: var(--color-electric-muted);
  color: var(--color-electric);
}
.sp-msg__when {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
/* Their own words, wrapped and clamped so one long message does not
   bury the rest of the list. */
.sp-msg__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── A14 · Touch targets ───────────────────────────────────────
   Measured at 375px: shell nav links came out at 43px, the
   notification bell at 40px, .btn--sm at 37px and the card
   "view all" links at 21px.

   All of those already clear the 24px floor WCAG 2.5.8 AA asks
   for, so none of this is a conformance fix. It is a usability
   one: this audience reaches the Academy on a phone, and a 37px
   button under a thumb is a miss waiting to happen.

   Shell chrome is sized unconditionally -- navigation should be
   comfortable with a mouse too. The denser bits are raised only
   under (pointer: coarse), so a desktop keeps its compact UI and
   the marketing site, which shares .btn--sm, is untouched. */
.acad__nav-link,
.acad__logout { min-height: 44px; }
.acad__bell { width: 44px; height: 44px; }

@media (pointer: coarse) {
  /* .btn--sm and .cc-card__link are shared; only the Academy's
     copies grow, hence the .acad scope. */
  .acad .btn--sm { min-height: 44px; }
  .acad .cc-card__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Support's "Answers you can get now" is a navigation list, not
   prose: each item is a link above a muted description. At 16px the
   link alone was a thin target, so on touch it gets real vertical
   padding. The inline links inside curriculum notes and breadcrumbs
   are deliberately left alone -- WCAG 2.5.8 exempts a target whose
   height is set by the line-height of the sentence around it, and
   padding those would break the text's rhythm. */
@media (pointer: coarse) {
  .acad .adm-plain > li > a {
    display: inline-block;
    padding-block: 6px;
  }
}

/* ── Dashboard hero: dark card, light text ─────────────────────
   Found while measuring A14. .cc-hero paints itself with
   --gradient-surface -- a navy gradient from tokens.css -- but
   nothing flipped its text tokens, so every child kept the
   light-surface colours tokens.css sets: #111827 on #0C1E3D, which
   is about 1.3:1. The programme name was effectively invisible, at
   every width, on the first screen a student sees.

   Not a responsive bug, so strictly A16's territory, but it is a
   two-rule fix in a file already open and it was too visible to
   leave sitting there for two more phases.

   The tokens are flipped on the card so descendants follow, then
   put back for the ring, whose inner disc is --color-bg-surface
   (white) and whose number must stay dark. */
.cc-hero {
  --color-text-primary: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.72);
  color: var(--color-text-primary);
}
/* The title is an <h2>, and base.css paints every heading with
   `h1,h2,...{ color: var(--color-text-dark) }`. An inherited colour
   always loses to a rule that matches the element, however weak the
   selector, so neither the token flip nor the card's own `color`
   could reach it. This class selector outranks the tag rule. */
.cc-hero__title { color: var(--color-text-primary); }
.cc-hero .cc-ring__num { color: #111827; }
/* --color-electric is tuned for white cards; on navy it lands near
   3:1. This is the dark-surface blue the design system already
   uses in variables.css. */
.cc-hero__level { color: #93C5FD; }

/* ── A15 · The submitting state ────────────────────────────────
   academy-forms.js disables a form's submit button while its POST
   is in flight. Nothing in the stylesheet marked a disabled button
   as disabled, so it looked identical to a live one -- which is
   precisely the state a student is most likely to click again.

   WCAG 1.4.3 exempts inactive controls from the contrast floor, so
   dimming here is allowed; the label still carries the meaning
   ("Sending…"), the dimming only reinforces it. */
.acad button[disabled],
.acad .btn[disabled] {
  opacity: 0.65;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
.acad form[aria-busy="true"] { cursor: progress; }

/* ── A16 · Links inside running text ───────────────────────────
   axe flagged the link in the lesson's assignment note: inside a
   paragraph it was told apart from the surrounding words by colour
   alone, which WCAG 1.4.1 does not allow. Underlining every prose
   link fixes it and is what a link in a sentence should look like
   anyway. Buttons, nav links and card links are not in text blocks
   and keep their own treatment. */
.acad__main p a:not(.btn) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── A16 · Flash messages ──────────────────────────────────────
   Success and failure were distinguished by a green or a red tint
   and nothing else -- same text colour, same shape, no icon. For
   anyone who does not separate those two hues that is one
   indistinguishable box, so a glyph carries the meaning too.

   Scoped to .acad because .admin-flash is shared with the admin
   area, which is not this phase's to change. Written as escapes
   rather than literal characters: this file has been mangled by an
   editor's encoding once already. */
.acad .admin-flash::before {
  content: "\2713\00a0\00a0";   /* check mark */
  font-weight: 700;
}
.acad .admin-flash--error::before {
  content: "\26A0\00a0\00a0";   /* warning triangle */
}

/* ── A17 · Search ──────────────────────────────────────────────
   The top bar's box takes the space between the page title and the
   bell. Below 900px there is no such space, so it is hidden and the
   magnifier next to the bell opens /academy/search instead -- the
   same destination, reached in one tap rather than typing into a
   field two thirds of a phone wide. */
.acad__search { display: none; }

/* Styled like the bell beside it, but with its own class rather than
   borrowing .acad__bell: two elements answering to one selector made
   `querySelector('.acad__bell')` ambiguous, and the first match was
   the one hidden on desktop. */
.acad__search-link {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  text-decoration: none;
}
.acad__search-link:hover { background: var(--color-bg-hover); color: var(--color-electric); }
.acad__search-link:focus-visible { outline: 2px solid var(--color-electric); outline-offset: 2px; }

.acad__search-input {
  width: 100%;
  padding: 9px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg-subtle, #f4f6fb);
  color: var(--color-text-primary);
  font: inherit;
  font-size: var(--text-sm);
}
.acad__search-input::placeholder { color: var(--color-text-muted); }
.acad__search-input:focus-visible {
  outline: 2px solid var(--color-electric);
  outline-offset: 1px;
  background: #fff;
}

@media (min-width: 900px) {
  .acad__search {
    display: block;
    flex: 0 1 340px;
    margin-inline: auto var(--space-4);
  }
  /* The magnifier is redundant once the field itself is visible. */
  .acad__search-link { display: none; }
}

/* ── Results ───────────────────────────────────────────────── */
.srch-form {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.srch-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 11px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  font: inherit;
}
.srch-input:focus-visible { outline: 2px solid var(--color-electric); outline-offset: 1px; }

.srch-count {
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.srch-list { list-style: none; margin: 0; padding: 0; }
.srch-item {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}
.srch-item:first-child { border-top: 0; }
.srch-item__link { text-decoration: none; }
.srch-item__link:hover .srch-item__title { text-decoration: underline; }
.srch-item__link:focus-visible { outline: 2px solid var(--color-electric); outline-offset: 2px; }
.srch-item__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-sky);
}
.srch-item__meta {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.srch-item__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}