/* Shared design tokens. Spacing follows a 4 px base; type is relative to browser settings. */
:root {
  color-scheme:light;
  --font-caption:.8125rem;
  --font-small:.875rem;
  --font-body:1rem;
  --font-h3:1.125rem;
  --font-h2:1.5rem;
  --font-h1:2rem;
  --font-h1-compact:1.75rem;
  --font-display:3.5rem;
  --font-brand:1.25rem;
  --leading-heading:1.25;
  --leading-body:1.6;
  --leading-reading:1.75;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --control-height:44px;
  --control-small:36px;
  --radius-control:0px;
  --radius-panel:0px;
  --radius-small:0px;
  --sidebar-width:240px;
  --curriculum-width:224px;
  --page-width:1280px;
  --reading-width:880px;
  --page-gutter:var(--space-6);
  --panel-padding:var(--space-5);
  --ink:#292940;
  --muted:#626b7d;
  --paper:#fbfcfe;
  --surface:#fff;
  --soft:#f1f4f9;
  --field:#fff;
  --line:#e2e6ee;
  --line-strong:#cbd2df;
  --accent-soft:#e8f0ff;
  --primary:#1264e3;
  --on-primary:#fff;
  --secondary:#fff;
  --on-secondary:#292940;
  --selected:#eaf1ff;
  --on-selected:#1758ba;
  --success:#32694e;
  --success-bg:#eef6f1;
  --warning:#74541c;
  --warning-bg:#fff3cf;
  --revision:#9c592c;
  --revision-bg:#fff0e6;
  --danger:#a6362c;
  --danger-bg:#fff0eb;
  --focus:#1572fe;
  --quote-bg:#f3f6fb;
  --quote-line:#9abdf9;
  --story-bg:#edf2fa;
  --avatar-bg:#e9edf5;
  --track-bg:#e2e6ee;
  --track-fill:#1572fe;
  --shadow:0 8px 24px #0002;
  font-family:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:100%;
  font-synthesis:none;
  line-height:var(--leading-body);
  color:var(--ink);
}
:root[data-theme=dark] {
  color-scheme:dark;
  --ink:#e7ebf3;
  --muted:#aab4c5;
  --paper:#151720;
  --surface:#1e212d;
  --soft:#262b3a;
  --field:#191d28;
  --line:#32384a;
  --line-strong:#475269;
  --accent-soft:#384f7c;
  --primary:#1264e3;
  --on-primary:#ffffff;
  --secondary:#282e3e;
  --on-secondary:#e7ebf3;
  --selected:#243858;
  --on-selected:#c4d8ff;
  --success:#aed7bd;
  --success-bg:#223b32;
  --warning:#eed392;
  --warning-bg:#463b22;
  --revision:#f0c097;
  --revision-bg:#463327;
  --danger:#ffc0ac;
  --danger-bg:#492b28;
  --focus:#8cb7ff;
  --quote-bg:#222c40;
  --quote-line:#577fbf;
  --story-bg:#1c2537;
  --avatar-bg:#30394d;
  --track-bg:#323b50;
  --track-fill:#73a7ff;
  --shadow:0 8px 24px #0006;
}

