/* Scrollwell LMS — one stylesheet for participant and admin pages.
   Built from the Scrollwell Brandbook v1.0 (September 2026), parts G–I:
   60% white / near-white, 30% ink, 10% one blue. Overpass for headings and
   buttons, Roboto for everything else. Green means verified — nothing else.
   No gradients, no large blue surfaces, at most one dark (ink) card per page,
   nothing fixed to the top of the screen. Mobile-first; tap targets ≥ 44px. */

:root {
  /* G1 · the palette */
  --surface: #ffffff;
  --bg: #f7f9fc;
  --ink: #0d1b2e;
  --ink-2: #4a5568;
  --ink-3: #5c6b7f;
  --line: #e6e6e6;
  --blue: #127bcb;          /* THE accent: icons, rules, large numbers */
  --blue-deep: #0f69ac;     /* small blue text and solid button fills */
  --blue-light: #66aad7;
  --blue-soft: #99c6e4;     /* hover borders */
  --blue-tint: #eaf2fb;     /* icon squares, eyebrow pills, tinted rows */
  --verified: #16a870;      /* verified outcomes only */
  --verified-ink: #0e7a51;  /* the same green where it meets small text */
  --verified-tint: #e7f6ef;
  --star: #d97706;  --star-ink: #b45309;   /* star glyphs only */
  /* Functional states (not brand colours): form fields, errors, warnings, live */
  --field: #949eab;         /* 3:1 border so a field is visible as a field */
  --err: #b42318;  --err-tint: #fdeeec;  --err-ink: #5e140d;
  --warn-ink: #6f4700; --warn-tint: #fff6e5; --warn-rule: #e2b04a;
  --live: #c8261b;
  --quiet: #f1f4f8;
  /* Older names still used in a few inline styles — mapped onto the brand palette.
     A "done" tick is blue (green is kept for verified outcomes). */
  --ok: var(--blue); --warn: var(--warn-ink); --brand: var(--blue-deep); --muted: var(--ink-3); --info: var(--blue-deep);
  /* I2 · I3 */
  --r-btn: 6px; --r-card: 10px; --r-panel: 12px; --r-media: 14px; --r-pill: 50px;
  --shadow: 0 1px 2px rgba(13, 27, 46, .04);
  --shadow-hover: 0 12px 28px rgba(13, 27, 46, .10);
  --shadow-menu: 0 16px 36px rgba(13, 27, 46, .16);
  --head: 'Overpass', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --top: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font); font-size: 14.5px; line-height: 1.68;
  color: var(--ink-2); background: var(--bg); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
strong, b { color: var(--ink); font-weight: 700; }
h1, h2, h3, h4 { font-family: var(--head); color: var(--ink); line-height: 1.15; margin: 0 0 .55em; text-wrap: balance; }
h1 { font-size: 30px; font-weight: 900; letter-spacing: -.5px; }
h2 { font-size: 19px; font-weight: 800; }
h3 { font-size: 16px; font-weight: 800; }
h4 { font-size: 15px; font-weight: 800; }
p { margin: 0 0 .9em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }
code, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 3px solid rgba(18, 123, 203, .45); outline-offset: 2px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; top: 8px; background: #fff; padding: 8px 12px; border-radius: var(--r-btn); z-index: 100; }
.skip:focus { left: 8px; }
.ic { width: 20px; height: 20px; flex: none; }
.ic.sm { width: 15px; height: 15px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------ top bar */
/* Not sticky here. On a wide screen m3.css makes it stick, because the menu beside it sticks and
   the two have to move as one; on a phone it scrolls away and gives the page its full height. */
.topbar {
  position: relative; z-index: 40; height: var(--top); display: flex; align-items: center; gap: 12px;
  padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none !important; min-width: 0; }
/* The Scrollwell logo lock-up (938×313 artwork with white space above and below the word,
   so it is shown 50px high — 42px on phones) and a small area label beside it. */
.brand-logo { display: block; height: 50px; width: auto; max-width: 170px; flex: 0 0 auto; object-fit: contain; }
.brand-sub { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3);
  border-left: 1px solid var(--line); padding-left: 10px; line-height: 1.3; white-space: nowrap; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.top-link { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 500; font-size: 14px; padding: 8px 10px; border-radius: var(--r-btn); }
.top-link:hover { background: var(--quiet); text-decoration: none; color: var(--ink); }
.top-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: var(--r-btn); color: var(--ink);
  font-family: var(--head); font-weight: 700; font-size: 14px; border: 1.5px solid var(--line); background: var(--surface);
}
.top-pill .ic { color: var(--blue); }
.top-pill:hover { text-decoration: none; border-color: var(--blue-soft); }
.icon-btn {
  width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: var(--r-btn); border: 0;
  background: transparent; color: var(--ink); cursor: pointer;
}
.icon-btn:hover { background: var(--quiet); }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex: none;
  background: var(--blue-tint); color: var(--blue-deep); font-family: var(--head); font-weight: 800; font-size: 14px; padding-top: 2px;
}
.user-menu { position: relative; }
.user-menu > summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 3px 6px 3px 3px; border-radius: var(--r-pill); }
.user-menu > summary:hover { background: var(--quiet); }
.user-menu > summary::-webkit-details-marker { display: none; }
.user-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; color: var(--ink-2); }
.user-menu .menu {
  position: absolute; right: 0; top: 48px; width: 264px; background: #fff; color: var(--ink); border-radius: var(--r-panel);
  box-shadow: var(--shadow-menu); padding: 8px; z-index: 60; border: 1px solid var(--line);
}
.menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu-head strong { display: block; font-size: 14px; word-break: break-all; }
.menu-head small { color: var(--ink-3); font-size: 12.5px; word-break: break-all; }
.menu a, .menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: var(--r-btn); border: 0; background: none;
  color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; text-align: left;
}
.menu a:hover, .menu button:hover { background: var(--quiet); text-decoration: none; }
.menu .ic { color: var(--ink-3); }
.menu form { margin: 0; }

/* ------------------------------------------------------------------ shell */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: calc(100vh - var(--top)); background: var(--bg); }
.shell.no-side { grid-template-columns: minmax(0, 1fr); }
.side {
  background: var(--surface); padding: 18px 12px; display: flex; flex-direction: column; gap: 2px;
  border-right: 1px solid var(--line);
}
.side nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 11px; font-weight: 700; color: var(--ink-3); padding: 18px 12px 6px; letter-spacing: 1px; text-transform: uppercase; }
.nav-label:first-child { padding-top: 4px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 8px;
  color: var(--ink-2); font-weight: 500; font-size: 14.5px;
}
.nav-item .ic { color: var(--ink-3); }
.nav-item:hover { background: var(--quiet); text-decoration: none; color: var(--ink); }
.nav-item.active { background: var(--blue-tint); color: var(--blue-deep); font-weight: 700; }
.nav-item.active .ic { color: var(--blue); }
.nav-item .count {
  margin-left: auto; background: var(--blue-deep); color: #fff; font-size: 11.5px; font-weight: 700; min-width: 22px; height: 22px;
  border-radius: var(--r-pill); display: grid; place-items: center; padding: 0 6px;
}
.side-foot { margin-top: auto; padding: 16px 12px 4px; font-size: 12.5px; color: var(--ink-3); }
.main { padding: 30px 34px 48px; min-width: 0; width: 100%; max-width: 1218px; }
.shell.no-side .main { margin: 0 auto; }
.scrim { position: fixed; inset: 0; background: rgba(13, 27, 46, .45); z-index: 30; }

