/* Scrollwell learner portal — Scrollwell colours and type, Claude-style calm (Update 17, re-themed in 18).
   Loaded after lms.css on learner pages (body.p-app) and inside the content area of the
   Learning Hours admin screens (body.m3-admin .main). Everything else in admin keeps its look.
   Brandbook: ink #0D1B2E, body #4A5568, captions #5C6B7F, hairlines #E6E6E6, blue #127BCB with
   deep #0F69AC for text and buttons (#127BCB is 4.45:1 on white — too light for text), green only
   for "verified". Overpass for headings, Roboto for everything else.
   Claude-style: a quiet off-white page, white surfaces with hairline borders, almost no shadows,
   rounded rectangles (not pills), generous spacing, one clear primary action per screen. */
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@600;700;800;900&family=Roboto:wght@400;500;700&display=swap');

:root {
  /* Colour roles — Scrollwell Brandbook */
  --md-primary: #0f69ac;                 /* Scrollwell deep blue: buttons and links (5.8:1 on white) */
  --md-primary-hover: #0b5a94;
  --md-brand: #127bcb;                   /* Scrollwell blue: icons, focus, progress, highlights */
  --md-on-primary: #ffffff;
  --md-primary-container: #e8f2fa;
  --md-on-primary-container: #0b4f85;
  --md-secondary-container: #edf1f6;     /* the selected menu row: a quiet grey-blue, like Claude's sidebar */
  --md-on-secondary-container: #0d1b2e;
  --md-tertiary-container: #e8f2fa;      /* live now — Scrollwell blue; green is kept for "verified" */
  --md-on-tertiary-container: #0b4f85;
  --md-error-container: #fdecea;         /* cancelled */
  --md-on-error-container: #8c1d18;
  --md-warning-container: #fdf3dc;       /* rescheduled */
  --md-on-warning-container: #6b4a00;
  --md-info-container: #e8f2fa;          /* completed / materials ready */
  --md-on-info-container: #0b4f85;
  --md-neutral-container: #eef1f5;       /* next / upcoming */
  --md-on-neutral-container: #3b4556;
  --md-background: #f7f9fc;              /* Scrollwell page ground */
  --md-surface: #ffffff;
  --md-surface-container-low: #f2f5f9;
  --md-surface-container: #eceff4;
  --md-surface-container-high: #e1e6ed;
  --md-inverse-surface: #0d1b2e;
  --md-inverse-on-surface: #f2f5f9;
  --md-on-surface: #0d1b2e;              /* ink */
  --md-on-surface-variant: #5c6b7f;      /* captions (5.4:1 on white) */
  --md-outline: #a3adba;
  --md-outline-variant: #e6e6e6;         /* hairlines */
  --md-live-dot: #127bcb;
  /* Type — Brandbook: Overpass headings, Roboto text */
  --md-font: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --md-display: 'Overpass', 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --md-serif: var(--md-display);         /* the programme title uses the heading face */
  --md-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  /* Shape, motion */
  --md-r-card: 12px;
  --md-r-panel: 16px;
  --md-r-chip: 8px;
  --md-r-btn: 8px;                       /* rounded rectangles, not pills */
  --md-r-full: 999px;                    /* only for round things: avatars, dots, icon buttons */
  --md-ease: cubic-bezier(.2, 0, 0, 1);
  --md-fast: 150ms;
  --md-mid: 250ms;
  --md-elev-1: 0 1px 2px rgba(13, 27, 46, .06), 0 1px 3px 1px rgba(13, 27, 46, .04);
  --md-elev-2: 0 4px 16px rgba(13, 27, 46, .10), 0 1px 3px rgba(13, 27, 46, .06);
}

/* ------------------------------------------------ 1. token remap (scoped) */
/* Existing learner pages keep their markup and simply read the new values. */
body.p-app, .m3-admin .main {
  --surface: var(--md-surface);
  --bg: var(--md-background);
  --ink: var(--md-on-surface);
  --ink-2: #4a5568;
  --ink-3: var(--md-on-surface-variant);
  --line: var(--md-outline-variant);
  --blue: var(--md-primary);
  --blue-deep: var(--md-primary-hover);
  --blue-light: #7fb6e3;
  --blue-soft: #b8d6ee;
  --blue-tint: var(--md-primary-container);
  --field: var(--md-outline);
  --quiet: var(--md-surface-container-low);
  --live: var(--md-live-dot);
  --err: #b3261e; --err-tint: var(--md-error-container); --err-ink: var(--md-on-error-container);
  --star-ink: #b45309;
  --warn-ink: var(--md-on-warning-container); --warn-tint: var(--md-warning-container); --warn-rule: #e3a008;
  --verified: #1e8e3e; --verified-ink: #0d652d; --verified-tint: #e6f4ea;
  /* Update 15's purple accent and coloured tints do not belong in this design */
  --accent: var(--md-primary);
  --tint-blue: var(--md-surface-container-low); --ink-blue: var(--md-on-surface-variant);
  --tint-green: var(--md-surface-container-low); --ink-green: var(--md-on-surface-variant);
  --tint-amber: var(--md-surface-container-low); --ink-amber: var(--md-on-surface-variant);
  --tint-violet: var(--md-surface-container-low); --ink-violet: var(--md-on-surface-variant);
  --r-btn: var(--md-r-btn); --r-card: var(--md-r-card); --r-panel: var(--md-r-panel); --r-media: var(--md-r-card);
  --shadow: none;
  --shadow-hover: var(--md-elev-1);
  --shadow-menu: var(--md-elev-2);
  --head: var(--md-display);
  --font: var(--md-font);
  --mono: var(--md-mono);
}

/* --------------------------------------------------------- 2. base (learner) */
body.p-app { font-family: var(--md-font); font-size: 15px; line-height: 22px; color: var(--ink-2); background: var(--md-background); -webkit-font-smoothing: antialiased; }
.p-app h1, .p-app h2, .p-app h3, .p-app h4 { font-family: var(--md-display); color: var(--md-on-surface); }
.p-app h1 { font-size: 30px; line-height: 38px; font-weight: 800; letter-spacing: -.3px; }
.p-app h2 { font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.1px; }
.p-app h3 { font-size: 17px; line-height: 24px; font-weight: 700; }
.p-app h4 { font-size: 15px; line-height: 22px; font-weight: 700; }
.p-app strong, .p-app b { font-weight: 500; color: var(--md-on-surface); }
.p-app a { color: var(--md-primary); }
.p-app :focus-visible { outline: 2px solid var(--md-brand); outline-offset: 2px; border-radius: 6px; }
.p-app .ic { width: 20px; height: 20px; }
.p-app .ic.sm { width: 18px; height: 18px; }
.tnum, .p-app time { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- 3. top bar */
.p-app .topbar { background: var(--md-background); border-bottom: 1px solid var(--md-outline-variant); padding: 0 16px 0 20px; gap: 8px; }
.p-app .brand-logo { height: 44px; mix-blend-mode: multiply; }   /* the PNG's white box disappears on the off-white bar */
.p-app .brand-sub { font-size: 12px; font-weight: 500; letter-spacing: .4px; text-transform: none; color: var(--md-on-surface-variant); }
.p-app .search-btn {
  height: 40px; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-btn); background: var(--md-surface-container-low);
  color: var(--md-on-surface-variant); padding: 0 8px 0 14px; transition: background var(--md-fast) var(--md-ease);
}
.p-app .search-btn:hover { background: var(--md-surface-container); border-color: var(--md-outline-variant); color: var(--md-on-surface); }
.p-app kbd { font-family: var(--md-font); border-bottom-width: 1px; border-radius: 6px; background: var(--md-surface); }
.p-app .top-link { border-radius: var(--md-r-btn); color: var(--md-on-surface-variant); padding: 8px 12px; }
.p-app .top-link:hover { background: var(--md-surface-container-low); color: var(--md-on-surface); }
.p-app .avatar { background: var(--md-primary-container); color: var(--md-on-primary-container); font-weight: 600; padding-top: 0; }
.p-app .user-menu > summary:hover { background: var(--md-surface-container-low); }
.p-app .user-menu .menu { border-radius: var(--md-r-card); box-shadow: var(--md-elev-2); padding: 8px 0; }
.p-app .menu a, .p-app .menu button { border-radius: 0; padding: 12px 16px; min-height: 48px; }
.p-app .menu a:hover, .p-app .menu button:hover { background: var(--md-surface-container-low); }
.p-app .menu-head { padding: 8px 16px 12px; }

/* ------------------------------------------- 4. navigation: drawer · rail · bar */
.p-app .shell { background: var(--md-background); }
/* The drawer width only where the drawer is actually in the grid: on phones the menu slides in
   over the page (position: fixed), so a column reserved for it would squeeze the content. */
@media (min-width: 1101px) { .p-app .shell:not(.no-side) { grid-template-columns: 264px minmax(0, 1fr); } }
/* Signed-out pages (sign-in, code, registration, public pages) have no menu: the page gets the whole width. */
.p-app .shell.no-side { grid-template-columns: minmax(0, 1fr); }
.p-app .side { background: var(--md-background); border-right: 0; padding: 12px; }
.p-app .nav-item {
  min-height: 48px; padding: 0 16px; border-radius: var(--md-r-btn); gap: 12px; color: var(--md-on-surface-variant);
  font-size: 14px; font-weight: 500; transition: background var(--md-fast) var(--md-ease);
}
.p-app .nav-item .ic { color: var(--md-on-surface-variant); }
.p-app .nav-item:hover { background: var(--md-surface-container-low); color: var(--md-on-surface); }
.p-app .nav-item.active { background: var(--md-secondary-container); color: var(--md-on-secondary-container); font-weight: 600; }
.p-app .nav-item.active .ic { color: var(--md-on-secondary-container); }
.p-app .nav-item .count { background: var(--md-primary); font-size: 11px; font-weight: 600; min-width: 20px; height: 20px; }
.p-app .side-foot { font-size: 12px; line-height: 16px; padding: 16px; }
.p-app .main { max-width: 1164px; padding: 24px 32px 56px; }

/* Tablet: a navigation rail */
@media (min-width: 821px) and (max-width: 1100px) {
  .p-app .shell:not(.no-side) { grid-template-columns: 88px minmax(0, 1fr); }
  .p-app .side { padding: 12px 4px; align-items: center; }
  .p-app .side nav { align-items: center; gap: 4px; }
  .p-app .nav-item {
    position: relative; flex-direction: column; justify-content: center; gap: 4px; width: 80px; min-height: 56px; padding: 4px 0;
    font-size: 12px; line-height: 16px; background: transparent !important; text-align: center;
  }
  .p-app .nav-item .ic { box-sizing: content-box; padding: 4px 18px; border-radius: 16px; transition: background var(--md-fast) var(--md-ease); }
  .p-app .nav-item:hover .ic { background: var(--md-surface-container-low); }
  .p-app .nav-item.active .ic { background: var(--md-secondary-container); }
  .p-app .nav-item .count { position: absolute; top: 2px; right: 14px; margin: 0; }
  .p-app .side-foot { display: none; }
}

/* Phone: a bottom navigation bar */
.p-app .tabbar { height: auto; min-height: 72px; background: var(--md-surface-container-low); border-top: 0; box-shadow: none; }
.p-app .tabbar a { gap: 4px; min-height: 72px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--md-on-surface-variant); }
.p-app .tabbar a .ic { box-sizing: content-box; padding: 4px 20px; border-radius: 16px; color: var(--md-on-surface-variant); transition: background var(--md-fast) var(--md-ease); }
.p-app .tabbar a.active { color: var(--md-on-surface); font-weight: 600; }
.p-app .tabbar a.active .ic { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.p-app .tabbar a.active::before { display: none; }
.p-app .tabbar a:hover { color: var(--md-on-surface); }
.p-app .tabbar a:hover .ic { color: var(--md-on-surface); }
@media (max-width: 820px) {
  .p-app .side { background: var(--md-surface); box-shadow: var(--md-elev-2); }
  .p-app .main { padding: 16px 16px 104px; }
}

/* ---------------------------------------------------- 5. surfaces and controls */
.p-app .card { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-card); padding: 20px 24px; box-shadow: none; background: var(--md-surface); }
.p-app .list-card, .p-app .hover-card { border-radius: var(--md-r-card); box-shadow: none; }
.p-app .list-card:hover, .p-app .hover-card:hover { transform: none; box-shadow: var(--md-elev-1); border-color: var(--md-outline-variant); }
.p-app .stat, .p-app .stat-strip, .p-app .facts, .p-app .table-wrap, .p-app .hero-card, .p-app .cta-band { box-shadow: none; border-radius: var(--md-r-card); }
.p-app .stat .n, .p-app .stat-strip .n { color: var(--md-on-surface); font-weight: 600; }
.p-app .cta-band { border-left-width: 1px; }

