/* =========================================================================
   Learn Care Excel — Learner Portal (LMS homepage)
   Replaces the stock TalentLMS "Plus" template with full LCE branding.
   Brand: deep slate + teal + lime green · Type: Futura (Typekit ygp0kuc)
   ========================================================================= */

:root {
  --font-display: 'futura-100', 'Futura', system-ui, sans-serif;
  --font-sans: 'futura-100', 'Futura', system-ui, -apple-system, sans-serif;

  /* Type weights. The Typekit kit serves real 400/500/600/700 cuts of
     futura-100 — no faux bold — but Futura is a geometric face, and its Demi
     and Bold cuts read as heavy and blocky at interface sizes. So the whole
     scale sits one step lighter than a grotesque would: nothing in the UI
     goes above 600. Tune the two tokens, not the 80-odd rules that use them. */
  --fw-mid:    500;   /* nav items, labels, table headers, buttons */
  --fw-strong: 600;   /* headings, prices, stat numbers, <b> */

  /* Brand */
  --ink:        #1c3a48;
  --ink-900:    #122a35;
  --ink-800:    #1c3a48;
  --ink-700:    #2b4f5e;
  --teal:       #14868b;
  --teal-600:   #0f6d72;
  --teal-700:   #0b585c;
  --teal-50:    #e3f1f1;
  --lime:       #8bc53f;
  --lime-600:   #6fa62b;
  --lime-50:    #eef7e1;
  --lime-700:   #3f6416;

  /* Warning / draft / pending. One scale — before this there were four
     near-identical ambers and they sat next to each other on the builder. */
  --amber-50:   #fdf6e3;
  --amber-100:  #f0e0b0;
  --amber-200:  #f6e3bd;
  --amber-700:  #8a6d1f;
  --amber-800:  #6f4a10;

  --text:       #243640;
  --muted:      #5d6e76;
  --line:       #e2e9e8;
  --paper:      #f5f8f7;
  --paper-2:    #eef3f2;
  --card:       #ffffff;
  --white:      #ffffff;

  --page-max: 1240px;
  --gutter: clamp(20px, 4.5vw, 64px);

  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;
  --r-brand: 24px 24px 24px 72px;

  --shadow-sm: 0 2px 8px rgba(18, 42, 53, 0.06);
  --shadow-md: 0 14px 36px -16px rgba(18, 42, 53, 0.22);
  --shadow-lg: 0 36px 70px -30px rgba(18, 42, 53, 0.34);

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  font-family: var(--font-sans);
  color: var(--text);
  line-height: 1.6;
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; }
/* <b>, <strong> and <th> come out of the browser at 700. The markup leans on
   <b> a lot (brand wordmark, stat figures, prices), so left alone they'd be
   the heaviest thing on the page — pull them onto the same scale as the rest. */
b, strong, th { font-weight: var(--fw-strong); }

/* Every interactive element shows the pointing-hand cursor so it's always
   obvious what can be clicked; text fields keep the I-beam. */
a, button, summary, select, label,
input[type="checkbox"], input[type="radio"], input[type="submit"],
.chip, .qopt, .checkline, .ccard, .pcard, .pnav-item {
  cursor: pointer;
}
input[type="text"], input[type="email"], input[type="password"], input[type="search"] { cursor: text; }
.pnav-item.is-locked, [aria-disabled="true"] { cursor: not-allowed; }
/* Decorative hover cards that are NOT clickable keep the default arrow */
.tpoint, .step { cursor: default; }
/* Stat tiles are links to their sections — lift on hover like other cards */
a.pstat { transition: transform .25s var(--ease); border-radius: var(--r-md); }
a.pstat:hover { transform: translateY(-3px); }

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--fluid { max-width: none; }

.skip-link {
  position: absolute; top: -100%; left: 16px; z-index: 2000;
  padding: 12px 22px; background: var(--ink); color: #fff;
  font-weight: var(--fw-mid); border-radius: var(--r-sm); transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* ---------- Type ---------- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-strong);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: var(--fw-strong); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--teal-600);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--lime);
}
.eyebrow--light { color: #bfe6e6; }
.eyebrow--light::before { background: var(--lime); }

.section { padding-block: clamp(56px, 8vw, 104px); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 26px; border-radius: var(--r-pill);
  font-weight: var(--fw-mid); font-size: 15.5px;
  white-space: nowrap; line-height: 1;
  transition: transform .25s var(--ease), background .25s var(--ease),
              box-shadow .25s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn svg { width: 18px; height: 18px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(1px); }

.btn--teal { background: var(--teal); color: #fff; box-shadow: 0 10px 24px -10px rgba(20,134,139,.6); }
.btn--teal:hover { background: var(--teal-600); transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(20,134,139,.7); }
.btn--lime { background: var(--lime); color: #fff; box-shadow: 0 10px 24px -10px rgba(139,197,63,.6); }
.btn--lime:hover { background: var(--lime-600); transform: translateY(-2px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-900); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal-600); transform: translateY(-2px); }
.btn--ghost-light { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.4); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); border-color: #fff; transform: translateY(-2px); }
.btn--white { background: #fff; color: var(--ink); border: 1.5px solid var(--line); box-shadow: var(--shadow-sm); }
.btn--white:hover { border-color: var(--teal); color: var(--teal-700); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--lg { padding: 18px 32px; font-size: 16.5px; }
.btn--sm { padding: 11px 18px; font-size: 14.5px; }
.btn--lead svg { width: 17px; height: 17px; }
.btn--lead:hover svg { transform: none; }

/* ---------- Search bar ---------- */
.searchbar {
  display: flex; align-items: center; gap: 8px; background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 7px 7px 7px 20px; box-shadow: var(--shadow-md);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.searchbar:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-50), var(--shadow-md); }
.searchbar svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.searchbar input { flex: 1; border: 0; outline: 0; background: none; font-family: var(--font-sans); font-size: 16px; color: var(--text); min-width: 0; }
.searchbar input::placeholder { color: #9aa7ad; }
.searchbar button { flex-shrink: 0; background: var(--teal); color: #fff; font-weight: var(--fw-strong); font-size: 15px; padding: 11px 22px; border-radius: var(--r-pill); transition: background .2s var(--ease); }
.searchbar button:hover { background: var(--teal-600); }

/* =========================================================================
   PORTAL HEADER
   ========================================================================= */
.portal-header {
  position: sticky; top: 0; z-index: 900;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.portal-header.is-stuck { box-shadow: var(--shadow-sm); }
.pnav { display: flex; align-items: center; gap: 26px; padding-block: 14px; transition: padding-block .25s var(--ease); }
.portal-header.is-stuck .pnav { padding-block: 9px; }
.pnav__logo { display: flex; align-items: center; gap: 13px; flex-shrink: 0; }
.pnav__logo-mark { width: auto; height: 50px; transition: height .25s var(--ease); }
.portal-header.is-stuck .pnav__logo-mark { height: 42px; }
.pnav__logo-word { display: none; flex-direction: column; gap: 4px; }
@media (min-width: 560px) { .pnav__logo-word { display: flex; } }
.pnav__logo-word b { font-family: var(--font-display); font-weight: var(--fw-mid); font-size: 24px; color: var(--ink-900); letter-spacing: 0; display: block; line-height: 1; }
.pnav__logo-word > span { display: block; font-size: 10.2px; font-weight: 400; text-transform: uppercase; color: var(--muted); line-height: 1; letter-spacing: .22em; }
.pnav__links { display: none; align-items: center; gap: 4px; margin-inline: auto; }
@media (min-width: 920px) { .pnav__links { display: flex; } }
.pnav__links a {
  padding: 10px 16px; border-radius: var(--r-pill);
  font-weight: var(--fw-mid); font-size: 15px; color: var(--ink-700);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.pnav__links a:hover { background: var(--teal-50); color: var(--teal-700); }
.pnav__links a.is-active { background: var(--ink); color: #fff; }
.pnav__actions { display: none; align-items: center; gap: 10px; margin-left: auto; }
@media (min-width: 920px) { .pnav__actions { display: flex; } .pnav__links { margin-inline: auto; } }
.pnav__toggle {
  margin-left: auto; display: inline-flex; flex-direction: column; gap: 5px;
  padding: 10px; border-radius: var(--r-sm);
}
.pnav__toggle span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
@media (min-width: 920px) { .pnav__toggle { display: none; } }
.pnav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.pnav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.pnav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.pmobile { display: none; padding-block: 8px 20px; border-top: 1px solid var(--line); }
.pmobile.is-open { display: block; }
@media (min-width: 920px) { .pmobile.is-open { display: none; } }
.pmobile ul { display: grid; gap: 2px; margin-bottom: 16px; }
.pmobile a { display: block; padding: 12px 10px; font-weight: var(--fw-mid); border-radius: var(--r-sm); }
.pmobile a:hover { background: var(--teal-50); color: var(--teal-700); }
.pmobile__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* =========================================================================
   HERO — welcome band
   ========================================================================= */
.phero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-900) 72%);
  color: #fff;
  padding-block: clamp(56px, 8vw, 104px) clamp(88px, 11vw, 150px);
}
.phero__decor { position: absolute; inset: 0; pointer-events: none; }
.phero__glow { position: absolute; width: 480px; height: 480px; border-radius: 50%; filter: blur(2px); }
.phero__glow--teal { background: radial-gradient(circle, rgba(20,134,139,.55), transparent 70%); right: -140px; top: -160px; }
.phero__glow--lime { background: radial-gradient(circle, rgba(139,197,63,.28), transparent 70%); left: -180px; bottom: -240px; }
.phero__ring { position: absolute; width: 190px; height: 190px; border: 2px dashed rgba(255,255,255,.14); border-radius: 50%; right: 12%; bottom: -60px; animation: spin 60s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.phero__in { position: relative; z-index: 2; max-width: 780px; margin-inline: auto; text-align: center; }
.phero__hello {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.16);
  padding: 8px 18px; border-radius: var(--r-pill);
  font-weight: var(--fw-strong); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #bfe6e6;
}
.phero__hello .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px rgba(139,197,63,.25); }
.phero h1 { color: #fff; font-size: clamp(32px, 5vw, 54px); margin-top: 22px; }
.phero h1 .accent { color: var(--lime); }
.phero__desc { color: #cddcde; font-size: clamp(16px, 1.5vw, 18.5px); margin-top: 16px; max-width: 620px; margin-inline: auto; }
.phero .searchbar { margin-top: 32px; max-width: 580px; margin-inline: auto; border-color: transparent; }
.phero__quick { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 6px; font-size: 14px; color: #9fb6ba; }
.phero__quick button {
  padding: 7px 15px; border-radius: var(--r-pill); font-weight: var(--fw-mid); font-size: 13.5px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #dce9ea;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.phero__quick button:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); }

/* Stat chips overlapping the hero bottom edge */
.pstats { position: relative; z-index: 3; margin-top: calc(clamp(88px, 11vw, 150px) * -0.62); }
.pstats__grid {
  display: grid; gap: 14px; grid-template-columns: 1fr;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-brand);
  box-shadow: var(--shadow-lg); padding: clamp(22px, 3vw, 34px);
}
@media (min-width: 640px) { .pstats__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pstats__grid { grid-template-columns: repeat(4, 1fr); } }
.pstat { display: flex; align-items: center; gap: 15px; padding: 8px 10px; }
.pstat span.pstat__ico {
  width: 52px; height: 52px; flex-shrink: 0; color: #fff;
  background: url(../images/icon-blob.svg) center/contain no-repeat;
  display: grid; place-items: center; transition: transform .4s var(--ease);
}
.pstat:hover .pstat__ico { transform: scale(1.1) rotate(-6deg); }
.pstat__ico svg { width: 24px; height: 24px; }
/* One of the four headings wraps and the rest don't, which knocked its column
   out of step — balance the wrap so it breaks evenly instead of orphaning. */
.pstat b { font-family: var(--font-display); font-size: 17px; color: var(--ink); display: block; line-height: 1.25; text-wrap: balance; }
.pstat span { font-size: 13.5px; color: var(--muted); }

/* =========================================================================
   CATALOGUE
   ========================================================================= */
.catalogue { padding-block: clamp(48px, 6vw, 80px) clamp(64px, 9vw, 110px); }
.catalogue__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 24px; margin-bottom: 28px; }
.catalogue__head h2 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 14px; }
.catalogue__head p { color: var(--muted); margin-top: 10px; max-width: 560px; }
.catalogue__count { font-weight: var(--fw-strong); color: var(--teal-600); font-size: 14.5px; white-space: nowrap; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.chip {
  padding: 10px 20px; border-radius: var(--r-pill);
  background: #fff; border: 1.5px solid var(--line);
  font-weight: var(--fw-mid); font-size: 14.5px; color: var(--ink-700);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.chip:hover { border-color: var(--teal); color: var(--teal-700); transform: translateY(-1px); }
.chip.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

.catalogue__grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .catalogue__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .catalogue__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .catalogue__grid { grid-template-columns: repeat(4, 1fr); } }

.ccard {
  display: flex; flex-direction: column; background: #fff;
  border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ccard:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
/* Generic, not scoped to one card component — the catalogue filter script
   toggles this on whatever card markup is current. */
.is-hidden { display: none !important; }
.ccard__thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.ccard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.ccard:hover .ccard__img { transform: scale(1.05); }
.ccard__cat {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  font-size: 11px; font-weight: var(--fw-strong); letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal-700); background: rgba(255,255,255,.85); border: 1px solid var(--line);
  padding: 5px 11px; border-radius: var(--r-pill); backdrop-filter: blur(4px);
}
.ccard__body { display: flex; flex-direction: column; gap: 9px; padding: 20px 20px 22px; flex: 1; }
.ccard__body h3 { font-size: 18px; line-height: 1.2; }
.ccard__meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); font-weight: var(--fw-mid); }
.ccard__meta svg { width: 15px; height: 15px; }
.ccard__meta span { display: inline-flex; align-items: center; gap: 5px; }
.ccard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--line); }
.ccard__price { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 20px; color: var(--ink); }
.ccard__cta { display: inline-flex; align-items: center; gap: 7px; font-weight: var(--fw-strong); font-size: 14px; color: var(--teal-600); }
.ccard__cta svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.ccard:hover .ccard__cta svg { transform: translateX(3px); }

.catalogue__empty { display: none; text-align: center; color: var(--muted); padding-block: 54px; }
.catalogue__empty.is-shown { display: block; }

/* =========================================================================
   HOW IT WORKS
   ========================================================================= */
.how { background: #fff; border-block: 1px solid var(--line); }
.how__head { text-align: center; max-width: 640px; margin-inline: auto; margin-bottom: 48px; }
.how__head h2 { font-size: clamp(28px, 3.6vw, 42px); margin-top: 14px; }
.how__grid { display: grid; gap: 20px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 640px) { .how__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .how__grid { grid-template-columns: repeat(4, 1fr); } }
.step {
  counter-increment: step; position: relative;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 28px 24px 26px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.step::before {
  content: "0" counter(step);
  font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 15px;
  color: var(--teal-600); letter-spacing: .06em;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--teal-50); border-radius: var(--r-pill); padding: 6px 14px;
}
.step h3 { font-size: 18.5px; margin-top: 16px; }
.step p { font-size: 14.5px; color: var(--muted); margin-top: 8px; line-height: 1.6; }

/* =========================================================================
   TEAMS CTA
   ========================================================================= */
.teams .container > div {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-900) 100%);
  border-radius: var(--r-xl); padding: clamp(38px, 5.5vw, 68px); color: #fff;
}
.teams__glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(20,134,139,.5), transparent 70%); right: -120px; top: -120px; }
.teams__grid { position: relative; z-index: 2; display: grid; gap: clamp(28px, 4vw, 52px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 880px) { .teams__grid { grid-template-columns: 1.2fr 1fr; } }
.teams h2 { color: #fff; font-size: clamp(26px, 3.2vw, 40px); margin-top: 14px; }
.teams p { color: #cddcde; margin-top: 16px; font-size: 16px; max-width: 520px; }
.teams__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.teams__list { display: grid; gap: 13px; }
.tpoint {
  display: flex; align-items: center; gap: 15px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-md); padding: 16px 18px;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.tpoint:hover { background: rgba(255,255,255,.12); transform: translateX(4px); }
.tpoint span.tpoint__ico { width: 46px; height: 46px; flex-shrink: 0; color: #fff; background: url(../images/icon-blob.svg) center/contain no-repeat; display: grid; place-items: center; }
.tpoint__ico svg { width: 22px; height: 22px; }
.tpoint b { font-family: var(--font-display); font-size: 16.5px; color: #fff; display: block; }
.tpoint span { font-size: 13.5px; color: #b9cccd; }

/* =========================================================================
   FOOTER
   ========================================================================= */
.portal-footer { background: var(--ink-900); color: #b9cccd; margin-top: clamp(56px, 8vw, 104px); }
.portal-footer__main {
  display: grid; gap: 36px; grid-template-columns: 1fr;
  padding-block: clamp(44px, 6vw, 64px);
}
@media (min-width: 820px) { .portal-footer__main { grid-template-columns: 1.4fr 1fr 1fr; } }
.portal-footer__brand img { height: 54px; width: auto; margin-bottom: 18px; }
.portal-footer__brand p { font-size: 14.5px; max-width: 380px; line-height: 1.7; }
.portal-footer h4 { color: #fff; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.portal-footer ul { display: grid; gap: 10px; }
.portal-footer ul a { font-size: 14.5px; transition: color .2s var(--ease); }
.portal-footer ul a:hover { color: var(--lime); }
.portal-footer__bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  border-top: 1px solid rgba(255,255,255,.1); padding-block: 20px;
  font-size: 13.5px; color: #8aa2a6;
}
.portal-footer__bar a:hover { color: var(--lime); }

/* =========================================================================
   AUTH PAGES (login / signup)
   ========================================================================= */
.auth { display: grid; grid-template-columns: 1fr; min-height: calc(100vh - 77px); }
@media (min-width: 880px) { .auth { grid-template-columns: 1fr 1.1fr; } }
.auth__panel {
  display: none; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-900) 72%);
  color: #fff; padding: clamp(40px, 5vw, 72px);
}
@media (min-width: 880px) { .auth__panel { display: flex; flex-direction: column; justify-content: center; } }
.auth__panel-in { position: relative; z-index: 2; max-width: 440px; }
.auth__panel h2 { color: #fff; font-size: clamp(28px, 3vw, 38px); margin-top: 16px; }
.auth__panel h2 .accent { color: var(--lime); }
.auth__panel > .phero__glow { position: absolute; }
.auth__points { display: grid; gap: 13px; margin-top: 32px; }
.auth__form-wrap { display: flex; align-items: center; justify-content: center; padding: clamp(32px, 5vw, 64px) var(--gutter); }
.auth__form {
  width: 100%; max-width: 460px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-brand);
  box-shadow: var(--shadow-md); padding: clamp(28px, 4vw, 44px);
}
.auth__form h1 { font-size: clamp(26px, 3vw, 32px); }
.auth__form > p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.auth__fields { display: grid; gap: 18px; margin-top: 28px; }
.field label { display: block; font-weight: var(--fw-mid); font-size: 14px; color: var(--ink-700); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; font-family: var(--font-sans); font-size: 15.5px; color: var(--text);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px;
  padding: 13px 16px; outline: none;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field input:focus, .field select:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px var(--teal-50); }
.field input::placeholder { color: #9aa7ad; }
.field__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.field__row a { font-weight: var(--fw-mid); color: var(--teal-600); }
.field__row a:hover { color: var(--teal-700); text-decoration: underline; }
.checkline { display: flex; align-items: flex-start; gap: 9px; font-size: 14px; color: var(--muted); cursor: pointer; }
.checkline input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--teal); flex-shrink: 0; }
.checkline a { font-weight: var(--fw-mid); color: var(--teal-600); }
.auth__form .btn { width: 100%; justify-content: center; margin-top: 6px; }
.auth__alt { text-align: center; font-size: 14.5px; color: var(--muted); margin-top: 22px; }
.auth__alt a { font-weight: var(--fw-strong); color: var(--teal-600); }
.auth__alt a:hover { text-decoration: underline; }

/* =========================================================================
   COURSE DETAIL
   ========================================================================= */
.crumbs { padding-block: 18px 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crumbs a { font-weight: var(--fw-mid); color: var(--teal-600); }
.crumbs a:hover { text-decoration: underline; }
.crumbs svg { width: 14px; height: 14px; color: #9aa7ad; }

.cdetail { padding-block: 26px clamp(64px, 9vw, 110px); }
.cdetail__grid { display: grid; gap: clamp(28px, 4vw, 56px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .cdetail__grid { grid-template-columns: 1.5fr 1fr; } }
.cdetail__copy h1 { font-size: clamp(28px, 3.8vw, 44px); margin-top: 14px; }
.cdetail__blurb { color: var(--muted); font-size: clamp(15.5px, 1.4vw, 17.5px); margin-top: 16px; max-width: 640px; }
.cdetail__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  padding: 9px 16px; font-weight: var(--fw-mid); font-size: 13.5px; color: var(--ink-700);
}
.tag svg { width: 16px; height: 16px; color: var(--teal-600); }

.cdetail__section { margin-top: clamp(36px, 5vw, 54px); }
.cdetail__section h2 { font-size: clamp(22px, 2.6vw, 30px); margin-bottom: 20px; }
.learn-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .learn-grid { grid-template-columns: 1fr 1fr; } }
.learn-item {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; font-size: 14.5px; line-height: 1.5;
}
.learn-item svg { width: 20px; height: 20px; color: var(--lime-600); flex-shrink: 0; margin-top: 1px; }

.modules { display: grid; gap: 10px; }
.module {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden;
}
.module summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none;
  padding: 17px 20px; font-weight: var(--fw-mid); color: var(--ink);
}
.module summary::-webkit-details-marker { display: none; }
.module__num {
  font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 13px; color: var(--teal-600);
  background: var(--teal-50); border-radius: var(--r-pill); padding: 4px 12px; flex-shrink: 0;
}
.module__chev { margin-left: auto; width: 18px; height: 18px; color: var(--muted); transition: transform .25s var(--ease); flex-shrink: 0; }
.module[open] .module__chev { transform: rotate(180deg); }
.module p { padding: 0 20px 18px 20px; color: var(--muted); font-size: 14.5px; }

.buycard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md);
}
@media (min-width: 940px) { .buycard { position: sticky; top: 96px; } }
.buycard__thumb { aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line); }
.buycard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.buycard__body { padding: 26px 26px 28px; }
.buycard__price { display: flex; align-items: baseline; gap: 10px; }
.buycard__price b { font-family: var(--font-display); font-size: 36px; color: var(--ink); }
.buycard__price span { font-size: 13.5px; color: var(--muted); }
.buycard .btn { width: 100%; justify-content: center; margin-top: 18px; }
.buycard .btn + .btn { margin-top: 10px; }
.buycard__includes { margin-top: 22px; display: grid; gap: 11px; border-top: 1px solid var(--line); padding-top: 20px; }
.buycard__includes li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-700); }
.buycard__includes svg { width: 17px; height: 17px; color: var(--teal-600); flex-shrink: 0; }

