/* =====================================================================
   HIM Education stylesheet (Step 1)

   HOW THIS FILE IS ORGANISED
   1. Font
   2. Design tokens: every colour, size and corner radius, named once.
      Change a value here and it changes everywhere on the site.
   3. Base: sensible defaults for the whole page
   4. Layout helpers
   5. Components: logo, header, buttons, cards and so on
   6. Page sections: hero, tracks, courses, footer
   7. Setup help page

   The brand blue #004AAD and ink #1E1E1E are sampled from the logo file.
   ===================================================================== */


/* 1. FONT ------------------------------------------------------------- */
/* Inter is stored inside the project, so the site never waits on Google. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* 2. DESIGN TOKENS ---------------------------------------------------- */
:root {
  /* Brand */
  --brand-600: #004AAD;      /* logo badge blue */
  --brand-500: #0052CC;      /* hover and interactive states */
  --brand-100: #E3ECFA;
  --on-brand:  #FFFFFF;

  /* Surfaces and text (light theme) */
  --page:        #FFFFFF;
  --page-tint:   #F2F4F7;
  --surface:     #FFFFFF;
  --border:      #DCE1E8;
  --border-strong: #B9C1CC;
  --ink:         #1E1E1E;    /* logo wordmark */
  --ink-muted:   #56606C;
  --accent-ink:  #004AAD;    /* blue used as TEXT */
  --focus:       #0052CC;
  --danger:      #B42318;
  --good:        #0F7A4A;    /* payment confirmed, certificate genuine */
  --good-tint:   #E8F6EE;
  --danger-tint: #FDECEA;


  /* Track identity colours. Checked with a colour-blindness validator,
     in this order, because these are the pairs that sit side by side on
     the tracks grid. Colour never carries meaning alone here: the track
     name and its icon are always beside it. */
  --track-1: #2563EB;  --track-1-deep: #0B2B66;   /* Clinical coding      */
  --track-2: #D03A66;  --track-2-deep: #5C1730;   /* Health data          */
  --track-3: #0C93A6;  --track-3-deep: #063A45;   /* Electronic records   */
  --track-4: #B3700F;  --track-4-deep: #4A2D05;   /* Privacy              */
  --track-5: #8B4FD6;  --track-5-deep: #331A57;   /* Claims               */
  --track-6: #158A4E;  --track-6-deep: #063822;   /* Records management   */

  /* The deep navy the brief asks for, used for the hero and the footer. */
  --navy-900: #081A33;
  --navy-800: #102E52;
  --on-navy:  #E7EDF6;
  --on-navy-muted: #9FB3CC;

  /* Graphic only (never for text): star fill and chart bars */
  --rating: #E0A100;
  --chart-bar:  #004AAD;
  --chart-grid: #E4E7EC;

  /* Shape and space */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --shadow:    0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.06);
  --container: 1180px;
  --gutter:    clamp(1rem, 3vw, 2rem);
}

/* Dark mode is a second palette, not a filter. #004AAD is too dark to
   read as text on a near-black page, so blue TEXT switches to #7FA9FF. */
[data-theme="dark"] {
  --brand-100:     #14233D;
  --page:          #0B0C0E;
  --page-tint:     #111317;
  --surface:       #16181D;
  --border:        #2A2F37;
  --border-strong: #3D444F;
  --ink:           #ECEEF2;
  --ink-muted:     #A0A8B3;
  --accent-ink:    #7FA9FF;
  --focus:         #7FA9FF;
  --rating:        #F0B429;

  /* Dark mode gets its own steps, chosen and validated against the dark
     surface. Lightening the light-mode values would push them out of
     the band a coloured mark needs to sit in. */
  --track-1: #4F84F5;  --track-1-deep: #101F3D;
  --track-2: #E2557A;  --track-2-deep: #3A1524;
  --track-3: #1FA0B0;  --track-3-deep: #0A2A31;
  --track-4: #C4832A;  --track-4-deep: #33220A;
  --track-5: #9B74E0;  --track-5-deep: #24173B;
  --track-6: #2E9A63;  --track-6-deep: #0A2719;

  /* Dark mode is a chosen step, not a flipped one: #004AAD is too dark
     to read against a near-black page, and #7FA9FF is too light to sit
     in the band a chart mark wants. #5C93F2 is the step in between. */
  --chart-bar:     #5C93F2;
  --chart-grid:    #2A2F37;
  --danger:        #FF7A70;
  --good:          #4ED18B;
  --good-tint:     #0E2B1D;
  --danger-tint:   #2E1412;
  --shadow:        0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
}


/* 3. BASE ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; margin: 0; letter-spacing: -0.015em; }
p { margin: 0; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: var(--accent-ink); }
img, svg { display: block; }

/* A clear ring on whatever the keyboard is on. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The hidden attribute must win, even over display: flex. */
[hidden] { display: none !important; }

/* Anyone who has asked their system to reduce motion gets none of it:
   no shelf filing itself, no card lifting. The shelf is still there,
   it simply does not arrive. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .shelf__spine { opacity: 0.5; transform: none; }
}


/* 4. LAYOUT HELPERS --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Hidden on screen, still read aloud by screen readers. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--brand-600);
  color: var(--on-brand);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

.muted { color: var(--ink-muted); }


/* 5. COMPONENTS ------------------------------------------------------- */

/* Logo: built from text so it recolours itself in dark mode. */
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
  color: var(--ink);
  line-height: 1;
}
.logo__him {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.logo__badge {
  background: var(--brand-600);
  color: #EBEBEB;
  font-size: 1.3rem;
  font-weight: 450;
  padding: 0.28rem 0.5rem 0.32rem;
  border-radius: var(--radius-sm);
}
.logo--small .logo__him { font-size: 1.25rem; }
.logo--small .logo__badge { font-size: 1rem; padding: 0.22rem 0.4rem 0.26rem; }

/* Icons */
.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.icon--sm { width: 1rem; height: 1rem; }
.icon--star { color: var(--rating); fill: var(--rating); }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.button--primary { background: var(--brand-600); color: var(--on-brand); }
.button--primary:hover { background: var(--brand-500); }
.button--ghost { background: transparent; color: var(--ink); border-color: var(--border-strong); }
.button--ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.icon-button:hover { border-color: var(--border-strong); }
/* Show the moon in light mode, the sun in dark mode. */
.icon--sun { display: none; }
[data-theme="dark"] .icon--sun { display: block; }
[data-theme="dark"] .icon--moon { display: none; }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: var(--page-tint);
  border: 1px solid var(--border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
}
.badge--featured {
  background: var(--brand-100);
  border-color: transparent;
  color: var(--accent-ink);
}

/* Form fields */
.field { display: grid; gap: 0.3rem; position: relative; align-content: start; }
.field label { font-size: 0.85rem; font-weight: 600; }
.field input,
.field select {
  min-height: 44px;
  width: 100%;
  padding: 0.55rem 0.8rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.field--search input { padding-left: 2.3rem; }
.field__icon {
  position: absolute;
  left: 0.8rem;
  bottom: 14px;
  color: var(--ink-muted);
  pointer-events: none;
}


/* 6. PAGE SECTIONS ---------------------------------------------------- */

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--page) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 68px;
}
.site-nav { display: flex; gap: 0.25rem; margin-left: auto; }
.site-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.site-nav a:hover { background: var(--page-tint); }

/* Hero. Deep navy, edge to edge: the one place on the site that is
   allowed to be loud, so everything after it can stay quiet. */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 7vw, 5rem) clamp(5rem, 9vw, 7rem);
  background: var(--navy-900);
  color: var(--on-navy);
}
/* A second, lighter navy washing in from the left, so the panel is not
   one flat rectangle. Low contrast on purpose: it should be felt, not
   noticed. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, var(--navy-800) 0%, var(--navy-900) 58%);
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.3rem, 3.4vw + 1.1rem, 3.7rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 15ch;
  color: #fff;
}
.hero__lead {
  margin-top: 1.35rem;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--on-navy-muted);
  max-width: 52ch;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero__count { margin-top: 1.25rem; font-size: 0.9rem; color: var(--on-navy-muted); }

/* The buttons sit on navy, so they get their own treatment rather than
   the page's. */