/* Buttons: rounded rectangles; one filled (deep blue) per view, quiet white or text buttons elsewhere. */
.p-app .btn {
  min-height: 42px; padding: 0 20px; border-radius: var(--md-r-btn); font-family: var(--md-font); font-weight: 500; font-size: 15px;
  line-height: 20px; padding-top: 0; letter-spacing: .1px; border-width: 1px;
  background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary);
  transition: box-shadow var(--md-fast) var(--md-ease), background var(--md-fast) var(--md-ease);
}
.p-app .btn:hover { transform: none; opacity: 1; background: var(--md-primary-hover); border-color: var(--md-primary-hover); box-shadow: none; }
.p-app .btn:active { box-shadow: inset 0 0 0 100vmax rgba(13, 27, 46, .12); }
.p-app .btn .ic { width: 18px; height: 18px; }
.p-app .btn-ghost { background: var(--md-surface); color: var(--md-on-surface); border-color: #d6dce4; }
.p-app .btn-ghost .ic { color: var(--md-primary); }
.p-app .btn-ghost:hover { background: var(--md-surface-container-low); color: var(--md-on-surface); border-color: #c5cdd8; box-shadow: none; }
.p-app .btn-light, .p-app .btn-tonal { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: var(--md-secondary-container); }
.p-app .btn-light:hover, .p-app .btn-tonal:hover { background: var(--md-surface-container); border-color: var(--md-surface-container); color: var(--md-on-surface); box-shadow: none; }
.p-app .btn-text { background: transparent; border-color: transparent; color: var(--md-primary); padding: 0 12px; }
.p-app .btn-text:hover { box-shadow: inset 0 0 0 100vmax rgba(15, 105, 172, .07); }
.p-app .btn-sm { min-height: 32px; padding: 0 16px; font-size: 13px; }
.p-app .btn:disabled, .p-app .btn.disabled { background: rgba(31, 35, 40, .12); border-color: transparent; color: rgba(31, 35, 40, .38); box-shadow: none; }
.p-app .btn-ok, .p-app .btn-live { background: var(--md-primary); border-color: var(--md-primary); }
.p-app .btn-whatsapp { background: transparent; color: var(--md-on-surface); border-color: var(--md-outline); }
.p-app .btn-whatsapp .ic { color: #128c7e; }
.p-app .btn-whatsapp:hover { background: transparent; color: var(--md-on-surface); border-color: var(--md-outline); box-shadow: inset 0 0 0 100vmax rgba(31, 35, 40, .06); }
.p-app .btn-zoom { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: var(--md-secondary-container); }
.p-app .btn-zoom:hover { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: var(--md-secondary-container); }
.p-app .btn.is-loading:disabled { background: var(--md-primary); border-color: var(--md-primary); }
.p-app .icon-btn { border-radius: var(--md-r-full); width: 48px; height: 48px; }
.p-app .icon-btn:hover { background: var(--md-surface-container-low); }
.p-app .round-btn { border-radius: var(--md-r-full); border-width: 1px; }

/* Fields */
.p-app input[type=text], .p-app input[type=email], .p-app input[type=password], .p-app input[type=number], .p-app input[type=date],
.p-app input[type=time], .p-app input[type=datetime-local], .p-app input[type=url], .p-app input[type=tel], .p-app input[type=search],
.p-app select, .p-app textarea { min-height: 48px; border-radius: 8px; border-color: var(--md-outline); font-size: 14px; }
.p-app input:focus, .p-app select:focus, .p-app textarea:focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }
.p-app .field label { font-weight: 500; font-size: 13px; }
.p-app .check input { accent-color: var(--md-primary); }

/* Notices and chips: tonal, one meaning each */
.p-app .notice { border-radius: var(--md-r-card); border: 1px solid var(--md-outline-variant); border-left-width: 1px; background: var(--md-surface-container-low); font-size: 14px; }
.p-app .notice > .ic { color: var(--md-on-surface-variant); }
.p-app .notice.ok, .p-app .notice.info { background: var(--md-primary-container); border-color: transparent; }
.p-app .notice.ok > .ic, .p-app .notice.info > .ic { color: var(--md-on-primary-container); }
/* On a tinted notice the primary blue drops under 4.5:1 — links and text buttons use the darker on-container colour. */
.p-app .notice.ok a:not(.btn), .p-app .notice.info a:not(.btn), .p-app .notice.ok .btn-text, .p-app .notice.info .btn-text { color: var(--md-on-primary-container); }
.p-app .notice.warn a:not(.btn), .p-app .notice.warn .btn-text { color: var(--md-on-warning-container); }
.p-app .notice.warn { background: var(--md-warning-container); border-color: transparent; color: var(--md-on-warning-container); }
.p-app .notice.error { background: var(--md-error-container); border-color: transparent; color: var(--md-on-error-container); }
.p-app .notice a { font-weight: 600; }
.p-app .chip { border-radius: var(--md-r-chip); font-size: 12px; line-height: 16px; font-weight: 500; padding: 4px 8px; }
.p-app .chip-live { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.p-app .chip-live .dot { background: var(--md-live-dot); animation: none; }
.p-app .chip-upcoming, .p-app .chip-open, .p-app .chip-enrolled, .p-app .chip-pending { background: var(--md-neutral-container); color: var(--md-on-neutral-container); }
.p-app .chip-completed, .p-app .chip-submitted, .p-app .chip-passed { background: var(--md-info-container); color: var(--md-on-info-container); }
.p-app .chip-rescheduled { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.p-app .chip-cancelled { background: var(--md-error-container); color: var(--md-on-error-container); }

/* The older "today" card becomes an outlined card — no dark sections in this design */
.p-app .today { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-card); box-shadow: none; }
.p-app .today-top { background: var(--md-surface); color: var(--md-on-surface); border-bottom: 1px solid var(--md-outline-variant); }
.p-app .today-top h2 { color: var(--md-on-surface); font-weight: 600; font-size: 22px; line-height: 28px; }
.p-app .today-top .meta, .p-app .today-top .meta .ic { color: var(--md-on-surface-variant); }
.p-app .today-top .chip { background: var(--md-neutral-container); color: var(--md-on-neutral-container); }
.p-app .today-top .chip-live { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.p-app .sched-card.is-now { background: var(--md-tertiary-container); border-color: transparent; }
.p-app .sched-card.is-now .topic, .p-app .sched-card.is-now .who { color: var(--md-on-tertiary-container); }
.p-app .sched-card.is-now .when { color: var(--md-on-tertiary-container); }
.p-app .m-tile .ico { background: var(--md-surface-container-low); color: var(--md-on-surface-variant); }
.p-app .m-tile .n { font-weight: 600; }

/* Programme tabs: MD3 primary tabs */
.p-app .tabs { gap: 0; margin: 20px 0 24px; border-bottom: 1px solid var(--md-outline-variant); }
.p-app .tabs a {
  position: relative; padding: 14px 16px; font-family: var(--md-font); font-weight: 500; font-size: 14px; line-height: 20px;
  color: var(--md-on-surface-variant); border-bottom: 0; margin-bottom: 0; min-height: 48px;
  transition: background var(--md-fast) var(--md-ease), color var(--md-fast) var(--md-ease);
}
.p-app .tabs a:hover { background: var(--md-surface-container-low); color: var(--md-on-surface); }
.p-app .tabs a .ic { width: 18px; height: 18px; color: inherit; }
.p-app .tabs a[aria-current="page"] { color: var(--md-primary); }
.p-app .tabs a[aria-current="page"] .ic { color: var(--md-primary); }
.p-app .tabs a[aria-current="page"]::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--md-primary);
}
.p-app .tabs .count { background: var(--md-neutral-container); color: var(--md-on-neutral-container); font-weight: 600; border-radius: var(--md-r-chip); }

/* Snackbar (success messages and "Copied") */
.p-app .toast-region { left: 50%; right: auto; transform: translateX(-50%); bottom: 24px; width: min(560px, calc(100vw - 32px)); align-items: stretch; }
.p-app .toast-region .notice {
  background: var(--md-inverse-surface); color: var(--md-inverse-on-surface); border: 0; border-radius: 8px; box-shadow: var(--md-elev-2);
  min-height: 48px; align-items: center; padding: 12px 48px 12px 16px;
}
.p-app .toast-region .notice > .ic { color: #a8c7fa; margin-top: 0; }
.p-app .toast-region .notice-x { color: var(--md-inverse-on-surface); top: 8px; }
.p-app .toast-region .notice-x:hover { background: rgba(255, 255, 255, .08); color: #fff; }
@media (max-width: 820px) { .p-app.signed-in .toast-region { bottom: 88px; } }

/* Command palette */
.p-app dialog.cmdk { border-radius: 28px; box-shadow: var(--md-elev-2); }
.p-app dialog.cmdk::backdrop { background: rgba(31, 35, 40, .32); }
.p-app .cmdk-in > .ic { color: var(--md-on-surface-variant); }
.p-app .cmdk-item a { border-radius: var(--md-r-btn); min-height: 48px; padding: 8px 16px; }
.p-app .cmdk-item[aria-selected="true"] a { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.p-app .cmdk-sec { font-size: 12px; font-weight: 500; letter-spacing: .3px; text-transform: none; }
.p-app .cmdk-foot { background: var(--md-surface-container-low); }

.p-app .foot { border-top: 1px solid var(--md-outline-variant); font-size: 12px; line-height: 16px; }
.p-app .foot .desc strong { font-family: var(--md-font); font-weight: 600; }
.p-app .eyebrow { background: var(--md-surface-container-low); color: var(--md-on-surface-variant); letter-spacing: .3px; text-transform: none; font-size: 12px; font-weight: 500; border-radius: var(--md-r-chip); }
.p-app .page-head p { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.p-app .crumbs { font-size: 12px; line-height: 16px; }

/* ----------------------------------------------- 6. shared programme header */
.m3-head { margin: 4px 0 0; }
.m3-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 12px; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.m3-crumbs a { color: var(--md-on-surface-variant); }
.m3-crumbs a:hover { color: var(--md-on-surface); }
.m3-crumbs .sep { opacity: .6; }
.m3-title { font-family: var(--md-serif); font-weight: 600; font-size: 28px; line-height: 36px; letter-spacing: -.2px; color: var(--md-on-surface); margin: 0; max-width: 34ch; }
.m3-official { margin: 6px 0 0; max-width: 72ch; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.m3-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.m3-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .7; }
.m3-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-top: 16px; }
.m3-journey { display: grid; grid-template-columns: auto minmax(160px, 1fr); align-items: center; gap: 12px; flex: 1 1 320px; max-width: 520px; }
.m3-journey-label { font-size: 12px; line-height: 16px; font-weight: 500; color: var(--md-on-surface-variant); white-space: nowrap; font-variant-numeric: tabular-nums; }
.m3-journey-track { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 3px; align-items: center; height: 12px; }
.m3-journey-track > span { height: 4px; border-radius: 2px; background: var(--md-surface-container-high); }
.m3-journey-track > span.is-done { background: var(--md-primary); }
.m3-journey-track > span.is-today { height: 10px; border-radius: 3px; background: var(--md-primary); box-shadow: 0 0 0 2px var(--md-background); }
.m3-journey-track > span.is-today.is-pending { background: var(--md-on-primary-container); opacity: .55; }
.m3-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.m3-actions .btn { min-height: 36px; padding: 0 16px; }
@media (max-width: 600px) {
  .m3-title { font-size: 24px; line-height: 32px; }
  .m3-head-row { align-items: stretch; }
  .m3-journey { max-width: none; }
}

/* ------------------------------------------------------ 7. Schedule & Live */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.m3-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.m3-main-col, .m3-side-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1100px) { .m3-split { grid-template-columns: minmax(0, 1fr); } }
.m3-card { background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-card); padding: 20px 24px; }
.m3-card-title { font-size: 16px !important; line-height: 24px !important; font-weight: 600; margin: 0 0 12px; letter-spacing: 0 !important; }
.m3-status {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--md-r-chip);
  font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; background: var(--md-neutral-container); color: var(--md-on-neutral-container);
}
.m3-status.is-live { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.m3-status.is-info { background: var(--md-info-container); color: var(--md-on-info-container); }
.m3-status.is-warning { background: var(--md-warning-container); color: var(--md-on-warning-container); }
.m3-status.is-error { background: var(--md-error-container); color: var(--md-on-error-container); }

/* Up next — the page's focal point: white, outlined, one filled action */
.m3-upnext { background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-panel); padding: 24px; }
.m3-upnext.is-live, .m3-upnext.is-soon { border-color: #b8dcc3; }
.m3-upnext-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.m3-upnext-label { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .2px; color: var(--md-on-surface-variant); }
.m3-upnext.is-live .m3-upnext-label, .m3-upnext.is-soon .m3-upnext-label { color: var(--md-on-tertiary-container); }
.m3-countdown { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-on-surface); font-variant-numeric: tabular-nums; }
.m3-upnext-title { font-size: 22px !important; line-height: 28px !important; font-weight: 600; margin: 12px 0 4px; color: var(--md-on-surface); }
.m3-upnext-meta { margin: 0; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.m3-upnext-meta time { color: var(--md-on-surface); font-variant-numeric: tabular-nums; }
.m3-upnext-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 20px; }
.m3-creds { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 16px 0 0; padding: 8px 12px 8px 16px; background: var(--md-surface-container-low); border-radius: var(--md-r-card); }
.m3-cred { display: flex; align-items: center; gap: 10px; }
.m3-cred dt { margin: 0; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.m3-cred dd { margin: 0; display: flex; align-items: center; gap: 0; }
.m3-cred .mono { font-family: var(--md-mono); font-size: 14px; color: var(--md-on-surface); letter-spacing: .3px; }
.p-app .m3-copy.icon-btn { width: 40px; height: 40px; color: var(--md-on-surface-variant); }
.p-app .m3-copy.icon-btn:hover { color: var(--md-on-surface); background: var(--md-surface-container); }
.m3-live-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--md-live-dot); box-shadow: 0 0 0 3px rgba(30, 142, 62, .18); }
.m3-today-mat { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); }
.m3-subhead { font-size: 12px !important; line-height: 16px !important; font-weight: 500 !important; letter-spacing: .2px; color: var(--md-on-surface-variant) !important; margin: 0 0 4px !important; }
.p-app .attend-box { background: var(--md-surface-container-low); border: 0; border-radius: var(--md-r-card); }