/* Base typography and accessible controls. */
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); font-size:var(--font-body); }
[hidden] { display:none!important; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; color:inherit; }
button { border:0; background:none; cursor:pointer; }
button:disabled { cursor:not-allowed; opacity:.55; }
button[aria-busy=true] { cursor:progress; }
a,button,input,textarea,select,summary { outline-offset:var(--space-1); }
:where(a,button,input,textarea,select,summary,[contenteditable]):focus-visible {
  outline:2px solid var(--focus);
}
h1,h2,h3 { margin:0 0 var(--space-4); line-height:var(--leading-heading); font-weight:600; overflow-wrap:anywhere; }
h1 { font-size:var(--font-h1); letter-spacing:-.035em; }
h2 { font-size:var(--font-h2); letter-spacing:-.025em; }
h3 { font-size:var(--font-h3); letter-spacing:-.01em; }
p,ul,ol,blockquote,pre,figure { margin:0 0 var(--space-4); }
p { overflow-wrap:anywhere; }
small { font-size:var(--font-caption); }
strong { font-weight:600; }
img,video { max-width:100%; }
label { display:block; margin:var(--space-4) 0 var(--space-2); font-size:var(--font-small); font-weight:600; }
form>label:first-child { margin-top:0; }
input,textarea,select {
  width:100%; min-width:0; min-height:var(--control-height);
  border:1px solid var(--line-strong); border-radius:var(--radius-control);
  padding:var(--space-2) var(--space-3); background:var(--field);
  font-size:var(--font-body); line-height:1.5;
}
textarea { min-height:128px; resize:vertical; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input:disabled,textarea:disabled,select:disabled { opacity:.7; }
input[type=radio],input[type=checkbox] {
  width:18px; height:18px; min-height:0; padding:0; margin:0;
  flex-shrink:0; accent-color:var(--focus);
}
input[type=color] { width:96px; padding:var(--space-2); }
input[type=file] { height:auto; padding:var(--space-2); }
input[type=file]::file-selector-button {
  min-height:var(--control-small); margin-right:var(--space-2);
  padding:var(--space-2) var(--space-3); border:1px solid var(--line-strong);
  border-radius:var(--radius-small); background:var(--secondary); color:var(--on-secondary); font:inherit; cursor:pointer;
}
.btn {
  display:inline-flex; justify-content:center; align-items:center; gap:var(--space-2);
  min-height:var(--control-height); padding:var(--space-2) var(--space-4);
  border:1px solid transparent; border-radius:var(--radius-control);
  background:var(--primary); color:var(--on-primary);
  font-size:var(--font-small); line-height:1.4; font-weight:600;
  white-space:normal; text-align:center; overflow-wrap:anywhere;
}
.btn.light { background:var(--secondary); color:var(--on-secondary); border-color:var(--line-strong); }
.btn.accent { background:var(--primary); color:var(--on-primary); }
.btn.danger { background:var(--danger-bg); color:var(--danger); }
.btn.small { min-height:var(--control-small); padding:var(--space-1) var(--space-3); font-size:var(--font-caption); }
.btn:hover:not(:disabled) { filter:brightness(.96); }
.text-link { font-size:var(--font-small); text-decoration:underline; text-underline-offset:var(--space-1); }
.text-link:hover { text-decoration-thickness:2px; }
.password-toggle { display:block; min-height:var(--control-height); padding:var(--space-2) 0; text-align:left; }
.ui-icon { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }

/* Shared layout and form helpers; presentation stays out of templates. */
.muted { color:var(--muted); }
.caption { font-size:var(--font-caption); }
.preserve-lines { white-space:pre-wrap; }
.flush { margin:0; }
.mt-2 { margin-top:var(--space-2); }
.mt-3 { margin-top:var(--space-3); }
.mt-4 { margin-top:var(--space-4); }
.mt-5 { margin-top:var(--space-5); }
.eyebrow { font-size:var(--font-caption); line-height:1.5; letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.row>* { min-width:0; }
.row>label { margin:0; }
label.row { min-height:var(--control-height); }
.spread { justify-content:space-between; }
.form-actions,.dialog-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-5); }
.dialog-actions { justify-content:flex-end; }
.field-hint,.draft-status,.progress-note,.access-note { margin:var(--space-2) 0 0; font-size:var(--font-caption); line-height:1.5; }
.field-hint:empty,.draft-status:empty { display:none; }
.form-error { margin-top:var(--space-4); padding:var(--space-3); border-radius:var(--radius-control); font-size:var(--font-small); background:var(--danger-bg); color:var(--danger); }
.copyable,.lesson-content { user-select:text; -webkit-user-select:text; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
[aria-current=page] { font-weight:600; }
#main-content:focus,.auth-form h2:focus,h1[tabindex]:focus { outline:none; }

/* Platform shell. Learning pages deliberately have no topbar. */
.shell { display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); min-height:100dvh; }
.sidebar { position:fixed; inset:0 auto 0 0; width:var(--sidebar-width); padding:var(--space-6) var(--space-4); background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; overflow-y:auto; z-index:10; }
.sidebar-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-2); }
.brand { display:flex; align-items:center; gap:var(--space-3); width:max-content; min-height:var(--control-height); font-size:var(--font-brand); line-height:1.25; font-weight:750; letter-spacing:-.04em; }
.icon-button { width:var(--control-small); min-width:var(--control-small); min-height:var(--control-small); padding:0; }
.brandmark { display:grid; place-items:center; flex-shrink:0; width:36px; height:36px; border-radius:var(--radius-control); background:var(--accent-soft); color:var(--on-selected); font-size:var(--font-h2); }
.nav { display:grid; gap:var(--space-2); margin-top:var(--space-7); }
.nav a { display:flex; align-items:center; gap:var(--space-3); min-height:var(--control-height); padding:var(--space-3); border-radius:var(--radius-control); color:var(--muted); font-size:var(--font-small); line-height:1.4; }
.nav a.active,.nav a:hover { color:var(--on-selected); background:var(--selected); }
.nav a.active { font-weight:600; }
.nav-label { margin:var(--space-5) var(--space-3) 0; font-size:var(--font-caption); line-height:1.5; letter-spacing:.1em; color:var(--muted); }
.sidebar-bottom { margin-top:auto; padding-top:var(--space-6); }
.userline { display:flex; align-items:center; gap:var(--space-3); font-size:var(--font-small); }
.userline>span:last-child { min-width:0; overflow-wrap:anywhere; }
.userline small { display:block; margin-top:var(--space-1); color:var(--muted); }
.avatar { display:inline-grid; place-items:center; flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--avatar-bg); font-size:var(--font-caption); font-weight:600; }
.workspace { grid-column:2; min-width:0; }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:var(--space-4); min-height:80px; padding:var(--space-4) var(--page-gutter); border-bottom:1px solid var(--line); font-size:var(--font-small); }
.topbar-start,.topbar-right { display:flex; align-items:center; gap:var(--space-3); }
.topbar-start { min-width:0; }
.topbar-start>span { overflow-wrap:anywhere; }
.topbar-right { flex-shrink:0; }
.topbar-right>.avatar { width:44px; height:44px; }
.notification-link { display:flex; justify-content:center; align-items:center; gap:var(--space-1); min-width:44px; min-height:44px; border-radius:var(--radius-control); }
.notification-link:hover { background:var(--soft); }
.mobile-header-actions,.menu-toggle { display:none; }
.content { width:100%; max-width:var(--page-width); margin-inline:auto; padding:var(--space-6) var(--page-gutter) var(--space-7); }
.pagehead { display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:var(--space-4) var(--space-5); margin-bottom:var(--space-5); }
.pagehead>div { min-width:0; flex:1 1 320px; }
.pagehead h1 { margin-bottom:0; }
.pagehead p { max-width:68ch; margin:var(--space-2) 0 0; font-size:var(--font-small); }
.pagehead>.btn { flex-shrink:0; }
.learning-shell .content { max-width:none; margin-left:0; padding:var(--space-5) var(--space-5) var(--space-7) var(--space-4); }
.theme-control { display:block; margin:0; }
.theme-control select { width:auto; min-width:128px; font-size:var(--font-small); }

