/* DML Learning Platform — hand-written, no build step, system fonts only (low bandwidth).
   Brand: DML Technologies. Blue and black on light surfaces, navy with red on dark ones,
   and the logo's square "pixels" as the unit of progress (board strips, traces, markers). */

:root {
  --paper: #f5f6f8;
  --surface: #ffffff;
  --ink: #12161f;
  --ink-soft: #4b5468;
  --line: #dde1e8;
  --primary: #1670ad;
  --primary-ink: #ffffff;
  --primary-soft: #e3f0f9;
  /* "Lit": done and progress, the logo's sky-blue pixels. */
  --lamp: #23a1de;
  --lamp-soft: #dcf0fa;
  --lamp-ink: #05202f;
  /* DML red: the brand's accent, used sparingly for what needs attention first. */
  --accent: #c62a2f;
  --accent-soft: #fbe9e9;
  --accent-on-dark: #ef5b5f;
  --warn: #f2b705;
  --warn-soft: #fff4cc;
  --danger: #a8201a;
  --danger-soft: #fdecea;
  --focus: #1f5fd1;
  /* Dark brand panels keep their colour in dark mode too. */
  --brand-navy: #161a25;
  --brand-navy-line: #2c3446;
  --brand-navy-soft: #a7b0c2;

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Ubuntu, sans-serif;
  --font-head: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.5625rem;
  --step-3: 2.125rem;
  --step-4: 2.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --line-strong: #c3cad6;
  --shadow-1: 0 1px 2px rgba(18, 22, 31, 0.05), 0 1px 1px rgba(18, 22, 31, 0.03);
  --shadow-2: 0 12px 32px rgba(18, 22, 31, 0.12), 0 2px 6px rgba(18, 22, 31, 0.06);
  --sidebar-w: 16rem;
  --appbar-h: 3.75rem;
  --measure: 70ch;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    --paper: #0d1119;
    --surface: #161b26;
    --ink: #e9edf4;
    --ink-soft: #a7b0c2;
    --line: #2a3243;
    --primary: #5fb4e8;
    --primary-ink: #0b1620;
    --primary-soft: #15304a;
    --lamp: #48b3e8;
    --lamp-soft: #12324a;
    --lamp-ink: #04131d;
    --accent: #ef6064;
    --accent-soft: #3a1a1c;
    --warn: #f5c533;
    --warn-soft: #3a3013;
    --danger: #ff8a7a;
    --danger-soft: #3a1a17;
    --focus: #8ab4ff;
    --line-strong: #3a4458;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
    color-scheme: dark;
  }
}
:root[data-appearance="dark"] {
  --paper: #0d1119;
  --surface: #161b26;
  --ink: #e9edf4;
  --ink-soft: #a7b0c2;
  --line: #2a3243;
  --primary: #5fb4e8;
  --primary-ink: #0b1620;
  --primary-soft: #15304a;
  --lamp: #48b3e8;
  --lamp-soft: #12324a;
  --lamp-ink: #04131d;
  --accent: #ef6064;
  --accent-soft: #3a1a1c;
  --warn: #f5c533;
  --warn-soft: #3a3013;
  --danger: #ff8a7a;
  --danger-soft: #3a1a17;
  --focus: #8ab4ff;
  --line-strong: #3a4458;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: var(--step-0)/1.6 var(--font-body);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1, h2, h3 {
  font-family: var(--font-head);
  line-height: 1.2;
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
h1 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: var(--step-2); font-weight: 750; margin-top: var(--space-6); }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0 0 var(--space-4); }

a { color: var(--primary); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

.wrap { width: 100%; max-width: 72rem; margin: 0 auto; padding: 0 var(--space-4); }
main.wrap { flex: 1; padding-top: var(--space-6); padding-bottom: var(--space-7); }

.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: var(--space-2) var(--space-4); z-index: 10; }
.skip:focus { left: var(--space-4); }

[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.muted { color: var(--ink-soft); }
.small { font-size: var(--step--1); }
.lead { font-size: var(--step-1); color: var(--ink-soft); max-width: 46ch; }
.narrow { max-width: 34rem; }

/* Top bar */
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); }
.topbar-inner { display: flex; align-items: center; gap: var(--space-5); min-height: 3.75rem; }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; font-family: var(--font-head); font-weight: 800; font-size: var(--step-1); flex: none; }
.brand-mark { width: 1.75rem; height: 1.75rem; fill: none; stroke: var(--primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark { fill: var(--primary); stroke: none; }
.brand-mark .px-accent { fill: var(--accent); }
.brand-mark .px-soft { fill: var(--lamp); }
.nav { display: flex; align-items: stretch; gap: var(--space-1); flex: 1; min-width: 0; align-self: stretch; }
.nav a { display: flex; align-items: center; padding: 0 var(--space-3); color: var(--ink-soft); text-decoration: none; font-weight: 650; border-bottom: 3px solid transparent; white-space: nowrap; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.account { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; flex: none; }
.account a { color: var(--ink); font-weight: 650; text-decoration: none; }
.account a[aria-current="page"] { color: var(--primary); }
.account .role { font-size: var(--step--1); color: var(--ink-soft); font-weight: 400; }
.inline { display: inline; margin: 0; }
.linklike { background: none; border: 0; padding: var(--space-2) 0; font: inherit; font-weight: 650; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em; }
.linklike:hover { color: var(--ink); }
@media (max-width: 48rem) {
  .topbar-inner { flex-wrap: wrap; gap: 0 var(--space-4); padding-top: var(--space-2); }
  .account { margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; overflow-x: auto; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-2); min-height: 2.75rem; scrollbar-width: none; gap: 0; }
  .nav a { padding: 0 var(--space-2); font-size: 0.9375rem; }
  .account .role { display: none; }
}

.netstatus { background: var(--warn-soft); color: var(--ink); border-bottom: 1px solid var(--warn); padding: var(--space-2) var(--space-4); text-align: center; font-size: var(--step--1); }

.footer { color: var(--ink-soft); font-size: var(--step--1); padding: var(--space-5) 0; border-top: 1px solid var(--line); background: var(--surface); }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 2.875rem; padding: var(--space-2) var(--space-5);
  background: var(--primary); color: var(--primary-ink);
  border: 2px solid var(--primary); border-radius: 999px;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease;
}
.button:hover { filter: brightness(1.06); }
.button:active { transform: translateY(1px); }
.button-quiet { background: transparent; color: var(--primary); }
.button-danger { background: transparent; color: var(--danger); border-color: var(--danger); }
.button-danger:hover { background: var(--danger-soft); filter: none; }
.button-small { min-height: 2.5rem; padding: var(--space-1) var(--space-4); font-size: var(--step--1); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Notices */
.notice { margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); border-left-width: 5px; max-width: var(--measure); }
.notice ul { margin: 0; padding-left: var(--space-5); }
.notice p:last-child { margin-bottom: 0; }
.notice-ok { border-left-color: var(--primary); }
.notice-done { border-left-color: var(--lamp); background: var(--lamp-soft); }
.notice-err { border-left-color: var(--danger); background: var(--danger-soft); }

/* Hero */
.hero { padding: var(--space-6) 0 var(--space-5); max-width: 46rem; }
.hero h1 { font-size: var(--step-4); }

.page-head { margin-bottom: var(--space-5); }
.page-head h1 { margin-bottom: var(--space-2); }
.page-head .lead { margin-bottom: 0; }
.page-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.page-head-meta { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; color: var(--ink-soft); margin: 0; }
.crumbs { font-size: var(--step--1); color: var(--ink-soft); display: flex; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.empty { color: var(--ink-soft); max-width: var(--measure); }
.section { margin-top: var(--space-7); }
.section > h2:first-child { margin-top: 0; }

/* Shared components (rendered by ViewHelpers) */
.badge { display: inline-block; font-size: var(--step--1); font-weight: 700; line-height: 1.4; padding: 0.1rem 0.6rem; border-radius: 999px; background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap; }
.badge-ok { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.badge-draft { background: var(--warn-soft); color: var(--ink); border-color: transparent; }
.badge-done { background: var(--lamp); color: var(--lamp-ink); border-color: transparent; }
.badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.empty-state { background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius-m); padding: var(--space-6) var(--space-5); max-width: 40rem; }
.empty-state h2 { margin-top: 0; font-size: var(--step-1); }
.empty-state p { color: var(--ink-soft); }
.empty-state p:last-child { margin-bottom: 0; }
.error-summary a { color: var(--danger); font-weight: 600; }
.optional { color: var(--ink-soft); font-weight: 400; }
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); margin: 0 0 var(--space-5); overflow-x: auto; }
.tabs a { padding: var(--space-2) var(--space-3); color: var(--ink-soft); text-decoration: none; font-weight: 650; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--primary); }
.row-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.row-actions form { margin: 0; }
.row-actions select, .row-actions input:not([type=radio]) { width: auto; min-width: 9rem; }
.icon-button { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font: inherit; font-weight: 700; cursor: pointer; }
.icon-button:hover:not(:disabled) { color: var(--ink); border-color: var(--ink-soft); }
.icon-button:disabled { opacity: 0.35; cursor: default; }
.secret { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--step-1); letter-spacing: 0.04em; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-1) var(--space-3); user-select: all; display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.steps { padding-left: var(--space-5); margin: 0; }
.steps > li { padding-bottom: var(--space-5); }
.steps > li::marker { font-family: var(--font-head); font-weight: 800; color: var(--primary); }
.steps h2 { font-size: var(--step-1); margin: 0 0 var(--space-2); }
.recovery-codes { list-style: none; padding: 0; margin: var(--space-3) 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.recovery-codes code, .secret code { font-size: var(--step-0); }
code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.code-input, .code-field input { font-size: var(--step-2) !important; letter-spacing: 0.3em; max-width: 14rem; font-variant-numeric: tabular-nums; }
.confirm[open] form + form { margin-top: var(--space-1); }
.danger-zone { border-top: 1px solid var(--line); margin-top: var(--space-6); padding-top: var(--space-5); }
.danger-zone h2 { font-size: var(--step-1); }

/* Course lists */
.course-list, .progress-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.course-list li, .progress-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); }
.course-list a, .progress-list a { font-family: var(--font-head); font-weight: 750; font-size: var(--step-1); text-decoration: none; color: var(--ink); }
.course-list a:hover, .progress-list a:hover { color: var(--primary); }
.course-list p { color: var(--ink-soft); margin: var(--space-2) 0 0; font-size: var(--step--1); }
.progress-list p { margin: var(--space-1) 0 0; }

.meter { display: block; width: 100%; height: 0.625rem; margin-top: var(--space-3); appearance: none; border: 0; border-radius: 999px; background: var(--primary-soft); overflow: hidden; }
.meter::-webkit-progress-bar { background: var(--primary-soft); border-radius: 999px; }
.meter::-webkit-progress-value { background: var(--primary); border-radius: 999px; }
.meter::-moz-progress-bar { background: var(--primary); border-radius: 999px; }

.pager { display: flex; gap: var(--space-5); margin-top: var(--space-5); }

/* Course page */
.course-layout { display: grid; gap: var(--space-6); }
@media (min-width: 52rem) {
  .course-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .course-outline h2 { margin-top: 0; }
}
.course-intro { max-width: var(--measure); }

/* The circuit trace — the one bold element. */
.trace-module + .trace-module { margin-top: var(--space-5); }
.trace-module-title { font-size: var(--step-0); color: var(--ink-soft); font-weight: 700; margin-bottom: var(--space-3); }
.trace-list { list-style: none; margin: 0; padding: 0; position: relative; }
.trace-node { position: relative; display: flex; gap: var(--space-4); align-items: flex-start; padding-bottom: var(--space-5); }
.trace-node:last-child { padding-bottom: 0; }
.trace-node::before {
  content: ""; position: absolute; left: calc(1.125rem - 2px); top: 2.25rem; bottom: 0;
  width: 4px; border-radius: 2px; background: var(--line);
}
.trace-node:last-child::before { display: none; }
.trace-node.is-done::before { background: var(--lamp); }
.trace-dot {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: var(--step--1);
  background: var(--surface); color: var(--ink-soft); border: 3px solid var(--line);
  position: relative; z-index: 1;
}
.trace-node.is-done .trace-dot { background: var(--lamp); border-color: var(--lamp); color: var(--lamp-ink); box-shadow: 0 0 0 5px var(--lamp-soft); }
.trace-node.is-current .trace-dot { border-color: var(--primary); color: var(--primary); }
.trace-text { display: flex; flex-direction: column; padding-top: 0.25rem; }
.trace-text a { font-weight: 650; color: var(--ink); }
.trace-text a:hover { color: var(--primary); }
.trace-meta { font-size: var(--step--1); color: var(--ink-soft); }

/* Lesson */
.lesson-layout { display: grid; gap: var(--space-6); }
@media (min-width: 60rem) { .lesson-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } .lesson-side { position: sticky; top: var(--space-5); } }
.lesson-side { border-top: 1px solid var(--line); padding-top: var(--space-5); }
@media (min-width: 60rem) { .lesson-side { border-top: 0; padding-top: 0; border-left: 1px solid var(--line); padding-left: var(--space-5); } }
.side-title { font-size: var(--step-1); margin-top: 0; }
.lesson { max-width: var(--measure); }
.prose { font-size: 1.125rem; line-height: 1.7; margin-bottom: var(--space-5); }
.lesson-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: var(--measure); margin-top: var(--space-6); }
.pager { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); text-decoration: none; color: var(--ink); min-width: 0; }
.pager:hover { border-color: var(--primary); }
.pager-next { text-align: right; grid-column: 2; }
.pager-dir { font-size: var(--step--1); color: var(--ink-soft); }
.pager-title { font-weight: 650; color: var(--primary); overflow-wrap: anywhere; }
.pager-prev .pager-dir::before { content: "\2190\00a0"; }
.pager-next .pager-dir::after { content: "\00a0\2192"; }
@media (max-width: 30rem) { .lesson-nav { grid-template-columns: 1fr; } .pager-next { grid-column: 1; } }
.lesson-head { margin-bottom: var(--space-5); }