/* Section heads */
.m3-section { margin-top: 8px; }
.m3-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 8px 0 12px; }
.m3-sec-head h2 { margin: 0; }
.m3-sec-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.m3-hint { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.m3-empty-line { margin: 0; padding: 16px 20px; font-size: 14px; color: var(--md-on-surface-variant); background: var(--md-surface); border: 1px dashed var(--md-outline-variant); border-radius: var(--md-r-card); }

/* Days → events → materials */
.m3-days { display: flex; flex-direction: column; gap: 8px; }
.m3-day { background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-card); }
.m3-day:not([open]) { content-visibility: auto; contain-intrinsic-size: auto 56px; }
.m3-day-head {
  list-style: none; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 20px; cursor: pointer;
  border-radius: var(--md-r-card); transition: background var(--md-fast) var(--md-ease);
}
.m3-day-head::-webkit-details-marker { display: none; }
/* lms.css draws a "+" / "−" on every summary and spreads its children apart; the day card has its own chevron. */
.m3-day > .m3-day-head::after { content: none; }
.m3-day > .m3-day-head { justify-content: flex-start; font-weight: 400; color: inherit; }
.m3-day-head:hover { background: var(--md-surface-container-low); }
.m3-day[open] > .m3-day-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.m3-day-label { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--md-on-surface); }
.m3-day-count { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); white-space: nowrap; }
.m3-chev { color: var(--md-on-surface-variant); transition: transform var(--md-mid) var(--md-ease); }
.m3-day[open] > .m3-day-head .m3-chev { transform: rotate(180deg); }
.m3-day.is-tba { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 20px; background: transparent; border-style: dashed; }
.m3-day-empty { font-size: 14px; color: var(--md-on-surface-variant); }
.m3-evs { list-style: none; margin: 0; padding: 0 20px 4px; }
.m3-ev { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; gap: 2px 16px; padding: 14px 0; border-top: 1px solid var(--md-outline-variant); }
.m3-ev-time { padding-top: 2px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-on-surface); font-variant-numeric: tabular-nums; }
.m3-ev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.m3-ev-title { font-size: 16px; line-height: 24px; font-weight: 500; color: var(--md-on-surface); }
.m3-type { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.m3-type .ic { width: 16px !important; height: 16px !important; }
.m3-ev-sub { font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.m3-ev-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 0; font-size: 13px; line-height: 20px; color: var(--md-on-surface-variant); }
.m3-ev-note s { color: var(--md-on-surface-variant); }
.m3-ev-note strong { color: var(--md-on-surface); font-weight: 500; }
.m3-ev.is-cancelled .m3-ev-title, .m3-ev.is-rescheduled .m3-ev-title, .m3-ev.is-cancelled .m3-ev-time, .m3-ev.is-rescheduled .m3-ev-time { color: var(--md-on-surface-variant); }
.m3-ev-trail { display: flex; align-items: flex-start; justify-content: flex-end; gap: 10px; padding-top: 0; }
.m3-live { display: inline-flex; align-items: center; gap: 6px; height: 32px; font-size: 12px; font-weight: 500; color: var(--md-on-tertiary-container); }
.m3-processing { display: flex; flex-direction: column; gap: 6px; max-width: 280px; margin-top: 8px; font-size: 13px; line-height: 18px; color: var(--md-on-surface-variant); }
.m3-linear { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--md-surface-container-high); overflow: hidden; }
.m3-linear > span { display: block; height: 100%; border-radius: 2px; background: var(--md-primary); }
.m3-linear.is-indeterminate::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 2px; background: var(--md-primary); animation: m3-indet 1.8s var(--md-ease) infinite; }
@keyframes m3-indet { to { left: 100%; } }
.m3-mats { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.m3-mat {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px 6px 6px; border-radius: var(--md-r-card);
  color: var(--md-on-surface) !important; text-decoration: none !important; transition: background var(--md-fast) var(--md-ease);
}
.m3-mat:hover { background: var(--md-surface-container-low); }
.m3-mat-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--md-surface-container-low); color: var(--md-on-surface-variant); }
.m3-mat:hover .m3-mat-ic { background: var(--md-surface); }
.m3-mat-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.m3-mat-name { font-size: 14px; line-height: 20px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-mat-meta { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.m3-mat > .ic { color: var(--md-on-surface-variant); }

/* Your progress · Need help */
.m3-progress-line { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.m3-progress-line .m3-linear { flex: 1; height: 6px; border-radius: 3px; }
.m3-progress-line .tnum { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); white-space: nowrap; }
.m3-todo { list-style: none; margin: 0; padding: 0; }
.m3-todo-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--md-outline-variant); }
.m3-todo-row:first-child { border-top: 0; }
.m3-todo-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--md-surface-container-low); color: var(--md-on-surface-variant); }
.m3-todo-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.m3-todo-t { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-on-surface); }
.m3-todo-s { font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.m3-todo-row.is-off .m3-todo-t { color: var(--md-on-surface-variant); }
.m3-todo-row.is-off .m3-todo-ic { background: transparent; border: 1px dashed var(--md-outline-variant); }
.m3-todo-row.is-todo { margin: 4px -12px; padding: 12px; border-top: 0; border-radius: var(--md-r-card); background: var(--md-primary-container); }
.m3-todo-row.is-todo + .m3-todo-row { border-top: 0; }
.m3-todo-row.is-todo .m3-todo-ic { background: var(--md-surface); color: var(--md-primary); }
.m3-todo-row.is-todo .m3-todo-s { color: var(--md-on-primary-container); }
.m3-todo-row .btn { flex: none; }
.p-app .m3-todo-row .btn-tonal { background: var(--md-surface); border-color: var(--md-surface); color: var(--md-on-primary-container); }
.m3-person { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.m3-person-name { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--md-on-surface); }
.m3-person-role { display: block; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.m3-about { margin: 0; white-space: pre-line; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.m3-change { margin: 16px 0 0; }
.m3-change-list { margin: 4px 0 0; padding-left: 18px; }
.m3-change-list li { margin: 2px 0; }

/* --------------------------------------------------------------- 8. Classroom */
.m3-cls-controls {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin: 0 -4px 12px; padding: 8px 4px 10px; background: var(--md-background);
}
.m3-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.m3-chip {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: var(--md-r-chip); cursor: pointer;
  border: 1px solid var(--md-outline); background: var(--md-surface); color: var(--md-on-surface-variant);
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 500; transition: background var(--md-fast) var(--md-ease);
}
.m3-chip:hover { background: var(--md-surface-container-low); }
.m3-chip.is-on { background: var(--md-secondary-container); border-color: var(--md-secondary-container); color: var(--md-on-secondary-container); }
.m3-search {
  display: flex; align-items: center; gap: 8px; flex: 1 1 200px; max-width: 320px; height: 40px; padding: 0 14px; margin: 0;
  border-radius: var(--md-r-btn); border: 1px solid transparent; background: var(--md-surface-container-low); color: var(--md-on-surface-variant);
}
.m3-search:focus-within { border-color: var(--md-primary); background: var(--md-surface); }
.p-app .m3-search input[type=search] { border: 0; box-shadow: none; background: transparent; min-height: 36px; padding: 0; font-size: 14px; }
.p-app .m3-search input[type=search]:focus { box-shadow: none; }
.m3-jumper { flex: 1 1 100%; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.m3-jumper::-webkit-scrollbar { display: none; }
.m3-jump {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; justify-content: center;
  padding: 4px 8px; border-radius: var(--md-r-chip); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--md-on-surface-variant) !important; text-decoration: none !important; transition: background var(--md-fast) var(--md-ease);
}
.m3-jump:hover { background: var(--md-surface-container-low); }
.m3-jump .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--md-surface-container-high); }
.m3-jump.is-completed .dot { background: #7fb6e3; }
.m3-jump.is-live .dot { background: var(--md-live-dot); }
.m3-jump.is-today .dot, .m3-jump.is-next .dot { background: var(--md-primary); }
.m3-jump.is-today, .m3-jump.is-next, .m3-jump.is-live { color: var(--md-on-surface) !important; }
.m3-jump.is-cancelled .dot { background: #d93025; }
.m3-jump.is-changed .dot { background: #e3a008; }
.m3-jump.is-tba .dot { background: transparent; box-shadow: inset 0 0 0 1px var(--md-outline); }
.m3-quiet-line { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--md-on-surface-variant); }
.m3-prog-mats { margin-bottom: 8px; }
.m3-later { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.m3-day { scroll-margin-top: 140px; }

/* ------------------------------ 9. Learning Hours admin (the content area only) */
/* The admin menu keeps the Brandbook; everything inside <main> takes the new look. */
.m3-admin .main { font-family: var(--md-font); font-size: 14px; line-height: 20px; color: var(--ink-2); background: var(--md-background); }
.m3-admin .main h1 { font-size: 28px; line-height: 36px; font-weight: 600; letter-spacing: -.2px; }
.m3-admin .main h2 { font-size: 22px; line-height: 28px; font-weight: 600; letter-spacing: -.1px; }
.m3-admin .main h3 { font-size: 16px; line-height: 24px; font-weight: 600; }
.m3-admin .main strong { font-weight: 600; }
.m3-admin .main a { color: var(--md-primary); }
.m3-admin .main :focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.m3-admin .main .card, .m3-admin .main .list-card, .m3-admin .main .table-wrap, .m3-admin .main .stat-strip { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-card); box-shadow: none; }
.m3-admin .main .card { padding: 20px 24px; }
.m3-admin .main .list-card:hover { transform: none; box-shadow: var(--md-elev-1); border-color: var(--md-outline-variant); }
.m3-admin .main .lc-title { font-family: var(--md-font); font-size: 16px; line-height: 24px; font-weight: 600; }
.m3-admin .main .lc-foot { background: var(--md-surface-container-low); }
.m3-admin .main .date-badge { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-radius: var(--md-r-card); }
.m3-admin .main .stat-strip .n { font-family: var(--md-font); font-weight: 600; color: var(--md-on-surface); }
.m3-admin .main .btn {
  min-height: 40px; padding: 0 20px; border-radius: var(--md-r-btn); border-width: 1px; font-family: var(--md-font); font-weight: 500;
  font-size: 14px; line-height: 20px; padding-top: 0; background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary);
}
.m3-admin .main .btn:hover { transform: none; opacity: 1; box-shadow: inset 0 0 0 100vmax rgba(255, 255, 255, .08), var(--md-elev-1); }
.m3-admin .main .btn-ghost { background: transparent; color: var(--md-primary); border-color: var(--md-outline); }
.m3-admin .main .btn-ghost:hover { background: transparent; box-shadow: inset 0 0 0 100vmax rgba(15, 105, 172, .07); }
.m3-admin .main .btn-text { background: transparent; border-color: transparent; color: var(--md-primary); padding: 0 12px; }
.m3-admin .main .btn-danger { background: #b3261e; border-color: #b3261e; }
.m3-admin .main .btn-sm { min-height: 32px; padding: 0 14px; font-size: 13px; }
.m3-admin .main .btn .ic { width: 18px; height: 18px; }
.m3-admin .main .chip { border-radius: var(--md-r-chip); font-weight: 500; }
.m3-admin .main .chip-open { background: var(--md-tertiary-container); color: var(--md-on-tertiary-container); }
.m3-admin .main .chip-draft { background: var(--md-neutral-container); color: var(--md-on-neutral-container); }
.m3-admin .main .chip-cancelled { background: var(--md-error-container); color: var(--md-on-error-container); }
.m3-admin .main .notice { border-radius: var(--md-r-card); border: 1px solid transparent; border-left-width: 1px; }
.m3-admin .main .notice.info, .m3-admin .main .notice.ok { background: var(--md-primary-container); }
.m3-admin .main table.data th { text-transform: none; letter-spacing: .1px; font-size: 12px; font-weight: 500; color: var(--md-on-surface-variant); background: var(--md-surface-container-low); }
.m3-admin .main table.data tbody tr:hover td { background: var(--md-surface-container-low); }
.m3-admin .main input[type=text], .m3-admin .main input[type=url], .m3-admin .main input[type=number], .m3-admin .main input[type=date],
.m3-admin .main input[type=time], .m3-admin .main input[type=search], .m3-admin .main select, .m3-admin .main textarea { border-radius: 8px; border-color: var(--md-outline); }
.m3-admin .main input:focus, .m3-admin .main select:focus, .m3-admin .main textarea:focus { border-color: var(--md-primary); box-shadow: 0 0 0 1px var(--md-primary); }
.m3-admin .main .field label { font-weight: 500; }
.m3-lh-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 8px; }
.m3-lh-filters select { width: auto; min-height: 40px; max-width: 100%; padding: 6px 32px 6px 12px; font-size: 14px; }
.m3-lh-count { margin: 0 0 8px; }
.m3-lh-table td:first-child, .m3-lh-table th:first-child { width: 44px; text-align: center; }
.m3-lh-table input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--md-primary); }
.m3-lh-pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 12px 0 0; }
.m3-lh-actions { margin-top: 16px; }
.m3-lh-all { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--md-outline-variant); }