/* Cards, course catalog and consistent section rhythm. */
.panel,.block,.empty,.course-card,.curriculum,.editor-tree,.table-wrap { border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--surface); }
.panel,.block { padding:var(--panel-padding); margin-bottom:var(--space-4); min-width:0; }
.panel>:last-child,.block>:last-child { margin-bottom:0; }
.panel>.eyebrow+h2 { margin-top:var(--space-2); }
.panel>.row h2 { margin:0; }
.empty { padding:var(--space-7) var(--panel-padding); text-align:center; border-style:dashed; }
.empty p { max-width:60ch; margin-inline:auto; }
.empty .btn { margin-top:var(--space-2); }
.section-title { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); margin:var(--space-6) 0 var(--space-4); }
.section-title h2 { margin:0; }
.resume-panel { display:flex; align-items:center; justify-content:space-between; gap:var(--space-5); padding:var(--panel-padding); border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--soft); }
.resume-panel>div { min-width:0; }
.resume-panel h2 { margin:var(--space-2) 0; }
.resume-panel p { margin:0; color:var(--muted); font-size:var(--font-small); }
.resume-panel>.btn { flex-shrink:0; }
.course-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:var(--space-5); align-items:stretch; }
.course-card { overflow:hidden; display:flex; flex-direction:column; min-width:0; }
.course-cover { position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-5); min-height:128px; padding:var(--panel-padding); overflow:hidden; color:var(--ink); background:var(--cover-color,var(--soft)); }
[data-theme=dark] .course-cover { background:color-mix(in srgb,var(--cover-color,var(--soft)) 14%,var(--surface)); }
.course-cover::after { content:''; position:absolute; z-index:-1; width:144px; height:144px; right:var(--space-4); top:-24px; border:20px solid #1572fe12; border-radius:50%; }
.cover-pattern-1::after { border-radius:var(--radius-panel); transform:rotate(25deg); }
.cover-pattern-2::after { border-radius:0; border-width:1px; box-shadow:12px 12px 0 #1572fe0c,24px 24px 0 #1572fe0c; transform:rotate(-15deg); }
.cover-bottom { margin-top:auto; font-size:var(--font-small); font-weight:600; }
.tag { width:max-content; max-width:100%; padding:var(--space-1) var(--space-2); border:1px solid #0002; border-radius:var(--radius-small); background:#ffffffa0; font-size:var(--font-caption); letter-spacing:.04em; }
.course-body { display:flex; flex:1; flex-direction:column; align-items:stretch; gap:var(--space-4); padding:var(--panel-padding); min-width:0; }
.course-body h3,.course-body p { margin:0; }
.course-body>p { font-size:var(--font-small); color:var(--muted); }
.course-body>.badge { align-self:flex-start; }
.course-body .progress-line { margin-top:auto; }
.course-body .track { margin-top:calc(-1 * var(--space-2)); }
.course-body .progress-note { margin-top:calc(-1 * var(--space-2)); }
.course-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3) var(--space-4); }
.single-course { grid-template-columns:minmax(0,1fr); }
.single-course .course-card { display:grid; grid-template-columns:var(--curriculum-width) minmax(0,1fr); }
.single-course .course-cover { min-height:100%; }
.single-course .course-cover::after { top:var(--space-5); }
.single-course .course-body>p { max-width:68ch; }
.progress-line { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-2); font-size:var(--font-caption); line-height:1.5; color:var(--muted); }
.progress-count { white-space:nowrap; }
.progress-line>span:last-child { flex-shrink:0; }
.track { height:4px; overflow:hidden; border-radius:var(--radius-small); background:var(--track-bg); }
.track>span { display:block; height:100%; border-radius:inherit; background:var(--track-fill); }
.access-note { color:var(--muted); }