.related { background: #fff; border-top: 1px solid var(--line); }
.related h2 { font-size: clamp(24px, 3vw, 34px); margin-top: 14px; margin-bottom: 30px; }
.related .catalogue__grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { .related .catalogue__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .related .catalogue__grid { grid-template-columns: repeat(3, 1fr); } }

/* =========================================================================
   DASHBOARD
   ========================================================================= */
.dash-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--ink) 0%, var(--ink-900) 72%);
  color: #fff; padding-block: clamp(40px, 5.5vw, 64px) clamp(72px, 9vw, 120px);
}
.dash-hero__in { position: relative; z-index: 2; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  background: var(--lime); color: var(--ink-900);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 24px;
}
.dash-hero h1 { color: #fff; font-size: clamp(26px, 3.4vw, 38px); }
.dash-hero p { color: #cddcde; font-size: 15.5px; margin-top: 4px; }

.dash-stats { position: relative; z-index: 3; margin-top: calc(clamp(72px, 9vw, 120px) * -0.55); }

.dash-section { padding-block: clamp(40px, 5.5vw, 64px) 0; }
.dash-section:last-of-type { padding-bottom: clamp(56px, 8vw, 96px); }
.dash-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.dash-section__head h2 { font-size: clamp(22px, 2.8vw, 32px); margin-top: 12px; }

.progress-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .progress-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .progress-grid { grid-template-columns: repeat(3, 1fr); } }
.pcard {
  display: flex; flex-direction: column; background: #fff;
  border-radius: var(--r-lg); border: 1px solid var(--line); overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pcard__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; border-bottom: 1px solid var(--line); }
.pcard__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pcard__body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pcard__body h3 { font-size: 17.5px; line-height: 1.25; }
.pbar { height: 9px; background: var(--paper-2); border-radius: var(--r-pill); overflow: hidden; }
.pbar span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--teal), var(--lime)); }
.pcard__meta { display: flex; align-items: center; justify-content: space-between; font-size: 13.5px; color: var(--muted); font-weight: var(--fw-mid); }
.pcard__meta b { color: var(--teal-600); }
.pcard .btn { margin-top: auto; justify-content: center; }

.certs { display: grid; gap: 12px; }
.cert {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 18px 22px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.cert:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }
.cert__ico { width: 46px; height: 46px; flex-shrink: 0; color: #fff; background: url(../images/icon-blob.svg) center/contain no-repeat; display: grid; place-items: center; }
.cert__ico svg { width: 21px; height: 21px; }
.cert b { font-family: var(--font-display); font-size: 16.5px; color: var(--ink); display: block; }
.cert small { font-size: 13.5px; color: var(--muted); }
.cert .btn { margin-left: auto; }
@media (max-width: 560px) { .cert .btn { margin-left: 0; width: 100%; justify-content: center; } }

/* =========================================================================
   APP CHROME (flash messages, test-mode banner, user chip)
   ========================================================================= */
.testmode {
  background: repeating-linear-gradient(135deg, #fff7e0, #fff7e0 14px, #fdefc8 14px, #fdefc8 28px);
  border-bottom: 1px solid var(--amber-100); color: var(--amber-800);
  font-size: 13.5px; font-weight: var(--fw-mid); text-align: center; padding: 8px 16px;
}
.testmode code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 6px; }
.flashes { margin-top: 18px; display: grid; gap: 10px; }
.flash { border-radius: var(--r-md); padding: 14px 20px; font-weight: var(--fw-mid); font-size: 14.5px; border: 1.5px solid; }
.flash--ok  { background: var(--lime-50); border-color: #cfe6a8; color: var(--lime-700); }
.flash--err { background: #fdecec; border-color: #f2c4c4; color: #8a2626; }
.pnav__user { font-weight: var(--fw-mid); font-size: 14.5px; color: var(--ink-700); white-space: nowrap; }

/* =========================================================================
   COURSE PLAYER
   ========================================================================= */
.player { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; padding-block: 22px clamp(56px, 8vw, 96px); }
@media (min-width: 940px) { .player { grid-template-columns: 320px 1fr; } }
.player__side { display: grid; gap: 16px; }
@media (min-width: 940px) { .player__side { position: sticky; top: 96px; } }
.player__course {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 20px 20px 18px; display: grid; gap: 12px;
}
.player__course h1 { font-size: 19px; line-height: 1.25; }
.player__nav { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pnav-item {
  display: flex; align-items: center; gap: 13px; padding: 14px 16px;
  font-weight: var(--fw-mid); font-size: 14.5px; color: var(--ink-700);
  border-bottom: 1px solid var(--line); transition: background .2s var(--ease);
}
.pnav-item:last-child { border-bottom: 0; }
.pnav-item:hover { background: var(--paper); }
.pnav-item.is-current { background: var(--teal-50); color: var(--teal-700); }
.pnav-item.is-locked { color: #9aa7ad; cursor: not-allowed; }
.pnav-item__mark {
  width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-700);
  font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 13px;
}
.pnav-item.is-done .pnav-item__mark { background: var(--lime); color: #fff; }
.pnav-item.is-current .pnav-item__mark { background: var(--teal); color: #fff; }
.pnav-item__mark svg { width: 15px; height: 15px; }

.player__main {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px); box-shadow: var(--shadow-sm);
}
.player__main h2 { font-size: clamp(24px, 3vw, 32px); margin-top: 12px; }
.draftnote {
  background: var(--amber-50); border: 1px solid var(--amber-100); color: var(--amber-800);
  border-radius: var(--r-sm); padding: 10px 16px; font-size: 13.5px; font-weight: var(--fw-mid);
  margin-bottom: 18px;
}
.lesson { margin-top: 18px; display: grid; gap: 14px; font-size: 15.5px; line-height: 1.75; color: var(--text); }
.lesson h3 { font-size: 20px; margin-top: 10px; }
.lesson h4 { font-size: 16.5px; }
.lesson ul { padding-left: 22px; list-style: disc; display: grid; gap: 7px; }
.lesson .lesson-intro { font-size: 17px; color: var(--muted); }
.lesson .lesson-reflect {
  background: var(--teal-50); border-left: 4px solid var(--teal);
  border-radius: 0 var(--r-md) var(--r-md) 0; padding: 18px 22px; display: grid; gap: 6px;
}
.player__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* =========================================================================
   QUIZ
   ========================================================================= */
.quizwrap { max-width: 860px; padding-bottom: clamp(56px, 8vw, 96px); }
.quizhead { margin-block: 18px 26px; }
.quizhead h1 { font-size: clamp(26px, 3.4vw, 36px); margin-top: 12px; }
.quizhead p { color: var(--muted); margin-top: 8px; font-weight: var(--fw-mid); font-size: 14.5px; }
.quiz { display: grid; gap: 16px; margin-top: 18px; }
.qcard { border: 1px solid var(--line); background: #fff; border-radius: var(--r-md); padding: 22px 24px; }
.qcard legend { font-weight: var(--fw-strong); font-size: 16.5px; color: var(--ink); padding: 0; display: flex; gap: 10px; align-items: baseline; float: left; width: 100%; margin-bottom: 14px; }
.qopts { display: grid; gap: 9px; clear: both; }
.qopt {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 16px;
  font-size: 14.5px; transition: border-color .2s var(--ease), background .2s var(--ease);
}
.qopt:hover { border-color: var(--teal); }
.qopt:has(input:checked) { border-color: var(--teal); background: var(--teal-50); }
.qopt input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--teal); flex-shrink: 0; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .phero__ring { animation: none; }
}

/* =========================================================================
   Brand loading screen — staged logo build-in (panels → letters → breathe)
   Markup: partials/header.php · Removed by the script in partials/footer.php
   ========================================================================= */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.lce-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--paper) 0%, var(--paper-2) 55%, #e4edec 100%);
  transition: opacity .5s ease, visibility .5s ease;
}

/* Set by the footer script once the page is ready */
.lce-loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Hold the page still (and hide the scrollbar) while the loader is up */
body.is-loading {
  overflow: hidden;
}

.lce-loader__inner {
  display: grid;
  justify-items: center;
  gap: 22px;
  padding: var(--gutter);
  text-align: center;
}

/* ---- The mark ---------------------------------------------------------- */

.lce-loader__logo {
  width: clamp(104px, 16vw, 148px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 34px rgba(28, 58, 72, .18));
  animation: lceBreathe 2.6s ease-in-out 1.05s infinite;
}

.lceL__panel,
.lceL__ltr {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

.lceL__panel--lime  { fill: var(--lime); }
.lceL__panel--teal  { fill: var(--teal); }
.lceL__panel--slate { fill: var(--ink-800); }
.lceL__ltr          { fill: var(--white); }

/* Panels stack in from behind, back sheet first — like cards being dealt */
.lceL__panel { animation: lcePanelIn .62s cubic-bezier(.22, 1, .36, 1) forwards; }
.lceL__panel--lime  { animation-delay: .05s; }
.lceL__panel--teal  { animation-delay: .17s; }
.lceL__panel--slate { animation-delay: .29s; }

/* Then L, C, E rise into the front sheet */
.lceL__ltr { animation: lceLetterIn .5s cubic-bezier(.22, 1, .36, 1) forwards; }
.lceL__letters .lceL__ltr:nth-child(1) { animation-delay: .58s; }
.lceL__letters .lceL__ltr:nth-child(2) { animation-delay: .70s; }
.lceL__letters .lceL__ltr:nth-child(3) { animation-delay: .82s; }

@keyframes lcePanelIn {
  from { opacity: 0; transform: translate(16px, -12px) scale(.9) rotate(-3deg); }
  to   { opacity: 1; transform: none; }
}

@keyframes lceLetterIn {
  from { opacity: 0; transform: translateY(14px) scale(.86); }
  to   { opacity: 1; transform: none; }
}

@keyframes lceBreathe {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%      { transform: translateY(-6px) scale(1.035); }
}

/* ---- Wordmark ---------------------------------------------------------- */

.lce-loader__word {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-800);
  opacity: 0;
  animation: lceFadeUp .6s ease .95s forwards;
}
.lce-loader__word b { font-weight: inherit; color: var(--teal); }

@keyframes lceFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: .85; transform: none; }
}

/* ---- Indeterminate progress bar ---------------------------------------- */

.lce-loader__bar {
  position: relative;
  width: clamp(140px, 22vw, 190px);
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(28, 58, 72, .1);
  overflow: hidden;
  opacity: 0;
  animation: lceFadeUp .6s ease 1.1s forwards;
}

.lce-loader__bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--lime));
  animation: lceSlide 1.4s cubic-bezier(.65, 0, .35, 1) 1.1s infinite;
}

@keyframes lceSlide {
  from { transform: translateX(-110%); }
  to   { transform: translateX(240%); }
}

/* ---- Reduced motion: show the finished logo, skip the choreography ------ */

@media (prefers-reduced-motion: reduce) {
  .lce-loader__logo,
  .lce-loader__bar span { animation: none; }
  .lceL__panel,
  .lceL__ltr,
  .lce-loader__word,
  .lce-loader__bar { opacity: 1; transform: none; animation: none; }
  .lce-loader { transition: opacity .2s linear, visibility .2s linear; }
}


/* =========================================================================
   ADMIN CONSOLE
   Console shell (fixed sidebar + top bar + card canvas) modelled on the
   TalentLMS admin the team is migrating from, in LCE brand colours.
   Admin pages use partials/admin_head.php — not the public portal header.
   ========================================================================= */
body.adm { background: var(--paper); }
body.adm-locked { overflow: hidden; }

.adm__shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ----------
   Layered depth rather than a flat slab: a base gradient, a teal glow behind
   the brand and a lime one behind the sign-out block, so the two ends of the
   menu pick up the brand colours without tinting the nav items themselves. */
.adm__side {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: 254px; display: flex; flex-direction: column;
  background:
    radial-gradient(120% 45% at 0% 0%,   rgba(20,134,139,.30), transparent 62%),
    radial-gradient(110% 40% at 100% 100%, rgba(139,197,63,.13), transparent 60%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-900) 100%);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.07), 8px 0 34px -22px rgba(6,20,26,.9);
  color: #cddcde; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
  transform: translateX(-100%); transition: transform .28s var(--ease);
}
.adm__side::-webkit-scrollbar { width: 8px; }
.adm__side::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.14); border-radius: var(--r-pill);
  border: 2px solid transparent; background-clip: content-box;
}
.adm__side:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.24); background-clip: content-box; }
.adm__side.is-open { transform: none; }
@media (min-width: 1080px) { .adm__side { transform: none; } }