/* 10. Payments & invoices (learner) */
.m3-pays { display: flex; flex-direction: column; gap: 16px; }
.m3-pay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.m3-pay-title { min-width: 0; }
.m3-pay-head .m3-card-title { margin: 0; }
.m3-pay-sub { margin: 2px 0 0; font-size: 12px; line-height: 16px; color: var(--md-on-surface-variant); }
.m3-pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 32px; }
.m3-pay-h { margin: 20px 0 8px; font-size: 12px !important; line-height: 16px !important; font-weight: 500; letter-spacing: .5px !important; text-transform: uppercase; color: var(--md-on-surface-variant); }
.p-app .m3-pay-dl { font-size: 14px; line-height: 20px; gap: 4px 16px; }
.p-app .m3-pay-dl + .m3-pay-dl { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--md-outline-variant); }
.p-app .m3-pay-dl dt { color: var(--md-on-surface-variant); }
.p-app .m3-pay-dl .is-total { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--md-outline-variant); color: var(--md-on-surface); font-weight: 600; }
.p-app .m3-pay-dl dd.is-total { margin-left: -16px; padding-left: 16px; }   /* one unbroken line across the column gap */
.m3-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m3-doc { border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-card); padding: 12px 16px; }
.m3-doc-row { display: flex; align-items: center; gap: 12px; }
.m3-doc-row .btn { flex: none; }
.m3-doc .m3-mat-txt { flex: 1 1 180px; }        /* room for the name; on a phone the button moves below it */
.m3-doc .m3-mat-name { white-space: normal; overflow: visible; }   /* the invoice number is never cut off… */
.m3-num { white-space: nowrap; }                  /* …or split at its hyphen */
.p-app .m3-doc-dl { margin: 12px 0 0 48px; font-size: 13px; line-height: 18px; gap: 2px 16px; grid-template-columns: 130px minmax(0, 1fr); }
.p-app .m3-doc-dl dt { color: var(--md-on-surface-variant); }
.m3-pay-help { margin: 16px 0 0; color: var(--md-on-surface-variant); }
.m3-refund-line { margin: 12px 0 0; }
.m3-refund-line a { color: var(--md-primary); }