/* Quiz */
.quiz-rules { color: var(--ink-soft); }
.question { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-4); }
.question legend { float: left; width: 100%; font-weight: 700; padding: 0; margin: 0 0 var(--space-3); }
.question legend + * { clear: both; }
.q-num { color: var(--primary); font-family: var(--font-head); }
.choice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3); margin: var(--space-1) 0; border-radius: var(--radius-s); cursor: pointer; min-height: 2.75rem; }
.choice:hover { background: var(--primary-soft); }
.choice input { margin-top: 0.3rem; width: 1.25rem; height: 1.25rem; accent-color: var(--primary); flex: none; }
.choice:has(input:checked) { background: var(--primary-soft); outline: 2px solid var(--primary); }

.result .score { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; }
.score-num { font-family: var(--font-head); font-weight: 800; font-size: 4rem; line-height: 1; }
.result.is-pass .score-num { color: var(--primary); }
.score-detail { font-size: var(--step-1); color: var(--ink-soft); }

/* Forms */
.form { display: grid; gap: var(--space-4); }
.form > .button { justify-self: start; }
.field { display: grid; gap: var(--space-1); border: 0; padding: 0; margin: 0; min-width: 0; }
.field legend { font-weight: 650; margin-bottom: var(--space-1); padding: 0; }
label { font-weight: 650; }
.choice, .choice span { font-weight: 400; }
.hint { color: var(--ink-soft); font-size: var(--step--1); margin: 0; }
input:not([type=radio]):not([type=checkbox]), select, textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3); min-height: 2.75rem; width: 100%;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
[aria-invalid="true"] { border-color: var(--danger) !important; }
.field-error { color: var(--danger); font-size: var(--step--1); font-weight: 600; margin: 0; }
.option-row { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-2); }
.option-row input[type=radio] { width: 1.25rem; height: 1.25rem; accent-color: var(--primary); flex: none; }
details > summary { cursor: pointer; font-weight: 650; color: var(--primary); padding: var(--space-1) 0; }
.advanced { border-top: 1px solid var(--line); padding-top: var(--space-3); }
.advanced[open] > summary { margin-bottom: var(--space-3); }

/* Teaching */
.teach-layout { display: grid; gap: var(--space-6); }
@media (min-width: 60rem) { .teach-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.teach-layout h2 { margin-top: 0; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-5); }
.panel + .panel { margin-top: var(--space-5); }
.panel h2 { font-size: var(--step-1); }
.t-module { border-left: 4px solid var(--line); padding-left: var(--space-4); margin-bottom: var(--space-6); }
.t-module-head { display: flex; align-items: baseline; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-2); }
.t-module-head h3 { margin: 0; }
.inline-edit > summary { font-size: var(--step--1); font-weight: 600; }
.inline-edit[open] { flex-basis: 100%; display: grid; gap: var(--space-2); }
.inline-edit input { max-width: 24rem; }
.t-lessons { padding-left: var(--space-5); margin: 0; }
.t-lessons li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.t-lessons li:last-child { border-bottom: 0; }
.t-lessons li::marker { color: var(--ink-soft); font-weight: 700; }
.t-lesson-main { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.t-lesson-title { font-weight: 650; color: var(--ink); margin-right: var(--space-1); }
details.panel > summary { font-family: var(--font-head); font-size: var(--step-1); color: var(--ink); }
details.panel[open] > summary { margin-bottom: var(--space-4); }
.confirm > summary { color: var(--danger); font-weight: 650; display: inline; }
.confirm.menu > summary { color: var(--primary); }
.confirm[open] { display: grid; gap: var(--space-2); justify-items: end; text-align: left; }
.danger-zone .confirm[open] { justify-items: start; }
.q-list { padding-left: var(--space-5); margin: 0 0 var(--space-5); }
.q-list > li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.q-prompt { font-weight: 650; margin-bottom: var(--space-2); }
.q-options { list-style: none; padding: 0; margin: 0 0 var(--space-2); display: grid; gap: var(--space-1); }
.q-options li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-s); background: var(--paper); }
.q-options li.is-correct { background: var(--primary-soft); color: var(--primary); font-weight: 650; }
.q-options li.is-correct::before { content: "✓ "; }
.choice.is-correct { background: var(--primary-soft); }
fieldset[disabled] .choice { cursor: default; }
.activity { list-style: none; padding: 0; margin: 0; max-width: 48rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.activity li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.activity li:last-child { border-bottom: 0; }
.tag { display: inline-block; font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); margin-right: var(--space-2); }
.q-builder { margin-top: var(--space-2); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-m); padding: var(--space-2) var(--space-4); }
.q-builder[open] { padding-bottom: var(--space-4); }
.status { display: inline-block; font-size: var(--step--1); font-weight: 700; padding: 0.15rem 0.65rem; border-radius: 999px; margin-right: var(--space-3); }
.status-draft { background: var(--warn-soft); color: var(--ink); }
.status-published { background: var(--primary-soft); color: var(--primary); }

.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.table-wrap .table { border: 0; border-radius: 0; }
.table-wrap + p { margin-top: var(--space-3); }
.table td .small { display: block; }
.table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.table th, .table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.table th { font-size: var(--step--1); color: var(--ink-soft); white-space: nowrap; }
.table td { vertical-align: middle; }
.table a { font-weight: 650; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
.table tr:last-child td { border-bottom: 0; }

@media (max-width: 30rem) {
  h1 { font-size: var(--step-2); }
  .hero h1 { font-size: var(--step-3); }
  .hide-narrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Lesson text (Markdown) */
.lesson-kind { font-size: var(--step--1); font-weight: 650; color: var(--primary); margin-bottom: var(--space-1); }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: var(--step-2); margin: var(--space-6) 0 var(--space-3); }
.prose h3 { font-size: var(--step-1); margin: var(--space-5) 0 var(--space-2); }
.prose h4 { font-size: var(--step-0); margin: var(--space-4) 0 var(--space-2); }
.prose ul, .prose ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-1); }
.prose li > ul, .prose li > ol { margin: var(--space-1) 0 0; }
.prose :not(pre) > code { font-size: 0.9em; background: var(--primary-soft); color: var(--ink); padding: 0.05em 0.35em; border-radius: 4px; overflow-wrap: anywhere; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
.prose blockquote { margin: 0 0 var(--space-4); padding: var(--space-1) var(--space-4); border-left: 4px solid var(--line); color: var(--ink-soft); }
.prose a.external::after { content: " ↗"; font-size: 0.8em; }
.prose-small { font-size: var(--step-0); line-height: 1.6; margin-bottom: var(--space-3); }
.code-block { position: relative; margin: 0 0 var(--space-4); border-radius: var(--radius-m); background: #0f1a2b; border: 1px solid #23324a; }
.code-block pre { margin: 0; padding: var(--space-4); overflow-x: auto; color: #e6edf6; font-size: 0.9rem; line-height: 1.55; tab-size: 4; }
.code-block code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.code-lang { display: block; padding: var(--space-2) var(--space-4) 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.75rem; letter-spacing: 0.02em; color: #8fa3c0; }
.code-block .code-lang + pre { padding-top: var(--space-2); }
.copy-button { position: absolute; top: var(--space-2); right: var(--space-2); font: inherit; font-size: 0.75rem; font-weight: 700; color: #c9d4e3; background: #1c2a40; border: 1px solid #33455f; border-radius: var(--radius-s); padding: 0.2rem 0.6rem; cursor: pointer; }
.copy-button:hover { color: #fff; border-color: #6b7f9c; }
.callout { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); border: 1px solid var(--line); border-left-width: 5px; background: var(--surface); }
.callout > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 800; margin-bottom: var(--space-1); }
.callout-note { border-left-color: var(--focus); }
.callout-note .callout-title { color: var(--focus); }
.callout-tip { border-left-color: var(--primary); background: var(--primary-soft); }
.callout-tip .callout-title { color: var(--primary); }
.callout-warning, .callout-important { border-left-color: var(--danger); background: var(--danger-soft); }
.callout-warning .callout-title, .callout-important .callout-title { color: var(--danger); }
.md-table { font-size: var(--step--1); }
.md-table th, .md-table td { vertical-align: top; }
.md-table th { white-space: normal; }
.align-center { text-align: center !important; }
.align-right { text-align: right !important; }
.prose .table-wrap { margin-bottom: var(--space-4); }

/* Video lessons: nothing loads until the learner asks. */
.video { margin: 0 0 var(--space-5); }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-m); overflow: hidden; background: #0f1a2b; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-3); padding: var(--space-4); text-align: center; color: #e6edf6; }
.video-note { max-width: 32ch; font-size: var(--step--1); margin: 0; color: #c9d4e3; }
.video figcaption { margin-top: var(--space-2); }

/* Assignments */
.submission-area { border-top: 1px solid var(--line); margin-top: var(--space-5); padding-top: var(--space-2); }
.submission-status { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.feedback { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--lamp); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); }
.feedback-title { font-weight: 700; font-size: var(--step--1); margin-bottom: var(--space-1); }
.history { margin-top: var(--space-5); }
.history-list { padding-left: var(--space-5); margin: var(--space-3) 0 0; }
.history-list > li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.field-code textarea, textarea#answer { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.95rem; line-height: 1.5; }
.review-layout { display: grid; gap: var(--space-6); }
@media (min-width: 60rem) { .review-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } .review-decision { position: sticky; top: var(--space-5); } }
.review-layout h2 { margin-top: 0; }
.submission-body { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); }
.decision-buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; }

/* Quiz review */
.review-answers { margin-top: var(--space-6); }
.answer-list { padding-left: var(--space-5); }
.answer-list > li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.answer-q { font-weight: 650; margin-bottom: var(--space-1); }
.explanation { border-left: 3px solid var(--primary); padding-left: var(--space-3); margin-top: var(--space-2); }

/* Course page */
.checklist { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-2); }
.checklist li { position: relative; padding-left: 1.75rem; }
.checklist li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--primary); }
.badge-level { background: var(--ink); color: var(--surface); border-color: transparent; }
.badge-type-video { background: #e8efff; color: #1f4fb5; border-color: transparent; }
.badge-type-quiz { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.badge-type-assignment { background: var(--lamp-soft); color: var(--ink); border-color: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) .badge-type-video { background: #1d2a4a; color: #9dbbff; }
}
:root[data-appearance="dark"] .badge-type-video { background: #1d2a4a; color: #9dbbff; }
.course-meta { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-2) 0 0; }
.cert-callout .button { margin-top: var(--space-1); }
.cert-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.cert-list li { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--lamp); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); }
.cert-list a { font-weight: 700; }

/* Formatting help */
.format-help { font-size: var(--step--1); }
.format-help[open] { display: grid; gap: var(--space-2); }
.format-table td, .format-table th { padding: var(--space-1) var(--space-3); }