/* Sticky so the logo stays put while a long course list scrolls under it. */
.adm__brand {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: 12px; padding: 20px 18px 16px; flex-shrink: 0;
  background: linear-gradient(180deg, rgba(18,42,53,.92) 62%, rgba(18,42,53,0));
  backdrop-filter: blur(6px);
}
.adm__brand-mark {
  width: 38px; height: 38px; flex-shrink: 0; padding: 4px; border-radius: 11px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.adm__brand:hover .adm__brand-mark { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.adm__brand b { display: block; font-family: var(--font-display); font-weight: var(--fw-mid); font-size: 16.5px; color: #fff; line-height: 1.15; }
.adm__brand > span > span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: #8fa8ad; margin-top: 4px; }

.adm__nav { flex: 1; padding: 4px 12px 20px; }
/* Group label with a hairline that runs out to the edge of the rail. */
.adm__nav-group {
  display: flex; align-items: center; gap: 10px;
  font-size: 10px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: .18em;
  color: #7b969c; padding: 18px 10px 8px;
}
.adm__nav-group::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.13), transparent);
}
.adm__nav-item {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 11px; font-size: 14.5px; font-weight: var(--fw-mid); color: #c3d5d8;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.adm__nav-item svg {
  width: 19px; height: 19px; flex-shrink: 0; opacity: .72;
  transition: opacity .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.adm__nav-item:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.adm__nav-item:hover svg { opacity: 1; transform: scale(1.06); }
.adm__nav-item:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.adm__nav-item.is-active {
  color: #fff; transform: none;
  background: linear-gradient(90deg, rgba(139,197,63,.22), rgba(139,197,63,.06) 68%, transparent);
  box-shadow: inset 0 0 0 1px rgba(139,197,63,.18);
}
.adm__nav-item.is-active svg { opacity: 1; color: var(--lime); }
/* Accent rail, tucked into the nav's own padding so it hugs the sidebar edge. */
.adm__nav-item.is-active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 24px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--lime), var(--teal));
  box-shadow: 0 0 12px rgba(139,197,63,.75);
}

.adm__side-foot {
  position: relative; flex-shrink: 0; padding: 16px 18px 20px;
  background: rgba(9,24,30,.35);
}
.adm__side-foot::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18) 22%, rgba(255,255,255,.18) 78%, transparent);
}
/* The whole block is a link to profile.php, so it needs the usual affordances. */
.adm__who {
  display: flex; align-items: center; gap: 11px;
  margin: -8px -10px 0; padding: 8px 10px; border-radius: 11px;
  transition: background .18s var(--ease);
}
.adm__who:hover { background: rgba(255,255,255,.08); }
.adm__who:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.adm__avatar {
  flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(140deg, var(--teal), var(--lime-600));
  color: #fff; font-family: var(--font-display); font-size: 16px;
  box-shadow: 0 0 0 2px rgba(255,255,255,.14), 0 4px 12px -4px rgba(20,134,139,.8);
}
.adm__who b { display: block; font-size: 14px; color: #fff; line-height: 1.2; }
.adm__who > span > span { display: block; font-size: 11.5px; color: #8fa8ad; margin-top: 2px; }
.adm__signout {
  margin-top: 12px; width: 100%; padding: 9px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); color: #cddcde;
  font-family: var(--font-sans); font-weight: var(--fw-mid); font-size: 13.5px; cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.adm__signout:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.42); color: #fff; }
.adm__signout:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }

.adm__scrim {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(12,28,35,.55); backdrop-filter: blur(3px);
  animation: admScrimIn .22s var(--ease);
}
@keyframes admScrimIn { from { opacity: 0; } }
@media (min-width: 1080px) { .adm__scrim { display: none; } }

/* ---------- Main column ---------- */
.adm__main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 1080px) { .adm__main { margin-left: 254px; } }

.adm__top {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 16px clamp(18px, 3vw, 34px);
  background: rgba(255,255,255,.86); backdrop-filter: saturate(1.6) blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 10px 26px -24px rgba(18,42,53,.5);
}
/* Burger folds into an X — the button already carries aria-expanded, so no
   extra class from the drawer script. */
.adm__burger {
  display: grid; gap: 5px; padding: 8px; border-radius: 10px;
  background: none; cursor: pointer; flex-shrink: 0;
  transition: background .18s var(--ease);
}
.adm__burger:hover { background: var(--paper-2); }
.adm__burger span {
  width: 22px; height: 2.5px; background: var(--ink); border-radius: 2px;
  transition: transform .26s var(--ease), opacity .18s var(--ease);
}
.adm__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.adm__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.adm__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
@media (min-width: 1080px) { .adm__burger { display: none; } }

.adm__title { flex: 1; min-width: 180px; }
.adm__title h1 { font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; }
.adm__title p { font-size: 13.5px; color: var(--muted); margin-top: 5px; }
.adm__crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; }
.adm__crumbs a { font-weight: var(--fw-mid); color: var(--teal-600); }
.adm__crumbs a:hover { text-decoration: underline; }

.adm__search {
  display: flex; align-items: center; gap: 9px; flex-shrink: 0;
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 9px 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.adm__search:focus-within { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px var(--teal-50); }
.adm__search svg { width: 17px; height: 17px; color: var(--muted); flex-shrink: 0; }
.adm__search input { border: 0; outline: 0; background: none; font-family: var(--font-sans); font-size: 14px; color: var(--text); width: 150px; }
.adm__search input::placeholder { color: #9aa7ad; }
@media (max-width: 700px) { .adm__search { display: none; } }

.adm__content { flex: 1; padding: clamp(20px, 3vw, 30px) clamp(18px, 3vw, 34px) 64px; }
.adm__content > * + * { margin-top: 18px; }

.adm__banner {
  background: var(--teal-50); border: 1px solid #bcdcdc; border-radius: var(--r-sm);
  padding: 11px 18px; font-size: 13.5px; font-weight: var(--fw-mid); color: var(--teal-700);
}
.adm__flashes { display: grid; gap: 10px; }
.adm__flashes .flash { border-radius: var(--r-sm); padding: 12px 18px; font-size: 14px; }

/* ---------- Stat row ---------- */
.astats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.astat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 20px; }
.astat__label { display: block; font-size: 11.5px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: .11em; color: var(--muted); }
.astat__num { display: block; font-family: var(--font-display); font-size: clamp(26px, 3vw, 32px); color: var(--ink); line-height: 1.1; margin-top: 9px; }
.astat__sub { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---------- Callout ---------- */
.anote {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  background: var(--amber-50); border: 1px solid var(--amber-100); border-radius: var(--r-sm); padding: 16px 20px;
}
/* Qualified with span. so it outranks the .anote span text rule below — without
   that, display:block wins and the icon loses its grid centring. Same reason
   .pstat__ico and .tpoint__ico are written this way. */
.anote span.anote__ico { flex-shrink: 0; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--amber-200); color: var(--amber-800); }
.anote__ico svg { width: 19px; height: 19px; }
.anote div { flex: 1; min-width: 240px; }
.anote b { display: block; color: var(--amber-800); font-size: 15px; }
.anote span { display: block; font-size: 13.5px; color: var(--amber-700); margin-top: 3px; }

/* ---------- Cards ---------- */
.apanel { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.apanel--pad { padding: 20px 22px; }
.apanel--pad h3 { font-size: 16px; }
.apanel--pad > * + * { margin-top: 14px; }
.apanel__head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 15px 22px; border-bottom: 1px solid var(--line); background: #fcfdfd;
}
.apanel__head h2 { font-size: 16.5px; line-height: 1.2; }
.apanel__head .eyebrow { font-size: 10.5px; letter-spacing: .15em; margin-bottom: 4px; }
.apanel__head .eyebrow::before { display: none; }
.apanel__head .eyebrow { padding-left: 0; }

.agrid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 1180px) {
  .agrid { grid-template-columns: 1fr 1fr; }
  .agrid--sidebar { grid-template-columns: 1.7fr 1fr; align-items: start; }
}
.aside { display: grid; gap: 18px; align-content: start; }
/* Same stack, but for the main column of a sidebar layout — .aside reads wrong
   on the side of the page that isn't the aside. */
.astack { display: grid; gap: 18px; align-content: start; }

/* Guidance under a field that needs a sentence the label can't carry. */
.afield-hint { margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* Read-only account facts — label left, value right, on one hairline row each. */
.pfacts { display: grid; gap: 2px; }
.pfacts > div {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
}
.pfacts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.pfacts dt { font-size: 13.5px; color: var(--muted); }
.pfacts dd { font-size: 13.5px; font-weight: var(--fw-mid); color: var(--ink); text-align: right; }

/* ---------- Tables ---------- */
.atable-wrap { overflow-x: auto; }
.atable { width: 100%; border-collapse: collapse; font-size: 14px; }
.atable th {
  text-align: left; font-size: 11px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted); padding: 11px 22px; border-bottom: 1px solid var(--line); white-space: nowrap; background: #fcfdfd;
}
.atable td { padding: 13px 22px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.atable tr:last-child td { border-bottom: 0; }
.atable tbody tr:hover { background: var(--paper); }
.atable tr.is-dim td { opacity: .6; }
.atable .num { text-align: right; font-variant-numeric: tabular-nums; }
.atable .right { text-align: right; }
.atable td b { font-weight: var(--fw-strong); color: var(--ink); }
.atable td .pbar { min-width: 84px; }

.alink { font-weight: var(--fw-strong); color: var(--teal-600); }
.alink:hover { color: var(--teal-700); text-decoration: underline; }
.amuted { color: var(--muted); font-size: 12.5px; font-weight: 400; }
.atable td .amuted, .amodule__body .amuted { display: block; margin-top: 3px; }
.aempty { padding: 34px 22px; text-align: center; color: var(--muted); }
.pbar--sm { height: 6px; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: var(--fw-strong); background: var(--paper-2); color: var(--ink-700);
  white-space: nowrap; vertical-align: middle;
}
.badge + .badge { margin-left: 5px; }
.badge--ok   { background: var(--lime-50); color: var(--lime-700); }
.badge--warn { background: var(--amber-50); color: var(--amber-700); }
.badge--ink  { background: var(--ink); color: #fff; }

/* ---------- Row actions ---------- */
.arow-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.arow-actions--stack { justify-content: flex-start; }
.arow-actions form { display: contents; }
.arow-actions--stack form { display: block; }
.btn--xs { padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-pill); }
.btn--danger { background: transparent; color: #a13232; border: 1.5px solid #eccaca; }
.btn--danger:hover { background: #fdecec; border-color: #d98d8d; color: #8a2626; transform: translateY(-2px); }
.btn[disabled] { opacity: .3; pointer-events: none; }

/* Cross-link strip above a card (e.g. "edit the assessment instead") */
.aswitch { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13.5px; color: var(--muted); }
.aswitch a { font-weight: var(--fw-strong); color: var(--teal-600); }
.aswitch a:hover { text-decoration: underline; }

/* ---------- Forms ---------- */
.aform { padding: 20px 22px; }
.apanel--pad .aform, .aform--tight { padding: 0; }
.aform--tight { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.aform > * + * { margin-top: 15px; }
.aform__grid { display: grid; gap: 15px; grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .aform__grid { grid-template-columns: 1fr 1fr; }
  .aform__wide { grid-column: 1 / -1; }
}
.aform__actions { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; }

.adm .field label { font-size: 13.5px; }
.adm .field input, .adm .field select, .adm .field textarea { border-radius: var(--r-sm); font-size: 15px; }
.field textarea {
  width: 100%; padding: 13px 15px; font-family: var(--font-sans); color: var(--text);
  background: var(--paper); border: 1.5px solid var(--line); outline: 0; resize: vertical;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.field textarea:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px var(--teal-50); }
.field textarea.amono { font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.65; }

.acheck { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--ink-700); cursor: pointer; }
.acheck input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--teal); flex-shrink: 0; }

.afilters {
  display: grid; gap: 14px; grid-template-columns: 1fr; align-items: end;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 18px 22px;
}
@media (min-width: 820px) { .afilters { grid-template-columns: 1.4fr 1fr 1fr auto; } }
.afilters__actions { display: flex; gap: 8px; }

/* ---------- Quiz option editor ---------- */
.aopts { border: 0; padding: 0; }
.aopts legend { font-weight: var(--fw-mid); font-size: 13.5px; color: var(--ink-700); margin-bottom: 10px; padding: 0; }
.aopt { display: flex; align-items: center; gap: 12px; }
.aopt + .aopt { margin-top: 9px; }
.aopt input[type="radio"] { width: 18px; height: 18px; accent-color: var(--teal); flex-shrink: 0; }
.aopt input[type="text"] {
  flex: 1; padding: 10px 14px; font-family: var(--font-sans); font-size: 14.5px; color: var(--text);
  background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-sm); outline: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.aopt input[type="text"]:focus { border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px var(--teal-50); }

/* ---------- Module / question list ---------- */
.amodules { list-style: none; margin: 0; padding: 0; }
.amodule { display: flex; gap: 15px; align-items: flex-start; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.amodule:last-child { border-bottom: 0; }
.amodule:hover { background: var(--paper); }
.amodule__pos {
  flex-shrink: 0; display: grid; place-items: center; width: 29px; height: 29px; border-radius: var(--r-sm);
  background: var(--paper-2); color: var(--ink-700); font-family: var(--font-display); font-size: 14px;
}
.amodule__body { flex: 1; min-width: 0; }
.amodule__body b { display: block; font-size: 15.5px; color: var(--ink); }
.amodule__side { display: flex; flex-direction: column; align-items: flex-end; gap: 9px; flex-shrink: 0; }

.aanswers { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; }
.aanswers li { font-size: 13.5px; color: var(--muted); padding-left: 21px; position: relative; }
.aanswers li::before { content: "\25CB"; position: absolute; left: 3px; }
.aanswers li.is-correct { color: var(--lime-700); font-weight: var(--fw-strong); }
.aanswers li.is-correct::before { content: "\25CF"; color: var(--lime); }

/* =========================================================================
   LEARNER CONTENT INSIDE THE CONSOLE
   The learner portal now uses the same shell as the admin console
   (partials/shell_head.php). These rules adapt the existing learner sections
   — hero, catalogue, course detail, player, quiz — to sit on the console
   canvas instead of a full-width marketing page.
   ========================================================================= */

/* The console content area already provides the page gutter, so nested
   .container wrappers must not add a second one. */
.adm__content .container { max-width: none; padding-inline: 0; margin-inline: 0; }

/* Sidebar call-to-action for logged-out visitors */
.adm__cta { display: grid; gap: 8px; }
.adm__cta .btn { width: 100%; justify-content: center; }

/* Console footer */
.adm__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 18px clamp(18px, 3vw, 34px); border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted); background: #fff;
}
.adm__foot a { font-weight: var(--fw-mid); color: var(--teal-600); }
.adm__foot a:hover { text-decoration: underline; }

/* Pre-login brand bar (login / signup) */
.adm__barebar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px clamp(18px, 4vw, 40px); background: #fff; border-bottom: 1px solid var(--line);
}
/* Same brand block on a white bar — drop the sidebar's dark sticky backing. */
.adm__brand--light { position: static; background: none; backdrop-filter: none; padding: 0; }
.adm__brand--light b { color: var(--ink-900); }
.adm__brand--light > span > span { color: var(--muted); }
.adm__brand--light .adm__brand-mark { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.adm__brand--light:hover .adm__brand-mark { background: var(--paper-2); }
.adm .auth { min-height: calc(100vh - 79px); }

/* ---------- Landing hero, as a console panel ---------- */
.adm__content .phero {
  border-radius: var(--r-md); padding-block: clamp(34px, 5vw, 60px);
  padding-inline: clamp(22px, 4vw, 48px);
}
.adm__content .phero__in { max-width: 660px; margin-inline: 0; text-align: left; }
.adm__content .phero h2 { color: #fff; font-size: clamp(24px, 3.2vw, 38px); margin-top: 18px; line-height: 1.12; }
.adm__content .phero h2 .accent { color: var(--lime); }
.adm__content .phero__desc { margin-inline: 0; }
.adm__content .phero .searchbar { margin-inline: 0; max-width: 520px; }
.adm__content .phero__quick { justify-content: flex-start; }
.adm__content .phero__ring { display: none; }
/* The copy only fills the left two-thirds, leaving a wide slab of flat gradient.
   An oversized brand mark bleeding off the right edge fills it without adding
   anything to read. Hidden on narrow screens, where the copy takes the width. */
@media (min-width: 900px) {
  .adm__content .phero__decor::after {
    content: ''; position: absolute; right: -60px; top: 50%;
    width: 420px; height: 420px; transform: translateY(-50%);
    background: url("../images/Learn-Care-Excel-logo_Logo%20Colour.svg") right center/contain no-repeat;
    opacity: .07;
    /* The logo carries its own rounded panel, which at 7% still showed as a
       hard rectangle floating in the gradient. Fade its leading edge out. */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 58%);
            mask-image: linear-gradient(90deg, transparent, #000 58%);
  }
}

/* Stat strip no longer overlaps a full-bleed hero */
.adm__content .pstats { margin-top: 0; }
.adm__content .pstats__grid {
  border-radius: var(--r-sm); box-shadow: none; padding: clamp(16px, 2vw, 22px);
}

/* ---------- Section rhythm ---------- */
.adm__content .section,
.adm__content .catalogue,
.adm__content .cdetail,
.adm__content .related,
.adm__content .dash-section { padding-block: 0; }
.adm__content .how,
.adm__content .teams { border: 0; background: none; }
/* The generic 18px between console blocks is right for stacked admin panels but
   too tight for landing sections — the catalogue ran straight into the next
   heading. Give the marketing blocks their own, wider rhythm. */
.adm__content .how,
.adm__content .teams { margin-top: clamp(34px, 4vw, 54px); }
/* Every other block on the console page is left-aligned; this one section head
   was centred, so its eyebrow and heading sat off-axis from the rest. */
.adm__content .how__head { margin-bottom: 26px; margin-inline: 0; max-width: 640px; text-align: left; }
.adm__content .catalogue__head { margin-bottom: 20px; }
.adm__content .filters { margin-bottom: 22px; }

/* The "how it works" and "for care teams" blocks become console cards */
.adm__content .how__grid > .step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
}
.adm__content .teams .container > div { border-radius: var(--r-md); }

/* ---------- Cards: flatten to match the admin console ---------- */
.adm__content .ccard,
.adm__content .pcard,
.adm__content .buycard,
.adm__content .cert,
.adm__content .qcard,
.adm__content .player__side,
.adm__content .player__main { border-radius: var(--r-sm); box-shadow: none; }
.adm__content .ccard:hover,
.adm__content .pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.adm__content .catalogue__grid { gap: 18px; }

/* ---------- Course detail ---------- */
.adm__content .cdetail__blurb { margin-top: 0; }
.adm__content .cdetail__section { margin-top: clamp(28px, 4vw, 40px); }
.adm__content .cdetail__section h2 { font-size: clamp(19px, 2.2vw, 24px); }

/* ---------- Course player ---------- */
.adm__content .player__course .eyebrow { margin-bottom: 12px; display: block; }

/* ---------- Quiz ---------- */
.adm__content .quizwrap { max-width: 820px; }

/* ---------- Dashboard ---------- */
.adm__content .dash-stats { margin-top: 0; }
.adm__content .dash-section + .dash-section { margin-top: 26px; }
.adm__content .dash-section__head { margin-bottom: 18px; }

/* =========================================================================
   ADMIN DASHBOARD WIDGETS
   The admin home is a widget board (activity chart, quick actions, overview
   metrics, timeline) rather than a report page.
   ========================================================================= */
.widgets { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1080px) { .widgets { grid-template-columns: 1fr 1fr; } }

.widget { background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); }
.widget__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px 0;
}
.widget__head h2 { font-size: 17px; line-height: 1.2; }
.widget__body { padding: 18px 22px 22px; }
.widget__control select {
  font-family: var(--font-sans); font-size: 14px; color: var(--text);
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 14px; outline: 0; cursor: pointer;
}
.widget__control select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-50); }
.widget__more { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); }
.widget__more:hover { background: var(--paper); color: var(--teal-600); }
.widget__more svg { width: 16px; height: 16px; }