/* 11. Terms and Privacy Policy */
.p-app .prose.legal { max-width: none; }
.p-app .legal > p, .p-app .legal > ul, .p-app .legal > ol { max-width: 72ch; }
.p-app .legal h2 { font-size: 18px; line-height: 26px; margin: 32px 0 8px; scroll-margin-top: 80px; }
.p-app .legal .lead { font-size: 16px; line-height: 24px; color: var(--md-on-surface); max-width: 72ch; }
.p-app .legal-summary { background: var(--md-surface-container-low); border-radius: var(--md-r-card); padding: 4px 20px 12px; margin: 16px 0; max-width: 72ch; }
.p-app .legal-summary h2, .p-app .legal-toc h2 { font-size: 14px; line-height: 20px; margin: 12px 0 4px; text-transform: uppercase; letter-spacing: .5px; color: var(--md-on-surface-variant); }
.p-app .legal-toc ol { columns: 2 240px; column-gap: 32px; margin: 0; }
.p-app .legal-toc li { break-inside: avoid; margin-bottom: 4px; }
.p-app .legal-table { overflow-x: auto; margin: 8px 0 12px; }
.p-app .legal-table table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; line-height: 20px; }
.p-app .legal-table th, .p-app .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--md-outline-variant); }
.p-app .legal-table th { font-weight: 600; background: var(--md-surface-container-low); }
.p-app .legal-table td:first-child { font-weight: 500; width: 24%; }
.p-app .legal-contact { list-style: none; padding: 0 !important; margin: 8px 0 12px; }
.p-app .legal-contact li { margin-bottom: 2px; }
@media (max-width: 720px) {
  .m3-pay-grid { grid-template-columns: minmax(0, 1fr); }
  .m3-doc-row { flex-wrap: wrap; row-gap: 8px; }
  .m3-doc-row .btn { margin-left: 48px; }
  .p-app .m3-doc-dl { margin-left: 0; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .p-app .m3-doc-dl dd { margin-bottom: 6px; }
}

@media (max-width: 600px) {
  .m3-search { max-width: none; flex-basis: 100%; }
  .m3-upnext { padding: 20px 16px; }
  .m3-upnext-actions .btn:first-child { flex: 1 1 100%; }
  .m3-evs { padding: 0 12px 4px; }
  .m3-ev { grid-template-columns: minmax(0, 1fr) auto; }
  .m3-ev-time { grid-column: 1 / -1; padding-top: 0; }
  .m3-day-head { flex-wrap: wrap; row-gap: 2px; padding-left: 16px; }
  .m3-day-count { order: 3; margin-left: 0; flex-basis: 100%; }
  .m3-day-head .m3-chev { margin-left: auto; }
  .m3-card { padding: 16px; }
  .m3-creds { gap: 0 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .p-app *, .p-app *::before, .p-app *::after, .m3-admin .main * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .m3-linear.is-indeterminate::after { left: 0; width: 35%; }
}

/* 12. Sign-in and sign-up: light and quiet, like the rest of the portal (no dark panel) */
.p-app .auth-wrap { background: var(--md-background); }
.p-app .auth-hero { background: var(--md-surface-container-low); color: var(--ink-2); border-right: 1px solid var(--md-outline-variant); }
.p-app .auth-hero h1 { color: var(--md-on-surface); font-size: 36px; line-height: 44px; }
.p-app .auth-hero p, .p-app .auth-hero li { color: var(--ink-2); }
.p-app .auth-hero li .ic { color: var(--md-brand); }
.p-app .auth-hero .eyebrow { background: var(--md-primary-container); color: var(--md-on-primary-container); }
.p-app .auth-hero .proof { color: var(--md-on-surface-variant); border-top-color: var(--md-outline-variant); }
.p-app .auth-hero .proof strong { color: var(--md-on-surface); }
.p-app .auth-card { border-radius: var(--md-r-panel); box-shadow: none; padding: 32px; }
.p-app .auth-card h2 { font-weight: 800; font-size: 26px; line-height: 32px; }
@media (max-width: 820px) {
  .p-app .auth-hero { border-right: 0; border-bottom: 1px solid var(--md-outline-variant); }
  .p-app .auth-hero h1 { font-size: 28px; line-height: 36px; }
  .p-app .auth-card { padding: 24px; }
}

/* Narrow single-card pages (sign-in code, forgot / reset password, unsubscribe, messages): the card sits a
   little lower, and a message above it lines up with the card instead of spanning the page. */
.p-app .main > .card.narrow { margin-top: 40px; padding: 32px; }
.p-app .main > .card.narrow h1 { font-size: 28px; line-height: 36px; }
.p-app .main:has(> .card.narrow) > .notice { max-width: 560px; margin-left: auto; margin-right: auto; }
.p-app .main:has(> .card.narrow) > .notice + .card.narrow { margin-top: 16px; }
@media (max-width: 600px) {
  .p-app .main > .card.narrow { margin-top: 8px; padding: 24px 20px; }
}

/* Learning Hours "Who can book": however many counts there are, they share one row and wrap evenly. */
.m3-admin .main .stat-strip.kpis > div { flex: 1 1 112px; padding: 12px 16px; }

/* 13. Programme report (staff) */
.rpt-steps { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.rpt-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-bottom: 4px; }
.rpt-label { font-weight: 500; color: var(--md-on-surface); }
.rpt-num { font-variant-numeric: tabular-nums; color: var(--md-on-surface-variant); white-space: nowrap; }
.rpt-num strong { color: var(--md-on-surface); }
.rpt-bar { display: block; height: 8px; border-radius: 4px; background: var(--md-surface-container); overflow: hidden; }
.rpt-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--md-brand); }
.rpt-table .rpt-cell { min-width: 180px; }
.rpt-table .rpt-cell .rpt-bar { margin-top: 4px; }
.rpt-quiz + .rpt-quiz { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--md-outline-variant); }
.rpt-dist { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.rpt-dist li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 72px; gap: 12px; align-items: center; }
.rpt-dist .rpt-num { text-align: right; }
.rpt-comments { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.rpt-comments li { border-left: 3px solid var(--md-outline-variant); padding: 2px 0 2px 12px; }
.rpt-days30 { display: flex; align-items: flex-end; gap: 3px; height: 96px; margin-top: 12px; padding-bottom: 1px; border-bottom: 1px solid var(--md-outline-variant); }
.rpt-days30 span { flex: 1 1 0; background: var(--md-brand); border-radius: 3px 3px 0 0; min-height: 2px; }
.rpt-days30-axis { display: flex; justify-content: space-between; margin-top: 4px; }
@media (max-width: 600px) { .rpt-dist li { grid-template-columns: 90px minmax(0, 1fr) 56px; } }

/* 14. Certificates: milestones and LinkedIn; recommendations; reminder choices; programme filters */
.cert-progress { margin-bottom: 16px; }
.milestones { list-style: none; margin: 16px 0 12px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.milestones li { display: flex; align-items: center; }
.ms-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px;
  font-variant-numeric: tabular-nums; border: 1px solid var(--md-outline-variant); color: var(--md-on-surface-variant); background: var(--md-surface); }
.milestones li.is-done .ms-dot { background: var(--md-primary); border-color: var(--md-primary); color: var(--md-on-primary); }
.milestones li.is-next .ms-dot { border: 2px solid var(--md-brand); color: var(--md-primary); }
.milestones li.is-next .ms-dot { font-size: 14px; }
.cert-progress-lh { margin: 12px 0 0; }
.p-app .btn-linkedin .ic { color: #0a66c2; }
.rec-list { display: grid; gap: 12px; margin-bottom: 24px; }
.rec-card { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.rec-main { flex: 1; min-width: 0; }
.rec-title { font-family: var(--md-display); font-weight: 700; font-size: 16px; line-height: 22px; }
.rec-title a { color: var(--md-on-surface); }
.rec-why { margin-top: 4px; font-size: 13px; color: var(--md-on-primary-container); }
@media (max-width: 600px) { .rec-card { flex-direction: column; align-items: stretch; } }
.pref-group { border: 0; padding: 0; margin: 20px 0 8px; }
.pref-group legend { font-family: var(--md-display); font-weight: 700; font-size: 15px; color: var(--md-on-surface); margin-bottom: 4px; padding: 0; }
.events-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; }
.events-filters select { width: auto; min-height: 40px; }
.events-filters .check { margin: 0; }

/* 15. Classroom viewer (a recording or a PDF inside the page) */
.m3-viewer { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 0; border-radius: var(--md-r-panel);
  background: var(--md-surface); box-shadow: var(--md-elev-2); color: var(--md-on-surface); }
.m3-viewer::backdrop { background: rgba(13, 27, 46, .55); }
.m3-viewer-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border-bottom: 1px solid var(--md-outline-variant); }
.m3-viewer-head h2 { flex: 1; min-width: 0; margin: 0; font-size: 16px !important; line-height: 24px !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m3-viewer-close { font-size: 26px; line-height: 1; }
.m3-viewer-body iframe { display: block; width: 100%; height: calc(100vh - 120px); border: 0; background: var(--md-surface-container-low); }
.m3-viewer.is-video .m3-viewer-body iframe { height: auto; aspect-ratio: 16 / 9; max-height: calc(100vh - 120px); background: #000; }
@media (max-width: 600px) { .m3-viewer { width: 100vw; max-width: 100vw; border-radius: 0; } }

/* 16. Text size (account menu) — scales the content area; the menu and top bar stay as they are */
html[data-text="lg"] .p-app .main, html[data-text="lg"] .m3-viewer-head { zoom: 1.125; }
html[data-text="xl"] .p-app .main, html[data-text="xl"] .m3-viewer-head { zoom: 1.25; }
.p-app .menu-text-size { display: flex; align-items: center; gap: 4px; padding: 8px 16px; border-top: 1px solid var(--md-outline-variant); }
.p-app .menu-text-size span { flex: 1; font-size: 14px; color: var(--md-on-surface-variant); }
.p-app .menu-text-size button { min-width: 40px; min-height: 36px !important; padding: 0 8px !important; border: 1px solid var(--md-outline-variant) !important;
  border-radius: var(--md-r-btn) !important; background: var(--md-surface); color: var(--md-on-surface); font-weight: 600; justify-content: center; }
.p-app .menu-text-size button[aria-pressed="true"] { background: var(--md-primary-container); border-color: var(--md-brand) !important; color: var(--md-on-primary-container); }

/* =========================================================================
   17. Product layer — the density and restraint of a professional console
   ------------------------------------------------------------------------
   The 60 : 30 : 10 split, read the way a product team reads it:
     60  surface — a near-white app ground and white content. Most of the screen.
     30  structure — one neutral grey family: hairlines, secondary text, the
         hover and selected states, the menu. It is what gives the page its
         order, and it is never a colour the eye has to decode.
     10  action — Scrollwell blue, and only where something happens: the one
         primary button on a view, the selected menu row, links, focus,
         progress. Status colours (live, cancelled, moved) are separate and
         used at chip size only.
   Hierarchy comes from type, weight and space — not from tinted boxes,
   ribbons or coloured edges. Nothing here is decoration.
   ========================================================================= */
:root {
  --md-background: #f7f8fa;              /* 60 — the app ground */
  --md-surface: #ffffff;                 /* 60 — content */
  --md-surface-container-low: #f4f6f8;   /* 30 — hover */
  --md-surface-container: #eceff3;       /* 30 — pressed, tracks */
  --md-surface-container-high: #e3e7ec;
  --md-secondary-container: #eaeef4;     /* 30 — the selected menu row */
  --md-on-secondary-container: #0d1b2e;
  --md-outline-variant: #e4e7ec;         /* 30 — every hairline */
  --md-outline: #c3c9d2;
  --md-on-surface-variant: #59616e;      /* 30 — secondary text (5.9:1 on white) */
  /* shape: small, consistent radii */
  --md-r-card: 10px;
  --md-r-panel: 12px;
  --md-r-btn: 6px;
  --md-r-chip: 4px;
  --md-elev-1: 0 1px 2px rgba(13, 27, 46, .05);
  --md-elev-2: 0 8px 24px rgba(13, 27, 46, .12), 0 2px 6px rgba(13, 27, 46, .06);
}

/* ---- type: one tight scale, numbers aligned ---------------------------- */
.p-app h1 { font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.4px; }
.p-app h2 { font-size: 17px; line-height: 24px; font-weight: 700; letter-spacing: -.2px; }
.p-app h3 { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: -.1px; }
.p-app .sec-head { margin: 28px 0 12px; }
.p-app .sec-head h2 { font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: -.1px; }
.p-app .section-title { font-size: 15px; line-height: 22px; font-weight: 700; letter-spacing: -.1px; }
.p-app .greet h1 { font-size: 24px; }
.p-app .greet p { font-size: 13.5px; }
.p-app .m3-card-title { font-size: 14px !important; line-height: 20px !important; font-weight: 600; }
.p-app .m3-upnext-title { font-size: 20px !important; line-height: 28px !important; font-weight: 650; letter-spacing: -.2px; }
.p-app .small, .p-app .muted, .p-app figcaption { font-size: 12.5px; line-height: 18px; }
.p-app .stat .n, .p-app .stat-strip .n, .p-app .tile .n { font-size: 22px; line-height: 28px; font-weight: 650; font-variant-numeric: tabular-nums; }

/* ---- chrome: a white bar and menu, separated by hairlines -------------- */
.p-app .topbar { background: var(--md-surface); border-bottom: 1px solid var(--md-outline-variant); }
.p-app .side { background: var(--md-surface); border-right: 1px solid var(--md-outline-variant); padding: 12px 8px; }
.p-app .shell { background: var(--md-background); }
.p-app .nav-item { min-height: 36px; padding: 0 10px; gap: 10px; font-size: 13.5px; font-weight: 500; border-radius: var(--md-r-btn); }
.p-app .nav-item .ic { width: 18px; height: 18px; }
.p-app .nav-item:hover { background: var(--md-surface-container-low); }
.p-app .nav-item.active { background: var(--md-secondary-container); color: var(--md-on-surface); font-weight: 600; }
.p-app .nav-item.active .ic { color: var(--md-primary); }
.p-app .side-foot { padding: 12px 10px; font-size: 11.5px; line-height: 16px; }
.p-app .tabbar { background: var(--md-surface); border-top: 1px solid var(--md-outline-variant); min-height: 60px; }
.p-app .tabbar a { min-height: 60px; font-size: 11.5px; }
.p-app .tabbar a .ic { padding: 2px 16px; }
@media (min-width: 1101px) { .p-app .shell:not(.no-side) { grid-template-columns: 240px minmax(0, 1fr); } }
.p-app .main { padding: 20px 28px 56px; }

/* ---- page header: breadcrumb, title, one meta line, actions right ------ */
.p-app .page-head, .p-app .m3-head, .p-app .greet {
  background: none; border: 0; border-bottom: 1px solid var(--md-outline-variant);
  border-radius: 0; padding: 0 0 16px; margin: 0 0 20px;
}
.p-app .page-head h1, .p-app .m3-head h1, .p-app .greet h1 { margin: 0; }
.p-app .page-head p, .p-app .m3-head p, .p-app .greet p { margin: 4px 0 0; color: var(--md-on-surface-variant); }
.p-app .m3-crumbs { font-size: 12.5px; margin-bottom: 6px; }

/* ---- surfaces: hairline cards, no shadows ----------------------------- */
.p-app .card, .p-app .m3-card { padding: 16px 18px; border-radius: var(--md-r-card); border: 1px solid var(--md-outline-variant); }
.p-app .list-card { border-radius: var(--md-r-card); }
.p-app .list-card:hover { box-shadow: none; border-color: var(--md-outline); }
.p-app .m3-upnext { padding: 20px; border-radius: var(--md-r-panel); }
.p-app .m-tiles { gap: 12px; }
.p-app .stat-strip, .p-app .facts { background: var(--md-surface); border: 1px solid var(--md-outline-variant); }
.p-app table.data thead th { background: var(--md-surface-container-low); color: var(--md-on-surface-variant);
  font-size: 12px; font-weight: 600; letter-spacing: .2px; text-transform: none; }
.p-app table.data td, .p-app table.data th { padding: 10px 12px; }

/* ---- controls: compact, one filled action per view --------------------- */
.p-app .btn { min-height: 34px; padding: 0 14px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; border-radius: var(--md-r-btn); }
.p-app .btn .ic { width: 16px; height: 16px; }
.p-app .btn-sm { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.p-app .btn-text { padding: 0 8px; font-weight: 600; }
.p-app .chip { font-size: 11.5px; line-height: 16px; font-weight: 600; padding: 3px 7px; border-radius: var(--md-r-chip); }
.p-app input, .p-app select, .p-app textarea { min-height: 36px; border-radius: var(--md-r-btn); font-size: 14px; }
.p-app label { font-size: 13px; font-weight: 600; }
.p-app .search-btn { height: 34px; border-radius: var(--md-r-btn); font-size: 13px; }

/* ---- 10 — where the blue is allowed to appear -------------------------- */
.p-app .m3-linear > span, .p-app .m3-journey-track > span.is-done, .p-app .m3-journey-track > span.is-today { background: var(--md-primary); }
.p-app .milestones li.is-next .ms-dot { border: 2px solid var(--md-primary); color: var(--md-primary); background: var(--md-surface); }

@media (max-width: 820px) {
  .p-app .main { padding: 16px 16px 84px; }
  .p-app .page-head, .p-app .m3-head, .p-app .greet { padding-bottom: 12px; margin-bottom: 16px; }
  .p-app h1 { font-size: 21px; line-height: 28px; }
  .p-app .greet h1 { font-size: 21px; }
}

/* Status words that pages set with an inline colour: keep them the readable deep blue.
   (--ok is worked out on :root, so re-declaring --blue lower down does not reach it: 4.45:1.) */
.p-app, .a-app.m3-admin {
  /* These four are worked out on :root in lms.css, so re-declaring --blue lower down never reaches
     them. Pages use them in inline styles (style="color:var(--warn)"), which is why they matter. */
  --ok: var(--md-primary); --info: var(--md-primary); --brand: var(--md-primary);
  --warn: var(--md-on-warning-container); --muted: var(--md-on-surface-variant);
}

/* Home tiles: a metric, not a badge — no round icon plate, no arrow chrome. */
.p-app .m-tile { padding: 14px 16px; gap: 12px; align-items: flex-start; border-radius: var(--md-r-card); }
.p-app .m-tile .ico { width: 28px; height: 28px; border-radius: var(--md-r-chip); background: transparent;
  color: var(--md-on-surface-variant); place-items: start center; }
.p-app .m-tile .ico .ic, .p-app .m-tile .ico svg { width: 18px; height: 18px; }
.p-app .m-tile .n { font-size: 22px; line-height: 28px; font-weight: 650; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.p-app .m-tile .l { font-size: 12.5px; line-height: 18px; color: var(--md-on-surface-variant); margin-top: 2px; }
.p-app .m-tile .go { color: var(--md-outline); align-self: center; }
.p-app a.m-tile:hover { transform: none; box-shadow: none; border-color: var(--md-outline); }

/* "Now" in the What's coming up strip: a white card with a blue edge, not a filled block. */
.p-app .sched-card.is-now { background: var(--md-surface); border-color: var(--md-primary); box-shadow: inset 2px 0 0 var(--md-primary); }
.p-app .sched-card.is-now .topic, .p-app .sched-card.is-now .who { color: var(--md-on-surface); }
.p-app .sched-card.is-now .when { color: var(--md-on-surface-variant); }
.p-app .sched-card.is-now .day-pill { background: var(--md-surface-container); color: var(--md-on-surface-variant); }
.p-app .sched-card .now-pill { background: var(--md-primary); color: var(--md-on-primary); font-size: 11px; font-weight: 600; border-radius: var(--md-r-chip); padding: 2px 7px; }

/* A row of actions on a list card: one filled action, the rest quiet text buttons. */
.p-app .lc-actions { gap: 4px; }
.p-app .lc-actions .btn-ghost { background: transparent; border-color: transparent; color: var(--md-primary); padding: 0 8px; }
.p-app .lc-actions .btn-ghost:hover { background: var(--md-surface-container-low); border-color: transparent; color: var(--md-primary); }
.p-app .lc-actions .btn-ghost .ic { color: currentColor; }
.p-app .lc-actions .btn-linkedin .ic { color: #0a66c2; }

/* Dark surfaces: the heading rules above must not repaint their text in ink.
   (The closing band on a programme page is navy — its heading was the same navy as the band.) */
.p-app .cta-close, .p-app .cta-close p { color: #cfd8e3; }
.p-app .cta-close h1, .p-app .cta-close h2, .p-app .cta-close h3, .p-app .cta-close strong { color: #ffffff; }
.p-app .snackbar, .p-app .snackbar * { color: var(--md-inverse-on-surface); }
.p-app .proof .stars { color: var(--star-ink); }   /* the review star: 3.19:1 was too light to read beside the text */

/* =========================================================================
   18. "Show me around" — the tour a learner sees once, after they register
   ========================================================================= */
.tour-wrap { max-width: 640px; margin: 0 auto; }
.p-app .tour { padding: 28px 28px 24px; }
.tour-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tour-count { font-size: 12px; font-weight: 600; letter-spacing: .3px; color: var(--md-on-surface-variant); text-transform: uppercase; }
.tour-dots { list-style: none; display: flex; gap: 6px; margin: 12px 0 20px; padding: 0; }
.tour-dots li { height: 4px; flex: 1; border-radius: 2px; background: var(--md-surface-container); }
.tour-dots li.is-done { background: var(--md-support-strong, #d8e5f2); }
.tour-dots li.is-now { background: var(--md-primary); }
.tour-art { width: 56px; height: 56px; border-radius: var(--md-r-card); display: grid; place-items: center;
  background: var(--md-primary-container); color: var(--md-primary); margin-bottom: 16px; }
.tour-art .ic { width: 28px; height: 28px; }
.p-app .tour h1 { font-size: 22px; line-height: 30px; margin: 0 0 8px; }
.tour-lead { margin: 0 0 16px; font-size: 15px; line-height: 23px; color: var(--md-on-surface); }
.tour-points { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.tour-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 21px; color: var(--md-on-surface-variant); }
.tour-points .ic { flex: none; margin-top: 2px; color: var(--md-primary); }
.tour-see { margin: 0 0 20px; font-size: 13.5px; }
.tour-nav { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--md-outline-variant); padding-top: 18px; }
.tour-nav .btn:last-child, .tour-nav form:last-child { margin-left: auto; }
.tour-foot { margin: 16px 0 0; text-align: center; font-size: 13px; }
.p-app .tour-ask .ic { color: var(--md-primary); }
@media (max-width: 600px) {
  .p-app .tour { padding: 20px 16px 16px; }
  .p-app .tour h1 { font-size: 20px; line-height: 27px; }
  .tour-nav { flex-wrap: wrap; }
  .tour-nav .btn { flex: 1 1 140px; justify-content: center; }
}

/* =========================================================================
   19. The staff console — the same system as the learner portal, denser
   ------------------------------------------------------------------------
   Staff read tables all day, so rows, controls and type are tighter here than
   on a learner page. The colour split is the same: a near-white ground and
   white content (60), one grey family for rules, secondary text and states
   (30), Scrollwell blue only on the action and the row you are on (10).
   ========================================================================= */
.a-app.m3-admin { background: var(--md-background); }
.a-app.m3-admin .shell { background: var(--md-background); }

/* ---- top bar ---- */
.a-app.m3-admin .topbar { background: var(--md-surface); border-bottom: 1px solid var(--md-outline-variant); box-shadow: none; padding: 0 16px 0 12px; }
.a-app.m3-admin .brand-logo { height: 34px; }
.a-app.m3-admin .brand-text strong { font-size: 15px; }
.a-app.m3-admin .brand-sub, .a-app.m3-admin .brand span.area { font-size: 11px; letter-spacing: .4px; color: var(--md-on-surface-variant); }
.a-app.m3-admin .search-btn { height: 32px; border-radius: var(--md-r-btn); border: 1px solid var(--md-outline-variant);
  background: var(--md-surface-container-low); color: var(--md-on-surface-variant); font-size: 13px; }
.a-app.m3-admin .search-btn:hover { background: var(--md-surface-container); color: var(--md-on-surface); }
.a-app.m3-admin .top-pill, .a-app.m3-admin .top-link { border-radius: var(--md-r-btn); font-size: 13px; font-weight: 500;
  color: var(--md-on-surface-variant); padding: 6px 10px; border: 1px solid transparent; background: none; }
.a-app.m3-admin .top-pill { border-color: var(--md-outline-variant); }
.a-app.m3-admin .top-pill:hover, .a-app.m3-admin .top-link:hover { background: var(--md-surface-container-low); color: var(--md-on-surface); }
.a-app.m3-admin .avatar { background: var(--md-secondary-container); color: var(--md-on-surface); font-weight: 600; }
.a-app.m3-admin .user-menu .menu { border-radius: var(--md-r-card); border: 1px solid var(--md-outline-variant); box-shadow: var(--md-elev-2); }

/* ---- side menu ---- */
.a-app.m3-admin .side { background: var(--md-surface); border-right: 1px solid var(--md-outline-variant); padding: 10px 8px; }
@media (min-width: 1101px) { .a-app.m3-admin .shell { grid-template-columns: 232px minmax(0, 1fr); } }
.a-app.m3-admin .nav-label { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
  color: var(--md-on-surface-variant); padding: 14px 10px 6px; }
.a-app.m3-admin .nav-group > summary::after { color: var(--md-outline); }
.a-app.m3-admin .nav-item { min-height: 32px; padding: 0 10px; gap: 10px; border-radius: var(--md-r-btn);
  font-size: 13.5px; font-weight: 500; color: var(--md-on-surface-variant); }
.a-app.m3-admin .nav-item .ic { width: 18px; height: 18px; color: var(--md-on-surface-variant); }
.a-app.m3-admin .nav-item:hover { background: var(--md-surface-container-low); color: var(--md-on-surface); }
.a-app.m3-admin .nav-item.active { background: var(--md-secondary-container); color: var(--md-on-surface); font-weight: 600; }
.a-app.m3-admin .nav-item.active .ic { color: var(--md-primary); }
.a-app.m3-admin .nav-item .count { background: var(--md-primary); color: var(--md-on-primary); font-size: 11px; font-weight: 600; min-width: 18px; height: 18px; }
.a-app.m3-admin .side-foot { font-size: 11.5px; line-height: 16px; color: var(--md-on-surface-variant); padding: 12px 10px; }

/* ---- the working area ---- */
.a-app.m3-admin .main { max-width: 1400px; padding: 18px 24px 48px; }
.m3-admin .main h1 { font-size: 22px; line-height: 30px; font-weight: 700; letter-spacing: -.3px; }
.m3-admin .main h2 { font-size: 16px; line-height: 24px; font-weight: 700; letter-spacing: -.1px; }
.m3-admin .main h3 { font-size: 14px; line-height: 20px; font-weight: 600; }
.m3-admin .main .crumbs { font-size: 12.5px; color: var(--md-on-surface-variant); margin-bottom: 4px; }
.m3-admin .main .page-head { border-bottom: 1px solid var(--md-outline-variant); padding-bottom: 14px; margin-bottom: 18px; }
.m3-admin .main .page-head p { margin: 4px 0 0; font-size: 13px; color: var(--md-on-surface-variant); }
.m3-admin .main .card, .m3-admin .main .list-card, .m3-admin .main .table-wrap, .m3-admin .main .stat-strip { border-radius: var(--md-r-card); }
.m3-admin .main .card { padding: 16px 18px; }
.m3-admin .main .sec-head h2 { font-size: 14px; letter-spacing: 0; }

/* ---- tables: the thing staff look at most ---- */
.m3-admin .main table.data { font-size: 13.5px; }
.m3-admin .main table.data thead th { background: var(--md-surface-container-low); color: var(--md-on-surface-variant);
  font-size: 12px; font-weight: 600; letter-spacing: .2px; text-transform: none; border-bottom: 1px solid var(--md-outline-variant); padding: 8px 12px; }
.m3-admin .main table.data td, .m3-admin .main table.data tbody th { padding: 9px 12px; border-bottom: 1px solid var(--md-outline-variant); }
.m3-admin .main table.data tbody tr:hover { background: var(--md-surface-container-low); }
.m3-admin .main table.data tbody tr:last-child td { border-bottom: 0; }
.m3-admin .main table.data .num, .m3-admin .main table.data .money, .m3-admin .main .tnum { font-variant-numeric: tabular-nums; }
.m3-admin .main .table-wrap { background: var(--md-surface); }

/* ---- controls ---- */
.m3-admin .main .btn { min-height: 34px; padding: 0 14px; font-size: 13.5px; font-weight: 600; border-radius: var(--md-r-btn); }
.m3-admin .main .btn:hover { box-shadow: none; background: var(--md-primary-hover); border-color: var(--md-primary-hover); }
.m3-admin .main .btn-ghost { background: var(--md-surface); color: var(--md-on-surface); border-color: var(--md-outline-variant); }
.m3-admin .main .btn-ghost:hover { background: var(--md-surface-container-low); color: var(--md-on-surface); border-color: var(--md-outline); box-shadow: none; }
.m3-admin .main .btn-sm { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.m3-admin .main .btn .ic { width: 16px; height: 16px; }
.m3-admin .main input, .m3-admin .main select, .m3-admin .main textarea { min-height: 36px; border-radius: var(--md-r-btn);
  border: 1px solid var(--md-outline); font-size: 14px; background: var(--md-surface); }
.m3-admin .main input:focus, .m3-admin .main select:focus, .m3-admin .main textarea:focus { border-color: var(--md-primary); box-shadow: 0 0 0 3px rgba(15, 105, 172, .12); }
.m3-admin .main label { font-size: 13px; font-weight: 600; color: var(--md-on-surface); }
.m3-admin .main .field small, .m3-admin .main .hint { font-size: 12.5px; color: var(--md-on-surface-variant); }
.m3-admin .main .chip { font-size: 11.5px; line-height: 16px; font-weight: 600; padding: 3px 7px; border-radius: var(--md-r-chip); }
.m3-admin .main .stat-strip > div { padding: 12px 16px; }
.m3-admin .main .stat-strip .n { font-size: 20px; line-height: 26px; font-weight: 650; font-variant-numeric: tabular-nums; }
.m3-admin .main .stat-strip .l { font-size: 12px; color: var(--md-on-surface-variant); }
.m3-admin .main .notice { border-radius: var(--md-r-card); font-size: 13.5px; }

@media (max-width: 1100px) {
  .a-app.m3-admin .main { padding: 16px 16px 40px; }
}
/* Buttons inside a table row are row-sized, so a long list stays compact. */
.m3-admin .main table.data .btn { min-height: 28px; padding: 0 10px; font-size: 12.5px; }
.m3-admin .main table.data .btn .ic { width: 15px; height: 15px; }
.m3-admin .main table.data .row, .m3-admin .main table.data .actions { gap: 6px; }

/* =========================================================================
   20. The scrollwell.com look — cool white, one blue, hairline borders
   ------------------------------------------------------------------------
   The portal and the website are one product, so they read as one: a cool
   off-white ground, white cards separated by a hairline rather than a shadow,
   near-black cool ink, and Scrollwell blue carrying every action and every
   number that matters. (This block used to be a warm cream "paper" theme; it
   looked nothing like the site people arrive from.) Colours are declared once
   here as tokens, so the dark theme is the same page with a different set of
   values — no component rule knows which theme is on.
   ========================================================================= */
:root {
  --md-background: #f6f8fb;              /* 60 — the page ground, cool not cream */
  --md-surface: #ffffff;
  --md-surface-container-low: #f1f4f9;   /* raised: hover, table heads */
  --md-surface-container: #e9eef5;
  --md-surface-container-high: #dfe6ef;
  --md-secondary-container: #e8f2fa;     /* the selected row — a blue tint, as on the site */
  --md-on-secondary-container: #0b4f85;
  --md-outline-variant: #e4e8ef;         /* hairline: what separates a card from the page */
  --md-outline: #b9c2cf;
  --md-on-surface: #0d1b2e;              /* Scrollwell ink (15.9:1 on the ground) */
  --md-on-surface-variant: #5c6b7f;      /* secondary text (5.1:1 on the ground) */
  --md-inverse-surface: #0d1b2e;
  --md-inverse-on-surface: #f6f8fb;
  --md-primary: #0f69ac;
  --md-primary-hover: #0b5a94;
  --md-brand: #127bcb;
  --md-primary-container: #e8f2fa;
  --md-on-primary-container: #0b4f85;
  --md-support: #eef2f7;
  --md-support-strong: #dde4ed;
  /* semantic, cooled to sit on the same ground */
  --md-error-container: #fdeeec;   --md-on-error-container: #8c1d18;
  --md-warning-container: #fff6e5; --md-on-warning-container: #6f4700;
  --md-info-container: #e8f2fa;    --md-on-info-container: #0b4f85;
  --md-tertiary-container: #e8f2fa; --md-on-tertiary-container: #0b4f85;
  --md-neutral-container: #eef1f5; --md-on-neutral-container: #3b4556;
  /* the site leads with borders, not shadows — these only lift a menu off the page */
  --md-elev-1: 0 1px 2px rgba(13, 27, 46, .04);
  --md-elev-2: 0 12px 28px rgba(13, 27, 46, .10), 0 2px 6px rgba(13, 27, 46, .05);
}
body.p-app, .m3-admin .main {
  --ink-2: #4a5568;
  --err: #b42318; --err-tint: var(--md-error-container); --err-ink: var(--md-on-error-container);
  --warn-ink: var(--md-on-warning-container); --warn-tint: var(--md-warning-container); --warn-rule: #e2b04a;
  --verified: #16a870; --verified-ink: #0e7a51; --verified-tint: #e7f6ef;
  --ok: var(--md-primary); --info: var(--md-primary);
}
.p-app .topbar, .a-app.m3-admin .topbar {          /* white, with the page showing faintly through */
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}
.p-app .cta-close { background: #0d1b2e; border-color: #0d1b2e; }
.p-app .m3-linear, .p-app .m3-journey-track > span { background: var(--md-surface-container-high); }

/* ---- the dark twin: chosen in the account menu, kept in this browser ---- */
:root[data-theme="dark"] {
  --md-background: #15171c;
  --md-surface: #1b1e24;
  --md-surface-container-low: #22262e;
  --md-surface-container: #262b33;
  --md-surface-container-high: #2a2e36;
  --md-secondary-container: #26303c;
  --md-on-secondary-container: #e8ecf2;
  --md-outline-variant: #343945;
  --md-outline: #4b5261;
  --md-on-surface: #e8ecf2;
  --md-on-surface-variant: #a2a9b3;      /* 7.0:1 on the dark ground */
  --md-inverse-surface: #e8ecf2;
  --md-inverse-on-surface: #15171c;
  --md-primary: #6fb4ea;                 /* the brand blue, lightened to read on dark (7.2:1) */
  --md-primary-hover: #8cc6f2;
  --md-brand: #6fb4ea;
  --md-primary-container: #1d2c3b;
  --md-on-primary-container: #bcdcf6;
  --md-on-primary: #08121c;
  --md-support: #1e222a;
  --md-support-strong: #2c323d;
  --md-error-container: #3a1f1d;   --md-on-error-container: #f2b8b5;
  --md-warning-container: #33280f; --md-on-warning-container: #f0cf8a;
  --md-info-container: #1d2c3b;    --md-on-info-container: #bcdcf6;
  --md-tertiary-container: #1d2c3b; --md-on-tertiary-container: #bcdcf6;
  --md-neutral-container: #262b33; --md-on-neutral-container: #c2c8d1;
  --md-live-dot: #6fb4ea;
  --md-elev-1: 0 1px 2px rgba(0, 0, 0, .35);
  --md-elev-2: 0 12px 34px rgba(0, 0, 0, .50), 0 2px 8px rgba(0, 0, 0, .35);
}
:root[data-theme="dark"] body.p-app, :root[data-theme="dark"] .m3-admin .main {
  --ink-2: #c2c8d1;
  --star-ink: #f0b45e;              /* the review star, lightened to read on the dark card (7.4:1) */
  --err: #f2b8b5; --err-ink: var(--md-on-error-container); --verified: #7bc39a; --verified-ink: #a7dcbe; --verified-tint: #16301f;
  --warn-rule: #d9a441;
}
:root[data-theme="dark"] .p-app .topbar, :root[data-theme="dark"] .a-app.m3-admin .topbar { background: rgba(21, 23, 28, .88); }
:root[data-theme="dark"] .p-app .cta-close { background: var(--md-surface-container-high); border-color: var(--md-outline-variant); }
/* content-box, so the white plate's padding sits OUTSIDE the set height — with border-box the
   wordmark came out 9% smaller in dark than in light. */
:root[data-theme="dark"] .brand-logo { mix-blend-mode: normal; background: #fff; border-radius: 6px; padding: 2px 4px; box-sizing: content-box; }
:root[data-theme="dark"] .p-app .btn-ghost .ic, :root[data-theme="dark"] .m3-admin .main .btn-ghost .ic { color: var(--md-primary); }
:root[data-theme="dark"] img:not(.brand-logo):not([src$=".svg"]) { filter: brightness(.92); }
:root[data-theme="dark"] .chip-valid, :root[data-theme="dark"] .chip-issued { background: #16301f; color: #a7dcbe; }

/* ---- density: the same screens, tighter, for staff who read tables all day */
:root[data-density="compact"] .m3-admin .main table.data td,
:root[data-density="compact"] .m3-admin .main table.data thead th { padding: 5px 10px; }
:root[data-density="compact"] .m3-admin .main table.data { font-size: 13px; }
:root[data-density="compact"] .m3-admin .main .card { padding: 12px 14px; }
:root[data-density="compact"] .m3-admin .main .stat-strip > div { padding: 8px 12px; }
:root[data-density="compact"] .m3-admin .main .stat-strip .n { font-size: 18px; line-height: 24px; }
:root[data-density="compact"] .a-app.m3-admin .main { padding: 12px 18px 36px; }
:root[data-density="compact"] .a-app.m3-admin .nav-item { min-height: 28px; }
:root[data-density="compact"] .m3-admin .main .btn { min-height: 30px; }
:root[data-density="compact"] .m3-admin .main input,
:root[data-density="compact"] .m3-admin .main select,
:root[data-density="compact"] .m3-admin .main textarea { min-height: 32px; }

/* ---- touch and typography polish -------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body.p-app, body.a-app { touch-action: manipulation; }
.p-app .btn, .a-app.m3-admin .main .btn { touch-action: manipulation; }
.p-app .tnum, .p-app .stat .n, .p-app .m-tile .n, .m3-admin .main .stat-strip .n,
.p-app table.data td.num, .m3-admin .main table.data td.num { font-variant-numeric: tabular-nums; }
@media (max-width: 820px) {
  .p-app input, .p-app select, .p-app textarea,
  .m3-admin .main input, .m3-admin .main select, .m3-admin .main textarea { font-size: 16px; }  /* iOS does not zoom */
  .p-app .btn, .p-app .nav-item, .p-app .tabs a, .a-app.m3-admin .nav-item { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- printing: the page as paper, with the console stripped off -------- */
@media print {
  @page { size: A4; margin: 14mm; }
  :root { --md-background: #fff; --md-surface: #fff; --md-on-surface: #000; --md-on-surface-variant: #333;
    --md-outline-variant: #bbb; --md-elev-1: none; --md-elev-2: none; }
  :root[data-theme="dark"] { color-scheme: light; }
  body.p-app, body.a-app { background: #fff !important; color: #000 !important; }
  .topbar, .side, .tabbar, .skip, .m3-cls-controls, .events-filters, .toast, .snackbar, .m3-viewer,
  .user-menu, .search-btn, .pagination, .tour-ask, .wa-ask, form.inline, .btn, .no-print { display: none !important; }
  .print-only { display: block !important; }
  .shell, .main { display: block !important; max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .card, .m3-card, .list-card, .table-wrap { border: 1px solid #ddd !important; box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
  table.data thead th { background: #f2f2f2 !important; color: #000 !important; }
  a { color: #000 !important; text-decoration: none !important; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
}

/* The keyboard-shortcuts card (press ?) */
.m3-keys { width: min(420px, 92vw); padding: 0; border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-panel);
  background: var(--md-surface); color: var(--md-on-surface); box-shadow: var(--md-elev-2); }
.m3-keys::backdrop { background: rgba(13, 27, 46, .45); }
.m3-keys-head { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--md-outline-variant); }
.m3-keys-head h2 { margin: 0; font-size: 15px !important; line-height: 22px !important; }
.m3-keys-body { padding: 8px 18px 18px; display: grid; gap: 2px; }
.m3-keys-body > div { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px solid var(--md-outline-variant); }
.m3-keys-body > div:last-child { border-bottom: 0; }
.m3-keys-body span { color: var(--md-on-surface-variant); margin-left: auto; }
.m3-keys kbd { font-family: var(--md-mono); font-size: 11.5px; min-width: 22px; text-align: center; padding: 2px 6px;
  border: 1px solid var(--md-outline-variant); border-bottom-width: 2px; border-radius: 5px; background: var(--md-surface-container-low); }

/* Dark: the pieces lms.css paints a literal white. They are listed rather than guessed, so a
   component that is white on purpose (a button on the navy band, the live chip) keeps its white. */
:root[data-theme="dark"] .skip,
:root[data-theme="dark"] .user-menu .menu,
:root[data-theme="dark"] .chip-btn,
:root[data-theme="dark"] .hero-card,
:root[data-theme="dark"] .list-card,
:root[data-theme="dark"] .hover-card,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .stat-strip,
:root[data-theme="dark"] .facts,
:root[data-theme="dark"] .cta-band,
:root[data-theme="dark"] .action-bar,
:root[data-theme="dark"] .round-btn,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] table.grid td:first-child,
:root[data-theme="dark"] table.grid th:first-child,
:root[data-theme="dark"] .today,
:root[data-theme="dark"] .quiz-bar,
:root[data-theme="dark"] .q-card,
:root[data-theme="dark"] .p-app details,
:root[data-theme="dark"] .m3-admin .main details,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .tabbar,
:root[data-theme="dark"] kbd,
:root[data-theme="dark"] dialog.cmdk,
:root[data-theme="dark"] .toast-region .notice,
:root[data-theme="dark"] .fmt-help code,
:root[data-theme="dark"] .ann-strip,
:root[data-theme="dark"] .ann-signin,
:root[data-theme="dark"] .ai-logo,
:root[data-theme="dark"] .spark-card,
:root[data-theme="dark"] .more-list,
:root[data-theme="dark"] table.cal,
:root[data-theme="dark"] .m-tile,
:root[data-theme="dark"] .sched-card,
:root[data-theme="dark"] .pdf-page { background: var(--md-surface); color: var(--md-on-surface); }
:root[data-theme="dark"] .p-app input, :root[data-theme="dark"] .p-app select, :root[data-theme="dark"] .p-app textarea,
:root[data-theme="dark"] .m3-admin .main input, :root[data-theme="dark"] .m3-admin .main select,
:root[data-theme="dark"] .m3-admin .main textarea { background: var(--md-surface-container-low); color: var(--md-on-surface); }
:root[data-theme="dark"] body, :root[data-theme="dark"] .shell { background: var(--md-background); color: var(--md-on-surface); }
:root[data-theme="dark"] .m3-mat, :root[data-theme="dark"] .m3-ev, :root[data-theme="dark"] .m3-day { background: transparent; }
:root[data-theme="dark"] ::placeholder { color: var(--md-on-surface-variant); opacity: 1; }
:root[data-theme="dark"] { color-scheme: dark; }
/* While the theme is being switched, nothing transitions: a colour caught mid-transition kept the
   old theme's value and left unreadable buttons behind. */
:root[data-switching] *, :root[data-switching] *::before, :root[data-switching] *::after {
  transition: none !important; animation: none !important;
}
/* Anything sitting ON the brand colour takes its paired ink, so the dark theme — where the
   brand is a light blue — never puts white text on it. */
.p-app .nav-item .count, .a-app.m3-admin .nav-item .count { color: var(--md-on-primary); }
:root[data-theme="dark"] .p-app .btn:not(.btn-ghost):not(.btn-text):not(.btn-light):not(.btn-tonal):not(.btn-danger):not(.btn-whatsapp),
:root[data-theme="dark"] .m3-admin .main .btn:not(.btn-ghost):not(.btn-text):not(.btn-light):not(.btn-tonal):not(.btn-danger) { color: var(--md-on-primary); }
.p-app .btn-danger, .m3-admin .main .btn-danger { color: #fff; }   /* white on the red, in both themes */
:root[data-theme="dark"] .p-app .btn-tonal, :root[data-theme="dark"] .p-app .btn-zoom,
:root[data-theme="dark"] .m3-admin .main .btn-tonal { color: var(--md-on-secondary-container); }
:root[data-theme="dark"] .p-app .avatar, :root[data-theme="dark"] .a-app.m3-admin .avatar { color: var(--md-on-surface); }

/* =========================================================================
   22. Programme tiles and Classwork — the two learner screens people said were cluttered
   ========================================================================= */
/* A programme as a tile with a coloured head, so several sit side by side and are told apart at a
   glance. The hue comes from the programme id, so one programme always wears the same colour. */
.prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 16px; margin-bottom: 24px; }
.prog-tile { display: flex; flex-direction: column; background: var(--md-surface); border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-r-card); overflow: hidden; box-shadow: var(--md-elev-1); }
/* A long name makes its coloured band taller than its neighbours', which left "Today" and the
   buttons at different heights across a row. Subgrid gives every tile in a row the same three
   bands. Where a browser has no subgrid the tiles still work — the bands just differ again. */
@supports (grid-template-rows: subgrid) {
  .prog-tile { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
}
/* The head is a LINK, so the theme's link colour wins over anything inherited — every piece of
   text on the coloured band states its own colour, and none of them uses opacity, which would
   leave the real contrast unmeasurable. */
.prog-tile .pt-head { display: block; padding: 16px; min-height: 104px; text-decoration: none !important;
  background: hsl(var(--tile-h) 58% 30%); color: #fff; }
.prog-tile .pt-head .pt-state { display: block; font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; color: #e9eef4; }
/* The whole name, never cut short: a programme is told apart by the words at the END of its title
   ("... Literature, Writing and Publishing"), so clamping the line hid the part that identifies it. */
.prog-tile .pt-head .pt-name { display: block; margin-top: 4px; font-family: var(--md-font-head, inherit); font-size: 17px;
  font-weight: 700; line-height: 1.25; color: #fff; overflow-wrap: anywhere; }
.prog-tile .pt-head .pt-dates { display: block; margin-top: 6px; font-size: 12.5px; color: #e9eef4; }
.pt-head:hover .pt-name { text-decoration: underline; }
.pt-body { padding: 12px 16px; flex: 1 1 auto; }
.pt-today { margin: 0 0 8px; font-size: 13px; display: flex; gap: 6px; align-items: baseline; }
.pt-today .ic { flex: 0 0 auto; }
.pt-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--md-outline-variant); }
.pt-chip { margin-left: auto; font-size: 12px; color: var(--md-on-surface-variant); display: inline-flex; gap: 4px; align-items: center; }

/* Classwork: a heading you can fold, and the materials under it. Nothing else. */
.cw-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.cw-pick select { min-height: 40px; border-radius: var(--md-r-btn); border: 1px solid var(--md-outline); background: var(--md-surface);
  color: var(--md-on-surface); padding: 0 34px 0 12px; font-size: 14px; }
.cw-fold { margin-left: auto; }
.cw-topic { border-bottom: 1px solid var(--md-outline-variant); }
.cw-topic[hidden] { display: none; }
.cw-head { display: flex; gap: 12px; align-items: center; padding: 14px 4px; cursor: pointer; list-style: none; }
.cw-head::-webkit-details-marker { display: none; }
.cw-head:hover { background: var(--md-surface-container-low); }
.cw-head:focus-visible { outline: 2px solid var(--md-primary); outline-offset: -2px; }
.cw-name { font-family: var(--md-font-head, inherit); font-size: 16px; font-weight: 600; color: var(--md-on-surface); min-width: 0; }
.cw-when { display: block; font-family: var(--md-font, inherit); font-size: 12.5px; font-weight: 400; color: var(--md-on-surface-variant); margin-top: 2px; }
.cw-now { font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--md-primary); }
.cw-count { margin-left: auto; font-size: 12.5px; color: var(--md-on-surface-variant); }
.cw-chev { flex: 0 0 auto; color: var(--md-on-surface-variant); transition: transform var(--md-fast) var(--md-ease); }
.cw-topic[open] > .cw-head .cw-chev { transform: rotate(180deg); }
.cw-body { padding: 0 4px 14px; }
.cw-rest { margin-top: 18px; font-size: 13px; color: var(--md-on-surface-variant); display: flex; gap: 6px; align-items: center; }
@media (max-width: 560px) {
  .cw-controls { gap: 8px; }
  .cw-fold { margin-left: 0; }
  .prog-grid { grid-template-columns: 1fr; }
}

/* The uploaded-schedule table: eight text boxes in a row squeeze to nothing if the table is
   allowed to fit the screen, so each column keeps a usable width and the wrapper scrolls instead. */
.sched-import { min-width: 1100px; }
.sched-import th, .sched-import td { vertical-align: top; }
.sched-import input[type="text"] { width: 100%; min-width: 130px; }
.sched-import td:nth-child(2) input { min-width: 220px; }          /* Topic */
.sched-import td:nth-child(6) input { min-width: 200px; }          /* Zoom link */
.sched-import .was-note { display: block; margin-top: 3px; font-size: 11.5px; overflow-wrap: anywhere; }
.sched-import td.was input { border-color: var(--md-primary); }
.sched-import tr.dim { opacity: .62; }

/* "Links for every day" on the Daily schedule: long addresses wrap instead of pushing the card
   sideways, and a day with nothing to join says so in the warning ink rather than a quiet dash. */
.break { overflow-wrap: anywhere; word-break: break-word; }
.warn-text { color: var(--warn-ink); font-weight: 600; }

/* The coupon box on the registration page: the answer under it, and the applied banner. */
.coupon-form { margin: 0 0 16px; }
.coupon-form .row.tight { gap: 8px; align-items: stretch; }
.coupon-form input[name="coupon_code"] { flex: 1 1 auto; min-width: 0; text-transform: uppercase; font-family: var(--mono, ui-monospace, monospace); letter-spacing: .5px; }
.coupon-form .coupon-said:empty { display: none; }
.coupon-form .coupon-no { color: var(--err-ink); }
.p-app .notice.coupon-on .btn-link { margin-left: 6px; }

/* =========================================================================
   21. Fixes from watching the live site
   ========================================================================= */
/* A text or quiet button was inheriting the filled button's hover, so it turned solid blue
   with blue text on it — unreadable, and it looked like the button had broken. */
.p-app .btn-text:hover, .p-app .btn-text:focus-visible,
.m3-admin .main .btn-text:hover, .m3-admin .main .btn-text:focus-visible {
  background: var(--md-surface-container-low); border-color: transparent; color: var(--md-primary); box-shadow: none;
}
.p-app .btn-whatsapp:hover, .m3-admin .main .btn-whatsapp:hover { background: var(--md-surface-container-low); color: var(--md-on-surface); }
.p-app .btn-zoom:hover, .p-app .btn-tonal:hover, .p-app .btn-light:hover {
  background: var(--md-surface-container); border-color: var(--md-surface-container); color: var(--md-on-secondary-container); box-shadow: none;
}

/* The menu stays where it is while the page scrolls: it was sliding away and leaving an
   empty column beside long pages.
   The bar has to stay with it. The menu alone was sticky, so scrolling took the bar away and
   left the menu floating below a band of empty background — it read as a panel that had come
   loose. Bar and menu now hold together as one piece of chrome, and the two bars that stick
   INSIDE a page (the quiz timer, the Classroom controls) stop below it instead of sliding under. */
@media (min-width: 821px) {
  .p-app .topbar, .a-app.m3-admin .topbar { position: sticky; top: 0; }
  .p-app .quiz-bar, .a-app.m3-admin .quiz-bar { top: var(--top, 56px); }
  .p-app .side, .a-app.m3-admin .side {
    position: sticky; top: var(--top, 56px); align-self: start;
    max-height: calc(100vh - var(--top, 56px)); overflow-y: auto; overscroll-behavior: contain;
  }
  .p-app .side::-webkit-scrollbar, .a-app.m3-admin .side::-webkit-scrollbar { width: 6px; }
  .p-app .side::-webkit-scrollbar-thumb, .a-app.m3-admin .side::-webkit-scrollbar-thumb { background: var(--md-outline-variant); border-radius: 3px; }
}

/* The day strip was too faint to read as progress: a solid rail, with the days done on top. */
.m3-journey-track { gap: 2px; }
.m3-journey-track > span { background: #dfe6ef; }
:root[data-theme="dark"] .m3-journey-track > span { background: var(--md-surface-container-high); }

/* Every upcoming card carried the same long programme name; it now only appears when the
   learner has more than one, and never wraps past two lines. */
.p-app .sched-card .who { display: block; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.p-app .m-tile .n { font-size: 22px; }

/* A long web address or server path used to push a page sideways on a phone (System check,
   Where your data is kept). Long unbroken strings now wrap instead of widening the page. */
.p-app .mono, .m3-admin .main .mono, .p-app code, .m3-admin .main code,
.m3-admin .main dd, .m3-admin .main .facts dd, .p-app .facts dd { overflow-wrap: anywhere; }
.m3-admin .main a, .p-app .main a { overflow-wrap: break-word; }
@media (max-width: 600px) {
  .m3-admin .main .facts, .p-app .facts { grid-template-columns: minmax(0, 1fr); }
  .m3-admin .main .facts > div, .p-app .facts > div { min-width: 0; }
}

/* Back to top — out of the way, and never over the phone's bottom bar */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--md-r-full); border: 1px solid var(--md-outline-variant); background: var(--md-surface);
  color: var(--md-on-surface-variant); box-shadow: var(--md-elev-1); cursor: pointer; }
.to-top:hover { background: var(--md-surface-container-low); color: var(--md-on-surface); }
.to-top .ic { width: 20px; height: 20px; }
@media (max-width: 820px) { .p-app .to-top { bottom: 76px; } }
@media print { .to-top { display: none !important; } }

/* An anchor lands below the bar that is stuck to the top, not behind it. */
:target, [id] { scroll-margin-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* A link that opens a new tab shows it (the words are there for screen readers). */
.p-app .main a[target="_blank"]:not(.btn):not(.icon-btn):not(.m3-mat)::after,
.m3-admin .main a[target="_blank"]:not(.btn):not(.icon-btn)::after {
  content: '↗'; font-size: .85em; margin-left: 2px; color: var(--md-on-surface-variant); text-decoration: none;
}

/* How much room is left in a long box */
.char-left { margin-top: 4px; font-size: 12px; color: var(--md-on-surface-variant); font-variant-numeric: tabular-nums; }
.char-left.is-low { color: var(--md-on-error-container); font-weight: 600; }

/* The logo is drawn at its OWN shape. A fixed aspect-ratio was reserving space while the page
   loaded, but it was a guess (190:50) and the real file is 938x313 — so the wordmark was being
   stretched about 27% wider than it should be, and in dark mode the white plate behind it was
   wider than the letters. object-fit keeps any future logo from being squashed either way. */
.brand-logo { object-fit: contain; flex: 0 0 auto; }

/* The measurement banner — only ever shown when staff have set a tag and the visitor has not answered */
.consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 70; display: flex; flex-wrap: wrap;
  align-items: center; gap: 12px 16px; padding: 14px 16px; border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-r-panel); background: var(--md-surface); color: var(--md-on-surface); box-shadow: var(--md-elev-2); }
.consent-txt { flex: 1 1 340px; display: grid; gap: 2px; font-size: 13.5px; line-height: 20px; }
.consent-txt span { color: var(--md-on-surface-variant); }
.consent-btns { display: flex; gap: 8px; margin-left: auto; }
@media (max-width: 820px) { .p-app .consent { bottom: 80px; } .consent-btns { width: 100%; } .consent-btns form { flex: 1; } .consent-btns .btn { width: 100%; justify-content: center; } }
@media print { .consent { display: none !important; } }

/* Testimonials waiting for staff to pick them */
.review-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; padding: 12px 0; border-bottom: 1px solid var(--md-outline-variant); }
.review-row:last-child { border-bottom: 0; }
.review-row blockquote { flex: 1 1 320px; margin: 0; padding-left: 12px; border-left: 3px solid var(--md-primary); }
.review-row .row { margin-left: auto; }

/* What teachers said, on a public programme page */
.p-app .reviews .sec-head { align-items: center; }
.rating-line { font-size: 14px; color: var(--md-on-surface); }
.rating-line .stars { color: var(--star-ink); margin-right: 2px; }
.review { margin: 0 0 14px; padding: 0 0 14px 14px; border-left: 3px solid var(--md-support-strong); border-bottom: 1px solid var(--md-outline-variant); }
.review:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.review p { margin: 0 0 6px; font-size: 15px; line-height: 23px; }
.review footer { font-size: 13px; color: var(--md-on-surface-variant); }

/* "Tell me when a new programme opens" */
.p-app .newsletter { margin-top: 20px; }
.newsletter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 12px; }
.newsletter-form .field { flex: 1 1 220px; margin: 0; }
.newsletter-form .btn { flex: 0 0 auto; }
.foot-social { display: inline-flex; gap: 10px; align-items: center; }
.foot-social a { display: inline-flex; }
@media (max-width: 600px) { .newsletter-form .btn { width: 100%; justify-content: center; } }

/* How far down a long read you are (Terms, Privacy, the guide, About) */
.read-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 65; background: transparent; pointer-events: none; }
.read-bar span { display: block; height: 100%; width: 0; background: var(--md-primary); transition: width 80ms linear; }
:root[data-theme="dark"] .read-bar span { background: var(--md-brand); }
@media print { .read-bar { display: none !important; } }

/* A row of grey bars while a long list is still coming */
.skeleton { display: grid; gap: 8px; }
.skeleton span { display: block; height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, var(--md-surface-container-low), var(--md-surface-container), var(--md-surface-container-low));
  background-size: 200% 100%; animation: sk 1.2s ease-in-out infinite; }
.skeleton span:nth-child(2) { width: 82%; }
.skeleton span:nth-child(3) { width: 64%; }
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton span { animation: none; } }

/* A page swap that does not blink, where the browser supports it */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

/* The staff console's chrome (top bar, account menu, side menu) reads the same tokens as its
   content. Without this the menu kept the light-theme ink in dark mode — unreadable. */
body.a-app.m3-admin {
  --surface: var(--md-surface);
  --bg: var(--md-background);
  --ink: var(--md-on-surface);
  --ink-2: var(--md-on-surface-variant);
  --ink-3: var(--md-on-surface-variant);
  --line: var(--md-outline-variant);
  --field: var(--md-outline);
  --quiet: var(--md-surface-container-low);
  --blue: var(--md-primary);
  --blue-deep: var(--md-primary-hover);
  --blue-tint: var(--md-primary-container);
  --shadow: none;
  --shadow-hover: var(--md-elev-1);
  --shadow-menu: var(--md-elev-2);
  --err: #c53030; --err-tint: var(--md-error-container); --err-ink: var(--md-on-error-container);
  --warn-ink: var(--md-on-warning-container); --warn-tint: var(--md-warning-container); --warn-rule: #b7791f;
  --verified: #2f855a; --verified-ink: #276749; --verified-tint: #e7f2ea;
  --ok: var(--md-primary); --info: var(--md-primary); --brand: var(--md-primary);
}
:root[data-theme="dark"] body.a-app.m3-admin {
  --star-ink: #f0b45e;
  --err: #f2b8b5; --err-ink: var(--md-on-error-container); --warn-ink: #f0cf8a; --warn-rule: #d9a441;
  --verified: #7bc39a; --verified-ink: #a7dcbe; --verified-tint: #16301f;
}
:root[data-theme="dark"] .a-app.m3-admin .user-menu .menu,
:root[data-theme="dark"] .a-app.m3-admin .menu a,
:root[data-theme="dark"] .a-app.m3-admin .menu button { background: var(--md-surface); color: var(--md-on-surface); }
:root[data-theme="dark"] .a-app.m3-admin .menu-head small,
:root[data-theme="dark"] .a-app.m3-admin .menu-text-size span { color: var(--md-on-surface-variant); }

/* =========================================================================
   23. The pieces the website is recognised by
   ------------------------------------------------------------------------
   scrollwell.com says "Scrollwell" through four small things, not through a
   different layout: a short blue rule under the heading, a pill with a dot in
   front of a label, a number in blue above a small tracked caption, and white
   panels held by a hairline instead of a shadow. Bringing those four across is
   what makes the portal and the site read as one product.
   ========================================================================= */

/* A short blue rule under the page title — the site's signature under every heading. */
.p-app .page-head h1::after, .p-app .greet h1::after, .p-app .m3-head h1::after,
.m3-admin .main .page-head h1::after {
  content: ''; display: block; width: 56px; height: 4px; border-radius: 2px;
  background: var(--md-brand); margin: 12px 0 0;
}

/* A pill with a dot in front, as the site puts before "Google Certified Educator".
   Only where the chip has no icon of its own — a chip that already carries a mark
   (a certificate, a live dot) keeps it and gets no second one. */
.p-app .chip:not(:has(> svg)):not(.chip-live)::before,
.p-app .eyebrow:not(:has(> svg))::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: currentColor; opacity: .55;
}
.p-app .eyebrow { color: var(--md-on-primary-container); background: var(--md-primary-container);
  text-transform: uppercase; letter-spacing: .8px; font-size: 11px; font-weight: 700; border-radius: var(--md-r-full); }

/* A number that matters is blue, over a small tracked caption — the site's stat tiles. */
.p-app .m-tile .n, .p-app .stat .n, .p-app .stat-strip .n, .p-app .tile .n, .p-app .kpis .n {
  color: var(--md-primary); font-weight: 800; letter-spacing: -.4px;
}
/* The site's caption is uppercase and tracked, which works because its labels are two words
   ("EDUCATORS IMPACTED"). Several tiles here carry a whole sentence, and a shouted sentence is
   harder to read, not more designed — so only the short captions are set that way. */
.p-app .stat .l, .p-app .stat-strip .l, .p-app .kpis .l {
  text-transform: uppercase; letter-spacing: .8px; font-size: 11px; font-weight: 600;
  color: var(--md-on-surface-variant);
}
.p-app .m-tile .l, .p-app .tile .l { font-size: 12.5px; font-weight: 500; color: var(--md-on-surface-variant); }

/* =========================================================================
   24. The founder, on the sign-in page
   ------------------------------------------------------------------------
   One card, not four loose pieces: the quote with the site's blue bar, the
   face and the name inside it, and the numbers as a single row underneath.
   The face is initials with the photo laid over them, so an address that dies
   later shows the initials instead of a broken picture. Every word and figure
   comes from LMS settings, so staff change them without touching a file.
   ========================================================================= */
.founder { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.p-app .founder-card {
  margin: 0; padding: 18px 20px; background: var(--md-surface);
  border: 1px solid var(--md-outline-variant); border-left: 4px solid var(--md-brand);
  border-radius: var(--md-r-card);
}
.p-app .founder-quote {
  margin: 0; padding: 0; border: 0; background: none;
  color: var(--md-on-surface); font-size: 15px; line-height: 1.6; font-weight: 500;
}
.founder-who { display: flex; align-items: center; gap: 12px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--md-outline-variant); }
.founder-who > span { display: block; min-width: 0; }
.founder-face { position: relative; width: 46px; height: 46px; flex: none; display: block; }
.p-app .founder-face .ph {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--md-display); font-weight: 800; font-size: 15px;
  background: var(--md-primary-container); color: var(--md-on-primary-container);
}
.p-app .founder-face img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: top center; }
.p-app .founder-who b { display: block; color: var(--md-on-surface); font-family: var(--md-display); font-size: 15px; font-weight: 700; line-height: 1.3; }
.p-app .founder-who > span > span { display: block; font-size: 12.5px; color: var(--md-on-surface-variant); }
/* The numbers as one quiet row, divided rather than boxed — four separate tiles made the
   bottom of the page heavier than the sign-in form it sits beside. */
.founder-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none;
  background: var(--md-surface); border: 1px solid var(--md-outline-variant); border-radius: var(--md-r-card);
}
.p-app .auth-hero .founder-stats li, .p-app .founder-stats li {
  display: block; gap: 0; align-items: stretch; padding: 12px 10px; text-align: center;
  border-left: 1px solid var(--md-outline-variant);
}
.p-app .auth-hero .founder-stats li:first-child, .p-app .founder-stats li:first-child { border-left: 0; }
.p-app .founder-stats b {
  display: block; font-family: var(--md-display); font-size: 18px; font-weight: 800;
  letter-spacing: -.3px; color: var(--md-primary); font-variant-numeric: tabular-nums;
}
.p-app .founder-stats span {
  display: block; margin-top: 1px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .6px; color: var(--md-on-surface-variant); line-height: 1.3;
}
@media (max-width: 520px) { .founder-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-app .founder-stats li:nth-child(3) { border-left: 0; }
  .p-app .founder-stats li:nth-child(n+3) { border-top: 1px solid var(--md-outline-variant); } }