/* --------------------------------------------------------------- helpers */
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.center { text-align: center; }
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.mid { max-width: 820px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.between { justify-content: space-between; }
.stack > * + * { margin-top: 16px; }
.mt { margin-top: 20px; } .mb { margin-bottom: 20px; } .mt0 { margin-top: 0; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.split > * { min-width: 0; }
@media (max-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr); } .split > .first-sm { order: -1; } }
.inline { display: inline; margin: 0; }
.nowrap { white-space: nowrap; }
.strike { text-decoration: line-through; color: var(--ink-3); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.only-sm, .only-md { display: none !important; }
.req { color: var(--err); }
.lead { font-size: 16px; color: var(--ink-2); max-width: 62ch; }
.prose, .page-head p, .lead { max-width: 62ch; }

/* Eyebrow pill: 11px caps label on the blue tint, one above a section heading (H/I4). */
.eyebrow {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--font); font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--blue-deep); background: var(--blue-tint); padding: 5px 11px; border-radius: var(--r-pill);
  margin-bottom: 12px; line-height: 1.4;
}

/* ------------------------------------------------------------ page heads */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.page-head h1 { margin: 0; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 15.5px; }
.crumbs { font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.crumbs a { color: var(--ink-3); }
/* Home screens: left-aligned like every other page (Brandbook H — never centre a paragraph). */
.greet { text-align: left; padding: 4px 0 6px; }
.greet h1 { font-size: 30px; }
.greet p { color: var(--ink-3); font-size: 15px; margin: 4px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin: 18px 0 8px; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-btn);
  background: #fff; color: var(--ink); border: 1.5px solid var(--line); font-family: var(--head); font-weight: 700; font-size: 14px;
  transition: transform .18s ease, border-color .18s ease;
}
.chip-btn:hover { border-color: var(--blue-soft); text-decoration: none; transform: translateY(-1px); }
.chip-btn .ic { color: var(--blue); }
.hero-card {
  margin: 8px 0 28px; background: #fff; border-radius: var(--r-panel); padding: 18px 20px;
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.hero-card .chips { margin: 0; }
.section-title { font-size: 22px; font-weight: 900; margin: 32px 0 14px; letter-spacing: -.3px; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 22px 24px; box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }
.card h2:first-child, .card h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head h2, .card-head h3 { margin: 0; }
/* One hover system for every card that is clickable (I2). */
.list-card, .hover-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.list-card:hover, .hover-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); border-color: var(--blue-soft); }
.list-card + .list-card { margin-top: 16px; }
.lc-main { display: flex; align-items: center; gap: 16px; padding: 20px 24px; flex-wrap: wrap; }
.lc-icon { width: 46px; height: 46px; border-radius: var(--r-card); background: var(--blue-tint); color: var(--blue); display: grid; place-items: center; flex: none; }
.lc-title { font-family: var(--head); font-size: 19px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.lc-title a { color: var(--ink); }
.lc-sub { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
.lc-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lc-foot { border-top: 1px solid var(--line); padding: 12px 24px; display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; background: var(--bg); }
.stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--shadow); }
.stat .n { font-family: var(--head); font-size: 30px; font-weight: 900; letter-spacing: -.5px; color: var(--blue); line-height: 1.1; }
.stat .l { color: var(--ink-3); font-size: 12.5px; margin-top: 4px; }
.stat.bad .n { color: var(--err); } .stat.ok .n { color: var(--ink); } .stat.warn .n { color: var(--warn-ink); }
/* Stat strip: numbers in one bordered row (I4). */
/* Cells wrap onto new rows and stretch to fill them; the negative margin tucks the outer
   hairlines under the frame, so every divider stays clean at any width. */