/* ---------- Activity chart ---------- */
.chart { display: flex; gap: 10px; height: 210px; }
.chart__axis {
  display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11.5px; color: var(--muted); text-align: right; flex-shrink: 0;
  font-variant-numeric: tabular-nums; padding-block: 0 18px;
}
.chart__plot {
  flex: 1; min-width: 0; list-style: none; margin: 0; padding: 0 0 18px;
  display: flex; align-items: flex-end; gap: 2px;
  border-bottom: 1px solid var(--line);
  background-image: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--line) calc(25% - 1px), var(--line) 25%);
  background-size: 100% calc(100% - 18px);
  background-position: bottom;
  background-repeat: no-repeat;
}
.chart__day { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.chart__bars { display: flex; align-items: flex-end; justify-content: center; gap: 2px; width: 100%; height: 100%; }
.chart__bar { width: 46%; max-width: 16px; min-height: 0; border-radius: 3px 3px 0 0; transition: opacity .15s var(--ease); }
.chart__bar:hover { opacity: .75; }
.chart__bar--login { background: var(--teal); }
.chart__bar--done  { background: var(--lime); }

.chart__ticks {
  display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); margin-top: 6px;
}
.chart__ticks span { display: flex; flex-direction: column; line-height: 1.35; }
.chart__ticks small { color: #9aa7ad; }

.chart__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 16px 0 0; padding: 0; font-size: 13px; color: var(--ink-700); }
.chart__legend li { display: flex; align-items: center; gap: 7px; }
.chart__legend .dot { width: 9px; height: 9px; border-radius: 50%; }
.dot--login { background: var(--teal); }
.dot--done  { background: var(--lime); }

.chart__empty { text-align: center; color: var(--muted); padding-block: 54px 34px; font-size: 14.5px; }
.chart__empty span { font-size: 13px; color: #9aa7ad; }

/* ---------- Quick actions ---------- */
.qactions { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.qactions a {
  display: flex; align-items: center; gap: 14px; padding: 12px 12px;
  border-radius: var(--r-sm); font-size: 14.5px; font-weight: var(--fw-mid); color: var(--ink-700);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.qactions a:hover { background: var(--paper); color: var(--teal-700); }
.qactions svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.qactions a:hover svg { color: var(--teal); }

/* ---------- Overview metrics ---------- */
.ometrics { list-style: none; margin: 0; padding: 0; }
.ometrics li {
  display: flex; align-items: center; gap: 14px; padding: 13px 0;
  border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--ink-700);
}
.ometrics li:last-child { border-bottom: 0; }
.ometrics svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; }
.ometrics span { flex: 1; min-width: 0; }
.ometrics b {
  font-family: var(--font-display); font-size: 19px; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- Timeline ---------- */
.tline { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 262px; overflow-y: auto; }
.tline__item { display: flex; align-items: baseline; gap: 11px; padding: 10px 0; font-size: 14px; }
.tline__item + .tline__item { border-top: 1px solid var(--line); }
.tline__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--teal); transform: translateY(-1px); }
.tline__dot--signup { background: var(--lime); }
.tline__dot--enrol  { background: #d9a441; }
.tline__dot--cert   { background: var(--ink); }
.tline__text { flex: 1; min-width: 0; color: var(--ink-700); }
.tline__text a { font-weight: var(--fw-strong); font-style: italic; color: var(--ink); }
.tline__text a:hover { color: var(--teal-600); text-decoration: underline; }
.tline__when { flex-shrink: 0; font-size: 12px; font-style: italic; color: var(--muted); white-space: nowrap; }

/* Report tabs */
.rtabs { display: flex; flex-wrap: wrap; gap: 6px; }
.rtab {
  padding: 9px 16px; border-radius: var(--r-pill); font-size: 14px; font-weight: var(--fw-mid);
  color: var(--muted); background: #fff; border: 1px solid var(--line);
  transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
}
.rtab:hover { color: var(--teal-700); border-color: var(--teal); }
.rtab.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }
.badge--err { background: #fdecec; color: #8a2626; }

/* Email preview (Notifications) */
.mailprev { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.mailprev__head { padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--line); display: grid; gap: 4px; font-size: 13.5px; color: var(--ink-700); }
.mailprev__head b { color: var(--muted); font-weight: var(--fw-strong); margin-right: 6px; }
.mailprev__body { padding: 16px; margin: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.65; color: var(--ink-700); white-space: pre-wrap; word-break: break-word; }
.adm code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; background: var(--paper-2); padding: 1px 6px; border-radius: 6px; }

/* Help centre */
.helplist { list-style: none; margin: 0; padding: 0; }
.helplist li + li { border-top: 1px solid var(--line); }
.helplist a { display: flex; align-items: center; gap: 13px; padding: 14px 22px; font-size: 14.5px; font-weight: var(--fw-mid); color: var(--ink-700); transition: background .18s var(--ease), color .18s var(--ease); }
.helplist a:hover { background: var(--paper); color: var(--teal-700); }
.helplist a > span { flex: 1; min-width: 0; }
.helplist svg { width: 19px; height: 19px; color: var(--muted); flex-shrink: 0; }
.helplist a:hover svg { color: var(--teal); }
.helplist__go { width: 15px !important; height: 15px !important; }

.helpbody { font-size: 15.5px; color: var(--ink-700); line-height: 1.7; }
.helpbody p { margin-bottom: 14px; }
.helpbody p:last-child { margin-bottom: 0; }
.helpbody ul, .helpbody ol { margin: 0 0 14px 20px; display: grid; gap: 7px; }
.helpbody strong { color: var(--ink); }

/* Ticket thread */
.thread { padding: 6px 22px 0; }
.tmsg { padding: 15px 0; border-bottom: 1px solid var(--line); }
.tmsg:last-child { border-bottom: 0; }
.tmsg__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.tmsg__head b { font-size: 14px; color: var(--ink); }
.tmsg__head span { font-size: 12.5px; color: var(--muted); }
.tmsg__body { font-size: 14.5px; line-height: 1.65; color: var(--ink-700); }
.tmsg--staff { border-left: 3px solid var(--teal); padding-left: 15px; background: var(--teal-50); border-radius: 0 var(--r-sm) var(--r-sm) 0; margin-block: 4px; padding-block: 13px; }
.tmsg--staff .tmsg__head b { color: var(--teal-700); }
a.astat { transition: border-color .18s var(--ease), transform .18s var(--ease); }
a.astat:hover { border-color: var(--teal); transform: translateY(-2px); }


/* Empty states — shown instead of hiding a section entirely, so the page
   always explains what belongs there and how to get it. */
.emptystate {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: clamp(30px, 5vw, 46px) clamp(22px, 4vw, 34px); text-align: center;
}
.emptystate__ico {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%; background: var(--paper-2); color: var(--teal);
}
.emptystate__ico svg { width: 26px; height: 26px; }
.emptystate h3 { font-size: 18.5px; color: var(--ink); }
.emptystate p { font-size: 14.5px; color: var(--muted); margin: 9px auto 0; max-width: 460px; line-height: 1.6; }
.emptystate .btn { margin-top: 20px; }

/* Sidebar items that open in a new tab get a small external-link marker.
   Explicit size matters: the `img, svg` reset gives unsized icons
   max-width:100%, which would blow this up to the sidebar's full width. */
.adm__nav-ext {
  width: 13px; height: 13px; margin-left: auto; flex-shrink: 0; opacity: .55;
}
.adm__nav-item:hover .adm__nav-ext { opacity: .9; }

/* Courses in progress, listed in the sidebar under Learning */
.adm__courses { display: grid; gap: 3px; margin: 4px 0 2px; }
.adm__course {
  position: relative; display: grid; gap: 6px; padding: 9px 12px 10px;
  border-radius: 11px; color: #c3d5d8;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.adm__course:hover { background: rgba(255,255,255,.08); color: #fff; transform: translateX(2px); }
.adm__course:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.adm__course.is-active {
  color: #fff; transform: none;
  background: linear-gradient(90deg, rgba(139,197,63,.2), rgba(139,197,63,.05) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(139,197,63,.16);
}
.adm__course.is-active::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--lime), var(--teal));
  box-shadow: 0 0 12px rgba(139,197,63,.7);
}

.adm__course-title {
  font-size: 13px; font-weight: var(--fw-mid); line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.adm__course-bar {
  display: block; height: 5px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.14); overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.28);
}
.adm__course-bar > span {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--teal), var(--lime));
  box-shadow: 0 0 8px rgba(139,197,63,.45);
  transition: width .5s var(--ease);
}
.adm__course-pct { font-size: 11px; color: #8fa8ad; letter-spacing: .02em; }
.adm__course.is-active .adm__course-pct { color: #b9cdd1; }

.adm__course-more {
  display: block; padding: 8px 12px; font-size: 12.5px; font-weight: var(--fw-mid); color: #8fa8ad;
  border-radius: 11px; transition: background .2s var(--ease), color .2s var(--ease);
}
.adm__course-more:hover { background: rgba(255,255,255,.08); color: #fff; }

/* File inputs, current-file previews and lesson media */
.adm .field input[type="file"] {
  width: 100%; padding: 11px 14px; font-family: var(--font-sans); font-size: 14px; color: var(--ink-700);
  background: var(--paper); border: 1.5px dashed var(--line); border-radius: var(--r-sm); cursor: pointer;
}
.adm .field input[type="file"]:hover { border-color: var(--teal); }
.adm .field input[type="file"]:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-50); }

.filenow { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13px; }
.filenow img { width: 74px; height: 48px; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); flex-shrink: 0; }
.filenow__tag {
  flex-shrink: 0; padding: 5px 10px; border-radius: var(--r-sm); background: var(--paper-2);
  color: var(--ink-700); font-size: 11px; font-weight: var(--fw-strong); letter-spacing: .06em;
}

.resetlink {
  width: 100%; margin-top: 7px; padding: 11px 14px; border-radius: var(--r-sm);
  border: 1.5px solid var(--teal); background: var(--teal-50); color: var(--ink);
  font-family: ui-monospace, Consolas, monospace; font-size: 12.5px;
}

/* Lesson attachments */
.lesson-media { margin: 0 0 22px; }
.lesson-media video,
.lesson-media img {
  width: 100%; max-height: 460px; border-radius: var(--r-sm);
  background: #000; border: 1px solid var(--line);
}
.lesson-media img { object-fit: contain; background: var(--paper); }

.lesson-file {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.lesson-file:hover { border-color: var(--teal); background: #fff; }
.lesson-file svg { width: 26px; height: 26px; color: var(--teal); flex-shrink: 0; }
.lesson-file b { display: block; font-size: 15px; color: var(--ink); }
.lesson-file span span { font-size: 12.5px; color: var(--muted); }

/* Rich-text editor (js/editor.js) for lesson and help-article bodies */
.rte { border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; overflow: hidden; }
.rte:focus-within { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-50); }

.rte__bar {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 7px 8px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.rte__spacer { flex: 1; }

.rte__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 30px; padding: 0 8px; border-radius: 7px;
  background: transparent; color: var(--ink-700); font-family: var(--font-sans);
  font-size: 13.5px; font-weight: var(--fw-strong); line-height: 1; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.rte__btn:hover { background: var(--paper-2); color: var(--teal-700); }
.rte__btn.is-on { background: var(--ink); color: #fff; }
.rte__btn svg { width: 16px; height: 16px; }
.rte__btn i { font-style: italic; }

.rte__area {
  min-height: 260px; max-height: 620px; overflow-y: auto;
  padding: 16px 18px; outline: 0;
  font-family: var(--font-sans); font-size: 15.5px; line-height: 1.7; color: var(--ink-700);
}
.rte__area:empty::before { content: 'Start typing, or paste content in…'; color: #9aa7ad; }
.rte__area > * + * { margin-top: 13px; }
.rte__area h3 { font-size: 19px; color: var(--ink); line-height: 1.3; }
.rte__area h4 { font-size: 16.5px; color: var(--ink); }
.rte__area ul, .rte__area ol { padding-left: 22px; display: grid; gap: 6px; }
.rte__area ul { list-style: disc; }
.rte__area ol { list-style: decimal; }
.rte__area strong { color: var(--ink); }
.rte__area a { color: var(--teal-600); text-decoration: underline; }
.rte__area blockquote {
  padding-left: 14px; border-left: 3px solid var(--line); color: var(--muted);
}

/* Source view reuses the textarea that was there all along */
.rte .rte__source {
  width: 100%; border: 0; border-radius: 0; background: #fff;
  font-family: ui-monospace, Consolas, monospace; font-size: 13px; line-height: 1.65;
  padding: 16px 18px; min-height: 260px; resize: vertical;
}
.rte .rte__source:focus { box-shadow: none; border: 0; }

/* ============================================================
   COURSE BUILDER + LEARNER COURSE LAYOUT
   Added when the admin screens were merged into one builder page
   and the learner journey picked up locked lessons.
   ============================================================ */

/* ---------- Builder: settings row (form + status card) ---------- */
.abuild { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1040px) { .abuild { grid-template-columns: 2fr 1fr; } }
.abuild__pad { padding: 20px 22px 24px; }
.abuild__thumb {
  aspect-ratio: 16/10; border-radius: var(--r-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--paper);
}
.abuild__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abuild__thumb--empty {
  display: grid; place-items: center; font-size: 13px; color: var(--muted);
  border-style: dashed;
}
.abuild__facts { margin-top: 18px; display: grid; gap: 10px; }
.abuild__facts li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13.5px; padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.abuild__facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.abuild__facts span:first-child { color: var(--muted); }
.abuild__acts { margin-top: 18px; display: grid; gap: 9px; }
.abuild__acts form { display: contents; }
.abuild__acts .btn { width: 100%; justify-content: center; }
.abuild__hint {
  margin-top: 16px; font-size: 13px; line-height: 1.55; color: var(--amber-700);
  background: var(--amber-50); border: 1px solid var(--amber-100); border-radius: var(--r-sm); padding: 11px 13px;
}

/* ---------- Builder: sortable lists ---------- */
.asorthint { font-size: 13px; color: var(--muted); padding: 0 22px 12px; }
.agrip {
  display: grid; place-items: center; width: 22px; height: 26px; flex-shrink: 0;
  color: #b6c2c6; cursor: grab; border-radius: 6px; touch-action: none;
}
.agrip:hover { color: var(--teal); background: var(--teal-50); }
.agrip:active { cursor: grabbing; }
.agrip svg { width: 18px; height: 18px; pointer-events: none; }
.agrip--sm { height: 22px; }

.is-sortable .amodule { cursor: default; }
.is-sortable .amodule.is-dragging {
  opacity: .55; background: var(--teal-50);
  outline: 2px dashed var(--teal); outline-offset: -2px;
}
.amedia {
  display: inline-block; margin-top: 4px; font-size: 12px; color: var(--teal-700);
  background: var(--teal-50); border-radius: var(--r-pill); padding: 2px 10px;
}

/* ---------- Builder: answer-option editor ---------- */
.aopts__list { display: grid; gap: 9px; margin-bottom: 12px; }
.aopt { cursor: default; }
.aopt.is-dragging { opacity: .55; }
.aopt__x {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--paper); color: var(--muted);
  font-size: 19px; line-height: 1; cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.aopt__x:hover:not(:disabled) { background: #fdecec; border-color: #f0b8b8; color: #b3261e; }
.aopt__x:disabled { opacity: .3; cursor: not-allowed; }

/* ---------- Builder: modal ---------- */
.amodal-back {
  position: fixed; inset: 0; z-index: 120; display: flex;
  align-items: flex-start; justify-content: center;
  padding: clamp(16px, 5vh, 56px) 16px; overflow-y: auto;
  background: rgba(18, 42, 53, .55);
  animation: amodal-fade .16s var(--ease);
}
.amodal-back[hidden] { display: none; }
.amodal {
  width: 100%; max-width: 560px; margin: auto; background: var(--card);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg); overflow: hidden;
  animation: amodal-rise .2s var(--ease);
}
.amodal--lg { max-width: 720px; }
.amodal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; border-bottom: 1px solid var(--line);
}
.amodal__head h2 { font-size: 20px; }
.amodal__x {
  width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--paper);
  color: var(--muted); font-size: 24px; line-height: 1; cursor: pointer;
}
.amodal__x:hover { background: var(--paper-2); color: var(--ink); }
@keyframes amodal-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes amodal-rise { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .amodal-back, .amodal { animation: none; }
}

/* ============================================================
   COURSE UI
   Layout follows the TLC-Staffnet learning journey (card grid ->
   overview -> player -> assessment); palette and type stay Learn
   Care Excel. Flat 14px cards and hairline borders rather than
   the big rounded shadowed panels used elsewhere -- a course list
   needs to read as a dense index, not a set of marketing cards.
   ============================================================ */

/* ---------- Shared ---------- */
.crs-bar { height: 6px; border-radius: var(--r-pill); background: var(--paper-2); overflow: hidden; }
.crs-bar > span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--teal), var(--lime)); }

