/*
 * whynotfuture theme: Bootstrap 5.3 + brand tokens. Light and dark ([data-bs-theme="dark"]).
 * Shared by the public site, the instructor studio and the admin console.
 *
 * The theme is white, black #000411, grays (#F9F9F9 page, #AEB7B3, #5F6A66) and two blues: #005A9C (lagoon,
 * active states and accents) and #00416A (navy, the deeper one). Every other colour here is a tint of those.
 * The old brand names stay as aliases: teal = blue, sage = navy (success), sun and sky = light blue tints
 * (warnings, info), peach = light gray. Red (--danger) is kept for errors and destructive actions only.
 * The *-ink shades are darker variants of the palette, used where coloured text must stay readable.
 */

:root,
[data-bs-theme="light"] {
  --white: #ffffff;
  --snow: #f9f9f9;
  --night: #000411;
  --night-rgb: 0, 4, 17;
  --stone: #aeb7b3;
  --sun: #b3cde1;
  --sun-rgb: 179, 205, 225;
  --teal: #005a9c;
  --teal-rgb: 0, 90, 156;
  --sky: #dbe7f1;
  --sky-rgb: 219, 231, 241;
  --lagoon: #005a9c;
  --lagoon-rgb: 0, 90, 156;
  --navy: #00416a;
  --navy-rgb: 0, 65, 106;
  --chart-1: #005a9c;
  /* Students-by-training doughnut: categorical slots 1-4 (validated for CVD and normal vision), Other neutral. */
  --share-1: #2a78d6; --share-2: #eb6834; --share-3: #1baf7a; --share-4: #eda100; --share-other: #9aa3a0;
  --chart-1-hover: #004a80;
  --chart-2: #b3cde1;
  --peach: #e7eaec;
  --peach-rgb: 231, 234, 236;
  --sage: #00416a;
  --sage-rgb: 0, 65, 106;

  --teal-ink: #005a9c;
  --sage-ink: #00416a;
  --sun-ink: #00416a;
  --peach-ink: #5f6a66;
  --danger: #d1495b;
  --bordeaux: #7b1e3a; /* unread notification counters */
  --danger-rgb: 209, 73, 91;

  --brand: var(--night);
  --brand-rgb: var(--night-rgb);
  --brand-600: #2b303b;
  --brand-ink: var(--night);
  --brand-soft: #eceeed;
  --accent: var(--stone);
  --ink: var(--night);
  --muted: #5f6a66;
  --surface: var(--white);
  --surface-2: var(--snow);
  --surface-3: #f1f3f2;
  --line: #e7eae9;
  --line-strong: var(--stone);
  --shadow-sm: 0 1px 2px rgba(var(--night-rgb), .04);
  --shadow: 0 0.375rem 1.25rem -8px rgba(var(--night-rgb), .10);
  --shadow-lg: 0 1.5rem 3rem -16px rgba(var(--night-rgb), .14);
  --radius: 1rem;
  --radius-sm: 0.75rem;
  --sidebar-w: 16.5rem;
  --star: var(--lagoon);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dur: .22s;

  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-success: var(--sage);
  --bs-success-rgb: var(--sage-rgb);
  --bs-warning: var(--sun);
  --bs-warning-rgb: var(--sun-rgb);
  --bs-info: var(--sky);
  --bs-info-rgb: var(--sky-rgb);
  --bs-danger: var(--danger);
  --bs-danger-rgb: var(--danger-rgb);
  --bs-link-color: var(--night);
  --bs-link-color-rgb: var(--night-rgb);
  --bs-link-hover-color: var(--muted);
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-bg: var(--surface-2);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--surface-3);
}

[data-bs-theme="dark"] {
  --chart-1: #4d9bd6;
  --share-1: #3987e5; --share-2: #d95926; --share-3: #199e70; --share-4: #c98500; --share-other: #6e6f74;
  --chart-1-hover: #7ab5e2;
  --chart-2: #2c4a63;
  --teal-ink: #8fb8d8;
  --sage-ink: #8fb8d8;
  --sun-ink: #b3cde1;
  --peach-ink: var(--stone);
  --star: #8fb8d8;
  --danger: #f07a88;
  --bordeaux: #a3304f;
  --danger-rgb: 240, 122, 136;

  --brand: var(--snow);
  --brand-rgb: 249, 249, 249;
  --brand-600: #ffffff;
  --brand-ink: var(--snow);
  --brand-soft: rgba(255, 255, 255, .08);
  /* Neutral greys (no green cast): cards on a near-black page. */
  --ink: #ececee;
  --muted: #a8a9ae;
  --surface: #1f2022;
  --surface-2: #151617;
  --surface-3: #2a2b2e;
  --line: #333438;
  --line-strong: #48494e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
  --shadow: 0 0.375rem 1.25rem -8px rgba(0, 0, 0, .35);
  --shadow-lg: 0 1.5rem 3rem -16px rgba(0, 0, 0, .45);

  --bs-primary: var(--brand);
  --bs-primary-rgb: var(--brand-rgb);
  --bs-link-color: var(--brand);
  --bs-link-color-rgb: var(--brand-rgb);
  --bs-link-hover-color: var(--brand-600);
  --bs-body-bg: var(--surface-2);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-secondary-color: var(--muted);
  --bs-tertiary-bg: var(--surface-3);
}

html { scroll-behavior: smooth; font-size: 80%; }
body {
  background: var(--surface-2);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; animation: page-in .45s var(--ease) backwards; }
.page-fill main { display: flex; flex-direction: column; }
.page-fill .fill-panel { flex: 1 0 auto; background: var(--surface); }
.page-fill .site-footer { margin-top: 0; }