.hero .button--primary { background: #fff; color: var(--navy-900); }
.hero .button--primary:hover { background: var(--on-navy); }
.hero .button--ghost { color: #fff; border-color: rgba(255, 255, 255, 0.38); }
.hero .button--ghost:hover { border-color: #fff; color: #fff; background: rgba(255, 255, 255, 0.08); }
.hero :focus-visible { outline-color: #fff; }

/* The shelf along the bottom edge. */
.shelf {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: clamp(3rem, 6vw, 4.5rem);
  display: flex;
  align-items: flex-end;
  gap: 3px;
  padding-inline: 2px;
}
.shelf__spine {
  /* Each spine takes a share of the width in proportion to --w, so the
     run always fills the hero exactly, at any screen size. Fixed pixel
     widths left a bare stretch on a wide monitor. */
  flex: var(--w) 1 0;
  height: var(--h, 100%);
  background: var(--track-base);
  opacity: 0.5;
  transform-origin: bottom center;
  /* Each spine is filed a beat after the one before it. */
  animation: file-in 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
  animation-delay: calc(var(--i) * 45ms + 150ms);
}
.shelf__spine[data-track-colour="1"] { --track-base: var(--track-1); }
.shelf__spine[data-track-colour="2"] { --track-base: var(--track-2); }
.shelf__spine[data-track-colour="3"] { --track-base: var(--track-3); }
.shelf__spine[data-track-colour="4"] { --track-base: var(--track-4); }
.shelf__spine[data-track-colour="5"] { --track-base: var(--track-5); }
.shelf__spine[data-track-colour="6"] { --track-base: var(--track-6); }

@keyframes file-in {
  from { transform: scaleY(0.04); opacity: 0; }
  to   { transform: scaleY(1);    opacity: 0.5; }
}

/* The sample record in the hero */
/* The card sits inside the navy hero, which sets a light text colour
   for the panel. Without this it would inherit it and print pale grey
   text on a white card. */
.record {
  position: relative;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 6px solid var(--brand-600);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 1.4rem 1.5rem 1.5rem;
}
.record__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.record__title { font-weight: 700; font-size: 1.05rem; }
.record__flag { font-size: 0.8rem; color: var(--ink-muted); }
.record__lines { display: grid; }
.record__line {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1rem;
  align-items: center;
  padding-block: 0.85rem;
  border-bottom: 1px dashed var(--border);
}
.record__line:last-child { border-bottom: 0; }
.record__line dt {
  grid-column: 1 / -1;
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.record__line dd:not(.code-chip) { font-weight: 500; }

/* Code chips echo the blue badge in the logo. */
.code-chip {
  justify-self: end;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  background: var(--brand-600);
  color: var(--on-brand);
  font-weight: 650;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.code-chip--query {
  background: transparent;
  color: var(--ink);
  border: 1.5px dashed var(--border-strong);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0;
  white-space: nowrap;
}
.record__caption {
  margin-top: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* Sections */
.section { padding-block: clamp(3rem, 6vw, 5rem); }
.section--tinted { background: var(--page-tint); }
.section__head { margin-bottom: 2rem; max-width: 60ch; }
.section__head h2 { font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2.1rem); font-weight: 700; }
.section__head p { margin-top: 0.5rem; color: var(--ink-muted); }
.section__head--row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.25rem;
  max-width: none;
}

/* Tracks */
.track-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.track {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 0.4rem;
  height: 100%;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s;
}
.track:hover { border-color: var(--accent-ink); }
/* Each track wears its own colour, on the rule above it and on its
   icon. The same colour then follows the track onto every course cover
   underneath it, which is the whole point: colour is the class. */
.track { position: relative; }
.track::before {
  content: "";
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 4px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--track-base);
}
.track[data-track-colour="1"] { --track-base: var(--track-1); }
.track[data-track-colour="2"] { --track-base: var(--track-2); }
.track[data-track-colour="3"] { --track-base: var(--track-3); }
.track[data-track-colour="4"] { --track-base: var(--track-4); }
.track[data-track-colour="5"] { --track-base: var(--track-5); }
.track[data-track-colour="6"] { --track-base: var(--track-6); }
.track:hover { border-color: var(--track-base); }
.track__icon {
  display: inline-grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  margin-bottom: 0.4rem;
  border-radius: var(--radius-sm);
  background: var(--track-base);
  color: #fff;
}
.track__count { color: var(--track-base); }
.track__name { font-weight: 650; font-size: 1.05rem; }
.track__desc { color: var(--ink-muted); font-size: 0.95rem; }
.track__count { margin-top: 0.5rem; font-size: 0.875rem; font-weight: 600; }

/* Course filters */
.filters { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.filters .field--search { width: min(100%, 300px); }
.filters .field:not(.field--search) { width: min(100%, 240px); }

/* Course cards */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
  gap: 1.25rem;
}
.course-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;           /* keeps the cover inside the rounded corner */
  /* Lifting on hover is the card saying it is a thing you can open.
     It answers a movement the person made, which is the only kind of
     motion this site uses outside the one moment on the home page. */
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s;
}
.course-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}
.course-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.15rem 1.25rem 1.25rem;
  flex: 1;
}
.course-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.course-card__track {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.course-card__title { font-size: 1.15rem; font-weight: 700; }
.course-card__summary { color: var(--ink-muted); font-size: 0.95rem; }

.facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  margin-top: 0.25rem;
  font-size: 0.875rem;
}
.facts li:not(.badge) { display: inline-flex; align-items: center; gap: 0.35rem; }
.facts .icon { color: var(--ink-muted); }

.course-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-top: auto;                /* pushes the footer to the bottom of the card */
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}
.course-card__instructor { font-size: 0.9rem; font-weight: 500; }
.rating { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.875rem; font-weight: 600; }
.price { font-size: 1.15rem; font-weight: 750; font-variant-numeric: tabular-nums; white-space: nowrap; }
.price--free { color: var(--accent-ink); }

.empty {
  display: grid;
  justify-items: start;
  gap: 1rem;
  padding: 2rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

/* Footer */
.site-footer { border-top: 1px solid var(--border); padding-block: 2.5rem; }
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 1.5rem 3rem;
  align-items: start;
}
.site-footer__tagline { margin-top: 0.75rem; color: var(--ink-muted); max-width: 40ch; }
.site-footer__note,
.site-footer__copy { font-size: 0.875rem; color: var(--ink-muted); }


/* 7. SETUP HELP PAGE -------------------------------------------------- */
.setup-help { max-width: 680px; padding-block: 4rem; }
.setup-help__tag {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--accent-ink);
  font-weight: 600;
  font-size: 0.85rem;
}
.setup-help h1 { font-size: 1.9rem; }
.setup-help ol { margin: 1.5rem 0; padding-left: 1.4rem; display: grid; gap: 0.6rem; }
.setup-help details {
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--page-tint);
}
.setup-help summary { cursor: pointer; font-weight: 600; }
.setup-help pre { white-space: pre-wrap; word-break: break-word; margin: 0.75rem 0 0; font-size: 0.85rem; }



/* ---------------------------------------------------------------------
   STEP 2: header account menu, forms, alerts, simple pages, tables
   --------------------------------------------------------------------- */

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.button--sm { min-height: 40px; padding: 0.4rem 0.85rem; font-size: 0.95rem; }
.button--block { width: 100%; }
.button-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }

/* Account menu */
.account { position: relative; }
.account__button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  padding: 0.25rem 0.7rem 0.25rem 0.3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 550;
  cursor: pointer;
}
.account__button:hover { border-color: var(--border-strong); }
.avatar {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-600);
  color: var(--on-brand);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.account__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  z-index: 60;
  min-width: 230px;
  padding: 0.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.account__who {
  display: grid;
  gap: 0.1rem;
  padding: 0.6rem 0.7rem 0.7rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.4rem;
}
.account__who-name { font-weight: 650; }
.account__who-role { font-size: 0.85rem; color: var(--ink-muted); }
.account__menu a,
.account__menu button {
  display: block;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  text-align: left;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}