.crs-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: var(--fw-strong); letter-spacing: .01em;
  padding: 4px 11px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--ink-700);
}
.crs-badge svg { width: 13px; height: 13px; flex-shrink: 0; }
.crs-badge--passed     { background: var(--lime-50); color: var(--lime-700); }
.crs-badge--progress   { background: var(--teal-50); color: var(--teal-700); }
.crs-badge--assessment { background: var(--amber-50); color: var(--amber-700); }
.crs-badge--enrolled,
.crs-badge--none,
.crs-badge--muted      { background: var(--paper-2);  color: var(--muted); }

.crs-btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 18px; border-radius: var(--r-sm);
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font-family: var(--font-sans); font-weight: var(--fw-strong); font-size: 14.5px;
  cursor: pointer; text-decoration: none;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
.crs-btn-ghost:hover { background: var(--paper); border-color: var(--teal); }
.crs-btn-ghost svg { width: 17px; height: 17px; }

/* ---------- Catalogue grid ---------- */
.crs-filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin-bottom: 24px; }
.crs-filter { display: grid; gap: 6px; }
.crs-filter > span {
  font-size: 11.5px; font-weight: var(--fw-strong); text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted);
}
/* The native control was the one piece of raw OS chrome left on the page —
   grey Windows bevel and system font against everything else. Draw our own
   chevron and it matches the search field beside it. */
.crs-filter select {
  min-width: 190px; padding: 11px 40px 11px 14px;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.2;
  color: var(--text); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); outline: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-color: var(--card);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235d6e76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.crs-filter select:hover { border-color: #cbd8d7; }
.crs-filter select:focus { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-50); }
.crs-count { margin-left: auto; font-size: 13.5px; color: var(--muted); }

/* 280px only ever yielded three columns inside the console's content width, so
   fifteen courses ran to five rows of oversized cards. 258 lands four across on
   a desktop and still falls back to two and one on the way down. */
.crs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 22px; }
.crs-card {
  display: flex; flex-direction: column; padding: 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.crs-card:hover { border-color: var(--teal); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.crs-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* A fixed pixel height gave the thumbnails a different crop at every column
   count. A ratio keeps them consistent and gives the photography more room. */
.crs-card__img {
  position: relative; margin: -20px -20px 14px;
  border-radius: 15px 15px 0 0; overflow: hidden; background: var(--paper-2);
}
.crs-card__img img {
  width: 100%; aspect-ratio: 16 / 10; height: auto; object-fit: cover; display: block;
  transition: transform .5s var(--ease);
}
.crs-card:hover .crs-card__img img { transform: scale(1.05); }
/* Several course photos are pale at the bottom and ran straight into the white
   card with no visible edge. A whisper of scrim gives every thumbnail a foot. */
.crs-card__img::after {
  content: ''; position: absolute; inset: auto 0 0; height: 40%; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(18,42,53,.16));
}
/* The catalogue runs mandatory → specialist → core skills with nothing but a
   grey word to tell the three apart. Colour-coding the label off the data-cat
   the filter script already reads gives the grid visible structure without
   touching the markup or breaking the filtering. */
.crs-card__cat {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); font-weight: var(--fw-strong); margin-bottom: 7px;
}
.crs-card__cat::before {
  content: ''; width: 12px; height: 2px; border-radius: 2px;
  background: currentColor; flex-shrink: 0;
}
.crs-card[data-cat="mandatory"]  .crs-card__cat { color: var(--teal-600); }
.crs-card[data-cat="specialist"] .crs-card__cat { color: var(--amber-700); }
.crs-card[data-cat="skills"]     .crs-card__cat { color: var(--lime-700); }
/* Two lines reserved whether the title needs them or not — otherwise a course
   with a long name shunts its badges and blurb out of step with its neighbours
   and the whole row reads as ragged. */