/* Learning workspace: narrow navigation, bounded reading measure. */
.lesson-layout { display:grid; grid-template-columns:var(--curriculum-width) minmax(0,1fr); align-items:start; gap:var(--space-5); }
.curriculum-toggle { justify-self:start; }
.curriculum { position:sticky; top:var(--space-4); max-height:calc(100dvh - var(--space-6)); overflow-y:auto; scrollbar-width:thin; }
.curriculum-head { padding:var(--space-4); border-bottom:1px solid var(--line); }
.curriculum-summary { display:flex; align-items:flex-start; gap:var(--space-2); margin-bottom:var(--space-3); }
.curriculum-summary>a { flex:1; min-width:0; }
.curriculum-summary h3 { margin:0; font-size:var(--font-small); line-height:1.5; }
.curriculum-summary .icon-button { flex-shrink:0; }
.curriculum-summary a:hover { text-decoration:underline; text-underline-offset:var(--space-1); }
.module-name { padding:var(--space-4) var(--space-3) var(--space-2); color:var(--muted); font-size:var(--font-caption); line-height:1.5; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.lesson-nav { display:flex; align-items:center; gap:var(--space-2); min-height:var(--control-height); padding:var(--space-3); border-left:3px solid transparent; font-size:var(--font-small); line-height:1.5; }
.lesson-nav>span:last-child { min-width:0; overflow-wrap:anywhere; }
.lesson-nav.active { background:var(--selected); border-left-color:var(--focus); }
.lesson-nav:hover { background:var(--soft); }
.lesson-nav.completed { color:var(--success); }
.lesson-nav.pending>.status-symbol { color:var(--warning); }
.lesson-nav.revision>.status-symbol { color:var(--revision); }
.lesson-status { display:block; margin-top:var(--space-1); color:var(--muted); font-size:var(--font-caption); }
.lesson-body { width:100%; min-width:0; max-width:var(--reading-width); }
.lesson-meta { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
.lesson-body>h1 { margin-bottom:var(--space-5); }
/* Read lessons as one article, with whitespace separating content blocks. */
.lesson-content>.block {
  padding:0; margin-bottom:var(--space-6);
  border:0; background:transparent;
}
.lesson-body>.panel {
  padding:var(--space-5) 0 0; border:0; border-top:1px solid var(--line);
  background:transparent;
}
.block { line-height:var(--leading-reading); overflow-wrap:anywhere; }
.block h2,.block h3 { line-height:var(--leading-heading); }
.block :is(p,ul,ol) { max-width:68ch; }
.block :is(p,li) { font-size:var(--font-body); }
.block :is(h2,h3):not(:first-child) { margin-top:var(--space-5); }
.block :is(ul,ol) { padding-left:var(--space-5); }
.block blockquote { padding:var(--space-4); margin-block:var(--space-5); border-left:3px solid var(--quote-line); background:var(--quote-bg); }
.lesson-content blockquote { padding-block:0; background:transparent; }
.block figure { margin:0; }
.block figcaption { margin-top:var(--space-2); font-size:var(--font-caption); color:var(--muted); }
.block img,.block video { display:block; width:100%; max-height:600px; border-radius:0; object-fit:contain; background:var(--paper); }
.block.media-block { padding:0; overflow:hidden; }
.media-block :is(img,video) { border-radius:0; }
.media-block video { aspect-ratio:16/9; max-height:none; background:#101827; }
.media-block figcaption { margin:0; padding:var(--space-3) var(--space-4); }
.lesson-content .media-block figcaption { padding-inline:0; }
.block pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.command { padding:var(--space-4); border-radius:var(--radius-control); background:#222b40; color:#e5edff; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:var(--font-small); line-height:var(--leading-reading); }
.option { display:flex; align-items:flex-start; gap:var(--space-3); min-height:var(--control-height); margin:var(--space-2) 0 0; padding:var(--space-3); border:1px solid var(--line-strong); border-radius:var(--radius-control); font-size:var(--font-body); font-weight:400; line-height:1.5; cursor:pointer; }
.option input { margin-top:var(--space-1); }
.option:has(input:checked) { border-color:var(--focus); background:var(--soft); }
.option:has(input:focus-visible) { outline:2px solid var(--focus); outline-offset:var(--space-1); }
.lesson-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); margin-block:var(--space-5); }
.course-overview { max-width:var(--reading-width); margin-inline:auto; }
.overview-lesson { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); min-height:var(--control-height); padding-block:var(--space-4); border-bottom:1px solid var(--line); font-size:var(--font-small); }
.overview-lesson:last-child { border-bottom:0; }
.overview-lesson>span:first-child { min-width:0; overflow-wrap:anywhere; }
.overview-lesson .badge { flex-shrink:0; }
.overview-lesson.completed { color:var(--success); }
.comment { padding-block:var(--space-4); border-bottom:1px solid var(--line); }
.comment:last-child { border-bottom:0; padding-bottom:0; }
.comment p { white-space:pre-wrap; margin-block:var(--space-2); font-size:var(--font-small); }
.comment small { color:var(--muted); }

/* Status and feedback are semantic tokens in both themes. */
.badge { display:inline-block; padding:var(--space-1) var(--space-2); border:1px solid transparent; border-radius:var(--radius-small); background:var(--selected); color:var(--on-selected); font-size:var(--font-caption); line-height:1.5; }
.status-badge { display:inline-flex; align-items:center; gap:var(--space-1); font-weight:500; letter-spacing:0; text-transform:none; }
.status-symbol { display:inline-flex; align-items:center; justify-content:center; width:18px; flex-shrink:0; font-size:var(--font-h3); line-height:1; }
.badge.new { background:var(--paper); color:var(--muted); border-color:var(--line); }
.badge.pending { background:var(--warning-bg); color:var(--warning); }
.badge.completed,.badge.accepted { background:var(--success-bg); color:var(--success); }
.badge.revision { background:var(--revision-bg); color:var(--revision); }
.result { padding:var(--space-3); margin-top:var(--space-4); border-radius:var(--radius-control); background:var(--soft); font-size:var(--font-small); white-space:pre-wrap; }
.result.accepted { background:var(--success-bg); color:var(--success); }
.result.revision { background:var(--revision-bg); color:var(--revision); }
.result:focus { outline:2px solid var(--focus); outline-offset:var(--space-1); }
.result+.btn { margin-top:var(--space-2); }
.notice { padding:var(--space-3) var(--space-4); border:1px solid var(--line-strong); border-radius:var(--radius-control); background:var(--warning-bg); color:var(--warning); font-size:var(--font-small); line-height:var(--leading-body); }
.draft-conflict { margin-top:var(--space-4); }
.draft-conflict .btn { margin-top:var(--space-2); }

/* Author workspace and menus. */
.editor-pagehead .pagehead { margin-bottom:var(--space-3); }
.editor-actions { align-items:stretch; position:sticky; top:0; z-index:9; justify-content:flex-end; padding-block:var(--space-3); margin-bottom:var(--space-4); background:var(--paper); border-bottom:1px solid var(--line); }
.editor-actions:has(~.editor-layout :is(input,textarea,[contenteditable]):focus),body:has(dialog[open]) .editor-actions { position:static; }
.editor-layout { display:grid; grid-template-columns:var(--curriculum-width) minmax(0,1fr); gap:var(--space-5); align-items:start; }
.editor-layout>div { min-width:0; }
.editor-tree { padding:var(--space-4); }
.tree-toggle { display:none; }
.tree-content { min-width:0; }
.editor-module { margin-block:var(--space-4); }
.editor-tree .row.spread { flex-wrap:nowrap; gap:var(--space-2); }
.editor-tree .row.spread>a { flex:1; min-width:0; overflow-wrap:anywhere; }
.editor-module>.row>a { font-size:var(--font-small); font-weight:600; line-height:1.5; }
.editor-lesson { display:block; margin:var(--space-1) 0 var(--space-1) var(--space-2); padding:var(--space-2); border-left:2px solid var(--line-strong); font-size:var(--font-small); line-height:1.5; }
.editor-lesson.active { background:var(--selected); color:var(--on-selected); }
.lesson-title-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
.block-tools { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); padding-bottom:var(--space-3); margin-bottom:var(--space-4); border-bottom:1px solid var(--line); }
.block-tools>span { min-width:0; font-size:var(--font-caption); color:var(--muted); }
.block-tools>div { display:flex; align-items:center; flex-wrap:nowrap; gap:var(--space-2); }
.block-tools:has(.more-actions[open]),.editor-module:has(.more-actions[open]) { position:relative; z-index:21; }
.more-actions { position:relative; flex-shrink:0; font-size:var(--font-caption); }
.more-actions>summary { display:flex; align-items:center; justify-content:center; width:var(--control-small); min-height:var(--control-small); border:1px solid var(--line-strong); border-radius:var(--radius-control); background:var(--surface); cursor:pointer; list-style:none; letter-spacing:.1em; }
.more-actions>summary::-webkit-details-marker { display:none; }
.more-actions[open]>summary { background:var(--soft); }
.action-list { display:grid; gap:var(--space-1); position:absolute; top:calc(100% + var(--space-2)); right:0; width:224px; max-width:calc(100vw - var(--space-6)); padding:var(--space-2); z-index:20; border:1px solid var(--line-strong); border-radius:var(--radius-control); background:var(--surface); box-shadow:var(--shadow); }
.action-list .btn { width:100%; justify-content:flex-start; }
.toolbar { display:flex; flex-wrap:wrap; gap:var(--space-2); padding:var(--space-2); border:1px solid var(--line-strong); border-radius:var(--radius-control) var(--radius-control) 0 0; background:var(--soft); }
.richtext { min-height:160px; max-height:50dvh; overflow:auto; padding:var(--space-4); border:1px solid var(--line-strong); border-top:0; border-radius:0 0 var(--radius-control) var(--radius-control); background:var(--field); line-height:var(--leading-reading); }
.editor-options { display:grid; gap:var(--space-2); }
.editor-option { display:grid; grid-template-columns:var(--control-small) minmax(0,1fr) var(--control-small); gap:var(--space-2); align-items:center; }
.check-control { display:flex; align-items:center; justify-content:center; width:var(--control-small); min-height:var(--control-small); margin:0; }
.addblocks { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.block .editor-preview { max-height:256px; }
.review-title { margin:var(--space-2) 0; }
.preview-option { margin:var(--space-1) 0; }

/* Account, authentication and empty states. */
.auth-page { display:grid; grid-template-columns:1fr 1fr; min-height:100dvh; }
.auth-story { display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-7); padding:var(--space-7) var(--space-8); background:var(--story-bg); }
.auth-story h1 { margin:0 0 var(--space-5); font-size:var(--font-display); letter-spacing:-.045em; line-height:1.1; }
.auth-story p { max-width:40ch; color:var(--muted); }
.auth-main { display:grid; place-items:center; padding:var(--space-7); }
.auth-form { width:100%; max-width:400px; }
.auth-form>p { font-size:var(--font-small); }
.auth-form button[type=submit] { width:100%; margin-top:var(--space-5); }
.auth-switch { margin-top:var(--space-4); font-size:var(--font-small); text-align:center; }
.auth-switch a { text-decoration:underline; text-underline-offset:var(--space-1); }
.orbit { position:relative; align-self:center; display:grid; place-items:center; width:224px; height:224px; }
.orbit::before,.orbit::after { content:''; position:absolute; width:224px; height:224px; border:1px solid var(--line-strong); border-radius:50%; transform:rotate(-35deg) scaleX(.55); }
.orbit::after { transform:rotate(35deg) scaleX(.55); }
.orbit-core { display:grid; place-items:center; width:112px; height:112px; border-radius:var(--space-5); background:var(--accent-soft); color:var(--on-selected); transform:rotate(-10deg); font-size:var(--font-display); box-shadow:12px 12px 0 var(--soft); }
.orbit-dot { position:absolute; top:var(--space-5); right:var(--space-7); width:12px; height:12px; border-radius:50%; background:var(--focus); }
.wait { max-width:640px; margin:var(--space-7) auto; }
.wait-symbol { margin-bottom:var(--space-5); font-size:var(--font-display); line-height:1; }
.support-box { margin-top:var(--space-5); padding-top:var(--space-5); border-top:1px solid var(--line); }
.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:var(--space-5); margin-bottom:var(--space-5); }
.profile-grid>.panel,.profile-grid>div>.panel:last-child { margin:0; }
.certificate-symbol { margin-block:var(--space-4); color:var(--focus); font-size:var(--font-display); line-height:1; }
.secret { padding:var(--space-4); background:var(--soft); border-radius:var(--radius-control); overflow-wrap:anywhere; user-select:text; }