.account__menu a:hover,
.account__menu button:hover { background: var(--page-tint); }
.account__menu form { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--border); }

/* Alerts */
.alert {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-block: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.95rem;
}
.alert .icon { flex: none; margin-top: 0.15rem; }
.alert--success { border-left-color: #1E7A46; }
.alert--success .icon { color: #1E7A46; }

/* An error is not a quieter success. It gets its own colour, a tinted
   background and a mark, because the one thing it must not do is look
   like the green bar people have learned to ignore. */
.alert--error {
  border-left-color: #B42318;
  border-color: #E8B0AA;
  background: var(--danger-tint);
  color: #7A1B12;
  font-weight: 500;
}
.alert--error .icon { color: #B42318; }
[data-theme="dark"] .alert--error { border-color: #5C2A25; color: #FFC9C3; }
[data-theme="dark"] .alert--error .icon { color: #FF7A70; }
.alert--info    { border-left-color: var(--brand-600); }
[data-theme="dark"] .alert--success { border-left-color: #4ADE80; }
[data-theme="dark"] .alert--error   { border-left-color: #FF7A70; }
[data-theme="dark"] .alert--info    { border-left-color: var(--accent-ink); }

/* Sign in and sign up pages */
.auth-page { padding-block: clamp(2rem, 5vw, 4rem); display: grid; justify-items: center; }
.auth-card {
  width: min(100%, 440px);
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 1.7rem; font-weight: 700; }
.auth-card .lede { margin-top: 0.5rem; color: var(--ink-muted); }
.auth-card__foot {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--ink-muted);
}

.form { display: grid; gap: 1.15rem; margin-top: 1.5rem; }
.form > .button:not(.button--block) { justify-self: start; }
.form__error {
  font-size: 0.875rem;
  font-weight: 550;
  color: #B42318;
}
[data-theme="dark"] .form__error { color: #FF9A91; }
.form__help { font-size: 0.875rem; color: var(--ink-muted); }
.field input[aria-invalid="true"] { border-color: #B42318; border-width: 2px; }
[data-theme="dark"] .field input[aria-invalid="true"] { border-color: #FF7A70; }

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  font-weight: 450;
  cursor: pointer;
}
.checkbox input { width: 1.05rem; height: 1.05rem; accent-color: var(--brand-600); }

/* Simple inner pages */
.page { padding-block: clamp(2rem, 5vw, 3.5rem); }
.narrow-page { max-width: 640px; padding-block: clamp(3rem, 7vw, 5rem); }
.page__head { margin-bottom: 2rem; }
.page__head h1 { font-size: clamp(1.8rem, 1.5vw + 1.3rem, 2.4rem); font-weight: 700; }
.eyebrow { font-size: 0.9rem; font-weight: 600; color: var(--accent-ink); margin-bottom: 0.4rem; }
.lede { margin-top: 0.6rem; color: var(--ink-muted); max-width: 62ch; }

.panel {
  padding: clamp(1.25rem, 3vw, 1.75rem);
  margin-bottom: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.panel h2 { font-size: 1.2rem; font-weight: 650; margin-bottom: 0.75rem; }
.panel p + p { margin-top: 0.5rem; }

.mini-list { display: grid; gap: 0.75rem; }
.mini-course {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-tint);
}
.mini-course__track { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--accent-ink); }
.mini-course__title { font-weight: 600; }
.mini-course__meta { font-size: 0.875rem; color: var(--ink-muted); }

.detail-list { display: grid; gap: 0.6rem; }
.detail-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; }
.detail-list dt { color: var(--ink-muted); font-size: 0.95rem; }
.detail-list dd { font-weight: 500; }

/* position: relative matters here. .visually-hidden parks its text off
   screen with position: absolute, and without a positioned ancestor
   that lands relative to the PAGE, not to this scrolling box. A hidden
   label inside a wide table then pushed the whole page sideways on a
   phone: an invisible 1px span causing a visible horizontal scrollbar. */
.table-scroll { overflow-x: auto; position: relative; }
.table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.table th, .table td {
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.table th { font-weight: 650; color: var(--ink-muted); font-size: 0.85rem; }
.table tbody tr:last-child td { border-bottom: 0; }


/* ---------------------------------------------------------------------
   STEP 3: catalogue page (sidebar filters, chips, list view, paging)
   --------------------------------------------------------------------- */

.catalogue { padding-block: clamp(2rem, 5vw, 3.5rem); }

.catalogue__search {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.catalogue__search .field--search { flex: 1 1 auto; max-width: 520px; }

.catalogue__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

/* Sidebar */
.filters-panel {
  /* Deliberately not sticky. The panel is taller than most windows, and
     a sticky panel taller than the window never scrolls, so its bottom
     (the Apply button) becomes unreachable. Capping its height instead
     just hides the last two filter groups behind an inner scrollbar.
     Letting it scroll with the page keeps every filter reachable. */
  display: grid;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.filters-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}
.filters-panel__head h2 { font-size: 1.05rem; font-weight: 700; }
.filters-panel__head a { font-size: 0.875rem; font-weight: 600; }

.filter-group { border: 0; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.filter-group legend {
  padding: 0;
  margin-bottom: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0.03em;
}

.checkbox--row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.55rem;
  min-height: 34px;
  padding: 0.1rem 0.15rem;
  font-size: 0.925rem;
}
.checkbox--row input { accent-color: var(--brand-600); }
.checkbox--row input:disabled + span { color: var(--ink-muted); }
.checkbox--row:has(input:disabled) { cursor: not-allowed; }
.count {
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  background: var(--page-tint);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}

/* Collapsible filters (see courses.php) */
.filters-collapse { border: 0; }
.filters-collapse__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.25rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;                 /* hide the default triangle */
}
.filters-collapse__summary::-webkit-details-marker { display: none; }
.filters-collapse__summary span:first-child { display: inline-flex; align-items: center; gap: 0.5rem; }
.filters-collapse__summary::after {
  content: "Show";
  margin-left: auto;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent-ink);
}
.filters-collapse[open] .filters-collapse__summary::after { content: "Hide"; }
.filters-collapse__body { display: grid; gap: 1.25rem; }

/* Wide screens: no summary, filters always shown. The !important is
   needed because a closed <details> hides its own contents. */
@media (min-width: 961px) {
  .filters-collapse__summary { display: none; }
  .filters-collapse__body { display: grid !important; }
}
@media (max-width: 960px) {
  .filters-panel__head { display: none; }
  .filters-collapse__body { padding-top: 0.75rem; }
}

/* Results bar */
.results__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.results__count { font-size: 0.95rem; color: var(--ink-muted); }
.results__count strong { color: var(--ink); }
.results__controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }

.sort-form { display: flex; align-items: center; gap: 0.5rem; }
.sort-form label { font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); }
.sort-form select {
  min-height: 40px;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.925rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}

.view-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--page-tint);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.view-toggle__option {
  padding: 0.35rem 0.8rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-decoration: none;
}
.view-toggle__option.is-current { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
}
.chip:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.chip__x { font-size: 1.05rem; line-height: 1; color: var(--ink-muted); }
.chip:hover .chip__x { color: var(--accent-ink); }

/* List view: the same card, laid out in a row */
.course-grid--list { grid-template-columns: 1fr; }
/* In list view the cover turns from a banner into a spine down the
   left edge, which is closer to how the folders it borrows from are
   actually seen on a shelf. */
@media (min-width: 720px) {
  .course-card--list { flex-direction: row; align-items: stretch; }
  /* The art has to be taken out of the flow to fill a column whose
     height comes from the text beside it. Left in the flow it keeps
     its own proportions and leaves a bare block underneath. */
  .course-card--list .cover { flex: 0 0 132px; position: relative; }
  /* .cover--wide sets a fixed height, and it is written later in this
     file with the same specificity, so it was winning. Naming both
     classes here settles it rather than reaching for !important. */
  .course-card--list .cover--wide .cover__art {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  .course-card--list .course-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 210px;
    grid-template-areas:
      "top   foot"
      "title foot"
      "sum   foot"
      "facts foot";
    column-gap: 1.5rem;
    row-gap: 0.5rem;
    align-items: start;
  }
  .course-card--list .course-card__top { grid-area: top; justify-content: flex-start; gap: 0.6rem; }
  .course-card--list .course-card__title { grid-area: title; }
  .course-card--list .course-card__summary { grid-area: sum; }
  .course-card--list .facts { grid-area: facts; }
  .course-card--list .course-card__foot {
    grid-area: foot;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;
    margin-top: 0;
    padding-top: 0;
    padding-left: 1.5rem;
    border-top: 0;
    border-left: 1px solid var(--border);
    text-align: right;
  }
}
@media (max-width: 719px) {
  .course-card--list .cover--wide .cover__art { height: 88px; }
}

/* Page numbers */
.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
}
.pager__numbers { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pager__step, .pager__number {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  font-size: 0.925rem;
  text-decoration: none;
}
.pager__step:hover, .pager__number:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
.pager__number.is-current {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--on-brand);
}
.pager__step.is-disabled {
  color: var(--ink-muted);
  background: var(--page-tint);
  cursor: not-allowed;
}
.pager__step.is-disabled:hover { border-color: var(--border); color: var(--ink-muted); }


/* ---------------------------------------------------------------------
   STEP 4: course page (hero, enrol card, curriculum, reviews)
   --------------------------------------------------------------------- */

/* Card titles are links now. The ::after stretches the link over the
   whole card so the card is clickable, while the page still has only
   one focus stop per card. position: relative on the card is what the
   stretched layer measures itself against. */
.course-card { position: relative; }
.course-card__link { color: inherit; text-decoration: none; }
.course-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.course-card:hover { border-color: var(--border-strong); }
.course-card:has(.course-card__link:hover) .course-card__title { color: var(--accent-ink); }
/* The focus ring belongs around the card, not around the words. */
.course-card:has(.course-card__link:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.course-card__link:focus-visible { outline: none; }

.crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}
.crumbs .icon { color: var(--ink-muted); }
/* The base rule makes every svg display:block, which pushed the back
   arrow onto its own line above the link text. Inside a breadcrumb the
   icon belongs beside the words. */
.crumbs a { display: inline-flex; align-items: center; gap: 0.35rem; }

.course-hero { background: var(--page-tint); padding-block: clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--border); }
.course-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.course-hero h1 {
  font-size: clamp(1.9rem, 2vw + 1.2rem, 2.7rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.course-hero__summary { margin-top: 0.9rem; font-size: 1.1rem; color: var(--ink-muted); max-width: 60ch; }
.course-hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
  margin-top: 1.25rem;
  font-size: 0.925rem;
}
.course-hero__facts li:not(.badge) { display: inline-flex; align-items: center; gap: 0.4rem; }
.course-hero__facts .icon { color: var(--ink-muted); }
.course-hero__by { margin-top: 1rem; }
.course-hero .rating { margin-top: 0.5rem; }

.enrol-card {
  display: grid;
  gap: 0.75rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.enrol-card__price { font-size: 2rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.enrol-card__state {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--brand-100);
  color: var(--accent-ink);
  font-weight: 650;
}
.enrol-card__state--muted { background: var(--page-tint); color: var(--ink-muted); }
.enrol-card__leave { margin-top: 0.25rem; }
.enrol-card__list {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.enrol-card__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; align-items: start; }
.enrol-card__list .icon { color: var(--ink-muted); margin-top: 0.15rem; }

.course-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
  padding-block: clamp(2rem, 4vw, 3rem);
}
.panel__subheading { margin-top: 1.5rem; margin-bottom: 0.6rem; font-size: 1rem; font-weight: 650; }

/* Curriculum */
.curriculum { display: grid; gap: 0.75rem; }
.module { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--page-tint); }
.module__summary {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.4rem 0.8rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}
.module__summary::-webkit-details-marker { display: none; }
.module__number { font-size: 0.78rem; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.03em; }
.module__title { font-weight: 650; }
.module__meta { font-size: 0.85rem; color: var(--ink-muted); white-space: nowrap; }
.module__blurb { padding: 0 1rem 0.5rem; color: var(--ink-muted); font-size: 0.925rem; }

.lesson-list { padding: 0 0.5rem 0.5rem; display: grid; gap: 2px; }
.lesson {
  display: grid;
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.65rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: 0.925rem;
}
.lesson__icon { display: inline-grid; place-items: center; color: var(--accent-ink); }
.lesson__kind, .lesson__time { font-size: 0.82rem; color: var(--ink-muted); white-space: nowrap; }
.lesson__time { font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: right; }

/* Reviews */
.review-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--border);
}
.review-summary__score { display: grid; }
.review-summary__score strong { font-size: 2.4rem; font-weight: 750; line-height: 1; }
.review-summary__score .muted { font-size: 0.85rem; }