.crs-card h3 {
  font-size: 18px; line-height: 1.25; color: var(--ink); margin-bottom: 10px;
  min-height: 2.5em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.crs-card__meta { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.crs-card__desc { flex: 1; font-size: 14px; line-height: 1.55; color: var(--muted); margin-bottom: 14px; }
.crs-card__prog { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.crs-card__prog b { color: var(--ink-700); }
.crs-card .crs-bar { margin-bottom: 8px; }
/* Fifteen solid teal slabs stacked down the page read as a wall of buttons and
   flattened the grid. The whole card is the link anyway, so the CTA rests as a
   soft teal tint and fills in only on the card you're pointing at. */
.crs-card .btn {
  width: 100%; max-width: none; justify-content: center;
  background: var(--teal-50); color: var(--teal-700); box-shadow: none;
}
.crs-card:hover .btn {
  background: var(--teal); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(20,134,139,.75);
}
.crs-card:hover .btn svg { transform: translateX(4px); }
.crs-empty { padding: 40px 20px; text-align: center; color: var(--muted); font-size: 14.5px; }

/* ---------- Course overview ---------- */
.crs-ovgrid { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .crs-ovgrid { grid-template-columns: minmax(0, 1fr) 344px; } }
@media (max-width: 899px) { .crs-ovgrid > .crs-pcard { order: -1; } }

.crs-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.crs-sec { margin-bottom: 28px; }
.crs-sec__title {
  font-size: 19px; color: var(--ink); margin-bottom: 14px;
  padding-bottom: 10px; border-bottom: 1px solid var(--line);
}
.crs-sec__note { font-size: 13.5px; color: var(--muted); margin: -6px 0 14px; }
.crs-prose { font-size: 15.5px; line-height: 1.7; color: var(--text); }
.crs-prose > * + * { margin-top: 14px; }

/* ---------- Lesson list (overview and player TOC share these rows) ---------- */
.crs-lessons { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.crs-lesson {
  display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px; font-weight: var(--fw-mid); color: var(--text); text-decoration: none;
  transition: background .18s var(--ease);
}
.crs-lesson:last-child { border-bottom: 0; }
a.crs-lesson:hover { background: var(--paper); }
/* Hovering the current lesson must not wipe out the "you are here" tint —
   a.crs-lesson:hover (0,2,1) would otherwise outrank .crs-lesson.is-current. */
a.crs-lesson.is-current:hover { background: var(--teal-50); }
.crs-lesson__num {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper-2); color: var(--ink-700);
  font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 12.5px;
}
.crs-lesson__num svg { width: 14px; height: 14px; }
.crs-lesson__title { flex: 1; min-width: 0; }
.crs-lesson__type {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: var(--fw-strong); text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.crs-lesson__type svg { width: 13px; height: 13px; }
.crs-lesson.is-done    .crs-lesson__num { background: var(--lime); color: #fff; }
.crs-lesson.is-current { background: var(--teal-50); color: var(--teal-700); }
.crs-lesson.is-current .crs-lesson__num  { background: var(--teal); color: #fff; }
.crs-lesson.is-current .crs-lesson__type { color: var(--teal-700); }
.crs-lesson.is-locked  { color: #9aa7ad; cursor: not-allowed; }
.crs-lesson.is-locked  .crs-lesson__num  { background: var(--paper-2); color: #b6c2c6; }
.crs-lesson.is-locked  .crs-lesson__type { color: #b6c2c6; }
.crs-lesson--quiz { border-top: 1px solid var(--line); }

/* ---------- Sticky course card ---------- */
.crs-pcard {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; box-shadow: var(--shadow-sm);
}
@media (min-width: 900px) { .crs-pcard { position: sticky; top: 16px; } }
.crs-pcard__media { aspect-ratio: 16/10; background: var(--paper-2); }
.crs-pcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crs-pcard__media .ph { width: 100%; height: 100%; display: grid; place-items: center; color: #b6c2c6; }
.crs-pcard__media .ph svg { width: 42px; height: 42px; }
.crs-pcard__body { padding: 20px; }
.crs-pcard__price { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.crs-pcard__price b { font-family: var(--font-display); font-size: 30px; color: var(--ink); }
.crs-pcard__price span { font-size: 13px; color: var(--muted); }
.crs-pcard__prog { font-size: 13px; color: var(--muted); margin-bottom: 9px; }
.crs-pcard__body .btn,
.crs-pcard__body .crs-btn-ghost { width: 100%; max-width: none; justify-content: center; margin-top: 10px; }
.crs-pcard__body form { margin: 0; }
.crs-pcard__inc { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.crs-pcard__inc li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-700); }
.crs-pcard__inc svg { width: 16px; height: 16px; color: var(--teal-600); flex-shrink: 0; }
.crs-pcard__inc .h {
  font-weight: var(--fw-strong); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink); display: block;
}

/* ---------- Player ---------- */
.crs-layout { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .crs-layout { grid-template-columns: minmax(0, 1fr) 320px; } }

.crs-stage { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: clamp(20px, 3vw, 28px); }
.crs-stage__eyebrow { font-size: 12px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.crs-stage h2 { font-size: clamp(21px, 2.6vw, 26px); color: var(--ink); margin: 8px 0 18px; }
.crs-stage__nav {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line);
}
.crs-video { position: relative; width: 100%; aspect-ratio: 16/9; background: #000; border-radius: 10px; overflow: hidden; margin-bottom: 18px; }
.crs-video video, .crs-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.crs-figure { margin-bottom: 18px; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
.crs-figure img { width: 100%; height: auto; display: block; }
.crs-file {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); text-decoration: none; color: var(--ink);
}
.crs-file:hover { border-color: var(--teal); background: var(--teal-50); }
.crs-file svg { width: 22px; height: 22px; color: var(--teal-600); flex-shrink: 0; }
.crs-file b { display: block; font-size: 14.5px; }
.crs-file small { color: var(--muted); font-size: 12.5px; }

.crs-toc { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
@media (min-width: 900px) { .crs-toc { position: sticky; top: 16px; } }
.crs-toc__head { padding: 16px; border-bottom: 1px solid var(--line); }
.crs-toc__head .t { font-size: 11.5px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: .05em; color: var(--ink); margin-bottom: 9px; }
.crs-toc__head .p { font-size: 12.5px; color: var(--muted); margin-bottom: 9px; }
.crs-toc .crs-lessons { border: 0; border-radius: 0; }

.crs-note {
  padding: 12px 15px; border-radius: var(--r-sm); margin-bottom: 18px;
  background: var(--amber-50); border: 1px solid var(--amber-100); color: var(--amber-700);
  font-size: 13.5px; line-height: 1.55;
}

/* ---------- Assessment ---------- */
.crs-quiz { max-width: 820px; }
.crs-q {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px clamp(18px, 3vw, 24px); margin-bottom: 16px;
}
.crs-q__text { font-weight: var(--fw-strong); font-size: 16px; color: var(--ink); margin-bottom: 14px; line-height: 1.45; }
.crs-q__n { color: var(--muted); font-family: var(--font-display); margin-right: 4px; }
.crs-opt {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  padding: 11px 14px; border: 1.5px solid var(--line); border-radius: 10px;
  margin-bottom: 8px; font-size: 15px; color: var(--text);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.crs-opt:last-child { margin-bottom: 0; }
.crs-opt:hover { background: var(--paper); }
.crs-opt input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--teal); flex-shrink: 0; }
.crs-opt:has(input:checked) { border-color: var(--teal); background: var(--teal-50); }
.crs-result { border-radius: 14px; padding: 20px 24px; margin-bottom: 22px; border: 1px solid var(--line); }
.crs-result h2 { font-size: 20px; margin-bottom: 6px; }
.crs-result--fail { background: #fdecec; border-color: #f0b8b8; color: #8c2f28; }
.crs-shuffle { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.crs-filter--search { flex: 1 1 240px; }
/* Same metrics as the select next to it, so the two sit on one line. */
.crs-filter--search input {
  width: 100%; padding: 11px 14px; font-family: var(--font-sans); font-size: 14px; line-height: 1.2;
  color: var(--text); background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--r-sm); outline: 0;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.crs-filter--search input:hover { border-color: #cbd8d7; }
.crs-filter--search input:focus { border-color: var(--teal); box-shadow: 0 0 0 4px var(--teal-50); }

/* ---------- Certificates list (My learning) ---------- */
.crs-certs { display: grid; gap: 10px; }
.crs-cert {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
.crs-cert__ico {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--lime-50); color: var(--lime-700);
}
.crs-cert__ico svg { width: 19px; height: 19px; }
.crs-cert__body { flex: 1; min-width: 0; }
.crs-cert__body b { display: block; font-size: 15px; color: var(--ink); }
.crs-cert__body small { color: var(--muted); font-size: 12.5px; }
.crs-cert .crs-btn-ghost { flex-shrink: 0; padding: 8px 14px; font-size: 13.5px; }
@media (max-width: 560px) {
  .crs-cert { flex-wrap: wrap; }
  .crs-cert .crs-btn-ghost { width: 100%; }
}

/* Status card rides alongside the settings form, which is much taller. */
@media (min-width: 1040px) {
  .abuild__side { position: sticky; top: 16px; }
}

/* ---------- "What you'll learn" list ---------- */
.crs-learn { display: grid; gap: 11px; }
@media (min-width: 620px) { .crs-learn { grid-template-columns: 1fr 1fr; gap: 11px 26px; } }
.crs-learn li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--text); }
.crs-learn svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; color: var(--lime-600); stroke-width: 2.6; }

/* ============================================================
   MY LEARNING (dashboard.php)
   The learner's home. Everything here answers one of three
   questions -- what do I do next, where am I up to, and show me
   my courses my way -- so the blocks are ordered that way down
   the page and the layout controls sit with the list they change.
   Card markup is identical across the three views; only the
   container class differs, so switching layout never re-renders.
   ============================================================ */

/* These blocks all set an explicit `display`, which would otherwise beat the
   `hidden` attribute the markup and js/dashboard.js use to show and hide them. */
.dsh-bar[hidden], .dsh-meta[hidden], .dsh-hint[hidden],
.dsh-pin[hidden], .dsh-grab[hidden],
.dsh-items[hidden], #dshPool[hidden], #dshNone[hidden] { display: none; }

/* ---------- Row 1: resume + overall ---------- */
.dsh-top { display: grid; gap: 16px; margin-bottom: 26px; }
@media (min-width: 940px) {
  .dsh-top { grid-template-columns: minmax(0, 1.75fr) minmax(240px, 1fr); }
}

.dsh-resume {
  display: flex; gap: 20px; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--teal); border-radius: 14px;
  padding: 20px; min-width: 0;
}
.dsh-resume--assessment { border-left-color: #d8a72a; }
.dsh-resume--enrolled   { border-left-color: var(--line); }
.dsh-resume--passed     { border-left-color: var(--lime); }

.dsh-resume__img {
  flex: 0 0 132px; width: 132px; height: 100px; border-radius: 10px;
  overflow: hidden; background: var(--paper-2);
}
.dsh-resume__img img { width: 100%; height: 100%; object-fit: cover; }
.dsh-resume__img .ph { width: 100%; height: 100%; display: grid; place-items: center; color: #b6c2c6; }
.dsh-resume__img .ph svg { width: 34px; height: 34px; }

.dsh-resume__body { flex: 1; min-width: 0; }
.dsh-resume__eyebrow {
  font-size: 11.5px; font-weight: var(--fw-strong); text-transform: uppercase;
  letter-spacing: .09em; color: var(--teal-600); margin-bottom: 6px;
}
.dsh-resume--assessment .dsh-resume__eyebrow { color: var(--amber-700); }
.dsh-resume--passed .dsh-resume__eyebrow     { color: var(--lime-700); }
.dsh-resume__body h2 { font-size: clamp(19px, 2.3vw, 24px); line-height: 1.2; color: var(--ink); }
.dsh-resume__next {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-700); margin: 9px 0 14px;
}
.dsh-resume__next svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--teal); }
.dsh-resume__meta { font-size: 12.5px; color: var(--muted); margin: 8px 0 16px; }

/* ---------- Resume card: what the course entails ----------
   Length, time and assessment, then (before they've started) the blurb and the
   lesson list. The progress bar stays put underneath in every state — knowing
   how far through you are is the point of the card. */
.dsh-resume__facts {
  display: flex; flex-wrap: wrap; gap: 7px 8px; margin: 11px 0 0;
}
.dsh-resume__facts span {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--paper); border: 1px solid var(--line);
  font-size: 12.5px; font-weight: var(--fw-mid); color: var(--ink-700);
}
.dsh-resume__facts svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--teal); }

.dsh-resume__blurb {
  font-size: 14px; line-height: 1.55; color: var(--muted);
  margin: 13px 0 0; max-width: 62ch;
}

/* Two columns only where a lesson title actually fits on one line. Keyed off
   auto-fit rather than a viewport media query because what matters is the width
   of the card body, which the photograph beside it changes independently of
   the screen size. */
.dsh-resume__toc {
  display: grid; gap: 5px 22px; margin: 14px 0 16px; max-width: 660px;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.dsh-resume__toc li {
  display: flex; align-items: baseline; gap: 9px; min-width: 0;
  font-size: 13.5px; color: var(--ink-700);
}
.dsh-resume__toc b {
  flex-shrink: 0; display: inline-grid; place-items: center;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-700);
  font-size: 11px; font-weight: var(--fw-strong); line-height: 1;
  transform: translateY(2px);
}
.dsh-resume__toc span { min-width: 0; }
.dsh-resume__toc .is-more { color: var(--muted); font-size: 12.5px; padding-left: 28px; }
.dsh-resume .crs-bar { max-width: 420px; }
.dsh-resume .btn { max-width: max-content; }

/* Progress ring. One conic-gradient plus a punched-out middle -- no SVG, and
   the arc is driven straight from the --pct custom property. */
.dsh-overall {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
}
.dsh-ring {
  position: relative; width: 118px; height: 118px; border-radius: 50%; margin-bottom: 14px;
  background: conic-gradient(var(--teal) 0deg, var(--lime) calc(var(--pct, 0) * 3.6deg), var(--paper-2) 0deg);
}
.dsh-ring::after {
  content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--card);
}
.dsh-ring > span { position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; }
.dsh-ring b { font-family: var(--font-display); font-size: 30px; color: var(--ink); line-height: 1; }
.dsh-ring i { font-style: normal; font-size: 16px; color: var(--muted); }
.dsh-overall h3 { font-size: 15px; color: var(--ink); }
.dsh-overall p { font-size: 12.5px; color: var(--muted); margin-top: 5px; }
/* The ring on home is a link through to the full progress page, so it needs
   the affordances the plain panel on My progress doesn't. */
.dsh-overall--link {
  justify-content: center;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.dsh-overall--link:hover { border-color: var(--teal); transform: translateY(-2px); }
.dsh-overall--link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dsh-overall__more {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px;
  font-size: 13px; font-weight: var(--fw-mid); color: var(--teal-600);
}
.dsh-overall__more svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.dsh-overall--link:hover .dsh-overall__more svg { transform: translateX(3px); }

/* The counts panel on My progress: same card, but a list reads left-aligned. */
.dsh-overall--counts { align-items: stretch; text-align: left; justify-content: flex-start; }
.dsh-overall--counts .pfacts { margin-top: 12px; width: 100%; }

/* ---------- My progress: course-by-course rows ---------- */
.prog-rows { display: grid; gap: 8px; }
.prog-row {
  display: grid; gap: 6px 16px; align-items: center;
  grid-template-columns: 1fr; padding: 14px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.prog-row:hover { border-color: var(--teal); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.prog-row:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.prog-row__main { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; }
.prog-row__main b { font-size: 14.5px; color: var(--ink); }
.prog-row__bar { display: block; min-width: 0; }
.prog-row__num {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.prog-row__num i {
  font-style: normal; font-family: var(--font-display);
  font-size: 15px; color: var(--ink);
}
@media (min-width: 760px) {
  .prog-row { grid-template-columns: minmax(0, 1.6fr) minmax(120px, 1fr) auto; }
  .prog-row__num { justify-content: flex-end; }
}

/* ---------- Status tiles ----------
   These are the status filter, so they sit inside the Customise panel now
   rather than on the page: the counts they carried are already in the page
   subtitle, and as permanent furniture they were four buttons that looked
   like statistics. */
.dsh-stats {
  display: grid; gap: 10px; margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.dsh-stat {
  display: flex; align-items: center; gap: 13px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 15px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.dsh-stat:hover:not(:disabled) { border-color: var(--teal); }
.dsh-stat[aria-pressed="true"] { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-50); }
.dsh-stat:disabled { opacity: .5; cursor: default; }
.dsh-stat__ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; background: var(--paper-2); color: var(--muted);
}
.dsh-stat__ico svg { width: 19px; height: 19px; }
.dsh-stat--assessment .dsh-stat__ico { background: var(--amber-50); color: var(--amber-700); }
.dsh-stat--progress   .dsh-stat__ico { background: var(--teal-50);  color: var(--teal-700); }
.dsh-stat--passed     .dsh-stat__ico { background: var(--lime-50);  color: var(--lime-700); }
.dsh-stat__txt b {
  display: block; font-family: var(--font-display); font-size: 23px;
  line-height: 1.1; color: var(--ink);
}
.dsh-stat__txt > span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- "My courses" heading row ---------- */
.dsh-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; margin-bottom: 14px;
}
.dsh-head .crs-sec__title { margin: 0; }

/* The one control left on the page by default. Everything the toolbar used to
   put on screen permanently now lives behind it. */
.dsh-customise {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: var(--card); border: 1px solid var(--line);
  font-size: 13px; font-weight: var(--fw-mid); color: var(--muted);
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.dsh-customise svg { width: 15px; height: 15px; }
.dsh-customise:hover { border-color: var(--teal); color: var(--teal-700); }
.dsh-customise:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dsh-customise.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.dsh-customise[hidden] { display: none; }

/* ---------- Toolbar (inside the Customise panel) ---------- */
.dsh-bar {
  display: grid; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px; margin-bottom: 12px;
}
.dsh-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dsh-search {
  display: flex; align-items: center; gap: 9px; flex: 1 1 190px; min-width: 0;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 7px 15px;
}
.dsh-search:focus-within { border-color: var(--teal); background: var(--card); box-shadow: 0 0 0 3px var(--teal-50); }
.dsh-search svg { width: 16px; height: 16px; color: var(--muted); flex-shrink: 0; }
.dsh-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: none;
  font-family: var(--font-sans); font-size: 14px; color: var(--text);
}
.dsh-field { display: flex; align-items: center; gap: 7px; }
.dsh-field label { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dsh-field select {
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-pill); padding: 7px 12px; outline: 0;
}
.dsh-field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-50); }

.dsh-views {
  display: flex; gap: 2px; background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px;
}
.dsh-view {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px;
  border-radius: var(--r-pill); font-size: 12.5px; font-weight: var(--fw-mid); color: var(--muted);
}
.dsh-view svg { width: 15px; height: 15px; }
.dsh-view:hover { color: var(--ink); }
.dsh-view[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
@media (max-width: 560px) { .dsh-view span { display: none; } }

/* ---------- Count / hint line ---------- */
.dsh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.dsh-hint { font-size: 12.5px; color: var(--muted); flex: 1 1 220px; }
.dsh-count { font-size: 12.5px; color: var(--muted); margin-left: auto; }
.dsh-reset {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: var(--fw-mid); color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 5px 12px; background: var(--card);
}
.dsh-reset svg { width: 14px; height: 14px; }
.dsh-reset:hover { border-color: var(--teal); color: var(--teal-700); }
.dsh-clear { font-weight: var(--fw-strong); color: var(--teal-600); text-decoration: underline; }

/* ---------- Groups ---------- */
.dsh-group + .dsh-group { margin-top: 28px; }
.dsh-group__head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.dsh-group__head h3 {
  font-size: 13px; font-weight: var(--fw-strong); text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink); white-space: nowrap;
}
.dsh-group__n {
  font-size: 11.5px; font-weight: var(--fw-strong); color: var(--muted);
  background: var(--paper-2); border-radius: var(--r-pill); padding: 2px 9px;
}
.dsh-group--assessment .dsh-group__n { background: var(--amber-50); color: var(--amber-700); }
.dsh-group--progress   .dsh-group__n { background: var(--teal-50);  color: var(--teal-700); }
.dsh-group--passed     .dsh-group__n { background: var(--lime-50);  color: var(--lime-700); }
.dsh-group__rule { flex: 1; height: 1px; background: var(--line); min-width: 12px; }
.dsh-group__note { font-size: 12px; color: var(--muted); white-space: nowrap; }
@media (max-width: 720px) { .dsh-group__note { display: none; } }

/* ---------- Card ---------- */
.dsh-items--grid    { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 18px; }
.dsh-items--list    { display: grid; gap: 11px; }
.dsh-items--compact { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }

.dsh-card {
  position: relative; display: flex; min-width: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; transition: border-color .15s var(--ease), transform .15s var(--ease);
}
.dsh-card:hover { border-color: var(--teal); }
.dsh-card.is-pinned { box-shadow: inset 3px 0 0 var(--lime); }
.dsh-card.is-dragging { opacity: .45; }
.dsh-card.is-draggable { cursor: grab; }

.dsh-card__media { background: var(--paper-2); flex-shrink: 0; }
.dsh-card__media img { width: 100%; height: 100%; object-fit: cover; }
.dsh-card__media .ph { width: 100%; height: 100%; display: grid; place-items: center; color: #b6c2c6; }
.dsh-card__media .ph svg { width: 30px; height: 30px; }

.dsh-card__body { flex: 1; min-width: 0; padding: 15px 16px 16px; }
.dsh-card__top { display: flex; align-items: center; gap: 7px; min-width: 0; }
.dsh-card__cat {
  font-size: 11.5px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.dsh-card__title { font-size: 16.5px; line-height: 1.28; color: var(--ink); }
.dsh-card__next {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--muted); min-width: 0;
}
.dsh-card__next svg { width: 15px; height: 15px; flex-shrink: 0; color: var(--teal-600); }
.dsh-card__next span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-card__prog p {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12px; color: var(--muted); margin-top: 6px;
}
.dsh-card__prog b { color: var(--ink-700); }
.dsh-card__foot { display: flex; align-items: center; gap: 12px; }
.dsh-card__link { font-size: 12.5px; font-weight: var(--fw-mid); color: var(--teal-600); position: relative; z-index: 2; }
.dsh-card__link:hover { text-decoration: underline; }

/* The CTA is the card's primary action, so the whole card is clickable through
   it -- the pin, the drag handle and "Course details" sit above the overlay. */
.dsh-card__cta::after { content: ''; position: absolute; inset: 0; z-index: 1; }

.dsh-pin, .dsh-grab {
  position: relative; z-index: 2; flex-shrink: 0; margin-left: auto;
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center; color: #a9b6bb;
}
.dsh-grab { margin-left: 0; cursor: grab; }
.dsh-pin svg, .dsh-grab svg { width: 15px; height: 15px; }
.dsh-pin:hover, .dsh-grab:hover { background: var(--paper-2); color: var(--ink); }
.dsh-pin[aria-pressed="true"] { color: var(--lime-600); }
.dsh-pin[aria-pressed="true"] svg { fill: currentColor; stroke-width: 1.2; }
.dsh-grab:focus-visible { background: var(--teal-50); color: var(--teal-700); }

/* --- Cards view --- */
.dsh-items--grid .dsh-card { flex-direction: column; }
.dsh-items--grid .dsh-card__media { height: 132px; }
.dsh-items--grid .dsh-card__body { display: flex; flex-direction: column; gap: 9px; }
.dsh-items--grid .dsh-card__prog { margin-top: auto; padding-top: 4px; }
.dsh-items--grid .dsh-card__cta { width: 100%; justify-content: center; }
.dsh-items--grid .dsh-card__foot { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }

/* --- List view --- */
@media (min-width: 720px) {
  .dsh-items--list .dsh-card__media { width: 148px; }
  .dsh-items--list .dsh-card__body {
    display: grid; align-items: center; gap: 4px 20px;
    grid-template-columns: minmax(0, 1.5fr) minmax(130px, .8fr) auto;
    grid-template-areas: "top prog foot" "title prog foot" "next prog foot";
  }
  .dsh-items--list .dsh-card__top   { grid-area: top; }
  .dsh-items--list .dsh-card__title { grid-area: title; font-size: 17px; }
  .dsh-items--list .dsh-card__next  { grid-area: next; }
  .dsh-items--list .dsh-card__prog  { grid-area: prog; }
  .dsh-items--list .dsh-card__foot  { grid-area: foot; flex-direction: column; align-items: stretch; gap: 7px; text-align: center; }
  .dsh-items--list .dsh-pin { margin-left: 8px; }
}
@media (max-width: 719px) {
  .dsh-items--list .dsh-card { flex-direction: column; }
  .dsh-items--list .dsh-card__media { height: 120px; }
  .dsh-items--list .dsh-card__body { display: flex; flex-direction: column; gap: 9px; }
}

/* --- Compact view --- */
.dsh-items--compact .dsh-card {
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; align-items: center;
}
.dsh-items--compact .dsh-card:last-child { border-bottom: 0; }
.dsh-items--compact .dsh-card:hover { background: var(--paper); }
.dsh-items--compact .dsh-card.is-pinned { box-shadow: inset 3px 0 0 var(--lime); }
.dsh-items--compact .dsh-card__media,
.dsh-items--compact .dsh-card__next,
.dsh-items--compact .dsh-card__cat,
.dsh-items--compact .dsh-card__link { display: none; }
.dsh-items--compact .dsh-card__body { padding: 11px 15px; }
.dsh-items--compact .dsh-card__title { font-size: 15px; }
.dsh-items--compact .dsh-card__prog p span { display: none; }
.dsh-items--compact .dsh-card__prog p { justify-content: flex-end; margin-top: 4px; }
@media (min-width: 720px) {
  .dsh-items--compact .dsh-card__body {
    display: grid; align-items: center; gap: 0 16px;
    grid-template-columns: minmax(0, 1fr) 170px auto auto;
    grid-template-areas: "title prog top foot";
  }
  /* One row deep, so the bar and the figure sit side by side rather than
     stacking and pushing every row taller than the layout is meant to be. */
  .dsh-items--compact .dsh-card__prog { display: flex; align-items: center; gap: 10px; }
  .dsh-items--compact .dsh-card__prog .crs-bar { flex: 1; }
  .dsh-items--compact .dsh-card__prog p { margin-top: 0; }
  .dsh-items--compact .dsh-card__title { grid-area: title; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dsh-items--compact .dsh-card__prog  { grid-area: prog; }
  .dsh-items--compact .dsh-card__top   { grid-area: top; }
  .dsh-items--compact .dsh-card__foot  { grid-area: foot; }
  .dsh-items--compact .dsh-pin { margin-left: 4px; }
}
@media (max-width: 719px) {
  .dsh-items--compact .dsh-card__body { display: flex; flex-direction: column; gap: 8px; }
}

/* ---------- Nothing enrolled yet ---------- */
.dsh-blank {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(32px, 6vw, 56px) 24px; text-align: center;
}
.dsh-blank__ico {
  width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 18px;
  display: grid; place-items: center; background: var(--teal-50); color: var(--teal-600);
}
.dsh-blank__ico svg { width: 28px; height: 28px; }
.dsh-blank h2 { font-size: clamp(21px, 2.6vw, 26px); color: var(--ink); }
.dsh-blank p { max-width: 520px; margin: 12px auto 22px; font-size: 14.5px; color: var(--muted); line-height: 1.6; }
.dsh-blank .btn { margin-inline: auto; }

/* ---------- Sidebar additions ---------- */
.adm__nav-badge {
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; font-weight: var(--fw-strong); line-height: 1;
  padding: 4px 8px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.13); color: #cddadd;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.adm__nav-item:hover .adm__nav-badge { background: rgba(255,255,255,.2); color: #fff; }
.adm__nav-item.is-active .adm__nav-badge {
  background: rgba(139,197,63,.28); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(139,197,63,.35);
}
/* Status headings over the enrolled-course list. Same three groups, same order
   and the same colour coding as the card groups on My learning — the leading
   dash carries that colour so the heading reads as a label, not body text. */
.adm__nav-sub {
  display: flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: .1em;
  color: #7d969c; padding: 13px 12px 5px;
}
.adm__nav-sub::before {
  content: ''; width: 10px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .75; flex-shrink: 0;
}
.adm__nav-sub--assessment { color: #e2bb5c; }
.adm__nav-sub--progress   { color: #7cc0c4; }
.adm__nav-sub--enrolled   { color: #7d969c; }
.adm__courses + .adm__nav-sub { padding-top: 15px; }
.adm__course-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.adm__course-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: #6b8087; }
/* Waiting on an assessment is the one state worth a nudge — it's a single
   click from a certificate, so the dot breathes rather than sitting still. */
.adm__course-dot--assessment {
  background: #e0b23c; box-shadow: 0 0 0 3px rgba(224,178,60,.18);
  animation: admDotPulse 2.4s var(--ease) infinite;
}
@keyframes admDotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(224,178,60,.18); }
  50%      { box-shadow: 0 0 0 5px rgba(224,178,60,.06); }
}
.adm__course-dot--progress   { background: var(--teal); }
.adm__course-dot--enrolled   { background: #61787f; }

/* A learner with a long list shouldn't lose the layout controls when scrolling */
@media (min-width: 940px) {
  .dsh-bar { position: sticky; top: 8px; z-index: 20; box-shadow: var(--shadow-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .dsh-card, .dsh-stat { transition: none; }
  .adm__nav-item, .adm__course, .adm__nav-item svg,
  .adm__brand-mark, .adm__burger span, .adm__course-bar > span { transition: none; }
  .adm__nav-item:hover, .adm__course:hover { transform: none; }
  .adm__nav-item:hover svg { transform: none; }
  .adm__brand:hover .adm__brand-mark { transform: none; }
  .adm__course-dot--assessment { animation: none; }
  .adm__scrim { animation: none; }
}

/* ---------- Admin console polish ---------- */

/* Three small buttons wrapping onto two lines gave every table row a
   different height. Keep them on one line wherever there's room, and let
   them wrap only on narrow screens where they genuinely have to. */
@media (min-width: 1180px) { .arow-actions { flex-wrap: nowrap; } }
.arow-actions .btn { white-space: nowrap; }

/* Guarded actions (delete a course that has learners on it) render disabled
   with a title explaining why, rather than disappearing from the row. */
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn--danger:disabled:hover {
  background: transparent; border-color: #eccaca; color: #a13232; transform: none;
}

/* Status badges borrowed from the learner cards for the admin tables. They sit
   in tight cells, so they lose the card's breathing room. */
.atable .crs-badge { font-size: 11.5px; padding: 3px 9px; white-space: nowrap; }
.atable .crs-badge + .amuted { margin-top: 4px; }

/* ============================================================
   BRAND SIGNATURE — the sweep corner
   The logo's panels cut on a diagonal, and --r-brand carries
   that into a container shape: a big sweep on the bottom-left,
   pointing back toward the sidebar. It was only ever used on
   the marketing strip, the login card and the certificate, so
   the app itself was a wall of identical 14px rectangles like
   every other portal.

   The rule, so it stays a signature rather than a tic:
     one sweep per major panel, always bottom-left, never on
     small elements (badges, buttons, tiles, form fields).
   Learner side only — the admin console keeps the plain
   chassis, where familiarity is worth more than character.
   ============================================================ */
:root {
  --r-panel:    18px 18px 18px 52px;   /* full-width panels */
  --r-panel-sm: 14px 14px 14px 34px;   /* course cards */
}

/* --- My learning --- */
.dsh-resume     { border-radius: var(--r-panel); }
.dsh-overall    { border-radius: var(--r-panel); }
.dsh-blank      { border-radius: var(--r-panel); }
.dsh-items--compact { border-radius: var(--r-panel); }
.dsh-items--grid .dsh-card,
.dsh-items--list .dsh-card { border-radius: var(--r-panel-sm); }

/* The resume card's left edge is the brand bar, so the sweep has to follow it
   round rather than being sliced off square at the bottom. */
.dsh-resume { border-bottom-left-radius: 52px; }

/* --- Course pages --- */
.crs-stage { border-radius: var(--r-panel); }
.crs-toc   { border-radius: var(--r-panel); }
.crs-pcard { border-radius: var(--r-panel); }
.crs-cert  { border-radius: var(--r-panel-sm); }

@media (max-width: 560px) {
  /* A 52px sweep on a 320px-wide panel stops reading as a corner and starts
     reading as a mistake. Scale it back rather than dropping it. */
  :root { --r-panel: 16px 16px 16px 34px; --r-panel-sm: 14px 14px 14px 26px; }
  .dsh-resume { border-bottom-left-radius: 34px; }
}

/* ============================================================
   NUMERALS
   Futura is the only family here — display and sans are the
   same face — so the contrast has to come from size, weight
   and tracking rather than from a second typeface. Figures
   that matter get set big and tight; everything else stays
   quiet so they have something to be loud against.
   ============================================================ */
.dsh-ring b {
  font-size: 38px; letter-spacing: -.02em; font-weight: var(--fw-mid);
}
.dsh-ring i { font-size: 17px; margin-left: 1px; }

.dsh-stat__txt b {
  font-size: 32px; letter-spacing: -.02em; font-weight: var(--fw-mid); margin-bottom: 1px;
}
.dsh-stat__txt > span { font-size: 12px; letter-spacing: .01em; }

/* The percentage on a course card is the one figure a learner scans for. */
.dsh-card__prog b {
  font-family: var(--font-display); font-size: 15px;
  font-weight: var(--fw-mid); letter-spacing: -.01em; color: var(--ink);
}
.dsh-group__n {
  font-family: var(--font-display); font-size: 12.5px; letter-spacing: 0;
}
.dsh-resume__meta { letter-spacing: .01em; }

/* ============================================================
   MY LEARNING — modernisation pass
   Same structure, same information, same navigation. What
   changes is materiality: layered surfaces instead of flat
   outlines, an asymmetric bento top row instead of two equal
   boxes, a real activity strip where there was dead space, and
   motion that shows change rather than decorating stillness.
   ============================================================ */

/* --- Ambient brand wash -------------------------------------
   The public site has teal and lime glows behind its hero; the
   app threw all of that away and sat on flat grey. This brings
   the same light into the content area at a fraction of the
   strength — enough to stop the page reading as a spreadsheet,
   faint enough that nothing has to fight it for contrast. */
.adm__content { position: relative; isolation: isolate; }
.adm__content::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 620px; z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 88% -8%, rgba(20,134,139,.10), transparent 62%),
    radial-gradient(620px 380px at 4% 2%,  rgba(139,197,63,.09), transparent 60%);
}

/* --- Top row -------------------------------------------------
   This used to hard-code grid positions (resume in column 1 spanning both
   rows, ring and week stacked in column 2) for the one arrangement the old
   dashboard had. Splitting that page into two left those positions pointing
   at cards that were no longer there: home reserved an empty second column,
   and My progress dropped two panels into the same cell so the ring drew on
   top of the counts. Placement is driven by a modifier on the container now,
   so a page can't inherit a layout meant for a different set of panels. */
@media (min-width: 940px) {
  .dsh-top { align-items: stretch; }

  /* Home: what to do next, with where you stand and the last seven days stacked
     beside it. Positions are declared here rather than on the panels themselves
     so My progress, which uses the same panel classes in a different
     arrangement, can't inherit them.

     Spanning both rows makes the resume card as tall as the two next to it,
     which is what lets its photograph run edge to edge down the left instead of
     sitting as a thumbnail — hence overflow on the parent, no radius of its
     own, and the padding moved off the card onto the body. */
  .dsh-top--trio {
    grid-template-columns: minmax(0, 1.9fr) minmax(240px, 1fr);
    grid-template-rows: auto auto;
  }
  .dsh-top--trio .dsh-resume  { grid-column: 1; grid-row: 1 / span 2; }
  .dsh-top--trio .dsh-overall { grid-column: 2; grid-row: 1; }
  .dsh-top--trio .dsh-week    { grid-column: 2; grid-row: 2; }

  .dsh-top--trio .dsh-resume {
    align-items: stretch; padding: 0; gap: 0; overflow: hidden;
  }
  /* The course photography is panoramic (the safeguarding shot is 1200x400),
     so a narrow full-height column crops it to a sliver and slices straight
     through whoever the picture is of. The per-image anchors in
     courses.img_focus were chosen against wide card thumbnails; giving this
     column real width keeps the crop close enough to those that the anchors
     still land on the subject. */
  .dsh-top--trio .dsh-resume__img {
    flex: 0 0 clamp(260px, 46%, 390px);
    width: auto; height: auto; min-height: 100%;
    border-radius: 0; align-self: stretch;
  }
  .dsh-top--trio .dsh-resume__body {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(22px, 2.8vw, 32px) clamp(24px, 3vw, 34px);
  }

  /* My progress: ring, week strip, counts. The strip gets the extra width —
     it is the only one of the three with anything to plot. */
  .dsh-top--stats {
    grid-template-columns: minmax(230px, 1fr) minmax(0, 1.5fr) minmax(230px, 1fr);
    grid-template-rows: auto;
  }
}

/* --- Layered surfaces ---------------------------------------
   A 1px outline on white is the flattest possible card. Keeping
   the hairline for definition but adding a soft, wide shadow
   lifts the panels off the page without the heavy drop shadows
   that dated the last generation of dashboards. */
.dsh-resume, .dsh-overall, .dsh-week, .dsh-blank,
.dsh-items--grid .dsh-card, .dsh-items--list .dsh-card, .dsh-items--compact {
  box-shadow: 0 1px 2px rgba(18,42,53,.04), 0 12px 28px -20px rgba(18,42,53,.28);
}
.dsh-resume {
  background:
    linear-gradient(180deg, rgba(227,241,241,.5), transparent 42%),
    var(--card);
}
.dsh-overall, .dsh-week {
  background:
    linear-gradient(180deg, rgba(238,247,225,.42), transparent 46%),
    var(--card);
}
.dsh-items--grid .dsh-card:hover,
.dsh-items--list .dsh-card:hover {
  box-shadow: 0 2px 4px rgba(18,42,53,.05), 0 18px 34px -22px rgba(18,42,53,.4);
  transform: translateY(-2px);
}

/* Stat tiles get the same treatment, but quieter — they're the
   supporting row, not the headline. */
.dsh-stat { box-shadow: 0 1px 2px rgba(18,42,53,.035); }
.dsh-stat:hover:not(:disabled) { transform: translateY(-2px); }
.dsh-stat[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--teal-50), 0 8px 18px -12px rgba(20,134,139,.5); }

/* --- Glassy toolbar -----------------------------------------
   It's sticky, so content scrolls under it. Frosting it means
   the page reads as continuous rather than as content vanishing
   behind an opaque slab. */
@media (min-width: 940px) {
  .dsh-bar {
    background: rgba(255,255,255,.82);
    backdrop-filter: saturate(150%) blur(12px);
    -webkit-backdrop-filter: saturate(150%) blur(12px);
    box-shadow: 0 1px 2px rgba(18,42,53,.04), 0 14px 30px -24px rgba(18,42,53,.5);
  }
}

/* --- This week ----------------------------------------------
   Seven days of real completions. Bars are pinned to a baseline
   so an empty day is visibly empty rather than merely short. */
.dsh-week { display: flex; flex-direction: column; padding: 18px 20px 16px; }
.dsh-week__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dsh-week__head h3 { font-size: 14.5px; color: var(--ink); }
.dsh-week__streak {
  font-size: 11.5px; font-weight: var(--fw-strong); letter-spacing: .01em;
  color: var(--lime-700); background: var(--lime-50);
  border-radius: var(--r-pill); padding: 3px 10px; white-space: nowrap;
}
.dsh-week__bars {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  align-items: end; margin: 16px 0 12px; flex: 1; min-height: 76px;
}
.dsh-week__bars li { display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.dsh-week__bars li > span {
  width: 100%; max-width: 15px; border-radius: 5px;
  height: var(--h); min-height: 3px;
  background: var(--paper-2);
  transition: height .5s var(--ease);
}
.dsh-week__bars li.has-any > span { background: linear-gradient(180deg, var(--lime), var(--teal)); }
.dsh-week__bars li:last-child > span { outline: 2px solid var(--teal-50); outline-offset: 2px; }
.dsh-week__bars i { font-style: normal; font-size: 10.5px; color: var(--muted); }
.dsh-week__sum { font-size: 12.5px; color: var(--muted); }
.dsh-week__sum b { font-family: var(--font-display); font-size: 17px; color: var(--ink); letter-spacing: -.01em; }

/* --- Motion -------------------------------------------------
   Only on things JS never re-parents. The course cards get moved
   between group containers when the layout changes, and an
   entrance animation there would replay on every view switch. */
@keyframes dshRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.dsh-top    { animation: dshRise .55s var(--ease) both; }
/* .dsh-stats no longer animates on its own — it sits inside .dsh-bar now, and
   two nested rises read as a stutter when the panel opens. */
.dsh-bar    { animation: dshRise .3s var(--ease) both; }

/* The ring counts up rather than appearing pre-filled: the number
   it lands on is the point of the panel. Browsers without
   @property just render the final value, which is correct too. */
@property --pct { syntax: '<number>'; inherits: false; initial-value: 0; }
@keyframes dshRing { from { --pct: 0; } }
.dsh-ring { animation: dshRing 1.1s var(--ease) .15s both; }

/* Bars sweep out from the left. scaleX rather than width so the
   animation doesn't need to know the value. */
@keyframes dshBar { from { transform: scaleX(0); } }
.dsh-resume .crs-bar > span { transform-origin: left; animation: dshBar .8s var(--ease) .2s both; }

@media (prefers-reduced-motion: reduce) {
  .dsh-top, .dsh-stats, .dsh-bar, .dsh-ring,
  .dsh-resume .crs-bar > span { animation: none; }
  .dsh-week__bars li > span { transition: none; }
  .dsh-stat:hover:not(:disabled),
  .dsh-items--grid .dsh-card:hover,
  .dsh-items--list .dsh-card:hover { transform: none; }
}

/* ---------- Image focus picker (admin course form) ----------
   Nine anchor points laid over a thumbnail of the actual photo, so an admin
   picks the part that must survive a crop by looking at it rather than by
   reading position names off a dropdown. */
.afocus { display: grid; gap: 10px; }
.afocus__pad {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  width: 190px; aspect-ratio: 3 / 2; gap: 2px; padding: 2px;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden;
  background-color: var(--paper-2);
  background-image: var(--shot, none);
  background-size: cover; background-position: center;
}
.afocus__spot { position: relative; display: block; cursor: pointer; }
.afocus__spot input { position: absolute; opacity: 0; pointer-events: none; }
.afocus__spot > span {
  position: absolute; inset: 0; border-radius: 6px;
  background: rgba(18,42,53,.34);
  transition: background .12s var(--ease), box-shadow .12s var(--ease);
}
.afocus__spot:hover > span { background: rgba(18,42,53,.12); }
.afocus__spot input:checked + span {
  background: transparent;
  box-shadow: inset 0 0 0 3px var(--lime), 0 0 0 1px rgba(18,42,53,.35);
}
.afocus__spot input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--teal); }
.afocus p { font-size: 12.5px; max-width: 46ch; }

/* =========================================================================
   Account verification, two-step verification, the onboarding wizard
   and profile-driven recommendations
   ========================================================================= */

/* Amber, for "you haven't finished something" — distinct from the red of a
   failure and the green of a success, because it is neither. */
.flash--warn {
  background: var(--amber-50);
  border-color: var(--amber-100);
  color: var(--amber-800);
}
.flash--warn strong, .flash--warn code { color: inherit; }

.adm__banner--warn { background: var(--amber-50); color: var(--amber-800); border-color: var(--amber-100); }
.adm__banner--warn a { color: inherit; font-weight: var(--fw-strong); text-decoration: underline; text-underline-offset: 3px; }

.bare__flashes {
  max-width: 880px; margin: 0 auto;
  padding: 20px var(--gutter) 0;
  display: grid; gap: 10px;
}
.bare__flashes .flash { border-radius: var(--r-sm); padding: 12px 18px; font-size: 14px; }

/* ---------- One-time code inputs ---------- */
.codein {
  font-family: Consolas, Menlo, monospace;
  font-size: 26px;
  letter-spacing: 12px;
  text-align: center;
  font-weight: var(--fw-strong);
  padding-left: 12px;   /* letter-spacing pads the right only, so nudge it back */
}
.codein::placeholder { letter-spacing: 12px; opacity: .3; }
.codein--sm { font-size: 18px; letter-spacing: 7px; max-width: 190px; }

.linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--teal-600); font-weight: var(--fw-mid);
  text-decoration: underline; text-underline-offset: 3px;
}
/* The auth column is a centring flexbox built for exactly one child. Verify
   adds a second (resend / skip), so it has to stack rather than sit alongside. */
.auth__form-wrap:has(.auth__under) { flex-direction: column; }
.auth__under { width: 100%; max-width: 460px; }
.auth__under .auth__alt { margin-top: 14px; }

/* ---------- Onboarding wizard ---------- */
.wiz {
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) var(--gutter) 64px;
}
.wiz__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.wiz__steps { display: flex; align-items: center; gap: 10px; list-style: none; }
.wiz__steps li span {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px; font-weight: var(--fw-strong);
  background: var(--paper-2); color: var(--muted);
  border: 1.5px solid var(--line);
}
.wiz__steps li.is-now span { background: var(--teal); border-color: var(--teal); color: #fff; }
.wiz__steps li.is-done span { background: var(--lime-50); border-color: #cfe6a8; color: var(--lime-700); }
.wiz__count { font-size: 13px; color: var(--muted); font-weight: var(--fw-mid); }

.wiz__form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(24px, 3.5vw, 38px);
  box-shadow: var(--shadow-md);
}
.wiz__form h1 { font-size: clamp(24px, 3vw, 31px); line-height: 1.15; }
.wiz__sub { color: var(--muted); font-size: 15px; margin-top: 8px; }
.wiz__sub2 { font-size: 15.5px; margin-top: 28px; margin-bottom: 12px; }
.wiz__opt { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.wiz__form .flash { margin-top: 18px; }

.wiz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 10px;
  margin-top: 20px;
}
.wiz-card {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--card);
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.3;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.wiz-card:hover { border-color: var(--teal); background: var(--teal-50); }
.wiz-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz-card__tick {
  display: grid; place-items: center; flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--line); background: var(--paper);
  color: transparent;
}
.wiz-card__tick svg { width: 13px; height: 13px; }
.wiz-card:has(input:checked) { border-color: var(--teal); background: var(--teal-50); box-shadow: 0 0 0 1px var(--teal); }
.wiz-card:has(input:checked) .wiz-card__tick { background: var(--teal); border-color: var(--teal); color: #fff; }
.wiz-card:has(input:focus-visible) { outline: 3px solid var(--lime); outline-offset: 2px; }
/* Fallback where :has() is missing — the server marks the chosen card too. */
.wiz-card.is-on { border-color: var(--teal); background: var(--teal-50); }
.wiz-card.is-on .wiz-card__tick { background: var(--teal); border-color: var(--teal); color: #fff; }

.wiz__field { margin-top: 22px; }
.wiz__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.wiz__actions {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--line);
}
.wiz__foot { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; }
.wiz__foot a { color: var(--teal-600); font-weight: var(--fw-mid); }

/* The way out of the wizard. Deliberately a quiet card below the form rather
   than a link beside "Continue" — an equal-weight escape next to the primary
   action is an invitation to take it. */
.wiz__skip {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px 20px;
  margin-top: 16px; padding: 16px 20px;
  background: var(--paper-2); border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.wiz__skip > div { flex: 1 1 320px; }
.wiz__skip b { display: block; font-size: 14.5px; color: var(--ink); }
.wiz__skip span { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; max-width: 58ch; line-height: 1.5; }
.wiz__skip .btn { flex-shrink: 0; }

.dsh-blank__alt { font-size: 13.5px; color: var(--muted); margin-top: 18px; }
.dsh-blank__alt a { color: var(--teal-600); font-weight: var(--fw-mid); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 620px) {
  .wiz__pair { grid-template-columns: 1fr; }
  .wiz-cards { grid-template-columns: 1fr; }
}

/* ---------- Two-step verification panel ---------- */
.apanel__body { padding: 20px 22px; }
.apanel__body > * + * { margin-top: 16px; }
.apanel__head .amuted { font-size: 13px; margin-top: 4px; }

.pfacts--row { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0 22px; }

.setupsteps { list-style: none; counter-reset: s; display: grid; gap: 20px; }
.setupsteps li { counter-increment: s; padding-left: 40px; position: relative; font-size: 14px; }
.setupsteps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal-50); color: var(--teal-700);
  font-weight: var(--fw-strong); font-size: 13px;
}
.setupsteps b { display: block; color: var(--ink); font-size: 14.5px; }
.setupsteps span { display: block; color: var(--muted); margin-top: 3px; line-height: 1.5; }

.secretkey {
  display: inline-block; margin: 9px 0;
  font-family: Consolas, Menlo, monospace;
  font-size: 15px; letter-spacing: 1px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 14px;
  user-select: all; word-break: break-all;
}

.reccodes {
  list-style: none;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 16px;
}
.reccodes li { font-family: Consolas, Menlo, monospace; font-size: 14.5px; letter-spacing: 1px; text-align: center; }

.devlist { list-style: none; display: grid; gap: 8px; }
.devlist li {
  display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between;
  font-size: 13.5px; padding: 10px 14px;
  background: var(--paper); border-radius: var(--r-sm);
}

.maillog {
  font-family: Consolas, Menlo, monospace;
  font-size: 13px; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 16px; max-height: 460px; overflow: auto;
}
.atable tr.is-open { background: var(--teal-50); }

.inlineform { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.inlineform input[type="password"], .inlineform input[type="text"] { max-width: 190px; }
.aform__actions--wrap { flex-direction: column; align-items: flex-start; gap: 4px; }

/* ---------- Recommendations ---------- */
.recs { margin-top: 30px; }
.recs__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.recs__head h2 { font-size: clamp(20px, 2.4vw, 25px); margin-top: 6px; }
.recs__head p { color: var(--muted); font-size: 14px; margin-top: 5px; }
.recs__edit { font-size: 13.5px; color: var(--teal-600); font-weight: var(--fw-mid); white-space: nowrap; }

.recs__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 20px;
}
.reccard {
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.reccard--top { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), var(--shadow-md); }
.reccard__media { position: relative; aspect-ratio: 16 / 9; background: var(--paper-2); }
.reccard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reccard__media .ph { display: grid; place-items: center; height: 100%; color: var(--teal); }
.reccard__media .ph svg { width: 34px; height: 34px; }
.reccard__flag {
  position: absolute; top: 10px; left: 10px;
  background: var(--lime); color: var(--lime-700);
  font-size: 11px; font-weight: var(--fw-strong);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
}
.reccard__body { padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.reccard__body h3 { font-size: 16px; line-height: 1.25; }
.reccard__why { display: flex; gap: 7px; font-size: 13px; color: var(--teal-700); line-height: 1.45; }
.reccard__why svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.reccard__meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.reccard__meta svg { width: 14px; height: 14px; }
.reccard__body .btn { margin-top: auto; align-self: flex-start; }

/* ---------- "Show me the rest" ----------
   Everything the shortlist left out, folded away under the recommendations.
   Deliberately a list rather than more cards: the six above should stay the
   thing the eye lands on, while the other nine remain one click away. */
.recs__more {
  margin-top: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.recs__more > summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 14px;
  padding: 15px 20px;
  cursor: pointer;
  list-style: none;
}
.recs__more > summary::-webkit-details-marker { display: none; }
.recs__more > summary:hover .recs__more-txt { color: var(--teal-600); }
.recs__more > summary:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-radius: var(--r-md); }
.recs__more-txt { font-weight: var(--fw-mid); font-size: 15px; color: var(--ink); }
.recs__more-sub { grid-column: 1; font-size: 13px; color: var(--muted); }
.recs__more-chev {
  grid-row: 1 / span 2; grid-column: 2;
  width: 20px; height: 20px; color: var(--muted);
  transition: transform .18s ease;
}
.recs__more[open] > summary { border-bottom: 1px solid var(--line); }
.recs__more[open] .recs__more-chev { transform: rotate(180deg); }

.restlist { list-style: none; display: grid; gap: 1px; background: var(--line); }
.restcard {
  display: grid;
  grid-template-columns: 132px 1fr auto auto;
  align-items: center;
  gap: 6px 16px;
  padding: 12px 20px;
  background: var(--card);
}
.restcard:hover { background: var(--paper); }
.restcard__cat {
  font-size: 11.5px; font-weight: var(--fw-mid);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--muted);
  justify-self: start; white-space: nowrap;
}
.restcard__cat--mandatory  { background: var(--teal-50);  color: var(--teal-700); }
.restcard__cat--specialist { background: var(--lime-50);  color: var(--lime-700); }
.restcard__title { font-weight: var(--fw-mid); font-size: 14.5px; color: var(--ink); }
.restcard__meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.restcard__meta svg { width: 14px; height: 14px; }
.restlist__foot { padding: 14px 20px; font-size: 13px; color: var(--muted); background: var(--card); }
.restlist__foot a { color: var(--teal-600); font-weight: var(--fw-mid); }

@media (max-width: 720px) {
  .restcard { grid-template-columns: 1fr auto; }
  .restcard__cat { grid-row: 1; grid-column: 1; }
  .restcard__title { grid-row: 2; grid-column: 1 / -1; }
  .restcard__meta { grid-row: 3; grid-column: 1; }
  .restcard .btn { grid-row: 3; grid-column: 2; }
}

/* =========================================================================
   A/B TESTS
   Everything below only renders inside a variant, so no rule here can change
   the control. Grouped by what it belongs to: the reviewer's switcher bar,
   the catalogue's table and advert layouts, the learner home's alternative
   arrangement, and the admin results table.
   ========================================================================= */

/* ---------- Variant switcher (partials/ab_bar.php) ----------
   Admins and previewers only. Deliberately plain — it is scaffolding around
   the page being judged, not part of it. */
.abbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-bottom: 22px; padding: 10px 14px;
  background: var(--ink); color: #dceded;
  border-radius: var(--r-sm); font-size: 12.5px;
}
.abbar__tag {
  font-family: var(--font-display); font-weight: var(--fw-strong);
  letter-spacing: .12em; font-size: 11px;
  background: var(--lime); color: var(--lime-700);
  padding: 3px 9px; border-radius: var(--r-pill);
}
.abbar__name { font-weight: var(--fw-mid); color: #fff; }
.abbar__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.abbar__opt {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 5px 11px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, .22); color: #cfe6e6;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.abbar__opt:hover { border-color: var(--lime); color: #fff; }
.abbar__opt b { font-family: var(--font-display); font-size: 12px; }
.abbar__opt span { font-size: 12px; }
.abbar__opt.is-on { background: var(--teal); border-color: var(--teal); color: #fff; }
.abbar__state { color: #9fc4c4; }
.abbar__state a { color: #fff; text-decoration: underline; }
.abbar__results {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  color: #fff; font-weight: var(--fw-mid);
}
.abbar__results svg { width: 14px; height: 14px; }

/* ---------- Catalogue variant B: table ----------
   The row is the unit. A thumbnail keeps courses recognisable at a glance,
   and the columns that matter least collapse first as the screen narrows —
   their content is repeated inside the name cell so nothing is ever lost. */
.crs-table-wrap {
  overflow-x: auto; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.crs-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.crs-table th, .crs-table td { text-align: left; }
.crs-table thead th {
  font-size: 11.5px; font-weight: var(--fw-mid); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
  padding: 13px 18px; border-bottom: 1px solid var(--line);
  background: var(--paper); white-space: nowrap;
}
.crs-table tbody th, .crs-table tbody td {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  vertical-align: middle; font-weight: 400;
}
.crs-table tbody tr:last-child th, .crs-table tbody tr:last-child td { border-bottom: 0; }
.crs-table tbody tr:hover { background: var(--paper); }

.crs-row__name { display: flex; align-items: center; gap: 13px; min-width: 260px; }
.crs-row__thumb {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 10px;
  overflow: hidden; background: var(--paper-2);
}
.crs-row__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.crs-row__name > span { display: flex; flex-direction: column; gap: 3px; }
.crs-row__name a {
  font-weight: var(--fw-mid); color: var(--ink); font-size: 15px; line-height: 1.25;
}
.crs-row__name a:hover { color: var(--teal-700); }
.crs-row__blurb { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
/* The columns hidden on small screens, folded back in under the title. */
.crs-row__inline { display: none; font-size: 12px; color: var(--muted); }
.crs-row__dim { font-size: 13px; color: var(--muted); white-space: nowrap; }
.crs-row__cat {
  display: inline-block; font-size: 12px; font-weight: var(--fw-mid);
  padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--paper-2); color: var(--muted); white-space: nowrap;
}
.crs-row__cat--mandatory  { background: var(--teal-50);  color: var(--teal-700); }
.crs-row__cat--specialist { background: var(--amber-50); color: var(--amber-700); }
.crs-row__cat--skills     { background: var(--lime-50);  color: var(--lime-700); }
.crs-row__state { min-width: 150px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.crs-row__state .crs-bar { width: 100%; min-width: 110px; }
.crs-bar--sm { height: 4px; }
.crs-row__go { text-align: right; white-space: nowrap; }

@media (max-width: 900px) { .crs-table__hide-md { display: none; } }
@media (max-width: 720px) {
  .crs-table__hide-sm { display: none; }
  .crs-row__inline { display: block; }
  .crs-row__blurb  { display: none; }
  .crs-table thead th, .crs-table tbody th, .crs-table tbody td { padding: 12px 14px; }
}

/* ---------- Catalogue variant C: adverts ----------
   Promoted slots have to be obviously promoted. The lime edge and the
   "Promoted" tag are the point: an advert that reads as an ordinary card is a
   trick, and a trick is not a test result worth having. */
.promo-banner {
  display: grid; grid-template-columns: 1fr; gap: 0;
  position: relative; overflow: hidden;
  background: var(--ink); color: #e6f3f3;
  border-radius: var(--r-md); margin-bottom: 24px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.promo-banner:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.promo-banner__media { background: var(--ink-900); }
.promo-banner__media img {
  width: 100%; height: 100%; min-height: 180px; object-fit: cover; display: block;
  opacity: .85;
}
.promo-banner__body {
  display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  padding: clamp(20px, 3vw, 30px);
}
.promo-banner__flag {
  font-size: 11px; font-weight: var(--fw-strong); letter-spacing: .08em;
  text-transform: uppercase; color: var(--lime);
}
.promo-banner strong {
  font-family: var(--font-display); font-weight: var(--fw-strong);
  font-size: clamp(20px, 2.4vw, 27px); line-height: 1.15; color: #fff;
}
.promo-banner__why, .promo-banner__meta {
  display: flex; align-items: center; gap: 7px; font-size: 13.5px; line-height: 1.45;
}
.promo-banner__why { color: var(--lime); }
.promo-banner__meta { color: #a8c8c8; font-size: 12.5px; }
.promo-banner__why svg, .promo-banner__meta svg { width: 15px; height: 15px; flex-shrink: 0; }
.promo-banner .btn { margin-top: 6px; }
.promo-banner__tag {
  position: absolute; top: 12px; right: 14px;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: #8fb4b4; border: 1px solid rgba(255, 255, 255, .25);
  padding: 3px 9px; border-radius: var(--r-pill);
}
@media (min-width: 760px) {
  .promo-banner { grid-template-columns: minmax(200px, 34%) 1fr; }
}

/* position:relative is set here rather than on .crs-card so the control's
   cards are untouched by this file. */
.crs-card--promo {
  position: relative;
  border-color: var(--lime); background: linear-gradient(180deg, var(--lime-50), var(--card) 42%);
}
.crs-card--promo:hover { border-color: var(--lime-600); }
.crs-card__promo {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 10.5px; font-weight: var(--fw-strong); letter-spacing: .08em;
  text-transform: uppercase; color: var(--lime-700); background: rgba(255, 255, 255, .92);
  padding: 4px 9px; border-radius: var(--r-pill);
}
.crs-card__why {
  display: flex; gap: 7px; font-size: 13px; color: var(--teal-700); line-height: 1.45;
}
.crs-card__why svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }

/* ---------- Learner home variant B: courses first ----------
   One wide banner instead of a three-card row, and the ring, the counts and
   the week folded into a single strip — which is what buys the course list
   its screenful. */
.dsh-b { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }

.dsh-hero {
  display: grid; grid-template-columns: 1fr; align-items: center; gap: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); border-bottom-left-radius: 52px; overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
a.dsh-hero:hover { border-color: var(--teal); box-shadow: var(--shadow-md); }
.dsh-hero__img { background: var(--paper-2); align-self: stretch; }
.dsh-hero__img img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; display: block; }
.dsh-hero__img .ph { display: grid; place-items: center; height: 100%; min-height: 150px; color: var(--teal); }
.dsh-hero__img .ph svg { width: 38px; height: 38px; }
.dsh-hero__body {
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(18px, 2.4vw, 26px);
}
.dsh-hero__eyebrow {
  font-size: 11.5px; font-weight: var(--fw-mid); letter-spacing: .1em;
  text-transform: uppercase; color: var(--teal-600);
}
.dsh-hero__title {
  font-family: var(--font-display); font-weight: var(--fw-strong);
  font-size: clamp(20px, 2.3vw, 27px); line-height: 1.15; color: var(--ink);
}
.dsh-hero__next { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.dsh-hero__next svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--teal); }
.dsh-hero__bar { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.dsh-hero__bar .crs-bar { display: block; }
.dsh-hero__meta { font-size: 12.5px; color: var(--muted); }
.dsh-hero__go { justify-self: start; margin: 0 clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 26px); }
.dsh-hero--assessment { border-color: var(--amber-100); }
@media (min-width: 780px) {
  .dsh-hero { grid-template-columns: minmax(160px, 26%) 1fr auto; }
  .dsh-hero__go { margin: 0 clamp(20px, 2.6vw, 30px) 0 0; }
}

.dsh-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 14px 20px;
}
.dsh-strip__ring, .dsh-strip__week { display: flex; align-items: center; gap: 12px; }
.dsh-strip__week { margin-left: auto; }
.dsh-ring--sm { width: 58px; height: 58px; margin-bottom: 0; flex-shrink: 0; }
.dsh-ring--sm::after { inset: 6px; }
.dsh-ring--sm b { font-size: 16px; }
.dsh-ring--sm i { font-size: 10px; }
.dsh-strip__label { display: flex; flex-direction: column; gap: 2px; }
.dsh-strip__label b { font-size: 13.5px; font-weight: var(--fw-mid); color: var(--ink); }
.dsh-strip__label span { font-size: 12.5px; color: var(--muted); }
.dsh-strip__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.dsh-strip__fact {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-size: 12.5px; color: var(--muted);
  background: var(--paper-2); border-radius: var(--r-pill); padding: 5px 12px;
}
.dsh-strip__fact b { font-family: var(--font-display); font-size: 15px; color: var(--ink); }
.dsh-strip__fact--assessment { background: var(--amber-50); color: var(--amber-700); }
.dsh-strip__fact--progress   { background: var(--teal-50);  color: var(--teal-700); }
.dsh-strip__fact--passed     { background: var(--lime-50);  color: var(--lime-700); }
.dsh-strip__week .dsh-week__bars { width: 128px; margin: 0; min-height: 44px; }
@media (max-width: 720px) {
  .dsh-strip__week { margin-left: 0; }
}

/* ---------- Learner home variant C: promoted block ---------- */
.dpromo { margin-bottom: 26px; }
.dpromo__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px 20px; margin-bottom: 14px;
}
.dpromo__head h2 { font-size: 20px; margin-top: 8px; }
.dpromo__all { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; color: var(--teal-700); font-weight: var(--fw-mid); }
.dpromo__all svg { width: 15px; height: 15px; }
.dpromo__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.dpromo__card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--lime); border-radius: var(--r-md);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.dpromo__card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* flex:none + min-height:0 so the ratio decides the height. As a flex item the
   media otherwise takes its automatic minimum from the photograph's own
   dimensions, and three courses with three differently-proportioned photos come
   out three different heights. */
.dpromo__media {
  position: relative; aspect-ratio: 16 / 9; background: var(--paper-2);
  flex: none; min-height: 0; overflow: hidden;
}
.dpromo__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dpromo__media .ph { display: grid; place-items: center; height: 100%; color: var(--teal); }
.dpromo__media .ph svg { width: 32px; height: 32px; }
.dpromo__flag {
  position: absolute; top: 10px; left: 10px;
  background: var(--lime); color: var(--lime-700);
  font-size: 10.5px; font-weight: var(--fw-strong);
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}
.dpromo__body { display: flex; flex-direction: column; gap: 7px; padding: 14px 16px 16px; flex: 1; }
.dpromo__body strong { font-family: var(--font-display); font-weight: var(--fw-strong); font-size: 16px; line-height: 1.25; color: var(--ink); }
.dpromo__why { display: flex; gap: 7px; font-size: 13px; color: var(--teal-700); line-height: 1.45; }
.dpromo__why svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.dpromo__meta { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.dpromo__meta svg { width: 14px; height: 14px; }
.dpromo__card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- Admin results (admin_ab.php) ----------
   Eight columns is more than .atable was built for, so this variant tightens
   the padding and caps the name column. Without the cap the variant notes set
   the table's width and push the two columns you actually read — the rate and
   the confidence — off the right-hand edge. */
.abtable { font-size: 13.5px; }
.abtable thead th { padding: 11px 12px; letter-spacing: .06em; }
.abtable tbody th, .abtable tbody td { padding: 13px 12px; }
.abtable tbody th { max-width: 280px; }
/* .atable styles every th as a small-caps column heading; a row header is a
   name, not a heading, so it opts back out. */
.atable tbody th {
  text-transform: none; letter-spacing: normal; background: transparent;
  font-size: 14px; color: var(--text); font-weight: 400;
}
.atable tbody th b { font-weight: var(--fw-strong); color: var(--ink); }
.atable th .amuted { display: block; margin-top: 3px; line-height: 1.4; }
.rtabs__spacer { flex: 1; }
.rtab--alt { font-size: 12.5px; }
.abstate {
  font-size: 11.5px; font-weight: var(--fw-mid); letter-spacing: .04em;
  padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap;
}
.abstate--live { background: var(--lime-50);  color: var(--lime-700); }
.abstate--off  { background: var(--paper-2);  color: var(--muted); }
.abstate--done { background: var(--teal-50);  color: var(--teal-700); }
.ablift { font-weight: var(--fw-strong); font-size: 14px; color: var(--muted); }
.ablift.is-up   { color: var(--lime-700); }
.ablift.is-down { color: var(--amber-800); }
.abctl {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding-top: 14px; border-top: 1px solid var(--line);
}
.abctl label { font-size: 13px; font-weight: var(--fw-mid); color: var(--ink); }
.abctl select {
  flex: 1; min-width: 240px; font: inherit; font-size: 13.5px; color: var(--text);
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card);
}
.abctl .amuted { flex: 1; min-width: 220px; }