/* Manrope, self-hosted. The variable font covers 200-800 in one file per
   subset, so every weight the UI uses costs a single request. Serving it from
   this origin is also what makes it render at all: the Content-Security-Policy
   in app/bootstrap.php allows no third-party font or style origin, so the
   Google Fonts stylesheet this replaced was being blocked in the browser and
   the whole product silently fell back to Segoe UI. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand. The blue and sky values are sampled from the official lock-up in
     public/assets/brand; the navy scale comes from DESIGN.md, which the logo
     itself does not contain. Orange matches the high-resolution artwork. */
  --brand: #034B98;
  --brand-dark: #023D7D;
  --brand-strong: #02376F;
  --brand-mid: #1668BF;
  --sky: #79A4D3;
  --brand-soft: #DCE9F7;
  --brand-tint: #F1F6FC;
  --brand-line: #A7C6E7;
  --navy: #19416C;
  --navy-2: #245182;
  --navy-deep: #0B223A;
  --accent: #EC7425;
  --accent-dark: #D75F13;
  --accent-soft: #FFF5EF;
  --accent-text: #A8480A;   /* 5.6:1 on white; --accent-dark is only 3.9:1 */

  /* Neutrals */
  --ink: #0B1520;
  --ink-soft: #475569;
  --ink-faint: #5C6B80;   /* 5.2:1 on white; #64748B measured 4.43 and failed at 13px */
  --surface: #ffffff;
  --surface-soft: #F5F7FA;
  --surface-muted: #EEF2F6;
  --border: #DDE4EC;
  --border-strong: #CBD6E1;

  /* Status */
  --green: #18794E;
  --amber: #A15C00;
  --danger: #B42318;
  --info: #0758AF;

  --shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
  --shadow-md: 0 8px 24px rgb(15 23 42 / 8%);
  --shadow-lg: 0 24px 60px rgb(11 18 58 / 18%);
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --topbar-h: 72px;
  --sidebar-w: 252px;
  --container: 1240px;

  /* Spacing scale. Every margin, padding and gap in this file resolves to one
     of these steps; a value outside the scale is a mistake, not a preference. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px;
  --s-11: 80px; --s-12: 96px;

  /* Reading widths, per DESIGN.md §64. Named so a view asks for the measure it
     needs rather than hardcoding a pixel count that later drifts. */
  --measure-prose: 820px;
  --measure-form: 940px;

  color-scheme: light;
}