.histogram { display: grid; gap: 0.3rem; }
.histogram li { display: grid; grid-template-columns: 4.5rem 1fr 2rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.histogram__track { height: 8px; border-radius: 999px; background: var(--page-tint); overflow: hidden; }
.histogram__fill { display: block; height: 100%; background: var(--rating); }
.histogram__count { text-align: right; color: var(--ink-muted); font-variant-numeric: tabular-nums; }

.review-list { display: grid; gap: 1.1rem; padding-block: 1.25rem; }
.review { padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.review:last-child { border-bottom: 0; padding-bottom: 0; }
.review__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.avatar--sm { width: 28px; height: 28px; font-size: 0.7rem; }
.review__author { font-weight: 650; }
.review__stars { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 600; font-size: 0.9rem; }
.review__date { font-size: 0.85rem; color: var(--ink-muted); margin-left: auto; }
.review__body { margin-top: 0.5rem; color: var(--ink-muted); }

.review-form {
  display: grid;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.review-form h3 { font-size: 1.05rem; font-weight: 650; }
.review-form textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  resize: vertical;
}
.stars-input { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.review-form .button { justify-self: start; }


/* ---------------------------------------------------------------------
   STEP 5: the classroom
   --------------------------------------------------------------------- */

.classroom { padding-block: clamp(1.25rem, 3vw, 2rem); }
.classroom__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}
.classroom__main { min-width: 0; }

.lesson-head { margin-bottom: 1.25rem; }
.lesson-head h1 { font-size: clamp(1.5rem, 1.4vw + 1.1rem, 2rem); font-weight: 700; }
.lesson-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-muted);
}

/* Player. The 16:9 box is held by aspect-ratio so the page does not
   jump about while the video loads its first frame. */
.player {
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.player video, .player iframe { width: 100%; height: 100%; display: block; border: 0; }
.player--empty {
  display: grid;
  place-content: center;
  gap: 0.5rem;
  aspect-ratio: auto;
  min-height: 160px;
  padding: 2rem;
  text-align: center;
  background: var(--page-tint);
  color: var(--ink);
}
.player-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.player-bar label { font-size: 0.875rem; font-weight: 600; color: var(--ink-muted); }
.player-bar select {
  min-height: 40px;
  padding: 0.3rem 0.55rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
}
.player-bar .form__help { flex: 1 1 16rem; }

.lesson-text { margin-top: 1.5rem; display: grid; gap: 1rem; max-width: 68ch; font-size: 1.05rem; }
.lesson-text p { color: var(--ink); }

.locked {
  display: grid;
  gap: 0.6rem;
  padding: 2rem;
  background: var(--page-tint);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.locked__title { font-weight: 700; font-size: 1.1rem; }

.lesson-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.lesson-foot__nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-left: auto; }

.notes { margin-top: 1.5rem; }
.notes textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  resize: vertical;
}
.notes .button { justify-self: start; }

/* Progress bar */
.progress { display: block; margin-block: 0.75rem; }
.progress__bar {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: var(--page-tint);
  border: 1px solid var(--border);
  overflow: hidden;
}
.progress__fill { display: block; height: 100%; background: var(--brand-600); }
[data-theme="dark"] .progress__fill { background: var(--accent-ink); }
.progress__label { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--ink-muted); }