.stat-strip, .facts { display: flex; flex-wrap: wrap; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); }
.stat-strip > div, .facts > div { flex: 1 1 160px; padding: 14px 20px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); margin: -1px 0 0 -1px; }
.stat-strip .n { font-family: var(--head); font-size: 26px; font-weight: 900; color: var(--blue); line-height: 1.15; letter-spacing: -.3px; }
.stat-strip .l { font-size: 12.5px; color: var(--ink-3); }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 14px; font-size: 14.5px; }
.kv dt { color: var(--ink-3); } .kv dd { margin: 0; word-break: break-word; color: var(--ink); }
.kv.money { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; }
.kv.money dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
/* CTA band: inline action point with a blue rule on the left (I4). */
.cta-band { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r-card); padding: 18px 22px; }
.cta-band > div { flex: 1 1 260px; }
/* Closing CTA: the one ink surface on a page, at the end (I4). */
.cta-close { background: var(--ink); color: #c9d3e0; border-radius: var(--r-panel); padding: 34px 36px; margin-top: 28px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.cta-close > div { flex: 1 1 320px; }
.cta-close h2 { color: #fff; font-size: 24px; font-weight: 900; margin-bottom: 6px; }
.cta-close p { margin: 0; color: #c9d3e0; }
.cta-close strong { color: #fff; }
.cta-close .btn { background: #fff; color: var(--ink); border-color: #fff; }

/* Public programme page */
.banner { display: block; width: 100%; max-height: 280px; object-fit: cover; border-radius: var(--r-media); margin-bottom: 20px; border: 1px solid var(--line); }
.prog-hero { margin-bottom: 26px; }
.prog-hero h1 { font-size: 38px; max-width: 26ch; }
.prog-hero .tagline { font-size: 16.5px; color: var(--ink-2); max-width: 62ch; margin: 4px 0 0; }
.facts { margin: 20px 0 0; }
.facts dt { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); }
.facts dd { margin: 4px 0 0; font-family: var(--head); font-weight: 800; font-size: 16px; color: var(--ink); line-height: 1.3; }
.leave-with { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.leave-with li { display: flex; gap: 12px; align-items: flex-start; }
.leave-with .ic { color: var(--blue); margin-top: 3px; }
.proof { font-size: 13px; color: var(--ink-3); border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.proof strong { color: var(--ink); }
.proof .stars { color: var(--star); letter-spacing: 1px; }
.agenda { list-style: none; padding: 0; margin: 0; }
.agenda li { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 4px 18px; padding: 16px 0; border-top: 1px solid var(--line); }
.agenda li:first-child { border-top: 0; padding-top: 4px; }
.agenda .when { color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.agenda .when strong { font-family: var(--head); font-weight: 800; color: var(--blue-deep); font-size: 14px; }
.agenda .topic { font-family: var(--head); font-weight: 800; color: var(--ink); font-size: 16px; line-height: 1.3; }
.agenda .rp { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 14px; }
.agenda .rp img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
@media (max-width: 640px) { .agenda li { grid-template-columns: minmax(0, 1fr); } .prog-hero h1 { font-size: 28px; } }
/* Mobile action bar: bottom only, below 860px, two buttons, no brand, no nav (I4). */
.action-bar { display: none; }
@media (max-width: 860px) {
  .action-bar { display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: #fff; border-top: 1px solid var(--line);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 22px rgba(13, 27, 46, .08); }
  .action-bar .btn { flex: 1; }
  body.has-action-bar .main { padding-bottom: 96px; }
}
/* Classroom (day-by-day materials) */
.links-strip .link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 22px; margin-top: 14px; }
.links-strip .link-grid a { word-break: break-all; }
.class-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.class-head .class-title { flex: 1 1 240px; min-width: 0; }
.class-head .class-title strong { font-family: var(--head); font-size: 17px; font-weight: 800; }
.class-day-no { flex: 0 0 52px; width: 52px; height: 52px; border-radius: var(--r-card); background: var(--blue-tint); color: var(--blue-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--head); font-weight: 900; font-size: 19px; line-height: 1.05; }
.class-day-no small { font-family: var(--font); font-size: 10px; letter-spacing: 1px; font-weight: 700; color: var(--blue-deep); }
.class-day-no .ic { color: var(--blue); }
.mat-list { list-style: none; margin: 12px 0 0; padding: 0; }
.mat-list .res-item { border-top: 1px solid var(--line); }
.add-mat { margin-top: 12px; border: 0; border-top: 1px dashed var(--line); border-radius: 0; padding-top: 10px; background: none; }
.add-mat > summary { padding: 6px 0; color: var(--blue-deep); font-family: var(--head); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.add-mat > summary::after { content: none; }
.add-mat > *:not(summary) { padding: 0; }
.add-mat form { margin-top: 10px; }
.today-mat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 14px 0; }
/* AI tools library */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.tool { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.tool h3 { margin: 0; font-size: 17px; }
.tool .btn { margin-top: auto; align-self: flex-start; }
/* Certificate details */
.cert-preview { font-family: var(--head); font-size: 17px; line-height: 1.5; color: var(--ink); border-left: 3px solid var(--blue); padding: 6px 0 6px 14px; margin: 4px 0 14px; }
.cert-preview strong { font-weight: 900; font-size: 19px; }
/* Sign-in: "use a password instead" */
.pw-login { margin-top: 18px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.pw-login > summary { padding: 14px 0 4px; color: var(--blue-deep); font-weight: 700; justify-content: flex-start; gap: 8px; }
.pw-login > *:not(summary) { padding: 10px 0 0; }
.slug-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.slug-row input { flex: 1 1 260px; min-width: 0; }

/* ----------------------------------------------------------------- buttons */
/* I1: primary = Blue Deep fill, secondary = transparent with a 1.5px line, radius 6px, Overpass 700. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 24px;
  border-radius: var(--r-btn); border: 1.5px solid var(--blue-deep); background: var(--blue-deep); color: #fff;
  font-family: var(--head); font-weight: 700; font-size: 14.5px; line-height: 1; cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: transform .15s ease, opacity .15s ease, border-color .15s ease; padding-top: 2px;
}
.btn:hover { transform: translateY(-1px); opacity: .9; }
.btn:active { transform: none; }
.btn:disabled, .btn.disabled { background: #c5cdd8; border-color: #c5cdd8; color: #fff; cursor: not-allowed; transform: none; opacity: 1; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost .ic { color: var(--blue); }
.btn-ghost:hover { opacity: 1; border-color: var(--blue-soft); background: #fff; }
.btn-light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-danger { background: var(--err); border-color: var(--err); }
.btn-ok, .btn-live { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13.5px; padding-top: 2px; }
.btn-block { width: 100%; }
.btn-link { background: none; border: 0; color: var(--blue-deep); padding: 0; min-height: 0; font-weight: 700; cursor: pointer; font: inherit; }
.round-btn { width: 44px; height: 44px; border-radius: var(--r-btn); border: 1.5px solid var(--line); display: inline-grid; place-items: center; color: var(--ink); background: #fff; }
.round-btn:hover { border-color: var(--blue-soft); text-decoration: none; }

/* ------------------------------------------------------------------ forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--ink); }
.field .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; line-height: 1.5; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=time],
input[type=datetime-local], input[type=url], input[type=tel], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--field); border-radius: var(--r-btn); background: #fff;
  font: inherit; font-size: 15px; color: var(--ink);
}
input::placeholder, textarea::placeholder { color: #8a95a3; }
textarea { min-height: 110px; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue-deep); box-shadow: 0 0 0 3px rgba(18, 123, 203, .18); }
input[readonly] { background: var(--bg); color: var(--ink-3); }
input[type=file] { font: inherit; font-size: 14px; max-width: 100%; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 14px; cursor: pointer; font-size: 14.5px; color: var(--ink); }
.check input { width: 19px; height: 19px; margin-top: 2px; flex: none; accent-color: var(--blue-deep); }
.check small { display: block; color: var(--ink-3); font-size: 12.5px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 18px; }
.picker { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.picker label { font-weight: 700; font-size: 13px; color: var(--ink-3); }
.picker select { width: auto; min-width: 260px; max-width: 100%; }
.code-input { font-family: var(--mono); letter-spacing: .25em; text-transform: uppercase; font-size: 20px !important; text-align: center; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 52px; }
.pw-wrap button { position: absolute; right: 4px; top: 3px; height: 38px; width: 44px; border: 0; background: none; color: var(--ink-3); cursor: pointer; border-radius: var(--r-btn); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px; margin: 0 0 16px; }
legend { font-family: var(--head); font-weight: 800; padding: 0 6px; font-size: 14px; color: var(--ink); }

/* ---------------------------------------------------------------- notices */
/* Callouts with a coloured rule on the left, like the Brandbook's own boxes. */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--blue); background: var(--blue-tint); color: var(--ink); font-size: 14.5px; }
.notice > div { flex: 1; min-width: 0; }
.notice > .ic { color: var(--blue); margin-top: 2px; }
.notice.ok, .notice.info { background: var(--blue-tint); border-left-color: var(--blue); }
.notice.warn { background: var(--warn-tint); border-left-color: var(--warn-rule); }
.notice.warn > .ic { color: var(--warn-ink); }
.notice.error { background: var(--err-tint); border-left-color: var(--err); color: var(--err-ink); }
.notice.error > .ic { color: var(--err); }
.notice a { font-weight: 700; }

/* ------------------------------------------------------------------ chips */
/* Tags: 11–12px, 600. Blue for "coming up", neutral for done, green ONLY for verified (issued, present, valid). */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  background: var(--quiet); color: var(--ink-2); white-space: nowrap; line-height: 1.7; }
.chip .ic { width: 13px; height: 13px; }
.chip-live { background: var(--err-tint); color: var(--live); font-weight: 700; }
.chip-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); animation: pulse 1.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200, 38, 27, .5); } 70% { box-shadow: 0 0 0 7px rgba(200, 38, 27, 0); } 100% { box-shadow: 0 0 0 0 rgba(200, 38, 27, 0); } }
.chip-upcoming, .chip-open, .chip-running, .chip-queued, .chip-in_progress, .chip-pending, .chip-sending, .chip-enrolled { background: var(--blue-tint); color: var(--blue-deep); }
.chip-completed, .chip-approved, .chip-eligible, .chip-active, .chip-sent, .chip-passed, .chip-submitted { background: var(--quiet); color: var(--ink); }
.chip-issued, .chip-valid, .chip-verified, .chip-present { background: var(--verified-tint); color: var(--verified-ink); }
.chip-rescheduled, .chip-on_hold, .chip-recommended, .chip-draft, .chip-superseded, .chip-expired { background: var(--warn-tint); color: var(--warn-ink); }
.chip-cancelled, .chip-rejected, .chip-blocked, .chip-failed, .chip-revoked, .chip-not_eligible { background: var(--err-tint); color: var(--err); }
.chip-archived, .chip-dropped, .chip-closed, .chip-skipped { background: var(--quiet); color: var(--ink-3); }

/* ----------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 1px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
table.data td strong { color: var(--ink); }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: #fafcfe; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td, table.grid th { text-align: center; }
table.grid td:first-child, table.grid th:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
.att-yes { color: var(--verified-ink); font-weight: 700; } .att-no { color: #c3c9d3; }
.pager { display: flex; align-items: center; gap: 12px; justify-content: center; margin-top: 16px; font-size: 13.5px; color: var(--ink-3); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.toolbar .field { margin: 0; }

/* ----------------------------------------------------------- today card */
/* The one ink surface on the programme page. Solid, no gradient. */
.today { border-radius: var(--r-panel); overflow: hidden; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.today-top { background: var(--ink); color: #fff; padding: 22px 24px; }
.today-top .row { gap: 8px; }
.today-top .chip { background: rgba(255, 255, 255, .12); color: #fff; }
.today-top .chip-live { background: #fff; color: var(--live); }
.today-top h2 { color: #fff; font-size: 24px; font-weight: 900; margin: 12px 0 6px; letter-spacing: -.3px; }
.today-top .meta { color: #c9d3e0; font-size: 14.5px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.today-top .meta span { display: inline-flex; align-items: center; gap: 6px; }
.today-top .meta .ic { color: var(--blue-light); }
.today-body { padding: 22px 24px; }
.today-body .join { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.join-note { font-size: 13.5px; color: var(--ink-3); margin-top: 10px; }
.attend-box { margin-top: 18px; padding: 16px; border-radius: var(--r-card); background: var(--bg); border: 1px dashed #cfd6df; }
.attend-box form { display: flex; gap: 10px; flex-wrap: wrap; }
.attend-box input { flex: 1 1 160px; }
.done-box { display: flex; align-items: center; gap: 10px; color: var(--verified-ink); font-weight: 700; }
.next-card .day { width: 54px; height: 54px; border-radius: var(--r-card); background: var(--blue-tint); color: var(--blue-deep); display: grid; place-items: center; font-weight: 800; flex: none; text-align: center; line-height: 1.05; font-size: 12px; font-family: var(--head); }
.next-card .day b { font-size: 21px; display: block; font-weight: 900; color: var(--blue-deep); }
.tl-item.done .tl-day { background: var(--quiet); }
.tl-item.live .tl-day { background: var(--err-tint); border-color: #f4c7c2; color: var(--live); }
.tl-item.moved .tl-body { opacity: .75; }
.tl-flags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; align-items: center; }

/* Step rail: numbered circles joined by a 2px blue-soft line, for sequences only (I4). */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 0; }
.steps li { position: relative; padding: 0 0 18px 44px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: #fff;
  border: 2px solid var(--blue); color: var(--blue-deep); font-family: var(--head); font-weight: 900; font-size: 14px; display: grid; place-items: center; padding-top: 2px; }
.steps li::after { content: ''; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 2px; background: var(--blue-soft); }
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { content: none; }
.steps strong { display: block; font-family: var(--head); font-weight: 800; }

/* -------------------------------------------------------------- ring etc */
.ring { position: relative; width: 58px; height: 58px; display: inline-block; flex: none; }
.ring svg { width: 58px; height: 58px; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: #e8ecf1; stroke-width: 5; }
.ring-fg { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 13px; font-family: var(--head); }
.gate { list-style: none; padding: 0; margin: 0; }
.gate li { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.gate li:last-child { border-bottom: 0; }
.gate li > .ic { color: var(--blue); }
.gate .yes { color: var(--verified-ink); } .gate .no { color: var(--err); }
.empty { text-align: center; padding: 38px 16px; color: var(--ink-3); }
.empty .ic { width: 32px; height: 32px; color: var(--blue); margin-bottom: 8px; }
.empty h3, .empty .empty-title { color: var(--ink); font-size: 1.05rem; font-weight: 700; margin: 0 0 4px; font-family: var(--head); line-height: 1.15; }
.person { display: flex; gap: 14px; align-items: flex-start; }
.person img, .person .ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; background: var(--blue-tint); color: var(--blue-deep); display: grid; place-items: center; font-weight: 800; font-size: 20px; font-family: var(--head); }
.res-item { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.res-item:last-child { border-bottom: 0; }
.res-type { width: 44px; height: 44px; border-radius: var(--r-card); background: var(--blue-tint); color: var(--blue-deep); display: grid; place-items: center; flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .5px; }
.res-main { flex: 1; min-width: 0; }
.res-main strong { display: block; overflow-wrap: anywhere; color: var(--ink); }

/* ------------------------------------------------------------------- quiz */
.quiz-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 14px; margin-bottom: 16px; box-shadow: var(--shadow-hover); }
.timer { font-family: var(--mono); font-weight: 700; font-size: 18px; color: var(--ink); }
.timer.low { color: var(--err); }
.save-state { font-size: 13px; color: var(--ink-3); }
.q-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 20px; margin-bottom: 14px; }
.q-card legend { font-family: var(--font); font-size: 15.5px; font-weight: 600; padding: 0; margin-bottom: 12px; line-height: 1.5; white-space: pre-wrap; color: var(--ink); }
.q-card fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.opt { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 8px; cursor: pointer; color: var(--ink); }
.opt:hover { border-color: var(--blue-soft); }
.opt input { width: 19px; height: 19px; margin-top: 2px; accent-color: var(--blue-deep); flex: none; }
.opt:has(input:checked) { border-color: var(--blue-deep); background: var(--blue-tint); }
.opt.right { border-color: #a9dcc5; background: var(--verified-tint); }
.opt.wrong { border-color: #f1c2bc; background: var(--err-tint); }
.rating { display: flex; gap: 6px; flex-wrap: wrap; }
.rating label { position: relative; }
.rating input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating span { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 6px; border-radius: var(--r-btn); border: 1.5px solid var(--line); background: #fff; font-weight: 700; cursor: pointer; color: var(--ink); font-family: var(--head); }
.rating input:checked + span { background: var(--blue-deep); color: #fff; border-color: var(--blue-deep); }
.rating input:focus-visible + span { outline: 3px solid rgba(18, 123, 203, .45); outline-offset: 2px; }

/* ---------------------------------------------------------- content pages */
.prose h2 { margin-top: 1.3em; } .prose h3 { margin-top: 1.4em; }
.prose ol, .prose ul { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
details { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 10px; }
details > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 10px; }
details > summary::-webkit-details-marker { display: none; }
details > summary::after { content: '+'; font-size: 20px; line-height: 1; color: var(--blue); font-weight: 400; }
details[open] > summary::after { content: '−'; }
details > *:not(summary) { padding: 0 18px 14px; margin: 0; }
details ol, details ul { padding-left: 38px; }
.user-menu details, details.user-menu { background: none; border: 0; margin: 0; }
details.user-menu > summary { padding: 3px 6px 3px 3px; }
details.user-menu > summary::after { content: none; }
.faq-cat { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 1px; margin: 24px 0 10px; }

/* ------------------------------------------------------------------ login */
.auth-wrap { min-height: calc(100vh - var(--top)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--bg); }
.auth-hero { background: var(--ink); color: #c9d3e0; padding: 56px 56px; display: flex; flex-direction: column; justify-content: center; }
.auth-hero h1 { color: #fff; font-size: 38px; max-width: 16ch; }
.auth-hero p { color: #c9d3e0; font-size: 16px; max-width: 46ch; }
.auth-hero ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.auth-hero li { display: flex; gap: 10px; align-items: center; color: #e3e9f1; }
.auth-hero li .ic { color: var(--blue-light); }
.auth-hero .eyebrow { background: rgba(255, 255, 255, .1); color: #fff; align-self: flex-start; }
.auth-hero .proof { color: #aebbcc; border-top-color: rgba(255, 255, 255, .14); max-width: 46ch; }
.auth-hero .proof strong { color: #fff; }
.auth-form { display: flex; align-items: center; justify-content: center; padding: 40px 22px; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-panel); padding: 30px; box-shadow: var(--shadow); }
.auth-card h2 { font-size: 24px; font-weight: 900; margin-bottom: 4px; }
.auth-card .sub { color: var(--ink-3); margin-bottom: 20px; }
.or { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: 12.5px; margin: 20px 0; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-links { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 16px; font-size: 14px; }

/* ----------------------------------------------------------------- footer */
.foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; color: var(--ink-3); }
.foot a { color: var(--ink-3); }
.foot .desc { flex: 1 1 100%; color: var(--ink-2); }
.foot .desc strong { font-family: var(--head); font-weight: 800; }
.tabbar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; background: #fff; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 20px rgba(13, 27, 46, .06); }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 58px; font-size: 11.5px; color: var(--ink-2); font-weight: 600; }
.tabbar a .ic { color: var(--ink-3); }
.tabbar a:hover { text-decoration: none; color: var(--blue-deep); }
.tabbar a:hover .ic { color: var(--blue); }

/* -------------------------------------------------------------- responsive */
/* Breakpoints from I3: 1000 · 900 · 860 · 820 · 768 · 600 · 480 */
@media (max-width: 1000px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .a-app .only-md { display: inline-grid !important; }
  .a-app .shell { grid-template-columns: minmax(0, 1fr); }
  .a-app .side { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; overflow-y: auto; }
  .a-app.nav-open .side { transform: none; box-shadow: var(--shadow-menu); }
  .auth-wrap { grid-template-columns: minmax(0, 1fr); }
  .auth-hero { padding: 30px 22px; }
  .auth-hero h1 { font-size: 28px; }
  .auth-hero ul { display: none; }
}
@media (max-width: 820px) {
  .p-app .only-sm { display: inline-grid !important; }
  .p-app nav.tabbar.only-sm { display: grid !important; }
  .p-app .shell { grid-template-columns: minmax(0, 1fr); }
  .p-app .side { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; z-index: 50; transform: translateX(-100%); transition: transform .2s ease; overflow-y: auto; }
  .p-app.nav-open .side { transform: none; box-shadow: var(--shadow-menu); }
  .p-app.signed-in .main { padding-bottom: 96px; }
  .hide-sm { display: none !important; }
}
@media (max-width: 600px) {
  .topbar { padding: 0 12px; gap: 6px; }
  .main { padding: 20px 14px 32px; }
  h1 { font-size: 26px; }
  .greet h1 { font-size: 26px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 18px; }
  .lc-main { padding: 16px; }
  .lc-actions { margin-left: 0; width: 100%; }
  .lc-foot { padding: 12px 16px; }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .today-top, .today-body { padding: 18px; }
  .auth-card { padding: 22px; }
  .picker select { min-width: 0; width: 100%; }
  .brand-logo { height: 42px; }
  .brand-sub { display: none; }
  .hero-card { padding: 16px; }
  .facts > div, .stat-strip > div { flex-basis: 130px; padding: 12px 16px; }
  .cta-close { padding: 24px 20px; }
}

/* ======================================================================
   App polish (Update 12): quick search, toasts, busy buttons, progress,
   swipeable shortcut rows, the current tab, smoother page changes.
   ====================================================================*/
.nav-item { min-height: 40px; }
.nav-label { padding: 16px 12px 4px; }
.topbar, .side, .tabbar { view-transition-name: none; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .14s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Quick search: a button in the top bar and a panel (Ctrl K / ⌘K or "/") */
.search-btn {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; min-width: 44px; padding: 0 8px 0 12px;
  border: 1.5px solid var(--line); border-radius: var(--r-btn); background: var(--bg); color: var(--ink-3);
  font: inherit; font-size: 14px; cursor: pointer; justify-content: center;
}
.search-btn:hover { border-color: var(--blue-soft); color: var(--ink); }
.search-btn .ic { color: var(--ink-3); width: 18px; height: 18px; }
.search-btn span { min-width: 140px; text-align: left; }
kbd {
  font-family: var(--font); font-size: 11.5px; font-weight: 500; color: var(--ink-3); background: #fff; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: 0 6px; line-height: 1.6; white-space: nowrap;
}
dialog.cmdk {
  width: min(640px, calc(100vw - 24px)); max-width: none; max-height: min(560px, calc(100vh - 80px)); margin: 10vh auto auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-panel); background: #fff; color: var(--ink); overflow: hidden;
  box-shadow: 0 24px 60px rgba(13, 27, 46, .28);
}
dialog.cmdk[open] { display: flex; flex-direction: column; animation: cmdk-in .14s ease-out; }
dialog.cmdk::backdrop { background: rgba(13, 27, 46, .45); }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.cmdk-box { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cmdk-in { display: flex; align-items: center; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.cmdk-in > .ic { color: var(--blue); }
.cmdk-in input[type=text] { border: 0; box-shadow: none; padding: 10px 0; font-size: 16.5px; min-height: 44px; background: transparent; }
.cmdk-in input[type=text]:focus { box-shadow: none; }
.cmdk-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; min-height: 0; }
.cmdk-sec { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ink-3); padding: 12px 10px 4px; }
.cmdk-item a {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 8px 10px; border-radius: 8px;
  color: var(--ink); text-decoration: none !important; font-size: 14.5px; line-height: 1.35;
}
.cmdk-item .ic { color: var(--ink-3); }
.cmdk-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item .go { margin-left: auto; padding-left: 12px; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.cmdk-item[aria-selected="true"] a { background: var(--blue-tint); color: var(--blue-deep); }
.cmdk-item[aria-selected="true"] .ic { color: var(--blue); }
.cmdk-empty { padding: 28px 12px; text-align: center; color: var(--ink-3); }
.cmdk-foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); background: var(--bg); }
@media (max-width: 600px) {
  dialog.cmdk { margin: 0; width: 100vw; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; }
  .cmdk-foot { display: none; }
}

/* Messages: a close button on every notice; success messages float at the bottom and fade (lms.js) */
.notice { position: relative; }
.notice:has(> .notice-x) { padding-right: 46px; }
.notice-x {
  position: absolute; top: 7px; right: 7px; width: 32px; height: 32px; display: grid; place-items: center; border: 0;
  background: none; color: var(--ink-3); border-radius: var(--r-btn); cursor: pointer;
}
.notice-x:hover { background: rgba(13, 27, 46, .06); color: var(--ink); }
.notice.compact { padding-top: 8px; padding-bottom: 8px; font-size: 13.5px; margin-bottom: 12px; }
.notice.compact > .ic { width: 17px; height: 17px; margin-top: 2px; }
.toast-region {
  position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 10px;
  width: min(420px, calc(100vw - 28px)); pointer-events: none;
}
.toast-region .notice { pointer-events: auto; margin: 0; background: #fff; box-shadow: var(--shadow-menu); animation: toast-in .2s ease-out; }
.notice.leaving { opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .toast-region { left: 14px; right: 14px; width: auto; bottom: 14px; }
  .p-app.signed-in .toast-region { bottom: 72px; }
}

/* Busy button while the page works (lms.js adds .is-loading on submit) */
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: spin .7s linear infinite;
}
.btn.is-loading:disabled { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn-ghost.is-loading:disabled, .btn-light.is-loading:disabled { background: #fff; border-color: var(--line); }
.btn-ghost.is-loading::after, .btn-light.is-loading::after { border-color: rgba(13, 27, 46, .18); border-top-color: var(--blue-deep); }
.btn-danger.is-loading:disabled { background: var(--err); border-color: var(--err); }
@keyframes spin { to { transform: rotate(360deg); } }

/* Wide tables say that they scroll sideways (lms.js) */
.scroll-hint { font-size: 12px; color: var(--ink-3); text-align: right; margin: 6px 2px 0; }

/* Current tab in the phone tab bar */
.tabbar a { position: relative; }
.tabbar a.active { color: var(--blue-deep); }
.tabbar a.active .ic { color: var(--blue); }
.tabbar a.active::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--blue); }

/* Learner home: "Up next" (the page's one ink surface) and days-done bars */
.upnext { margin: 4px 0 20px; }
.upnext .today-body { display: flex; gap: 10px 12px; flex-wrap: wrap; align-items: center; }
.upnext .today-body .small { flex: 1 1 220px; }
.progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; max-width: 360px; }
.progress .bar { flex: 1; height: 6px; background: var(--quiet); border-radius: var(--r-pill); overflow: hidden; }
.progress .bar > span { display: block; height: 100%; background: var(--blue); border-radius: var(--r-pill); }
.progress small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; }

/* Admin home numbers */
.kpis a { display: block; color: inherit; text-decoration: none !important; }
.kpis a:hover .l { color: var(--blue-deep); }
.kpis .n.plain { color: var(--ink); }

@media (max-width: 600px) {
  /* Shortcut rows swipe sideways instead of stacking */
  .chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; margin-left: -14px; margin-right: -14px;
    padding: 2px 14px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chip-btn { flex: none; scroll-snap-align: start; }
  .hero-card { padding: 12px 0; }
  .hero-card .chips { margin: 0; padding: 2px 12px 4px; }
  .topbar .search-btn { border-color: transparent; background: transparent; padding: 0; width: 44px; }
}

/* Formatted text (announcements, AI tool articles) */
.rich { color: var(--ink-2); font-size: 15px; line-height: 1.7; overflow-wrap: anywhere; }
.rich > :first-child { margin-top: 0; }
.rich > :last-child { margin-bottom: 0; }
.rich h2 { font-size: 20px; margin: 1.4em 0 .5em; }
.rich h3 { font-size: 17px; margin: 1.3em 0 .4em; }
.rich p { margin: 0 0 .9em; }
.rich ul, .rich ol { padding-left: 22px; margin: 0 0 1em; }
.rich li { margin-bottom: 6px; }
.rich a { text-decoration: underline; text-underline-offset: 2px; }
.rich.small { font-size: 13.5px; line-height: 1.6; }
.fmt-help { font-size: 12.5px; color: var(--ink-3); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-top: 6px; line-height: 1.8; }
.fmt-help code { background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; color: var(--ink); font-size: 12px; }

/* Announcements */
.ann { scroll-margin-top: 16px; }
.ann-meta { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--ink-3); margin-bottom: 8px; }
.ann h2 { margin-bottom: 10px; }
.ann .btn { margin-top: 14px; }
.ann-list { display: grid; gap: 10px; }
.ann-strip { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 18px; box-shadow: var(--shadow); }
.ann-strip > .ic { color: var(--blue); margin-top: 3px; }
.ann-strip > div { flex: 1; min-width: 0; }
.ann-strip .more { white-space: nowrap; font-weight: 700; font-size: 13.5px; align-self: center; }
.ann-admin h3 { margin: 2px 0 4px; }
.auth-col { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }
.ann-signin { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: var(--r-card); padding: 16px 18px; }
.ann-signin .eyebrow { margin: 0; }
.ann-signin h3 { margin: 8px 0 6px; font-size: 16px; }
.ann-signin .btn { margin-top: 10px; }

/* AI tools: logos, cards, the article page and the editor */
.ai-logo { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; background: #fff; border: 1px solid var(--line); padding: 6px; flex: none; }
.ai-logo.lg { width: 76px; height: 76px; border-radius: 16px; padding: 9px; }
.ai-logo.sm { width: 34px; height: 34px; border-radius: 8px; padding: 4px; }
.ai-letter { display: grid; place-items: center; background: var(--blue-tint); color: var(--blue-deep); border-color: transparent;
  font-family: var(--head); font-weight: 900; font-size: 22px; padding: 3px 0 0; }
.ai-logo.lg.ai-letter { font-size: 34px; }
.ai-logo.sm.ai-letter { font-size: 15px; padding-top: 2px; }
.tool-head { display: flex; gap: 14px; align-items: center; }
.tool-head h3 { margin: 0; font-size: 17px; }
.tool-head h3 a { color: var(--ink); }
.tool-meta { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; margin-top: 3px; }
.tool-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.tool .tool-actions .btn { margin-top: 0; }
.post { max-width: 800px; }
.post-head { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin: 6px 0 20px; }
.post-head .post-title { flex: 1 1 260px; min-width: 0; }
.post-head h1 { margin: 0 0 6px; }
.post .lead { margin-bottom: 20px; }
.post-body { padding: 28px 32px; }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
.editor-side { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; }
.editor-side .logo-row { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
@media (max-width: 900px) { .editor-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .post-body { padding: 18px; } }

/* ======================================================================
   Update 13: Learning Hours, the Activity Zone and the calendar
   ====================================================================*/
/* A date as a block: 25 / Sep */
.date-badge { width: 54px; height: 54px; flex: none; border-radius: var(--r-card); background: var(--blue-tint); color: var(--blue-deep);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--head); font-weight: 700;
  font-size: 11.5px; line-height: 1.05; text-transform: uppercase; letter-spacing: .5px; }
.date-badge b { font-size: 21px; font-weight: 900; }
.date-badge.lg { width: 76px; height: 76px; font-size: 13px; }
.date-badge.lg b { font-size: 30px; }

/* "You have 2 of 3" — the unlock meter */
.unlock-head { display: flex; gap: 12px; align-items: flex-start; }
.unlock-head > .ic { color: var(--blue); margin-top: 2px; }
.unlock-meter { display: flex; gap: 6px; margin-top: 14px; }
.unlock-meter span { flex: 1 1 0; height: 8px; border-radius: var(--r-pill); background: var(--quiet); }
.unlock-meter span.on { background: var(--blue); }

/* What staff wrote back on a practical activity */
.reviewed-card { border-left: 3px solid var(--blue); }
.needswork-card { border-left: 3px solid var(--warn-rule); background: var(--warn-tint); }
.review-form { border-top: 1px dashed var(--line); margin-top: 14px; padding-top: 12px; }
.review-form textarea { min-height: 62px; }

/* The Zone: work learners chose to show */
.zone-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.zone-card { display: flex; flex-direction: column; }
.zone-head { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.zone-head .ph { width: 40px; height: 40px; border-radius: 50%; flex: none; background: var(--blue-tint); color: var(--blue-deep);
  display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 14px; }
.zone-what { color: var(--ink-3); margin: 0 0 8px; font-weight: 600; }

/* Admin home: registrations over the last fortnight */
.spark-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 18px; box-shadow: var(--shadow); }
.spark { display: flex; align-items: flex-end; gap: 4px; height: 54px; }
.spark span { flex: 1; display: flex; align-items: flex-end; height: 100%; }
.spark i { display: block; width: 100%; min-height: 3px; border-radius: 3px 3px 0 0; background: var(--blue-tint); }
.spark span:last-child i { background: var(--blue); }

/* Update 14 — calmer screens: tabs, the More list, wider breathing room */
/* Tabs on the programme page: plain links, no JavaScript, scrollable on a phone */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 0 0 22px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; color: var(--ink-3);
  font-family: var(--head); font-weight: 700; font-size: 14.5px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a .ic { color: var(--ink-3); width: 17px; height: 17px; }
.tabs a[aria-current="page"] { color: var(--blue-deep); border-bottom-color: var(--blue); }
.tabs a[aria-current="page"] .ic { color: var(--blue); }
.tabs .count { background: var(--blue-tint); color: var(--blue-deep); font-size: 11.5px; font-weight: 700;
  border-radius: var(--r-pill); padding: 1px 7px; }
@media (max-width: 600px) { .tabs { margin-left: -14px; margin-right: -14px; padding: 0 14px; } .tabs a { padding: 11px 12px; font-size: 14px; } }

/* "More": one quiet line per page, not a wall of cards */
.more-list { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); overflow: hidden; margin-bottom: 26px; }
.more-row { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border-top: 1px solid var(--line); color: var(--ink); }
.more-row:first-child { border-top: 0; }
.more-row:hover { background: var(--bg); text-decoration: none; }
.more-icon { width: 38px; height: 38px; flex: none; border-radius: 10px; background: var(--blue-tint); color: var(--blue-deep); display: grid; place-items: center; }
.more-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.more-text strong { font-family: var(--head); font-size: 15.5px; }
.more-row > .ic { color: var(--ink-3); flex: none; }
.home-cards .card { height: 100%; }
.home-cards .kv { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; font-size: 14px; }
.home-cards .kv dd { text-align: right; }

/* Admin menu: one group open, the rest one quiet line each */
.nav-group { background: none; border: 0; border-radius: 0; margin: 0; }
.nav-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-group > summary::after { content: '+'; font-size: 15px; color: var(--ink-3); font-weight: 400; padding-right: 12px; }
.nav-group[open] > summary::after { content: '−'; }
.nav-group > summary:hover { color: var(--ink); }
.nav-group > *:not(summary) { padding: 0; }

/* Corrections and support: what a learner has asked for */
.req-list { list-style: none; margin: 0; padding: 0; }
.req-list li { border-top: 1px solid var(--line); padding: 14px 0; }
.req-list li:first-child { border-top: 0; padding-top: 0; }
.req-top { display: flex; gap: 8px; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.req-top .mono { color: var(--ink-3); }

/* The month calendar */
table.cal { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 720px; background: #fff; }
table.cal th { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: 1px;
  padding: 10px 8px; border-bottom: 1px solid var(--line); background: var(--bg); text-align: left; }
table.cal td { border: 1px solid var(--line); vertical-align: top; padding: 6px; height: 108px; }
table.cal td.cal-empty { background: var(--bg); }
table.cal td.cal-today { background: var(--blue-tint); }
.cal-day { display: block; font-family: var(--head); font-weight: 800; font-size: 13px; color: var(--ink-3); margin-bottom: 4px; }
.cal-today .cal-day { color: var(--blue-deep); }
.cal-ev { display: block; font-size: 12px; line-height: 1.35; padding: 4px 6px; margin-bottom: 4px; border-radius: 6px;
  background: var(--quiet); color: var(--ink); border-left: 3px solid var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.cal-ev:hover { text-decoration: none; background: var(--blue-tint); }
.cal-ev b { font-weight: 700; color: var(--ink-3); }
.cal-session { border-left-color: var(--blue); }
.cal-learning_hour { border-left-color: var(--verified); }
.cal-activity { border-left-color: var(--star); }
.cal-other { border-left-color: var(--ink-3); }
.cal-ev.is-tentative { border-left-style: dashed; background: repeating-linear-gradient(0deg, var(--quiet), var(--quiet) 6px, #fff 6px, #fff 7px); color: var(--ink-2); }
.cal-ev.is-cancelled { text-decoration: line-through; color: var(--ink-3); }
.cal-nav { gap: 8px; }
.cal-month { font-family: var(--head); font-size: 17px; min-width: 150px; text-align: center; }
@media (max-width: 600px) { table.cal td { height: 84px; } .cal-ev { font-size: 11px; } }

/* ======================================================================
   Update 15 — a warmer, more modern surface.
   Softer ground, rounder cards, gentler shadow, and a small set of accent
   tints used ONLY behind icons so a page full of real information has some
   life in it. Text and buttons stay Scrollwell blue.
   ====================================================================*/
:root {
  --bg: #eceef7;
  --r-card: 20px;
  --r-panel: 22px;
  /* The reference screen's accent. Set this to var(--blue) to go back to brand blue everywhere. */
  --accent: #6c4fe0;
  --shadow: 0 1px 3px rgba(13, 27, 46, .05), 0 8px 24px -12px rgba(13, 27, 46, .10);
  --shadow-hover: 0 12px 32px -10px rgba(13, 27, 46, .18);
  --tint-blue: #e8f1fc;   --ink-blue: #0f69ac;
  --tint-green: #e6f6ef;  --ink-green: #0e7a51;
  --tint-amber: #fdf1de;  --ink-amber: #9a5b00;
  --tint-violet: #eeecfb; --ink-violet: #4b3fb0;
}
.card { border-radius: var(--r-card); padding: 24px 26px; }
.list-card, .hover-card { border-radius: var(--r-card); }
.topbar { background: #fff; }

/* Numbers that matter, as tiles with a coloured icon — the shape the references use */
.m-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; margin-bottom: 22px; }
.m-tile { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 18px 20px; box-shadow: var(--shadow); color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
a.m-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.m-tile .ico { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; }
.m-tile .ico.blue { background: var(--tint-blue); color: var(--ink-blue); }
.m-tile .ico.green { background: var(--tint-green); color: var(--ink-green); }
.m-tile .ico.amber { background: var(--tint-amber); color: var(--ink-amber); }
.m-tile .ico.violet { background: var(--tint-violet); color: var(--ink-violet); }
.m-tile .n { font-family: var(--head); font-weight: 900; font-size: 26px; line-height: 1.1; letter-spacing: -.4px; }
.m-tile .l { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.m-tile .go { margin-left: auto; color: var(--ink-3); }

/* "What is coming up" — a row of session cards, like the schedule strip in the references */
.sched-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.sched-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 8px; transition: transform .18s ease, box-shadow .18s ease; }
a.sched-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.sched-card .when { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }
.sched-card .topic { font-family: var(--head); font-weight: 800; font-size: 16px; color: var(--ink); line-height: 1.3; }
.sched-card .who { font-size: 13px; color: var(--ink-2); display: flex; align-items: center; gap: 8px; margin-top: auto; }
.sched-card .who .ph { width: 28px; height: 28px; border-radius: 50%; background: var(--tint-violet); color: var(--ink-violet);
  display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 11.5px; flex: none; }
.sched-card.is-now { background: var(--ink); border-color: var(--ink); }
.sched-card.is-now .topic, .sched-card.is-now .who { color: #fff; }
.sched-card.is-now .when { color: #c9d3e0; }
.sched-card .now-pill { background: var(--live); color: #fff; font-size: 11px; font-weight: 700; border-radius: var(--r-pill); padding: 2px 9px; }
.sched-card .day-pill { background: var(--tint-blue); color: var(--ink-blue); font-size: 11.5px; font-weight: 700; border-radius: var(--r-pill); padding: 2px 9px; }
.sched-card.is-now .day-pill { background: rgba(255, 255, 255, .16); color: #fff; }

/* A section heading with its "see all" on the right */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 14px; }
.sec-head h2 { font-size: 20px; font-weight: 900; margin: 0; letter-spacing: -.3px; }

/* The programme screen, warmed to match Home: the day markers carry the state
   as colour, so the timeline can be read without stopping to parse each chip. */
.split { gap: 24px; }
.tl-item.done .tl-day { background: var(--tint-green); color: var(--ink-green); }
.tl-item.done .tl-day small { color: var(--ink-green); }
.tl-item.moved .tl-day { background: var(--tint-amber); color: var(--ink-amber); }
.tl-item.moved .tl-day small { color: var(--ink-amber); }
.tl-item.cancelled .tl-day { background: var(--err-tint); color: var(--err); }
.tl-item.cancelled .tl-day small { color: var(--err); }
.tl-item.live .tl-day { background: var(--err-tint); color: var(--live); }
.tl-item.live .tl-day small { color: var(--live); }
.gate li { padding: 13px 0; }

/* Update 15b — the reference dashboard's treatment. Two things were wrong: the
   number and its label were both inline, so they ran together ("9certificates
   earned"), and the icon tints were so pale the tiles read as empty boxes. The
   number now sits on its own line above a muted label, and each badge is a solid
   round swatch with a white icon. Buttons and links stay Scrollwell blue. */
.m-tile { padding: 20px; gap: 16px; }
.m-tile > span { min-width: 0; }
.m-tile .ico { width: 52px; height: 52px; border-radius: 50%; }
.m-tile .ico .ic, .m-tile .ico svg { width: 24px; height: 24px; }
.m-tile .ico.blue { background: var(--blue); color: #fff; }
.m-tile .ico.violet { background: var(--accent); color: #fff; }
.m-tile .ico.amber { background: #ef8a3c; color: #fff; }
.m-tile .ico.green { background: var(--verified-ink); color: #fff; }
.m-tile .n { display: block; font-size: 30px; }
.m-tile .l { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; }

/* "What is coming up": the live session is the filled card, as in the reference */
.sched-card { padding: 20px; }
.sched-card.is-now { background: var(--accent); border-color: var(--accent); }
.sched-card.is-now .when { color: #e6e1fb; }
.sched-card .now-pill { background: #ef8a3c; }

/* WhatsApp and Zoom carry their own marks and their own brand colours — these are
   the two things a teacher hunts for at 5.55 pm, so they are buttons, not footnotes. */
.btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1db954; border-color: #1db954; color: #fff; }
.btn-whatsapp .ic, .btn-zoom .ic { width: 18px; height: 18px; }

@media print {
  .topbar, .side, .tabbar, .foot, .btn, .action-bar, .toast-region, .cmdk, .notice-x { display: none !important; }
  body, .shell { background: #fff; }
}