[data-theme="dark"] {
  --ink: #F4F7FA;
  --ink-soft: #B7BDC9;
  --ink-faint: #8D95A4;
  --surface: #151C23;
  --surface-soft: #0E141A;
  --surface-muted: #212636;
  --border: #2C3244;
  --border-strong: #414960;
  --navy: #0B223A;
  --navy-2: #152331;
  --navy-deep: #071524;
  --brand-soft: #16304C;
  --brand-tint: #121E2A;
  --brand-line: #2F4F71;
  /* Brand blue has to invert for text: on a dark surface the readable brand
     colour is a light tint, not the navy that works on white. */
  --brand-dark: #8FBCEC;
  --brand-strong: #A9CDF3;
  --accent-text: #F0A46B;
  --green: #4ED08D;
  --amber: #E9A23B;
  --danger: #F5837B;
  --info: #6FADF0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 24px); }
:root { --font-ui: "Manrope", Aptos, "Segoe UI", Roboto, Arial, sans-serif; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--surface-soft); font: 400 15px/1.6 var(--font-ui); letter-spacing: -0.005em; }
body, button, input, select, textarea { font-family: var(--font-ui); }
h1, h2, h3, h4, strong, .page-title { font-family: var(--font-ui); letter-spacing: -0.018em; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { font-size: clamp(2.1rem, 3.6vw, 3.5rem); line-height: 1.07; font-weight: 800; }
h2 { font-size: clamp(1.65rem, 2.4vw, 2.25rem); line-height: 1.15; font-weight: 800; }
h3 { font-size: 1.08rem; line-height: 1.35; }
p { color: var(--ink-soft); }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, a, summary, select { cursor: pointer; }
button { color: inherit; }
svg.icon { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
svg.icon-sm { width: 16px; height: 16px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid rgb(3 75 152 / 32%); outline-offset: 2px; }
::selection { color: #fff; background: var(--brand); }

.container { width: min(var(--container), calc(100% - 48px)); margin-inline: auto; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* Small spacing utilities, values taken straight from the --s-N scale above —
   for the handful of one-off layout tweaks that used to be inline style=""
   attributes. CSP's style-src no longer allows those (see bootstrap.php). */
.u-pad-3 { padding: var(--s-3); }
.u-pad-4 { padding: var(--s-4); }
.u-pad-5 { padding: var(--s-5); }
.u-pad-6 { padding: var(--s-6); }
.u-pt-4 { padding-top: var(--s-4); }
.u-mt-2 { margin-top: var(--s-2); }
.u-mt-3 { margin-top: var(--s-3); }
.u-mt-4 { margin-top: var(--s-4); }
.u-mb-4 { margin-bottom: var(--s-4); }
.u-mb-6 { margin-bottom: var(--s-6); }
.u-border-top { border-top: 1px solid var(--border); }
.u-self-end { align-self: end; }
.u-items-start { align-items: flex-start; }
.u-max-w-narrow { max-width: 520px; }
.u-checkbox-lg { width: 18px; height: 18px; }
.u-img-bordered { border: 1px solid var(--border); border-radius: var(--radius-sm); }
.u-flex-row-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-5); }
.u-pad-3-no-bottom { padding: var(--s-3) var(--s-3) 0; }
.u-list-reset { margin: 0; padding: 0 var(--s-3) var(--s-3); }
.form-inline { display: inline; }
label.todo-row { cursor: pointer; }
.skip-link { position: fixed; z-index: 1000; left: 18px; top: -80px; padding: 12px 16px; color: #fff; background: var(--navy); border-radius: var(--radius-sm); }
.skip-link:focus { top: 12px; }
.muted { color: var(--ink-soft) !important; }
.small { font-size: 13px !important; }
.section { margin-top: 28px; }
.stack { display: grid; gap: 18px; }
/* A form's direct children (heading, fields, submit row) with no margin of
   their own between them — several views assumed this existed and relied on
   it for the only spacing between fields, so its absence read as elements
   touching, not just tighter than intended. */
.stack-lg { display: grid; gap: var(--s-6); }
.grid { display: grid; gap: 20px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions, .page-actions, .center-actions, .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: var(--s-4); }
.center-actions { justify-content: center; margin-top: 28px; }
.text-link, .link-strong { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-dark); font-weight: 700; }

.btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 17px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--ink);
  background: var(--surface);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover { border-color: var(--ink); box-shadow: var(--shadow-sm); }
.btn.primary { color: #fff; background: var(--brand); border-color: var(--brand); }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
/* --brand-dark is a light tint in dark mode, so the primary button needs its own
   hover fill rather than inheriting a text colour as a background. */
[data-theme="dark"] .btn.primary:hover { color: #fff; background: var(--brand-mid); border-color: var(--brand-mid); }
.btn.light { color: var(--navy); background: #fff; border-color: #fff; }
.btn.light:hover { color: #fff; background: transparent; }
.btn.outline-light { color: #fff; background: transparent; border-color: rgb(255 255 255 / 55%); box-shadow: none; }
.btn.outline-light:hover { color: var(--navy); background: #fff; border-color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
.btn.sm { min-height: 36px; padding: 7px 13px; font-size: 13px; }
.btn.danger { color: var(--danger); }
.icon-btn {
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  background: var(--surface);
  transition: background-color .18s ease, border-color .18s ease;
}
.icon-btn:hover { background: var(--surface-muted); border-color: var(--border-strong); }
.icon-btn.plain { border-color: transparent; background: transparent; }

input, select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 15px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
textarea { min-height: 126px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgb(3 75 152 / 16%); }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input[type="checkbox"], input[type="radio"] { width: 18px; min-height: 18px; accent-color: var(--brand); }
input[type="file"] { padding: 8px; }
.field { display: grid; align-content: start; gap: 7px; min-width: 0; }
.field label { font-weight: 700; font-size: 13px; color: var(--ink); }
.field small { color: var(--ink-faint); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form-grid .wide { grid-column: 1 / -1; }
.password-field { position: relative; }
.password-field .icon-btn { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; }
.switch { width: 38px; height: 22px; margin-left: auto; padding: 3px; border-radius: 99px; background: #c8ccd3; }
.switch::after { content: ""; display: block; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .18s ease; }
[data-theme="dark"] .switch { background: var(--brand); }
[data-theme="dark"] .switch::after { transform: translateX(16px); }

/* Public navigation */
.public-body { background: #fff; }
.public-nav { position: sticky; z-index: 100; top: 0; height: var(--topbar-h); display: flex; align-items: center; background: rgb(255 255 255 / 96%); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); }
.public-nav-container { width: min(1360px, calc(100% - 48px)); height: 100%; margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* The compact lock-up is 1330x207, so height drives width: 26px renders the
   wordmark ~167px wide, which is the scale the reference chrome uses. It was
   40px (257px wide) and read as a banner rather than as chrome. */
.brand-nav-logo { width: auto; height: 42px; max-width: 100%; object-fit: contain; object-position: left center; }
.brand-nav-mark { display: none; width: auto; height: 32px; object-fit: contain; }
/* Menu button. A real 44px target with three bars that fold into a cross when
   the sheet opens, so the control reports its own state instead of relying on
   the panel appearing somewhere else on screen. */
.nav-toggle {
  width: 44px;
  height: 44px;
  display: none;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  transition: background-color .18s ease;
}
.nav-toggle:hover { background: var(--surface-muted); }
.nav-toggle-bars { position: relative; display: block; width: 26px; height: 12px; }
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  transition: top .2s ease, transform .2s ease, background-color .18s ease;
}
/* Two bars, two brand colours — the same navy/orange pairing the logo mark
   uses — rather than a single-colour three-line icon boxed in a border. */
.nav-toggle-bars span:nth-child(1) { top: 2px; background: var(--brand); }
.nav-toggle-bars span:nth-child(2) { top: 8px; background: var(--accent); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { top: 5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { top: 5px; transform: rotate(-45deg); }

/* Dimmer behind either mobile panel. Kept in the DOM and faded so it can be
   tapped to dismiss without a layout jump. */
.nav-scrim {
  position: fixed;
  z-index: 104;
  inset: var(--topbar-h) 0 0;
  display: none;
  background: rgb(8 12 28 / 48%);
  opacity: 0;
  transition: opacity .22s ease;
}
body.public-nav-open .nav-scrim { display: block; opacity: 1; }

.nav-sheet-label { display: none; }
.public-nav-toggle { display: none; margin-left: auto; }
.nav-links { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.public-primary-links { display: flex; align-items: center; gap: 5px; }
.public-primary-links > a { position: relative; padding: 12px 13px; border-radius: var(--radius-xs); color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.public-primary-links > a:hover { color: var(--ink); background: var(--surface-soft); }
.public-primary-links > a.active::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 5px; height: 2px; background: var(--accent); }
.public-nav-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.public-search-link { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--ink-soft); border-right: 1px solid var(--border); font-weight: 600; }
.public-search-link:hover { color: var(--brand-dark); }
.public-nav-search { display: none; }
.public-avatar, .avatar { width: 38px; height: 38px; display: inline-grid; place-items: center; color: #fff; background: var(--navy); border-radius: 50%; font: 700 13px/1 var(--font-ui); }

/* Footer */
.site-footer { color: #C7D3DF; background: var(--navy-deep); }
.footer-cta-row { color: #fff; background: var(--brand); }
.footer-cta-row .container { min-height: 230px; display: flex; align-items: center; justify-content: space-between; gap: 48px; padding-block: 50px; }
.footer-cta-row .container > div { max-width: 720px; display: grid; gap: 10px; }
.footer-eyebrow { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; opacity: .8; }
.footer-cta-row strong { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1.1; }
.footer-cta-row span:last-child { max-width: 650px; font-size: 16px; opacity: .88; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 42px; padding-block: 64px 26px; }
.footer-brand { max-width: 330px; }
.footer-brand-link { display: inline-flex; }
.brand-footer-logo { width: auto; height: 50px; max-width: 100%; object-fit: contain; object-position: left center; }
.footer-brand p { margin: 20px 0; color: #aeb5c4; }
.footer-contact-link { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-weight: 700; }
.footer-links { display: grid; align-content: start; gap: 10px; }
.footer-links strong { margin-bottom: 5px; color: #fff; font-size: 14px; }
.footer-links a { color: #aeb5c4; font-size: 14px; }
.footer-links a:hover { color: #fff; }
.footer-bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding-top: 24px; border-top: 1px solid rgb(255 255 255 / 13%); color: #929baa; font-size: 13px; }
.footer-bottom span:last-child { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-bottom a:hover { color: #fff; }

/* Public home */
.market-hero { position: relative; min-height: 650px; overflow: hidden; color: #fff; background: var(--navy); }
.market-hero-media { position: absolute; inset: 0; }
.market-hero-media::after { content: ""; position: absolute; inset: 0; background: rgb(10 18 36 / 67%); }
.market-hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: center 36%; }
.market-hero-inner { position: relative; z-index: 1; min-height: 650px; display: flex; align-items: center; padding-block: 76px; }
.market-hero-copy { max-width: 770px; }
.market-hero h1 { max-width: 760px; margin: 20px 0 24px; color: #fff; }
.market-hero p { max-width: 670px; color: rgb(255 255 255 / 87%); font-size: 19px; line-height: 1.6; }
.market-kicker { display: inline-flex; align-items: center; color: var(--brand-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .13em; }
.market-kicker.light { color: #fff; opacity: .82; }
.market-search { width: min(650px, 100%); height: 62px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 34px 0 18px; padding: 7px 7px 7px 17px; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.market-search > svg { color: var(--ink-soft); }
.market-search input { min-height: 46px; padding: 0; color: var(--ink); background: transparent; border: 0; box-shadow: none; }
.market-search button { min-height: 48px; padding: 0 22px; color: #fff; background: var(--brand); border: 0; border-radius: var(--radius-sm); font-weight: 800; }
.market-search button:hover { background: var(--brand-dark); }
.market-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.market-strip { background: #fff; border-bottom: 1px solid var(--border); }
.market-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.market-strip-grid > div { min-height: 118px; display: flex; align-items: center; gap: 15px; padding: 24px 22px; border-right: 1px solid var(--border); }
.market-strip-grid > div:first-child { border-left: 1px solid var(--border); }
.market-strip-grid svg { color: var(--brand); }
.market-strip-grid span { display: grid; gap: 3px; }
.market-strip-grid strong { color: var(--ink); font-size: 14px; }
.market-strip-grid small { color: var(--ink-faint); line-height: 1.35; }
.market-section { padding: 92px 0; background: #fff; }
.market-section:nth-of-type(even) { background: var(--surface-soft); }
.market-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 38px; }
.market-section-heading > div { max-width: 760px; }
.market-section-heading h2 { margin: 10px 0 12px; color: var(--ink); }
.market-section-heading p { max-width: 680px; margin-bottom: 0; font-size: 16px; }
.market-section-heading > a { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-dark); font-weight: 700; white-space: nowrap; }
.market-section-heading.centered { justify-content: center; text-align: center; }
.market-section-heading.centered > div { max-width: 780px; }
.category-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.category-card { min-height: 150px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 24px; background: #fff; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background .18s ease, color .18s ease; }
.category-card:hover { color: #fff; background: var(--navy); }
.category-index { color: var(--accent-text); font: 700 13px/1 var(--font-ui); }
.category-card > span:nth-child(2) { display: grid; gap: 7px; min-width: 0; }
.category-card strong { font-size: 16px; overflow-wrap: anywhere; }
.category-card small { color: var(--ink-faint); }
.category-card:hover small { color: #bdc5d4; }
.market-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.market-course-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: border-color .18s ease, box-shadow .18s ease; }
.market-course-card:hover { border-color: var(--brand-line); box-shadow: var(--shadow-md); }
.market-course-art { position: relative; min-height: 188px; display: flex; align-items: flex-end; justify-content: space-between; padding: 22px; overflow: hidden; color: #fff; background: var(--navy); }
.market-course-art::after { content: ""; position: absolute; width: 140px; height: 140px; right: -48px; top: -42px; border: 25px solid rgb(255 255 255 / 12%); border-radius: 50%; }
.market-course-code { position: relative; z-index: 1; font: 700 13px/1 var(--font-ui); }
.market-course-mark { position: relative; z-index: 1; width: 52px; height: 52px; display: grid; place-items: center; color: var(--navy); background: #fff; border-radius: var(--radius-sm); }
/* Course art tones. One hue, six lightness steps: cards stay tellable
   apart without a second colour family entering the system. */
.theme-1 { background: #112A45; }
.theme-2 { background: #163555; }
.theme-3 { background: #1C3F63; }
.theme-4 { background: #224972; }
.theme-5 { background: #285380; }
.theme-6 { background: #2F5D8E; }
.market-course-body { min-height: 250px; display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 22px; }
.market-course-category { display: inline-flex; color: var(--brand-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.market-course-body h3 { margin: 9px 0; font-size: 18px; }
.market-course-body p { display: -webkit-box; margin-bottom: 18px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.market-course-body .btn { margin-top: auto; }
.course-facts { display: flex; flex-wrap: wrap; gap: 9px 15px; margin-bottom: 18px; color: #606671; font-size: 13px; }
.course-facts span { display: inline-flex; align-items: center; gap: 5px; }
.market-course-status, .availability-note { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 12px; font-weight: 700; }
.market-empty { min-height: 240px; display: grid; place-items: center; align-content: center; gap: 8px; padding: 42px; text-align: center; background: var(--surface-soft); border: 1px dashed #c9cdd5; border-radius: var(--radius-md); }
.career-band { padding: 96px 0; color: #fff; background: var(--navy); }
.career-band-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: start; gap: 90px; }
.career-band h2 { margin: 14px 0 20px; color: #fff; }
.career-band p { color: #bec6d5; font-size: 17px; }
.career-band-steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid rgb(255 255 255 / 18%); }
.career-band-steps li { min-height: 105px; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 18px; padding: 20px 0; border-bottom: 1px solid rgb(255 255 255 / 18%); }
.career-band-steps b { color: #ef6a6f; }
.career-band-steps span { display: grid; gap: 5px; }
.career-band-steps strong { font-size: 17px; }
.career-band-steps small { color: #aeb8c9; }
.solution-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.solution-grid article { min-height: 310px; display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border-right: 1px solid var(--border); }
.solution-grid article:last-child { border-right: 0; }
.solution-grid article > span { color: var(--brand); font-weight: 800; }
.solution-grid h3 { margin: 56px 0 12px; font-size: 20px; }
.solution-grid p { margin-bottom: 24px; }
.solution-grid a { display: inline-flex; align-items: center; gap: 5px; margin-top: auto; color: var(--brand-dark); font-weight: 700; font-size: 13px; }
.learner-workspace { padding: 100px 0; background: var(--surface-soft); }
.learner-workspace-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 90px; }
.learner-workspace h2 { margin: 14px 0 18px; }
.learner-workspace p { font-size: 17px; }
.workspace-feature-list { display: grid; gap: 10px; margin: 26px 0 30px; }
.workspace-feature-list span { display: flex; align-items: center; gap: 9px; color: #303641; font-weight: 600; }
.workspace-feature-list svg { color: var(--green); }
.workspace-preview { padding: 26px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.workspace-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.workspace-preview-head span { color: var(--ink-faint); font-size: 13px; }
.workspace-progress { height: 7px; margin: 18px 0 8px; overflow: hidden; background: var(--border); border-radius: 99px; }
.workspace-progress i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.workspace-preview-row { min-height: 86px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); }
.workspace-preview-row:last-child { border-bottom: 0; }
.workspace-preview-row > span { width: 42px; height: 42px; display: grid; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: var(--radius-sm); }
.workspace-preview-row > div { display: grid; gap: 3px; }
.workspace-preview-row small { color: var(--ink-faint); }
.workspace-preview-row b { color: var(--brand-dark); font-size: 13px; }
.home-faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 90px; }
.home-faq h2 { margin: 14px 0 18px; }
.faq-list { border-top: 1px solid var(--border); }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-family: var(--font-ui); font-weight: 700; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list details[open] summary svg { transform: rotate(180deg); }
.faq-list p { padding: 0 36px 22px 0; }
.certificate-callout { padding: 72px 0; color: #fff; background: var(--brand); }
.certificate-callout-inner { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 28px; }
.certificate-seal { width: 68px; height: 68px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 40%); border-radius: 50%; }
.certificate-callout h2 { margin: 7px 0; color: #fff; font-size: clamp(1.65rem, 2.5vw, 2.35rem); }
.certificate-callout p { margin: 0; color: rgb(255 255 255 / 83%); }

/* Public catalogue, course and content pages */
.catalogue-hero, .info-hero, .policy-hero, .contact-hero, .verify-hero, .course-detail-hero { padding: 76px 0 58px; background: var(--surface-soft); border-bottom: 1px solid var(--border); }
.catalogue-hero .container, .info-hero .container, .policy-hero .container, .contact-hero .container, .verify-hero .container { max-width: var(--container); }
.catalogue-hero h1, .info-hero h1, .policy-hero h1, .contact-hero h1, .verify-hero h1 { max-width: 900px; margin: 14px 0 16px; font-size: clamp(2.45rem, 5vw, 4.4rem); }
.catalogue-hero p, .info-hero p, .policy-hero p, .contact-hero p, .verify-hero p { max-width: 760px; font-size: 18px; }
.catalogue-search { width: min(850px, 100%); min-height: 66px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 30px; padding: 8px 8px 8px 18px; background: #fff; border: 1px solid #d5d9e0; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.catalogue-search input { border: 0; box-shadow: none; }
.catalogue-category-bar { position: sticky; z-index: 20; top: var(--topbar-h); background: #fff; border-bottom: 1px solid var(--border); }
.category-pills { display: flex; gap: 8px; overflow-x: auto; padding-block: 16px; scrollbar-width: thin; }
.category-pills a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 99px; font-size: 13px; font-weight: 700; }
.category-pills a.active { color: #fff; background: var(--navy); border-color: var(--navy); }
.category-pills span { opacity: .7; }
.catalogue-results-head { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 26px; }
.catalogue-results-head h2 { margin: 0 0 5px; font-size: 28px; }
.catalogue-results-head p { margin: 0; }
.catalogue-list { display: grid; gap: 14px; }
.catalogue-row { min-height: 190px; display: grid; grid-template-columns: 210px 1fr auto; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.catalogue-row-art { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; color: #fff; background: var(--navy); }
.catalogue-row-art svg { width: 48px; height: 48px; opacity: .9; }
.catalogue-row-main { align-self: center; min-width: 0; padding: 24px 28px; }
.catalogue-row-main h3 { margin: 7px 0 8px; font-size: 19px; }
.catalogue-row-main p { margin-bottom: 13px; }
.catalogue-row-action { min-width: 150px; display: grid; align-content: center; justify-items: end; gap: 12px; padding: 24px; border-left: 1px solid var(--border); }
.catalogue-help { padding: 62px 0; color: #fff; background: var(--navy); }
.catalogue-help-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.catalogue-help h2 { margin-bottom: 8px; color: #fff; }
.catalogue-help p { max-width: 760px; margin: 0; color: #bdc6d5; }
.course-detail-hero { color: #fff; background: var(--navy); }
.course-detail-hero h1 { max-width: 900px; margin: 16px 0; color: #fff; }
.course-detail-hero p { max-width: 760px; color: #c3ccda; font-size: 18px; }
.course-detail-layout, .course-content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 30px; }
.course-detail-main, .course-detail-aside { min-width: 0; }
.course-detail-card, .course-overview-card, .course-register-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.course-detail-card, .course-overview-card { padding: 28px; }
.course-register-card { position: sticky; top: calc(var(--topbar-h) + 24px); padding: 26px; box-shadow: var(--shadow-md); }
.course-profile-grid, .course-module-list, .overview-facts { display: grid; gap: 14px; }
.course-profile, .course-module, .overview-facts > div { padding: 18px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.course-module { display: grid; grid-template-columns: 42px 1fr auto; gap: 15px; align-items: start; }

.info-section, .policy-section, .contact-section, .verify-section { padding: 78px 0; background: #fff; }
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.info-card { min-height: 270px; padding: 30px; border-right: 1px solid var(--border); }
.info-card:last-child { border-right: 0; }
.info-card-icon { width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 52px; color: var(--brand-dark); background: var(--brand-soft); border-radius: var(--radius-sm); }
.info-card h2, .info-card h3 { font-size: 19px; }
.info-cta { padding: 70px 0; color: #fff; background: var(--navy); }
.info-cta .container { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.info-cta h2 { margin-bottom: 8px; color: #fff; }
.info-cta p { margin: 0; color: #bdc6d5; }
.policy-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 54px; }
.policy-nav { position: sticky; top: calc(var(--topbar-h) + 26px); align-self: start; display: grid; gap: 3px; }
.policy-nav a { padding: 9px 12px; color: #5e6571; border-left: 2px solid var(--border); font-size: 13px; }
.policy-nav a:hover { color: var(--brand-dark); border-color: var(--brand); }
.policy-content { max-width: 820px; }
.policy-content section { padding: 0 0 34px; margin-bottom: 34px; border-bottom: 1px solid var(--border); }
.policy-content h2 { font-size: 24px; }
.policy-content h3 { margin-top: 26px; }
.policy-list { padding-left: 22px; color: var(--ink-soft); }
.policy-notice { margin: 28px 0; padding: 18px 20px; color: #563000; background: #fff5df; border-left: 4px solid #d28a18; }
.policy-related > div a { padding: 8px 12px; background: var(--surface-soft); border-radius: var(--radius-xs); font-weight: 700; font-size: 13px; }
.support-grid, .contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.support-card, .contact-card { min-height: 240px; display: flex; flex-direction: column; align-items: flex-start; padding: 28px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); }
.support-card .btn, .contact-card .btn { margin-top: auto; }

/* Registration, verification and authentication */
.registration-hero { padding: 62px 0 30px; background: var(--surface-soft); }
.registration-heading { max-width: 780px; }
.registration-heading h1 { margin: 14px 0 16px; font-size: clamp(2.3rem, 5vw, 4.1rem); }
.registration-shell { padding: 34px 0 86px; background: var(--surface-soft); }
.registration-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 26px; }
.registration-form, .registration-aside { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.registration-form { padding: 30px; }
.registration-aside { align-self: start; overflow: hidden; }
.registration-section { padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid var(--border); }
.registration-section:last-child { margin-bottom: 0; border-bottom: 0; }
.registration-section h2 { font-size: 20px; }
.registration-payment-accounts, .summary-list { display: grid; gap: 10px; }
.registration-payment-accounts > div, .summary-list > div { padding: 14px; background: var(--surface-soft); border-radius: var(--radius-sm); }
.registration-consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.registration-submit-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.verify-card { max-width: 760px; padding: 32px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); }
.verify-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

/* Authenticated app shell */
.app-body { min-height: 100vh; overflow-x: hidden; background: var(--surface-soft); }
.topbar { position: fixed; z-index: 120; inset: 0 0 auto 0; height: var(--topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--border); }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar-left .brand-nav-logo { width: auto; height: 38px; }
.topbar-tag { min-height: 32px; display: inline-flex; align-items: center; margin-left: 8px; padding: 6px 10px; color: var(--brand-dark); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius-xs); font-weight: 700; font-size: 12px; }
.sidebar-toggle { display: none; }
.topbar-user { min-height: 46px; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 10px; padding: 4px 7px 4px 4px; color: var(--ink); background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); }
.topbar-user:hover, .topbar-user[aria-expanded="true"] { background: var(--surface-muted); border-color: var(--border); }
.topbar-user-meta { display: grid; min-width: 0; text-align: left; }
.topbar-user-meta strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.topbar-user-meta > span { color: var(--ink-faint); font-size: 11px; }
.menu { position: relative; }
.menu-panel { position: absolute; z-index: 140; top: calc(100% + 10px); right: 0; width: 320px; padding: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.menu-head { display: grid; gap: 2px; padding: 14px 13px; }
.menu-item { width: 100%; min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 10px 11px; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-xs); text-align: left; }
.menu-item:hover { background: var(--surface-muted); }
.menu-item.danger { color: var(--danger); }
.menu-item-body { display: grid; flex: 1; gap: 2px; }
.menu-sep { height: 1px; margin: 7px; background: var(--border); }
.shell { min-height: 100vh; padding-top: var(--topbar-h); }
.sidebar { position: fixed; z-index: 90; top: var(--topbar-h); bottom: 0; left: 0; width: var(--sidebar-w); overflow: hidden auto; padding: 18px 12px 30px; background: var(--surface); border-right: 1px solid var(--border); scrollbar-width: thin; }
.sidebar-context { display: grid; gap: 2px; margin: 0 8px 15px; padding: 13px 14px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sidebar-context-label { color: var(--ink-faint); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.sidebar-context strong { font-size: 13px; }
.side-group { display: grid; gap: 3px; margin-bottom: 13px; }
.side-group-head { width: 100%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 11px; color: var(--ink-faint); background: transparent; border: 0; border-radius: var(--radius-xs); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.side-group-head:hover { color: var(--ink); background: var(--surface-muted); }
.side-group[data-collapsed="true"] .side-group-head svg { transform: rotate(-90deg); }
.side-group[data-collapsed="true"] .side-links { display: none; }
.side-links { display: grid; gap: 3px; }
.side-link { min-height: 40px; display: flex; align-items: center; gap: 11px; padding: 9px 11px; color: var(--ink-soft); border-radius: var(--radius-xs); font-weight: 600; font-size: 13px; }
.side-link:hover { color: var(--ink); background: var(--surface-muted); }
/* DESIGN.md §11.3: a soft blue-grey ground with brand-blue icon and label,
   not a saturated slab. */
.side-link.active { color: var(--brand-dark); background: var(--brand-soft); font-weight: 700; }
.side-link.active svg { color: var(--brand); }
.side-sub { display: grid; gap: 2px; margin: 1px 0 4px 31px; padding-left: 10px; border-left: 1px solid var(--border); }
.side-sub .side-link { min-height: 34px; padding: 7px 9px; font-size: 12px; }
.main { min-width: 0; min-height: calc(100vh - var(--topbar-h)); margin-left: var(--sidebar-w); background: var(--surface-soft); }
.page { width: min(1420px, calc(100% - 54px)); margin-inline: auto; padding: 38px 0 70px; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.page-head > div:first-child { max-width: 880px; }
.page-title { margin: 0 0 7px; font-size: 28px; line-height: 1.2; }
.page-head p { margin-bottom: 0; }
.page-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-2); }
.page-actions { justify-content: flex-end; }
/* Headline counts read as one instrument, not four floating cards. The panel
   carries the border and the 1px grid gap shows through as the hairlines
   between segments, so the rule holds at any column count without nth-child
   arithmetic. Matching .stat-strip below keeps both metric rows one language. */
.stats {
  display: grid;
  /* auto-fit, not repeat(4): the reports page shows seven counts and the
     learner dashboard four, and a hardcoded column count crushed one or
     stretched the other. The 1px grid gap over a border-coloured panel is what
     draws the hairlines, so it keeps working at any wrap point. */
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.stat { min-height: 118px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-width: 0; padding: 18px 20px; background: var(--surface); border: 0; border-radius: 0; box-shadow: none; }
.stat-link { transition: background-color .18s ease; }
.stat-link:hover { background: var(--brand-tint); }
.stat-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; color: var(--ink-soft); font-size: 13px; }
.stat-icon, .tile-icon, .todo-icon, .empty-icon, .notification-type-icon, .material-type-icon { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; color: var(--brand); background: var(--brand-soft); border-radius: var(--radius-sm); }
.stat > strong { font-size: 30px; line-height: 1; }
.section-title { margin: 0 0 14px; font-size: 19px; }
.card, .table-card, .tile, .soft-card { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.card, .soft-card { padding: 22px; }
.card-head, .table-head, .section-heading, .section-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.card-head, .section-head { margin-bottom: 18px; }
.card-head h2, .table-head h2 { margin: 0; font-size: 17px; }
.table-head { min-height: 68px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
th { color: var(--ink-soft); background: var(--surface-soft); font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-muted) 65%, transparent); }
td.numeric, th.numeric { text-align: right; }
.tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 17px; }
.tile-body { min-width: 0; }
.tile-body h3 { margin: 0 0 4px; }
.tile-body p { margin: 0; }
.tile-actions { display: flex; align-items: center; gap: 8px; }
.todo-list { display: grid; }
.todo-row { min-height: 76px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.todo-row:last-child { border-bottom: 0; }
.todo-body { display: grid; gap: 3px; min-width: 0; }
.todo-body > span { color: var(--ink-soft); font-size: 13px; }
.todo-actions { display: flex; gap: 8px; }
/* Legacy empty-state markup, styled to match .blank-state exactly so both
   spellings render as one component while views migrate over. */
.empty { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 240px; padding: 40px 24px; text-align: center; }
.empty > strong { font-size: 16px; }
.empty > span:not(.empty-icon) { max-width: 420px; color: var(--ink-faint); font-size: 14px; }
.empty > .empty-icon { width: 48px; height: 48px; margin-bottom: 4px; border-radius: var(--radius-md); }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; color: var(--ink-soft); background: var(--surface-muted); border-radius: 99px; font-size: 11px; font-weight: 800; line-height: 1.2; text-transform: capitalize; }
.badge.success { color: var(--green); background: color-mix(in srgb, var(--green) 13%, var(--surface)); }
.badge.warning { color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.badge.info { color: var(--info); background: color-mix(in srgb, var(--info) 12%, var(--surface)); }
.badge.danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.badge.accent { color: var(--brand-dark); background: var(--brand-soft); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 20px; border-top: 1px solid var(--border); }
.pager-links { display: flex; gap: 7px; }
/* --- List toolbar --------------------------------------------------------
   Search and filters sit above the table, in a bar of the same width, so the
   controls that change the result set read as part of the table rather than as
   a separate card floating above it. Submitting is a GET, so the applied state
   stays in the URL where the sort links and pager can preserve it. */
.list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.list-toolbar-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; min-width: 0; }
.list-toolbar-search > svg { position: absolute; left: 12px; color: var(--ink-faint); pointer-events: none; }
.list-toolbar-search > input { width: 100%; height: 42px; padding: 8px 12px 8px 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.list-toolbar-search > input:focus-visible { border-color: var(--brand); }
.list-toolbar-filter { display: grid; gap: 5px; min-width: 0; flex: 0 1 190px; }
.list-toolbar-filter > label { color: var(--ink-soft); font-size: 12px; font-weight: 700; }
.list-toolbar-filter > select { height: 42px; padding: 8px 10px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
.list-toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.table-result-count { margin: 0; padding: 12px 20px 0; color: var(--ink-faint); font-size: 13px; }
.table-result-count strong { color: var(--ink); }

.filter-bar, .filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.filter-actions { display: flex; align-items: end; gap: 8px; }

/* Search overlay and notifications */
.search-overlay { position: fixed; z-index: 300; inset: 0; display: grid; place-items: start center; padding: 10vh 20px 20px; }
.search-scrim { position: absolute; inset: 0; background: rgb(7 11 21 / 58%); backdrop-filter: blur(3px); }
.search-panel { position: relative; width: min(720px, 100%); max-height: 78vh; overflow: auto; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.search-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.search-panel-head > div { display: grid; }
.search-field { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 5px 10px 5px 16px; border: 2px solid var(--brand); border-radius: var(--radius-sm); }
.search-field input { border: 0; box-shadow: none; }
kbd { padding: 4px 7px; color: var(--ink-soft); background: var(--surface-muted); border-radius: 5px; font-size: 11px; }
.search-groups { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 20px; }
.search-groups .btn:first-child { color: #fff; background: var(--navy); }
.search-quick { display: grid; gap: 3px; }
.search-quick-title { padding: 8px 11px; color: var(--ink-faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.toast-wrap { position: fixed; z-index: 500; left: 50%; bottom: 26px; transform: translateX(-50%); width: min(460px, calc(100% - 44px)); display: grid; gap: 10px; }
.toast { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: toast-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.toast-body { display: grid; gap: 3px; }
/* Same message and colours as before — just a spring-in entrance and a
   severity stripe, so an alert that needs attention actually gets noticed
   without becoming a different, louder design. */
@keyframes toast-pop {
  0% { opacity: 0; transform: translateY(18px) scale(.92); }
  55% { opacity: 1; transform: translateY(-4px) scale(1.03); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.toast.error { border-left: 4px solid var(--danger); }
.toast.warning { border-left: 4px solid var(--amber); }

/* Special app content */
.materials-library, .certificate-grid, .cohort-card-grid, .exam-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.material-card, .certificate-card, .cohort-card, .exam-card { min-width: 0; display: flex; flex-direction: column; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.material-card-content, .certificate-card-content { flex: 1; }
.material-card-content h2, .certificate-card-content h2 { margin: 0 0 var(--s-2); font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.material-meta, .exam-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; color: var(--ink-faint); font-size: 12px; }
.material-card-action { margin-top: 18px; }
.material-module + .material-module { margin-top: var(--s-7); }
.material-module-title { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); font-size: 15px; font-weight: 700; }
.material-module-title.has-note { margin-bottom: var(--s-2); }
.material-module-objectives { margin: 0 0 var(--s-4); }
.material-topic + .material-topic { margin-top: var(--s-5); }
.material-topic-title { margin: 0 0 var(--s-3); color: var(--ink-faint); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.material-topic-title.has-note { margin-bottom: var(--s-2); }
.material-topic-objectives { margin: 0 0 var(--s-3); text-transform: none; letter-spacing: normal; }
.lesson-content { margin: 0 0 var(--s-4); padding: var(--s-4); background: var(--surface-soft); border-radius: var(--radius-xs); font-size: 14px; line-height: 1.6; }
.lesson-content > *:first-child { margin-top: 0; }
.lesson-content > *:last-child { margin-bottom: 0; }
.lesson-content p { margin: 0 0 var(--s-3); }
.lesson-heading { margin: var(--s-4) 0 var(--s-2); font-weight: 700; }
.lesson-list { margin: 0 0 var(--s-3); padding-left: 1.4em; }
.lesson-list li { margin-bottom: 6px; }
.lesson-code { margin: 0 0 var(--s-3); padding: var(--s-3); overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 13px; }
.lesson-content code { padding: 1px 5px; background: var(--surface); border-radius: 4px; font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 0.92em; }
.material-topic-quiz { margin: 0 0 var(--s-4); }
.learner-progress-track { height: 8px; overflow: hidden; background: var(--surface-muted); border-radius: 99px; }
.learner-progress { height: 100%; background: var(--green); border-radius: inherit; }
.exam-shell { max-width: 980px; margin-inline: auto; }
.exam-toolbar { position: sticky; z-index: 15; top: calc(var(--topbar-h) + 10px); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-bottom: 18px; padding: 14px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.exam-timer { display: flex; align-items: center; gap: var(--s-2); font-weight: 800; }
.exam-timer.urgent { color: var(--danger); }
.exam-answered-summary { color: var(--ink-faint); font-size: 13px; font-weight: 600; }
.exam-save-status { margin-left: auto; }
.exam-layout { display: grid; grid-template-columns: 220px 1fr; align-items: start; gap: var(--s-6); }
.exam-nav { position: sticky; top: calc(var(--topbar-h) + 80px); padding: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.exam-nav-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-2); margin: var(--s-2) 0 var(--s-4); padding: 0; list-style: none; }
.exam-nav-btn { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; font-size: 13px; font-weight: 700; color: var(--ink); background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.exam-nav-btn.is-answered { color: #fff; background: var(--green); border-color: var(--green); }
.exam-nav-btn.is-flagged { box-shadow: inset 0 0 0 2px var(--accent); }
.exam-nav-legend { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; color: var(--ink-faint); font-size: 12px; }
.exam-nav-legend li { display: flex; align-items: center; gap: var(--s-2); }
.exam-legend-swatch { width: 14px; height: 14px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 4px; }
.exam-legend-swatch.is-answered { background: var(--green); border-color: var(--green); }
.exam-legend-swatch.is-flagged { box-shadow: inset 0 0 0 2px var(--accent); }
.question { margin-bottom: 16px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.question-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-2); }
.flag-check { display: flex; align-items: center; gap: var(--s-2); color: var(--ink-faint); font-size: 12px; cursor: pointer; }
.question-index { color: var(--ink-faint); font-size: 12px; font-weight: 800; }
.answer-options { display: grid; gap: 8px; margin-top: 14px; }
.answer-option { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
@media (max-width: 760px) {
  .exam-layout { grid-template-columns: 1fr; }
  .exam-nav { position: static; }
  .exam-nav-grid { grid-template-columns: repeat(8, 1fr); }
}
.system-state { max-width: 720px; margin: 70px auto; }

/* Installer */
.install-page { min-height: 100vh; padding: 42px 20px; background: var(--surface-soft); }
.install-wrap { width: min(980px, 100%); margin-inline: auto; }
.install-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 28px; }
.install-steps { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0 0 24px; padding: 0; list-style: none; }
.install-step { position: relative; display: grid; justify-items: center; gap: 8px; color: var(--ink-faint); text-align: center; font-size: 11px; }
.install-step::before { content: ""; position: absolute; z-index: 0; top: 16px; left: 0; right: 0; height: 2px; background: var(--border); }
.install-step:first-child::before { left: 50%; }
.install-step:last-child::before { right: 50%; }
.install-step-dot { position: relative; z-index: 1; width: 34px; height: 34px; display: grid; place-items: center; background: #fff; border: 2px solid var(--border); border-radius: 50%; font-weight: 800; }
.install-step.current .install-step-dot, .install-step.done .install-step-dot { color: #fff; background: var(--brand); border-color: var(--brand); }
.install-step.current { color: var(--ink); font-weight: 700; }
.install-body { padding: 30px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.install-foot { padding: 18px; text-align: center; }

/* Responsive */
@media (max-width: 1180px) {
  .public-nav-container { width: calc(100% - 32px); gap: 18px; }
  .brand-nav-logo { height: 38px; }
  .public-primary-links > a { padding-inline: 9px; font-size: 13px; }
  .public-search-link span { display: none; }
  .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
  .footer-brand { grid-row: span 2; }
  .category-cards { grid-template-columns: repeat(2, 1fr); }
  .market-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .solution-grid { grid-template-columns: repeat(2, 1fr); }
  .solution-grid article:nth-child(2) { border-right: 0; }
  .solution-grid article:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .materials-library, .certificate-grid, .cohort-card-grid, .exam-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 920px) {
  .container { width: min(100% - 32px, var(--container)); }
  /* backdrop-filter would make .public-nav the containing block for the
     fixed sheet below, collapsing it to zero height. */
  .public-nav { backdrop-filter: none; }
  .nav-toggle { display: inline-grid; }
  .nav-scrim { display: block; pointer-events: none; }
  body.public-nav-open .nav-scrim { pointer-events: auto; }

  /* Slide-over sheet rather than a floating card: full height, anchored to the
     right edge, with the header bar left visible so the cross stays on screen.
     Three rows — pinned search, scrolling links, pinned actions. */
  .nav-links {
    position: fixed;
    z-index: 106;
    top: var(--topbar-h);
    right: 0;
    bottom: 0;
    left: auto;
    width: min(360px, 86vw);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 0;
    padding: 0;
    background: var(--surface);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform .24s cubic-bezier(.22, .68, .32, 1), box-shadow .24s ease;
    overscroll-behavior: contain;
  }
  body.public-nav-open { overflow: hidden; }
  /* box-shadow only while open — see .sidebar's own version of this fix
     above for why applying it unconditionally lets it bleed past the
     drawer's off-canvas position. */
  body.public-nav-open .nav-links { transform: none; box-shadow: var(--shadow-lg); }

  .public-nav-search { min-height: 48px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; margin: 16px 16px 4px; padding: 4px 4px 4px 13px; background: var(--surface-soft); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
  .public-nav-search input { min-height: 40px; padding: 0; background: transparent; border: 0; box-shadow: none; }
  .public-nav-search button { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; background: var(--brand); border: 0; border-radius: var(--radius-xs); }

  .nav-sheet-label { display: block; padding: 14px 14px 6px; color: var(--ink-faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
  .public-primary-links { display: grid; align-content: start; gap: 2px; min-height: 0; margin: 0; padding: 0 12px 16px; overflow-y: auto; overscroll-behavior: contain; }
  .public-primary-links > a { min-height: 52px; display: flex; align-items: center; padding: 0 14px; border-radius: var(--radius-sm); font-size: 16px; font-weight: 600; }
  .public-primary-links > a.active::after { display: none; }
  .public-primary-links > a.active { color: var(--brand-dark); background: var(--brand-soft); }

  .public-nav-actions { display: grid; gap: 10px; margin: 0; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--surface-soft); border-top: 1px solid var(--border); }
  .public-nav-actions > *:not(.public-avatar) { width: 100%; }
  .public-nav-actions .btn { min-height: 48px; }
  .public-nav-actions .public-avatar { display: none; }
  .nav-dashboard-link { min-height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--brand); border-radius: var(--radius-sm); font-weight: 700; }
  .public-search-link { display: none; }
  .market-hero, .market-hero-inner { min-height: 600px; }
  .market-strip-grid { grid-template-columns: repeat(2, 1fr); }
  .market-strip-grid > div:nth-child(3) { border-left: 1px solid var(--border); }
  .career-band-grid, .learner-workspace-grid, .home-faq-grid, .course-detail-layout, .course-content-grid { grid-template-columns: 1fr; gap: 48px; }
  .solution-grid { grid-template-columns: 1fr; }
  .solution-grid article { min-height: 240px; border-right: 0; border-bottom: 1px solid var(--border); }
  .solution-grid article:last-child { border-bottom: 0; }
  .solution-grid h3 { margin-top: 30px; }
  .certificate-callout-inner { grid-template-columns: 60px 1fr; }
  .certificate-callout-inner > .btn { grid-column: 2; justify-self: start; }
  .footer-cta-row .container, .info-cta .container, .catalogue-help-inner { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; grid-row: auto; max-width: 500px; }
  .info-grid { grid-template-columns: 1fr; }
  .info-card { min-height: auto; border-right: 0; border-bottom: 1px solid var(--border); }
  .info-card:last-child { border-bottom: 0; }
  .info-card-icon { margin-bottom: 25px; }
  .policy-layout { grid-template-columns: 1fr; gap: 28px; }
  .policy-nav { position: static; display: flex; overflow-x: auto; }
  .policy-nav a { flex: 0 0 auto; border-left: 0; border-bottom: 2px solid var(--border); }
  .support-grid, .contact-grid { grid-template-columns: 1fr; }
  .registration-layout { grid-template-columns: 1fr; }
  .sidebar-toggle { display: inline-grid; }
  .topbar-tag { display: none; }
  /* Same drawer vocabulary as the public sheet, mirrored to the left. */
  .sidebar-scrim { position: fixed; z-index: 80; inset: var(--topbar-h) 0 0; display: block; background: rgb(8 12 28 / 48%); opacity: 0; pointer-events: none; transition: opacity .22s ease; }
  /* box-shadow lives only on the open state, not here: --shadow-lg's 60px
     blur is wider than the -102% translate overshoot below clears, so
     applying it unconditionally let the shadow bleed past the closed
     drawer's off-canvas position and show as a stray vertical band along
     the left edge of the viewport even while the drawer itself was hidden. */
  .sidebar { z-index: 100; width: min(300px, 88vw); padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px)); transform: translateX(-102%); transition: transform .24s cubic-bezier(.22, .68, .32, 1), box-shadow .24s ease; overscroll-behavior: contain; }
  body.sidebar-open { overflow: hidden; }
  body.sidebar-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
  body.sidebar-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  .side-link { min-height: 46px; font-size: 14px; }
  .main { margin-left: 0; }
  .page { width: calc(100% - 34px); }
  .grid.two, .grid.three { grid-template-columns: 1fr; }
  .filter-bar, .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  :root { --topbar-h: 64px; }
  body { font-size: 14px; }
  .container { width: calc(100% - 28px); }
  .public-nav-container { width: calc(100% - 24px); }
  .brand-nav-logo { height: 34px; }
  .market-hero, .market-hero-inner { min-height: 620px; }
  .market-hero-inner { align-items: flex-end; padding-block: 54px; }
  .market-hero h1 { font-size: 2.55rem; }
  .market-hero p { font-size: 16px; }
  .market-search { height: auto; grid-template-columns: auto 1fr; padding: 7px 7px 7px 14px; }
  .market-search button { grid-column: 1 / -1; width: 100%; }
  .market-strip-grid { grid-template-columns: 1fr; }
  .market-strip-grid > div, .market-strip-grid > div:first-child, .market-strip-grid > div:nth-child(3) { min-height: 92px; border-left: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .market-section, .career-band, .learner-workspace, .home-faq { padding: 66px 0; }
  .market-section-heading { align-items: flex-start; flex-direction: column; margin-bottom: 26px; }
  .market-section-heading h2 { font-size: 2rem; }
  .category-cards, .market-course-grid { grid-template-columns: 1fr; }
  .category-card { min-height: 120px; }
  .career-band-grid, .learner-workspace-grid, .home-faq-grid { gap: 36px; }
  .workspace-preview { padding: 18px; }
  .workspace-preview-row { grid-template-columns: 40px 1fr; }
  .workspace-preview-row > b { display: none; }
  .certificate-callout { padding: 58px 0; }
  .certificate-callout-inner { grid-template-columns: 1fr; }
  .certificate-callout-inner > .btn { grid-column: auto; }
  .catalogue-hero, .info-hero, .policy-hero, .contact-hero, .verify-hero, .course-detail-hero { padding: 54px 0 42px; }
  .catalogue-hero h1, .info-hero h1, .policy-hero h1, .contact-hero h1, .verify-hero h1 { font-size: 2.55rem; }
  .catalogue-search { grid-template-columns: auto 1fr; }
  .catalogue-search .btn { grid-column: 1 / -1; width: 100%; }
  .catalogue-row { grid-template-columns: 1fr; }
  .catalogue-row-art { min-height: 130px; }
  .catalogue-row-action { min-width: 0; align-content: start; justify-items: start; padding-top: 0; border-left: 0; }
  .info-section, .policy-section, .contact-section, .verify-section { padding: 56px 0; }
  .registration-form { padding: 22px 18px; }
  .registration-submit-row { align-items: stretch; flex-direction: column; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .verify-form { grid-template-columns: 1fr; }
  .footer-cta-row .container { min-height: 0; padding-block: 48px; }
  .footer-grid { grid-template-columns: 1fr; padding-block: 50px 24px; }
  .footer-brand { grid-column: auto; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .topbar { padding: 0 12px; }
  .topbar-left { gap: 3px; }
  .topbar-left .brand-nav-logo { display: none; }
  .topbar-left .brand-nav-mark { display: block; height: 32px; }
  .topbar-right { gap: 4px; }
  .topbar-user { grid-template-columns: auto auto; }
  .topbar-user-meta { display: none; }
  .menu-panel { position: fixed; top: calc(var(--topbar-h) + 8px); right: 10px; left: 10px; width: auto; }
  .page { width: calc(100% - 24px); padding-top: 24px; }
  .page-head { align-items: stretch; flex-direction: column; margin-bottom: 20px; }
  .page-actions { justify-content: flex-start; }
  .page-title { font-size: 24px; }
  .stats { grid-template-columns: 1fr; }
  .list-toolbar { flex-direction: column; align-items: stretch; }
  .list-toolbar-search, .list-toolbar-filter { flex: 1 1 auto; }
  .list-toolbar-actions { margin-left: 0; }
  .list-toolbar-actions .btn { flex: 1; }

  .stat { min-height: 110px; }
  .card, .soft-card { padding: 18px; }
  .card-head, .table-head { align-items: flex-start; }
  .tile, .todo-row { grid-template-columns: auto 1fr; }
  .tile-actions, .todo-actions { grid-column: 2; justify-content: flex-start; }
  .materials-library, .certificate-grid, .cohort-card-grid, .exam-grid { grid-template-columns: 1fr; }
  .filter-bar, .filters { grid-template-columns: 1fr; }
  .pager { align-items: flex-start; flex-direction: column; }
  .search-overlay { padding: 12px; }
  .search-panel { max-height: calc(100vh - 24px); padding: 14px; }
  .search-field kbd { display: none; }
  .toast-wrap { bottom: 12px; width: calc(100% - 24px); }
  .install-page { padding: 22px 12px; }
  .install-body { padding: 22px 18px; }
  .install-steps { grid-template-columns: repeat(3, 1fr); gap: 16px 0; }
  .install-step::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  /* No entrance movement at all when motion is reduced. */
  .drawer-panel, .drawer-scrim, .toast { animation: none !important; }
  /* Panels still arrive and leave, just without the travel. */
  .nav-links, .sidebar, .nav-scrim, .sidebar-scrim { transition: none !important; }
}

/* Existing view contracts: public pages */
.public-section { padding: 78px 0; background: #fff; }
.public-section + .public-section { border-top: 1px solid var(--border); }
.section-heading { margin-bottom: 32px; }
.section-heading.centered { display: grid; justify-items: center; text-align: center; }
.section-heading.centered p { max-width: 700px; margin: 6px auto 0; }
.eyebrow { display: inline-flex; color: var(--brand-dark); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; }
.eyebrow.dark { color: var(--brand-dark); }
.lead { color: var(--ink-soft); line-height: 1.7; }
.hint { display: block; color: var(--ink-faint); font-size: 12px; line-height: 1.4; }
.input-affix { position: relative; }
.input-affix input { padding-right: 48px; }
.affix-btn { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; display: grid; place-items: center; padding: 0; color: var(--ink-soft); background: transparent; border: 0; border-radius: var(--radius-xs); }
.affix-btn:hover { background: var(--surface-muted); }
.affix-btn .icon:last-child { display: none; }
.affix-btn.is-revealed .icon:first-child { display: none; }
.affix-btn.is-revealed .icon:last-child { display: block; }

.auth-market-layout { min-height: calc(100vh - var(--topbar-h)); display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(460px, .92fr); background: #fff; }
.auth-market-visual { position: relative; min-height: 680px; display: flex; align-items: flex-end; overflow: hidden; padding: 56px; color: #fff; background: var(--navy); }
.auth-market-visual::after { content: ""; position: absolute; inset: 0; background: rgb(9 17 34 / 58%); }
.auth-market-visual > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.auth-market-visual-copy { position: relative; z-index: 1; max-width: 610px; }
.auth-market-visual h2 { margin: 12px 0; color: #fff; font-size: clamp(2rem, 3vw, 3.3rem); line-height: 1.12; }
.auth-market-visual p { margin: 0; color: #D2DBE5; font-size: 17px; }
.auth-market-form-wrap { display: grid; place-items: center; padding: 54px; background: var(--surface-soft); }
.auth-market-form { width: min(480px, 100%); padding: 38px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.auth-market-form h1 { margin: 10px 0 8px; font-size: 34px; }
.auth-market-form > p { margin-bottom: 28px; }
.auth-market-form .field + .field { margin-top: 18px; }
.auth-legal a, .field-label-link { color: var(--brand-dark); font-weight: 700; }
.auth-submit { width: 100%; min-height: 50px; }
.auth-legal { margin: 17px 0; color: var(--ink-faint); font-size: 11.5px; text-align: center; }
.field-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.auth-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 6px; }
.auth-footer-links a { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.auth-footer-links a:hover { color: var(--brand-dark); }

.info-hero { color: #fff; background: var(--navy); }
.info-hero .market-kicker.light { color: #ef777b; opacity: 1; }
.info-hero h1 { color: #fff; }
.info-hero p { color: #c5cedc; }
.info-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); }
.info-feature-grid article { position: relative; min-height: 300px; padding: 30px; border-right: 1px solid var(--border); }
.info-feature-grid article:last-child { border-right: 0; }
.info-feature-index { position: absolute; top: 26px; right: 26px; color: #9aa0aa; font-weight: 800; font-size: 11px; }
.info-feature-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 62px; color: var(--brand-dark); background: var(--brand-soft); border-radius: var(--radius-sm); }
.info-feature-grid h2 { font-size: 20px; }
.info-feature-grid p { margin-bottom: 0; }
.info-page-content .info-cta { margin-top: 28px; padding: 34px; color: #fff; background: var(--navy); border-radius: var(--radius-md); }
.info-page-content .info-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.info-page-content .info-cta h2 { margin: 0 0 7px; color: #fff; font-size: 26px; }
.info-page-content .info-cta p { margin: 0; color: #bdc6d5; }
.about-story { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; margin-top: 70px; padding: 54px 0; border-top: 1px solid var(--border); }
.about-story h2 { margin: 12px 0 0; }
.about-story p { font-size: 16px; line-height: 1.75; }
.about-audiences { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 30px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); }
.about-audiences span { min-height: 76px; display: flex; align-items: center; padding: 18px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-weight: 700; }

.contact-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr); align-items: center; gap: 70px; }
.contact-hero h1 { margin: 14px 0 16px; }
.contact-hero-panel { display: grid; justify-items: start; gap: 12px; padding: 28px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.contact-hero-panel > svg { color: var(--brand); }
.contact-hero-panel p { margin: 0 0 8px; }
.support-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.support-card { min-height: 280px; }
.support-card h3 { margin: 28px 0 10px; }
.support-card .text-link { margin-top: auto; }
.contact-guidance { background: var(--surface-soft); }
.process-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 70px; }
.checklist-card { display: grid; gap: 0; }
.checklist-card > div { min-height: 84px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; border-bottom: 1px solid var(--border); }
.checklist-card > div:last-child { border-bottom: 0; }
.checklist-card > div > svg { color: var(--brand); }
.checklist-card span { display: grid; gap: 3px; }
.checklist-card small { color: var(--ink-faint); }

.course-detail-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: center; gap: 60px; }
.breadcrumbs { display: flex; align-items: center; gap: 7px; margin-bottom: 25px; color: #b9c3d3; font-size: 12px; }
.breadcrumbs a { color: #fff; }
.course-detail-copy h1 { font-size: clamp(2.5rem, 5vw, 4.4rem); }
.course-detail-meta { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; color: #C7D2DE; font-size: 12px; }
.course-detail-meta span { display: inline-flex; align-items: center; gap: 6px; }
.course-enrol-card { overflow: hidden; color: #20232a; background: #fff; border: 1px solid rgb(255 255 255 / 24%); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.course-enrol-art { position: relative; height: 170px; display: flex; align-items: flex-end; justify-content: space-between; overflow: hidden; padding: 22px; color: #fff; background: #264361; }
.course-enrol-art::after { content: ""; position: absolute; width: 150px; height: 150px; right: -40px; top: -48px; border: 25px solid rgb(255 255 255 / 12%); border-radius: 50%; }
.course-enrol-art > * { position: relative; z-index: 1; }
.course-enrol-art svg { width: 48px; height: 48px; }
.course-enrol-body { display: grid; gap: 11px; padding: 24px; }
.course-enrol-body h2 { margin: 0; font-size: 21px; }
.course-enrol-body p { margin: 0; }
.course-enrol-body .btn { width: 100%; }
.course-enrol-body small { color: var(--ink-faint); }
.course-detail-content { padding: 70px 0 90px; background: #fff; }
.course-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; align-items: start; gap: 48px; }
.course-detail-section { padding: 34px 0; border-bottom: 1px solid var(--border); }
.course-detail-section:first-child { padding-top: 0; }
.course-detail-section h2 { margin: 10px 0 16px; font-size: 29px; }
.course-overview-card { padding: 28px; }
.overview-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.overview-facts > div { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; }
.overview-facts > div > svg { color: var(--brand); }
.overview-facts span { display: grid; }
.overview-facts small { color: var(--ink-faint); }
.curriculum-list { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.curriculum-list details + details { border-top: 1px solid var(--border); }
.curriculum-list summary { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 14px 18px; background: var(--surface-soft); list-style: none; }
.curriculum-list summary::-webkit-details-marker { display: none; }
.curriculum-list summary > span { display: flex; align-items: center; gap: 13px; }
.curriculum-list summary b { color: var(--brand); font-size: 11px; }
.curriculum-list summary small { color: var(--ink-faint); }
.curriculum-list details > p { margin: 0; padding: 18px; }
.detail-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.detail-process-grid > div { min-height: 180px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.detail-process-grid b { display: block; margin-bottom: 30px; color: var(--brand); }
.detail-process-grid strong { display: block; }
.detail-process-grid p { margin: 8px 0 0; font-size: 13px; }
.course-intakes { position: sticky; top: calc(var(--topbar-h) + 24px); overflow: hidden; background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-md); }
.course-intakes-head { display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--border); }
.course-intakes-head h2 { margin: 0; font-size: 19px; }
.course-intakes-head span { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--navy); border-radius: 50%; font-size: 12px; }
.course-intakes article { display: grid; gap: 7px; padding: 18px 20px; background: #fff; border-bottom: 1px solid var(--border); }
.course-intakes article span { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-size: 12px; }
.course-intakes > p, .course-intakes > .btn { margin: 18px; }
.course-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: var(--brand-dark); font-weight: 700; }
.market-course-mark { font: 800 15px/1 var(--font-ui); }

.registration-section { padding: 42px 0 84px; background: var(--surface-soft); }
.registration-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; align-items: start; gap: 28px; }
.form-section-head { display: grid; grid-template-columns: 34px 1fr; gap: 13px; margin: 30px 0 18px; }
.form-section-head:first-of-type { margin-top: 0; }
.form-section-head > span { width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: var(--navy); border-radius: 50%; font-weight: 800; font-size: 12px; }
.form-section-head h2 { margin: 0 0 3px; font-size: 19px; }
.form-section-head p { margin: 0; font-size: 13px; }
.registration-consent { margin: 26px 0; }
.registration-submit-row a { color: var(--brand-dark); font-weight: 700; }
.registration-aside section { padding: 24px; border-bottom: 1px solid var(--border); }
.registration-aside section:last-child { border-bottom: 0; }
.registration-aside ol { display: grid; gap: 0; margin: 20px 0 0; padding: 0; list-style: none; }
.registration-aside li { min-height: 76px; display: grid; grid-template-columns: 30px 1fr; gap: 11px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.registration-aside li:last-child { border-bottom: 0; }
.registration-aside li > b { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--brand); border-radius: 50%; font-size: 11px; }
.registration-aside li span { display: grid; gap: 3px; }
.registration-aside li small { color: var(--ink-faint); }
.registration-payment-accounts h2 { font-size: 17px; }
.registration-payment-accounts > div { display: grid; gap: 2px; }
.registration-payment-accounts > div b { color: var(--brand-dark); }

.registration-managed { display: grid; gap: 20px; width: 100%; }

/* Registration wizard: JS-only chrome. With no script the .is-wizard-active
   class is never added, so every .wizard-step stays visible and the page reads
   as one continuous form — the same layout this replaced. */
.wizard-stepper { display: flex; gap: 4px; margin-bottom: 28px; padding: 0; list-style: none; counter-reset: none; }
.registration-wizard:not(.is-wizard-active) .wizard-stepper { display: none; }
.wizard-stepper-item { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 4px; border-bottom: 3px solid var(--border); color: var(--ink-faint); font-size: 12px; font-weight: 700; cursor: default; }
.wizard-stepper-item.is-active, .wizard-stepper-item.is-done { cursor: pointer; }
.wizard-stepper-item.is-active { border-color: var(--brand); color: var(--ink); }
.wizard-stepper-item.is-done { border-color: var(--brand-mid); color: var(--brand-dark); }
.wizard-dot { width: 22px; height: 22px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--surface-soft); border: 1px solid var(--border); font-size: 11px; }
.wizard-stepper-item.is-active .wizard-dot { background: var(--brand); border-color: var(--brand); color: #fff; }
.wizard-stepper-item.is-done .wizard-dot { background: var(--brand-mid); border-color: var(--brand-mid); color: #fff; }
.wizard-stepper-label { display: none; }
@media (min-width: 640px) { .wizard-stepper-label { display: inline; } }
/* Each step is a fieldset for grouping semantics, so the browser's default
   fieldset border/padding and its implicit min-content width are cleared. */
.wizard-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.wizard-step > h2:focus, .wizard-step .form-section-head h2:focus { outline: none; }
.registration-wizard.is-wizard-active .wizard-step { display: none; }
.registration-wizard.is-wizard-active .wizard-step.is-active { display: block; }
.wizard-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.wizard-back-icon { transform: rotate(180deg); }
.wizard-review { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 22px; padding: 18px 20px; background: var(--surface-soft); border-radius: var(--radius-sm); }
.wizard-review dt { color: var(--ink-faint); font-size: 12px; font-weight: 700; }
.wizard-review dd { margin: 0; font-weight: 600; }
.wizard-submit-group { display: flex; align-items: center; gap: 14px; }
.wizard-submit-group small { color: var(--ink-soft); }
.wizard-submit-group a { color: var(--brand-dark); font-weight: 700; }

.summary-list { margin: 20px 0 0; }
.summary-list > div { display: grid; grid-template-columns: 1fr; gap: 2px; }
.summary-list dt { color: var(--ink-faint); font-size: 11px; text-transform: uppercase; }
.summary-list dd { margin: 0; font-weight: 700; }

.verify-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); align-items: start; gap: 50px; }
.verify-card { display: grid; gap: 20px; }
.verify-card-head { display: grid; grid-template-columns: 48px 1fr; align-items: start; gap: 14px; }
.verify-card-head > span { width: 46px; height: 46px; display: grid; place-items: center; color: var(--brand-dark); background: var(--brand-soft); border-radius: var(--radius-sm); }
.verify-card-head h2 { margin: 0 0 4px; font-size: 21px; }
.verify-card-head p { margin: 0; }
.verify-guidance { padding: 28px 0; }
.verify-guidance h2 { margin: 12px 0 22px; font-size: 27px; }
.verify-guidance > div { display: grid; gap: 12px; }
.verify-guidance > div span { display: flex; align-items: center; gap: 9px; color: var(--ink-soft); }
.verify-guidance svg { color: var(--green); }
.verify-guidance span:last-child svg { color: var(--brand-dark); }

.policy-updated { display: inline-flex; margin-top: 16px; padding: 6px 10px; color: #606671; background: #fff; border: 1px solid var(--border); border-radius: 99px; font-size: 12px; }
.policy-nav-wrap { position: sticky; top: calc(var(--topbar-h) + 24px); align-self: start; display: grid; gap: 13px; }
.policy-nav-wrap > strong { font-size: 13px; }
.policy-contact { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: var(--brand-dark); font-size: 13px; font-weight: 700; }
.policy-section-number { color: var(--brand); font-weight: 800; font-size: 11px; }
.policy-notice p { margin: 5px 0 0; color: #674100; }
.policy-related { display: grid; gap: 12px; margin-top: 34px; padding: 24px; background: var(--surface-soft); border-radius: var(--radius-md); }
.policy-related > div { display: flex; flex-wrap: wrap; gap: 8px; }
.policy-related p { margin: 0; font-size: 13px; }
.policy-related p a { color: var(--brand-dark); text-decoration: underline; }

/* Small shared contracts retained by legacy views. */
.public-brand,
.brand-full { display: inline-flex; align-items: center; }
.nav-dashboard-link { white-space: nowrap; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 18px; color: var(--ink-faint); font-size: 12px; }
.crumbs a { color: var(--brand-dark); font-weight: 700; }
.section-intro { max-width: 720px; margin: 0 0 30px; color: var(--ink-soft); line-height: 1.7; }
.form-section-title { margin: 28px 0 16px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 18px; }
.check-list { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.check-list li { position: relative; padding-left: 24px; color: var(--ink-soft); }
.check-list li::before { content: ""; position: absolute; top: .48em; left: 2px; width: 9px; height: 5px; border-bottom: 2px solid var(--green); border-left: 2px solid var(--green); transform: rotate(-45deg); }
.toast-icon { width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; }
.toast-success .toast-icon { color: var(--green); background: #e9f8f1; }
.toast-error .toast-icon { color: var(--danger); background: var(--brand-soft); }
.exam-timer-label { color: var(--ink-faint); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.catalogue-results,
.category-section,
.course-market-section,
.solutions-section,
.career-band-intro,
.info-hero-inner { min-width: 0; }
.compact { font-size: 13px; }

/* Existing view contracts: dashboard page families */
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.filter-card { margin-bottom: 18px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.compact-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.data-table { width: 100%; }
.row-action-menu { position: relative; }
.row-action-popover { position: absolute; z-index: 30; top: calc(100% + 5px); right: 0; min-width: 170px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); }
.row-action-popover a, .row-action-popover button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-xs); text-align: left; }
.row-action-popover a:hover, .row-action-popover button:hover { background: var(--surface-muted); }
.danger-outline { color: var(--danger); border-color: #e9aaaa; }
.check, .choice { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; }
.copy-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.batch-payment-create, .certificate-batch-panel { padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.certificate-preview { min-height: 240px; display: grid; place-items: center; padding: 26px; background: var(--surface-soft); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.learner-page-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.learner-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.learner-course-card, .learner-exam-card { overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.learner-course-art { min-height: 130px; display: flex; align-items: flex-end; justify-content: space-between; padding: 18px; color: #fff; background: var(--navy); }
.learner-course-body { display: grid; gap: 12px; padding: 19px; }
.learner-card-actions, .learner-card-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.notification-list { display: grid; gap: 10px; }
.notification-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.notification-row.unread { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface)); }
.notification-row p { margin: 5px 0 8px; color: var(--ink-soft); }
.notification-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.support-ticket-list { display: grid; gap: 14px; }
.support-ticket { display: grid; gap: 16px; }
.support-ticket > p { margin: 0; color: var(--ink-soft); white-space: pre-wrap; }
.support-ticket form { padding-top: 14px; border-top: 1px solid var(--border); }
.ticket-note { padding: 15px 16px; background: var(--surface-muted); border-left: 3px solid var(--brand); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ticket-note p { margin: 5px 0 9px; color: var(--ink-soft); white-space: pre-wrap; }
.learner-empty-state { min-height: 260px; display: grid; place-items: center; align-content: center; gap: 9px; text-align: center; }
.learner-notification-list { display: grid; gap: 10px; }
.attendance-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.attendance-ring { width: 92px; aspect-ratio: 1; display: grid; place-items: center; border: 9px solid var(--surface-muted); border-top-color: var(--green); border-radius: 50%; }
.account-page-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; }
.account-page-sidebar { align-self: start; display: grid; justify-items: start; gap: 6px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.account-avatar { width: 52px; height: 52px; display: grid; place-items: center; margin-bottom: 6px; color: #fff; background: var(--navy); border-radius: 50%; font-weight: 800; }
.account-page-sidebar nav { width: 100%; display: grid; gap: 3px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.account-page-sidebar nav a { display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: var(--radius-xs); }
.account-page-sidebar nav a.active, .account-page-sidebar nav a:hover { background: var(--surface-muted); }
.account-security-main { display: grid; gap: 18px; }
.account-security-head { padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.account-security-head h1 { margin: 8px 0 6px; font-size: 28px; }
.account-email-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.account-email-row > div { display: grid; gap: 3px; }
.account-email-row span:first-child { color: var(--ink-faint); font-size: 12px; }
.account-password-form { display: grid; gap: 17px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.account-password-form h2 { margin: 0; font-size: 20px; }
.account-mfa-section { display: grid; gap: var(--s-4); padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.account-mfa-section h2 { margin: 0; font-size: 20px; }
.account-mfa-section > .account-password-form { padding: var(--s-5) 0 0; background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; }
.mfa-qr-code { display: inline-block; padding: var(--s-3); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); line-height: 0; }
.mfa-qr-code img { display: block; width: 200px; height: 200px; }
.mfa-manual-key code { display: inline-block; padding: var(--s-2) var(--s-3); background: var(--surface-muted); border-radius: var(--radius-xs); font-size: 15px; letter-spacing: 0.06em; }
.mfa-recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-2); margin: var(--s-3) 0 0; padding: 0; list-style: none; }
.mfa-recovery-codes code { display: block; padding: var(--s-2); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xs); font-size: 13px; letter-spacing: 0.04em; }
.security-practices { padding: 24px; background: var(--navy); border-radius: var(--radius-md); color: #fff; }
.security-practices p { color: #bec7d5; }
.security-practices-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; }
.security-practice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 18px; }
.security-practice-grid > div { display: grid; grid-template-columns: auto 1fr; gap: 12px; padding: 16px; border: 1px solid rgb(255 255 255 / 16%); border-radius: var(--radius-sm); }
.security-practice-grid span { display: grid; }
.security-practice-grid small { color: #aeb8c8; }

@media (max-width: 980px) {
  .auth-market-layout, .course-detail-hero-grid, .course-detail-grid, .contact-hero-grid, .process-grid, .verify-layout { grid-template-columns: 1fr; }
  .auth-market-visual { min-height: 440px; }
  .course-enrol-card { width: min(520px, 100%); }
  .course-intakes { position: static; }
  .info-feature-grid { grid-template-columns: 1fr; }
  .info-feature-grid article { min-height: 230px; border-right: 0; border-bottom: 1px solid var(--border); }
  .info-feature-grid article:last-child { border-bottom: 0; }
  .support-grid { grid-template-columns: repeat(2, 1fr); }
  .registration-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .learner-course-grid, .attendance-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .account-page-shell { grid-template-columns: 1fr; }
  .account-page-sidebar nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .about-story { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 680px) {
  .public-section { padding: 56px 0; }
  .auth-market-visual { display: none; }
  .auth-market-form-wrap { min-height: calc(100vh - var(--topbar-h)); padding: 28px 16px; }
  .auth-market-form { padding: 26px 20px; }
  .info-page-content .info-cta { align-items: flex-start; flex-direction: column; padding: 24px; }
  .support-grid { grid-template-columns: 1fr; }
  .support-card { min-height: 230px; }
  .overview-facts, .detail-process-grid { grid-template-columns: 1fr; }
  .detail-process-grid > div { min-height: 140px; }
  .course-detail-copy h1 { font-size: 2.5rem; }
  .course-enrol-art { height: 140px; }
  .course-detail-content { padding: 50px 0 66px; }
  .registration-grid { gap: 18px; }
  .registration-section { padding: 26px 0 60px; }
  .filter-grid, .admin-form-grid, .compact-stats, .learner-course-grid, .attendance-cards, .security-practice-grid { grid-template-columns: 1fr; }
  .notification-row { grid-template-columns: auto minmax(0, 1fr); padding: 15px; }
  .notification-row > form { grid-column: 2; justify-self: start; }
  .account-page-sidebar nav { grid-template-columns: 1fr; }
  .about-audiences { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Admin workbench components
   Added during the 2026-08 redesign. New selectors only — nothing above is
   overridden, so source order is not load-bearing here.
   ========================================================================== */

/* --- Page toolbar --------------------------------------------------------
   One row above every table: what you are looking at on the left, the single
   primary action on the right. Replaces the old habit of parking create forms
   permanently beside the data. */
.workbench { display: grid; gap: 22px; }
.workbench-section { display: grid; gap: 14px; }
.workbench-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.workbench-head > div { display: grid; gap: 3px; min-width: 0; }
.workbench-head h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.workbench-head p { margin: 0; color: var(--ink-faint); font-size: 13px; }
.workbench-count { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; color: var(--ink-soft); background: var(--surface-muted); border-radius: 99px; font-size: 12px; font-weight: 700; }
.workbench-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* --- Curriculum builder (modules with nested lessons) --------------------- */
.curriculum-builder { display: grid; gap: var(--s-4); }
.curriculum-module-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.curriculum-module-title { display: grid; gap: 4px; min-width: 0; }
.curriculum-module-title h3 { margin: 4px 0 0; font-size: 16px; }
.curriculum-module-meta { display: grid; gap: 4px; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.curriculum-module-meta p { margin: 0; }
.curriculum-lessons { display: grid; gap: var(--s-2); margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.curriculum-lesson-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3); background: var(--surface-soft); border-radius: var(--radius-xs); }
.curriculum-lesson-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }

/* --- Slide-over drawer ---------------------------------------------------
   Built on <details> so the form still opens, fills and submits with
   JavaScript disabled; the script only adds scrim/Escape closing. */
.drawer { position: relative; }
.drawer > summary { list-style: none; }
.drawer > summary::-webkit-details-marker { display: none; }
.drawer > summary::marker { content: ""; }
.drawer-shell { position: fixed; z-index: 400; inset: 0; }
.drawer-scrim { position: absolute; inset: 0; background: rgb(8 12 28 / 52%); backdrop-filter: blur(2px); animation: drawer-fade .18s ease; }
.drawer-panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(620px, 100%);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  /* The entrance is a fade, and nothing here translates.
     This rule used to slide the panel in from translateX(26px). Because the
     panel is anchored to the right edge, any condition where the keyframes did
     not advance - a throttled renderer, a background tab, a paused compositor -
     left it resting 26px past the viewport with its close button and its submit
     button unreachable. Moving the slide onto the panel's children only moved
     the same trap. Position must not depend on an animation having run, so the
     movement is gone and the scrim fade carries the entrance instead. */
  animation: drawer-in .2s ease;
}
.drawer-panel.wide { width: min(860px, 100%); }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.drawer-head > div { display: grid; gap: 3px; min-width: 0; }
.drawer-head h2 { margin: 0; font-size: 18px; }
.drawer-head p { margin: 0; color: var(--ink-faint); font-size: 13px; }
.drawer-body { overflow-y: auto; padding: 22px 24px; display: grid; gap: 20px; align-content: start; }
.drawer-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px; background: var(--surface-soft); border-top: 1px solid var(--border); }
.drawer-foot .drawer-foot-note { margin-right: auto; color: var(--ink-faint); font-size: 12px; }
@keyframes drawer-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drawer-fade { from { opacity: 0; } to { opacity: 1; } }
body.drawer-open { overflow: hidden; }

/* Grouped fieldsets inside a drawer, per DESIGN.md §9 "long forms". */
.form-section { display: grid; gap: 14px; padding: 0; margin: 0; border: 0; }
.form-section > legend { padding: 0; margin-bottom: 2px; color: var(--ink-faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.form-section + .form-section { padding-top: 20px; border-top: 1px solid var(--border); }
.req { color: var(--danger); font-weight: 700; }

/* --- File upload ---------------------------------------------------------
   The native control is kept in the DOM (name, accept, required all intact)
   and laid over its own face so clicks and keyboard focus reach it. */
/* --- File field ----------------------------------------------------------
   The native input is visually hidden but still in the layout flow's z-order
   *below* the controls, rather than stretched invisibly across the whole field.
   The face is a <label for>, so clicking it opens the picker natively while
   leaving the clear button clickable — which it was not when the input covered
   everything. */
.file-input { position: relative; }
.file-input-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-input-face {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 14px 16px;
  background: var(--brand-tint);
  border: 1px dashed var(--brand-line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.file-input-face:hover,
.file-input.is-dragging .file-input-face { background: var(--brand-soft); border-color: var(--brand); }
.file-input-native:focus-visible + .file-input-face { outline: 3px solid rgb(3 75 152 / 32%); outline-offset: 2px; }
.file-input-icon { position: relative; width: 44px; height: 44px; display: grid; place-items: center; overflow: hidden; color: var(--brand); background: var(--surface); border: 1px solid var(--brand-line); border-radius: var(--radius-xs); }
.file-input-icon > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.file-input-copy { display: grid; gap: 3px; min-width: 0; }
.file-input-copy strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-input-copy small { color: var(--ink-faint); font-size: 12px; }
.file-input-cta { padding: 7px 13px; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xs); font-size: 13px; font-weight: 700; white-space: nowrap; }
.file-input.has-file .file-input-face { background: var(--surface); border-style: solid; border-color: var(--border-strong); }
.file-input.has-file .file-input-icon { color: var(--green); border-color: color-mix(in srgb, var(--green) 35%, var(--border)); }
/* Sits above the face so it is genuinely clickable. */
.file-input-clear {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  transition: color .18s ease, border-color .18s ease;
}
.file-input-clear:hover { color: var(--danger); border-color: var(--danger); }
.file-input.has-error .file-input-face { background: var(--surface); border-style: solid; border-color: var(--danger); }
.file-input.has-error .file-input-icon { color: var(--danger); border-color: var(--danger); }
.file-input-error { margin: 8px 0 0; color: var(--danger); font-size: 13px; font-weight: 600; }

/* --- Empty states (DESIGN.md §25) ---------------------------------------- */
.blank-state { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 240px; padding: 40px 24px; text-align: center; }
.blank-state .blank-icon { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: 4px; color: var(--brand); background: var(--brand-soft); border-radius: var(--radius-md); }
.blank-state strong { font-size: 16px; }
.blank-state p { max-width: 420px; margin: 0; color: var(--ink-faint); font-size: 14px; }
.blank-state .actions { margin-top: 10px; }

@media (max-width: 920px) {
  .drawer-panel, .drawer-panel.wide { width: 100%; border-left: 0; }
  .drawer-head, .drawer-body, .drawer-foot { padding-inline: 18px; }
}
@media (max-width: 680px) {
  .workbench-head { align-items: stretch; flex-direction: column; }
  .workbench-actions > .drawer, .workbench-actions > .drawer > summary { width: 100%; }
  .file-input-face { grid-template-columns: auto 1fr; row-gap: 10px; }
  .file-input-cta { grid-column: 2; justify-self: start; }
  .drawer-foot { flex-direction: column-reverse; align-items: stretch; }
  .drawer-foot .btn { width: 100%; }
  .drawer-foot .drawer-foot-note { margin: 0; text-align: center; }
}

/* Launch-scope readout on the operations page: a definition list of modules,
   not a grid of decorative cards. */
.feature-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.feature-group { padding: 20px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.feature-group h3 { margin: 0 0 14px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.feature-group ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.feature-group li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 12px; }
.feature-group-body { display: grid; gap: 2px; min-width: 0; }
.feature-group-body strong { font-size: 14px; }

/* Secondary counts: real but not headline, so they read as a strip rather than
   another row of large KPI cards. */
.stat-strip { display: flex; flex-wrap: wrap; gap: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.stat-strip-item { flex: 1 1 220px; display: flex; align-items: center; gap: 10px; padding: 15px 18px; color: var(--ink-soft); border-right: 1px solid var(--border); transition: background-color .18s ease; }
.stat-strip-item:last-child { border-right: 0; }
.stat-strip-item:hover { background: var(--surface-soft); }
.stat-strip-item svg { color: var(--brand); }
.stat-strip-item > span { flex: 1; font-size: 13px; }
.stat-strip-item > strong { font-size: 20px; color: var(--ink); }

/* Business-unit board: one full-width row per unit with aligned metric columns,
   instead of four half-width cards whose numbers run together as prose. */
.unit-board { display: grid; }
.unit-row { display: grid; grid-template-columns: minmax(220px, 1.1fr) 2fr auto; align-items: center; gap: 24px; padding: 16px 20px; border-bottom: 1px solid var(--border); transition: background-color .18s ease; }
.unit-row:last-child { border-bottom: 0; }
.unit-row:hover { background: var(--surface-soft); }
.unit-row-name { display: flex; align-items: center; gap: 13px; min-width: 0; }
.unit-row-name > span:last-child { display: grid; gap: 2px; min-width: 0; }
.unit-row-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.unit-row-metrics > span { display: grid; gap: 2px; min-width: 0; }
.unit-row-metrics b { font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.unit-row-metrics small { color: var(--ink-faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.unit-row-go { color: var(--ink-faint); }
.unit-row:hover .unit-row-go { color: var(--brand); }

/* Action rows sit inside a table card now, so they need their own gutters. */
.table-card > .todo-list { padding: 4px 20px; }
.todo-row.is-pending .todo-icon { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface)); }

@media (max-width: 920px) {
  .unit-row { grid-template-columns: 1fr auto; row-gap: 16px; }
  .unit-row-metrics { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .stat-strip-item { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--border); }
  .stat-strip-item:last-child { border-bottom: 0; }
  .unit-row-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .table-card > .todo-list { padding-inline: 16px; }
}

/* Framed table panel. Replaces inline styles that referenced --line and
   --radius, two variables that were never defined, so those panels had no
   border or corner at all. */
.table-frame { margin-top: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.table-frame table { border-radius: inherit; overflow: hidden; }
.blank-icon.is-success { color: var(--green); background: color-mix(in srgb, var(--green) 14%, var(--surface)); }

/* Record detail: a wide main column with a narrower context sidebar. The old
   markup used the 50/50 .grid.two, which starved the main column. */
.detail-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 20px; align-items: start; }
.blank-state.compact { min-height: 0; padding: 26px 16px; }
@media (max-width: 1024px) { .detail-layout { grid-template-columns: 1fr; } }

/* ==========================================================================
   Shell furniture added in the 2026-08 fidelity pass
   Breadcrumbs, tabs, chips, alerts and the row-action menu, built to the same
   density as the reference control panel. New selectors only.
   ========================================================================== */

/* --- Page header ---------------------------------------------------------
   One component for every page: where you are, what this page is, and the
   single primary action. Views used to hand-roll this markup, which is why the
   title size and action alignment drifted between screens. */
.page-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1); margin-bottom: var(--s-3); color: var(--ink-faint); font-size: 13px; }
.page-crumbs a { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: var(--radius-xs); color: var(--ink-soft); font-weight: 600; }
.page-crumbs a:hover { color: var(--brand-dark); background: var(--brand-tint); }
.page-crumbs svg { color: var(--border-strong); }
.page-crumbs > span[aria-current] { padding: 2px 4px; color: var(--ink); font-weight: 700; }

/* --- Tabs ----------------------------------------------------------------
   Text tabs on a hairline rail, with the brand indicator on the active one.
   They scroll horizontally rather than wrapping, so a six-tab page keeps its
   single-line rhythm on a phone. */
.tabs {
  position: relative;
  display: flex;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--border);
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  flex: 0 0 auto;
  padding: var(--s-3) 2px calc(var(--s-3) + 1px);
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--brand-dark); font-weight: 700; }
.tab.active::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; background: var(--brand); border-radius: 2px 2px 0 0; }
.tab-count { padding: 1px 7px; color: var(--ink-soft); background: var(--surface-muted); border-radius: 99px; font-size: 11px; font-weight: 700; }
.tab.active .tab-count { color: var(--brand-dark); background: var(--brand-soft); }
.tab-new { color: var(--accent-text); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }

/* --- Filter chips --------------------------------------------------------
   Compact pills for a category or status choice that is a link, not a select.
   Deliberately not a button: each one is a real URL so the state is shareable. */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 13px;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
.chip:hover { color: var(--ink); border-color: var(--border-strong); }
.chip.active { color: #fff; background: var(--ink); border-color: var(--ink); }
.chip > span { padding: 0 5px; background: var(--surface-muted); border-radius: 99px; font-size: 11px; font-weight: 700; }
.chip.active > span { color: var(--ink); background: rgb(255 255 255 / 82%); }

/* --- Alerts --------------------------------------------------------------
   Tinted, hairlined and quiet. Reserved for state the page must announce, not
   for decorating a section heading. */
.alert { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.alert > svg { margin-top: 1px; color: var(--ink-faint); }
.alert-body { display: grid; gap: 3px; min-width: 0; }
.alert-body strong { font-size: 14px; }
.alert-body p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.alert.info { background: var(--brand-tint); border-color: var(--brand-line); }
.alert.info > svg { color: var(--brand); }
.alert.success { background: color-mix(in srgb, var(--green) 7%, var(--surface)); border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
.alert.success > svg { color: var(--green); }
.alert.warning { background: var(--accent-soft); border-color: color-mix(in srgb, var(--amber) 32%, var(--border)); }
.alert.warning > svg { color: var(--amber); }
.alert.danger { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.alert.danger > svg { color: var(--danger); }
.alert-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }

/* A plain notice box — .alert's simpler sibling for the admin screens that
   want a tinted paragraph with no icon slot. */
.callout { padding: var(--s-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); font-size: 13px; color: var(--ink-soft); }
.callout.info { background: var(--brand-tint); border-color: var(--brand-line); }
.callout.warning { background: var(--accent-soft); border-color: color-mix(in srgb, var(--amber) 32%, var(--border)); }
.callout.danger { background: color-mix(in srgb, var(--danger) 6%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.callout.muted { background: var(--surface-muted); }
/* Plain-text AI answer/result blocks — wraps like a paragraph rather than a
   code block, since the content is prose, not source. */
.text-block { margin: 0; font-family: inherit; white-space: pre-wrap; }
.u-stack-4 { display: flex; flex-direction: column; gap: var(--s-4); }

/* --- Row action menu -----------------------------------------------------
   .table-wrap is a horizontal scroll container, which means overflow-y also
   computes to auto: an absolutely-positioned row menu inside it was being
   clipped (measured at 197px cut off on /admin/students). The script promotes
   an open panel to position:fixed and sets its coordinates, so it escapes the
   scroll container entirely; these rules are what it needs to land correctly. */
td .menu, .row-action-menu { position: relative; display: inline-flex; }
td .menu-panel { width: 260px; }
.menu-panel.is-floating { position: fixed; top: auto; right: auto; margin: 0; }
.menu-item .icon, .menu-item svg { color: var(--ink-faint); }
.menu-item.danger svg { color: var(--danger); }
/* The kebab is quiet until the row is hovered or the menu is open, so a table
   of forty rows is not forty competing controls. */
.data-table .icon-btn.plain, table .icon-btn.plain { width: 34px; height: 34px; color: var(--ink-faint); }
tbody tr:hover .icon-btn.plain, .icon-btn.plain[aria-expanded="true"] { color: var(--ink); background: var(--surface-muted); }

/* --- Definition table ----------------------------------------------------
   Label/value pairs, as used by certificate verification and record detail.
   A table because the pairing is data, not layout. */
.definition-table th { width: 232px; color: var(--ink-soft); background: transparent; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; vertical-align: top; }
.definition-table td { font-size: 14px; }
@media (max-width: 560px) {
  .definition-table, .definition-table tbody, .definition-table tr, .definition-table th, .definition-table td { display: block; width: auto; }
  .definition-table th { padding-bottom: 0; border-bottom: 0; }
  .definition-table td { padding-top: var(--s-1); }
}

/* --- Utility measures ----------------------------------------------------
   Replaces the inline style="max-width:..." that had accumulated across views. */
.measure-prose { width: min(var(--measure-prose), 100%); margin-inline: auto; }
.measure-form { width: min(var(--measure-form), 100%); }
.stack-sm { display: grid; gap: var(--s-3); }
.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.inline-form select, .inline-form input { min-width: 150px; flex: 1 1 150px; height: 38px; min-height: 38px; padding-block: 6px; font-size: 13px; }
.inline-form .btn { flex: 0 0 auto; }

/* --- Learner board -------------------------------------------------------
   The learner dashboard leads with one large card answering "what am I
   learning right now", with three narrow panels beside it — deliberately
   mixed sizes rather than a row of four identical counters, because the
   course is the subject of the page and the numbers are supporting detail. */
.learner-board { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(280px, 1fr); gap: var(--s-5); align-items: start; }
.learning-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.62fr);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.learning-card-main { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-6); }
.learning-card-eyebrow { color: var(--ink-faint); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em; }
.learning-card-main h2 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.65rem); line-height: 1.2; letter-spacing: -0.02em; }
.learning-card-main > p { margin: 0; }
.learning-card-facts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); color: var(--ink-soft); font-size: 13px; }
.learning-card-facts > span { display: inline-flex; align-items: center; gap: 6px; }
.learning-card-facts svg { color: var(--ink-faint); }
.learning-card-progress { display: grid; gap: var(--s-2); }
.learning-card-progress > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.learning-card-progress strong { font-size: 14px; }
.learning-card-progress small { font-size: 12px; }
.learning-card-progress .learner-progress { background: var(--brand); }
.learning-card-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); }
/* The next-session rail carries the brand tint so the card reads as two
   related zones rather than one flat panel. */
.learning-card-next { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-6); background: var(--brand-tint); border-left: 1px solid var(--border); }
.learning-card-next strong { font-size: 15px; line-height: 1.35; }
.learning-card-next p { margin: 0; }
.next-session-date { color: var(--brand-dark); font-size: 13px; font-weight: 700; }
.next-session-meta { display: grid; gap: 6px; margin-top: var(--s-2); color: var(--ink-soft); font-size: 13px; }
.next-session-meta > span { display: inline-flex; align-items: center; gap: 7px; }
.next-session-meta svg { color: var(--brand); }

.learner-panels { display: grid; gap: 1px; overflow: hidden; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.learner-panel { display: grid; align-content: start; gap: 6px; padding: var(--s-4) var(--s-5); background: var(--surface); transition: background-color .18s ease; }
a.learner-panel:hover { background: var(--brand-tint); }
.learner-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); color: var(--ink-soft); font-size: 13px; }
.learner-panel > strong { font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.learner-panel small { font-size: 12px; }
.learner-panel .stat-icon { width: 32px; height: 32px; border-radius: var(--radius-xs); }

@media (max-width: 1180px) {
  .learner-board { grid-template-columns: 1fr; }
  .learner-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .learning-card { grid-template-columns: 1fr; }
  .learning-card-next { border-left: 0; border-top: 1px solid var(--border); }
  .learner-panels { grid-template-columns: 1fr; }
  .learning-card-main { padding: var(--s-5); }
  .learning-card-next { padding: var(--s-5); }
}

/* --- Session board -------------------------------------------------------
   Today's teaching, as a row per session with the time set as the leading
   column so the day reads top to bottom like a timetable. The card carries the
   one action that matters for that session: mark it, or review what was
   marked. */
.session-board { display: grid; gap: var(--s-2); }
.session-card {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.session-card.is-done { border-left-color: var(--green); }
.session-card-time { display: grid; gap: 2px; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.session-card-time small { color: var(--ink-faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.session-card-body { display: grid; gap: 3px; min-width: 0; }
.session-card-body strong { font-size: 15px; }
.session-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-top: var(--s-1); color: var(--ink-soft); font-size: 12px; }
.session-card-meta > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.session-card-action { display: flex; gap: var(--s-2); }

@media (max-width: 680px) {
  .session-card { grid-template-columns: 1fr; gap: var(--s-3); }
  .session-card-time { display: flex; align-items: baseline; gap: var(--s-2); }
  .session-card-action .btn { width: 100%; }
}

/* --- Quick actions -------------------------------------------------------
   The reference dashboard puts its common tasks in a row of small pills under
   the greeting, not in a grid of cards. Keeping them as chips means they never
   compete with the operational panels below for the eye. */
.quick-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.quick-action {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
  padding: 8px 15px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 99px;
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.quick-action svg { color: var(--ink-faint); }
.quick-action:hover { color: var(--brand-dark); background: var(--brand-tint); border-color: var(--brand-line); }
.quick-action:hover svg { color: var(--brand); }

/* --- User administration and audited impersonation --------------------- */
.role-overview { display: grid; gap: var(--s-4); }
.role-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s-2); margin: 0; }
.role-summary-item { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.role-summary-item dt { min-width: 0; display: grid; gap: var(--s-1); font-size: 13px; font-weight: 700; }
.role-summary-item dt span { overflow: hidden; color: var(--ink-faint); font-size: 11px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.role-summary-item dd { margin: 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.impersonation-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-4); margin-bottom: var(--s-6); padding: var(--s-4) var(--s-5); color: var(--ink); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius-md); }
.impersonation-banner-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--brand-dark); background: var(--surface); border-radius: var(--radius-sm); }
.impersonation-banner-copy { min-width: 0; display: grid; gap: var(--s-1); }

/* --- Contact and support (/help) ---------------------------------------- */
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-4); }
.help-card { display: grid; align-content: start; gap: var(--s-2); }
.help-card h2 { margin: 0; font-size: 16px; }
.help-card-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--brand); background: var(--brand-tint); border: 1px solid var(--brand-line); border-radius: var(--radius-sm); }
.help-contact { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-1) var(--s-4); margin: 0; }
.help-contact dt { color: var(--ink-faint); font-size: 13px; font-weight: 600; }
.help-contact dd { margin: 0; min-width: 0; font-size: 14px; }
.impersonation-banner-copy span { color: var(--ink-soft); font-size: 12px; }
@media (max-width: 680px) {
  .impersonation-banner { grid-template-columns: auto 1fr; }
  .impersonation-banner form { grid-column: 1 / -1; }
  .impersonation-banner .btn { width: 100%; }
}
@media (max-width: 680px) {
  /* One line that scrolls beats four wrapped rows of pills on a phone. */
  .quick-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; }
  .quick-actions::-webkit-scrollbar { display: none; }
  .quick-action { flex: 0 0 auto; }
}

/* Certificate eligibility readout: one number per blocking rule, so the reason
   a cohort cannot be certified is visible without opening a report. */
.eligibility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 1px; background: var(--border); border-top: 1px solid var(--border); }
.eligibility-cell { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); background: var(--surface); }
.eligibility-label { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-soft); font-size: 12px; font-weight: 600; }
.eligibility-label svg { color: var(--ink-faint); }
.eligibility-cell > strong { font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; }
.eligibility-cell.is-ok .eligibility-label svg, .eligibility-cell.is-ok > strong { color: var(--green); }
.eligibility-cell.is-blocked > strong { color: var(--ink-soft); }
/* A filter that is the page's main control gets the room, rather than sitting
   at the same fixed width as a secondary one. */
.list-toolbar-filter.grow { flex: 1 1 340px; }

/* --- Certificate verification result -------------------------------------
   A public trust page. The verdict is a single banner carrying the whole
   answer, so someone checking a certificate reads valid or not valid before
   anything else; the record table below it is supporting evidence, not the
   headline. */
.verify-result-section { padding: var(--s-10) 0 var(--s-11); background: var(--surface-soft); }
.verify-result-section .breadcrumbs { margin-bottom: var(--s-5); }
.verify-verdict {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-5);
  padding: var(--s-7);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 4px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.verify-verdict h1 { margin: var(--s-2) 0 var(--s-3); font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.15; }
.verify-verdict p { margin: 0; font-size: 15px; }
.verify-verdict-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.verify-verdict-seal { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; }
.verify-verdict-seal svg { width: 30px; height: 30px; }
.verify-verdict.is-valid { border-top-color: var(--green); }
.verify-verdict.is-valid .verify-verdict-seal { color: var(--green); background: color-mix(in srgb, var(--green) 12%, var(--surface)); }
.verify-verdict.is-valid .verify-verdict-label { color: var(--green); }
.verify-verdict.is-invalid { border-top-color: var(--amber); }
.verify-verdict.is-invalid .verify-verdict-seal { color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface)); }
.verify-verdict.is-invalid .verify-verdict-label { color: var(--amber); }
.verify-verdict.is-unknown { border-top-color: var(--ink-faint); }
.verify-verdict.is-unknown .verify-verdict-seal { color: var(--ink-soft); background: var(--surface-muted); }
.verify-verdict.is-unknown .verify-verdict-label { color: var(--ink-soft); }

.verify-record { margin-top: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.verify-record-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--border); }
.verify-record-head h2 { margin: 0; font-size: 16px; }
.verify-record .definition-table { border-collapse: collapse; }
.verify-record .definition-table th, .verify-record .definition-table td { padding: var(--s-4) var(--s-6); }
.verify-record .definition-table tr:last-child th, .verify-record .definition-table tr:last-child td { border-bottom: 0; }
.verify-privacy { display: flex; align-items: center; gap: var(--s-2); margin: 0; padding: var(--s-4) var(--s-6); color: var(--ink-faint); background: var(--surface-soft); border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); font-size: 13px; }
.verify-next { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.mono, code { font-family: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace; font-size: .94em; letter-spacing: .01em; }
code { padding: 2px 6px; background: var(--surface-muted); border-radius: 5px; }

@media (max-width: 680px) {
  .verify-result-section { padding: var(--s-7) 0 var(--s-9); }
  .verify-verdict { grid-template-columns: 1fr; gap: var(--s-4); padding: var(--s-5); }
  .verify-record-head, .verify-record .definition-table th, .verify-record .definition-table td, .verify-privacy { padding-inline: var(--s-5); }
  .verify-next .btn { flex: 1 1 auto; }
}

/* Authentication lock-up: 28px tall renders the compact mark ~180px wide, the
   top of the range in DESIGN.md §87. Large enough to identify the portal,
   small enough that the form is still the subject of the page. */
.auth-brand { display: inline-flex; margin-bottom: var(--s-5); }
.auth-brand img { width: auto; height: 28px; object-fit: contain; object-position: left center; }
@media (max-width: 680px) { .auth-brand img { height: 25px; } }

/* --- Spacing and type utilities ------------------------------------------
   These exist so views stop reaching for style="margin-top:14px". Every value
   is a step on the scale declared at the top of this file, which is why the
   old 10/14/18px one-offs collapsed onto 12/16/20 when they were converted. */
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.ml-2 { margin-left: var(--s-2); }
.my-2 { margin-block: var(--s-2); }
.my-5 { margin-block: var(--s-5); }
.gap-4 { gap: var(--s-4); }
.pad-lg { padding: var(--s-8) var(--s-6); }
.align-start { align-items: flex-start; }

.text-base { font-size: 14px; }
.text-lead { font-size: 16px; }
.text-section { font-size: 18px; }
.text-h3 { font-size: 20px; }
.text-h2 { font-size: 24px; }

/* Content that arrived as typed text - ticket bodies, session notes, rejection
   reasons - keeps the line breaks the author put in it. */
.preserve-breaks { white-space: pre-wrap; }

/* Column widths for the label side of a definition-style table, and the narrow
   controls that sit inside a table row. */
.col-w-sm { width: 116px; }
.col-w-md { width: 180px; }
.col-w-lg { width: 232px; }
.col-check { width: 36px; text-align: center; }
.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--brand-soft); border: 1px solid var(--brand); border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; }
.bulk-bar[hidden] { display: none; }
.measure-narrow { max-width: 280px; }
.field-compact { min-height: 0; min-width: 220px; }
.field-compact select, .field-compact input { min-height: 38px; }
.chip-gap { margin: 2px var(--s-1) 2px 0; }

/* Static illustrative progress on the public workspace preview. It is a picture
   of the product, not a live reading, so it is a class rather than an inline
   width sitting in the middle of the markup. */
.workspace-progress-demo { width: 68%; }

/* --- Sortable column headers ---------------------------------------------
   These were unstyled links inheriting the header colour, so the column the
   table was actually ordered by looked identical to every other column and the
   sort glyph sat there permanently at full strength. Now the arrow is quiet
   until you hover, and the active column is the only one that carries it. */
.sort-link { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.sort-link svg { color: var(--border-strong); transition: color .18s ease, transform .18s ease; }
.sort-link:hover { color: var(--ink); }
.sort-link:hover svg { color: var(--ink-faint); }
.sort-link.sorted { color: var(--brand-dark); font-weight: 800; }
.sort-link.sorted svg { color: var(--brand); }
th[aria-sort="descending"] .sort-link.sorted svg { transform: rotate(180deg); }
th.numeric .sort-link { flex-direction: row-reverse; }

/* --- Attendance roster ---------------------------------------------------
   A register, not a form. Marking a class used to be one <select> plus one
   always-visible text box per learner, which for a cohort of twenty rendered
   forty controls and took twenty dropdown interactions. Here each learner is a
   row and each mark is one tap on a segmented control. The posted field names
   are unchanged - attendance[id] and correction_reason[id] - so the controller
   receives exactly what it did before. */
.attendance-card { padding-bottom: 0; }
.roster-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding: var(--s-4) var(--s-5); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.roster-bar > div:first-child { display: grid; gap: 2px; min-width: 0; }
.roster-bulk { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.roster { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.roster-row { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(0, .85fr); align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--border); }
.roster-row:last-child { border-bottom: 0; }
.roster-row:hover { background: var(--surface-soft); }
.roster-learner { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.roster-learner > span:last-child { display: grid; gap: 1px; min-width: 0; }
.roster-learner strong { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.roster-learner small { font-size: 12px; }
.roster-learner .avatar { width: 34px; height: 34px; background: var(--surface-muted); color: var(--ink-soft); font-size: 12px; }

/* Segmented control. The radios stay in the DOM, keyboard-reachable and
   arrow-key navigable as a real radio group; the labels are what you see. */
.roster-marks { display: flex; gap: 0; margin: 0; padding: 2px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); }
.roster-mark { padding: 6px 13px; border-radius: 99px; color: var(--ink-soft); font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: color .15s ease, background-color .15s ease; }
.roster-mark:hover { color: var(--ink); background: var(--surface-muted); }
.roster-marks input:focus-visible + .roster-mark { outline: 3px solid rgb(3 75 152 / 32%); outline-offset: 1px; }
.roster-marks input:checked + .roster-mark.is-present { color: #fff; background: var(--green); }
.roster-marks input:checked + .roster-mark.is-late { color: #fff; background: var(--amber); }
.roster-marks input:checked + .roster-mark.is-absent { color: #fff; background: var(--danger); }
.roster-marks input:checked + .roster-mark.is-excused { color: #fff; background: var(--info); }
.roster-marks input:checked + .roster-mark.is-unmarked { color: var(--ink); background: var(--surface-muted); }

.roster-reason input { min-height: 36px; padding: 6px 10px; font-size: 13px; border-color: var(--border); background: var(--surface-soft); }
.roster-reason input:focus { background: var(--surface); }

.roster-save { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0 calc(var(--s-6) * -1); padding: var(--s-4) var(--s-6); background: var(--surface); border-top: 1px solid var(--border); }

@media (max-width: 1100px) {
  .roster-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s-3); }
  .roster-reason { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .roster-row { grid-template-columns: 1fr; padding-inline: var(--s-4); }
  .roster-marks { overflow-x: auto; scrollbar-width: none; }
  .roster-marks::-webkit-scrollbar { display: none; }
  .roster-bar, .roster { border-radius: var(--radius-sm); }
  .roster-save { margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }
  .roster-save .btn { width: 100%; }
}

/* Dark mode inverts the status colours so they read as text on a dark panel;
   anywhere one of them is a *fill* rather than a text colour, the label on top
   has to flip to dark for the same reason. */
[data-theme="dark"] .roster-marks input:checked + .roster-mark { color: var(--navy-deep); }
[data-theme="dark"] .learner-progress { background: var(--green); }

/* Course-card progress. The bar only exists when there is a real proportion to
   show; a curriculum with nothing released yet says so in words instead. */
.learner-course-progress { display: grid; gap: 6px; }
.learner-course-progress > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); font-size: 13px; }
.learner-course-progress > div > span { color: var(--ink-soft); }
.learner-course-progress > div > b { text-transform: capitalize; }
.learner-course-progress small { font-size: 12px; }
.learner-course-progress .learner-progress { display: block; background: var(--brand); }

/* ==========================================================================
   Scrollbars
   One thin, branded scrollbar for the whole app — the page itself and every
   internal scroll container (sidebar, drawers, tables, the search panel, the
   mobile nav sheet). Firefox gets scrollbar-width/scrollbar-color; WebKit
   /Blink get the ::-webkit-scrollbar pseudo-elements. Both read the same
   surface/border tokens, so light and dark mode need no separate rules, and
   containers that deliberately hide their bar (.tabs, .quick-actions,
   .roster-marks — compact chip strips where a visible track would be noise)
   keep working: a class selector always outranks the plain pseudo-element
   below in specificity, regardless of source order.
   ========================================================================== */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--border-strong);
  background-clip: padding-box;
  border: 2px solid transparent;
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--ink-faint); }

/* Internal containers use a slightly slimmer bar and sit it flush against
   their own edge rather than the page's. */
.sidebar,
.table-wrap,
.drawer-body,
.search-panel,
.category-pills,
.public-primary-links,
.menu-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
.sidebar::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.drawer-body::-webkit-scrollbar,
.search-panel::-webkit-scrollbar,
.category-pills::-webkit-scrollbar,
.public-primary-links::-webkit-scrollbar,
.menu-panel::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* A horizontal-only strip (a table, a filter row) shows a visible track only
   while the pointer is nearby, so a short row of chips doesn't carry a
   permanent grey hairline under it at rest. */
.table-wrap,
.category-pills {
  scrollbar-color: transparent transparent;
}
.table-wrap:hover,
.table-wrap:focus-within,
.category-pills:hover,
.category-pills:focus-within {
  scrollbar-color: var(--border-strong) transparent;
}
.table-wrap::-webkit-scrollbar-thumb,
.category-pills::-webkit-scrollbar-thumb { background-color: transparent; }
.table-wrap:hover::-webkit-scrollbar-thumb,
.table-wrap:focus-within::-webkit-scrollbar-thumb,
.category-pills:hover::-webkit-scrollbar-thumb,
.category-pills:focus-within::-webkit-scrollbar-thumb { background-color: var(--border-strong); }

@media (max-width: 920px) {
  .policy-nav { scrollbar-width: none; }
  .policy-nav::-webkit-scrollbar { display: none; }
}