/* Course contents list */
.classroom__side .panel { position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
.side-module {
  display: grid;
  gap: 0.15rem;
  margin-top: 1.1rem;
  margin-bottom: 0.4rem;
  font-size: 0.95rem;
  font-weight: 650;
}
.side-lessons { display: grid; gap: 2px; }
.side-lesson {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.side-lesson:hover { background: var(--page-tint); }
.side-lesson.is-current { background: var(--brand-100); color: var(--accent-ink); font-weight: 650; }
.side-lesson__state { display: inline-grid; place-items: center; color: var(--ink-muted); }
.side-lesson.is-done .side-lesson__state { color: var(--brand-600); }
[data-theme="dark"] .side-lesson.is-done .side-lesson__state { color: var(--accent-ink); }
.side-lesson.is-current .side-lesson__state { color: inherit; }
.side-lesson__time { font-size: 0.78rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.side-lesson.is-current .side-lesson__time { color: inherit; }

/* A finished lesson on the course page */
.lesson--done .lesson__icon { color: var(--brand-600); }
[data-theme="dark"] .lesson--done .lesson__icon { color: var(--accent-ink); }
.lesson__title a { color: inherit; text-decoration: none; }
.lesson__title a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Dashboard rows carry a progress bar now */
.mini-course .progress { margin-block: 0.5rem 0.25rem; }
.mini-course .button { justify-self: start; margin-top: 0.4rem; }


/* ---------------------------------------------------------------------
   STEP 6: quizzes and results
   --------------------------------------------------------------------- */

.quiz { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.quiz__meta { font-size: 0.9rem; color: var(--ink-muted); }
.quiz__questions {
  display: grid;
  gap: 1.25rem;
  /* The browser's own list numbers sit outside the card and centre
     themselves against it, which reads as a stray "3." floating in the
     margin. A counter puts the number where the question starts. */
  list-style: none;
  counter-reset: question;
}

.quiz-question {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.quiz-question { counter-increment: question; }
.quiz-question legend::before {
  content: counter(question) ". ";
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.quiz-question fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.quiz-question legend {
  padding: 0;
  margin-bottom: 0.75rem;
  font-weight: 650;
  font-size: 1.02rem;
  line-height: 1.4;
}

/* Options are big targets: a radio dot alone is a hard thing to hit on
   a phone, and the whole row is the label anyway. */
.checkbox--option {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 0.65rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--page-tint);
  font-weight: 450;
}
.checkbox--option:hover { border-color: var(--border-strong); }
.checkbox--option input { margin-top: 0.2rem; accent-color: var(--brand-600); }
.checkbox--option:has(input:checked) { border-color: var(--accent-ink); background: var(--brand-100); }

.quiz__foot { display: grid; gap: 0.5rem; justify-items: start; }

/* Results */
.result {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.25rem;
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--border);
  border-left-width: 5px;
  border-radius: var(--radius);
  background: var(--surface);
}
/* Pass and fail are told apart by the words first. The colour is a
   second signal, not the only one, because a colour on its own is no
   signal at all to a reader who cannot see the difference. */
.result--pass { border-left-color: #1E7A46; }
.result--fail { border-left-color: var(--brand-600); }
[data-theme="dark"] .result--pass { border-left-color: #4ADE80; }
[data-theme="dark"] .result--fail { border-left-color: var(--accent-ink); }
.result__score { display: flex; align-items: baseline; gap: 0.6rem; }
.result__score strong { font-size: 2.2rem; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; }
.result__score span { font-weight: 650; }
.result__detail { color: var(--ink-muted); font-size: 0.95rem; }

.review-questions { display: grid; gap: 1.25rem; margin-top: 1.5rem; list-style: none; counter-reset: question; }
.review-question { counter-increment: question; }
.review-question__prompt::before {
  content: counter(question) ". ";
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}
.review-question {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.review-question__prompt {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-weight: 650;
  margin-bottom: 0.85rem;
}
.review-question__mark {
  display: inline-grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
}
.review-question__mark.is-right { background: #1E7A46; color: #fff; }
.review-question__mark.is-wrong { background: var(--page-tint); color: var(--ink-muted); border: 1px solid var(--border-strong); }

.review-choices { display: grid; gap: 0.4rem; }
.review-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--ink-muted);
}
.review-choice.is-correct { border-color: #1E7A46; color: var(--ink); font-weight: 550; }
.review-choice.is-chosen-wrong { border-style: dashed; border-color: var(--border-strong); }
[data-theme="dark"] .review-choice.is-correct { border-color: #4ADE80; }

.tag {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--brand-100);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 650;
  white-space: nowrap;
}
.tag--muted { background: var(--page-tint); color: var(--ink-muted); }

.rationale {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  color: var(--ink-muted);
  font-size: 0.95rem;
}

.attempt-history { margin-top: 1.25rem; }
.attempt-history h2 { font-size: 1rem; font-weight: 650; margin-bottom: 0.5rem; }
.attempt-history ul { display: grid; gap: 0.35rem; }
.attempt-history li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }


/* ---------------------------------------------------------------------
   STEP 7: the instructor studio
   --------------------------------------------------------------------- */

.section-heading { font-size: 1.1rem; font-weight: 650; margin-block: 1.5rem 0.75rem; }

.studio-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.studio-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.studio-head__actions .tag { padding: 0.3rem 0.65rem; }

/* Stat tiles. Four numbers, no charts: a picture of one value is just
   a slower way to read the value. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.stat {
  display: grid;
  gap: 0.2rem;
  padding: 1rem 1.15rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.stat__label { font-size: 0.85rem; color: var(--ink-muted); }
/* Proportional figures, not tabular: at this size tabular digits make
   a number like 121 look gappy. Tabular is for columns that align. */
.stat__value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.stat__of, .stat__note { font-size: 0.8rem; font-weight: 450; color: var(--ink-muted); }

/* Course list in the studio */
.studio-list { display: grid; gap: 1rem; }
.studio-course {
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.studio-course__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}
.studio-course__track {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 600; color: var(--accent-ink);
}
.studio-course__title { font-size: 1.15rem; font-weight: 700; margin-top: 0.2rem; }
.studio-course__title a { color: inherit; text-decoration: none; }
.studio-course__title a:hover { color: var(--accent-ink); text-decoration: underline; }
.studio-course__stats {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem;
  margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--border);
  font-size: 0.9rem;
}
.studio-course__stats dt { color: var(--ink-muted); font-size: 0.8rem; }
.studio-course__stats dd { font-weight: 650; }

/* The builder */
.builder { display: grid; gap: 0.75rem; list-style: none; }
.builder-module {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--page-tint);
  overflow: hidden;
}
.builder-module__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
}
.builder-module__title { font-weight: 650; }
.builder-module__count, .builder-lesson__meta { font-size: 0.82rem; color: var(--ink-muted); }
.builder-module__moves, .builder-lesson__moves { display: flex; gap: 2px; margin-left: auto; }

.builder-lessons { display: grid; gap: 2px; padding: 0.5rem; list-style: none; }
.builder-lesson {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: 0.925rem;
}
.builder-lesson__icon { display: inline-grid; place-items: center; color: var(--accent-ink); }
.builder-lesson__title { color: var(--ink); text-decoration: none; font-weight: 550; }
.builder-lesson__title:hover { color: var(--accent-ink); text-decoration: underline; }
.builder-empty { padding: 0.75rem 1rem; font-size: 0.9rem; color: var(--ink-muted); }

.builder-module__tools {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  padding: 0.5rem 0.9rem 0.9rem;
}
.builder-module__tools > details, .builder-add { flex: 1 1 100%; }
.builder-module__tools summary, .builder-add summary, .table-view summary,
details.danger > summary {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0;
  font-size: 0.875rem; font-weight: 600; color: var(--accent-ink);
  cursor: pointer;
  list-style: none;
}
.builder-module__tools summary::-webkit-details-marker,
.builder-add summary::-webkit-details-marker,
.table-view summary::-webkit-details-marker,
details.danger > summary::-webkit-details-marker { display: none; }
.builder-module__tools details[open] > summary { margin-bottom: 0.4rem; }
.builder-add { margin-top: 1rem; }
.builder-add summary { font-size: 0.95rem; }

details.danger summary { color: var(--danger); }
details.danger p {
  display: flex; align-items: flex-start; gap: 0.4rem;
  margin-block: 0.5rem 0.75rem;
  font-size: 0.9rem; color: var(--ink-muted);
}
details.danger .icon { flex-shrink: 0; margin-top: 0.15rem; color: var(--danger); }

.button--danger { background: var(--danger); color: #fff; }
.button--danger:hover { filter: brightness(0.92); }
[data-theme="dark"] .button--danger { color: #1a0c0a; }

.inline-form { display: inline-flex; }
.icon-button--sm { width: 32px; height: 32px; border-radius: 6px; }

/* Drag handles appear only once JavaScript has wired up dragging, so
   nobody is invited to drag something that will not move. */
.drag-handle { display: none; color: var(--ink-muted); cursor: grab; }
.js-drag .drag-handle { display: inline-grid; place-items: center; }
.js-drag [data-sort-item] { transition: opacity 0.12s; }
[data-sort-item].is-dragging { opacity: 0.4; }
[data-sort-item].is-over { border-color: var(--accent-ink); box-shadow: inset 0 3px 0 -1px var(--accent-ink); }

.form--inline {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem;
}
.form--inline .field { flex: 1 1 200px; margin: 0; }
.form--inline .button { flex: 0 0 auto; }
.field-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.field-row .field { flex: 1 1 160px; }
.field--narrow { flex: 0 1 130px; }
.form textarea {
  width: 100%;
  padding: 0.6rem 0.8rem;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  resize: vertical;
}
.form fieldset { border: 0; padding: 0; margin: 0; }
.form fieldset legend { padding: 0; font-size: 0.85rem; font-weight: 600; }
.address-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
code {
  padding: 0.1rem 0.35rem;
  background: var(--page-tint);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 0.9em;
}

/* Question editor */
.builder-question {
  padding: 1rem;
  background: var(--page-tint);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.builder-question__prompt { font-weight: 650; margin-bottom: 0.6rem; }
.builder-choices { display: grid; gap: 0.3rem; font-size: 0.9rem; }
.builder-choices li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
}
.builder-choices li.is-correct { border-color: #1E7A46; color: var(--ink); font-weight: 550; }
[data-theme="dark"] .builder-choices li.is-correct { border-color: #4ADE80; }

.question-form { padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.answer-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.answer-row__correct { display: inline-grid; place-items: center; min-width: 32px; min-height: 32px; cursor: pointer; }
.answer-row__correct input { accent-color: var(--brand-600); width: 1.05rem; height: 1.05rem; }
.answer-row input[type="text"] { flex: 1 1 auto; min-height: 40px; }

/* Chart */
.chart-figure { margin-top: 0.75rem; }
.chart { display: block; width: 100%; height: auto; }
.chart__bar { fill: var(--chart-bar); }
.chart__zero { fill: var(--border-strong); }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart__axis { stroke: var(--border-strong); stroke-width: 1; }
/* Axis text wears text tokens, never the data colour. */
.chart__tick, .chart__label {
  fill: var(--ink-muted);
  font-size: 12px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.chart__value { fill: var(--ink); font-size: 13px; font-weight: 700; font-family: inherit; }
.chart__hit { fill: transparent; }
.chart__hit:hover { fill: color-mix(in srgb, var(--chart-bar) 8%, transparent); }
.chart-figure figcaption { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-muted); }

/* On a phone the whole SVG is scaled down to about half size, which
   took the axis text with it and left it at roughly 5px: drawn, and
   unreadable. The sizes below are in the viewBox's own units, so
   raising them here makes the text bigger RELATIVE to the chart, and
   it lands back at a readable size once the SVG is scaled. Nothing
   scrolls and nothing is cut off. */
@media (max-width: 600px) {
  .chart__tick, .chart__label { font-size: 24px; }
  .chart__value { font-size: 26px; }
}
.chart-empty {
  padding: 1.5rem;
  background: var(--page-tint);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--ink-muted);
}
.table-view { margin-top: 1rem; }

/* Learner table */
.table--learners th[scope="row"] { font-weight: 650; }
.learner-email { display: block; font-weight: 450; font-size: 0.82rem; color: var(--ink-muted); }
.progress-cell { min-width: 190px; }
.progress-cell .progress { margin: 0; }
.progress-cell__text { display: block; margin-top: 0.3rem; font-size: 0.8rem; color: var(--ink-muted); }
.table tr.is-withdrawn th, .table tr.is-withdrawn td { opacity: 0.6; }
.owner-form { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.owner-form select { min-height: 40px; padding: 0.3rem 0.5rem; font: inherit; font-size: 0.9rem;
  color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px; }


/* ---------------------------------------------------------------------
   COURSE COVER ARTWORK (see includes/course-art.php)

   Each cover carries data-track-colour, and that one attribute sets the
   three variables the SVG inside it draws with. So the artwork is
   generated once, in PHP, and recoloured by CSS, which is also how it
   follows light and dark mode without being redrawn.
   --------------------------------------------------------------------- */
.cover {
  display: block;
  overflow: hidden;
  background: var(--track-deep);
  --track-base: var(--track-1);
  --track-deep: var(--track-1-deep);
  --track-tab:  #FFFFFF;
}
.cover[data-track-colour="1"] { --track-base: var(--track-1); --track-deep: var(--track-1-deep); }
.cover[data-track-colour="2"] { --track-base: var(--track-2); --track-deep: var(--track-2-deep); }
.cover[data-track-colour="3"] { --track-base: var(--track-3); --track-deep: var(--track-3-deep); }
.cover[data-track-colour="4"] { --track-base: var(--track-4); --track-deep: var(--track-4-deep); }
.cover[data-track-colour="5"] { --track-base: var(--track-5); --track-deep: var(--track-5-deep); }
.cover[data-track-colour="6"] { --track-base: var(--track-6); --track-deep: var(--track-6-deep); }

.cover__art { display: block; width: 100%; }
.cover--wide .cover__art { height: 108px; }
.cover--hero .cover__art { height: 160px; }

/* The card slides its cover up a little on hover: the only thing that
   moves, and it moves because the person pointed at it. */
.cover--wide .cover__art { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.3, 1); }
.course-card:hover .cover--wide .cover__art { transform: scale(1.06); }


/* ---------------------------------------------------------------------
   PROGRESS RING, COURSE BANNER, NAVY FOOTER
   --------------------------------------------------------------------- */

.ring { width: 60px; height: 60px; display: block; }
/* The unfilled part of the ring is the track colour at low strength,
   not a grey. A grey the same tone as the row behind it made the ring
   vanish and left the filled arc floating on its own. */
.ring__track { stroke: var(--track-base, var(--brand-600)); stroke-opacity: 0.2; }
.ring__fill  { stroke: var(--track-base, var(--brand-600)); }
.ring__text {
  fill: var(--ink);
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
}

/* A dashboard row: ring on the left, everything else beside it. */
.mini-course--ring {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  column-gap: 1.1rem;
  align-items: start;
}
.mini-course--ring > :not(.mini-course__ring) { grid-column: 2; }
.mini-course__ring { grid-column: 1; grid-row: 1 / span 4; align-self: center; }
.mini-course--ring[data-track-colour="1"] { --track-base: var(--track-1); }
.mini-course--ring[data-track-colour="2"] { --track-base: var(--track-2); }
.mini-course--ring[data-track-colour="3"] { --track-base: var(--track-3); }
.mini-course--ring[data-track-colour="4"] { --track-base: var(--track-4); }
.mini-course--ring[data-track-colour="5"] { --track-base: var(--track-5); }
.mini-course--ring[data-track-colour="6"] { --track-base: var(--track-6); }

/* The course page banner. */
.course-hero { position: relative; overflow: hidden; }
.course-hero .cover--hero { position: absolute; inset: 0 0 auto 0; }
.course-hero .cover--hero .cover__art { height: 8px; }
.course-hero[data-track-colour="1"] { --track-base: var(--track-1); }
.course-hero[data-track-colour="2"] { --track-base: var(--track-2); }
.course-hero[data-track-colour="3"] { --track-base: var(--track-3); }
.course-hero[data-track-colour="4"] { --track-base: var(--track-4); }
.course-hero[data-track-colour="5"] { --track-base: var(--track-5); }
.course-hero[data-track-colour="6"] { --track-base: var(--track-6); }
.course-hero .crumbs a:last-child { color: var(--track-base); font-weight: 600; }

/* The footer closes the page on the same navy the hero opens it with. */
.site-footer {
  border-top: 0;
  background: var(--navy-900);
  color: var(--on-navy-muted);
  padding-block: 3rem;
}
.site-footer .logo { color: #fff; }
.site-footer__tagline, .site-footer__note, .site-footer__copy { color: var(--on-navy-muted); }


/* RESPONSIVE: tablets and phones ------------------------------------- */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; }
  .record { max-width: 560px; }
  .track-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The sidebar stops being a sidebar and sits above the results. */
  .catalogue__layout { grid-template-columns: 1fr; }
  .course-hero__inner { grid-template-columns: 1fr; }
  .course-body { grid-template-columns: 1fr; }
  /* The contents list goes under the lesson on a narrow screen, and
     stops being sticky: a pinned panel taller than the window traps
     whatever sits at its bottom. */
  .classroom__layout { grid-template-columns: 1fr; }
  .classroom__side .panel { position: static; max-height: none; overflow: visible; }
  .filters-panel { position: static; }
  .site-footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  /* Four things do not fit across a phone: logo, menu links, theme
     button and account button. So the header becomes two rows, with
     the page links underneath. Everything stays reachable by thumb. */
  .site-header__inner {
    flex-wrap: wrap;
    gap: 0.5rem;
    min-height: 0;
    padding-block: 0.5rem;
  }
  .logo { order: 1; }
  .header-actions { order: 2; margin-left: auto; }
  .site-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
  }
  html { scroll-padding-top: 8rem; }   /* the taller header must not cover a heading */
  .logo__him { font-size: 1.35rem; }
  .logo__badge { font-size: 1.1rem; }
  .site-nav a { padding: 0.5rem; }
  .track-grid { grid-template-columns: 1fr; }
  .catalogue__search { flex-wrap: wrap; }
  .catalogue__search .field--search { max-width: none; width: 100%; }
  .results__bar { align-items: flex-start; }
  /* A five-column lesson row does not fit a phone: the kind and the
     time drop under the title rather than squeezing it to two words. */
  .lesson { grid-template-columns: auto 1fr auto; row-gap: 0.2rem; }
  .lesson__kind { grid-column: 2; }
  .lesson__time { grid-column: 3; }
  .module__summary { grid-template-columns: 1fr; }
  .review-summary { grid-template-columns: 1fr; gap: 0.75rem; }
  .studio-head { flex-direction: column; }
  .builder-module__moves, .builder-lesson__moves { margin-left: 0; }
  .builder-lesson { row-gap: 0.25rem; }
  .form--inline { flex-direction: column; align-items: stretch; }
  .form--inline .button { width: 100%; }
  .sort-form { flex-wrap: wrap; }
  .record { padding: 1.1rem; }
  .account__name { display: none; }
  .signup-link { display: none; }          /* keep the header from wrapping on small phones */
  .detail-list > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .code-chip--query { white-space: normal; text-align: center; }
}


/* ====================================================================
   19. PAYMENTS AND CERTIFICATES (Step 8)
   ==================================================================== */

/* --- Bigger icons, for the one-mark-per-page moments ---------------- */
.icon--lg { width: 1.75rem; height: 1.75rem; }
.icon--xl { width: 3rem;    height: 3rem; }

/* --- A panel whose whole job is to deliver one verdict -------------- */
.panel--center { text-align: center; }
.panel--center .receipt,
.panel--center .form__help { text-align: left; }
.button-row--center { justify-content: center; }

.state-icon { margin: 0 0 0.5rem; line-height: 1; color: var(--ink-muted); }
.state-icon--good { color: var(--good); }
.state-icon--bad  { color: var(--danger); }

/* The verdict on the verification page. The colour is a second signal,
   never the only one: the heading says "genuine" or "withdrawn" in
   words, and the icon differs in shape as well as in hue, so the page
   still reads correctly in greyscale and to a colour-blind reader. */
.verdict { border-left: 4px solid var(--border-strong); }
.verdict--good { border-left-color: var(--good);   background: var(--good-tint); }
.verdict--bad  { border-left-color: var(--danger); background: var(--danger-tint); }
.verdict h2 { margin-top: 0; }

.notice { border-radius: var(--radius); padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.notice--bad { background: var(--danger-tint); border-left: 4px solid var(--danger); }
.notice p { margin: 0; }

/* --- A receipt, or any short list of facts about one thing ---------- */
.receipt { display: grid; gap: 0.55rem; margin: 1.5rem 0; }
.receipt > div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1rem;
  align-items: baseline;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border);
}
.receipt > div:last-child { border-bottom: 0; padding-bottom: 0; }
.receipt dt { color: var(--ink-muted); font-size: 0.95rem; }
.receipt dd { margin: 0; font-weight: 500; }

.code--tiny {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-muted);
  word-break: break-all;
}

/* --- Payment status badges ----------------------------------------- */
.badge--pay { white-space: nowrap; }
.badge--pay-successful { background: var(--good-tint);   color: var(--good); }
.badge--pay-failed     { background: var(--danger-tint); color: var(--danger); }
.badge--pay-mismatch   { background: var(--danger-tint); color: var(--danger); font-weight: 700; }
.badge--pay-pending    { background: var(--page-tint);   color: var(--ink-muted); }

.pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0; padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.88rem; font-weight: 600;
}
.pill--ceu { background: var(--brand-100); color: var(--accent-ink); }

/* --- The certificate grid on the dashboard -------------------------- */
.cert-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.cert-card {
  --track-base: var(--brand-600);
  position: relative;
  padding: 1.1rem 1.1rem 1rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--track-base);
  border-radius: var(--radius);
  background: var(--surface);
}
.cert-card[data-track-colour="1"] { --track-base: var(--track-1); }
.cert-card[data-track-colour="2"] { --track-base: var(--track-2); }
.cert-card[data-track-colour="3"] { --track-base: var(--track-3); }
.cert-card[data-track-colour="4"] { --track-base: var(--track-4); }
.cert-card[data-track-colour="5"] { --track-base: var(--track-5); }
.cert-card[data-track-colour="6"] { --track-base: var(--track-6); }

.cert-card__mark { margin: 0 0 0.4rem; color: var(--track-base); line-height: 1; }
.cert-card__title { margin: 0 0 0.2rem; font-size: 1.02rem; line-height: 1.3; }
.cert-card__title a { color: inherit; text-decoration: none; }
.cert-card__title a:hover { text-decoration: underline; }
.cert-card__track { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--ink-muted); }
.cert-card__serial { margin: 0.6rem 0 0; }