/* The dashboard background (learner, instructor and account pages): Meet-style soft blue. */
.learner-main {
  position: relative;
  isolation: isolate;
  background: #f0f4f9;
}
[data-bs-theme="dark"] .learner-main { background: var(--surface-2); }
.learner-main .fill-panel, .learner-main .studio-band { background: transparent; }
.continue-band .card { border: 0; box-shadow: 0 1.25rem 2.5rem -1.25rem rgba(var(--lagoon-rgb), .12); }
/* ---------- My learning dashboard ---------- */
.min-w-0 { min-width: 0; }
/* My learning header: who and how it's going on the left, four linked stat tiles on the right. */
/* A solid navy card with everything on it in white; chips and stat tiles in a deeper solid navy. No tints or glows. */
.card.learn-hero { --hero-deep: #002c48; --bs-card-bg: var(--navy); --bs-card-color: #fff; position: relative; overflow: hidden; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 1.75rem; border: 0; background: var(--navy); color: #fff; }
.learn-hero .eyebrow { color: #fff; }
.learn-hero-who { display: flex; align-items: center; gap: 1.1rem; min-width: 0; }
.learn-hero-who > .avatar { box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px #fff; }
.learn-hero-title { font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em; margin: .15rem 0 .55rem; color: #fff; }
.learn-hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.hero-chip { display: inline-flex; align-items: center; gap: .35rem; margin: 0; padding: .28rem .7rem; border-radius: 62.4375rem; background: var(--hero-deep); color: #fff; font-size: .76rem; font-weight: 600; line-height: 1.4; }
.hero-chip i { font-size: .95rem; }
.hero-chip-clear { display: inline-grid; place-items: center; margin-left: .1rem; padding: 0; border: 0; background: none; color: #fff; }
.learn-hero-sub { margin: .6rem 0 0; color: #fff; font-size: .88rem; }
.learn-stats { display: grid; grid-template-columns: repeat(4, minmax(8.75rem, 1fr)); gap: .65rem; }
.learn-stat { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 0; border-radius: .85rem; background: var(--hero-deep); color: #fff; transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.learn-stat:hover { background: #001d30; color: #fff; transform: translateY(-1px); }
.learn-stat-icon { width: 2.5rem; height: 2.5rem; flex: none; border-radius: .75rem; display: grid; place-items: center; font-size: 1.25rem; background: #fff; color: var(--navy); }
.learn-stat-value { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.learn-stat-value small { margin-left: .1rem; font-size: .8rem; font-weight: 700; }
.learn-stat-label { display: block; margin-top: .1rem; font-size: .74rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 1199.98px) { .learn-stats { width: 100%; } }
@media (max-width: 767.98px) { .learn-hero { padding: 1.25rem; } .learn-stats { grid-template-columns: repeat(2, 1fr); } .learn-hero-title { font-size: 1.3rem; } }
.dash-card, .side-widget { border: 1px solid var(--line); box-shadow: none; }
.dash-icon { width: 2.75rem; height: 2.75rem; flex: none; border-radius: .875rem; display: grid; place-items: center; font-size: 1.3rem; color: #fff; }
.dash-icon-fire { background: linear-gradient(135deg, var(--lagoon), var(--navy)); }

.streak-count { font-size: 1.9rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.streak-count span { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; }
.week-day { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.week-day .dot { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: #fff; font-size: .9rem; }
.week-day .label { font-size: .7rem; font-weight: 700; color: var(--muted); }
.week-day.is-active .dot { background: linear-gradient(135deg, var(--lagoon), var(--navy)); box-shadow: 0 .25rem .6rem -.2rem rgba(var(--lagoon-rgb), .6); }
.week-day.is-today .dot { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.week-day.is-today .label { color: var(--lagoon); }
.week-day.is-future .dot { background: transparent; border: 2px dashed var(--line); }

.learning-aside { display: flex; flex-direction: column; gap: 1.5rem; }

/* Instructor dashboard: flat and quiet, numbers first */
.studio-band { background: var(--surface-2); }
.studio-band .card, .studio-dash .card { border: 1px solid var(--line); box-shadow: none; }
.studio-dash .table-card .table > tbody > tr:last-child > * { border-bottom: 0; }
.dash-icon-plain { color: var(--ink); background: var(--surface-3); font-size: 1.05rem; width: 2.25rem; height: 2.25rem; border-radius: .65rem; }
.verified-mark { color: var(--lagoon); font-size: 1.15rem; }
.week-strip.is-teach .week-day .dot { font-size: .72rem; font-weight: 800; color: var(--muted); }
.week-strip.is-teach .week-day.is-active .dot { background: var(--lagoon); color: #fff; box-shadow: none; }
.trend { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; }
.trend.is-up { color: var(--sage-ink); }
.trend.is-down { color: var(--danger); }
[data-bs-theme="dark"] .trend.is-down { color: var(--danger); }
.stat-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; }
.stat-value { font-size: clamp(1.6rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; overflow-wrap: anywhere; }
.review-snippet, .row-press { position: relative; }
/* Students by training: a pie, and a legend that is also the table (the total is in the card header). */
.card-body:has(> .share-chart) { container-type: inline-size; }
.share-chart { display: flex; align-items: center; gap: 1.25rem; }
.share-ring { position: relative; flex: none; width: 9.5rem; height: 9.5rem; }
.share-legend { flex: 1; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .15rem; }
.share-item { position: relative; display: flex; align-items: center; gap: .55rem; padding: .35rem .45rem; border-radius: .5rem; font-size: .82rem; transition: background-color var(--dur) var(--ease); }
.share-item:has(.stretched-link):hover, .share-item.is-active { background: var(--surface-2); }
.share-swatch { flex: none; width: .65rem; height: .65rem; border-radius: .2rem; }
.share-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--ink); }
.share-value { font-weight: 700; font-variant-numeric: tabular-nums; }
.share-pct { width: 2.6rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
/* In a narrow card the ring sits above the legend, so training names get the full width. */
@container (max-width: 30rem) { .share-chart { flex-direction: column; align-items: stretch; gap: 1rem; } .share-ring { align-self: center; } }
.card.card-press { transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.card.card-press:hover { border-color: rgba(var(--lagoon-rgb), .45); transform: translateY(-2px); }
.card-press:has(.stretched-link:focus-visible) { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.glance-list { display: flex; flex-direction: column; }
.glance-item { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-top: 1px solid var(--line); }
.glance-item:first-child { border-top: 0; padding-top: 0; }
.glance-item > .stretched-link { position: absolute; inset: 0; }
.glance-item dt { font-size: .85rem; font-weight: 500; color: var(--muted); }
.glance-item dd { margin: 0; font-size: .875rem; font-weight: 700; text-align: right; }
.glance-item dd.is-alert::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .45rem; border-radius: 50%; background: var(--lagoon); vertical-align: middle; }
.todo-list { display: flex; flex-direction: column; gap: .25rem; }
.todo-item { position: relative; display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; margin: 0 -.5rem; border-radius: .65rem; transition: background-color var(--dur) var(--ease); }
.todo-item:has(.stretched-link):hover { background: var(--surface-2); }
.todo-icon { width: 2.25rem; height: 2.25rem; flex: none; display: grid; place-items: center; border-radius: .65rem; background: var(--surface-3); color: var(--ink); }
.review-snippet { padding: .75rem 0; border-top: 1px solid var(--line); }
.review-snippet:first-of-type { border-top: 0; padding-top: 0; }
@media (min-width: 992px) { .learning-aside { position: sticky; top: 5.5rem; } }

.level-progress { height: .45rem; }
.level-progress .progress-bar { background: var(--lagoon); }
.medal-icon { font-size: 2.6rem; line-height: 1; color: var(--line-strong); }
.medal-bronze { color: var(--navy) !important; }
.medal-silver { color: var(--stone) !important; }
.medal-gold { color: var(--lagoon) !important; }
.medal-tiers { display: flex; flex-wrap: wrap; gap: .35rem .9rem; color: var(--muted); }
.medal-tiers [class*="fa-"] { margin-right: .3rem; }
.medal-tiers .is-earned { color: var(--ink); font-weight: 600; }

.upcoming-list { max-height: 26rem; overflow-y: auto; margin-right: -.5rem; padding-right: .5rem; }
.upcoming-item { position: relative; display: flex; align-items: flex-start; gap: .85rem; padding: .75rem 0; border-top: 1px solid var(--line); }
.upcoming-item:first-child { border-top: 0; padding-top: 0; }
.due-date { width: 2.75rem; flex: none; border: 1px solid var(--line); border-radius: .625rem; padding: .3rem 0; display: flex; flex-direction: column; align-items: center; line-height: 1; color: var(--muted); }
.due-date .month { font-size: .6rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.due-date .day { font-size: 1.05rem; font-weight: 800; margin-top: .15rem; color: var(--ink); }
.due-date > i { font-size: 1.1rem; padding: .2rem 0; }
/* Today's sessions: start time on top, end time below, in the date tile. */
.session-time { width: 3.4rem; padding: .45rem 0; border: 0; background: var(--lagoon); color: rgba(255, 255, 255, .8); box-shadow: 0 .25rem .75rem rgba(var(--lagoon-rgb), .25); }
.session-time .day { font-size: .9rem; margin-top: 0; color: #fff; }
.session-time .month { margin-top: .2rem; letter-spacing: 0; }
/* Over or cancelled: the same blue, faded, so the sessions still to come stand out. */
.session-time:is(.is-over, .is-cancelled) { background: rgba(var(--lagoon-rgb), .14); color: var(--lagoon); box-shadow: none; }
.session-time:is(.is-over, .is-cancelled) .day { color: var(--lagoon); }
/* Assignments page: one card per due-date group. */
.work-when { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.work-when.is-overdue { color: var(--danger); }
.work-when.is-today { color: var(--lagoon); }
.session-state { color: var(--muted); }
.session-state.is-live { color: var(--bordeaux); }
.session-state.is-soon { color: var(--lagoon); }
.due-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; margin-right: .35rem; vertical-align: .08em; }
.due-text-overdue { color: var(--danger); }
.due-text-soon { color: var(--lagoon); }
.due-text-later { color: var(--lagoon); }
.due-text-open { color: var(--muted); }
[data-bs-theme="dark"] .due-text-soon { color: #8fb8d8; }
[data-bs-theme="dark"] .due-text-later { color: var(--stone); }

@keyframes page-in { from { opacity: 0; transform: translateY(0.375rem); } to { opacity: 1; transform: none; } }
h1, h2, h3, h4, h5, .display-5, .display-6 { letter-spacing: -.02em; font-weight: 700; }
.text-muted, .text-body-secondary { color: var(--muted) !important; }
a { text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
.btn:hover, .nav-link:hover, .dropdown-item:hover, .card-link:hover, .list-group-item:hover, .stretched-link:hover { text-decoration: none; }
/* Navigation (top bar, side menus) never underlines, whether hovered, focused or pressed. */
:is(.site-nav, .side-nav, .sidebar, .topbar) a:is(:hover, :focus, :active) { text-decoration: none; }
/* Clickable cards and rows: the card reacts to the pointer, never the text (no recolouring, no underline). */
:is(.card, .notif, .thread-row, .todo-item, .upcoming-item, .review-snippet, .glance-item, .course-row, .les) a:not(.btn):hover,
.stretched-link:hover, .stretched-link:focus { color: inherit; text-decoration: none; }
.card .title.stretched-link, .card a.title, .course-row-title a { color: var(--ink); }
.card:has(> .stretched-link, .card-body .stretched-link):not(.course-card):hover { border-color: rgba(var(--lagoon-rgb), .45); box-shadow: var(--shadow); }
:is(.todo-item, .upcoming-item, .review-snippet):has(.stretched-link) { border-radius: .75rem; transition: background-color var(--dur) var(--ease); }
:is(.todo-item, .upcoming-item, .review-snippet):has(.stretched-link):hover { background: var(--surface-2); }
::selection { background: rgba(var(--sky-rgb), .45); color: var(--night); }
:focus-visible { outline: 2px solid rgba(var(--brand-rgb), .55); outline-offset: 2px; }

.btn, .form-control, .form-select, .nav-link, .dropdown-item, .chip, .icon-btn, .page-link, .list-group-item {
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--radius-sm); padding: .6rem 1.1rem; }
.btn:active { transform: scale(.98); }
.btn-sm { padding: .35rem .75rem; border-radius: 0.625rem; }
.btn-lg { padding: .8rem 1.5rem; border-radius: 0.875rem; }
.btn-primary {
  --bs-btn-color: var(--white); --bs-btn-hover-color: var(--white); --bs-btn-active-color: var(--white);
  --bs-btn-bg: var(--night); --bs-btn-border-color: var(--night);
  --bs-btn-hover-bg: var(--teal); --bs-btn-hover-border-color: var(--teal);
  --bs-btn-active-bg: var(--lagoon); --bs-btn-active-border-color: var(--lagoon);
  --bs-btn-disabled-bg: var(--night); --bs-btn-disabled-border-color: var(--night);
}
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-color: var(--night); --bs-btn-hover-color: var(--night); --bs-btn-active-color: var(--night);
  --bs-btn-bg: var(--snow); --bs-btn-border-color: var(--snow);
  --bs-btn-hover-bg: var(--sky); --bs-btn-hover-border-color: var(--sky);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--lagoon); --bs-btn-active-border-color: var(--lagoon);
  --bs-btn-disabled-bg: var(--snow); --bs-btn-disabled-border-color: var(--snow);
}
.btn-outline-primary {
  --bs-btn-color: var(--ink); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-border-color: var(--ink);
  --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--lagoon); --bs-btn-active-border-color: var(--lagoon);
}
.btn-soft { background: var(--brand-soft); color: var(--brand-ink); border: 0; }
.btn-soft:hover { background: rgba(var(--brand-rgb), .18); color: var(--brand-ink); }
.btn-ghost { background: transparent; border: 0; color: var(--muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--ink); }
:is(.btn-soft, .btn-ghost, .btn-light, .btn-secondary, .btn-outline-secondary, .icon-btn):is(:active, .active),
.btn-check:checked + .btn { background: var(--lagoon) !important; border-color: var(--lagoon) !important; color: #fff !important; }

/* ---------- Forms ---------- */
.form-control, .form-select { border-radius: var(--radius-sm); padding: .65rem .9rem; border-color: var(--line); background-color: var(--surface); }
.form-control:hover, .form-select:hover { border-color: var(--line-strong); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), .14); }
.form-control::placeholder { color: var(--stone); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.form-check-input:focus { box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), .14); border-color: var(--brand); }
.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }
.form-text { color: var(--muted); }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.input-icon > .form-control { padding-left: 2.5rem; }

/* ---------- Surfaces ---------- */
.card { border: 1px solid rgba(var(--night-rgb), .06); border-radius: var(--radius); background: var(--surface); box-shadow: none; }
[data-bs-theme="dark"] .card { border-color: rgba(255, 255, 255, .06); }
.card-header, .card-footer { background: transparent; border-color: var(--line); }
.card-header { padding: 1rem 1.25rem; font-weight: 600; }
.card-body { padding: 1.25rem; }
.surface { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--surface-2); margin-bottom: 0; }
.table > thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; border-bottom-width: 1px; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .85rem 1rem; border-color: var(--line); vertical-align: middle; }
.table-card { overflow-x: auto; }
.dropdown-menu { border-radius: 0.875rem; border-color: var(--line); box-shadow: var(--shadow-lg); padding: .4rem; background: var(--surface); }
.dropdown-menu.show { animation: pop-in .18s var(--ease); }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
.dropdown-item { border-radius: 0.5rem; padding: .5rem .75rem; }
.dropdown-item:active, .dropdown-item.active { background: var(--lagoon); color: #fff; }
.modal-content { border-radius: var(--radius); border-color: var(--line); background: var(--surface); box-shadow: var(--shadow-lg); }
/* window.confirmDialog (app.js) */
.confirm-modal .modal-dialog { max-width: 26rem; }
.confirm-modal .modal-body { position: relative; padding: 2rem 1.75rem 1.5rem; text-align: center; }
.confirm-modal .btn-close { position: absolute; top: 1rem; right: 1rem; font-size: .75rem; }
.confirm-icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin: 0 auto 1rem; border-radius: 50%; font-size: 1.35rem; }
.confirm-icon.is-danger { background: rgba(var(--danger-rgb), .12); color: var(--danger); }
.confirm-icon.is-primary { background: rgba(var(--lagoon-rgb), .16); color: var(--teal-ink); }
.confirm-title { margin: 0 0 .5rem; font-size: 1.15rem; font-weight: 700; color: var(--ink); text-wrap: balance; }
.confirm-message { margin: 0 auto; max-width: 22rem; color: var(--muted); font-size: .925rem; text-wrap: pretty; }
.confirm-actions { display: flex; gap: .625rem; margin-top: 1.5rem; }
.confirm-actions > .btn { flex: 1 1 0; padding: .6rem 1rem; font-weight: 600; border-radius: .75rem; }
.list-group-item { border-color: var(--line); background: var(--surface); }
hr { border-color: var(--line); opacity: 1; }

/* ---------- Navbar ---------- */
.site-nav { background: rgba(255, 255, 255, .8); backdrop-filter: saturate(180%) blur(0.875rem); border-bottom: 1px solid var(--line); }
[data-bs-theme="dark"] .site-nav { background: rgba(21, 22, 23, .82); }
.site-nav .navbar-brand { font-weight: 700; letter-spacing: -.035em; display: flex; align-items: center; gap: .55rem; }
.brand-logo { height: 1.75rem; width: auto; display: block; flex-shrink: 0; }
.brand-logo.on-dark, [data-bs-theme="dark"] .brand-logo { filter: invert(1); }
.site-nav .nav-link { font-weight: 500; color: var(--muted); border-radius: 0.625rem; padding: .45rem .75rem !important; }
.site-nav .nav-link:hover { color: var(--ink); background: var(--surface-3); }
.site-nav .nav-link.active, .site-nav .nav-link.active:hover { color: #fff; background: var(--lagoon); }
.nav-search { max-width: 26.25rem; }
.nav-search .form-control { background: var(--surface-3); border-color: transparent; border-radius: 62.4375rem; }
.nav-search .form-control:focus { background: var(--surface); border-color: var(--brand); }
/* Learning / Teaching: one switch for people who both learn and teach. The thumb slides to the current side. */
.icon-btn > .ph { font-size: 1.35rem; }
.icon-btn { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: inline-grid; place-items: center; color: var(--muted); position: relative; border: 0; background: transparent; }
.icon-btn:hover { background: var(--surface-3); color: var(--ink); }
.icon-btn-sm { width: 2rem; height: 2rem; border-radius: .6rem; font-size: .85rem; }
.icon-btn.is-primary { color: var(--lagoon); }
.icon-btn.is-primary:hover { background: rgba(var(--lagoon-rgb), .1); color: var(--lagoon); }
.icon-btn.is-danger:hover { background: rgba(180, 35, 24, .08); color: #b42318; }
.icon-btn:disabled { opacity: .4; pointer-events: none; }
.row-actions { display: inline-flex; align-items: center; gap: .15rem; }
/* Unread counter: the same pill, size and corner as the collapsed side menu's count, in bordeaux. */
.badge-dot { position: absolute; top: .15rem; right: .3rem; min-width: 1rem; padding: 0 .25rem; border-radius: 62.4375rem; background: var(--bordeaux); color: #fff; font-size: .6rem; font-weight: 700; line-height: 1.6; text-align: center; }
.badge-dot[hidden] { display: none; }
/* The bell and the profile button are tiles like a side menu link, so they read as clickable. */
.icon-btn.nav-tile { width: 3.3rem; height: 2.6rem; border-radius: .625rem; background: var(--surface-3); color: var(--ink); }
.icon-btn.nav-tile:hover, .icon-btn.nav-tile[aria-expanded="true"] { background: rgba(var(--lagoon-rgb), .12); color: var(--lagoon); }
/* The profile tile is the avatar itself: photo or initials fill it edge to edge, with the tile's corners. */
.icon-btn.nav-tile > .avatar { width: 100%; height: 100%; border-radius: inherit; font-size: .85rem; }
.icon-btn.nav-tile:has(> .avatar) { overflow: hidden; }
.icon-btn.nav-tile:has(> .avatar):is(:hover, [aria-expanded="true"]) { box-shadow: 0 0 0 2px rgba(var(--lagoon-rgb), .45); }
/* Theme toggle: a moon in light mode, a sun in dark mode. */
[data-bs-theme="dark"] .theme-icon-light, [data-bs-theme="light"] .theme-icon-dark { display: none; }
.mega-menu { min-width: 35rem; }
.mega-menu .dropdown-header { color: var(--ink); font-weight: 700; padding-left: .75rem; }

/* ---------- Avatars ---------- */
.avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: .85rem; flex-shrink: 0; object-fit: cover; letter-spacing: .02em; }
.avatar-initials { background: var(--night); }
[data-bs-theme="dark"] .avatar-initials { background: #000; box-shadow: inset 0 0 0 1px var(--line-strong); }
.avatar-xs { width: 1.625rem; height: 1.625rem; font-size: .62rem; }
.avatar-sm { width: 2rem; height: 2rem; font-size: .72rem; }
.avatar-lg { width: 4rem; height: 4rem; font-size: 1.3rem; }
.avatar-xl { width: 7rem; height: 7rem; font-size: 2.2rem; }

/* ---------- Chips & badges ---------- */
.chip { display: inline-flex; align-items: center; gap: .3rem; padding: .22rem .65rem; border-radius: 62.4375rem; font-size: .75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; }
.chip-primary { background: var(--teal); color: var(--white); }
.chip-success { background: var(--sage); color: var(--white); }
.chip-warning { background: var(--sun); color: var(--night); }
.chip-danger { background: var(--danger); color: var(--white); }
.chip-info { background: var(--sky); color: var(--night); }
.chip-secondary { background: var(--stone); color: var(--night); }
a.chip-secondary:hover { background: #9aa4a0; color: var(--night); text-decoration: none; }
.chip-dark { background: var(--night); color: var(--white); }
[data-bs-theme="dark"] .chip-dark { background: var(--snow); color: var(--night); }
.verified { color: var(--teal); }
.verified-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 700; color: var(--night); background: var(--sky); padding: .15rem .5rem; border-radius: 62.4375rem; }
.stars { color: var(--star); letter-spacing: 1px; white-space: nowrap; }
.stars [class*="fa-"] { font-size: .85em; }
.rating-value { color: var(--ink); font-weight: 700; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--surface-2); }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.06; }
.hero .lead { color: var(--muted); font-size: 1.15rem; }
.text-highlight { color: var(--muted); }
.hero-search { background: var(--surface); border: 1px solid var(--line); border-radius: 1.125rem; padding: .4rem; box-shadow: var(--shadow); max-width: 38.75rem; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.hero-search:focus-within { border-color: rgba(var(--brand-rgb), .5); box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), .1), var(--shadow); }
.hero-search .form-control { border: 0; background: transparent; font-size: .95rem; box-shadow: none; }
.hero-search .btn { display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0; white-space: nowrap; font-size: .875rem; padding: .55rem 1.1rem; border-radius: .8rem; }
.hero-search .btn [class*="fa-"] { font-size: .85rem; }
.hero-photo { display: block; width: auto; max-width: 100%; height: auto; max-height: 38rem; margin: 0 auto; }
@media (max-width: 991.98px) { .hero-photo { max-height: 24rem; } }
/* ---------- Section headings ---------- */
.section { padding: 4rem 0; }
.section-title { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-title h2 { font-size: 1.6rem; margin: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; font-weight: 700; color: var(--muted); }

/* ---------- Course cards ---------- */
.course-card { height: 100%; display: flex; flex-direction: column; border-radius: var(--radius); overflow: hidden; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); position: relative; }
.course-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.cover { position: relative; aspect-ratio: 16 / 9; overflow: hidden; color: #fff; background: var(--teal); display: flex; align-items: flex-end; }
.cover img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; transition: transform .5s var(--ease); }
@media (min-width: 768px) { .cover-fill .cover { aspect-ratio: auto; height: 100%; min-height: 12rem; } }
.course-card:hover .cover img { transform: scale(1.03); }
.cover .cover-icon { position: absolute; right: -10px; bottom: -22px; font-size: 6.5rem; opacity: .16; transform: rotate(-12deg); }
.cover .cover-title { position: relative; z-index: 1; padding: .9rem 1rem; font-weight: 700; font-size: 1.02rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover .cover-badges { position: absolute; top: .7rem; left: .7rem; z-index: 2; display: flex; gap: .35rem; }
.cover-badge { background: rgba(255, 255, 255, .94); color: var(--night); font-size: .7rem; font-weight: 700; padding: .18rem .55rem; border-radius: 62.4375rem; }
.course-card .card-body { display: flex; flex-direction: column; gap: .35rem; padding: 1rem; }
.course-card .title { font-weight: 700; line-height: 1.3; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.course-card .meta { font-size: .8rem; color: var(--muted); }
.course-card .price { font-weight: 800; font-size: 1.05rem; }
.course-card .price-free { color: var(--sage-ink); }
.scroller { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16.25rem, 1fr); gap: 1.25rem; overflow-x: auto; padding: .25rem .25rem 1rem; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scroller > * { scroll-snap-align: start; }
@media (min-width: 1200px) { .scroller { grid-auto-columns: calc((100% - 3 * 1.25rem) / 4); } }

/* ---------- Category tiles ---------- */
.cat-tile { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: all .3s var(--ease); height: 100%; }
.cat-tile:hover { border-color: rgba(var(--brand-rgb), .45); box-shadow: var(--shadow); transform: translateY(-2px); color: var(--ink); text-decoration: none; }
.cat-tile .icon { width: 2.875rem; height: 2.875rem; border-radius: 0.75rem; display: grid; place-items: center; font-size: 1.3rem; color: #fff; flex-shrink: 0; }
.cat-tile .name { font-weight: 700; }
.cat-tile .count { font-size: .8rem; color: var(--muted); }

/* ---------- Catalog ---------- */
.filter-panel { position: sticky; top: 5.5rem; }
.filter-panel .filter-group + .filter-group { border-top: 1px solid rgba(var(--night-rgb), .06); padding-top: 1rem; margin-top: 1rem; }
[data-bs-theme="dark"] .filter-panel .filter-group + .filter-group { border-top-color: rgba(255, 255, 255, .06); }
.filter-panel h6 { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }
.active-filters .chip { padding: .3rem .7rem; }
.toolbar-card { display: flex; flex-wrap: nowrap; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.toolbar-card .input-icon { flex: 1 1 auto; min-width: 0; }
.toolbar-card .form-select { width: auto; min-width: 10rem; }
@media (max-width: 575.98px) { .toolbar-card { flex-wrap: wrap; } }

/* ---------- Course page ---------- */
.course-hero { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line); padding: 2.75rem 0 3rem; }
.course-hero h1 { color: var(--ink); font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.course-hero .lead { color: var(--muted); }
.course-hero a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.course-hero a:hover { text-decoration-color: currentColor; }
.course-hero .breadcrumb a { color: var(--muted); text-decoration: none; }
.course-hero .breadcrumb a:hover { color: var(--ink); }
.course-hero .stars { color: var(--star); }
.course-hero .verified { color: var(--teal); }
.buy-box { position: sticky; top: 5.5rem; overflow: hidden; box-shadow: var(--shadow-lg); }
.buy-box .price-big { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; }
@media (min-width: 992px) { .buy-box-wrap { margin-top: -210px; } }
.outcome-list { columns: 2; column-gap: 2rem; list-style: none; padding: 0; }
.outcome-list li { break-inside: avoid; padding-left: 1.6rem; position: relative; margin-bottom: .6rem; }
.outcome-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; left: 0; color: var(--sage); }
@media (max-width: 576px) { .outcome-list { columns: 1; } }
.curriculum .accordion-item { border-color: var(--line); background: var(--surface); }
.curriculum .accordion-button { font-weight: 600; background: var(--surface-2); box-shadow: none; transition: background-color var(--dur) var(--ease); }
.curriculum .accordion-button:not(.collapsed) { color: var(--ink); background: var(--brand-soft); }
.lesson-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; border-top: 1px solid var(--line); font-size: .92rem; }
.lesson-row:first-child { border-top: 0; }
.lesson-row [class*="fa-"] { color: var(--muted); }
.lesson-type-icon { width: 1.1rem; text-align: center; flex: none; }
.rating-bars .bar { height: 0.375rem; border-radius: 62.4375rem; background: var(--surface-3); overflow: hidden; }
.rating-bars .bar > span { display: block; height: 100%; background: var(--star); border-radius: 62.4375rem; }
.review { padding: 1.1rem 0; border-top: 1px solid var(--line); }
.review:first-child { border-top: 0; }

/* ---------- Progress ---------- */
.progress { height: 0.375rem; border-radius: 62.4375rem; background: var(--surface-3); }
.progress-bar { background: var(--ink); border-radius: 62.4375rem; transition: width .6s var(--ease); }
.ring { --p: 0; --size: 3.5rem; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--surface-3) 0); position: relative; font-weight: 700; font-size: .8rem; }
.ring::before { content: ""; position: absolute; inset: 0.3125rem; border-radius: 50%; background: var(--surface); }
.ring > span { position: relative; }

/* ---------- Dashboard shell (studio + console) ---------- */
.shell { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; }
.sidebar .brand { padding: 1.1rem 1.25rem; display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--ink); letter-spacing: -.035em; }
.sidebar .brand:hover { text-decoration: none; }
.sidebar .brand small { display: block; font-weight: 600; font-size: .68rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
.sidebar .nav-section { padding: .9rem 1.25rem .35rem; font-size: .66rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.sidebar .nav-link { display: flex; align-items: center; gap: .7rem; margin: 1px .75rem; padding: .55rem .75rem; border-radius: 0.625rem; color: var(--muted); font-weight: 500; font-size: .92rem; }
.sidebar .nav-link [class*="fa-"] { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar .nav-link:hover { background: var(--surface-3); color: var(--ink); }
.sidebar .nav-link.active, .sidebar .nav-link.active:hover { background: var(--lagoon); color: #fff; font-weight: 600; }
.sidebar .nav-link .count { margin-left: auto; font-size: .7rem; font-weight: 700; background: var(--surface-3); color: var(--muted); padding: .05rem .45rem; border-radius: 62.4375rem; }
.sidebar .nav-link .count.hot { background: var(--sun); color: var(--night); }
.sidebar .nav-link .count.verified-count { background: var(--sky); color: var(--night); }
.sidebar-foot { margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--line); }
.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 1020; background: rgba(249, 249, 249, .8); backdrop-filter: saturate(180%) blur(0.875rem); border-bottom: 1px solid var(--line); padding: .7rem 1.5rem; display: flex; align-items: center; gap: 1rem; }
[data-bs-theme="dark"] .topbar { background: rgba(21, 22, 23, .82); }
.page {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: none;
  padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 3vw, 3rem);
}
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.page-head h1 { font-size: 1.6rem; margin: 0; }
.page-head .sub { color: var(--muted); margin: .2rem 0 0; }
@media (max-width: 991.98px) {
  .sidebar { position: fixed; z-index: 1045; left: 0; top: 0; transform: translateX(-100%); transition: transform .3s var(--ease); box-shadow: var(--shadow-lg); }
  .sidebar.show { transform: none; }
  .page { padding: 1.25rem 1rem 2.5rem; /* keeps console readable on small screens */ }
  .topbar { padding: .6rem 1rem; }
}
.sidebar-backdrop { display: none; }
.sidebar.show + .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(var(--night-rgb), .4); backdrop-filter: blur(2px); z-index: 1040; }

/* ---------- KPI tiles ---------- */
.kpi { padding: 1.4rem 1.5rem; height: 100%; }
.revenue-hero { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; min-height: 100%; }
.revenue-hero .label { font-size: .8rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.revenue-hero .amount { font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.revenue-facts { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: .25rem 0 .75rem; }
.revenue-facts dt { font-size: .75rem; font-weight: 600; color: var(--muted); }
.revenue-facts dd { margin: .15rem 0 0; font-weight: 700; }
.kpi .label { font-size: .8rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.kpi .value { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.2; margin-top: .35rem; }
.kpi .hint { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.kpi .icon { width: 2.625rem; height: 2.625rem; border-radius: 0.75rem; display: grid; place-items: center; font-size: 1.2rem; }
.tone-brand { background: var(--brand-soft); color: var(--brand-ink); }
.tone-cyan { background: rgba(var(--sky-rgb), .28); color: var(--teal-ink); }
.tone-green { background: rgba(var(--sage-rgb), .16); color: var(--sage-ink); }
.tone-amber { background: rgba(var(--sun-rgb), .35); color: var(--sun-ink); }
.tone-rose { background: rgba(var(--danger-rgb), .12); color: var(--danger); }
.tone-violet { background: rgba(var(--peach-rgb), .5); color: var(--peach-ink); }
[data-bs-theme="dark"] .tone-cyan { background: rgba(var(--sky-rgb), .12); }
[data-bs-theme="dark"] .tone-amber { background: rgba(var(--sun-rgb), .14); }
[data-bs-theme="dark"] .tone-violet { background: rgba(var(--peach-rgb), .14); }
.delta-up { color: var(--sage-ink); font-weight: 600; }
.delta-down { color: var(--danger); font-weight: 600; }
.queue-card { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 0.875rem; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: all .3s var(--ease); }
.queue-card:hover { border-color: rgba(var(--brand-rgb), .45); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.queue-card .n { margin-left: auto; font-size: 1.25rem; font-weight: 800; }
.queue-card.zero { opacity: .55; }
.chart-box { position: relative; height: 18.75rem; }
.chart-box.sm { height: 13.75rem; }

/* ---------- Banners ---------- */
.banner { display: flex; gap: .9rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: 0.875rem; border: 1px solid; margin-bottom: .75rem; }
.banner [class*="fa-"] { font-size: 1.2rem; margin-top: .05rem; }
.banner-warning { background: rgba(var(--sun-rgb), .14); border-color: rgba(var(--sun-rgb), .6); }
.banner-warning [class*="fa-"] { color: var(--sun-ink); }
.banner-info { background: rgba(var(--sky-rgb), .12); border-color: rgba(var(--sky-rgb), .55); }
.banner-info [class*="fa-"] { color: var(--teal-ink); }
.banner-danger { background: rgba(var(--danger-rgb), .06); border-color: rgba(var(--danger-rgb), .3); }
.banner-danger [class*="fa-"] { color: var(--danger); }
.banner-success { background: rgba(var(--sage-rgb), .08); border-color: rgba(var(--sage-rgb), .4); }
.banner-success [class*="fa-"] { color: var(--sage-ink); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: .25rem; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 1.5rem; overflow-x: auto; }
.tabs a { padding: .65rem 1rem; color: var(--muted); font-weight: 600; font-size: .92rem; border-bottom: 2px solid transparent; border-radius: 0.625rem 0.625rem 0 0; white-space: nowrap; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.tabs a:hover { color: var(--ink); background: rgba(var(--lagoon-rgb), .08); text-decoration: none; }
.learning-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.learning-tabs { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
.learning-tabs a { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; }
.learning-tabs a .count { font-size: .7rem; color: var(--muted); font-weight: 600; }
.learning-tabs a.active .count { color: rgba(255, 255, 255, .75); }
.learning-search { flex: 1 1 14rem; max-width: 18rem; }
.learning-search .form-control { height: 2.5rem; border-radius: .75rem; background: var(--surface-3); border-color: transparent; font-size: .9rem; }
.learning-search .form-control:focus { background: var(--surface); border-color: rgba(var(--lagoon-rgb), .5); }
.learn-card:hover { transform: none; box-shadow: none; border-color: rgba(var(--lagoon-rgb), .35); }
.learn-card .card-body { gap: .25rem; }
.learn-card .title { font-size: .95rem; }
.learn-card .meta { display: flex; align-items: center; gap: .3rem; }
.learn-progress { height: .25rem; }
.learn-progress .progress-bar { background: var(--lagoon); }
.learn-status { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--muted); }
.learn-go { margin-left: auto; color: var(--muted); transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.learn-card:hover .learn-go { color: var(--lagoon); transform: translateX(3px); }
.tabs a.active, .tabs a.active:hover { color: #fff; background: var(--lagoon); border-bottom-color: var(--lagoon); }
.tabs a .count { font-size: .72rem; background: var(--surface-3); padding: .05rem .45rem; border-radius: 62.4375rem; margin-left: .3rem; color: var(--muted); }
.tabs a.active .count { background: rgba(255, 255, 255, .22); color: #fff; }
.pill-tabs { display: inline-flex; gap: .25rem; background: var(--surface-3); padding: .25rem; border-radius: 0.75rem; flex-wrap: wrap; }
.pill-tabs a, .pill-tabs button { padding: .4rem .85rem; border-radius: 0.5625rem; color: var(--muted); font-weight: 600; font-size: .85rem; border: 0; background: transparent; transition: all var(--dur) var(--ease); }
.pill-tabs a:hover { text-decoration: none; color: var(--ink); }
.pill-tabs .active, .pill-tabs .active:hover { background: var(--lagoon); color: #fff; box-shadow: var(--shadow-sm); }
.pill-tabs .count { display: inline-block; min-width: 1.3rem; margin-left: .3rem; padding: 0 .35rem; border-radius: 1rem; font-size: .72rem; text-align: center; background: rgba(var(--night-rgb), .07); }
.pill-tabs .active .count { background: rgba(255, 255, 255, .22); }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 3rem 1.5rem; color: var(--muted); }
.empty > i { font-size: 2.4rem; display: block; margin-bottom: .75rem; color: var(--stone); }
.empty h3 { font-size: 1.1rem; color: var(--ink); }

/* ---------- Player ---------- */
.player { display: grid; grid-template-columns: 1fr 22.5rem; min-height: calc(100vh - 4rem); }
.player-main { min-width: 0; background: var(--surface); }
.player-bar { flex-shrink: 0; display: flex; align-items: center; gap: 1rem; min-height: 3.75rem; padding: .5rem clamp(1rem, 2.5vw, 1.75rem); background: var(--surface); border-bottom: 1px solid var(--line); }
.player-back { flex: none; display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--line); border-radius: .65rem; color: var(--ink); transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.player-back:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); text-decoration: none; }
.player-heading { flex: 1; min-width: 0; line-height: 1.3; }
.player-course { font-size: .75rem; font-weight: 600; color: var(--muted); }
.player-lesson { font-size: .95rem; font-weight: 700; color: var(--ink); }
.player-steps { flex: none; display: inline-flex; align-items: center; height: 2.25rem; border: 1px solid var(--line); border-radius: .65rem; overflow: hidden; }
.player-steps > a, .player-steps > button, .player-steps > .is-off { display: grid; place-items: center; width: 2.25rem; height: 100%; color: var(--ink); font-size: .8rem; }
.player-steps > button { padding: 0; border: 0; background: none; }
.player-steps > a:hover, .player-steps > button:hover { background: var(--surface-2); color: var(--lagoon); text-decoration: none; }
.player-steps > .is-off { color: var(--line-strong); }
.player-step-count { padding: 0 .65rem; border-left: 1px solid var(--line); border-right: 1px solid var(--line); height: 100%; display: flex; align-items: center; white-space: nowrap; font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.player-step-count span { color: var(--muted); font-weight: 500; }
.player-progress { flex: none; display: flex; align-items: center; gap: .5rem; }
.player-progress .ring { font-size: .62rem; background: conic-gradient(var(--lagoon) calc(var(--p) * 1%), var(--surface-3) 0); }
.player-progress .ring::before { inset: .2rem; }
@media (max-width: 575.98px) { .player-course { display: none; } .player-steps .player-step-count { display: none; } }
.player-side { --side-hover: color-mix(in srgb, var(--surface-3) 93%, var(--ink)); border-left: 1px solid var(--line); background: var(--surface); height: calc(100vh - 4rem); position: sticky; top: 4rem; overflow-y: auto; }
/* Training content, Coursera style: "Module N" over each module's title, then one column of items with
   a small type icon (a check once completed) and "Type • length" under the title. */
.player-side .side-head { padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 2; }
.player-side .side-title { font-weight: 700; font-size: 1rem; line-height: 1.35; }
.side-progress-row { display: flex; align-items: center; gap: .75rem; margin-top: .85rem; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.player-side .side-progress { height: .25rem; }
.player-side .side-progress .progress-bar { background: var(--lagoon); }
.side-modules { padding: .5rem 0 1.5rem; }
.player-side .mod { border-bottom: 1px solid var(--line); }
.player-side .mod:last-child { border-bottom: 0; }
.player-side .mod-head { list-style: none; cursor: pointer; display: flex; align-items: flex-start; gap: .75rem; padding: 1.1rem 1.5rem; transition: background-color var(--dur) var(--ease); }
.player-side .mod-head::-webkit-details-marker { display: none; }
.player-side .mod-head:hover { background: var(--surface-2); }
/* Only an open module's lessons sit on grey; the rest of the panel stays white. */
.player-side .les-list { background: var(--surface-3); padding: .4rem 0 .6rem; }
.player-side .mod.locked .mod-head { opacity: .6; }
.player-side .mod-label { display: block; font-size: .78rem; font-weight: 700; color: var(--ink); }
.player-side .mod-label .mod-done { color: var(--lagoon); }
.player-side .mod-title { display: block; margin-top: .1rem; font-size: .9rem; line-height: 1.35; color: var(--ink); }
.player-side .mod-meta { display: block; margin-top: .2rem; font-size: .75rem; color: var(--muted); }
.player-side .mod-chevron { margin-top: .2rem; font-size: .75rem; color: var(--muted); transition: transform var(--dur) var(--ease); }
.player-side .mod[open] .mod-chevron { transform: rotate(180deg); }
.les-list { list-style: none; margin: 0; padding: 0 0 .75rem; }
.player-side .les { display: flex; align-items: flex-start; gap: .75rem; padding: .6rem 1.5rem .6rem calc(1.5rem - 3px); border-left: 3px solid transparent; color: var(--ink); transition: background-color var(--dur) var(--ease); }
.player-side .les:hover { background: var(--side-hover); color: var(--ink); text-decoration: none; }
.player-side .les.current { background: rgba(var(--lagoon-rgb), .13); border-left-color: var(--lagoon); }
.player-side .les.locked { color: var(--muted); pointer-events: none; }
.les-icon { flex: none; width: 1.1rem; padding-top: .1rem; text-align: center; font-size: .9rem; color: var(--muted); }
.les.is-done .les-icon { color: var(--lagoon); }
.les-title { display: block; font-size: .85rem; line-height: 1.4; }
.les.current .les-title { font-weight: 700; }
.les-meta { display: block; margin-top: .1rem; font-size: .74rem; color: var(--muted); }
[data-bs-theme="dark"] .les.is-done .les-icon, [data-bs-theme="dark"] .player-side .mod-label .mod-done { color: #8fb8d8; }
.video-stage { flex-shrink: 0; aspect-ratio: 16 / 9; background: var(--night); color: var(--stone); display: grid; place-items: center; position: relative; overflow: hidden; }
.video-stage video { width: 100%; height: 100%; }
.video-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-stage .poster { position: absolute; inset: 0; opacity: .5; }
/* Annotate on the video: pause and write a note pinned to this moment (annotate.js). */
.video-annotate { position: absolute; top: .75rem; right: .75rem; z-index: 3; display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: .75rem; padding: .45rem .8rem .45rem .65rem; background: rgba(0, 4, 17, .55); color: #fff; font-size: .82rem; font-weight: 600; backdrop-filter: blur(.75rem) saturate(160%); -webkit-backdrop-filter: blur(.75rem) saturate(160%); transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.video-annotate i { font-size: 1.15rem; }
.video-annotate:hover { background: var(--lagoon); }
.video-annotate:active { transform: scale(.97); }
.video-stage .play { position: relative; z-index: 1; text-align: center; }
.video-stage .play [class*="fa-"] { font-size: 4rem; color: #fff; }
.article-body { max-width: 47.5rem; font-size: 1.05rem; line-height: 1.8; }
.article-body h2, .article-body h3 { margin-top: 1.75rem; }
.article-body p { margin-bottom: 1.1rem; }
.article-body pre, .article-body code { background: var(--surface-3); border-radius: 0.5rem; }
.article-body pre { padding: 1rem; }
@media (max-width: 991.98px) {
  .player { grid-template-columns: 1fr; }
  .player-side { position: static; height: auto; border-left: 0; border-top: 1px solid var(--line); }
}

/* Lesson materials: shown in the page, view only */
.material { --material-zoom: 1; border: 1px solid var(--line); border-radius: 0.875rem; background: var(--surface); overflow: hidden; }
.lesson-body > .material { max-width: 72rem; }
.material:focus { outline: none; }
.material-zoom { display: flex; align-items: center; gap: .15rem; flex: none; }
.material-zoom-level { min-width: 3.2rem; text-align: center; font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.material.is-full { display: flex; flex-direction: column; border-radius: 0; }
.material.is-full .material-body { flex: 1; max-height: none; }
.material-doc { display: flex; justify-content: center; padding: 1.5rem 1rem 2.5rem; overflow-x: auto; }
.material-page { width: calc(48rem * var(--material-zoom)); max-width: none; flex: none; padding: calc(3.5rem * var(--material-zoom)) calc(4rem * var(--material-zoom)); background: #fff; color: #1f1f1f; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); font-size: calc(1.08rem * var(--material-zoom)); line-height: 1.75; }
.material-page h3 { font-size: 1.35em; margin: 1.4em 0 .6em; color: var(--navy); }
.material-page p { margin-bottom: .9em; }
.material:is(.is-text, .is-notebook, .is-slides, .is-table) .material-body { font-size: calc(1rem * var(--material-zoom)); }
.material.is-image .material-image { width: calc(100% * var(--material-zoom)); max-width: none; }
/* Slides lessons (_slides.html, slides.js): one slide at a time on a dark stage. */
.lesson-body > .slides { max-width: 72rem; }
.slides-stage { position: relative; display: grid; place-items: center; min-height: 18rem; padding: 1rem; background: #1b1f24; overflow: hidden; max-height: none; }
.slides-canvas { display: block; max-width: 100%; box-shadow: 0 2px 12px rgba(0, 0, 0, .45); background: #fff; }
.slides-stage .pdf-status { position: absolute; color: #d6dbe1; }
.slides-hit { position: absolute; top: 0; bottom: 0; width: 22%; border: 0; background: transparent; cursor: pointer; }
.slides-hit.is-prev { left: 0; cursor: w-resize; }
.slides-hit.is-next { right: 0; cursor: e-resize; }
.slides-hit:disabled { cursor: default; }
.slides-progress { height: 3px; background: var(--line); }
.slides-progress span { display: block; height: 100%; width: 0; background: var(--lagoon); transition: width .2s ease; }
.slides-thumbs { display: flex; gap: .6rem; padding: .75rem; overflow-x: auto; border-top: 1px solid var(--line); background: var(--surface-3); }
.slides-thumb { position: relative; flex: none; width: 160px; padding: 0; border: 2px solid transparent; border-radius: .4rem; background: var(--surface); overflow: hidden; }
.slides-thumb canvas { display: block; width: 100%; min-height: 90px; }
.slides-thumb span { position: absolute; left: .3rem; bottom: .2rem; padding: 0 .35rem; border-radius: .3rem; font-size: .72rem; font-weight: 600; background: rgba(0, 0, 0, .6); color: #fff; }
.slides-thumb.is-current { border-color: var(--lagoon); }
.slides.is-full .slides-stage { flex: 1; }
.material-head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.material-icon { width: 2.25rem; height: 2.25rem; border-radius: .6rem; display: grid; place-items: center; background: var(--lagoon); color: #fff; flex-shrink: 0; }
.material-body { background: var(--surface-3); max-height: 85vh; overflow: auto; }
.material-body:not([data-annotatable]) { user-select: none; -webkit-user-select: none; }
.material-body .article-body { background: var(--surface); }
.pdf-viewer { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem 2rem; min-width: min-content; }
.pdf-page-wrap { position: relative; flex: none; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); overflow: hidden; }
.pdf-page { display: block; width: 100%; height: 100%; }
.textLayer { position: absolute; inset: 0; overflow: hidden; line-height: 1; text-align: initial; opacity: 1; text-size-adjust: none; -webkit-text-size-adjust: none; forced-color-adjust: none; transform-origin: 0 0; z-index: 2; }
.textLayer :is(span, br) { color: transparent; position: absolute; white-space: pre; cursor: text; transform-origin: 0% 0%; }
.textLayer span.markedContent { top: 0; height: 0; }
.textLayer ::selection { background: rgba(var(--lagoon-rgb), .28); color: transparent; }
.textLayer br::selection { background: transparent; }
.textLayer mark.anno-mark { color: transparent; padding: 0; }
.pdf-status { padding: 2.5rem 1rem; }
.material-image { display: block; max-width: 100%; margin: 0 auto; pointer-events: none; }
.material-pre { margin: 0; padding: 1rem 1.25rem; font-size: .92em; line-height: 1.6; white-space: pre-wrap; word-break: break-word; background: transparent; }
.material-table { font-size: .85rem; background: var(--surface); }
.material-table th { position: sticky; top: 0; background: var(--surface-3); font-weight: 600; white-space: nowrap; }
.material-table td, .material-table th { padding: .45rem .75rem; border-color: var(--line); }
.material-slides { display: grid; gap: .75rem; padding: .75rem; }
.material-slide { background: var(--surface); border: 1px solid var(--line); border-radius: .75rem; padding: 1rem 1.25rem; aspect-ratio: 16 / 9; overflow: auto; }
.material-slide p { margin-bottom: .4rem; }
.material-notebook { display: grid; gap: .75rem; padding: .75rem; }
.material-notebook .article-body { padding: .75rem 1rem; border-radius: .6rem; max-width: none; }
.nb-code { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--lagoon); border-radius: .5rem; font-family: var(--bs-font-monospace); }
.nb-output { color: var(--muted); padding-top: 0; font-family: var(--bs-font-monospace); }
.material-files li { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.material-files li [class*="fa-"] { color: var(--muted); }
.material-note { padding: .6rem 1rem; border-top: 1px solid var(--line); background: var(--surface); }
@media print { .material, .qa-panel { display: none !important; } }

/* Q&A drawer: slides in over the lesson, beside the training content panel */
:root, [data-bs-theme="light"] { --note-ink: var(--lagoon); --note-rgb: var(--lagoon-rgb); }
[data-bs-theme="dark"] { --note-ink: var(--sky); --note-rgb: var(--sky-rgb); }
.qa-toggle { position: relative; }
.btn.qa-toggle.active { background: var(--ink) !important; border-color: var(--ink) !important; color: var(--surface) !important; }
.qa-badge { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; margin-left: .35rem; border-radius: 1rem; background: var(--ink); color: var(--surface); font-size: .68rem; font-weight: 700; }
.qa-toggle.active .qa-badge { background: var(--surface); color: var(--ink); }
.qa-panel { position: fixed; top: 4rem; bottom: 0; right: 22.5rem; width: min(26rem, 100%); z-index: 1030; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateX(1.5rem); opacity: 0; visibility: hidden; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), width var(--dur) var(--ease), visibility 0s linear var(--dur); outline: none; }
.qa-panel.is-open { transform: none; opacity: 1; visibility: visible; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), width var(--dur) var(--ease); }
.qa-panel.is-wide { left: 0; width: auto; }
.qa-panel.is-wide :is(.qa-body > *, .qa-tools, .qa-filters, .qa-compose > *) { max-width: 46rem; margin-left: auto; margin-right: auto; }
.qa-head { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.qa-head-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; display: grid; place-items: center; background: var(--lagoon); color: #fff; font-size: 1.3rem; flex-shrink: 0; margin-right: .25rem; }
.qa-icon-btn { width: 2.25rem; height: 2.25rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: .625rem; background: var(--surface-3); color: var(--ink); font-size: 1.05rem; }
.qa-icon-btn:hover { background: rgba(var(--lagoon-rgb), .12); color: var(--lagoon); }
.qa-tools { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem 0; background: var(--surface); }
.qa-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: .45rem; border: 1px solid transparent; border-radius: .625rem; padding: 0 .7rem; height: 2.25rem; background: var(--surface-3); color: var(--muted); font-size: .95rem; margin: 0; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.qa-search:focus-within { border-color: var(--lagoon); background: var(--surface); }
.qa-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: .82rem; }
.qa-scope { display: inline-flex; padding: 3px; border-radius: .625rem; background: var(--surface-3); flex-shrink: 0; }
.qa-scope button { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 600; padding: .35rem .6rem; border-radius: .5rem; }
.qa-scope button i { font-size: .95rem; }
.qa-scope button.active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.qa-body { flex: 1; overflow-y: auto; padding: .85rem .85rem; background: var(--surface-3); }
.qa-filters { display: flex; gap: .3rem; padding: .6rem 1rem .75rem; border-bottom: 1px solid var(--line); background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.qa-filters::-webkit-scrollbar { display: none; }
.qa-filters button { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; border: 0; background: var(--surface-3); color: var(--muted); font-size: .8rem; font-weight: 600; padding: .35rem .7rem; border-radius: .625rem; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.qa-filters button i { font-size: .95rem; }
.qa-filters button span { font-weight: 700; opacity: .7; }
.qa-filters button:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-3) 93%, var(--ink)); }
.qa-filters button.active, .qa-filters button.active:hover { color: #fff; background: var(--lagoon); }
.qa-compose { position: relative; border-top: 1px solid var(--line); background: var(--surface); padding: .85rem 1rem .7rem; }
.qa-compose-box { display: flex; align-items: flex-end; gap: .5rem; border: 1px solid var(--line-strong); border-radius: .85rem; padding: .45rem .45rem .45rem .85rem; background: var(--surface); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.qa-compose-box:focus-within { border-color: var(--note-ink); box-shadow: 0 0 0 3px rgba(var(--note-rgb), .12); }
.qa-compose-box textarea { flex: 1; display: block; width: 100%; min-width: 0; border: 0; outline: 0; box-shadow: none; resize: none; background: transparent; color: inherit; font: inherit; font-size: .9rem; line-height: 1.5; padding: .35rem 0; min-height: 2.1rem; max-height: 10rem; overflow: hidden; scrollbar-width: thin; white-space: pre-wrap; overflow-wrap: anywhere; }
.qa-compose-box textarea::placeholder { color: var(--muted); opacity: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qa-compose-box.is-main { flex-direction: column; align-items: stretch; gap: .35rem; padding: .65rem .65rem .5rem .9rem; background: var(--surface-3); border-color: transparent; }
.qa-compose-box.is-main:focus-within { background: var(--surface); }
.qa-compose-box.is-main textarea { min-height: 3.6rem; max-height: 13.75rem; }
.qa-compose-bar { display: flex; align-items: center; gap: .5rem; }
.qa-mode { display: inline-flex; gap: .15rem; padding: 3px; border-radius: .625rem; background: var(--surface-3); }
.qa-compose-box.is-main:not(:focus-within) .qa-mode { background: var(--surface); }
.qa-compose-box.is-main:not(:focus-within) .qa-mode input:checked + span { background: var(--surface-3); box-shadow: none; }
.qa-mode label { margin: 0; cursor: pointer; }
.qa-mode input { position: absolute; opacity: 0; pointer-events: none; }
.qa-mode span { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border-radius: .45rem; font-size: .76rem; font-weight: 600; color: var(--muted); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.qa-mode label:hover span { color: var(--ink); }
.qa-mode input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.qa-mode input:focus-visible + span { outline: 2px solid var(--note-ink); outline-offset: 1px; }
.qa-send { width: 2.25rem; height: 2.25rem; padding: 0; border-radius: .625rem; flex-shrink: 0; font-size: 1.05rem; }
.qa-compose-hint { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; font-size: .75rem; color: var(--muted); min-height: 1.2rem; }
.qa-reply-box { padding: .3rem .3rem .3rem .75rem; border-radius: .7rem; }
.qa-reply-box .qa-send { width: 1.85rem; height: 1.85rem; border-radius: .5rem; }
.qa-reply-error:empty { display: none; }
.qa-reply-error { margin-top: .3rem; }
.tag-conversation { color: var(--ink); background: rgba(var(--note-rgb), .14); }
.qa-compose-hint .is-question, .qa-compose-hint .is-question i { color: var(--ink) !important; font-weight: 600; }
.qa-tool { width: 2.25rem; height: 2.25rem; display: inline-grid; place-items: center; border: 0; border-radius: .625rem; background: transparent; color: var(--muted); font-size: 1.15rem; }
.qa-tool:hover { background: var(--surface); color: var(--lagoon); }
.qa-pin { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; padding: .45rem .5rem .45rem .7rem; border-radius: .625rem; background: rgba(var(--lagoon-rgb), .1); color: var(--lagoon); font-size: .8rem; font-weight: 600; }
.qa-pin [data-pin-icon] { color: var(--lagoon); font-size: 1rem; }
.qa-pin-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-pin-clear { border: 0; background: none; color: var(--lagoon); padding: 0 .25rem; }
/* The note being quoted, as a card above the box (the quote line is only added when posting). */
.qa-quoting { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: .5rem; padding: .55rem .5rem .55rem .7rem; border-left: 3px solid var(--note-ink); border-radius: .2rem .65rem .65rem .2rem; background: rgba(var(--note-rgb), .07); }
.qa-quoting[hidden] { display: none; }
.qa-quoting > i { margin-top: .1rem; font-size: 1.05rem; color: var(--note-ink); opacity: .6; }
.qa-quoting-who { font-size: .72rem; font-weight: 700; color: var(--note-ink); }
.qa-quoting-text { font-size: .8rem; color: var(--ink); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qa-quoting-text .katex.math-on-paper { box-shadow: none; background: none; padding: 0; }

/* Notes */
.qa-item { padding: .9rem 1rem; margin-bottom: .6rem; border-radius: .85rem; background: var(--surface); box-shadow: 0 1px 2px rgba(var(--night-rgb), .05); }
.qa-item:last-of-type { margin-bottom: 0; }
.qa-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .8rem; }
.qa-meta .avatar-sm { width: 1.6rem; height: 1.6rem; font-size: .65rem; }
.note-tag { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: 2rem; font-size: .7rem; font-weight: 700; line-height: 1.4; color: var(--ink); background: var(--surface-3); }
.note-tag i { font-size: .8rem; }
.tag-question { color: var(--surface); background: var(--ink); }
.qa-title { font-size: .95rem; font-weight: 600; margin: .55rem 0 .25rem; }
.qa-text { font-size: .875rem; line-height: 1.55; overflow-wrap: anywhere; margin-top: .4rem; }
/* A quoted note: a blue bar and quote mark, who said it in bold, their words below. */
.note-quote { position: relative; margin: .1rem 0 .55rem; padding: .55rem .75rem .55rem 2.15rem; border-left: 3px solid var(--note-ink); border-radius: .2rem .65rem .65rem .2rem; background: rgba(var(--note-rgb), .07); color: var(--ink); font-size: .82rem; line-height: 1.5; }
.note-quote::before { content: "\e660"; position: absolute; left: .6rem; top: .55rem; font-family: "Phosphor-Fill" !important; font-size: 1.05rem; line-height: 1; color: var(--note-ink); opacity: .55; }
.note-quote-who { display: block; margin-bottom: .1rem; font-size: .74rem; font-weight: 700; font-style: normal; color: var(--note-ink); }
.note-quote-who::after { content: " wrote"; font-weight: 500; color: var(--muted); }
.mention { font-weight: 700; color: var(--note-ink); }
.qa-anchor { display: flex; align-items: flex-start; gap: .45rem; width: 100%; margin-top: .55rem; border: 0; text-align: left; font-size: .8rem; border-radius: .55rem; padding: .4rem .6rem; background: var(--surface-3); color: inherit; }
/* The passage a note is pinned to: highlighted text on a soft marker stripe. */
.qa-quote { position: relative; padding-left: .75rem; border-radius: .2rem .55rem .55rem .2rem; border-left: 3px solid rgba(var(--note-rgb), .45); font-style: italic; color: var(--ink); }
.qa-quote span { background: linear-gradient(transparent 58%, rgba(var(--note-rgb), .16) 58%); }
.qa-anchor i { color: var(--muted); margin-top: .1rem; }
.qa-quote em { margin-left: auto; font-style: normal; color: var(--muted); white-space: nowrap; }
.qa-time { width: auto; display: inline-flex; align-items: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qa-time { color: var(--lagoon); background: rgba(var(--lagoon-rgb), .1); }
.qa-time i { margin-top: 0; font-size: .75rem; color: var(--lagoon); }
.qa-time:hover { background: rgba(var(--lagoon-rgb), .16); }
.qa-anchor:hover { background: var(--surface-3); }
.qa-answer { margin-top: .75rem; padding: .65rem .8rem; background: var(--surface-3); border-radius: .65rem; }
.qa-answer .qa-text { margin-top: .3rem; }
.qa-waiting { margin-top: .75rem; font-size: .8rem; color: var(--muted); }
.qa-reply { margin-top: .75rem; }
.qa-actions { display: flex; gap: 1rem; margin-top: .65rem; font-size: .78rem; font-weight: 600; }
.qa-actions :is(a, button) { display: inline-flex; align-items: center; gap: .35rem; border: 0; background: none; padding: 0; color: var(--muted); text-decoration: none; }
.qa-actions :is(a, button):hover { color: var(--ink); }
.qa-empty { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.qa-empty > i { font-size: 2rem; margin-bottom: .5rem; display: block; }
.qa-item.is-flash, .anno-mark.is-flash { animation: anno-flash 1.6s var(--ease); }
@keyframes anno-flash { 0%, 40% { background-color: rgba(var(--note-rgb), .18); } 100% { background-color: transparent; } }

/* Highlights in the content and dots on the video timeline */
mark.anno-mark { position: relative; padding: 0; color: inherit; cursor: pointer; border-radius: 2px; background: rgba(var(--note-rgb), .1); box-shadow: inset 0 -2px 0 var(--note-ink); }
mark.anno-mark:hover { background: rgba(var(--note-rgb), .2); }
mark.anno-start::before { content: ""; position: absolute; left: -3px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: var(--note-ink); box-shadow: 0 0 0 2px var(--surface); }
mark.anno-mark.anno-off { background: none; box-shadow: none; cursor: inherit; }
mark.anno-mark.anno-off::before { display: none; }
.video-markers { position: relative; height: 1.4rem; background: var(--night); padding: 0 .75rem; }
.video-markers .vm-track { position: relative; height: 100%; }
.video-markers .vm-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(255, 255, 255, .18); border-radius: 2px; }
.vm-dot { position: absolute; top: 50%; width: .7rem; height: .7rem; margin: -.35rem 0 0 -.35rem; padding: 0; border-radius: 50%; border: 2px solid var(--night); background: #fff; opacity: .6; cursor: pointer; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.vm-dot.vm-mine { opacity: 1; }
.vm-dot:hover, .vm-dot:focus-visible { transform: scale(1.4); opacity: 1; z-index: 1; }
.anno-pop { position: fixed; z-index: 1040; }
.anno-pop button { display: inline-flex; align-items: center; gap: .4rem; border: 0; border-radius: .625rem; padding: .45rem .8rem; background: var(--lagoon); color: #fff; font-size: .8rem; font-weight: 600; box-shadow: var(--shadow-lg); }
.anno-pop button:hover { background: var(--navy); }
.mention-menu { position: fixed; z-index: 1045; max-height: 16rem; overflow-y: auto; padding: .3rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: .65rem; box-shadow: var(--shadow-lg); }
.mention-option { display: flex; align-items: center; gap: .5rem; width: 100%; border: 0; background: none; color: var(--ink); text-align: left; font-size: .82rem; padding: .45rem .55rem; border-radius: .45rem; }
.mention-option.active, .mention-option:hover { background: var(--surface-3); }

/* Lesson content */
.player-main { display: flex; flex-direction: column; min-height: calc(100vh - 4rem); }
.lesson-body { flex: 1 0 auto; padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 5vw, 4.5rem) clamp(3rem, 5vw, 4.5rem); }
.lesson-body > * { max-width: 50rem; margin-left: auto; margin-right: auto; }
.lesson-body.is-workbench > * { max-width: 72rem; }
.lesson-body.is-compact { padding-top: 2rem; padding-bottom: 2.5rem; }
.lesson-body h1 { margin-bottom: 1.75rem !important; }
.lesson-body.is-workbench { background: var(--surface-2); }
/* Articles and video notes: a Word-style page (Calibri, Word's heading blues) on a grey desk. */
.lesson-body.is-doc { --doc-desk: #e6e6e6; --doc-page: #ffffff; --doc-ink: #1b1b1b; --doc-head: #2f5496; --doc-head-2: #1f3763; --doc-rule: #d4d4d4;
  background: var(--doc-desk); padding-top: 2rem; }
[data-bs-theme="dark"] .lesson-body.is-doc { --doc-desk: #111213; --doc-page: #202124; --doc-ink: #e4e4e6; --doc-head: #8fb1ee; --doc-head-2: #b4c8f0; --doc-rule: #3a3b3f; }
.lesson-body.is-doc > * { max-width: 52rem; }
.lesson-body.is-doc > .material { max-width: 72rem; }
.doc-page { min-height: 70vh; padding: 4.5rem 5.25rem 5rem; background: var(--doc-page); color: var(--doc-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 .5rem 1.5rem -.75rem rgba(0, 0, 0, .2);
  font: 11.5pt/1.6 Calibri, Carlito, "Segoe UI", system-ui, sans-serif; }
.lesson-body .doc-page .doc-title { margin: 0 0 1.1rem !important; padding-bottom: .5rem; border-bottom: 1px solid var(--doc-rule); font: 300 26pt/1.15 "Calibri Light", Calibri, Carlito, "Segoe UI", sans-serif; letter-spacing: -.5px; color: var(--doc-ink); }
.doc-page .article-body { max-width: none; font-size: inherit; line-height: inherit; }
.doc-page .article-body :is(h1, h2) { margin: 1.4em 0 .35em; font: 400 16pt/1.3 "Calibri Light", Calibri, Carlito, "Segoe UI", sans-serif; letter-spacing: 0; color: var(--doc-head); }
.doc-page .article-body h3 { margin: 1.2em 0 .3em; font: 400 13pt/1.3 "Calibri Light", Calibri, Carlito, "Segoe UI", sans-serif; letter-spacing: 0; color: var(--doc-head); }
.doc-page .article-body :is(h4, h5, h6) { margin: 1em 0 .25em; font: 700 11.5pt/1.3 Calibri, Carlito, "Segoe UI", sans-serif; color: var(--doc-head-2); }
.doc-page .article-body p { margin: 0 0 8pt; }
.doc-page .article-body :is(ul, ol) { margin: 0 0 8pt; padding-left: 2.2em; }
.doc-page .article-body li { margin-bottom: 2pt; }
.doc-page .article-body blockquote { margin: 0 0 8pt; padding: .2em 0 .2em 1em; border-left: 3px solid var(--doc-head); font-style: italic; }
.doc-page .article-body table { width: 100%; border-collapse: collapse; margin: 6pt 0 10pt; }
.doc-page .article-body :is(td, th) { padding: 3pt 6pt; border: 1px solid var(--doc-rule); vertical-align: top; }
@media (max-width: 767.98px) { .lesson-body.is-doc { padding: 1rem .75rem 2rem; } .doc-page { padding: 2rem 1.5rem 2.5rem; min-height: 0; } .lesson-body .doc-page .doc-title { font-size: 20pt; } }

/* ---------- Coding lessons: a VS Code style IDE (Dark+ colours) ---------- */
.lab { display: grid; gap: 1.25rem; }
.ide-score { text-align: center; line-height: 1.1; }
.ide-score b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--lagoon); }
.ide-score span { font-size: .72rem; font-weight: 600; color: var(--muted); }
.lesson-body.is-ide { padding: 0; background: #1e1e1e; display: flex; }
.lesson-body.is-ide > * { max-width: none; margin: 0; }
.vsc {
  --vsc-bg: #1e1e1e; --vsc-side: #252526; --vsc-activity: #333333; --vsc-title: #3c3c3c; --vsc-tab: #2d2d2d;
  --vsc-line: #3c3c3c; --vsc-text: #cccccc; --vsc-muted: #8b8b8b; --vsc-hover: #2a2d2e; --vsc-select: #37373d;
  --vsc-accent: #005a9c; --vsc-focus: #3794ff;
  flex: 1; display: flex; flex-direction: column; width: 100%; min-height: 34rem; height: calc(100vh - 4rem - 3.75rem - 4.75rem);
  background: var(--vsc-bg); color: var(--vsc-text); font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
.vsc button { font: inherit; }
.vsc-titlebar { display: flex; align-items: center; gap: .75rem; height: 2.4rem; padding: 0 .6rem; background: var(--vsc-title); border-bottom: 1px solid #2b2b2b; flex: none; }
.vsc-dots { display: flex; gap: .4rem; }
.vsc-dots span { width: .7rem; height: .7rem; border-radius: 50%; background: #5a5a5a; }
.vsc-title { flex: 1; text-align: center; color: var(--vsc-text); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vsc-actions { display: flex; gap: .35rem; }
.vsc-btn { display: inline-flex; align-items: center; gap: .35rem; height: 1.6rem; padding: 0 .65rem; border: 1px solid transparent; border-radius: .25rem; background: transparent; color: var(--vsc-text); font-size: 12px; white-space: nowrap; }
.vsc-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }
.vsc-btn[aria-pressed="true"] { background: rgba(255, 255, 255, .12); color: #fff; }
.vsc-btn.is-run { color: #89d185; }
.vsc-btn.is-submit { background: var(--vsc-accent); color: #fff; }
.vsc-btn.is-submit:hover:not(:disabled) { background: #00416a; }
.vsc-btn:disabled { opacity: .45; }
.vsc-btn:focus-visible, .vsc-icon:focus-visible, .vsc-file:focus-visible, .vsc-tab:focus-visible, .vsc-activity button:focus-visible { outline: 1px solid var(--vsc-focus); outline-offset: -1px; }
.vsc-body { flex: 1; min-height: 0; display: flex; }
.vsc-activity { flex: none; width: 3rem; display: flex; flex-direction: column; align-items: center; padding-top: .25rem; background: var(--vsc-activity); }
.vsc-activity button { position: relative; width: 3rem; height: 3rem; border: 0; background: none; color: #858585; font-size: 1.25rem; }
.vsc-activity button:hover, .vsc-activity button.active { color: #fff; }
.vsc-activity button.active::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #fff; }
.vsc-explorer, .vsc-guides { flex: none; display: flex; flex-direction: column; background: var(--vsc-side); min-height: 0; }
.vsc-explorer { width: 14rem; border-right: 1px solid #2b2b2b; }
.vsc-explorer[hidden], .vsc-guides[hidden] { display: none; }
.vsc-explorer-head { display: flex; align-items: center; justify-content: space-between; height: 2.2rem; padding: 0 .5rem 0 1.25rem; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #bbbbbb; flex: none; }
.vsc-icon { position: relative; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border: 0; border-radius: .25rem; background: none; color: #c5c5c5; font-size: 12px; }
.vsc-icon:hover { background: rgba(255, 255, 255, .1); }
.vsc-plus { position: absolute; right: 1px; bottom: 2px; font-size: 7px; }
.vsc-section { display: flex; align-items: center; gap: .35rem; padding: .2rem .5rem; font-size: 11px; font-weight: 700; color: var(--vsc-text); }
.vsc-section i { font-size: 9px; }
.vsc-files { flex: 1; overflow-y: auto; padding-bottom: .5rem; }
.vsc-file { display: flex; align-items: center; gap: .45rem; height: 1.45rem; padding-right: .4rem; color: var(--vsc-text); cursor: pointer; white-space: nowrap; }
.vsc-file:hover { background: var(--vsc-hover); }
.vsc-file.active { background: var(--vsc-select); color: #fff; }
.vsc-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.vsc-file-delete { visibility: hidden; width: 1.25rem; height: 1.25rem; }
.vsc-file:hover .vsc-file-delete, .vsc-file:focus-within .vsc-file-delete { visibility: visible; }
.vsc-dirty { color: var(--vsc-text); font-size: 10px; }
.vsc-file-icon { width: 1rem; text-align: center; font-size: 12px; color: #8b8b8b; }
.vsc-ext-py { color: #4b8bbe; }
.vsc-ext-js { color: #cbcb41; }
.vsc-ext-java { color: #cc3e44; }
.vsc-ext-c, .vsc-ext-cpp, .vsc-ext-h { color: #519aba; }
.vsc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vsc-tabs { display: flex; flex: none; height: 2.3rem; background: #252526; overflow-x: auto; scrollbar-width: none; }
.vsc-tab { display: flex; align-items: center; gap: .45rem; padding: 0 .4rem 0 .85rem; min-width: 7rem; border-right: 1px solid #252526; background: var(--vsc-tab); color: #969696; cursor: pointer; white-space: nowrap; }
.vsc-tab.active { background: var(--vsc-bg); color: #fff; box-shadow: inset 0 1px 0 var(--vsc-accent); }
.vsc-tab-close { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-left: auto; border: 0; border-radius: .25rem; background: none; color: inherit; font-size: 11px; visibility: hidden; }
.vsc-tab.active .vsc-tab-close, .vsc-tab:hover .vsc-tab-close, .vsc-tab-close.is-dirty { visibility: visible; }
.vsc-tab-close.is-dirty i::before { content: "\f111"; font-size: 8px; }
.vsc-tab-close:hover { background: rgba(255, 255, 255, .1); }
.vsc-tab-close.is-dirty:hover i::before { content: "\f00d"; font-size: 11px; }
.vsc-crumbs { display: flex; align-items: center; gap: .35rem; height: 1.45rem; padding: 0 1rem; flex: none; color: #a9a9a9; font-size: 12px; background: var(--vsc-bg); }
.vsc-crumbs i { font-size: 8px; color: #6b6b6b; }
.vsc-crumbs .is-file { color: var(--vsc-text); }
.vsc-editor { flex: 1; min-height: 0; position: relative; }
.vsc-loading { padding: 1.25rem; color: var(--vsc-muted); }
.vsc-error { color: #f48771; }
.vsc-muted { color: var(--vsc-muted); font-size: 12px; margin: 0 0 .5rem; }
/* CodeMirror, Dark+ */
.vsc .CodeMirror { height: 100%; background: #1e1e1e; color: #d4d4d4; font: 14px/1.5 Menlo, Monaco, Consolas, "Courier New", monospace; }
.vsc .CodeMirror-gutters { background: #1e1e1e; border-right: 0; }
.vsc .CodeMirror-linenumber { color: #858585; padding: 0 1.25rem 0 .5rem; }
.vsc .CodeMirror-activeline-background { background: #2a2d2e; }
.vsc .CodeMirror-activeline .CodeMirror-linenumber { color: #c6c6c6; }
.vsc .CodeMirror-cursor { border-left: 2px solid #aeafad; }
.vsc .CodeMirror-selected, .vsc .CodeMirror-focused .CodeMirror-selected { background: #264f78; }
.vsc .CodeMirror-matchingbracket { color: inherit !important; outline: 1px solid #888; }
.vsc .cm-keyword { color: #569cd6; }
.vsc .cm-def { color: #dcdcaa; }
.vsc .cm-variable { color: #9cdcfe; }
.vsc .cm-variable-2 { color: #9cdcfe; }
.vsc .cm-variable-3, .vsc .cm-type { color: #4ec9b0; }
.vsc .cm-builtin { color: #dcdcaa; }
.vsc .cm-property { color: #9cdcfe; }
.vsc .cm-operator { color: #d4d4d4; }
.vsc .cm-string, .vsc .cm-string-2 { color: #ce9178; }
.vsc .cm-number { color: #b5cea8; }
.vsc .cm-atom { color: #569cd6; }
.vsc .cm-comment { color: #6a9955; font-style: normal; }
.vsc .cm-meta { color: #c586c0; }
.vsc .cm-bracket { color: #ffd700; }
/* the panel */
.vsc-panel { flex: none; height: 15rem; display: flex; flex-direction: column; border-top: 1px solid var(--vsc-line); background: var(--vsc-bg); }
.vsc-panel-tabs { display: flex; align-items: center; gap: 1.25rem; height: 2.2rem; padding: 0 1.25rem; flex: none; }
.vsc-panel-tabs button { height: 100%; padding: 0; border: 0; border-bottom: 1px solid transparent; background: none; color: #969696; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.vsc-panel-tabs button:hover { color: var(--vsc-text); }
.vsc-panel-tabs button.active { color: #e7e7e7; border-bottom-color: #e7e7e7; }
.vsc-verdict { margin-left: auto; font-size: 12px; color: var(--vsc-muted); }
.vsc-verdict.is-pass { color: #89d185; }
.vsc-verdict.is-fail { color: #f48771; }
.vsc-panel-body { flex: 1; overflow-y: auto; padding: .5rem 1.25rem 1rem; }
.vsc-test { border-bottom: 1px solid #2b2b2b; }
.vsc-test summary { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; cursor: pointer; list-style: none; }
.vsc-test summary::-webkit-details-marker { display: none; }
.vsc-test.is-pass summary > i { color: #89d185; }
.vsc-test.is-fail summary > i { color: #f48771; }
.vsc-test-name { flex: 1; color: var(--vsc-text); }
.vsc-test .vsc-muted { margin: 0; }
.vsc-test-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: .6rem; padding: 0 0 .75rem 1.6rem; }
.vsc-io-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--vsc-muted); margin-bottom: .2rem; }
.vsc-out { margin: 0; padding: .45rem .6rem; max-height: 9rem; overflow: auto; border-radius: .25rem; background: #181818; color: #d4d4d4; font: 12.5px/1.45 Menlo, Monaco, Consolas, monospace; white-space: pre-wrap; word-break: break-word; }
/* IDE terminal: VS Code-style panel along the bottom (not a full Ubuntu/MobaXterm chrome). */
.vsc-panel-body.vsc-terminal-pane { padding: 0; display: flex; min-height: 0; }
.vsc.panel-max .vsc-tabs, .vsc.panel-max .vsc-crumbs, .vsc.panel-max .vsc-editor { display: none; }
.vsc.panel-max .vsc-panel { flex: 1; height: auto; }
.vsc-panel-max { margin-left: .25rem; }
.vsc-term { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #1e1e1e; color: #cccccc; font: 12.5px/1.45 Menlo, Monaco, Consolas, "Courier New", monospace; }
.vsc-term-bar { display: flex; align-items: center; gap: .35rem; flex: none; padding: .2rem .5rem; background: #252526; border-bottom: 1px solid #2b2b2b; }
.vsc-term-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .45rem; border: 0; border-radius: .2rem; background: transparent; color: #cccccc; font-size: 11px; font-weight: 600; }
.vsc-term-btn:hover { background: #2a2d2e; color: #fff; }
.vsc-term-title { font-size: 11px; color: #858585; display: inline-flex; align-items: center; gap: .35rem; }
.vsc-term-screen { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem .75rem .75rem; }
.vsc-term-motd { margin: 0 0 .5rem; color: #858585; font: inherit; white-space: pre-wrap; }
.vsc-term-line { white-space: pre-wrap; word-break: break-word; }
.vsc-term-cwd { color: #569cd6; }
.vsc-term-prompt { margin-top: .35rem; color: #cccccc; }
.vsc-term-out, .vsc-term-echo { margin: 0; font: inherit; color: #d4d4d4; white-space: pre-wrap; word-break: break-word; }
.vsc-term-err { margin: 0; font: inherit; color: #f48771; white-space: pre-wrap; word-break: break-word; }
.vsc-term-dim { margin: 0; font: inherit; color: #858585; white-space: pre-wrap; }
.vsc-term-stdin { display: block; width: 100%; margin: .25rem 0 0; padding: .35rem .45rem; border: 1px solid #3c3c3c; border-radius: .2rem; background: #181818; color: #d4d4d4; font: inherit; resize: vertical; outline: none; }
.vsc-term-stdin:focus { border-color: var(--lagoon); }
.vsc-term-stdin::placeholder { color: #6a6a6a; }
.mxt { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: #f0f0f0; color: #1f1f1f; font: 12px/1.3 "Segoe UI", system-ui, sans-serif; }
.mxt-toolbar { display: flex; align-items: stretch; gap: .15rem; padding: .25rem .4rem; flex: none; background: linear-gradient(#fbfbfb, #e6e6e6); border-bottom: 1px solid #c8c8c8; }
.mxt-tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; min-width: 3.6rem; padding: .25rem .45rem; border: 1px solid transparent; border-radius: .2rem; background: none; color: #1f1f1f; font-size: 11px; }
.mxt-tool i { font-size: 1.05rem; color: var(--lagoon); }
.mxt-tool:hover:not(:disabled) { background: #dcebf7; border-color: #a9cbe8; }
.mxt-tool[aria-pressed="true"] { background: #cfe3f3; border-color: #94bde0; }
.mxt-tool:disabled { opacity: .45; }
.mxt-sep { width: 1px; margin: .2rem .3rem; background: #c8c8c8; }
.mxt-brand { margin-left: auto; align-self: center; height: 1.6rem; width: auto; opacity: .9; }
.mxt-body { flex: 1; min-height: 0; display: flex; }
.mxt-rail { flex: none; width: 1.6rem; display: flex; align-items: flex-start; justify-content: center; padding-top: .5rem; background: #e3e3e3; border-right: 1px solid #c8c8c8; }
.mxt-rail span { writing-mode: vertical-rl; transform: rotate(180deg); padding: .6rem .15rem; border-radius: .2rem; background: #fff; border: 1px solid #c8c8c8; font-size: 11px; font-weight: 600; color: var(--navy); }
.mxt-side { flex: none; width: 19rem; max-width: 40%; display: flex; flex-direction: column; background: #fff; border-right: 1px solid #c8c8c8; }
.mxt-side[hidden] { display: none; }
.mxt-side-head { display: flex; align-items: center; gap: .45rem; padding: .45rem .75rem; flex: none; background: linear-gradient(#f7f7f7, #e9e9e9); border-bottom: 1px solid #d6d6d6; font-weight: 700; color: var(--navy); }
.mxt-side-body { flex: 1; overflow-y: auto; padding: .75rem 1rem 1rem; font-size: 13px; line-height: 1.6; color: #1f1f1f; }
.mxt-side-body h2 { font-size: 1rem; margin: 0 0 .75rem; color: var(--navy); }
.mxt-side-body h3, .mxt-side-body h4 { font-size: .9rem; margin: 1rem 0 .4rem; color: var(--navy); }
.mxt-side-body ul { padding-left: 1.1rem; margin-bottom: .6rem; }
.mxt-side-body code { background: #f1f3f5; padding: .05rem .3rem; border-radius: .2rem; }
.mxt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mxt-tabs { display: flex; align-items: flex-end; gap: .2rem; padding: .3rem .4rem 0; flex: none; background: #dcdcdc; border-bottom: 1px solid #b9b9b9; }
.mxt-tab { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .8rem; border: 1px solid #b9b9b9; border-bottom: 0; border-radius: .3rem .3rem 0 0; background: #ececec; font-size: 11.5px; white-space: nowrap; }
.mxt-tab.is-active { background: #300a24; color: #fff; border-color: #300a24; }
.mxt-tab img { height: .9rem; width: auto; }
.mxt-main .ubt-screen { flex: 1; }
.vsc-panel-body.vsc-terminal-pane[hidden] { display: none; }
.ubt-screen { flex: 1; min-height: 0; overflow-y: auto; padding: .55rem .75rem .75rem; background: #300a24; color: #ffffff; font: 13.5px/1.45 "Ubuntu Mono", "DejaVu Sans Mono", Menlo, monospace; cursor: text; }
.ubt-screen pre { margin: 0; font: inherit; white-space: pre-wrap; word-break: break-word; color: inherit; }
.ubt-motd { color: #d8d8d8; margin-bottom: .5rem !important; }
.ubt-line { white-space: pre-wrap; word-break: break-word; }
.ubt-user { color: #8ae234; font-weight: 700; }
.ubt-path { color: #729fcf; font-weight: 700; }
.ubt-dim, .ubt-screen .ubt-dim { color: #a59aa2; }
.ubt-echo { color: #d8d8d8; }
.ubt-out { color: #ffffff; }
.ubt-err { color: #ef2929; }
.ubt-input { display: block; width: 100%; margin: .1rem 0; padding: 0 0 0 .1rem; border: 0; background: transparent; color: #ffffff; font: inherit; caret-color: #ffffff; resize: none; outline: none; field-sizing: content; min-height: 1.45em; }
.ubt-input::placeholder { color: #8c7a87; }

/* the guides pane */
.vsc-guides { width: 22rem; border-left: 1px solid #2b2b2b; }
.vsc-guides-body { flex: 1; overflow-y: auto; padding: .25rem 1.25rem 1.5rem; font-size: 13.5px; line-height: 1.65; color: var(--vsc-text); }
.vsc-guides-body h2 { font-size: 1.1rem; color: #fff; margin: .5rem 0 1rem; }
.vsc-guides-body h3, .vsc-guides-body h4 { font-size: .95rem; color: #fff; margin: 1.25rem 0 .5rem; }
.vsc-guides-body ul { padding-left: 1.1rem; }
.vsc-guides-body code { background: #2d2d2d; color: #ce9178; padding: .05rem .3rem; border-radius: .2rem; }
.vsc-guides-body a { color: #3794ff; }
/* the status bar */
.vsc-status { display: flex; align-items: center; gap: .25rem; height: 1.45rem; padding: 0 .5rem; flex: none; background: var(--vsc-accent); color: #fff; font-size: 12px; overflow: hidden; white-space: nowrap; }
.vsc-status-item { display: inline-flex; align-items: center; gap: .3rem; padding: 0 .45rem; }
.vsc-status-item[hidden] { display: none; }
@media (max-width: 991.98px) {
  .vsc { height: auto; min-height: 0; }
  .vsc-body { flex-direction: column; }
  .vsc-activity, .vsc-crumbs { display: none; }
  .vsc-explorer, .vsc-guides { width: 100%; max-height: 12rem; border: 0; border-bottom: 1px solid #2b2b2b; }
  .vsc-editor { height: 24rem; flex: none; }
  .vsc-status-item[data-ide-cursor], .vsc-status-item:first-child { display: none; }
}

/* ---------- Excel and Word exercises: the apps' look, in the lesson page ---------- */
.lesson-body.is-ide.is-office { background: #f3f2f1; }
.studio-office { overflow: hidden; }
.studio-office .ofc { height: 78vh; min-height: 36rem; }
.ofc { --ofc-accent: #217346; --ofc-accent-dark: #185c37; --ofc-soft: #e9f2ec;
  flex: 1; display: flex; flex-direction: column; width: 100%; min-height: 34rem; height: calc(100vh - 4rem - 3.75rem - 4.75rem);
  background: #f3f2f1; color: #201f1e; font: 13px/1.35 "Segoe UI", -apple-system, system-ui, sans-serif; }
.ofc.is-word { --ofc-accent: #2b579a; --ofc-accent-dark: #1e3f73; --ofc-soft: #e8eef7; }
.ofc button { font: inherit; }
.ofc-titlebar { display: flex; align-items: center; gap: .8rem; height: 2.5rem; padding: 0 .75rem; flex: none; background: var(--ofc-accent); color: #fff; }
.ofc-app { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: .2rem; background: #fff; color: var(--ofc-accent); font-weight: 800; font-size: 13px; }
.ofc-autosave { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; opacity: .95; }
.ofc-switch { position: relative; width: 1.9rem; height: 1rem; border-radius: 1rem; border: 1px solid rgba(255, 255, 255, .8); }
.ofc-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: .6rem; height: .6rem; border-radius: 50%; background: #fff; }
.ofc-file { flex: 1; text-align: center; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofc-saved { opacity: .85; font-weight: 400; }
.ofc-title-actions { display: flex; align-items: center; gap: .4rem; }
.ofc-tbtn { display: inline-flex; align-items: center; gap: .35rem; height: 1.75rem; padding: 0 .7rem; border: 0; border-radius: .25rem; background: transparent; color: #fff; font-size: 12px; }
.ofc-tbtn:hover, .ofc-tbtn[aria-pressed="true"] { background: rgba(255, 255, 255, .18); }
.ofc-check { display: inline-flex; align-items: center; gap: .4rem; height: 1.85rem; padding: 0 .85rem; border: 0; border-radius: .25rem; background: #fff; color: var(--ofc-accent-dark); font-size: 12px; font-weight: 600; }
.ofc-check:hover:not(:disabled) { background: #f0f0f0; }
.ofc-check:disabled { opacity: .7; }
.ofc-user { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--lagoon); color: #fff; font-size: 11px; font-weight: 700; border: 2px solid rgba(255, 255, 255, .6); }
.ofc-menu { display: flex; align-items: flex-end; gap: .1rem; height: 2.1rem; padding: 0 .5rem; flex: none; background: #f3f2f1; }
.ofc-menu > * { padding: .4rem .75rem; border: 0; background: none; color: #201f1e; font-size: 12.5px; border-bottom: 2px solid transparent; }
.ofc-menu-file { color: var(--ofc-accent); font-weight: 600; }
.ofc-menu-dim { color: #8a8886; }
.ofc-menu button:hover { background: #e1dfdd; }
.ofc-menu button.active { color: var(--ofc-accent); font-weight: 600; border-bottom-color: var(--ofc-accent); }
.ofc-ribbon { display: flex; align-items: stretch; gap: 0; min-height: 5.6rem; padding: .35rem .5rem; flex: none; background: #fff; border-top: 1px solid #e1dfdd; border-bottom: 1px solid #d2d0ce; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); overflow-x: auto; }
.ofc-ribbon[hidden] { display: none; }
.ofc-group { display: flex; flex-direction: column; justify-content: space-between; padding: 0 .65rem; border-right: 1px solid #e1dfdd; }
.ofc-row { display: flex; align-items: center; gap: .15rem; flex: 1; }
.ofc-col { display: flex; flex-direction: column; gap: .1rem; }
.ofc-group-name { text-align: center; font-size: 11px; color: #605e5c; padding-top: .2rem; white-space: nowrap; }
.ofc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-width: 1.9rem; height: 1.75rem; padding: 0 .35rem; border: 1px solid transparent; border-radius: .2rem; background: none; color: #201f1e; font-size: 13px; }
.ofc-btn:hover { background: #f3f2f1; border-color: #e1dfdd; }
.ofc-btn.is-on { background: #e1dfdd; border-color: #c8c6c4; }
.ofc-btn.is-big { flex-direction: column; height: 3.6rem; min-width: 3.4rem; font-size: 11.5px; gap: .2rem; }
.ofc-btn.is-big > i, .ofc-btn.is-big > .ofc-sigma { font-size: 1.35rem; color: var(--ofc-accent); }
.ofc-btn.is-wide { justify-content: flex-start; font-size: 12px; min-width: 4.5rem; }
.ofc-btn.is-fn { font: 600 11.5px/1 Consolas, Menlo, monospace; padding: 0 .55rem; height: 2.2rem; }
.ofc-sigma { font-weight: 700; line-height: 1; }
.ofc-select { height: 1.75rem; padding: 0 1.6rem 0 .45rem; border: 1px solid #c8c6c4; border-radius: .2rem; background: #fff; font-size: 12px; }
.ofc-fill { position: relative; display: inline-grid; place-items: center; width: 1.9rem; height: 1.75rem; border-radius: .2rem; color: #201f1e; cursor: pointer; }
.ofc-fill:hover { background: #f3f2f1; }
.ofc-fill select { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ofc-hint { align-self: center; padding: 0 1rem; font-size: 12px; color: #605e5c; max-width: 26rem; }
.ofc-body { flex: 1; min-height: 0; display: flex; background: #fff; }
.ofc-side { flex: none; width: 21rem; display: flex; flex-direction: column; background: #faf9f8; border-left: 1px solid #e1dfdd; }
.ofc-side[hidden] { display: none; }
.ofc-side-head { display: flex; align-items: center; justify-content: space-between; height: 2.6rem; padding: 0 .5rem 0 1rem; flex: none; font-weight: 600; color: var(--ofc-accent-dark); border-bottom: 1px solid #edebe9; }
.ofc-side-head i { margin-right: .35rem; }
.ofc-x { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border: 0; border-radius: .2rem; background: none; color: #605e5c; }
.ofc-x:hover { background: #edebe9; }
.ofc-side-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 1.5rem; font-size: 13px; line-height: 1.6; }
.ofc-guides h2 { font-size: 1rem; margin: 0 0 .8rem; color: #201f1e; }
.ofc-guides h3, .ofc-guides h4 { font-size: .9rem; margin: 1.1rem 0 .4rem; color: var(--ofc-accent-dark); }
.ofc-guides ul { padding-left: 1.1rem; }
.ofc-score { margin-bottom: .9rem; padding: .6rem .8rem; border-radius: .3rem; background: #f3f2f1; font-weight: 600; font-size: 12.5px; }
.ofc-score.is-pass { background: var(--ofc-soft); color: var(--ofc-accent-dark); }
.ofc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.ofc-check-row { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .65rem; border: 1px solid #edebe9; border-radius: .3rem; background: #fff; }
.ofc-check-row > i { margin-top: .15rem; color: #a19f9d; }
.ofc-check-row.is-pass > i { color: var(--ofc-accent); }
.ofc-check-row.is-fail > i { color: var(--danger); }
.ofc-check-row > div { flex: 1; min-width: 0; }
.ofc-check-name { font-weight: 600; }
.ofc-check-desc { font-size: 12px; color: #605e5c; }
.ofc-check-pts { font-size: 11px; color: #8a8886; white-space: nowrap; }
.ofc-status { display: flex; align-items: center; gap: 1.5rem; height: 1.6rem; padding: 0 .9rem; flex: none; background: #f3f2f1; border-top: 1px solid #e1dfdd; color: #605e5c; font-size: 11.5px; white-space: pre; }
.ofc-status-stats { margin-left: auto; color: #201f1e; }
.ofc-status-best { color: var(--ofc-accent-dark); font-weight: 600; }
.ofc-zoom { display: inline-flex; align-items: center; gap: .45rem; }
.ofc-zoom-bar { position: relative; width: 5rem; height: 2px; background: #a19f9d; }
.ofc-zoom-bar span { position: absolute; left: 50%; top: -4px; width: 3px; height: 10px; background: #605e5c; }
/* Excel */
.xl-formula { display: flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .4rem; flex: none; background: #fff; border-bottom: 1px solid #d2d0ce; }
.xl-name { width: 6.5rem; height: 1.55rem; padding: 0 .4rem; border: 1px solid #c8c6c4; font-size: 12.5px; }
.xl-fx-icons { display: flex; align-items: center; gap: .7rem; padding: 0 .6rem; color: #8a8886; border-left: 1px solid #e1dfdd; border-right: 1px solid #e1dfdd; height: 100%; }
.xl-fx { font-family: Georgia, serif; font-style: italic; color: #201f1e; }
.xl-fx-input { flex: 1; height: 1.55rem; padding: 0 .4rem; border: 0; font: 13px/1 Calibri, "Segoe UI", sans-serif; outline: none; }
.xl-wrap { position: relative; flex: 1; min-width: 0; overflow: auto; outline: none; background: #fff; }
.xl-grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; font: 13px/1 Calibri, Carlito, "Segoe UI", sans-serif; user-select: none; }
.xl-grid th { position: sticky; z-index: 2; background: #f3f2f1; color: #444; font-weight: 400; font-size: 12px; text-align: center; border-right: 1px solid #d4d4d4; border-bottom: 1px solid #d4d4d4; }
.xl-grid thead th { top: 0; height: 22px; }
.xl-grid tbody th { left: 0; z-index: 1; height: 22px; width: 46px; }
.xl-grid th.xl-corner { left: 0; z-index: 3; cursor: pointer; }
.xl-grid th.is-hl { background: #d3e7da; color: var(--ofc-accent-dark); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ofc-accent); }
.xl-grid tbody th.is-hl { box-shadow: inset -2px 0 0 var(--ofc-accent); }
.xl-colhead { position: relative; }
.xl-resize { position: absolute; top: 0; right: -3px; width: 6px; height: 100%; cursor: col-resize; z-index: 4; }
.xl-grid td { height: 22px; padding: 0 4px; border-right: 1px solid #e1e1e1; border-bottom: 1px solid #e1e1e1; white-space: nowrap; overflow: hidden; text-overflow: clip; cursor: cell; color: #000; }
.xl-grid td.is-num { text-align: right; }
.xl-grid td.is-left { text-align: left; }
.xl-grid td.is-center { text-align: center; }
.xl-grid td.is-right { text-align: right; }
.xl-grid td.is-b { font-weight: 700; }
.xl-grid td.is-i { font-style: italic; }
.xl-grid td.is-err { color: #c00000; }
.xl-selbox { position: absolute; z-index: 5; pointer-events: none; border: 2px solid var(--ofc-accent); margin: -1px 0 0 -1px; }
.xl-selbox.is-range { background: rgba(33, 115, 70, .1); }
.xl-selbox.is-range::after { content: ""; position: absolute; left: var(--ax); top: var(--ay); width: var(--aw); height: var(--ah); background: #fff; mix-blend-mode: normal; opacity: .55; }
.xl-handle { position: absolute; z-index: 6; width: 7px; height: 7px; background: var(--ofc-accent); border: 1px solid #fff; cursor: crosshair; }
.xl-fillbox { position: absolute; z-index: 6; pointer-events: none; border: 1px dashed #555; margin: -1px 0 0 -1px; }
.xl-editor { position: absolute; z-index: 7; padding: 0 4px; border: 2px solid var(--ofc-accent); margin: -1px 0 0 -1px; font: 13px/1 Calibri, Carlito, "Segoe UI", sans-serif; outline: none; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }
.xl-charts { position: absolute; inset: 0 auto auto 0; width: 0; height: 0; z-index: 8; }
.xl-chart { position: absolute; width: 28rem; height: 17rem; display: flex; flex-direction: column; padding: .4rem .6rem .6rem; background: #fff; border: 1px solid #c8c6c4; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.xl-chart-head { display: flex; align-items: center; justify-content: center; position: relative; padding: .2rem 1.6rem .4rem; font: 14px/1.2 Calibri, "Segoe UI", sans-serif; color: #595959; }
.xl-chart-x { position: absolute; right: 0; top: 0; width: 1.4rem; height: 1.4rem; border: 0; background: none; color: #8a8886; }
.xl-chart-x:hover { color: var(--danger); }
.xl-chart canvas { flex: 1; min-height: 0; }
.xl-sheets { display: flex; align-items: stretch; gap: .1rem; height: 1.9rem; padding: 0 .4rem; flex: none; background: #f3f2f1; border-top: 1px solid #d2d0ce; }
.xl-sheet-nav { display: flex; align-items: center; gap: .6rem; padding: 0 .6rem; color: #a19f9d; }
.xl-sheet { padding: 0 1.1rem; border: 0; border-bottom: 3px solid var(--ofc-accent); background: #fff; color: var(--ofc-accent-dark); font-weight: 600; font-size: 12.5px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.xl-sheet-add { display: grid; place-items: center; width: 1.9rem; color: #605e5c; }
/* Word */
.wd-styles { gap: .3rem; }
.wd-style { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; width: 5.4rem; height: 3.6rem; padding: .3rem .45rem; border: 1px solid #e1dfdd; border-radius: .2rem; background: #fff; text-align: left; overflow: hidden; }
.wd-style:hover { border-color: #c8c6c4; background: #faf9f8; }
.wd-style.is-on { border-color: var(--ofc-accent); box-shadow: inset 0 0 0 1px var(--ofc-accent); }
.wd-style small { font-size: 10.5px; color: #605e5c; }
.wd-s-normal { font: 12px Calibri, sans-serif; }
.wd-s-title { font: 20px/1 "Calibri Light", Calibri, sans-serif; }
.wd-s-h1 { font: 15px/1 "Calibri Light", Calibri, sans-serif; color: #2f5496; }
.wd-s-h2 { font: 13px/1 "Calibri Light", Calibri, sans-serif; color: #2f5496; }
.wd-s-h3 { font: 12px/1 Calibri, sans-serif; color: #1f3763; }
.wd-table-pick { position: relative; }
.wd-table-grid { position: absolute; top: 100%; left: 0; z-index: 20; padding: .5rem; background: #fff; border: 1px solid #c8c6c4; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.wd-table-grid[hidden] { display: none; }
.wd-table-label { margin-bottom: .4rem; font-size: 12px; color: #201f1e; }
.wd-table-cells { display: grid; grid-template-columns: repeat(10, 1rem); gap: 3px; }
.wd-table-cells button { width: 1rem; height: 1rem; padding: 0; border: 1px solid #c8c6c4; background: #fff; }
.wd-table-cells button.is-on { border-color: var(--ofc-accent); background: #fdecd4; }
.wd-ruler { height: 1.4rem; flex: none; background: #f3f2f1; border-bottom: 1px solid #e1dfdd; display: flex; justify-content: center; }
.wd-ruler-page { width: 794px; max-width: 100%; height: 100%; background: repeating-linear-gradient(90deg, #a19f9d 0 1px, transparent 1px 37.8px) bottom / 100% 6px no-repeat, #fff; border-left: 96px solid #e6e6e6; border-right: 96px solid #e6e6e6; box-sizing: border-box; }
.wd-canvas { flex: 1; min-width: 0; overflow: auto; padding: 1.5rem 1rem 3rem; background: #e6e6e6; }
.wd-page { width: 794px; max-width: 100%; min-height: 1123px; margin: 0 auto; padding: 96px; box-sizing: border-box; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  background-image: repeating-linear-gradient(180deg, transparent 0 1121px, #e6e6e6 1121px 1135px); outline: none;
  font: 11pt/1.5 Calibri, Carlito, "Segoe UI", sans-serif; color: #000; }
.wd-page p { margin: 0 0 8pt; }
.wd-page p.title { font: 28pt/1.1 "Calibri Light", Calibri, sans-serif; letter-spacing: -.5px; margin-bottom: 10pt; }
.wd-page h1 { font: 16pt/1.3 "Calibri Light", Calibri, sans-serif; color: #2f5496; margin: 12pt 0 4pt; }
.wd-page h2 { font: 13pt/1.3 "Calibri Light", Calibri, sans-serif; color: #2f5496; margin: 10pt 0 3pt; }
.wd-page h3 { font: 12pt/1.3 Calibri, sans-serif; color: #1f3763; margin: 8pt 0 2pt; }
.wd-page ul, .wd-page ol { margin: 0 0 8pt; padding-left: 2.2em; }
.wd-page table { width: 100%; border-collapse: collapse; margin: 6pt 0 10pt; }
.wd-page td, .wd-page th { border: 1px solid #000; padding: 3pt 6pt; vertical-align: top; min-width: 2rem; }
.wd-page hr { border: 0; border-top: 1px solid #000; margin: 10pt 0; }

/* ---------- Assessments: rubric builder, grading screen, gradebook ---------- */
.rubric-criterion { padding: .9rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.rubric-criterion-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.rubric-grip { cursor: grab; color: var(--muted); padding: 0 .2rem; }
.rubric-desc { margin-bottom: .6rem; }
.rubric-levels { display: grid; gap: .4rem; }
.rubric-level { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 2fr) 5rem auto; gap: .4rem; align-items: center; }
@media (max-width: 575.98px) { .rubric-level { grid-template-columns: 1fr 5rem auto; } .rubric-level .rubric-level-desc { grid-column: 1 / -1; order: 3; } }
.grade-text { max-width: none; font-size: 1rem; }
.grade-panel { position: sticky; top: 5rem; }
.rubric-score { padding: .75rem .9rem; border: 1px solid var(--line); border-radius: .75rem; }
.rubric-score legend { float: none; font-size: .95rem; }
.rubric-choices { display: grid; gap: .35rem; }
.rubric-choice { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: .5rem; cursor: pointer; font-size: .88rem; }
.rubric-choice:has(input:checked) { border-color: var(--lagoon); background: rgba(var(--lagoon-rgb), .07); }
.rubric-choice input { margin-top: .2rem; accent-color: var(--lagoon); }
.gradebook-card { overflow: hidden; }
.gradebook-scroll { overflow: auto; max-height: 75vh; }
.gradebook { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: .88rem; }
.gradebook th, .gradebook td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface); }
.gradebook thead th { position: sticky; top: 0; z-index: 2; padding: .6rem .5rem; vertical-align: bottom; background: var(--surface-2); font-weight: 600; text-align: center; }
.gradebook .gb-name { position: sticky; left: 0; z-index: 1; min-width: 15rem; max-width: 15rem; padding: .5rem .9rem; text-align: left; font-weight: 400; }
.gradebook thead .gb-name { z-index: 3; }
.gb-item { min-width: 7rem; max-width: 9rem; }
.gb-kind { display: block; color: var(--muted); font-size: .8rem; }
.gb-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .8rem; line-height: 1.25; }
.gb-max { display: block; font-size: .7rem; font-weight: 400; color: var(--muted); }
.gb-cell { padding: 0; text-align: center; }
.gb-edit { width: 100%; min-height: 2.75rem; border: 0; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; }
.gb-edit:hover { background: rgba(var(--lagoon-rgb), .07); }
.gb-edit:focus-visible { outline: 2px solid var(--lagoon); outline-offset: -2px; }
.gb-cell.is-entry .gb-edit { font-weight: 700; color: var(--lagoon); }
.gb-cell.is-excused .gb-edit { color: var(--muted); font-style: italic; }
.gb-cell.is-empty .gb-edit { color: var(--stone); }
.gradebook .gb-cat, .gradebook .gb-final { min-width: 6rem; padding: .5rem; text-align: center; font-variant-numeric: tabular-nums; }
.gradebook td.gb-final { background: var(--surface-2); }
.gradebook-legend { display: flex; gap: 1.25rem; padding: .6rem 1rem; border-top: 1px solid var(--line); }
.gb-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: .2rem; background: var(--ink); vertical-align: middle; margin-right: .25rem; }
.gb-swatch.is-entry { background: var(--lagoon); }
.gb-swatch.is-excused { background: var(--stone); }
.grade-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: .6rem; }
.grade-points { flex: none; font-variant-numeric: tabular-nums; }
.grade-result { padding: .75rem .9rem; border-radius: .6rem; background: var(--surface-2); }

/* ---------- Learner: progress, grades, attendance ---------- */
.split-pane { display: grid; grid-template-columns: minmax(15rem, 20rem) minmax(0, 1fr); gap: 1.25rem; align-items: stretch; flex: 1 1 auto; min-height: 0; }
.split-aside { display: flex; flex-direction: column; padding: 1rem; overflow: hidden; min-height: 0; }
.split-aside-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: .15rem .65rem .65rem; flex: none; }
.split-nav { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 auto; min-height: 0; overflow: auto; }
.split-link {
  display: flex; align-items: center; gap: .65rem; min-width: 0;
  padding: .75rem .85rem; border-radius: .65rem; color: var(--ink); font-weight: 600; font-size: .9rem;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.split-link:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.split-link.active, .split-link.active:hover { background: var(--lagoon); color: #fff; }
.split-meta { margin-left: auto; flex: none; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.split-link.active .split-meta { color: rgba(255, 255, 255, .85); }
.split-meta.is-high { color: var(--sage-ink); }
.split-meta.is-mid { color: var(--lagoon); }
.split-meta.is-low { color: var(--danger); }
.split-link.active .split-meta.is-high,
.split-link.active .split-meta.is-mid,
.split-link.active .split-meta.is-low { color: rgba(255, 255, 255, .9); }
.split-detail { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.split-detail.grades-course { height: 100%; }
.split-detail.grades-course .table-card { flex: 1 1 auto; overflow: auto; }
.split-detail.d-grid { height: 100%; align-content: start; }
.split-detail .att-summary { flex: none; }
.split-detail > .card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.split-detail > .card .att-list { flex: 1 1 auto; overflow: auto; }
@media (max-width: 991.98px) {
  .split-pane { grid-template-columns: 1fr; flex: none; }
  .split-aside { min-height: 0; }
  .split-nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; flex: none; gap: .35rem; padding-bottom: .15rem; }
  .split-link { flex: none; max-width: 14rem; }
  .split-detail.grades-course,
  .split-detail.d-grid,
  .split-detail > .card { height: auto; }
}
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--surface);
  border: 1px solid rgba(var(--night-rgb), .06);
  border-radius: var(--radius);
  overflow: hidden;
}
[data-bs-theme="dark"] .stat-strip { border-color: rgba(255, 255, 255, .06); }
.stat-cell { padding: 1.25rem 1.35rem; border-right: 1px solid rgba(var(--night-rgb), .06); }
.stat-cell:last-child { border-right: 0; }
[data-bs-theme="dark"] .stat-cell { border-right-color: rgba(255, 255, 255, .06); }
.stat-value { font-size: 1.85rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-unit { font-size: 1rem; font-weight: 700; color: var(--muted); margin-left: .1rem; }
.stat-label { font-size: .78rem; font-weight: 600; color: var(--muted); margin-top: .35rem; text-transform: uppercase; letter-spacing: .06em; }
.stat-hint { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
.progress-list { list-style: none; margin: 0; padding: 0; }
.progress-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.25rem; border-top: 1px solid rgba(var(--night-rgb), .06);
}
[data-bs-theme="dark"] .progress-item { border-top-color: rgba(255, 255, 255, .06); }
.progress-ring {
  --p: 0;
  flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--lagoon) calc(var(--p) * 1%), rgba(var(--night-rgb), .08) 0);
}
.progress-ring span {
  width: 2.45rem; height: 2.45rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); font-size: .72rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.progress-metrics { display: flex; gap: 1.25rem; flex: none; }
.progress-metrics .metric { text-align: center; min-width: 3.25rem; }
.metric-val { display: block; font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; }
.metric-lab { display: block; font-size: .68rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
@media (max-width: 991.98px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-cell:nth-child(2) { border-right: 0; }
  .stat-cell:nth-child(1), .stat-cell:nth-child(2) { border-bottom: 1px solid rgba(var(--night-rgb), .06); }
}
@media (max-width: 575.98px) {
  .progress-item { flex-wrap: wrap; }
  .progress-metrics { width: 100%; justify-content: space-between; padding-left: 4.25rem; }
}

.grades-course { overflow: hidden; }
.grades-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 1.35rem; border-bottom: 1px solid rgba(var(--night-rgb), .06);
}
[data-bs-theme="dark"] .grades-head { border-bottom-color: rgba(255, 255, 255, .06); }
.grades-cats { display: flex; flex-wrap: wrap; gap: .35rem .85rem; margin-top: .35rem; }
.grades-cat { font-size: .8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.grades-total { text-align: right; line-height: 1.1; min-width: 5.5rem; }
.grades-total b { display: block; font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.grades-total span { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.grades-total .grades-earned { display: block; margin-top: .25rem; font-size: .75rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--muted); }
.grades-total.is-high b, .grades-pts.is-high b { color: var(--sage-ink); }
.grades-total.is-mid b, .grades-pts.is-mid b { color: var(--lagoon); }
.grades-total.is-low b, .grades-pts.is-low b { color: var(--danger); }
.grades-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; border-bottom-width: 1px; }
.grades-table tbody td { padding-top: .85rem; padding-bottom: .85rem; vertical-align: middle; }
.grades-score { font-variant-numeric: tabular-nums; white-space: nowrap; }
.grades-pts b { font-size: 1rem; }

.att-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.35rem 1.5rem; background: var(--surface);
  border: 1px solid rgba(var(--night-rgb), .06); border-radius: var(--radius);
}
[data-bs-theme="dark"] .att-summary { border-color: rgba(255, 255, 255, .06); }
.att-rate { display: flex; align-items: center; gap: 1rem; }
.att-rate-label { font-weight: 700; font-size: 1rem; }
.att-ring {
  --p: 0;
  width: 4.25rem; height: 4.25rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: conic-gradient(var(--lagoon) calc(var(--p) * 1%), rgba(var(--night-rgb), .08) 0);
}
.att-ring.is-empty { background: rgba(var(--night-rgb), .08); }
.att-ring span {
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--surface);
  font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.att-counts { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; }
.att-count { text-align: center; min-width: 3.5rem; }
.att-count b { display: block; font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.att-count span { font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.att-count.is-present b { color: var(--sage-ink); }
.att-count.is-late b { color: var(--lagoon); }
.att-count.is-absent b { color: var(--danger); }
.att-list { list-style: none; margin: 0; padding: 0; }
.att-item {
  display: flex; align-items: center; gap: .85rem;
  padding: .95rem 1.25rem; border-top: 1px solid rgba(var(--night-rgb), .06);
}
.att-item:first-child { border-top: 0; }
[data-bs-theme="dark"] .att-item { border-top-color: rgba(255, 255, 255, .06); }
.att-status { width: .35rem; align-self: stretch; border-radius: .25rem; background: var(--stone); flex: none; }
.att-item.is-present .att-status { background: var(--sage); }
.att-item.is-late .att-status { background: var(--lagoon); }
.att-item.is-absent .att-status { background: var(--danger); }
.att-item.is-excused .att-status, .att-item.is-open .att-status { background: var(--stone); }
.att-meta { flex: none; }
.att-badge { flex: none; }
@media (max-width: 575.98px) {
  .att-item { flex-wrap: wrap; }
  .att-meta { width: 100%; padding-left: 1.2rem; }
}
.rubric-table th { min-width: 10rem; font-weight: 600; }
.rubric-table td { font-size: .85rem; }
.gb-popover { position: absolute; z-index: 1050; width: 16rem; box-shadow: var(--shadow-lg); }

/* ---------- Sessions: roll call, QR check-in, recordings, schedule form ---------- */
.rollcall td { vertical-align: middle; }
.status-pick { display: inline-flex; border: 1px solid var(--line); border-radius: .5rem; overflow: hidden; }
.status-btn { padding: .3rem .6rem; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .8rem; font-weight: 600; min-height: 2rem; }
.status-btn:last-child { border-right: 0; }
.status-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); }
.status-btn.is-on.is-present { background: var(--lagoon); color: #fff; }
.status-btn.is-on.is-late { background: var(--navy); color: #fff; }
.status-btn.is-on.is-absent { background: var(--danger); color: #fff; }
.status-btn.is-on.is-excused { background: var(--stone); color: var(--night); }
.recording video { width: 100%; border-radius: .6rem; background: #000; }
.recording-wait { padding: 1.5rem; border-radius: .6rem; background: var(--surface-2); color: var(--muted); text-align: center; }
.qr-screen { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; padding: 2rem; background: var(--surface); text-align: center; }
.qr-screen-head { display: flex; flex-direction: column; align-items: center; gap: .75rem; }
.qr-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--muted); }
.qr-brand img { height: 1.6rem; width: auto; }
.qr-session { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; color: var(--ink); }
.qr-session span { display: block; font-size: 1rem; font-weight: 500; color: var(--muted); }
.qr-box svg { width: min(70vh, 80vw); height: auto; }
.qr-help { font-size: 1.1rem; color: var(--muted); margin: 0; }
.qr-timer { width: min(70vh, 80vw); height: .4rem; border-radius: 1rem; background: var(--surface-3); overflow: hidden; }
.qr-timer span { display: block; height: 100%; background: var(--lagoon); transition: width .5s linear; }
.mode-pills label { cursor: pointer; text-align: center; }
.mode-pills label span { display: block; padding: .4rem .85rem; border-radius: .5625rem; color: var(--muted); font-weight: 600; font-size: .85rem; }
.mode-pills label:has(input:checked) span { background: var(--lagoon); color: #fff; }
.mode-pills label:has(input:focus-visible) span { outline: 2px solid var(--lagoon); outline-offset: 2px; }
.repeat-box { padding: .75rem; border: 1px solid var(--line); border-radius: .6rem; }
.repeat-box[hidden], [data-show-if][hidden] { display: none !important; }
.weekday-picks { display: flex; flex-wrap: wrap; gap: .3rem; }

.register-box { padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface-2); }
.guest-qr svg { width: 11rem; height: auto; }
.checkin-icon { font-size: 3.25rem; color: var(--lagoon); margin-bottom: .75rem; }
.checkin-icon.is-bad { color: var(--danger); }

/* ---------- Venues and maps ---------- */
.map-picker, .map-view { height: 16rem; border-radius: .75rem; border: 1px solid var(--line); z-index: 0; }
.map-view { height: 14rem; }
.facility-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.facility { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border: 1px solid var(--line); border-radius: 2rem; font-size: .85rem; cursor: pointer; }
.facility:has(input:checked) { border-color: var(--lagoon); background: rgba(var(--lagoon-rgb), .08); }
.venue-box { padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface-2); }
.venue-box[hidden] { display: none; }
.mode-choices { display: grid; gap: .5rem; }
.mode-choice { display: flex; gap: .65rem; align-items: flex-start; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: .6rem; cursor: pointer; }
.mode-choice:has(input:checked) { border-color: var(--lagoon); background: rgba(var(--lagoon-rgb), .06); }
.mode-choice input { margin-top: .25rem; accent-color: var(--lagoon); }
.mode-choice small { display: block; color: var(--muted); }

/* ---------- Studio editors: collapsible rows (starter files, tests, lab checks) ---------- */
.edit-row { border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.edit-row > summary { display: flex; align-items: center; gap: .65rem; padding: .8rem 1rem; cursor: pointer; list-style: none; font-weight: 600; }
.edit-row > summary::-webkit-details-marker { display: none; }
.edit-row > summary > i:first-child { color: var(--muted); width: 1.1rem; text-align: center; }
.edit-row-chevron { font-size: .75rem; color: var(--muted); transition: transform var(--dur) var(--ease); }
.edit-row[open] .edit-row-chevron { transform: rotate(180deg); }
.edit-row.is-new { border-style: dashed; }
.edit-row.is-new > summary { color: var(--lagoon); }
.edit-row-body { padding: 0 1rem 1rem; }
.code-input { font-size: .82rem; tab-size: 4; }
/* Coding test cases: LeetCode-style Case 1 / Case 2 tabs, and the "check with my solution" results. */
.case-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.case-tabs .nav-link { white-space: nowrap; font-size: .875rem; font-weight: 600; color: var(--muted); }
.case-tabs .nav-link.active { color: var(--ink); }
.solution-check { border: 1px solid var(--line); border-radius: .75rem; padding: .85rem 1rem; background: var(--surface-2); }
.solution-case { border-top: 1px solid var(--line); padding: .5rem 0; }
.solution-case > summary { cursor: pointer; }
.solution-out { background: var(--surface); border: 1px solid var(--line); border-radius: .5rem; padding: .5rem .65rem; max-height: 12rem; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* ---------- Live sessions ---------- */
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--line); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .4rem; padding: 1rem 1.25rem 1.5rem; }
.cal-weekday { padding: .25rem .4rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cal-day { display: flex; flex-direction: column; align-items: stretch; gap: .25rem; min-height: 6.25rem; padding: .45rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); color: var(--ink); text-align: left; min-width: 0; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cal-day:not(:disabled):hover { border-color: rgba(var(--lagoon-rgb), .45); box-shadow: var(--shadow-sm); }
.cal-day.is-out { background: transparent; border-style: dashed; color: var(--muted); opacity: .55; }
.cal-day.has-sessions { background: rgba(var(--lagoon-rgb), .04); }
.cal-day.is-selected { border-color: var(--lagoon); box-shadow: 0 0 0 1px var(--lagoon); background: rgba(var(--lagoon-rgb), .07); }
.cal-num { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; font-size: .85rem; font-weight: 700; }
.cal-day.is-today .cal-num { background: var(--lagoon); color: #fff; }
.cal-chips { display: grid; gap: .2rem; min-width: 0; }
.cal-chip { display: block; padding: .15rem .4rem; border-radius: .35rem; background: rgba(var(--lagoon-rgb), .12); color: var(--navy); font-size: .7rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-chip.is-live { background: var(--lagoon); color: #fff; }
.cal-chip.is-over { background: var(--surface-3); color: var(--muted); }
.cal-chip.is-cancelled { background: var(--surface-3); color: var(--muted); text-decoration: line-through; }
.cal-more { font-size: .68rem; font-weight: 600; color: var(--muted); padding-left: .2rem; }
.cal-dots { display: none; gap: .2rem; justify-content: center; }
.cal-dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--lagoon); }
.cal-dot.is-live { background: var(--navy); }
.cal-dot.is-cancelled { background: var(--stone); }
[data-bs-theme="dark"] .cal-chip { color: #b3cde1; }
@media (max-width: 767.98px) {
  .cal-grid { gap: .25rem; padding: .75rem; }
  .cal-day { min-height: 3.25rem; align-items: center; padding: .3rem .15rem; }
  .cal-chips { display: none; }
  .cal-dots { display: flex; }
  .cal-weekday { text-align: center; padding: .25rem 0; font-size: .62rem; }
}
.cal-side { position: sticky; top: 5rem; }
/* A session in the day card, Google Calendar style. */
.gcal-event { padding: 1rem 1rem .85rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--surface); }
.gcal-event.is-live { border-color: rgba(var(--lagoon-rgb), .45); box-shadow: 0 1px 3px rgba(var(--lagoon-rgb), .15); }
.gcal-event.is-over, .gcal-event.is-cancelled { opacity: .6; }
.gcal-event.is-cancelled .gcal-title { text-decoration: line-through; }
.gcal-head { display: flex; align-items: flex-start; gap: .9rem; }
.gcal-swatch { flex: none; width: .85rem; height: .85rem; margin-top: .3rem; border-radius: .2rem; background: var(--lagoon); }
.gcal-event.is-over .gcal-swatch, .gcal-event.is-cancelled .gcal-swatch { background: var(--stone); }
.gcal-title { margin: 0; font-size: 1.02rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.gcal-when { margin-top: .15rem; font-size: .82rem; color: var(--muted); }
.gcal-now { display: inline-flex; align-items: center; gap: .35rem; color: var(--lagoon); font-weight: 600; }
.gcal-icon { display: grid; place-items: center; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.gcal-icon:hover { background: var(--surface-3); color: var(--danger); }
.gcal-row { display: flex; align-items: flex-start; gap: .9rem; margin-top: .75rem; color: var(--ink); }
.gcal-row-icon { flex: none; width: .85rem; margin-top: .2rem; text-align: center; font-size: .85rem; color: var(--muted); }
.gcal-join { display: inline-flex; align-items: center; padding: .5rem 1.1rem; border-radius: .3rem; background: var(--lagoon); color: #fff; font-size: .85rem; font-weight: 600; }
.gcal-join:hover { background: var(--navy); color: #fff; text-decoration: none; }
.gcal-join.is-waiting { background: var(--surface-3); color: var(--muted); }
.gcal-link { margin-top: .3rem; font-size: .75rem; color: var(--muted); }
.cal-empty { display: grid; justify-items: center; gap: .5rem; padding: 1.5rem 1rem; border: 1px dashed var(--line); border-radius: .75rem; text-align: center; }
.cal-empty i { font-size: 1.5rem; color: var(--muted); }
@media (max-width: 1199.98px) { .cal-side { position: static; } }
.section-label { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 .75rem; }
.live-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; animation: lab-pulse 1.2s ease-in-out infinite; }
/* The classroom, Google Meet style: a green room with a camera preview, then a dark full-width call. */
.meet-title-bar { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.meet-title-bar h1 { font-weight: 600; }
.meet { border-radius: 1.5rem; overflow: hidden; }
.meet-lobby {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .85fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  min-height: min(72vh, 38rem);
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem);
  background: transparent;
  border: 0;
  border-radius: 1.5rem;
}
.meet-preview {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  border-radius: 1.5rem;
  overflow: hidden;
  background: #202124;
  box-shadow: 0 .5rem 1.75rem -0.5rem rgba(0, 0, 0, .35);
}
.meet-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.meet-preview-off { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: #e8eaed; background: radial-gradient(circle at center, #2d2e30 0%, #202124 70%); }
.meet-preview-off[hidden] { display: none; }
.meet-avatar { display: grid; place-items: center; width: 7.5rem; height: 7.5rem; border-radius: 50%; background: var(--lagoon); color: #fff; font-size: 3rem; font-weight: 500; letter-spacing: -.02em; box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .25); }
.meet-off-text { font-size: .95rem; color: #bdc1c6; font-weight: 500; }
.meet-name-chip {
  position: absolute;
  left: 1rem;
  bottom: 5.25rem;
  max-width: calc(100% - 2rem);
  padding: .35rem .75rem;
  border-radius: .5rem;
  background: rgba(32, 33, 36, .7);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: .88rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.meet-controls { position: absolute; left: 0; right: 0; bottom: 1.25rem; display: flex; justify-content: center; gap: 1.15rem; z-index: 2; }
.meet-round {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  background: rgba(60, 64, 67, .55);
  color: #fff;
  font-size: 1.2rem;
  backdrop-filter: blur(6px);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.meet-round:hover { background: rgba(95, 99, 104, .75); transform: scale(1.04); }
.meet-round.is-off { background: #ea4335; border-color: #ea4335; }
.meet-round.is-off:hover { background: #d93025; border-color: #d93025; filter: none; }
.meet-ready { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 22rem; margin-inline: auto; }
.meet-ready h2 { font-size: clamp(1.6rem, 2.5vw, 2rem); font-weight: 400; letter-spacing: -.01em; margin: 0 0 .65rem; color: #202124; }
[data-bs-theme="dark"] .meet-ready h2 { color: #e8eaed; }
.meet-sub { font-size: 1.05rem; font-weight: 500; margin: 0 0 .35rem; color: #3c4043; }
[data-bs-theme="dark"] .meet-sub { color: #e8eaed; }
.meet-meta { font-size: .9rem; color: #5f6368; margin: 0 0 1.75rem; line-height: 1.45; }
[data-bs-theme="dark"] .meet-meta { color: #9aa0a6; }
.meet-consent { display: flex; gap: .5rem; justify-content: center; align-items: flex-start; margin: 0 auto 1.25rem; max-width: 20rem; font-size: .85rem; text-align: left; color: #5f6368; }
.meet-actions { display: flex; flex-direction: column; align-items: center; gap: .85rem; width: 100%; }
.meet-join {
  min-width: 12rem;
  padding: .85rem 2rem;
  border: 0;
  border-radius: 1.5rem;
  background: var(--lagoon);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  box-shadow: 0 1px 2px rgba(var(--lagoon-rgb), .3), 0 1px 3px 1px rgba(var(--lagoon-rgb), .15);
  transition: background-color .15s ease, box-shadow .15s ease;
}
.meet-join:hover:not(:disabled) { background: var(--navy); box-shadow: 0 1px 3px rgba(var(--lagoon-rgb), .4), 0 4px 8px rgba(var(--lagoon-rgb), .2); }
.meet-join:disabled { opacity: .55; }
.meet-secondary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.1rem;
  border: 0;
  border-radius: 1.5rem;
  background: none;
  color: var(--lagoon);
  font-weight: 600;
  font-size: .88rem;
}
.meet-secondary:hover { background: rgba(var(--lagoon-rgb), .08); }
.meet-error { margin: 1rem 0 0; font-size: .85rem; color: var(--danger); }
.meet-call { display: flex; flex-direction: column; height: calc(100vh - 9rem); min-height: 30rem; background: #202124; }
.meet-call[hidden] { display: none; }
.meet-call-bar { display: flex; align-items: center; gap: .9rem; height: 3rem; padding: 0 1.25rem; flex: none; color: #e8eaed; font-size: .9rem; }
.meet-call-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meet-call-time { color: #9aa0a6; }
.meet-call-time::before { content: "|"; margin-right: .9rem; color: #5f6368; }
.meet-leave {
  margin-left: auto; border: 0; border-radius: 999px; padding: .35rem .9rem; font-size: .8rem; font-weight: 600;
  background: #c5221f; color: #fff; cursor: pointer;
}
.meet-leave[hidden] { display: none; }
.meet-leave:hover { filter: brightness(1.08); }
.meet-rec { margin-left: auto; display: inline-flex; align-items: center; gap: .45rem; padding: .2rem .7rem; border-radius: 1rem; background: rgba(var(--danger-rgb), .2); color: #f07a88; font-size: .78rem; font-weight: 600; }
.meet-stage { flex: 1; min-height: 0; }
.meet-stage iframe { display: block; border: 0; }
.meet.is-in-call .meet-lobby { display: none; }
.meet.is-in-call { border-radius: 1rem; }
@media (max-width: 991.98px) {
  .meet-lobby { grid-template-columns: 1fr; min-height: 0; padding: 1.5rem; gap: 2rem; }
  .meet-preview { border-radius: 1.25rem; }
  .meet-name-chip { bottom: 5rem; }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } .meet-round:hover { transform: none; } }

/* ---------- Lab lessons: a MobaXterm-style workspace (servers, terminals in tabs, guides, checks) ---------- */
.lesson-body.is-ide.is-lab { background: #f0f0f0; }
.mxw { flex: 1; display: flex; flex-direction: column; width: 100%; min-height: 34rem; height: calc(100vh - 4rem - 3.75rem - 4.75rem);
  background: #f0f0f0; color: #1f1f1f; font: 12px/1.35 "Segoe UI", system-ui, sans-serif; }
.mxw button { font: inherit; }
.mxw .mxt-body { flex: 1; min-height: 0; display: flex; }
.mxt-tool.is-accent i { color: var(--navy); }
.mxw-rail { flex: none; width: 1.75rem; display: flex; flex-direction: column; gap: .3rem; padding-top: .4rem; background: #e3e3e3; border-right: 1px solid #c8c8c8; }
.mxw-rail button { display: flex; justify-content: center; padding: .6rem 0; border: 1px solid transparent; border-left: 0; border-radius: 0 .25rem .25rem 0; background: none; color: #444; }
.mxw-rail button span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 600; }
.mxw-rail button:hover { background: #ececec; }
.mxw-rail button.active { background: #fff; border-color: #c8c8c8; color: var(--navy); }
.mxw .mxw-side { width: 17.5rem; max-width: 40%; }
.mxw-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mxw-pane[hidden] { display: none; }
.mxw-tree { flex: 1; overflow-y: auto; padding: .4rem .3rem; }
.mxw-tree-root { display: flex; align-items: center; gap: .45rem; padding: .25rem .4rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mxw-tree-root .fa-chevron-down { font-size: 9px; color: #777; }
.mxw-servers { list-style: none; margin: 0; padding: 0 0 0 1rem; }
.mxw-server { display: flex; align-items: center; gap: .55rem; padding: .35rem .45rem; border: 1px solid transparent; border-radius: .2rem; cursor: default; }
.mxw-server:hover { background: #e5f1fb; border-color: #cce4f7; }
.mxw-server.is-selected { background: #cce8ff; border-color: #99d1ff; }
.mxw-server:focus-visible { outline: 1px dotted #333; }
.mxw-server-icon { width: 1rem; text-align: center; color: var(--navy); font-size: 14px; }
.mxw-server-text { flex: 1; min-width: 0; }
.mxw-server-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mxw-server-state { font-size: 11px; color: #555; white-space: nowrap; }
.mxw-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: #9e9e9e; vertical-align: middle; }
.mxw-server.is-ready .mxw-dot { background: #2e9e44; }
.mxw-server:is(.is-queued, .is-provisioning, .is-resetting) .mxw-dot { background: var(--lagoon); animation: lab-pulse 1.2s ease-in-out infinite; }
.mxw-server.is-failed .mxw-dot { background: var(--danger); }
.mxw-left { color: #777; }
.mxw-server-tools { display: none; gap: .1rem; }
.mxw-server:hover .mxw-server-tools, .mxw-server.is-selected .mxw-server-tools { display: flex; }
.mxw-icon { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid transparent; border-radius: .2rem; background: none; color: #333; font-size: 11px; }
.mxw-icon:hover:not(:disabled) { background: #fff; border-color: #99d1ff; }
.mxw-icon:disabled { opacity: .35; }
.mxw-empty { padding: .5rem .45rem; color: #777; font-style: italic; }
.mxw-add { display: flex; align-items: center; gap: .45rem; margin: .4rem 0 0 1rem; padding: .3rem .5rem; border: 1px dashed #b5b5b5; border-radius: .2rem; background: #fff; color: var(--navy); }
.mxw-add:hover:not(:disabled) { border-color: var(--lagoon); background: #f3f8fc; }
.mxw-add:disabled { opacity: .45; }
.mxw-side-foot { flex: none; padding: .45rem .75rem; border-top: 1px solid #d6d6d6; background: #f7f7f7; color: #555; font-size: 11px; }
.mxw-score { margin-bottom: .75rem; padding: .5rem .65rem; border-radius: .2rem; background: #f1f3f5; font-weight: 600; }
.mxw .mxt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.mxw .mxt-tabs { overflow-x: auto; scrollbar-width: none; }
.mxw .mxt-tab { border-color: #b9b9b9; cursor: pointer; color: #1f1f1f; }
.mxw .mxt-tab.is-active { background: #300a24; color: #fff; border-color: #300a24; }
.mxw .mxt-tab:first-child.is-active { background: #fff; color: var(--navy); border-color: #b9b9b9; }
.mxt-tab-x { display: inline-grid; place-items: center; width: 1rem; height: 1rem; margin-left: .3rem; border-radius: .15rem; font-size: 9px; opacity: .7; }
.mxt-tab-x:hover { opacity: 1; background: rgba(255, 255, 255, .2); }
.mxw-views { flex: 1; min-height: 0; position: relative; }
.mxw-views > [hidden] { display: none !important; }
.mxw-home { position: absolute; inset: 0; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1.5rem; text-align: center; background: radial-gradient(circle at 50% 0, #f6f9fc, #fff 60%); }
.mxw-home-logo { height: 3rem; width: auto; margin-bottom: .75rem; }
.mxw-home h2 { font-size: 1.35rem; font-weight: 600; color: var(--navy); margin: 0 0 .35rem; }
.mxw-home-tool { color: #555; margin: 0 0 1.5rem; max-width: 36rem; }
.mxw-home-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-bottom: 1.75rem; }
.mxw-big { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 9.5rem; padding: 1rem .75rem; border: 1px solid #d0d7de; border-radius: .4rem; background: #fff; color: #1f1f1f; font-weight: 600; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.mxw-big i { font-size: 1.6rem; color: var(--lagoon); }
.mxw-big:hover { border-color: var(--lagoon); background: #f3f8fc; }
.mxw-home-recent { width: 100%; max-width: 24rem; text-align: left; }
.mxw-home-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #777; margin-bottom: .35rem; }
.mxw-home-recent ul { list-style: none; margin: 0; padding: .5rem .75rem; border: 1px solid #e3e3e3; border-radius: .3rem; background: #fff; }
.mxw-home-recent li { padding: .2rem 0; }
.mxw-muted { color: #777; }
.mxw-practice { margin-top: 1.5rem; max-width: 32rem; padding: .6rem .8rem; border-radius: .3rem; background: #eef4fa; color: var(--navy); }
.mxw-term { position: absolute; inset: 0; display: flex; }
.mxw-term iframe { flex: 1; border: 0; background: #000; }
.mxw-term iframe[allow*="fullscreen"] { background: #fff; }
.mxw-web-practice { align-items: center; justify-content: center; background: var(--surface-3); }
.mxw-web-note { max-width: 28rem; padding: 2rem; text-align: center; color: var(--bs-body-color); }
.mxw-web-note h3 { font-size: 1.05rem; margin: .75rem 0 .5rem; }
.mxw-web-note p { margin: 0; color: var(--bs-secondary-color); }
.mxw-term .ubt-screen { flex: 1; }
.mxw-term-input { display: inline-block; width: auto; min-width: 12rem; flex: 1; }
.mxw-term .ubt-line:last-child { display: flex; align-items: baseline; white-space: pre; }
.mxw-status { display: flex; align-items: center; gap: 1.25rem; height: 1.6rem; padding: 0 .75rem; flex: none; background: #dcdcdc; border-top: 1px solid #b9b9b9; color: #333; font-size: 11px; white-space: nowrap; overflow: hidden; }
.mxw-status i { color: var(--navy); }
.mxw-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 2rem; text-align: center; background: #f6f8fa; color: var(--navy); }
.mxw-loading h3 { font-size: 1rem; margin: .4rem 0 0; }
.mxw-loading p { margin: 0; min-height: 1.2em; }
.mxw-big.is-busy, .mxw-big:disabled { cursor: progress; opacity: .85; }
.mxw-big.is-busy:hover { border-color: #d0d7de; background: #fff; }
.mxw-big small { font-size: 11px; font-weight: 400; }
/* Full screen: the workspace over the window, under Bootstrap's modals (1055) and the toasts (1090). */
.mxw.is-full { position: fixed; inset: 0; z-index: 1045; width: 100vw; height: 100vh; height: 100dvh; min-height: 0; }
/* ...with the tool alone under the toolbar (its counter shows the time left), and the guides floating over it,
   top right; the learner can resize them from the corner. */
.mxw.is-full :is(.mxw-rail, .mxw-side, .mxw-status) { display: none; }
.mxw-full-only { display: none; }
.mxw.is-full .mxt-tool.mxw-full-only { display: flex; }
.mxw.is-full .mxw-clock.mxw-full-only { display: flex; align-items: center; gap: .4rem; align-self: center; margin-left: auto;
  padding: .2rem .6rem; border-radius: .25rem; background: #fff; border: 1px solid #c8c8c8; color: var(--navy); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mxw.is-full .mxw-clock:empty { display: none; }
.mxw.is-full .mxw-clock ~ .mxt-brand { margin-left: .5rem; }
.mxw.is-full .mxt-body { position: relative; }
.mxw-guide-float { position: absolute; top: 2.6rem; right: 1rem; z-index: 5; display: flex; flex-direction: column;
  width: 24rem; max-width: calc(100% - 2rem); height: 60%; min-width: 16rem; min-height: 10rem; max-height: calc(100% - 3.6rem);
  overflow: hidden; resize: both; background: #fff; border: 1px solid #c8c8c8; border-radius: .4rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25); }
.mxw-guide-float[hidden] { display: none; }
.mxw-guide-float .mxt-side-body { font-size: 14px; }
html.mxw-locked { overflow: hidden; }

/* ---------- Lesson tools (IDE, Excel, Word) in full screen (window.toolFullScreen in app.js) ---------- */
/* The tool over the window, under Bootstrap's modals (1055) and the toasts (1090); its side panels float. */
.vsc.is-full, .ofc.is-full { position: fixed; inset: 0; z-index: 1045; width: 100vw; height: 100vh; height: 100dvh; min-height: 0; }
html.tool-locked { overflow: hidden; }
.vsc.is-full .vsc-body, .ofc.is-full .ofc-body { position: relative; }
.vsc.is-full .vsc-guides, .ofc.is-full .ofc-side { position: absolute; top: .75rem; right: 1rem; bottom: auto; z-index: 5;
  width: 24rem; max-width: calc(100% - 2rem); height: 60%; min-width: 16rem; min-height: 10rem; max-height: calc(100% - 1.5rem);
  overflow: hidden; resize: both; border: 1px solid; border-radius: .4rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .35); }
.vsc.is-full .vsc-guides { border-color: #454545; }
.ofc.is-full .ofc-side { border-color: #d2d0ce; }
.vsc.is-full .vsc-guides[hidden], .ofc.is-full .ofc-side[hidden] { display: none; }
@media (max-width: 991.98px) {
  .vsc.is-full, .ofc.is-full { overflow-y: auto; }
  .vsc.is-full .vsc-editor { flex: 1; height: auto; min-height: 50vh; }
}
@media (max-width: 991.98px) {
  .mxw { height: auto; }
  .mxw .mxt-body { flex-direction: column; }
  .mxw-rail { flex-direction: row; width: auto; padding: .3rem; }
  .mxw-rail button span { writing-mode: horizontal-tb; transform: none; }
  .mxw .mxw-side { width: 100%; max-width: none; max-height: 16rem; border-right: 0; }
  .mxw-views { height: 26rem; flex: none; }
  .mxw.is-full .mxw-views { height: auto; flex: 1; }
}

/* ---------- Lab lessons: the machine ---------- */
.lab-tool-icon { background: var(--navy); color: #fff; font-size: 1.15rem; }
.lab-state { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.lab-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--stone); }
.lab-state.is-ready .lab-dot { background: var(--sage); box-shadow: 0 0 0 .2rem rgba(var(--sage-rgb), .25); }
.lab-state:is(.is-queued, .is-provisioning, .is-resetting) .lab-dot { background: var(--lagoon); animation: lab-pulse 1.2s ease-in-out infinite; }
.lab-state.is-failed .lab-dot { background: var(--danger); }
@keyframes lab-pulse { 50% { opacity: .35; } }
.lab-credentials { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.25rem; padding: .9rem 1.1rem; border-radius: .75rem; background: var(--surface-2); }
.lab-cred { display: flex; flex-direction: column; gap: .15rem; }
.lab-cred code { color: var(--ink); font-size: .9rem; }
.lab-console { border-top: 1px solid var(--line); }
.lab-console iframe { display: block; width: 100%; height: 70vh; border: 0; background: #000; }
.lab-console-note { padding: 2rem 1.5rem; text-align: center; font-size: .9rem; color: var(--muted); }
.lab-check-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.lab-check { display: flex; align-items: center; gap: .75rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: .75rem; }
.lab-check-icon { color: var(--muted); font-size: 1.05rem; }
.lab-check.is-pass .lab-check-icon { color: var(--sage-ink); }
.lab-check.is-fail .lab-check-icon { color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .lab-state .lab-dot { animation: none !important; } }
.lesson-actions { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem clamp(1.5rem, 5vw, 4.5rem); box-shadow: 0 -.5rem 1.5rem -1rem rgba(var(--night-rgb), .18); background: var(--surface); border-top: 1px solid var(--line); }
/* Previous / next: big, plain targets (the lesson's name is in the tooltip). */
.step-link { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem 1.15rem; font-weight: 600; border: 1px solid var(--line-strong); border-radius: .75rem; background: var(--surface); color: var(--ink); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); }
.step-link:hover { border-color: var(--lagoon); background: rgba(var(--lagoon-rgb), .06); color: var(--ink); text-decoration: none; }
.step-link.is-next { border-color: var(--lagoon); background: var(--lagoon); color: #fff; }
.step-link.is-next:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.step-link > [class*="fa-"] { flex: none; }
button.step-link { line-height: inherit; }
.lesson-preview { display: flex; align-items: center; gap: .5rem; min-width: 0; font-size: .85rem; color: var(--muted); }
@media (max-width: 575.98px) { .lesson-preview span { display: none; } }

@media (min-width: 1200px) {
  .qa-open .player-main { padding-right: 26rem; }
  .player-main { transition: padding-right var(--dur) var(--ease); }
}
.qa-backdrop { display: none; }
@media (max-width: 991.98px) {
  .qa-panel, .qa-panel.is-wide { right: 0; left: auto; width: min(28rem, 100%); }
  .qa-open .qa-backdrop { display: block; position: fixed; inset: 4rem 0 0; z-index: 1029; background: rgba(var(--night-rgb), .35); }
}

/* ---------- Quiz ---------- */
.question-card + .question-card { margin-top: 1rem; }
.answer { display: flex; gap: .75rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 0.875rem; cursor: pointer; transition: all var(--dur) var(--ease); margin-bottom: .5rem; background: var(--surface); }
.answer:hover { border-color: rgba(var(--brand-rgb), .5); }
.answer:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.answer.correct { border-color: var(--sage); background: rgba(var(--sage-rgb), .1); }
.answer.wrong { border-color: var(--danger); background: rgba(var(--danger-rgb), .06); }
.timer { font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.15rem; }
.timer.low { color: var(--danger); }
.score-ring { --size: 8.25rem; font-size: 1.6rem; }

/* ---------- Discussions ---------- */
.thread-row { display: flex; gap: 1rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); color: var(--ink); transition: background-color var(--dur) var(--ease); }
.thread-row:first-child { border-top: 0; }
.thread-row:hover { background: var(--surface-2); text-decoration: none; color: var(--ink); }
.thread-row .stats { display: flex; gap: .9rem; text-align: center; font-size: .78rem; color: var(--muted); flex-shrink: 0; }
.thread-row .stats b { display: block; font-size: 1rem; color: var(--ink); }
.thread-row .stats .answered { color: var(--sage-ink); }
/* A page shown inside the instructor's side panel: content and Q&A only, no site chrome */
.is-embed .site-nav, .is-embed .site-footer, .is-embed .side-nav, .is-embed .player-side, .is-embed .player-back, .is-embed .lesson-actions { display: none !important; }
.is-embed .player { grid-template-columns: 1fr; min-height: 100vh; }
.is-embed .player-main { min-height: 100vh; }
.is-embed .qa-panel { top: 0; right: 0; }
.is-embed .qa-open .qa-backdrop { inset: 0; }
@media (min-width: 768px) {
  .is-embed .qa-panel, .is-embed .qa-panel.is-wide { left: auto; width: 24rem; }
  .is-embed .qa-open .qa-backdrop { display: none; }
  .is-embed .qa-open .player-main { padding-right: 24rem; }
}

/* Instructor Q&A: questions grouped by training; one opens in a side panel */
.qa-group { margin-bottom: 1.5rem; overflow: hidden; }
.thread-row.is-current { background: rgba(var(--lagoon-rgb), .07); box-shadow: inset 3px 0 0 var(--lagoon); }
.kind-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; padding: .1rem .5rem; border-radius: 1rem; background: var(--surface-3); color: var(--muted); }
.qa-counts { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--muted); }
.qa-counts b { color: var(--ink); }
.content-peek { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1045; width: min(72rem, 100vw); display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateX(100%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur); }
.content-peek.is-open { transform: none; visibility: visible; transition: transform var(--dur) var(--ease); }
.content-peek-head { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--line); }
.content-peek iframe { flex: 1; width: 100%; border: 0; background: var(--surface); }
/* Q&A thread panel: the question, its replies and a reply box pinned at the bottom. */
.page-peek { width: min(64rem, 100vw); }
.notif-peek { width: min(30rem, 100vw); background: var(--surface-2); transition: transform var(--dur) var(--ease), width var(--dur) var(--ease), visibility 0s linear var(--dur); }
.notif-peek.is-wide { width: min(60rem, 100vw); }
.notif-peek .content-peek-head { background: var(--surface); }
.notif-peek-list { flex: 1; overflow-y: auto; background: var(--surface); }
.notif-peek-list .notif:first-child { border-top: 0; }
.notif-peek-detail { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1rem; padding: 1rem; }
.notif-peek-detail[hidden], .notif-peek-list[hidden] { display: none; }
.notif-peek-detail .icon { width: 2.5rem; height: 2.5rem; flex: none; border-radius: .75rem; display: grid; place-items: center; }
.notif-peek-text { white-space: pre-line; line-height: 1.6; }
.notif-peek-frame { flex: 1; min-height: 20rem; overflow: hidden; }
.notif-peek-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--surface); }
.thread-peek { width: min(36rem, 100vw); }
.thread-peek.has-context { width: min(84rem, 100vw); }
.thread-peek-main { flex: 1; min-height: 0; display: flex; }
.thread-peek-thread { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.thread-peek.has-context .thread-peek-thread { flex: 0 0 26rem; border-left: 1px solid var(--line); }
.content-peek .thread-peek-context { flex: 1; min-width: 0; height: auto; }
@media (max-width: 767.98px) {
  .thread-peek-main { flex-direction: column; }
  .content-peek .thread-peek-context { flex: 0 0 45vh; }
  .thread-peek.has-context .thread-peek-thread { flex: 1; min-height: 0; border-left: 0; border-top: 1px solid var(--line); }
}
.is-embed.is-context :is(.qa-panel, .qa-backdrop, [data-qa-toggle]) { display: none !important; }
.is-embed.is-context .qa-open .player-main { padding-right: 0; }
.thread-peek-body { flex: 1; overflow-y: auto; padding: 1.5rem; }
.thread-peek-reply { padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--line); background: var(--surface); }
.peek-question { padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.peek-byline { display: flex; align-items: center; gap: .65rem; margin-bottom: .65rem; }
.peek-text { font-size: .95rem; line-height: 1.6; overflow-wrap: anywhere; }
.peek-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .65rem; }
.peek-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 1.25rem 0 .25rem; }
.peek-reply { padding: 1rem 0; border-top: 1px solid var(--line); }
.peek-label + div > .peek-reply:first-child { border-top: 0; }
.peek-reply.is-accepted { margin: .5rem 0; padding: 1rem; border: 1px solid rgba(var(--lagoon-rgb), .25); border-radius: .75rem; background: rgba(var(--lagoon-rgb), .05); }
.peek-nested { margin-left: 2.65rem; }
.peek-nested .peek-reply { padding: .75rem 0; }
.content-peek-backdrop { position: fixed; inset: 0; z-index: 1044; background: rgba(var(--night-rgb), .35); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur); }
.content-peek-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur) var(--ease); }
body.peek-open { overflow: hidden; }
.qa-group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.qa-group-head + .thread-row { border-top: 0; }
.post { display: flex; gap: 1rem; padding: 1.25rem; border-top: 1px solid var(--line); }
.post.accepted { background: rgba(var(--sage-rgb), .07); box-shadow: inset 3px 0 0 var(--sage); }
.post .body { white-space: pre-line; }
.vote-btn { display: flex; flex-direction: column; align-items: center; gap: .1rem; min-width: 2.75rem; }

/* ---------- Notifications ---------- */
.notif { display: flex; gap: .9rem; padding: .95rem 1.15rem; border-top: 1px solid var(--line); color: var(--ink); align-items: flex-start; transition: background-color var(--dur) var(--ease); }
.notif:first-child { border-top: 0; }
.notif.unread { background: rgba(var(--sky-rgb), .1); }
.notif.unread .title::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand); margin-right: .45rem; vertical-align: middle; }
.notif .icon { width: 2.375rem; height: 2.375rem; border-radius: 0.625rem; display: grid; place-items: center; flex-shrink: 0; }

/* ---------- Certificates ---------- */
/* Certificates: a "paper" that stays cream in both themes, with navy ink and gold accents. */
.cert-paper { --cert-ink: #00416a; --cert-gold: #005a9c; position: relative; background: #ffffff; color: var(--cert-ink); border-radius: .75rem; padding: 1.25rem 1.5rem 1.1rem; box-shadow: inset 0 0 0 1px rgba(0, 90, 156, .55), inset 0 0 0 6px #ffffff, inset 0 0 0 7px rgba(0, 90, 156, .3); }
.cert-paper::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5; background: radial-gradient(circle at 0 0, rgba(0, 90, 156, .12), transparent 35%), radial-gradient(circle at 100% 100%, rgba(0, 65, 106, .08), transparent 40%); }
.cert-paper > * { position: relative; }
.cert-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .75rem; }
.cert-brand { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; letter-spacing: -.02em; }
.cert-code { color: rgba(0, 65, 106, .55); letter-spacing: .06em; }
.cert-body { text-align: center; padding: 1.1rem 0 1rem; }
.cert-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--cert-gold); margin-bottom: .6rem; }
.cert-small { font-size: .78rem; color: rgba(0, 65, 106, .6); }
.cert-name { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; font-weight: 700; line-height: 1.2; margin: .15rem 0 .35rem; overflow-wrap: anywhere; }
.cert-course { font-weight: 700; font-size: 1.02rem; line-height: 1.3; margin-top: .2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cert-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; padding-top: .85rem; border-top: 1px solid rgba(0, 90, 156, .35); font-size: .78rem; }
.cert-foot span { display: block; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(0, 65, 106, .55); }
.cert-foot b { font-weight: 600; }
.cert-seal { width: 2.75rem; height: 2.75rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.25rem; color: #fff; background: var(--cert-gold); box-shadow: 0 0 0 3px #ffffff, 0 0 0 4px rgba(0, 90, 156, .5); }
.cert-paper-lg { padding: 2rem 2.5rem 1.6rem; }
.cert-paper-lg .cert-body { padding: 2rem 0 1.75rem; }
.cert-paper-lg .cert-name { font-size: 2.4rem; }
.cert-paper-lg .cert-course { font-size: 1.3rem; -webkit-line-clamp: 3; }
.cert-paper-lg .cert-seal { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; }
.cert-card { height: 100%; display: flex; flex-direction: column; gap: .75rem; padding: .75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cert-card .cert-paper { flex: 1; }
.cert-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.cert-verify { max-width: 50rem; margin: 0 auto; }
.cert-valid { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.cert-valid > [class*="fa-"] { font-size: 1.5rem; color: var(--lagoon); }
.cert-valid span { display: block; font-size: .85rem; color: var(--muted); }
@media (max-width: 575.98px) { .cert-paper-lg { padding: 1.25rem; } .cert-paper-lg .cert-name { font-size: 1.7rem; } }
.verify-seal { width: 4rem; height: 4rem; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--sky-rgb), .28); color: var(--teal-ink); }

/* ---------- Auth ---------- */
.auth-wrap { min-height: calc(100vh - 4rem); display: grid; grid-template-columns: 1fr 1fr; }
.auth-art { background: var(--surface-2); border-right: 1px solid var(--line); padding: 2.5rem 3rem 0; display: flex; flex-direction: column; align-items: flex-start; }
.auth-logo { height: 2.75rem; width: auto; display: block; }
[data-bs-theme="dark"] .auth-logo { filter: invert(1); }
.auth-photo { display: block; align-self: center; margin-top: auto; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 12rem); }
.auth-form { display: grid; place-items: center; padding: 2.5rem 1.25rem; }
.auth-form .inner { width: 100%; max-width: 26.25rem; }
.otp-input { text-align: center; font-size: 1.75rem; font-weight: 700; letter-spacing: .5em; padding-left: 1.25em; font-variant-numeric: tabular-nums; }
.otp-hero {
  position: relative; overflow: hidden; border-radius: 1rem;
  background: var(--night); color: #fff;
}
.otp-hero-banner {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
}
.otp-hero-bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem; background: var(--night);
}
.otp-hero-logo {
  width: 2.75rem; height: 2.75rem; border-radius: .7rem; object-fit: cover; flex: none;
}
.otp-hero-kicker {
  display: block; font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sun); font-weight: 600;
}
.otp-hero-title { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
@media (max-width: 991.98px) { .auth-wrap { grid-template-columns: 1fr; } .auth-art { display: none; } }
/* ---------- Builder (studio) ---------- */
.module-block { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); margin-bottom: 1rem; }
.module-block > .head { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface-2); border-radius: var(--radius) var(--radius) 0 0; }
.lesson-item { display: flex; align-items: center; gap: .75rem; padding: .7rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.lesson-item:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.handle { cursor: grab; color: var(--muted); padding: 0 .25rem; }
.sortable-ghost { opacity: .4; background: var(--brand-soft) !important; }
.choice-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.cover-placeholder { background: var(--surface-3); }

/* ---------- Footer ---------- */
.site-footer { background: var(--night); color: var(--stone); padding: 3.5rem 0 2rem; margin-top: 4rem; }
.site-footer h6 { color: var(--snow); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; }
.site-footer a { color: var(--stone); }
.site-footer a:hover { color: #fff; }
.site-footer .legal { border-top: 1px solid #1c2333; margin-top: 2.5rem; padding-top: 1.5rem; font-size: .85rem; }
[data-bs-theme="dark"] .site-footer { background: var(--surface); border-top: 1px solid var(--line); }
[data-bs-theme="dark"] .site-footer .legal { border-top-color: var(--line); }

/* ---------- Toasts ---------- */
.toast-stack { position: fixed; top: 5rem; right: 1rem; z-index: 1090; display: flex; flex-direction: column; gap: .5rem; max-width: 26.25rem; }
.flash { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 0.875rem; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: flash-in .35s var(--ease); }
.flash [class*="fa-"] { font-size: 1.1rem; }
.flash-success [class*="fa-"] { color: var(--sage); }
.flash-error [class*="fa-"] { color: var(--danger); }
.flash-warning [class*="fa-"] { color: var(--sun-ink); }
.flash-info [class*="fa-"] { color: var(--teal); }
@keyframes flash-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ---------- Misc ---------- */
.min-w-0 { min-width: 0; }
.fw-800 { font-weight: 800; }
.small-caps { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dot-sep > * + *::before { content: "·"; margin: 0 .45rem; color: var(--muted); }
.kbd { font-family: ui-monospace, monospace; font-size: .8rem; background: var(--surface-3); border: 1px solid var(--line); border-radius: 0.375rem; padding: .05rem .4rem; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; }
.pagination { --bs-pagination-border-radius: 0.625rem; --bs-pagination-active-bg: var(--lagoon); --bs-pagination-active-border-color: var(--lagoon); --bs-pagination-active-color: #fff; --bs-pagination-color: var(--ink); --bs-pagination-bg: var(--surface); --bs-pagination-border-color: var(--line); --bs-pagination-hover-bg: var(--surface-3); --bs-pagination-hover-color: var(--ink); --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--brand-rgb), .14); gap: .3rem; }
.pagination .page-link { border-radius: 0.625rem !important; min-width: 2.375rem; text-align: center; }
.skeleton-bg { background: var(--surface-3); }
.sticky-top-88 { position: sticky; top: 5.5rem; }
.timeline { position: relative; padding-left: 1.4rem; }
.timeline::before { content: ""; position: absolute; left: .4rem; top: .3rem; bottom: .3rem; width: 2px; background: var(--line); }
.timeline .item { position: relative; padding-bottom: 1.1rem; }
.timeline .item::before { content: ""; position: absolute; left: -1.2rem; top: .35rem; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.stepper { display: flex; gap: .5rem; flex-wrap: wrap; }
.stepper .step { flex: 1; min-width: 9.375rem; padding: .9rem 1rem; border-radius: 0.875rem; border: 1px solid var(--line); background: var(--surface); }
.stepper .step.done { border-color: rgba(var(--sage-rgb), .5); background: rgba(var(--sage-rgb), .07); }
.stepper .step.current { border-color: var(--brand); background: var(--brand-soft); }
.stepper .num { width: 1.625rem; height: 1.625rem; border-radius: 50%; display: inline-grid; place-items: center; font-size: .78rem; font-weight: 700; background: var(--surface-3); margin-right: .4rem; }
.stepper .done .num { background: var(--sage); color: #fff; }
.stepper .current .num { background: var(--ink); color: var(--surface); }
.testimonial { padding: 1.5rem; height: 100%; }
.testimonial .quote { font-size: 1rem; line-height: 1.65; }
.cta-band { background: var(--lagoon); color: #fff; border-radius: 1.5rem; padding: 3rem 2.5rem; position: relative; overflow: hidden; }
.cta-band h2, .cta-band .text-white { color: #fff !important; }
.cta-band .btn-light { --bs-btn-bg: var(--night); --bs-btn-border-color: var(--night); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--teal); --bs-btn-hover-border-color: var(--teal); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--lagoon); --bs-btn-active-border-color: var(--lagoon); --bs-btn-active-color: #fff; }
.mock-ribbon { background: var(--sun); color: var(--night); font-weight: 700; font-size: .8rem; text-align: center; padding: .35rem; border-radius: 0.5rem; }

/* ---------- Card fills: the brand colours live on cards, never on page sections ---------- */
.fill-night, .fill-teal, .fill-sky, .fill-sun, .fill-peach, .fill-sage, .fill-lagoon { border-color: transparent !important; }
.fill-night { background: var(--night) !important; color: var(--snow) !important; }
.fill-teal { background: var(--teal) !important; color: #fff !important; }
.fill-sage { background: var(--sage) !important; color: #fff !important; }
.fill-lagoon { background: var(--lagoon) !important; color: #fff !important; }
.fill-sky { background: var(--sky) !important; color: var(--night) !important; }
.fill-sun { background: var(--sun) !important; color: var(--night) !important; }
.fill-peach { background: var(--peach) !important; color: var(--night) !important; }
:is(.fill-night, .fill-teal, .fill-sage, .fill-lagoon) :is(.text-body-secondary, a) { color: rgba(255, 255, 255, .82) !important; }
:is(.fill-sky, .fill-sun, .fill-peach) :is(.text-body-secondary, a) { color: rgba(var(--night-rgb), .7) !important; }
.stat-card { padding: 1.4rem 1.5rem; border-radius: var(--radius); height: 100%; }
.stat-card .num { font-size: 2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.stat-card .label { font-size: .85rem; font-weight: 500; opacity: .8; margin-top: .25rem; }

/* ---------- Instructor trainings list ---------- */
.course-list { display: flex; flex-direction: column; gap: .75rem; }
.course-row {
  position: relative;
  display: grid; grid-template-columns: 10rem minmax(0, 1fr) auto auto; align-items: center; gap: 1.5rem;
  padding: 1rem 1.25rem 1rem 1rem; background: var(--surface);
  border: 1px solid rgba(var(--night-rgb), .06); border-radius: var(--radius);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
[data-bs-theme="dark"] .course-row { border-color: rgba(255, 255, 255, .06); }
.course-row:hover { border-color: rgba(var(--lagoon-rgb), .35); box-shadow: var(--shadow); }
.course-row-cover { display: block; border-radius: .625rem; overflow: hidden; pointer-events: none; }
.course-row-title { font-size: 1.05rem; font-weight: 700; margin: .45rem 0 .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-row-title a { color: var(--ink); }
.course-row-meta { font-size: .82rem; color: var(--muted); }
.course-row-next { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: .45rem; margin-top: .55rem; font-size: .8rem; font-weight: 600; color: var(--muted); }
.course-row-next.is-todo { color: var(--sun-ink); }
.course-row-stats { display: flex; gap: 2rem; margin: 0; }
.course-row-stats dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: .2rem; }
.course-row-stats dd { margin: 0; font-weight: 700; }
.course-row-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: .45rem; }
.course-action {
  width: 2.25rem; height: 2.25rem; border: 0; border-radius: .65rem;
  display: inline-grid; place-items: center; color: #fff; font-size: .9rem;
  transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.course-action:hover { filter: brightness(1.08); color: #fff; transform: translateY(-1px); }
.course-action.is-edit { background: var(--lagoon); }
.course-action.is-publish { background: #0f7b4b; }
.course-action.is-delete { background: var(--danger); }
.course-action.is-more { background: var(--navy); }
@media (max-width: 991.98px) {
  .course-row { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; }
  .course-row-stats { grid-column: 1 / -1; padding-top: .85rem; border-top: 1px solid rgba(var(--night-rgb), .06); }
  .course-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---------- Learner side navigation ---------- */
.learner-shell { display: flex; flex: 1 0 auto; min-height: calc(100vh - 4rem); }
.learner-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.page-fill .learner-main .fill-panel { flex: 1 0 auto; }
/* Dashboard pages (learner, studio, org, account): full width of the shell, with roomy padding. */
.learner-main .container-xl {
  max-width: none;
  width: 100%;
  padding-left: clamp(1.25rem, 3vw, 2.5rem);
  padding-right: clamp(1.25rem, 3vw, 2.5rem);
}
.account-page,
.studio-page,
.dash-fill {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
/* Width (not flex-basis) + overflow clip so collapse eases instead of snapping labels away. clip, not hidden:
   hidden would make the rail its own scroll box and the sticky column would sit 4rem below its top. */
.side-nav { flex: 0 0 auto; width: 15rem; border-right: 1px solid var(--line); background: var(--surface); overflow: clip; transition: width .28s var(--ease); }
.side-nav-inner { position: sticky; top: 4rem; width: 15rem; height: calc(100vh - 4rem); overflow: hidden auto; display: flex; flex-direction: column; gap: .3rem; padding: 1rem .9rem 1.25rem; box-sizing: border-box; }
.side-nav-label { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 1.35rem .85rem .45rem; }
.side-link { display: flex; align-items: center; gap: .85rem; min-height: 2.6rem; padding: .6rem .85rem; border-radius: .625rem; color: var(--muted); font-weight: 500; font-size: .9rem; white-space: nowrap; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.side-link > i { font-size: 1.3rem; width: 1.4rem; flex-shrink: 0; text-align: center; color: var(--ink); opacity: .78; }
.side-link:hover > i { opacity: 1; }
/* The current page's icon turns solid, like an iOS tab bar (Phosphor's fill set shares the regular glyph codes). */
.side-link.active > .ph { font-family: "Phosphor-Fill" !important; color: inherit; opacity: 1; }
.side-link:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.side-link.active, .side-link.active:hover { background: var(--lagoon); color: #fff; font-weight: 600; }
.side-count { margin-left: auto; min-width: 1.25rem; text-align: center; font-size: .7rem; font-weight: 700; padding: .05rem .4rem; border-radius: 62.4375rem; background: var(--lagoon); color: #fff; }
.side-nav-foot:empty { display: none; }
.side-nav-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .3rem; }
.side-cta { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.6rem; margin-bottom: .35rem; white-space: nowrap; }
.side-tag { margin-left: auto; font-size: .68rem; font-weight: 700; padding: .05rem .45rem; border-radius: 62.4375rem; background: var(--surface-3); color: var(--ink); }
.side-link.active .side-tag { background: rgba(255, 255, 255, .2); color: #fff; }
.side-nav-inner > .side-nav-label:first-child { padding-top: .35rem; }
/* The top bar's menu button collapses the side menu; it only shows on pages that have one. */
.nav-side-toggle { display: none; font-size: 1.35rem; }
@media (min-width: 992px) {
  body:has(.side-nav) .nav-side-toggle { display: inline-grid; }
  /* On side-menu pages the top bar spans the full width, so the menu button sits above the side menu's icons. */
  body:has(.side-nav:not(.is-overlay)) .site-nav > .container-xl { max-width: none; padding-left: 1.125rem; }
  :is(.side-link, .side-cta) > span:not(.side-tag, .side-count) {
    max-width: 12rem; opacity: 1; overflow: hidden; white-space: nowrap;
    transition: opacity .18s var(--ease) .06s, max-width .28s var(--ease);
  }
  .side-collapsed .side-nav { width: 4.5rem; }
  /* The inner column narrows with the rail too, so the centred icons land inside it instead of being clipped. */
  .side-nav-inner { transition: width .28s var(--ease); }
  .side-collapsed .side-nav-inner { width: 4.5rem; padding-inline: .6rem; }
  .side-collapsed :is(.side-link, .side-cta) { position: relative; justify-content: center; gap: 0; padding-inline: 0; }
  .side-collapsed :is(.side-link, .side-cta) > span:not(.side-tag, .side-count) {
    opacity: 0; max-width: 0; pointer-events: none;
    transition: opacity .15s var(--ease), max-width .28s var(--ease);
  }
  .side-collapsed .side-tag { opacity: 0; max-width: 0; overflow: hidden; padding: 0; margin: 0; pointer-events: none; }
  .side-collapsed .side-count { position: absolute; top: .15rem; right: .3rem; min-width: 1rem; padding: 0 .25rem; font-size: .6rem; }
  .side-collapsed .side-nav-label { color: transparent; font-size: .68rem; letter-spacing: 0; padding: .85rem .4rem; position: relative; }
  .side-collapsed .side-nav-label::before { content: ""; position: absolute; left: .4rem; right: .4rem; top: 50%; border-top: 1px solid var(--line); }
  /* A divider above the first link would only leave a blank band at the top of the rail. */
  .side-collapsed .side-nav-inner { padding-top: .6rem; }
  .side-collapsed .side-nav-inner > .side-nav-label:first-child { display: none; }
}
/* Course player: the learner menu slides over the lesson, full width, instead of sitting beside it. */
.side-nav.is-overlay { position: fixed; z-index: 1035; top: 4rem; bottom: 0; left: 0; width: 15rem; box-shadow: var(--shadow-lg); transform: translateX(-100%); visibility: hidden; transition: transform .28s var(--ease), visibility 0s linear .28s; }
.side-nav.is-overlay.is-open { transform: none; visibility: visible; transition: transform .28s var(--ease); }
.side-nav.is-overlay .side-nav-inner { position: static; width: 15rem; height: 100%; }
.side-overlay-backdrop { display: none; }
.side-nav.is-overlay.is-open + .side-overlay-backdrop { display: block; position: fixed; inset: 4rem 0 0; z-index: 1034; background: rgba(var(--night-rgb), .25); }
@media (max-width: 991.98px) { .side-nav.is-overlay, .side-nav.is-overlay + .side-overlay-backdrop { display: none !important; } }
.apply-icon { width: 3rem; height: 3rem; border-radius: .8rem; display: grid; place-items: center; margin-bottom: 1rem; font-size: 1.3rem; background: var(--surface-3); color: var(--ink); }
.apply-summary { margin: 0; padding: 1rem; border-radius: .75rem; background: var(--surface-2); font-size: .9rem; }
.apply-summary dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.apply-summary dd { margin-bottom: .75rem; overflow-wrap: anywhere; }
.apply-summary dd:last-child { margin-bottom: 0; }
@media (max-width: 991.98px) {
  .side-cta { margin: 0 .25rem 0 0; flex-shrink: 0; }
  .learner-shell { flex-direction: column; min-height: 0; }
  .side-nav { flex: none; border-right: 0; border-bottom: 1px solid var(--line); }
  .side-nav-inner { position: static; height: auto; flex-direction: row; overflow-x: auto; padding: .6rem 1rem; scrollbar-width: none; }
  .side-nav-label { display: none; }
  .side-nav-foot { margin: 0; padding: 0; border: 0; flex-direction: row; gap: .15rem; }
}

/* Bootstrap's colour helpers follow the theme: blues instead of green, yellow and cyan. */
.text-warning { color: var(--lagoon) !important; }
.btn-success { --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--lagoon); --bs-btn-hover-border-color: var(--lagoon); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--navy); --bs-btn-active-border-color: var(--navy); --bs-btn-disabled-bg: var(--navy); --bs-btn-disabled-border-color: var(--navy); }
.text-success, .text-info, .text-primary { color: var(--lagoon) !important; }
[data-bs-theme="dark"] :is(.text-warning, .text-success, .text-info, .text-primary) { color: #8fb8d8 !important; }

/* Bootstrap's background utilities follow the theme surfaces. */
.bg-body { background-color: var(--surface) !important; }
.bg-body-tertiary { background-color: var(--surface-3) !important; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- Institution workspace (/org/<slug>/) ---- */
.org-badge { display: flex; align-items: center; gap: .65rem; padding: .75rem .85rem 1rem; margin-bottom: .25rem; border-bottom: 1px solid var(--line); }
.org-badge img { border-radius: .5rem; object-fit: cover; }
.org-initial { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: .5rem; background: var(--lagoon); color: var(--white); font-weight: 700; }
.org-initial-lg { width: 48px; height: 48px; font-size: 1.25rem; }
html.side-collapsed .org-badge > .min-w-0 { display: none; }
@media (min-width: 992px) { html.side-collapsed .org-badge { justify-content: center; padding-inline: 0; } }
.join-code { font: 700 1.75rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; color: var(--lagoon); background: var(--surface-2); border: 1px dashed var(--lagoon); border-radius: .75rem; padding: .75rem 1rem; text-align: center; margin-bottom: .75rem; }
.join-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .15em; text-transform: uppercase; }
.pick-list { max-height: 420px; overflow-y: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pick-row { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; cursor: pointer; border-bottom: 1px solid var(--line); margin: 0; }
.pick-row:last-child { border-bottom: 0; }
.pick-row:hover { background: rgba(0, 90, 156, .05); }
.place-group { padding: 1rem; border: 1px solid var(--line); border-radius: .75rem; margin-bottom: .75rem; }
.place-group:last-child { margin-bottom: 0; }
.room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }
.room-tile { border: 1px solid var(--line); border-radius: .65rem; padding: .65rem .75rem; background: var(--bs-body-bg); }
details.card > summary { cursor: pointer; list-style: none; }
details.card > summary::-webkit-details-marker { display: none; }
details.card > summary::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; float: right; color: var(--lagoon); }
details.card[open] > summary::after { content: "\f068"; }
.timetable th, .timetable td { min-width: 130px; vertical-align: top; }
.timetable th:first-child { min-width: 200px; position: sticky; left: 0; background: var(--bs-body-bg); z-index: 1; }
.timetable .is-today { background: rgba(0, 90, 156, .05); }
.timetable .booking { display: flex; flex-direction: column; font-size: .78rem; background: var(--lagoon); color: var(--white); border-radius: .4rem; padding: .3rem .45rem; margin-bottom: .3rem; max-width: 180px; }
.timetable .booking b { font-weight: 600; }
.scope-pill { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; color: var(--navy); background: rgba(0, 90, 156, .08); border-radius: 999px; padding: .2rem .75rem; }
.context-switch .dropdown-item.active { background: rgba(0, 90, 156, .1); color: var(--lagoon); font-weight: 600; }
.org-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--navy); background: rgba(0, 90, 156, .08); border-radius: 999px; padding: .1rem .55rem; margin-top: .25rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[data-bs-theme="dark"] .org-tag { color: #b3cde1; background: rgba(122, 181, 226, .14); }

/* ---- Lesson video: Video.js in the theme's blue, bookmarks under it ---- */
.video-stage .video-js { position: absolute; inset: 0; width: 100%; height: 100%; background: #000411; }
.vjs-whynot .vjs-play-progress, .vjs-whynot .vjs-volume-level { background: var(--lagoon); }
.vjs-whynot .vjs-big-play-button { border: 0; border-radius: 50%; width: 2.2em; height: 2.2em; line-height: 2.2em; margin-left: -1.1em; margin-top: -1.1em; left: 50%; top: 50%; background: rgba(0, 90, 156, .85); }
.vjs-whynot:hover .vjs-big-play-button, .vjs-whynot .vjs-big-play-button:focus { background: var(--lagoon); }
.vjs-whynot .vjs-control-bar { background: linear-gradient(transparent, rgba(0, 4, 17, .85)); height: 3.4em; }
.vjs-whynot .vjs-text-track-display .vjs-text-track-cue > div { background: rgba(0, 4, 17, .75) !important; border-radius: .25rem; }
.bookmarks-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.bookmark-add { display: flex; gap: .5rem; flex: 1 1 320px; max-width: 520px; }
.bookmark-list { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 auto; }
.bookmark-chip { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-2); max-width: 260px; }
.bookmark-jump { display: inline-flex; gap: .35rem; align-items: center; border: 0; background: none; padding: .15rem .25rem .15rem .65rem; font-size: .8rem; min-width: 0; color: inherit; }
.bookmark-jump b { color: var(--lagoon); }
.bookmark-jump span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-remove { border: 0; background: none; color: var(--muted); padding: .15rem .55rem .15rem .25rem; font-size: .75rem; }
.bookmark-remove:hover { color: var(--danger); }

/* ---- Security settings ---- */
.mfa-qr svg { width: 184px; height: 184px; background: #fff; padding: 8px; border-radius: .75rem; border: 1px solid var(--line); }
.mfa-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .25em; }
.backup-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .4rem 1.5rem; padding-left: 1.25rem; margin-bottom: 1rem; }
.backup-codes code { font-size: .95rem; color: var(--navy); }
[data-bs-theme="dark"] .backup-codes code { color: #b3cde1; }
.skip-link { position: absolute; left: 1rem; top: -3rem; z-index: 2000; background: var(--lagoon); color: #fff; padding: .5rem 1rem; border-radius: .5rem; font-weight: 600; transition: top .15s; }
.skip-link:focus { top: .75rem; color: #fff; }
.qa-stale { display: flex; gap: .4rem; align-items: center; font-size: .78rem; color: var(--navy); background: rgba(0, 90, 156, .08); border-radius: .4rem; padding: .25rem .55rem; margin: .35rem 0; }
[data-bs-theme="dark"] .qa-stale { color: #b3cde1; }
.qa-actions a { font-size: .8rem; color: var(--muted); text-decoration: none; }
.vsc-history { display: grid; gap: 1px; }
.vsc-history-row { display: grid; grid-template-columns: 1.25rem 9rem 1fr 3.5rem auto; align-items: center; gap: .6rem; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid #2b2b2b; color: #cccccc; padding: .4rem .25rem; font-size: .82rem; }
.vsc-history-row:hover { background: #2a2d2e; }
.vsc-history-row.is-pass i, .vsc-history-row.is-pass .vsc-history-verdict { color: #89d185; }
.vsc-history-row.is-fail i, .vsc-history-row.is-fail .vsc-history-verdict { color: #f48771; }
.vsc-history-when { white-space: nowrap; }

/* ---- Maths: KaTeX output and the equation editor ---- */
.katex-display { overflow-x: auto; overflow-y: hidden; padding: .25rem 0; }
/* Equation notebook (math.js): a paper sheet to write on, tabbed symbol pages and a row of cursor keys. */
/* Sizable: drag the bottom-right corner, or Enlarge to fill the screen. The symbol keys fill the space. */
.math-dialog { border: 0; border-radius: 1.1rem; padding: 0; width: min(48rem, calc(100vw - 2rem)); min-width: min(22rem, calc(100vw - 2rem)); min-height: 34rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); background: var(--surface); color: var(--bs-body-color); box-shadow: 0 1.5rem 4rem -1rem rgba(var(--night-rgb), .35); overflow: auto; resize: both; container-type: inline-size; }
.math-dialog.is-max { width: calc(100vw - 2rem); height: calc(100vh - 2rem); resize: none; }
.math-dialog::backdrop { background: rgba(0, 4, 17, .45); backdrop-filter: blur(2px); }
.math-dialog form { display: flex; flex-direction: column; height: 100%; }
.math-head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem .85rem; }
.math-head-icon { width: 2.5rem; height: 2.5rem; flex: none; border-radius: .75rem; display: grid; place-items: center; background: var(--lagoon); color: #fff; font-size: 1.3rem; }
.math-close { width: 2.25rem; height: 2.25rem; flex: none; border: 0; border-radius: .625rem; display: grid; place-items: center; background: var(--surface-3); color: var(--ink); font-size: 1.05rem; }
.math-close:hover { background: rgba(var(--lagoon-rgb), .12); color: var(--lagoon); }
/* Paper: warm, with a fine grain and faint graph squares. The equation notebook writes on it, and every
   rendered equation (lessons, notes, Q&A, discussions) sits on it too. */
:is(.math-paper, .math-on-paper) { --paper: #fbf7ee; --paper-grid: rgba(120, 98, 60, .09); --paper-edge: #e9e1cf; --paper-ink: #2b2a26;
  color: var(--paper-ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(var(--paper-grid) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
    linear-gradient(90deg, var(--paper-grid) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
    var(--paper);
}
[data-bs-theme="dark"] :is(.math-paper, .math-on-paper) { --paper: #2a2823; --paper-grid: rgba(255, 240, 210, .06); --paper-edge: #3a372f; --paper-ink: #ece6d8; }
/* The notebook's sheet, lifted off a second one. */
.math-paper { position: relative; flex: 1 1 auto; min-height: 15rem; display: flex; flex-direction: column; margin: .15rem 1.1rem .5rem; padding: 1.25rem 1.4rem .85rem; border-radius: .5rem;
  box-shadow: 0 0 0 1px var(--paper-edge), 0 1px 2px rgba(60, 45, 20, .08), 4px 5px 0 -1px var(--paper), 4px 5px 0 0 var(--paper-edge), 0 .75rem 1.5rem -1rem rgba(60, 45, 20, .35); }
/* Rendered equations: a paper card when on their own line, a paper chip inline. */
:is(.article-body, .qa-text, .post .body, [data-math]) .katex-display.math-on-paper { margin: .75rem 0; padding: .85rem 1rem; border-radius: .5rem; box-shadow: 0 0 0 1px var(--paper-edge), 0 1px 2px rgba(60, 45, 20, .06); }
:is(.article-body, .qa-text, .post .body, [data-math]) .katex.math-on-paper { padding: .05em .35em; border-radius: .3rem; box-shadow: 0 0 0 1px var(--paper-edge); background-size: auto, .75rem .75rem, .75rem .75rem, auto; }
.katex-display.math-on-paper > .katex { color: inherit; }
.math-paper .math-field { color: inherit; }
/* The writing space takes most of the sheet and grows with the notebook; the preview stays at its foot. */
.math-slot { flex: 1 1 auto; min-height: 9rem; display: flex; align-items: flex-start; color: var(--muted); }
.math-field { display: block; width: 100%; min-height: 9rem; height: 100%; font-size: 1.9rem; padding: .35rem .25rem; border: 0; background: transparent; color: var(--ink); outline: none;
  --caret-color: var(--lagoon); --selection-background-color: rgba(var(--lagoon-rgb), .18); --contains-highlight-background-color: rgba(var(--lagoon-rgb), .06); --placeholder-color: var(--lagoon); }
.math-field::part(virtual-keyboard-toggle), .math-field::part(menu-toggle) { display: none; }
/* Live preview, rendered as in the note, under a dashed fold. */
.math-preview { margin-top: .5rem; padding-top: .55rem; border-top: 1px dashed rgba(120, 98, 60, .3); }
.math-preview-label { display: block; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(90, 74, 46, .7); margin-bottom: .2rem; }
[data-bs-theme="dark"] .math-preview-label { color: rgba(236, 230, 216, .55); }
.math-preview-out { min-height: 1.8rem; font-size: 1.15rem; overflow-x: auto; overflow-y: hidden; }
.math-preview-out .katex-display { margin: .25rem 0; }
.math-preview-out.is-empty { font-size: .8rem; font-style: italic; opacity: .6; }
/* Notebook divider tabs sitting on the symbol sheet. */
.math-tabs { display: flex; gap: .25rem; margin: 1rem 1.1rem 0; overflow-x: auto; scrollbar-width: none; }
.math-tabs::-webkit-scrollbar { display: none; }
.math-tab { flex: none; border: 0; border-radius: .7rem .7rem 0 0; padding: .5rem .9rem; background: transparent; color: var(--muted); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.math-tab:hover { color: var(--ink); background: var(--surface-2); }
.math-tab.active, .math-tab.active:hover { background: var(--surface-3); color: var(--lagoon); }
.math-sheet { flex: 0 1 auto; min-height: 9rem; display: flex; flex-direction: column; margin: 0 1.1rem; padding: .75rem; border-radius: 0 .85rem .85rem .85rem; background: var(--surface-3); }
.math-sheet [data-math-pages] { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.math-keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); grid-auto-rows: minmax(2.9rem, auto); gap: .4rem; }
.math-dialog:not([style*="height"]):not(.is-max) .math-sheet [data-math-pages] { max-height: 13rem; }
.math-keys[hidden] { display: none; }
.math-key { min-height: 2.9rem; padding: .25rem; border: 0; border-radius: .65rem; display: grid; place-items: center; background: var(--surface); color: var(--ink); font-size: 1rem; box-shadow: 0 1px 0 var(--line-strong); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), transform .08s var(--ease); }
.math-key .katex { font-size: 1.05em; }
.math-key:hover { background: rgba(var(--lagoon-rgb), .1); color: var(--lagoon); }
.math-key:active { transform: scale(.95); }
.math-moves { display: flex; gap: .4rem; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--line); }
.math-move { flex: 1; height: 2.4rem; border: 0; border-radius: .65rem; display: grid; place-items: center; background: var(--surface); color: var(--ink); font-size: 1.1rem; box-shadow: 0 1px 0 var(--line-strong); }
.math-move:hover { background: rgba(var(--lagoon-rgb), .1); color: var(--lagoon); }
.math-move[data-math-move="clear"]:hover { background: rgba(var(--danger-rgb), .1); color: var(--danger); }
.math-foot { display: flex; align-items: center; gap: .5rem; padding: .9rem 1.1rem 1rem; }
/* A wider notebook writes bigger. */
@container (min-width: 52rem) {
  .math-field { font-size: 2.4rem; }
  .math-preview-out { font-size: 1.45rem; }
  .math-key { min-height: 3.5rem; font-size: 1.2rem; }
  .math-keys { grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); grid-auto-rows: minmax(3.5rem, auto); }
}
@media (max-width: 575.98px) { .math-move { font-size: 1rem; } }
.math-btn { font-family: "Times New Roman", serif; font-style: italic; font-weight: 700; }
.rollcall tr.is-flash > * { animation: rollcall-flash 1.6s ease-out; }
@keyframes rollcall-flash { from { background: rgba(0, 90, 156, .18); } to { background: transparent; } }
.qa-live-pill { display: block; margin: .5rem 1rem 0; text-align: center; font-size: .82rem; font-weight: 600; color: var(--white); background: var(--lagoon); border-radius: 999px; padding: .35rem .75rem; text-decoration: none; }
.qa-live-pill:hover { background: var(--navy); color: var(--white); }

/* Studio: where a coding lesson's learners write code (course_curriculum.html, curriculum.js). */
.coding-envs { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .5rem; }
.coding-env { display: flex; gap: .65rem; align-items: flex-start; padding: .6rem .75rem; text-align: left; border: 1px solid var(--line); border-radius: .6rem; background: var(--surface); color: inherit; }
.coding-env > i { flex: none; width: 1.25rem; margin-top: .15rem; font-size: 1.1rem; text-align: center; color: var(--lagoon); }
.coding-env-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.coding-env:hover { border-color: var(--lagoon); }
.coding-env.is-selected { border-color: var(--lagoon); box-shadow: 0 0 0 2px rgba(0, 90, 156, .2); }