/* Certificate */
.certificate { max-width: 52rem; margin: var(--space-4) auto 0; background: #fffdf6; color: #12161f; border-radius: var(--radius-m); padding: var(--space-3); box-shadow: 0 1px 0 var(--line), 0 12px 32px rgba(20, 33, 61, 0.12); }
.certificate-inner { border: 2px solid #1670ad; outline: 3px solid #23a1de; outline-offset: -12px; border-radius: 6px; padding: var(--space-7) var(--space-6); text-align: center; }
.cert-school { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-head); font-weight: 800; font-size: var(--step-1); margin-bottom: var(--space-5); }
.cert-kicker { font-size: var(--step--1); font-weight: 800; letter-spacing: 0.25em; text-transform: uppercase; color: #1670ad; }
.cert-line { color: #4a5873; margin-bottom: var(--space-2); }
.cert-name { font-family: var(--font-head); font-size: clamp(1.75rem, 5vw, 2.75rem); font-weight: 800; margin-bottom: var(--space-4); border-bottom: 2px solid #d5deea; display: inline-block; padding: 0 var(--space-5) var(--space-2); }
.cert-course { font-family: var(--font-head); font-size: var(--step-2); font-weight: 750; margin-bottom: var(--space-2); }
.cert-detail { color: #4a5873; }
.cert-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-4); margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid #d5deea; font-size: var(--step--1); }
.cert-foot p { margin: 0; }
.cert-label { font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; color: #4a5873; }
.cert-code { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-weight: 700; letter-spacing: 0.05em; }
.cert-url { overflow-wrap: anywhere; }
.certificate.is-revoked .certificate-inner { opacity: 0.55; }
.verify-status { font-family: var(--font-head); font-size: var(--step-1); font-weight: 800; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-4); margin: 0; }
.facts dt { font-weight: 700; color: var(--ink-soft); }
.facts dd { margin: 0; }
.verify-form { margin-top: var(--space-5); }
.footer a { color: var(--ink-soft); }

@media print {
  .topbar, .footer, .netstatus, .no-print, .skip { display: none !important; }
  body { background: #fff; }
  main.wrap { padding: 0; max-width: none; }
  .certificate { box-shadow: none; margin: 0; max-width: none; }
  @page { size: A4 landscape; margin: 12mm; }
}

/* Grid children must be allowed to shrink, or wide code blocks and tables push the page sideways on phones. */
.lesson-layout, .course-layout, .teach-layout, .review-layout { grid-template-columns: minmax(0, 1fr); }
.lesson, .lesson-side, .course-intro, .course-outline { min-width: 0; }
@media (min-width: 60rem) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .teach-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .review-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  /* A long course outline scrolls inside the sticky sidebar instead of running off screen. */
  .lesson-side { max-height: calc(100vh - 2 * var(--space-5)); overflow-y: auto; overscroll-behavior: contain; }
}
@media (min-width: 52rem) { .course-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Files */
.lesson-files { margin: 0 0 var(--space-5); }
.lesson-files h2 { font-size: var(--step-1); margin-top: var(--space-5); }
.file-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); max-width: var(--measure); }
.file-list li { display: flex; align-items: center; gap: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-2) var(--space-3); }
.file-icon { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--radius-s); background: var(--primary-soft); color: var(--primary); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; }
.file-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-main > a { font-weight: 650; overflow-wrap: anywhere; }
.file-list form { margin-left: auto; }
.upload-form { margin-top: var(--space-3); }
input[type=file] { padding: var(--space-2); background: var(--surface); }
.small-heading { font-size: var(--step-0); margin: var(--space-4) 0 var(--space-2); }
.upload-warning { color: var(--danger); font-size: var(--step--1); font-weight: 600; margin: 0; }

/* System page */
.status-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); align-items: start; }
.status-card { background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); min-width: 0; }
.status-card h2 { font-size: var(--step-1); margin: 0 0 var(--space-2); display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.status-card.status-ok { border-left-color: var(--primary); }
.status-card.status-warn { border-left-color: var(--warn); }
.status-card.status-bad { border-left-color: var(--danger); }
.status-card .facts { font-size: var(--step--1); }
.status-card .facts dd { overflow-wrap: anywhere; }
.status-card .table-wrap { margin-top: var(--space-3); }

/* ------------------------------------------------------------------
   Circuit identity: courses drawn as traces whose nodes light up.
   ------------------------------------------------------------------ */

/* Phone header: brand and the sign-in/account link share the first row. */
@media (max-width: 48rem) {
  .brand { flex: 1 1 auto; min-width: 0; font-size: var(--step-0); }
  .brand span { overflow-wrap: anywhere; }
  .account { gap: var(--space-3); }
}

/* Board strip: one node per module. */
.board { list-style: none; display: flex; align-items: center; margin: 0 0 var(--space-3); padding: 0; }
.board-node { display: flex; align-items: center; flex: 1 1 0; min-width: 0; }
.board-node:first-child { flex: 0 0 auto; }
.board-node::before { content: ""; flex: 1; height: 3px; background: var(--line); border-radius: 2px; }
.board-node:first-child::before { display: none; }
.board-node::after { content: ""; flex: none; width: 0.875rem; height: 0.875rem; border-radius: 2px; background: var(--surface); border: 3px solid var(--line); }
.board-node.is-part::after { border-color: var(--lamp); background: linear-gradient(90deg, var(--lamp) 50%, var(--surface) 50%); }
.board-node.is-lit::after { border-color: var(--lamp); background: var(--lamp); box-shadow: 0 0 0 3px var(--lamp-soft); }
.board-node.is-lit + .board-node.is-lit::before,
.board-node.is-lit + .board-node.is-part::before { background: var(--lamp); }
.board-dense .board-node::after { width: 0.625rem; height: 0.625rem; border-width: 2px; }

/* Course cards */
.course-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.course-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5) var(--space-4); min-width: 0; }
.course-card:hover { border-color: var(--primary); }
.course-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.course-card-title { font-size: var(--step-1); margin: 0 0 var(--space-2); }
.course-card-title a { color: var(--ink); text-decoration: none; }
.course-card-title a::after { content: ""; position: absolute; inset: 0; }
.course-card-title a:focus-visible { outline: none; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.section-head h2 { margin-bottom: var(--space-3); }

/* Signed-out home */
.welcome { display: grid; gap: var(--space-6); padding: var(--space-5) 0 var(--space-4); align-items: center; }
@media (min-width: 56rem) { .welcome { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-7); } }
.welcome h1 { font-size: clamp(2.25rem, 6vw, 3.5rem); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: var(--space-4); }
.welcome .lead { max-width: 38ch; margin-bottom: var(--space-5); }
.promise { list-style: none; margin: 0; padding: 0; position: relative; }
.promise::before { content: ""; position: absolute; left: calc(0.875rem - 2px); top: 1rem; bottom: 1rem; width: 4px; border-radius: 2px; background: var(--lamp); }
.promise-step { position: relative; padding: 0 0 var(--space-5) 3rem; }
.promise-step:last-child { padding-bottom: 0; }
.promise-step h2 { font-size: var(--step-1); margin: 0 0 var(--space-1); }
.promise-step p { color: var(--ink-soft); margin: 0; max-width: 40ch; }
.promise-node { position: absolute; left: 0; top: 0.15rem; width: 1.75rem; height: 1.75rem; border-radius: 4px; background: var(--lamp); box-shadow: 0 0 0 6px var(--lamp-soft); }
@media (prefers-reduced-motion: no-preference) {
  /* The one moving moment: the three nodes light up in order, once. */
  .promise-node { animation: light-up 600ms ease-out both; }
  .promise-step:nth-child(2) .promise-node { animation-delay: 350ms; }
  .promise-step:nth-child(3) .promise-node { animation-delay: 700ms; }
}
.verify-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); border-top: 1px solid var(--line); padding-top: var(--space-5); }
.verify-strip h2 { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.verify-strip p { margin: 0; }
.verify-inline { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.verify-inline input { width: 14rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: 0.05em; }

/* Dashboard: the course to continue, drawn like a lit circuit board. */
.continue { background: var(--brand-navy); color: #e9edf4; border-radius: var(--radius-m); padding: var(--space-5) var(--space-5) var(--space-4); margin-bottom: var(--space-6); max-width: 52rem; }
.continue-kicker { color: var(--brand-navy-soft); font-size: var(--step--1); font-weight: 650; margin: 0 0 var(--space-1); }
.continue-title { font-size: var(--step-2); margin: 0 0 var(--space-4); }
.continue-title a { color: #fff; text-decoration: none; }
.continue-title a:hover { text-decoration: underline; }
.continue .board-node::before { background: var(--brand-navy-line); }
.continue .board-node::after { background: var(--brand-navy); border-color: #4a556d; }
.continue .board-node.is-part::after { border-color: #23a1de; background: linear-gradient(90deg, #23a1de 50%, var(--brand-navy) 50%); }
.continue .board-node.is-lit::after { background: #23a1de; border-color: #23a1de; box-shadow: 0 0 0 3px rgba(35, 161, 222, 0.25); }
.continue .board-node.is-lit + .board-node.is-lit::before,
.continue .board-node.is-lit + .board-node.is-part::before { background: #23a1de; }
.continue-progress { color: var(--brand-navy-soft); font-size: var(--step--1); margin: 0 0 var(--space-4); }
.continue-next { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0; }
.continue .button { background: #d52f2f; border-color: #d52f2f; color: #fff; }
.continue .button:hover { background: #b9262a; border-color: #b9262a; }
.continue .muted { color: var(--brand-navy-soft); }
.continue a:focus-visible { outline-color: #8ab4ff; }

.todo-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); max-width: 40rem; }
.todo-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.todo-list a { display: block; padding: var(--space-3) var(--space-4); font-weight: 650; text-decoration: none; }
.todo-list a:hover { text-decoration: underline; }
.todo-list .todo-urgent { border-left: 5px solid var(--accent); }

/* Sign-in pages */
.auth { max-width: 28rem; margin: var(--space-4) auto 0; }
.auth-mark { width: 2.5rem; height: 2.5rem; margin-bottom: var(--space-3); }
.verify-inline #verify-code { width: 14rem; max-width: 100%; }

/* Course page: breathing room under the badges, per-module progress on the trace */
.course-intro > .page-head-meta { margin: var(--space-3) 0 var(--space-4); }
.trace-module-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.trace-module-count { font-size: var(--step--1); font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
.trace-module-count.is-done { color: var(--primary); }

/* Teaching overview on the dashboard: actions in a row, then the course table */
.teaching-table { margin-top: var(--space-3); }
.teaching-lessons { display: block; }
.teaching-table td a { font-weight: 650; }

/* Course editor: lesson title and its controls share one line when there is room */
.t-lesson-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--space-4); row-gap: var(--space-2); }
.t-lesson-row .t-lesson-main { margin-bottom: 0; flex: 1 1 16rem; min-width: 0; }
.t-lesson-row > .row-actions { flex: 0 0 auto; }
@media (max-width: 40rem) {
}
.page-head.narrow .lead + .actions { margin-top: var(--space-5); }

/* ==========================================================================
   School colour themes (SchoolTheme). Each pair checked for WCAG AA:
   links on the page, white text on buttons, and the dark-mode equivalents.
   ========================================================================== */
.theme-dml { --primary: #1670ad; --primary-soft: #e3f0f9; }
.theme-teal { --primary: #0b7a6b; --primary-soft: #e3f2ef; }
.theme-blue { --primary: #1d5fb8; --primary-soft: #e4eefa; }
.theme-green { --primary: #2f7a2f; --primary-soft: #e6f2e6; }
.theme-plum { --primary: #7a3d8f; --primary-soft: #f2e8f6; }
.theme-red { --primary: #b0302a; --primary-soft: #fbe9e8; }
.theme-amber { --primary: #9a5800; --primary-soft: #fbf0e0; }
.theme-navy { --primary: #14213d; --primary-soft: #e6e9f0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) .theme-dml { --primary: #5fb4e8; --primary-soft: #15304a; --primary-ink: #0b1620; }
  :root:not([data-appearance="light"]) .theme-teal { --primary: #3bbfa9; --primary-soft: #133a35; --primary-ink: #06221d; }
  :root:not([data-appearance="light"]) .theme-blue { --primary: #6ea8f0; --primary-soft: #17304f; --primary-ink: #06121f; }
  :root:not([data-appearance="light"]) .theme-green { --primary: #6cc46c; --primary-soft: #1b3a1f; --primary-ink: #06180a; }
  :root:not([data-appearance="light"]) .theme-plum { --primary: #c58ad8; --primary-soft: #33213f; --primary-ink: #1a0b21; }
  :root:not([data-appearance="light"]) .theme-red { --primary: #f08a80; --primary-soft: #42201f; --primary-ink: #230806; }
  :root:not([data-appearance="light"]) .theme-amber { --primary: #f0a840; --primary-soft: #3f2c12; --primary-ink: #231503; }
  :root:not([data-appearance="light"]) .theme-navy { --primary: #a9b6cb; --primary-soft: #26324a; --primary-ink: #06121f; }
}
:root[data-appearance="dark"] .theme-dml { --primary: #5fb4e8; --primary-soft: #15304a; --primary-ink: #0b1620; }
:root[data-appearance="dark"] .theme-teal { --primary: #3bbfa9; --primary-soft: #133a35; --primary-ink: #06221d; }
:root[data-appearance="dark"] .theme-blue { --primary: #6ea8f0; --primary-soft: #17304f; --primary-ink: #06121f; }
:root[data-appearance="dark"] .theme-green { --primary: #6cc46c; --primary-soft: #1b3a1f; --primary-ink: #06180a; }
:root[data-appearance="dark"] .theme-plum { --primary: #c58ad8; --primary-soft: #33213f; --primary-ink: #1a0b21; }
:root[data-appearance="dark"] .theme-red { --primary: #f08a80; --primary-soft: #42201f; --primary-ink: #230806; }
:root[data-appearance="dark"] .theme-amber { --primary: #f0a840; --primary-soft: #3f2c12; --primary-ink: #231503; }
:root[data-appearance="dark"] .theme-navy { --primary: #a9b6cb; --primary-soft: #26324a; --primary-ink: #06121f; }

.brand-logo { height: 2.25rem; width: auto; max-width: 9rem; object-fit: contain; }

/* Footer with the school's contact details */
.footer-inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.footer-name { margin: 0; font-weight: 650; color: var(--ink); }
.footer-tagline { font-weight: 400; color: var(--ink-soft); margin-left: var(--space-2); }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; }

/* ==========================================================================
   Wizard engine: the steps are drawn as a trace, like a course outline.
   ========================================================================== */
.wizard { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-7); align-items: start; }
.wizard-rail { position: sticky; top: var(--space-4); padding-top: var(--space-2); }
.wizard-name { font-family: var(--font-head); font-weight: 800; color: var(--ink-soft); margin: 0 0 var(--space-4); }
.wizard-steps { list-style: none; margin: 0; padding: 0; }
.wstep { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; padding-bottom: var(--space-4); }
.wstep:last-child { padding-bottom: 0; }
.wstep::before { content: ""; position: absolute; left: calc(0.875rem - 2px); top: 1.75rem; bottom: 0; width: 4px; border-radius: 2px; background: var(--line); }
.wstep:last-child::before { display: none; }
.wstep.is-done::before { background: var(--lamp); }
.wstep-dot {
  flex: none; width: 1.75rem; height: 1.75rem; border-radius: 5px; display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 800; font-size: 0.8rem;
  background: var(--surface); color: var(--ink-soft); border: 3px solid var(--line); position: relative; z-index: 1;
}
.wstep.is-done .wstep-dot { background: var(--lamp); border-color: var(--lamp); color: var(--lamp-ink); }
.wstep.is-current .wstep-dot { border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.wstep.is-skipped .wstep-dot { border-style: dashed; }
.wstep-text { display: flex; flex-direction: column; padding-top: 0.1rem; line-height: 1.35; }
.wstep-text a { color: var(--ink); font-weight: 600; }
.wstep-text a:hover { color: var(--primary); }
.wstep.is-current .wstep-text > span:first-child { font-weight: 800; color: var(--ink); }
.wstep.is-todo .wstep-text > span:first-child { color: var(--ink-soft); }
.wstep-note { font-size: 0.8rem; color: var(--ink-soft); }
.wstep-note:empty { display: none; }

.wizard-main { min-width: 0; max-width: 46rem; }
.wizard-count { color: var(--primary); font-weight: 700; font-size: var(--step--1); margin: 0 0 var(--space-1); }
.wizard-main h1 { margin-top: 0; }
.wizard-why { margin-bottom: var(--space-5); }
.wizard-form { gap: var(--space-5); }
.wizard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.wizard-actions-end { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.button-lamp { background: var(--accent); border-color: var(--accent); color: #fff; }
.wizard-foot { margin-top: var(--space-6); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.wizard-foot p { margin: 0; max-width: 40rem; }

.wizard-hello { font-size: var(--step-1); margin-top: 0; }
.wizard-plan { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.wizard-plan li { padding: var(--space-1) 0; }

/* Radio and checkbox choices with a line of explanation */
.pick-list { gap: var(--space-2); }
.pick { border: 1px solid var(--line); background: var(--surface); padding: var(--space-3) var(--space-4); margin: 0; }
.pick > span { display: flex; flex-direction: column; gap: 0.15rem; }
.pick-hint { color: var(--ink-soft); font-size: var(--step--1); }
.pick-meta { color: var(--ink-soft); font-size: var(--step--1); font-weight: 650; }
.pick-row { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); display: grid; }
.pick-row legend { grid-column: 1 / -1; }
.choice-inline { padding-left: 0; margin: 0 0 var(--space-2); }
.field-narrow textarea { max-width: 22rem; }

/* Name and look */
.brand-step { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: var(--space-6); align-items: start; }
.brand-fields { display: grid; gap: var(--space-4); min-width: 0; }
.brand-aside { position: sticky; top: var(--space-4); display: grid; gap: var(--space-5); }
.brand-aside-label { font-weight: 700; color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 var(--space-2); }
.brand-preview { border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; background: var(--paper); }
.bp-bar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border-bottom: 1px solid var(--line); font-family: var(--font-head); font-weight: 800; overflow-wrap: anywhere; }
.bp-bar img { height: 1.75rem; width: auto; max-width: 6rem; object-fit: contain; }
.bp-bar .brand-mark { width: 1.375rem; height: 1.375rem; flex: none; }
.bp-body { padding: var(--space-3); display: grid; gap: var(--space-2); justify-items: start; }
.bp-tagline { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.bp-tagline:empty { display: none; }
.bp-button { background: var(--primary); color: var(--primary-ink); border-radius: 999px; padding: var(--space-1) var(--space-3); font-weight: 700; font-size: var(--step--1); }
.bp-link { color: var(--primary); text-decoration: underline; font-size: var(--step--1); font-weight: 600; }
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.swatch-choice { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font-weight: 600; min-height: 2.75rem; }
.swatch-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch-choice:has(input:checked) { outline: 3px solid var(--ink); outline-offset: 1px; }
.swatch-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.swatch { display: inline-block; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--primary); }
.swatch-inline { width: 1rem; height: 1rem; vertical-align: -0.15rem; }
.logo-current { margin: var(--space-1) 0; padding: var(--space-2); background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius-s); display: inline-block; }
.logo-current img { display: block; height: 3rem; width: auto; max-width: 14rem; object-fit: contain; }
ul.plain { list-style: none; margin: 0 0 var(--space-2); padding: 0; }
.example-block pre { margin: 0; padding: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); overflow-x: auto; font-size: var(--step--1); }
.example-block p { margin: 0 0 var(--space-1); }

/* Review */
.review-sections { display: grid; gap: 0; border-top: 1px solid var(--line); }
.review-section { padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.review-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
.review-head h2 { font-size: var(--step-1); margin: 0; }
.review-section .facts dd { overflow-wrap: anywhere; }
.review-notes { border-left-color: var(--lamp); }

@media (max-width: 56rem) {
  .wizard { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .wizard-rail { position: static; }
  .wizard-name { display: none; }
  /* The trace turns into a row of nodes; only the current step keeps its name. */
  .wizard-steps { display: flex; align-items: center; }
  .wstep { flex: 1 1 0; padding: 0; align-items: center; gap: 0; }
  .wstep:last-child { flex: 0 0 auto; }
  .wstep::before { left: 1.75rem; right: 0; top: calc(50% - 2px); bottom: auto; width: auto; height: 4px; }
  .wstep-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .wstep-dot { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
  .brand-step { grid-template-columns: minmax(0, 1fr); }
  .brand-aside { position: static; order: -1; }
  .brand-address { display: none; }
}
@media (max-width: 30rem) {
  .wizard-actions-end { margin-left: 0; flex-basis: 100%; }
}

/* School settings page */
.settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0 var(--space-7); }
.settings-group { padding: var(--space-4) 0 var(--space-5); border-top: 1px solid var(--line); min-width: 0; }
.settings-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.settings-head h2 { font-size: var(--step-1); margin: 0 0 var(--space-3); }
.settings .facts dd { overflow-wrap: anywhere; }
.settings-look { display: grid; gap: var(--space-3); }
.settings-logo img { height: 3.5rem; width: auto; max-width: 16rem; object-fit: contain; }
.setup-panel { margin-bottom: var(--space-6); }
.launch-result { max-width: 52rem; }
.launch-result h2 { margin-top: 0; }
.setup-nudge { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6); border: 2px solid var(--lamp); background: var(--lamp-soft); border-radius: var(--radius-m); max-width: 52rem; }
.setup-nudge h2 { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.setup-nudge p { margin: 0; max-width: 40rem; }
.welcome-tagline { font-family: var(--font-head); font-size: var(--step-1); font-weight: 700; color: var(--primary); margin: calc(-1 * var(--space-2)) 0 var(--space-3); }
@media (max-width: 48rem) {
  /* With a logo, a phone header shows the logo alone; the name stays for screen readers. */
  .brand-logo + span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand-logo { height: 2rem; }
}
@media (max-width: 30rem) {
  .review-section .facts, .settings .facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .review-section .facts dd, .settings .facts dd { margin-bottom: var(--space-2); }
}

/* Platform: add a school */
.add-school { margin-top: var(--space-6); max-width: 52rem; }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.form-grid > div:last-child { grid-column: 1 / -1; }
.settings-group > h2 { font-size: var(--step-1); margin: 0 0 var(--space-3); }
.address-list li { padding: var(--space-1) 0; }
.notice > h2:first-child { margin-top: 0; }
@media (prefers-color-scheme: dark) {
  /* Logos are usually drawn for white paper: give them a light plate so dark lettering stays visible. */
  :root:not([data-appearance="light"]) .brand-logo, :root:not([data-appearance="light"]) .bp-bar img, :root:not([data-appearance="light"]) .logo-current img, :root:not([data-appearance="light"]) .settings-logo img { background: #f6f8fb; border-radius: var(--radius-s); padding: 0.15rem 0.35rem; }
}
/* Logos are usually drawn for white paper: give them a light plate so dark lettering stays visible. */
:root[data-appearance="dark"] .brand-logo, :root[data-appearance="dark"] .bp-bar img, :root[data-appearance="dark"] .logo-current img, :root[data-appearance="dark"] .settings-logo img { background: #f6f8fb; border-radius: var(--radius-s); padding: 0.15rem 0.35rem; }

/* ==========================================================================
   Virtual labs. The stage is graph paper; meters read like real instruments.
   ========================================================================== */
.lab-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-4); }
.lab-head h1 { margin: 0; }
.lab-kind { color: var(--primary); font-weight: 700; font-size: var(--step--1); margin: 0 0 var(--space-1); }
.lab-clock { display: flex; align-items: center; gap: var(--space-4); }
.lab-timer { margin: 0; padding: var(--space-1) var(--space-4); border: 2px solid var(--line); border-radius: 999px; font-weight: 650; background: var(--surface); white-space: nowrap; }
.lab-timer-value { font-variant-numeric: tabular-nums; font-weight: 800; }
.lab-timer.is-low { border-color: var(--warn); background: var(--warn-soft); }

.lab-stage {
  border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-5); margin-bottom: var(--space-6);
  background-color: var(--surface);
  background-image: linear-gradient(var(--paper) 1px, transparent 1px), linear-gradient(90deg, var(--paper) 1px, transparent 1px);
  background-size: 24px 24px;
  min-width: 0;
}
.lab-loading { color: var(--ink-soft); }
.sim { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.sim-figure { margin: 0; min-width: 0; }
.sim-figure figcaption { margin-top: var(--space-2); }
.sim-svg { display: block; width: 100%; height: auto; max-height: 22rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); }
.sim-svg-tall { max-height: 26rem; }
.sim-svg-square { max-width: 26rem; margin: 0 auto; }
.sim-panel { display: grid; gap: var(--space-3); align-content: start; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-4); }
.sim-panel h3 { font-size: var(--step-0); margin: 0; }
.sim-control { display: grid; gap: var(--space-1); }
.sim-control label { font-weight: 650; }
.sim-control input[type="range"] { width: 100%; accent-color: var(--primary); min-height: 2.75rem; }
.sim-output { font-weight: 800; font-variant-numeric: tabular-nums; }
.sim-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-2); }
.sim-readout { display: grid; gap: 0.1rem; padding: var(--space-2) var(--space-3); background: var(--brand-navy); color: #f5c533; border-radius: var(--radius-s); }
.sim-readout-label { color: #a9b6cb; font-size: 0.8rem; font-weight: 650; }
.sim-readout-value { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--step-1); font-weight: 700; font-variant-numeric: tabular-nums; }
.sim-buttons { flex-wrap: wrap; }
.sim-results { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-5); align-items: start; }
.sim-results h3 { font-size: var(--step-0); margin: 0 0 var(--space-2); }
.sim-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-3) var(--space-4); min-width: 0; overflow-x: auto; }
.sim-graph { margin: 0; min-width: 0; }
.table-compact th, .table-compact td { padding: var(--space-1) var(--space-2); }
.sim-runner { position: absolute; width: 1px; height: 1px; border: 0; opacity: 0; pointer-events: none; }

/* Drawing */
.sim-wire { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sim-svg.is-live .sim-wire { stroke: var(--primary); stroke-dasharray: 10 6; animation: sim-flow 1.2s linear infinite; }
@keyframes sim-flow { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .sim-svg.is-live .sim-wire { animation: none; stroke-dasharray: none; } }
.sim-cell-long { stroke: var(--ink); stroke-width: 4; }
.sim-cell-short { stroke: var(--ink); stroke-width: 8; }
.sim-meter { fill: var(--surface); stroke: var(--ink); stroke-width: 3; }
.sim-meter-letter { font: 800 20px var(--font-head); fill: var(--ink); }
.sim-box { fill: var(--lamp-soft); stroke: var(--ink); stroke-width: 3; stroke-dasharray: 6 4; }
.sim-box-text { font: 800 18px var(--font-head); fill: var(--ink); }
.sim-label { font: 650 13px var(--font-body); fill: var(--ink); }
.sim-tick { font: 11px var(--font-body); fill: var(--ink-soft); }
.sim-axis { stroke: var(--ink-soft); stroke-width: 1.5; }
.sim-grid { stroke: var(--line); stroke-width: 1; }
.sim-point { fill: var(--primary); stroke: var(--surface); stroke-width: 2; }
.sim-try-line { stroke: var(--lamp); stroke-width: 3; stroke-dasharray: 8 6; }
.sim-glass { fill: none; stroke: var(--ink-soft); stroke-width: 2; }
.sim-alkali { fill: #cfe3f7; }
.sim-flask { stroke: var(--ink-soft); stroke-width: 2; fill: #eef3f8; transition: fill 200ms ease; }
.sim-flask.is-faint { fill: #f9d3e6; }
.sim-flask.is-pink { fill: #f08cc0; }
.sim-flask.is-deep { fill: #c2337f; }
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) .sim-alkali { fill: #2b4c6f; }
  :root:not([data-appearance="light"]) .sim-flask { fill: #26324a; }
}
:root[data-appearance="dark"] .sim-alkali { fill: #2b4c6f; }
:root[data-appearance="dark"] .sim-flask { fill: #26324a; }
.sim-equation { font-weight: 700; font-variant-numeric: tabular-nums; margin: 0; }
.sim-coords { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); font-variant-numeric: tabular-nums; font-weight: 650; }

/* Subnetting */
.sim-subnet { grid-template-columns: minmax(0, 1fr); }
.sim-ip-main { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--step-3); font-weight: 800; margin: 0; overflow-wrap: anywhere; }
.sim-bits-wrap { background: var(--surface); }
.sim-bits { border-collapse: collapse; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
.sim-bits th, .sim-bits td { padding: var(--space-2); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.sim-bits th[scope="row"] { font-family: var(--font-body); font-size: var(--step--1); }
.bit { display: inline-block; width: 1.05em; text-align: center; }
.bit-net { background: var(--primary-soft); color: var(--primary); font-weight: 800; }
.bit-host { color: var(--ink); }
.bit-dec { display: block; font-size: 0.75rem; color: var(--ink-soft); font-family: var(--font-body); }
.sim-converter { max-width: 22rem; }

/* Code */
.sim-code { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.sim-result.is-ok { color: var(--primary); font-weight: 700; }
.sim-result.is-wrong { color: var(--danger); font-weight: 700; }
.sim-status { margin: 0; font-weight: 600; }
.lab-code textarea { min-height: 18rem; tab-size: 2; }

/* Phishing inbox */
.sim-mail { grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); }
.mail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.mail-item { width: 100%; text-align: left; display: grid; gap: 0.1rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; min-height: 2.75rem; }
.mail-item[aria-current="true"] { outline: 3px solid var(--primary); outline-offset: -1px; }
.mail-item-from { font-weight: 700; font-size: var(--step--1); }
.mail-item-subject { font-size: var(--step--1); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-tag { font-size: 0.75rem; font-weight: 700; justify-self: start; padding: 0 var(--space-2); border-radius: 999px; border: 1px solid var(--line); }
.mail-tag.is-safe { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.mail-tag.is-phishing { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.mail-pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-4) var(--space-5); min-width: 0; }
.mail-subject { margin: 0 0 var(--space-2); font-size: var(--step-1); }
.mail-from { margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
.mail-address { color: var(--ink-soft); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--step--1); }
.mail-body { white-space: pre-wrap; padding: var(--space-3) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mail-link { margin: var(--space-3) 0; overflow-wrap: anywhere; }
.mail-fake-button { display: inline-block; padding: var(--space-1) var(--space-3); background: #1d5fb8; color: #fff; border-radius: var(--radius-s); font-weight: 700; margin-right: var(--space-2); }
.mail-attachment { font-weight: 650; }
.mail-actions { margin-top: var(--space-3); }
.mail-counter { margin: var(--space-3) 0 0; }

/* Task, answers and report */
.lab-bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.lab-task h2, .lab-answers h2 { font-size: var(--step-1); margin-top: 0; }
.lab-task ol { padding-left: var(--space-5); }
.lab-task li { margin-bottom: var(--space-2); }
.lab-report { border: 2px solid var(--line); border-radius: var(--radius-m); padding: var(--space-5); margin-bottom: var(--space-6); background: var(--surface); max-width: 52rem; }
.lab-report-head h2 { margin: 0; font-size: var(--step-2); }
.lab-report-head p { margin: var(--space-1) 0 var(--space-4); }
.lab-marks { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.lab-marks li { display: flex; gap: var(--space-3); align-items: flex-start; }
.lab-mark { flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; font-weight: 800; }
.lab-marks .is-ok .lab-mark { background: var(--primary-soft); color: var(--primary); }
.lab-marks .is-wrong .lab-mark { background: var(--danger-soft); color: var(--danger); }
.lab-evidence pre { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-3); overflow-x: auto; }
.lab-report-actions { flex-wrap: wrap; align-items: center; }
.lab-intro { border-left: 5px solid var(--lamp); padding: var(--space-2) 0 var(--space-2) var(--space-5); margin: var(--space-5) 0; }
.lab-intro h2 { margin-top: 0; }
.lab-facts { margin-bottom: var(--space-3); }
.attempt-list { padding-left: var(--space-5); }
.attempt-list li { padding: var(--space-1) 0; }

/* Lab catalogue */
.lab-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 56rem; }
.lab-item { display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); padding: var(--space-4) 0; border-bottom: 1px solid var(--line); }
.lab-item h3 { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.lab-item p { margin: 0 0 var(--space-1); }
.course-card-labs { font-weight: 650; }
.tab-count { color: var(--ink-soft); font-weight: 400; }

@media (max-width: 56rem) {
  .sim, .sim-results, .lab-bench, .sim-code, .sim-mail { grid-template-columns: minmax(0, 1fr); }
  .lab-stage { padding: var(--space-3); }
  .lab-item { flex-direction: column; align-items: flex-start; }
}
.lab-item > .button { flex: none; white-space: nowrap; }

/* Paid courses (ADR 0012) */
.course-price { margin: 0 0 var(--space-3); color: var(--ink-soft); }
.course-price strong { font-family: var(--font-head); font-size: var(--step-2); color: var(--ink); font-variant-numeric: tabular-nums; margin-right: var(--space-1); }
.start-box { position: relative; margin: var(--space-5) 0 var(--space-6); padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius-m); max-width: 34rem; }
.start-box.is-paid { border-left-color: var(--accent); }
.start-box.is-done { border-left-color: var(--lamp); }
.start-box form { margin: 0 0 var(--space-2); }
.start-box .notice { margin: 0 0 var(--space-4); }
.start-box p:last-child, .start-box > div > p:last-child { margin-bottom: 0; }
.start-box .meter { margin: var(--space-2) 0 var(--space-4); }
.start-title { font-family: var(--font-head); font-size: var(--step-1); font-weight: 700; color: var(--ink); margin: 0 0 var(--space-1); }
.start-progress { margin: 0; color: var(--ink-soft); }
.start-progress strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.start-action { margin: 0 0 var(--space-2); }
.pay-result { max-width: 40rem; }
.pay-result form { margin: var(--space-4) 0; }
.ref { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85em; letter-spacing: 0.01em; }
.pay-total { font-family: var(--font-head); font-size: var(--step-3); line-height: 1.1; margin: 0 0 var(--space-1); font-variant-numeric: tabular-nums; }
.pay-list { margin: var(--space-6) 0; }
.pay-list .settings-head { border-top: 1px solid var(--line); padding-top: var(--space-4); }
.tabs-quiet { margin-bottom: var(--space-4); }
.tabs-quiet a { font-weight: 600; font-size: var(--step--1); }
.steps-list { padding-left: 1.25rem; margin: 0 0 var(--space-4); }
.steps-list li + li { margin-top: var(--space-1); }
.disclosure { margin-top: var(--space-4); }
.disclosure > summary { cursor: pointer; font-weight: 650; color: var(--ink-soft); }
.disclosure[open] > summary { margin-bottom: var(--space-3); }
.form-inline-end { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px dashed var(--line); }
.price-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.price-form .hint { margin-top: 0; }
.pay-webhook-intro { margin-top: var(--space-4); }
.code-wrap pre { white-space: pre-wrap; word-break: break-all; padding-right: 5rem; }
.table .ref { white-space: nowrap; }
@media (max-width: 40rem) {
  /* Payment history as stacked records on phones: each row reads top to bottom. */
  .pay-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pay-table, .pay-table tbody, .pay-table tr, .pay-table td { display: block; width: 100%; }
  .pay-table tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  .pay-table tr:last-child { border-bottom: 0; }
  .pay-table td { border: 0; padding: var(--space-1) 0; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--space-3); text-align: left !important; }
  .pay-table td::before { content: attr(data-label); font-size: var(--step--1); font-weight: 650; color: var(--ink-soft); }
  .pay-table td .small { grid-column: 2; }
  .pay-table td > .badge { justify-self: start; }
}

/* Classes, cohorts or groups (ADR 0013) */
.groups-layout { display: grid; gap: var(--space-6); }
@media (min-width: 60rem) { .groups-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } }
.group-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: var(--space-4); }
.group-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5); }
.group-card::before { content: ""; position: absolute; left: 0; top: var(--space-4); bottom: var(--space-4); width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); }
.group-card h3 { font-size: var(--step-1); margin: 0 0 var(--space-1); }
.group-card h3 a { color: var(--ink); text-decoration: none; }
.group-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-m); }
.group-card:hover { border-color: var(--primary); }
.group-card:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.group-card-detail { margin: 0 0 var(--space-2); color: var(--ink-soft); font-size: var(--step--1); }
.group-card-counts { display: flex; gap: var(--space-4); margin: 0 0 var(--space-1); font-weight: 650; font-variant-numeric: tabular-nums; }
.group-card-teachers { margin: 0; }
.page-head-actions { margin: 0; }
.progress-grid th[scope="col"] { min-width: 8.5rem; vertical-align: bottom; }
.progress-grid th[scope="col"] a { color: var(--ink); }
.progress-grid th .small, .progress-grid td .small { display: block; font-weight: 400; }
.progress-grid th[scope="row"] { font-weight: 650; min-width: 11rem; }
.pg-cell { vertical-align: middle; }
.pg-count { font-variant-numeric: tabular-nums; font-size: var(--step--1); }
.meter-thin { height: 0.375rem; margin-top: var(--space-1); max-width: 8rem; }
.pg-late { display: block; margin-top: var(--space-1); font-size: 0.8125rem; font-weight: 650; color: var(--danger); }
.pg-cell.is-late { background: var(--danger-soft); }
.plain-list { list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.set-course { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.set-course > span .small { display: block; }
.tick-list { max-height: 18rem; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-s); padding: var(--space-2); background: var(--surface); }
.tick-list legend { font-weight: 650; padding: 0 var(--space-1); }
.choice-tight { min-height: 0; padding: var(--space-1) var(--space-2); margin: 0; }
.choice-tight input { margin-top: 0.2rem; }
.my-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-5); }
.my-group-head h2 { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.my-group-head p { margin: 0 0 var(--space-4); }
.set-list { list-style: none; padding: 0; margin: 0; counter-reset: none; }
.set-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-4); align-items: baseline; padding: var(--space-3) 0 var(--space-3) var(--space-4); border-top: 1px solid var(--line); position: relative; }
.set-item::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 0.625rem; height: 0.625rem; border-radius: 2px; border: 2px solid var(--primary); background: var(--surface); }
.set-item.is-done::before { background: var(--primary); }
.set-item.is-late::before { border-color: var(--danger); }
.set-title { font-weight: 650; }
.set-due { font-size: var(--step--1); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.set-item.is-late .set-due { color: var(--danger); font-weight: 650; }
.set-item.is-done .set-due { color: var(--primary); font-weight: 650; }
.set-progress { color: var(--ink-soft); }
.set-item .meter-thin { grid-column: 1 / -1; max-width: 16rem; }

/* Keep the learner's name in view while the course columns scroll sideways. */
.table.progress-grid { overflow: visible; }
.progress-grid thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.progress-grid th[scope="row"] { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--line); }
@media (max-width: 40rem) { .progress-grid th[scope="row"] { min-width: 8rem; } .progress-grid th[scope="row"] .small { display: none; } }
/* The set courses read as one trace: a line joins the nodes. */
.set-item:not(:last-child)::after { content: ""; position: absolute; left: 0.25rem; top: 1.85rem; bottom: -1.05rem; width: 2px; background: var(--line); }

/* Course cards: same parts in the same places, footer pinned to the bottom so a row lines up. */
.course-card-track { margin: 0 0 var(--space-1); font-size: var(--step--1); color: var(--primary); font-weight: 650; }
.course-card-summary { color: var(--ink-soft); font-size: var(--step--1); margin: 0 0 var(--space-4); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.course-card-foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.course-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.course-card-end { margin: 0 0 0 auto; font-size: var(--step--1); }
.course-card-price { font-weight: 700; font-size: var(--step-0); color: var(--ink); font-variant-numeric: tabular-nums; }
.course-card-progress { display: grid; gap: 2px; min-width: 7rem; font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.course-card-progress .meter-thin { margin: 0; width: 7rem; }
.course-card.is-enrolled { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); }
/* Header: the signed-in person's name with their role underneath. */
.account-me { display: grid; justify-items: end; line-height: 1.2; }
.account-me .role { font-size: 0.8125rem; }

/* Sign in: the school on one side, the form on the other (stacked on phones, panel hidden). */
.auth-split { display: grid; gap: var(--space-6); align-items: center; }
.auth-panel { display: none; }
@media (min-width: 52rem) {
  .auth-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); min-height: 30rem; }
  .auth-panel { display: block; position: relative; overflow: hidden; align-self: stretch; padding: var(--space-6); border-radius: var(--radius-m); background: var(--brand-navy); color: #dfe4ee; }
  .auth-split .auth { margin: 0; }
}
.auth-school { font-family: var(--font-head); font-size: var(--step-3); line-height: 1.1; font-weight: 700; color: #fff; margin: 0 0 var(--space-2); max-width: 16ch; }
.auth-tagline { color: var(--accent-on-dark); font-weight: 650; margin: 0 0 var(--space-5); }
.auth-trace { display: block; width: 100%; max-width: 26rem; height: auto; margin: var(--space-5) 0; fill: none; stroke: var(--brand-navy-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.auth-trace rect { fill: var(--brand-navy); stroke: #4a556d; }
.auth-trace .is-lit { stroke: #d52f2f; }
.auth-trace rect.is-lit { fill: #d52f2f; stroke: #d52f2f; }
.auth-points { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.auth-points li { position: relative; padding-left: var(--space-5); }
.auth-points li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.6rem; height: 0.6rem; border-radius: 2px; background: #d52f2f; }

/* Staff home: to-do list beside the groups they teach, then their courses. */
.staff-grid { display: grid; gap: var(--space-5); }
@media (min-width: 52rem) { .staff-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .staff-grid.is-single { grid-template-columns: minmax(0, 40rem); } }
.staff-sub { font-size: var(--step-0); color: var(--ink-soft); margin: 0 0 var(--space-2); }
.staff-sub-gap { margin-top: var(--space-6); display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.staff-sub-gap .small { font-weight: 400; }
.mini-groups { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.mini-groups a { position: relative; display: grid; gap: 2px; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); text-decoration: none; color: var(--ink); }
.mini-groups a::before { content: ""; position: absolute; left: 0; top: var(--space-3); bottom: var(--space-3); width: 4px; border-radius: 0 4px 4px 0; background: var(--primary); }
.mini-groups a:hover { border-color: var(--primary); }
.mini-group-name { font-weight: 650; color: var(--primary); }
/* People: the role control stays on one line beside the name. */
.people-table td { vertical-align: middle; }
.people-table .row-actions { flex-wrap: nowrap; gap: var(--space-2); }
.people-table .row-actions select { min-width: 0; width: 8.5rem; padding-top: var(--space-1); padding-bottom: var(--space-1); }
.people-table .badge { vertical-align: 0.1em; }
@media (max-width: 40rem) { .people-table .row-actions { flex-wrap: wrap; } }

/* Find-as-you-type boxes above long lists (shown only when scripts run). */
.filter-row { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-3); flex-wrap: wrap; }
.filter-row input[type="search"] { max-width: 18rem; }
.tick-list .filter-row { margin: var(--space-1) 0 var(--space-2); }
/* Tables that become stacked records on phones: the first cell is the heading of each record. */
@media (max-width: 40rem) {
  .table-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack, .table-stack tbody, .table-stack tr { display: block; width: 100%; }
  .table-stack tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1) var(--space-3); }
  .table-stack tr:last-child { border-bottom: 0; }
  .table-stack td { border: 0; padding: 0; text-align: left !important; }
  .table-stack td:first-child { grid-column: 1 / -1; margin-bottom: var(--space-1); }
  .table-stack td[data-label]::before { content: attr(data-label); display: block; font-size: 0.8125rem; color: var(--ink-soft); }
  .table-stack td.table-stack-action { grid-column: 1 / -1; }
  .table-stack td.table-stack-action:empty { display: none; }
}
/* Phones: the Copy button sits above the code instead of over its first line. */
@media (max-width: 40rem) { .code-block pre { padding-top: 2.75rem; } .code-block .code-lang + pre { padding-top: 2.25rem; } }

/* ------------------------------------------------------------------
   Brand: DML Technologies (navy, red and the square pixels)
   ------------------------------------------------------------------ */
.button-accent { background: #d52f2f; border-color: #d52f2f; color: #fff; }
.button-accent:hover { background: #b9262a; border-color: #b9262a; filter: none; }
.button-on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.button-on-dark:hover { border-color: #fff; filter: none; }

.pixels { display: block; height: auto; }
.pixels rect { fill: #ffffff; }
.pixels .px-dim { fill: #8a93a6; }
.pixels .px-red { fill: #d52f2f; }
.pixels-hero { width: 5.5rem; margin-bottom: var(--space-5); }
.pixels-light rect { fill: var(--primary); }
.pixels-light .px-dim { fill: var(--lamp-soft); }
.pixels-light .px-red { fill: var(--lamp); }

/* Welcome: a navy panel like the dark logo, with the three brand steps. */
.welcome { position: relative; overflow: hidden; margin-top: var(--space-2); padding: var(--space-6) var(--space-5); border-radius: var(--radius-m); background: var(--brand-navy); color: #e9edf4; }
.welcome h1 { color: #fff; }
.welcome .welcome-tagline { color: var(--accent-on-dark); }
.welcome .lead { color: #c3cad8; }
.welcome .promise::before { background: var(--brand-navy-line); }
.welcome .promise-step h2 { color: #fff; letter-spacing: 0.01em; }
.welcome .promise-step p { color: #b6bfcf; }
.welcome .promise-node { background: #23a1de; box-shadow: 0 0 0 6px rgba(35, 161, 222, 0.18); }
.welcome .promise-step:last-child .promise-node { background: #d52f2f; box-shadow: 0 0 0 6px rgba(213, 47, 47, 0.2); }
.welcome a:focus-visible, .welcome .button:focus-visible { outline-color: #8ab4ff; }
.welcome .hero-note { color: var(--brand-navy-soft); font-size: var(--step--1); max-width: 46ch; margin: 0; }
@media (min-width: 52rem) {
  .welcome { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); padding: var(--space-7) var(--space-7); gap: var(--space-7); }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes light-up {
    from { opacity: 0.35; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
  }
}
.platform-logo { display: block; width: 13rem; height: auto; margin-bottom: var(--space-5); }
.platform-hero { margin-top: var(--space-5); }

/* Footer credit */
.footer-credit { margin: var(--space-3) 0 0; font-size: 0.8125rem; color: var(--ink-soft); display: flex; align-items: center; gap: var(--space-2); }
.footer-credit .pixels { width: 1.1rem; }

/* Header: room between an uploaded logo and the school's name. */
.brand { gap: var(--space-3); }
.brand-logo { height: 2rem; }

/* Notifications: the bell in the top bar and the list */
.bell { position: relative; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-s); color: var(--ink-soft); }
.bell:hover, .bell[aria-current="page"] { color: var(--ink); background: var(--paper); }
.bell svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.bell.has-new { color: var(--ink); }
.bell-count { position: absolute; top: 0.1rem; right: 0.05rem; min-width: 1.15rem; height: 1.15rem; padding: 0 0.25rem; border-radius: 3px; background: var(--accent); color: #fff; font-size: 0.6875rem; font-weight: 800; line-height: 1.15rem; text-align: center; font-variant-numeric: tabular-nums; }
.notice-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); max-width: 46rem; }
.notice-item a { position: relative; display: grid; gap: 2px; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); text-decoration: none; color: var(--ink); }
.notice-item a:hover { border-color: var(--primary); }
.notice-item a::before { content: ""; position: absolute; left: var(--space-4); top: 1.15rem; width: 0.5rem; height: 0.5rem; border-radius: 2px; background: var(--line); }
.notice-item.is-new a { border-left: 4px solid var(--accent); padding-left: calc(var(--space-6) - 3px); }
.notice-item.is-new a::before { background: var(--accent); left: calc(var(--space-4) - 3px); }
.notice-title { font-weight: 650; }
.notice-item:not(.is-new) .notice-title { font-weight: 500; }
.notice-body { color: var(--ink-soft); font-size: var(--step--1); }
.notice-time { color: var(--ink-soft); font-size: 0.8125rem; }
/* Announcements */
.announce-form { max-width: 46rem; margin-bottom: var(--space-4); }
.ann-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); max-width: 46rem; }
.ann { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--lamp); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); }
.ann p { margin: var(--space-1) 0; }
.ann-meta { display: flex; gap: var(--space-2); align-items: baseline; flex-wrap: wrap; }
.ann-home { margin: 0 0 var(--space-3); background: var(--paper); }
@media (max-width: 48rem) { .account .bell { width: 2.25rem; height: 2.25rem; } }

/* Parents and guardians */
.guardian-card { margin-bottom: var(--space-3); }
.guardian-card h3 { margin: 0 0 var(--space-1); font-size: var(--step-1); }
.guardian-card.is-revoked { opacity: 0.6; }
.form-compact .field { margin-bottom: var(--space-2); }
.people-guardians { display: inline-block; margin-top: var(--space-1); }
.child-list { max-width: 40rem; }
.guardian-terms { max-width: 46rem; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); }
.guardian-terms h2 { font-size: var(--step-1); margin-top: 0; }
.checklist-plain { list-style: none; padding: 0; margin: 0 0 var(--space-3); display: grid; gap: var(--space-1); }
.checklist-plain li { position: relative; padding-left: var(--space-5); }
.checklist-plain li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.65rem; height: 0.65rem; border-radius: 2px; border: 2px solid var(--line); }
.checklist-plain li.is-on::before { background: var(--lamp); border-color: var(--lamp); }
.child-courses .set-title { font-weight: 650; }

/* Help requests */
.help-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); max-width: 46rem; }
.help-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.help-list a { display: grid; gap: 2px; text-decoration: none; color: var(--ink); min-width: 0; }
.help-subject { font-weight: 650; color: var(--primary); }
.thread { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: grid; gap: var(--space-3); max-width: 46rem; }
.thread-msg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-3) var(--space-4); }
.thread-msg.is-staff { border-left: 4px solid var(--primary); margin-left: var(--space-5); }
.thread-msg p { margin: var(--space-1) 0; }
.reply-box { max-width: 46rem; }
@media (max-width: 40rem) { .thread-msg.is-staff { margin-left: var(--space-3); } .help-list li { flex-wrap: wrap; } }

/* ==========================================================================
   App shell (ADR 0018). Signed-in pages: a navy sidebar like the dark logo,
   a slim app bar with search, notifications and the account menu, and the
   page on paper. On phones and small tablets the sidebar slides in.
   ========================================================================== */
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

body.has-shell { display: block; }
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(90deg, var(--brand-navy) var(--sidebar-w), transparent var(--sidebar-w)); }

.sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: var(--space-4) var(--space-3) var(--space-4); background: var(--brand-navy); color: #c9d1df; scrollbar-width: thin; scrollbar-color: #2c3446 transparent; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-2) var(--space-5); }
.side-brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: #fff; text-decoration: none; font-weight: 800; line-height: 1.25; }
.side-logo { flex: none; display: grid; place-items: center; min-width: 2.5rem; max-width: 4.5rem; height: 2.5rem; padding: 0.3rem; border-radius: 10px; background: #fff; }
.side-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.side-logo-mark { background: #23293a; }
.side-logo-mark .pixels { width: 1.5rem; }
.side-school { font-size: 0.9375rem; overflow-wrap: anywhere; }
.side-close { display: none; }
.side-nav { flex: 1; }
.side-nav ul, .side-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-label { margin: var(--space-5) var(--space-3) var(--space-2); font-size: 0.75rem; font-weight: 700; color: #8590a6; }
.sidebar li > a { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 2.5rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); color: #c9d1df; text-decoration: none; font-weight: 600; font-size: 0.9375rem; line-height: 1.25; }
.sidebar li > a:hover { background: #1f2536; color: #fff; }
.sidebar li > a[aria-current="page"] { background: #252d42; color: #fff; }
/* The current page is marked with one lit pixel, as in the logo. */
.sidebar li > a[aria-current="page"]::before { content: ""; position: absolute; left: calc(-1 * var(--space-3) + 2px); top: 50%; width: 0.4rem; height: 0.875rem; margin-top: -0.4375rem; border-radius: 1px; background: #23a1de; }
.sidebar li > a[aria-current="page"] .icon { color: #23a1de; }
.sidebar a:focus-visible { outline-color: #8ab4ff; }
.side-text { flex: 1; min-width: 0; }
.side-count { min-width: 1.4rem; padding: 0 0.4rem; border-radius: 4px; background: #d52f2f; color: #fff; font-size: 0.75rem; font-weight: 800; line-height: 1.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.side-foot { margin-top: var(--space-5); padding-top: var(--space-3); border-top: 1px solid var(--brand-navy-line); }
.side-credit { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) var(--space-3) 0; font-size: 0.75rem; color: #8590a6; }
.side-credit .pixels { width: 0.95rem; flex: none; }

.shell-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }
.appbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-2); min-height: var(--appbar-h); padding: var(--space-2) var(--space-6); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); border-bottom: 1px solid var(--line); }
.appbar-menu, .appbar-brand, .appbar .appbar-search-link { display: none; }
.appbar-icon, .appbar-menu { position: relative; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 10px; color: var(--ink-soft); flex: none; }
.appbar-icon { display: inline-grid; }
.appbar-icon:hover, .appbar-menu:hover, .appbar-icon[aria-current="page"] { color: var(--ink); background: var(--surface); }
.appbar .bell-count { top: 0.15rem; right: 0.1rem; }
.appbar .bell { margin-left: auto; }

/* Search: a plain form to /search; with scripts it also answers as you type. */
.search { position: relative; flex: 1 1 auto; max-width: 34rem; display: flex; align-items: center; }
.search-icon { position: absolute; left: 0.8rem; color: var(--ink-soft); pointer-events: none; }
.search input[type=search] { min-height: 2.5rem; padding-left: 2.6rem; padding-right: 2.5rem; border-radius: 10px; border-color: var(--line); background: var(--surface); }
.search input[type=search]::-webkit-search-cancel-button { display: none; }
.search-key { position: absolute; right: 0.65rem; font: 700 0.75rem/1 var(--font-body); color: var(--ink-soft); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; padding: 0.2rem 0.45rem; background: var(--surface); pointer-events: none; }
.search:focus-within .search-key { display: none; }
.search-pop { position: absolute; top: calc(100% + 0.4rem); left: 0; right: 0; z-index: 30; padding: var(--space-2); max-height: min(70vh, 34rem); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-2); }
.search-group { margin: var(--space-2) var(--space-3) var(--space-1); font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); }
.search-option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.search-option .icon { color: var(--ink-soft); }
.search-option:hover, .search-option[aria-selected="true"] { background: var(--primary-soft); }
.search-option[aria-selected="true"] .icon { color: var(--primary); }
.search-option-text { display: grid; min-width: 0; line-height: 1.35; }
.search-option-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-option-detail { font-size: 0.8125rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-empty { margin: 0; padding: var(--space-3); color: var(--ink-soft); font-size: var(--step--1); }
.search-all { display: block; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); border-top: 1px solid var(--line); font-size: var(--step--1); font-weight: 650; }
mark { background: color-mix(in srgb, var(--lamp) 28%, transparent); color: inherit; border-radius: 2px; padding: 0 1px; }

/* Account menu */
.me { position: relative; flex: none; }
.me > summary { list-style: none; display: flex; align-items: center; gap: var(--space-2); padding: 0.25rem 0.5rem 0.25rem 0.25rem; border-radius: 12px; color: var(--ink); cursor: pointer; }
.me > summary::-webkit-details-marker { display: none; }
.me > summary:hover, .me[open] > summary { background: var(--surface); }
.avatar { position: relative; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: var(--brand-navy); color: #fff; font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.03em; flex: none; }
.avatar::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: #23a1de; border: 2px solid var(--paper); }
.me-text { display: grid; line-height: 1.2; text-align: left; }
.me-name { font-weight: 650; font-size: 0.9375rem; }
.me-role { font-size: 0.75rem; color: var(--ink-soft); }
.me-chevron { width: 1rem; height: 1rem; color: var(--ink-soft); transition: transform 150ms ease; }
.me[open] .me-chevron { transform: rotate(180deg); }
.me-panel { position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 30; width: 17.5rem; padding: var(--space-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); box-shadow: var(--shadow-2); }
.me-who { display: grid; margin: 0; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--line); line-height: 1.35; }
.me-who span { font-size: 0.8125rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.me-links { list-style: none; margin: var(--space-2) 0; padding: 0; }
.me-links a, .me-out button { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 2.5rem; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-s); background: none; color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 550; text-decoration: none; cursor: pointer; }
.me-links a:hover, .me-out button:hover { background: var(--paper); }
.me-links .icon, .me-out .icon { color: var(--ink-soft); }
.me-look { margin: 0; padding: var(--space-3); border-top: 1px solid var(--line); }
.me-look-label { margin: 0 0 var(--space-2); font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); }
.segmented { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.segmented button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0.4rem 0.25rem; border: 0; border-radius: 7px; background: transparent; color: var(--ink-soft); font: inherit; font-size: 0.75rem; font-weight: 650; cursor: pointer; }
.segmented button:hover { color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.segmented button[aria-pressed="true"] .icon { color: var(--primary); }
.me-out { margin: 0; padding-top: var(--space-2); border-top: 1px solid var(--line); }

.shell-content { flex: 1; width: 100%; max-width: 78rem; padding: var(--space-6) var(--space-6) var(--space-7); }
.shell-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-4) var(--space-6) var(--space-5); border-top: 1px solid var(--line); font-size: var(--step--1); color: var(--ink-soft); }
.shell-foot p { margin: 0; font-weight: 650; color: var(--ink); }
.shell-foot p .muted { font-weight: 400; margin-left: var(--space-2); }
.shell-foot a { color: var(--ink-soft); }
.nav-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(9, 12, 19, 0.55); }

@media (max-width: 63.99rem) {
  .shell { display: block; background: none; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(18rem, 86vw); height: 100%; transform: translateX(-104%); visibility: hidden; transition: transform 220ms ease, visibility 0s linear 220ms; box-shadow: var(--shadow-2); }
  .sidebar:target, .nav-open .sidebar { transform: none; visibility: visible; transition: transform 220ms ease; }
  .side-close { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-s); color: #c9d1df; flex: none; }
  .side-close:hover { background: #1f2536; color: #fff; }
  .appbar { padding: var(--space-2) var(--space-3); gap: var(--space-1); }
  .appbar-menu { display: inline-grid; }
  .appbar-brand { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; color: var(--ink); text-decoration: none; font-weight: 800; }
  .appbar-brand img { height: 1.75rem; width: auto; max-width: 5rem; object-fit: contain; }
  .appbar-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .search { display: none; }
  .appbar .appbar-search-link { display: inline-grid; }
  .appbar .bell { margin-left: 0; }
  .me-text, .me-chevron { display: none; }
  .me > summary { padding: 0.25rem; }
  .shell-content { padding: var(--space-5) var(--space-4) var(--space-6); }
  .shell-foot { padding: var(--space-4); }
}
@media (max-width: 30rem) {
  .appbar-brand span { font-size: 0.9375rem; }
  .me-panel { position: fixed; left: var(--space-3); right: var(--space-3); top: calc(var(--appbar-h) + 0.25rem); width: auto; }
}

/* Quieter, more modern surfaces: a hairline and the lightest shadow on things that sit on paper. */
.panel, .course-card, .table-wrap, .todo-list li, .notice-item a, .help-list li, .thread-msg, .file-list li, .status-card, .cert-list li { box-shadow: var(--shadow-1); }
.panel { border-radius: var(--radius-l); }
.course-card { border-radius: var(--radius-l); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.course-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.table th { background: color-mix(in srgb, var(--paper) 60%, var(--surface)); }
.has-shell h1 { letter-spacing: -0.02em; }
.has-shell .page-head h1 { font-size: clamp(1.75rem, 3vw, var(--step-3)); }
.toast { box-shadow: var(--shadow-1); }

/* Course covers: the logo's pixels on navy, with the module strip lighting up along the bottom. */
.course-card { padding-top: 0; overflow: hidden; }
.course-cover { position: relative; margin: 0 calc(-1 * var(--space-5)) var(--space-4); height: 6.25rem; background: var(--brand-navy); overflow: hidden; display: flex; align-items: flex-end; padding: 0 var(--space-5) var(--space-3); }
.cover-px { position: absolute; inset: 0; width: 100%; height: 100%; }
.cover-px rect { fill: #2a3346; }
.cover-px .cv-b { fill: #1670ad; }
.cover-px .cv-l { fill: #23a1de; }
.cover-px .cv-r { fill: #d52f2f; }
.cover-px .cv-d { fill: #33405a; }
.course-cover .board { position: relative; margin: 0; width: min(100%, 13rem); padding: 0.35rem 0.5rem; border-radius: 8px; background: rgba(22, 26, 37, 0.82); }
.course-cover .board-node::before { background: #3a4458; }
.course-cover .board-node::after { background: var(--brand-navy); border-color: #55617a; }
.course-cover .board-node.is-part::after { border-color: #23a1de; background: linear-gradient(90deg, #23a1de 50%, var(--brand-navy) 50%); }
.course-cover .board-node.is-lit::after { background: #23a1de; border-color: #23a1de; box-shadow: 0 0 0 3px rgba(35, 161, 222, 0.25); }
.course-cover .board-node.is-lit + .board-node.is-lit::before,
.course-cover .board-node.is-lit + .board-node.is-part::before { background: #23a1de; }

/* Home: greeting, then the learning on the left and the study panels on the right. */
.home-head { margin-bottom: var(--space-5); }
.home-head h1 { margin-bottom: var(--space-1); }
.home-date { margin: 0 0 var(--space-1); color: var(--ink-soft); font-weight: 650; font-size: var(--step--1); }
.home-grid { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 72rem) { .home-grid { grid-template-columns: minmax(0, 1fr) 21rem; } .home-grid.is-single { grid-template-columns: minmax(0, 1fr); } }
.home-main { min-width: 0; }
.home-main > :first-child { margin-top: 0; }
.home-main .continue { max-width: none; margin-bottom: var(--space-5); border-radius: var(--radius-l); }
.home-main .section { margin-top: var(--space-5); }
.home-main .my-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-l); padding: var(--space-5); box-shadow: var(--shadow-1); }
.home-main .my-group h2 { margin-top: 0; font-size: var(--step-1); }
.home-side { display: grid; gap: var(--space-4); min-width: 0; }
.home-side .panel + .panel { margin-top: 0; }
.home-side .panel { padding: var(--space-4) var(--space-5); }
.home-side .panel h2 { margin: 0 0 var(--space-3); font-size: var(--step-0); }
.panel-link { margin: var(--space-3) 0 0; }
.panel-link a { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 650; }
.panel-link .icon { width: 1.1rem; height: 1.1rem; }

/* Your learning: days drawn as the logo's pixels, brighter for busier days. */
.streak-line { margin: 0 0 var(--space-3); font-size: 0.9375rem; line-height: 1.5; }
.pixel-cal { margin: 0; }
.pc-months, .pc-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.pc-months { margin-left: 1.9rem; margin-bottom: 3px; font-size: 0.6875rem; color: var(--ink-soft); line-height: 1; height: 0.75rem; }
.pc-months span { white-space: nowrap; overflow: visible; }
.pc-body { display: flex; gap: 4px; }
.pc-days { display: grid; grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 3px; width: 1.65rem; font-size: 0.625rem; color: var(--ink-soft); line-height: 1; }
.pc-days span { display: flex; align-items: center; }
.pc-grid { flex: 1; }
.pc-week { display: grid; grid-template-rows: repeat(7, auto); gap: 3px; }
.pc-day { display: block; aspect-ratio: 1; border-radius: 2px; background: color-mix(in srgb, var(--line) 70%, var(--surface)); }
.pc-day.lvl-1 { background: color-mix(in srgb, var(--lamp) 30%, var(--surface)); }
.pc-day.lvl-2 { background: color-mix(in srgb, var(--lamp) 55%, var(--surface)); }
.pc-day.lvl-3 { background: var(--lamp); }
.pc-day.lvl-4 { background: var(--primary); }
.pc-day.is-future { background: transparent; }
.pc-day.is-today { outline: 2px solid var(--accent); outline-offset: 1px; }
.pc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-top: var(--space-3); }
.pc-foot p { margin: 0; }
.pc-legend { display: flex; align-items: center; gap: 3px; font-size: 0.6875rem; color: var(--ink-soft); }
.pc-legend .pc-day { width: 0.65rem; }
.pc-legend span:first-child { margin-right: 2px; }
.pc-legend span:last-child { margin-left: 2px; }

/* Coming up: a calendar tile per due date. */
.due-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.due-list li { display: flex; align-items: center; gap: var(--space-3); }
.due-date { flex: none; display: grid; justify-items: center; width: 2.75rem; padding: 0.2rem 0 0.25rem; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); line-height: 1.1; }
.due-day { font-weight: 800; font-size: 1.0625rem; font-variant-numeric: tabular-nums; }
.due-month { font-size: 0.6875rem; font-weight: 700; color: var(--ink-soft); }
.due-text { display: grid; min-width: 0; line-height: 1.35; }
.due-text a { font-weight: 650; color: var(--ink); text-decoration: none; }
.due-text a:hover { color: var(--primary); text-decoration: underline; }
.due-when { color: var(--ink-soft); }
.due-list .is-late .due-date { background: var(--accent-soft); border-color: transparent; }
.due-list .is-late .due-day, .due-list .is-late .due-when { color: var(--accent); }
.due-list .is-soon .due-date { background: var(--warn-soft); border-color: transparent; }

.mini-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.mini-notes a { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2); margin: 0 calc(-1 * var(--space-2)); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; }
.mini-notes a:hover { background: var(--paper); }
.mini-notes .icon { color: var(--primary); margin-top: 0.1rem; }
.mini-notes a > span { display: grid; min-width: 0; line-height: 1.35; }
.mini-note-title { font-weight: 650; }

/* Staff to-do as icon rows */
.todo-list a { display: flex; align-items: center; gap: var(--space-3); }
.todo-list .icon { color: var(--primary); }
.todo-list .todo-urgent .icon { color: var(--accent); }
.todo-list li { border-radius: var(--radius-m); }

/* Lesson: save button beside the title, notes above the outline. */
.lesson-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.lesson-head-row > div { min-width: 0; }
.save-form { margin: 0.2rem 0 0; flex: none; }
.save-toggle { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.5rem; padding: 0 var(--space-4); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: var(--step--1); font-weight: 700; cursor: pointer; }
.save-toggle:hover { border-color: var(--primary); color: var(--primary); }
.save-toggle[aria-pressed="true"] { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.note-box { margin-bottom: var(--space-5); padding: var(--space-4); border-radius: var(--radius-m); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.note-title { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); font-size: var(--step-0); }
.note-title .icon { color: var(--primary); }
.note-form { display: grid; gap: var(--space-2); }
.note-form textarea { font-size: 0.9375rem; line-height: 1.5; resize: vertical; min-height: 5rem; }
.note-form .button { justify-self: start; }
@media (max-width: 30rem) { .save-toggle span:not(.visually-hidden) { display: none; } .save-toggle { padding: 0 0.7rem; } }

/* Saved and notes */
.tab-count { display: inline-block; min-width: 1.5rem; margin-left: 0.25rem; padding: 0 0.35rem; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: 0.75rem; text-align: center; color: var(--ink-soft); }
.tabs a[aria-current="page"] .tab-count { background: var(--primary-soft); border-color: transparent; color: var(--primary); }
.saved-course { margin-top: var(--space-6); max-width: 52rem; }
.saved-course h2 { font-size: var(--step-1); margin: 0 0 var(--space-3); }
.saved-course h2 a { color: var(--ink); text-decoration: none; }
.saved-course h2 a:hover { color: var(--primary); text-decoration: underline; }
.saved-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.saved-item { padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-1); }
.saved-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.saved-head a { font-weight: 650; }
.saved-icon { color: var(--ink-soft); }
.saved-item.is-saved .saved-icon { color: var(--primary); }
.saved-note { margin: var(--space-2) 0 0 2rem; padding-left: var(--space-3); border-left: 3px solid var(--lamp-soft); color: var(--ink); font-size: 0.9375rem; }
.saved-note p { margin: 0 0 var(--space-2); }
.saved-note p:last-child { margin-bottom: 0; }

/* Search page */
.search-page { position: relative; display: flex; gap: var(--space-2); align-items: center; max-width: 40rem; margin-bottom: var(--space-5); }
.search-page .search-icon { position: absolute; left: 0.85rem; color: var(--ink-soft); }
.search-page input[type=search] { padding-left: 2.6rem; min-height: 3rem; border-radius: 12px; font-size: var(--step-0); }
.search-section { margin-top: var(--space-5); max-width: 46rem; }
.search-section h2 { font-size: var(--step-0); color: var(--ink-soft); margin: 0 0 var(--space-2); }
.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-1); overflow: hidden; }
.result-list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); color: var(--ink); text-decoration: none; }
.result-list li + li a { border-top: 1px solid var(--line); }
.result-list a:hover { background: var(--primary-soft); }
.result-list .icon { color: var(--primary); }
.result-title { font-weight: 650; }
kbd { font: 700 0.8125rem/1 var(--font-body); padding: 0.15rem 0.4rem; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }

/* Free preview */
.tag-preview { background: var(--lamp-soft); color: var(--ink); }
.tag-saved { background: var(--primary-soft); color: var(--primary); }
.start-preview { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-4) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--step--1); }
.start-preview .icon { color: var(--primary); margin-top: 0.1rem; }
.preview-side .join-card { padding: var(--space-4) var(--space-5); border-radius: var(--radius-l); background: var(--brand-navy); color: #dfe4ee; margin-bottom: var(--space-5); }
.preview-side .join-card .side-title { color: #fff; }
.preview-side .join-card a:not(.button) { color: #8fd0f2; }
.preview-side .join-card .course-price strong { color: #fff; }
.preview-side .join-card .button { background: #d52f2f; border-color: #d52f2f; color: #fff; }
.preview-choice { margin: 0; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }

/* Calendar link */
.copy-row { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.copy-row input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.8125rem; }
.steps-tight > li { padding-bottom: var(--space-2); }
.calendar-off { margin-top: var(--space-3); }
.calendar-new { border-left: 4px solid var(--lamp); }
.segmented-wide { max-width: 24rem; margin-top: var(--space-2); }
.segmented-wide button { flex-direction: row; justify-content: center; gap: var(--space-2); padding: 0.55rem 0.5rem; font-size: var(--step--1); }
.home-grid.is-side-only { grid-template-columns: minmax(0, 1fr); }
.home-grid.is-side-only .home-side { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); align-items: start; }
.home-grid + .section { margin-top: var(--space-6); }
.home-head + .section > h2:first-child, .home-head + .teaching-strip > h2 { margin-top: 0; }
.home-head + .section, .home-head + .setup-nudge + .section { margin-top: var(--space-4); }
/* Lesson sidebar in the app shell: notes stay put, the outline scrolls under them. */
@media (min-width: 60rem) {
  .has-shell .lesson-side { top: calc(var(--appbar-h) + var(--space-4)); max-height: calc(100vh - var(--appbar-h) - 2 * var(--space-4)); overflow: hidden; display: flex; flex-direction: column; }
  .has-shell .lesson-side .note-box { flex: none; }
  .has-shell .side-trace { flex: 1 1 auto; min-height: 8rem; overflow-y: auto; overscroll-behavior: contain; padding-right: var(--space-2); }
}
.has-shell .preview-side { overflow-y: auto; }
.avatar { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.continue { border: 1px solid var(--brand-navy-line); }
.preview-side .join-card .course-price { color: #b6bfcf; }
.copy-row .button { flex: none; white-space: nowrap; }

/* Public website pages and footer (ADR 0019) */
.footer-pages { flex-basis: 100%; }
.footer-credit a, .side-credit a { color: inherit; font-weight: 650; }
.side-credit a { color: #c9d1df; }
.side-credit a:hover { color: #fff; }
.site-page { max-width: var(--measure); }
.site-page .prose h2 { font-size: var(--step-1); }
.contact-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); max-width: 36rem; }
.contact-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-1); }
.contact-label { min-width: 6rem; font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); }
.contact-list a { font-weight: 650; overflow-wrap: anywhere; }
.site-credit { margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.site-credit h2 { font-size: var(--step-0); margin: 0 0 var(--space-2); }
.site-updated { margin-top: var(--space-5); }
.site-page-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.site-page-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); box-shadow: var(--shadow-1); }
.site-page-list a { display: grid; gap: 2px; min-width: 0; text-decoration: none; color: var(--ink); }
.site-page-title { font-weight: 700; color: var(--primary); }
.site-page-list a:hover .site-page-title { text-decoration: underline; }
.about-strip { max-width: 48rem; }
.about-strip p { font-size: var(--step-1); color: var(--ink-soft); }
.about-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--step-0) !important; font-weight: 650; }
/* The public Sign in button keeps button colours inside the header's account area (contrast). */
.account a.button { color: var(--primary-ink); }
.account a.button:hover { color: var(--primary-ink); }
.side-logo img { width: auto; }

/* ---------------------------------------------------------------------------
   Joining (ADR 0020): the join pages, the welcome questions, requests, and the
   code playground.
   ------------------------------------------------------------------------- */
.account a.button-quiet { color: var(--primary); }
.account { display: flex; align-items: center; gap: var(--space-2); }

.join { display: grid; gap: var(--space-6); align-items: start; }
.join-panel { position: relative; overflow: hidden; padding: var(--space-5); border-radius: var(--radius-l); background: var(--brand-navy); color: #dfe4ee; }
.join-panel a { color: #fff; }
.join-school { font-family: var(--font-head); font-size: var(--step-2); line-height: 1.15; font-weight: 750; color: #fff; margin: 0 0 var(--space-2); max-width: 18ch; }
.join-tagline { color: var(--accent-on-dark); font-weight: 650; margin: 0 0 var(--space-5); }
.persona-list { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: grid; gap: var(--space-4); }
.persona-list li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.persona-list .icon { width: 2.5rem; height: 2.5rem; padding: 0.55rem; border-radius: var(--radius-s); background: #222939; color: var(--lamp); stroke: currentColor; }
.persona-list strong { display: block; color: #fff; }
.persona-list span { color: var(--brand-navy-soft); font-size: var(--step--1); }
.join-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.join-steps li { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: #fff; font-weight: 600; font-size: var(--step--1); }
.join-steps li + li::before { content: ""; position: absolute; left: calc(0.5rem - 1px); bottom: calc(50% + 0.5rem); height: calc(100% - 1rem); width: 2px; background: var(--brand-navy-line); }
.join-step-node { flex: none; width: 1rem; height: 1rem; border-radius: 3px; border: 2px solid #4a556d; background: var(--brand-navy); }
.join-steps li:first-child .join-step-node { background: #d52f2f; border-color: #d52f2f; }
.join-main { min-width: 0; max-width: 34rem; }
.join-main .page-head h1 { margin-top: 0; }
.join-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: var(--space-5); }
.join-card h2 { margin-top: 0; font-size: var(--step-1); }
.join-form { gap: var(--space-4); }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.reveal-row { display: flex; gap: var(--space-2); align-items: stretch; }
.reveal-row input { flex: 1 1 auto; min-width: 0; }
.reveal-row .button { flex: none; min-width: 4.5rem; }
.consent { gap: var(--space-1); }
.consent .choice { font-size: var(--step--1); line-height: 1.45; }
.join-submit { justify-self: stretch; justify-content: center; min-height: 3rem; font-size: var(--step-0); }
.join-submit .icon { width: 1.25rem; height: 1.25rem; }
.join-signin { margin: var(--space-4) 0 0; color: var(--ink-soft); }
.join-note { color: var(--ink-soft); font-size: var(--step--1); }
.join-others { display: grid; gap: var(--space-3); margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.join-other { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); color: var(--ink-soft); text-decoration: none; font-size: var(--step--1); }
.join-other:hover { border-color: var(--primary); }
.join-other .icon { width: 2.25rem; height: 2.25rem; padding: 0.45rem; border-radius: var(--radius-s); background: var(--primary-soft); color: var(--primary); }
.join-other strong { display: block; color: var(--ink); font-size: var(--step-0); }
.join-cta { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.join-share { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.join-share p { margin: 0 0 var(--space-2); overflow-wrap: anywhere; }
.join-code .secret { font-size: var(--step-2); letter-spacing: 0.12em; font-weight: 700; }
@media (min-width: 52rem) {
  .join { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-7); }
  .join-panel { position: sticky; top: var(--space-5); padding: var(--space-6); min-height: 32rem; }
  .join-school { font-size: var(--step-3); }
}
@media (max-width: 51.99rem) {
  .join-panel .persona-list, .join-panel .pixels-hero { display: none; }
  .join-panel { padding: var(--space-4) var(--space-5); }
  .join-school { font-size: var(--step-1); }
  .join-tagline { margin-bottom: var(--space-3); }
  .join-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-2); }
  .join-steps li { flex-direction: column; align-items: flex-start; gap: var(--space-2); font-size: 0.8125rem; line-height: 1.3; }
  .join-steps li + li::before { display: none; }
}

/* Welcome questions: big tappable tiles */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3); }
.tile-grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.tile { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 2px solid var(--line); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; min-height: 100%; transition: border-color 0.15s ease, background-color 0.15s ease; }
.tile:hover { border-color: var(--line-strong); }
.tile input { position: absolute; top: var(--space-3); right: var(--space-3); width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--primary); }
.tile:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.tile:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.tile-icon .icon { width: 2.75rem; height: 2.75rem; padding: 0.6rem; border-radius: var(--radius-s); background: var(--primary-soft); color: var(--primary); }
.tile:has(input:checked) .tile-icon .icon { background: var(--primary); color: var(--primary-ink); }
.tile-text { display: flex; flex-direction: column; gap: 0.15rem; padding-right: var(--space-5); }
.tile-text strong { font-size: var(--step-0); }
.tile-text > span { color: var(--ink-soft); font-size: var(--step--1); font-weight: 400; line-height: 1.45; }
.tile-level { display: flex; align-items: flex-end; gap: 4px; height: 1.5rem; }
.tile-level span { width: 0.6rem; border-radius: 2px; background: var(--line); }
.tile-level span:nth-child(1) { height: 40%; }
.tile-level span:nth-child(2) { height: 70%; }
.tile-level span:nth-child(3) { height: 100%; }
.tile-level .is-on { background: var(--primary); }
.tile-extra { margin-top: var(--space-2); }
.dev-links { padding: var(--space-4) var(--space-5); border: 1px dashed var(--line-strong); border-radius: var(--radius-m); gap: var(--space-3); }
.dev-links legend { padding: 0 var(--space-2); margin-left: calc(-1 * var(--space-2)); }
.rhythm-list { display: grid; gap: var(--space-2); max-width: 30rem; }
.rhythm { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 2px solid var(--line); border-radius: var(--radius-m); background: var(--surface); cursor: pointer; min-height: 3.25rem; }
.rhythm:hover { border-color: var(--line-strong); }
.rhythm input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--primary); flex: none; }
.rhythm:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); }
.rhythm:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.rhythm-days { display: grid; grid-template-columns: repeat(7, 0.75rem); gap: 3px; flex: none; }
.rhythm-days span { height: 0.75rem; border-radius: 2px; background: var(--line); }
.rhythm-days .is-on { background: var(--lamp); }
.rhythm:has(input:checked) .rhythm-days .is-on { background: var(--primary); }
.rhythm-label { font-weight: 650; }

/* Home: getting started, email confirmation, weekly goal, reasons on cards */
.onboard-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-6); border-radius: var(--radius-l); background: var(--brand-navy); color: #dfe4ee; max-width: 56rem; box-shadow: var(--shadow-1); position: relative; overflow: hidden; }
.onboard-card::after { content: ""; position: absolute; right: -1rem; top: -1rem; width: 6rem; height: 6rem; background: linear-gradient(90deg, transparent 0 66%, rgba(35, 161, 222, 0.25) 66%) 0 0 / 1.5rem 1.5rem, linear-gradient(transparent 0 66%, rgba(35, 161, 222, 0.25) 66%) 0 0 / 1.5rem 1.5rem; pointer-events: none; }
.onboard-text { flex: 1 1 22rem; }
.onboard-text h2 { color: #fff; margin: 0 0 var(--space-1); font-size: var(--step-1); }
.onboard-text p { margin: 0; color: var(--brand-navy-soft); max-width: 46ch; }
.onboard-actions { display: flex; align-items: center; gap: var(--space-4); position: relative; z-index: 1; }
.onboard-actions .button { background: #d52f2f; border-color: #d52f2f; color: #fff; }
.onboard-actions .linklike { color: var(--brand-navy-soft); }
.onboard-actions .linklike:hover { color: #fff; }
.confirm-email { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); border-left-color: var(--warn); }
.confirm-email p { margin: 0; }
.week-goal { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.week-goal p { margin: 0; }
.week-pips { display: inline-flex; gap: 4px; }
.week-pips span { width: 0.9rem; height: 0.9rem; border-radius: 3px; border: 2px solid var(--line-strong); }
.week-pips .is-on { background: var(--primary); border-color: var(--primary); }
.course-card-why { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--step--1); font-weight: 650; color: var(--primary); }
.course-card-why .icon { width: 1rem; height: 1rem; flex: none; margin-top: 0.15rem; }

/* School → Joining requests */
.request-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.request { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--lamp); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); }
.request p { margin: 0 0 var(--space-2); }
.request-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.request-kind { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; color: var(--primary); font-size: var(--step--1); }
.request-kind .icon { width: 1.1rem; height: 1.1rem; }
.request-who a { margin-left: var(--space-2); overflow-wrap: anywhere; }
.request-message { color: var(--ink-soft); border-left: 2px solid var(--line); padding-left: var(--space-3); margin-bottom: var(--space-3); }
.request-message p { margin: 0 0 var(--space-2); }
.request .row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.request .row-actions form { margin: 0; }
.request-history { margin-top: var(--space-5); }
.request-history summary { cursor: pointer; font-weight: 650; }
.request-history ul { margin-top: var(--space-3); }
.request-history li { padding: var(--space-1) 0; }
.teach-status { margin-bottom: var(--space-5); }
.people-profile { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-left: var(--space-2); }

/* Code playground */
.pg { display: grid; gap: var(--space-5); align-items: start; margin-bottom: var(--space-6); }
@media (min-width: 64rem) { .pg { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.pg-main { min-width: 0; }
.pg-form { display: grid; gap: var(--space-3); }
.pg-bar { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pg-title { flex: 1 1 14rem; min-width: 0; font-weight: 650; }
.pg-example { flex: 0 1 14rem; min-width: 0; }
.pg-editor { display: grid; grid-template-columns: auto minmax(0, 1fr); border-radius: var(--radius-m); overflow: hidden; background: #0f131c; border: 1px solid #262e3f; box-shadow: var(--shadow-1); }
.pg-editor:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pg-gutter, .pg-editor textarea { font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.9rem; line-height: 1.6; padding: var(--space-3) var(--space-3); }
.pg-gutter { color: #56607a; text-align: right; user-select: none; white-space: pre; background: #131824; border-right: 1px solid #222a3a; min-width: 3rem; overflow: hidden; }
.pg-editor textarea { display: block; width: 100%; min-height: 22rem; resize: vertical; border: 0; border-radius: 0; background: transparent; color: #e6ebf3; caret-color: #23a1de; tab-size: 2; white-space: pre; overflow: auto; outline: none; box-shadow: none; }
.pg-editor textarea::selection { background: rgba(35, 161, 222, 0.35); }
.pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pg-run { background: #d52f2f; border-color: #d52f2f; color: #fff; }
.pg-run .icon { width: 1rem; height: 1rem; fill: currentColor; }
.pg-run kbd { font: 600 0.7rem/1 ui-monospace, Menlo, Consolas, monospace; padding: 0.2rem 0.35rem; border-radius: 4px; background: rgba(255, 255, 255, 0.18); margin-left: 0.25rem; }
.pg-run kbd:first-of-type { margin-left: var(--space-2); }
.pg-out { min-width: 0; border-radius: var(--radius-m); background: #0f131c; border: 1px solid #262e3f; color: #e6ebf3; overflow: hidden; }
@media (min-width: 64rem) { .pg-out { position: sticky; top: var(--space-5); } }
.pg-out-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: #131824; border-bottom: 1px solid #222a3a; }
.pg-out-head h2 { margin: 0; font-size: var(--step--1); color: #fff; margin-right: auto; }
.pg-out-head .small { color: #8a93a6; }
.pg-out-head .linklike { color: #a7b0c2; padding: 0; }
.pg-console { margin: 0; padding: var(--space-3) var(--space-4); min-height: 16rem; max-height: 32rem; overflow: auto; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.875rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; background: transparent; border: 0; color: inherit; }
.pg-line { display: block; padding: 0.1rem 0; border-bottom: 1px solid #1a2030; }
.pg-line::before { content: "› "; color: #23a1de; }
.pg-error { display: block; color: #ff8a7a; padding: var(--space-1) 0; }
.pg-note { display: block; color: #8a93a6; padding-top: var(--space-2); }
.pg-hint { color: #8a93a6; }
.snippet-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-2); }
.snippet-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.snippet-list li.is-open { border-color: var(--primary); background: var(--primary-soft); }
.snippet-list a { display: flex; gap: var(--space-2); align-items: flex-start; min-width: 0; text-decoration: none; color: var(--ink); }
.snippet-list a > span { display: flex; flex-direction: column; min-width: 0; }
.snippet-list .icon { width: 1.1rem; height: 1.1rem; flex: none; margin-top: 0.2rem; color: var(--primary); }
.snippet-title { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snippet-list form { margin: 0; flex: none; }

/* TridaxLabs credit mark */
.tridax-mark { flex: none; display: inline-block; vertical-align: middle; }
.credit-line { display: flex; align-items: flex-start; gap: var(--space-3); }
.credit-line .tridax-mark { margin-top: 0.15rem; }
.join-code-field input { max-width: 16rem; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: var(--step-1); letter-spacing: 0.12em; text-transform: uppercase; }
.join-form > .join-submit { justify-self: stretch; }
.join-panel, .onboard-card { border: 1px solid var(--brand-navy-line); }
@media (pointer: coarse), (max-width: 40rem) { .pg-run kbd { display: none; } }
@media (max-width: 40rem) {
  .pg-editor textarea { min-height: 14rem; }
  .pg-console { min-height: 8rem; }
  .pg-actions .button { flex: 1 1 auto; justify-content: center; }
}
.teach-status h2 { margin-top: 0; font-size: var(--step-1); }
.teach-status p:last-child { margin-bottom: 0; }
.facts + .actions { margin-top: var(--space-4); }