/* --- The "you finished it" block in the classroom sidebar ---------- */
.claim {
  margin-top: 0.9rem; padding: 0.85rem;
  border: 1px solid var(--good); border-radius: var(--radius);
  background: var(--good-tint);
}
.claim__title {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 0.6rem; font-weight: 700; color: var(--good);
}

.enrol-card__note {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0.85rem 0 0; font-size: 0.88rem; color: var(--ink-muted);
}

.site-footer__links { display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ====================================================================
   THE CERTIFICATE
   ==================================================================== */

/* The serial, wherever it appears. Tabular figures and a wide letter
   space because this string gets read aloud and typed in by hand. */
.certificate__serial {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.95em;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  background: var(--page-tint);
  padding: 0.12em 0.4em;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.certificate { margin: 0 0 2rem; }

.certificate__frame {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(1.5rem, 5vw, 3.5rem);
  text-align: center;
  background: var(--surface);
  /* Two rules rather than a decorative border image: it survives being
     printed on any printer, and it costs no download. */
  border: 1px solid var(--border-strong);
  outline: 6px solid var(--brand-100);
  outline-offset: -14px;
  border-radius: 2px;
}

.certificate__head { margin-bottom: clamp(1.25rem, 4vw, 2.25rem); }
.certificate__brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0; font-weight: 800; letter-spacing: 0.02em;
  color: var(--accent-ink);
}
.certificate__kind {
  margin: 0.5rem 0 0;
  font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-muted);
}