/* Administration: forms align on their control baseline; wide tables scroll locally. */
.tabs { display:flex; gap:var(--space-5); overflow:auto; margin:0 0 var(--space-5); border-bottom:1px solid var(--line); white-space:nowrap; }
.tabs a { display:flex; align-items:center; min-height:var(--control-height); padding-block:var(--space-3); border-bottom:2px solid transparent; font-size:var(--font-small); color:var(--muted); }
.tabs a.active { color:var(--ink); border-bottom-color:var(--focus); font-weight:600; }
.table-wrap { max-width:100%; overflow:auto; overscroll-behavior-x:contain; }
table { width:100%; border-collapse:collapse; text-align:left; white-space:nowrap; font-size:var(--font-small); line-height:1.5; }
th,td { padding:var(--space-4); vertical-align:middle; }
th { background:var(--soft); color:var(--muted); font-weight:600; }
td { border-top:1px solid var(--line); }
td select { width:auto; min-width:128px; }
.search { width:100%; max-width:480px; margin-bottom:var(--space-5); flex-wrap:nowrap; }
.search input { flex:1; min-width:0; }
.search .btn { flex-shrink:0; }
.inline-form { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,1fr) auto; align-items:end; gap:var(--space-4); }
.inline-form label { margin-top:0; }
.token-form input { flex:1 1 240px; max-width:400px; }
.admin-section-select { display:none; }
.answer-preview { padding:var(--space-4); background:var(--paper); border-radius:var(--radius-control); white-space:pre-wrap; overflow-wrap:anywhere; }
.compact-empty { margin:0 0 var(--space-4); font-size:var(--font-small); }
.notification-panel { padding:0; overflow:hidden; }
.notification { padding:var(--panel-padding); border-bottom:1px solid var(--line); }
.notification:last-child { border-bottom:0; }
.notification.unread { background:var(--soft); }
.notification p { margin:0 0 var(--space-2); font-size:var(--font-small); white-space:pre-wrap; }
.notification small { color:var(--muted); }