.certificate__preamble {
  margin: 0; font-size: 0.95rem; color: var(--ink-muted);
}

.certificate__holder {
  margin: 0.5rem 0 1.25rem;
  font-size: clamp(1.7rem, 5vw, 2.7rem);
  font-weight: 700;
  line-height: 1.15;
  /* The one place on the site where a name is underlined, because on a
     certificate that line is what says "this is the holder". */
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--brand-100);
  display: inline-block;
}

.certificate__course {
  margin: 0.4rem 0 0.75rem;
  font-size: clamp(1.15rem, 3vw, 1.6rem);
  line-height: 1.3;
}

.certificate__ceu {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
  /* Centred explicitly. As an inline-flex it looked centred on a wide
     screen and then slid left the moment it wrapped onto two lines,
     because a wrapped flex row starts at its left edge. */
  justify-content: center;
  margin: 0 0 clamp(1.25rem, 4vw, 2.25rem);
  font-weight: 600;
}
.certificate__track {
  font-weight: 500; font-size: 0.85rem; color: var(--ink-muted);
  padding-left: 0.6rem; border-left: 1px solid var(--border);
}

.certificate__foot {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  justify-content: space-between; align-items: flex-end;
  text-align: left;
  margin-top: clamp(1.25rem, 4vw, 2.25rem);
}
.certificate__sign { min-width: 200px; }
.certificate__rule { margin: 0 0 0.4rem; border-top: 1px solid var(--ink); width: 210px; }
.certificate__signer { margin: 0; font-weight: 600; }
.certificate__role   { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--ink-muted); }

.certificate__meta { text-align: right; font-size: 0.85rem; }
.certificate__meta p { margin: 0 0 0.2rem; }
.certificate__meta strong { color: var(--ink-muted); font-weight: 600; }
.certificate__check { color: var(--ink-muted); }

/* A withdrawn certificate must not be printable as though it were
   valid, so it carries the word across it. */
.certificate--void .certificate__frame { opacity: 0.75; }
.certificate__stamp {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  margin: 0;
  font-size: clamp(2.5rem, 12vw, 6rem); font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--danger); opacity: 0.18;
  transform: rotate(-18deg);
  pointer-events: none;
}

@media (max-width: 600px) {
  .receipt > div { grid-template-columns: 1fr; gap: 0.1rem; }
  .certificate__foot { flex-direction: column; align-items: flex-start; }
  .certificate__meta { text-align: left; }

  /* The divider between the CEU hours and the track name only makes
     sense while they sit side by side. Once the line wraps, it is a
     stray vertical stroke floating beside a word. */
  .certificate__ceu { flex-direction: column; gap: 0.3rem; }
  .certificate__track { border-left: 0; padding-left: 0; }
}

/* ====================================================================
   PRINTING
   Only the certificate prints. Nobody wants a navigation bar, a footer
   or a "Print this page" button on a framed certificate.
   ==================================================================== */
@media print {
  .site-header, .site-footer, .no-print, .skip-link { display: none !important; }

  /* Printers are given white paper and black ink whatever the person's
     screen theme is, because dark mode on paper wastes a cartridge and
     comes out unreadable. */
  :root, [data-theme="dark"] {
    --page: #FFFFFF; --page-tint: #FFFFFF; --surface: #FFFFFF;
    --ink: #000000;  --ink-muted: #3A3A3A;
    --border: #B9C1CC; --border-strong: #6B7280;
    --brand-100: #DCE6F7; --accent-ink: #00307A;
    --shadow: none;
  }

  body { background: #FFFFFF; }
  .page, main { padding: 0 !important; margin: 0 !important; }
  .certificate { margin: 0; }
  .certificate__frame {
    max-width: none; border-color: #6B7280;
    /* Keep it on one sheet. */
    break-inside: avoid;
  }

  /* An address is useless in ink, so the verification address is spelled
     out beside the link instead. */
  a[href]::after { content: ""; }

  @page { margin: 12mm; }
}


/* --- The self-check page -------------------------------------------- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.check {
  display: grid; grid-template-columns: auto 1fr; gap: 0.85rem;
  align-items: start;
  padding: 0.85rem;
  border-radius: var(--radius-sm);
}
.check + .check { border-top: 1px solid var(--border); border-top-left-radius: 0; border-top-right-radius: 0; }
.check__mark { line-height: 1; }
.check--good .check__mark { color: var(--good); }
.check--bad  .check__mark { color: var(--danger); }
.check--note .check__mark { color: var(--ink-muted); }
.check--bad { background: var(--danger-tint); }
.check__title  { margin: 0 0 0.15rem; font-weight: 600; }
.check__detail { margin: 0; color: var(--ink-muted); font-size: 0.95rem; }
.check__fix {
  margin: 0.5rem 0 0; padding: 0.6rem 0.75rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; line-height: 1.55;
}


/* ====================================================================
   A CERTIFICATE BUILT ON YOUR OWN ARTWORK
   The picture is the certificate. Everything here does is place the
   wording on top of it, using percentages so it lands in the same spot
   whatever the screen, and on paper.
   ==================================================================== */
.certificate--custom { max-width: 1100px; margin: 0 auto 2rem; }

.certificate__art {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* cqw units inside mean "percent of THIS box's width", which is what
     makes the wording scale with the artwork instead of with the page. */
  container-type: inline-size;
  border-radius: 2px;
  box-shadow: var(--shadow);
  background: #FFFFFF;
}

.certificate__bg {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
}

.cert-line {
  position: absolute;
  margin: 0;
  line-height: 1.2;
  /* A long name must never spill off the edge of somebody's artwork. */
  overflow-wrap: break-word;
  /* The size, colour and position come from includes/config.php and
     arrive in the style attribute, so nothing is hard-coded here. */
}
.cert-line--holder { font-weight: 700; }
.cert-line--course { font-weight: 600; }
.cert-line--code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.05em;
}

/* The measuring grid, on only when &guides=1 is in the address. */
.cert-guides { position: absolute; inset: 0; pointer-events: none; }
.cert-guides__h, .cert-guides__v { position: absolute; }
.cert-guides__h {
  left: 0; width: 100%; height: 0;
  border-top: 1px solid rgba(220, 38, 38, 0.35);
}
.cert-guides__v {
  top: 0; height: 100%; width: 0;
  border-left: 1px solid rgba(37, 99, 235, 0.35);
}
.cert-guides .is-major { border-color: rgba(220, 38, 38, 0.8); }
.cert-guides__v.is-major { border-color: rgba(37, 99, 235, 0.8); }
.cert-guides b {
  position: absolute;
  font: 700 1.3cqw/1 ui-monospace, Menlo, Consolas, monospace;
  background: #FFFFFF; padding: 0.15em 0.3em; border-radius: 2px;
}
.cert-guides__h b { left: 0.3%;  top: 0.2%;  color: #B42318; }
.cert-guides__v b { top: 0.3%;   left: 0.2%; color: #1D4ED8; }

.certificate--custom .certificate__stamp { z-index: 2; }

@media print {
  .certificate--custom { max-width: none; }
  .certificate__art { box-shadow: none; break-inside: avoid; }
  /* Background pictures are dropped by default when printing, and a
     certificate without its artwork is a blank page with four lines of
     text on it. This asks the browser to print it. */
  .certificate__art, .certificate__bg {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .cert-guides { display: none; }
}