/* Dialogs and global feedback. */
dialog { width:calc(100% - var(--space-6)); max-width:560px; max-height:calc(100dvh - var(--space-6)); overflow:auto; padding:var(--panel-padding); border:1px solid var(--line-strong); border-radius:var(--radius-panel); color:var(--ink); background:var(--surface); box-shadow:var(--shadow); }
dialog::backdrop { background:#101a1470; }
dialog.image-drawing-dialog { max-width:1000px; }
dialog.image-preview-dialog { max-width:min(1400px,96vw); }
.image-preview-scroll { max-height:72dvh; overflow:auto; }
.image-preview-scroll img { display:block; width:auto; max-width:none; max-height:none; }
.lesson-content details { border:1px solid var(--line-strong); border-radius:var(--radius-control); padding:var(--space-3); margin-block:var(--space-3); }
.lesson-content summary { cursor:pointer; font-weight:600; padding:var(--space-2); }
.drawing-tools { align-items:flex-end; margin-bottom:var(--space-3); }
.drawing-tools label { margin:0; }
.drawing-tools select { width:auto; }
.drawing-surface { margin-top:var(--space-4); border:1px solid var(--line-strong); background:var(--soft); }
.drawing-surface canvas { display:block; width:100%; height:auto; cursor:crosshair; touch-action:none; }
#toast { position:fixed; bottom:var(--space-5); left:50%; z-index:100; width:max-content; max-width:min(560px,calc(100vw - var(--space-6))); padding:var(--space-3) var(--space-5); border-radius:var(--radius-control); background:var(--primary); color:var(--on-primary); box-shadow:var(--shadow); font-size:var(--font-small); transform:translate(-50%,var(--space-6)); opacity:0; visibility:hidden; transition:opacity .15s,transform .15s; }
#toast.show { opacity:1; visibility:visible; transform:translate(-50%,0); }
.loading { padding:var(--space-8) var(--space-5); text-align:center; color:var(--muted); }
#route-loading { position:fixed; z-index:150; top:var(--space-3); left:50%; transform:translateX(-50%); max-width:calc(100vw - var(--space-6)); padding:var(--space-3) var(--space-4); border:1px solid var(--line-strong); border-radius:var(--radius-control); background:var(--surface); color:var(--ink); box-shadow:var(--shadow); font-size:var(--font-small); }
.skip-link { position:fixed; z-index:200; top:var(--space-2); left:var(--space-2); padding:var(--space-3) var(--space-4); border-radius:var(--radius-control); background:var(--primary); color:var(--on-primary); transform:translateY(-160%); }
.skip-link:focus { transform:translateY(0); }

/* One responsive rule per component and breakpoint. */
@media(min-width:1001px) {
  .learning-shell .workspace:has(.lesson-body) { background:var(--soft); }
  [data-theme=dark] .learning-shell .workspace:has(.lesson-body) { background:var(--paper); }
  .lesson-body { padding:var(--space-6); background:var(--surface); }
}
@media(max-width:1200px) {
  .lesson-layout,.editor-layout { grid-template-columns:minmax(0,1fr); }
  .curriculum { position:static; max-height:55dvh; }
  .lesson-body { margin-inline:auto; }
  .editor-tree { padding:0; }
  .tree-toggle { display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); min-height:var(--control-height); width:100%; padding:var(--space-3) var(--space-4); text-align:left; font-weight:600; }
  .tree-toggle>span { min-width:0; overflow-wrap:anywhere; }
  .tree-toggle small { display:block; margin-top:var(--space-1); font-weight:400; color:var(--muted); }
  .editor-tree:not(.expanded) .tree-content { display:none; }
  .editor-tree.expanded .tree-content { padding:var(--space-4); max-height:60dvh; overflow:auto; border-top:1px solid var(--line); }
  .editor-tree.expanded .action-list { position:static; width:224px; max-width:100%; margin-top:var(--space-2); box-shadow:none; }
  .editor-tree .row.spread:has(.more-actions[open]) { flex-wrap:wrap; }
  .auth-story { padding:var(--space-6); }
  .auth-story h1 { font-size:var(--font-h1); }
}
@media(max-width:1000px) {
  :root { --page-gutter:var(--space-5); --control-small:44px; --font-h1:var(--font-h1-compact); }
  .shell { display:block; }
  .sidebar { position:static; width:auto; padding:var(--space-2) var(--page-gutter); border-right:0; border-bottom:1px solid var(--line); overflow:visible; }
  .brand { gap:var(--space-2); font-size:var(--font-h3); }
  .brandmark { width:32px; height:32px; }
  .sidebar-bottom,.topbar { display:none; }
  .mobile-header-actions { display:flex; margin-left:auto; align-items:center; gap:var(--space-2); }
  .menu-toggle { display:inline-flex; }
  .sidebar .nav { display:none; margin-top:var(--space-4); }
  .nav-label { grid-column:1/-1; margin-top:var(--space-4); }
  .content { padding-top:var(--space-5); }
  .learning-shell .content { padding-inline:var(--page-gutter); }
  .profile-grid { grid-template-columns:minmax(0,1fr); }
  .inline-form { grid-template-columns:minmax(0,1fr); }
  .inline-form>.btn { width:100%; }
  .admin-tabs { display:none; }
  .admin-section-select { display:block; margin:0 0 var(--space-5); }
  .admin-section-select select { margin-top:var(--space-2); }
  .responsive-table { border:0; background:none; overflow:visible; }
  .responsive-table table,.responsive-table tbody { display:block; white-space:normal; }
  .responsive-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .responsive-table tr { display:block; padding:var(--space-4); margin-bottom:var(--space-4); border:1px solid var(--line); border-radius:var(--radius-panel); background:var(--surface); }
  .responsive-table td { display:block; padding:var(--space-2) 0; border:0; overflow-wrap:anywhere; }
  .responsive-table td::before { content:attr(data-label); display:block; margin-bottom:var(--space-1); color:var(--muted); font-size:var(--font-caption); }
  .responsive-table td:first-child { padding-top:0; }
  .responsive-table td:last-child { padding-bottom:0; }
  .editor-actions { justify-content:flex-start; }
  .auth-page { grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr; }
  .auth-story { padding:var(--space-4) var(--page-gutter); }
  .auth-story>div { display:none; }
  .auth-main { align-items:start; padding:var(--space-5) var(--page-gutter) var(--space-6); }
  .wait { margin-block:var(--space-5); }
}
@media(max-width:600px) {
  :root { --page-gutter:var(--space-4); --panel-padding:var(--space-4); }
  .sidebar-heading { gap:var(--space-2); }
  .mobile-header-actions { gap:var(--space-1); }
  .menu-toggle { padding-inline:var(--space-3); }
  .content { padding-top:var(--space-4); }
  .pagehead>div { flex-basis:100%; }
  .pagehead>.row { width:100%; }
  .learning-shell .content { padding-right:var(--page-gutter); }
  .lesson-layout,.editor-layout { gap:var(--space-4); }
  .lesson-body>h1 { margin-bottom:var(--space-4); }
  .resume-panel { flex-direction:column; align-items:stretch; gap:var(--space-4); }
  .resume-panel>.btn { width:100%; }
  .single-course .course-card { display:flex; }
  .single-course .course-cover { min-height:128px; }
  .course-actions { align-items:stretch; }
  .course-actions>.btn { flex:1; }
  .course-actions>.text-link { display:flex; align-items:center; min-height:var(--control-height); }
  .lesson-footer>* { width:100%; }
  .overview-lesson { flex-wrap:wrap; gap:var(--space-2); }
  .overview-lesson>span:first-child { flex-basis:100%; }
  .editor-actions>.btn { flex:1; }
  .lesson-title-actions { width:100%; }
  .empty { padding:var(--space-6) var(--panel-padding); }
  .token-form input { max-width:none; }
}
@media(pointer:coarse) {
  :root { --control-small:44px; }
  .text-link { display:inline-flex; align-items:center; min-height:44px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; }
}

/* Mobile navigation overlays the page without changing its layout. */
dialog.navigation-drawer { position:fixed; inset:0 0 0 auto; margin:0; width:min(360px,100%); max-width:100%; height:100dvh; max-height:100dvh; border-radius:0; }
.navigation-drawer .nav { margin-top:var(--space-5); }

/* Course cost summaries stay within the lesson column on narrow screens. */
.lesson-content table {display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1rem 0;}
.lesson-content th,.lesson-content td {border:1px solid var(--line);padding:.65rem;text-align:left;vertical-align:top;min-width:7rem;}
.lesson-content th {font-weight:650;}