/* ============================================================
The International Skool of Forecasting — student portal
Single consolidated stylesheet. Organised top-down:
1. Tokens
2. Reset + base typography
3. Shell — masthead, subnav, school footer
4. Component primitives — buttons, fields, cards, badges, progress
5. Screen + page-header + utilities
6. Auth + verify + error shells
7. Dashboard
8. Course landing
9. Lesson page (outline + content blocks)
10. Exam + result
11. Certificate display
12. Admin (panel, learner detail, builder, composer, exam editor)
13. Settings
14. Empty states
15. Responsive
Print certificate styles live in cert-print.css.
============================================================ */
/* ---------- 1. TOKENS ---------- */
:root {
/* Brand */
--ink: #1a1916;
--paper: #f6f2e9;
--paper-alt: #ede7d8;
--paper-deep: #e3dbc8;
--muted: #7a7468;
--accent: #7a1f1c;
--red: #7a1f1c;
--pass: #2d6a4f;
--serif: 'EB Garamond', Georgia, serif;
--mono: 'Courier Prime', monospace;
/* Spacing — 4px grid. Small units stay fixed (touch targets, inline
gaps). Large units use clamp() so heroes and section breaks feel
proportional on giant canvases without looking cavernous on
phones. Min/max anchored to ~360px phone and ~3840px 4K. */
--s1: 4px;
--s2: 8px;
--s3: 12px;
--s4: clamp(18px, 0.4vw + 14px, 28px);
--s5: clamp(28px, 0.8vw + 18px, 44px);
--s6: clamp(40px, 1.2vw + 24px, 68px);
--s7: clamp(56px, 1.8vw + 32px, 104px);
/* Type scale — every size scales fluidly via clamp() so the design
stays "pixel perfect" on every display from a 360px phone to a
3840px 4K monitor. The previous mix of fixed sizes and partial
clamp() left body text looking tiny on big screens. Now mono,
body and headings all expand smoothly with the viewport, with
min/max chosen so phone legibility is preserved and 4K reading
distance is respected.
Reference anchors:
360px (smallest phone) — values land at the `min` floor
1366px (laptop) — landed on the historical "default"
1920px (typical desktop) — visual rhythm matches old fixed values
3840px (4K) — values approach the `max` ceiling
The slope (the middle `Xvw + Ypx` term) is what carries the curve. */
/* Restrained scale: maxes tuned so a 1080p/4K reader sees professional
reading sizes (~17-19px body) rather than billboard text. Phone mins
preserve legibility. Display sizes stay grand for editorial heros but
no longer dominate the page. */
--t-mono-xs: clamp(10px, 0.10vw + 9px, 13px);
--t-mono-sm: clamp(12px, 0.11vw + 10.5px, 14px);
--t-mono-md: clamp(13px, 0.13vw + 11.5px, 16px);
--t-body-xs: clamp(13px, 0.10vw + 12px, 15px);
--t-body-sm: clamp(14px, 0.12vw + 12.5px, 16px);
--t-body: clamp(16px, 0.16vw + 14px, 19px);
--t-body-lg: clamp(18px, 0.22vw + 15px, 22px);
--t-h4: clamp(17px, 0.30vw + 15px, 22px);
--t-h3: clamp(20px, 0.55vw + 16px, 28px);
--t-h2: clamp(25px, 0.95vw + 19px, 37px);
--t-h1: clamp(31px, 1.50vw + 23px, 52px);
--t-display: clamp(40px, 2.30vw + 27px, 70px);
/* Surface */
--hairline: 1px solid rgba(26,25,22,0.12);
--hairline-strong: 1px solid rgba(26,25,22,0.22);
--rule-ink: 1px solid var(--ink);
--rule-ink-heavy: 2px solid var(--ink);
/* Chrome */
--card-radius: 4px;
--btn-radius: 3px;
--badge-radius: 2px;
--surface-radius-sm: 3px;
--shadow-sm: 0 1px 2px rgba(26,25,22,0.04);
--shadow-md: 0 2px 8px rgba(26,25,22,0.06), 0 1px 2px rgba(26,25,22,0.04);
--shadow-lg: 0 8px 28px rgba(26,25,22,0.10);
/* Scrollbars */
--scrollbar-track: rgba(26,25,22,0.06);
--scrollbar-thumb: rgba(26,25,22,0.28);
--scrollbar-thumb-hover: rgba(26,25,22,0.44);
/* Motion */
--t-fast: 0.12s ease-out;
--t-slow: 0.20s ease-out;
/* Layout — content widths scale with the viewport but body text
widths are anchored in `ch` so line-length stays readable as the
font grows. The shell widens on 4K so the page doesn't sit in a
narrow ribbon flanked by empty gutters. */
/* FLUID CENTRED WIDTH SYSTEM.
One family, all centred (margin-inline: auto at the call sites). Each
grows with the viewport via the middle `vw` term and caps so it never
reaches the edges. Phone → ~90-92vw (full-bleed, no side dead-space);
1080p → comfortable centred columns with balanced margins; 4K → caps
hit and the column centres with elegant margins. Fully fluid between.
The named roles below are the canonical set; the legacy aliases keep
existing consumers working without per-rule edits. */
--screen-gutter: clamp(18px, 3vw, 56px);
--measure-wide: clamp(320px, 92vw, 1280px); /* page column, chrome, lists, admin */
--measure-media: clamp(320px, 86vw, 940px); /* lesson video / media column */
--measure-read: clamp(320px, 82vw, 820px); /* prose / reading column */
--measure-hero: clamp(320px, 68vw, 680px); /* centred hero text block */
--measure-card: clamp(300px, 92vw, 440px); /* auth / single-card screens */
--measure-exam: clamp(320px, 92vw, 1080px); /* exam focus column */
/* Roles + legacy aliases → one fluid family; older selectors stay valid. */
--measure-page: var(--measure-wide);
--measure-app: var(--measure-wide);
--measure-cap-wide: var(--measure-wide);
--measure-editorial: var(--measure-read);
--measure-narrow: var(--measure-card);
--measure-lesson: var(--measure-read);
--measure-lesson-media: var(--measure-media);
--measure-lesson-bleed: var(--measure-media);
/* admin shell shares the global 1280 column so its content aligns with the
masthead; dense tables keep their own overflow-x wrappers. */
--chrome-masthead: 124px; /* legacy full-masthead height (mobile popovers) */
--chrome-mh-compact: 73px; /* compact masthead — slight buffer above actual rendered height (~71-72px) so the sticky breadcrumb doesn't slip behind */
--chrome-context-strip: 38px; /* breadcrumb / kind label band incl. heavy border */
--chrome-lesson-subnav: var(--chrome-context-strip);
--chrome-lesson-top: calc(var(--chrome-mh-compact) + var(--chrome-context-strip));
/* Breakpoints
NOTE: CSS @media doesn't accept custom properties, so these tokens
exist as documentation only — the actual @media queries below use
the same literal values. If you change a value here, change every
matching @media query in the file. The canonical set:
--bp-phone-sm: 360px smallest supported phone (iPhone SE)
--bp-phone: 480px typical phone, portrait
--bp-tablet: 768px iPad portrait / large phone landscape
--bp-laptop: 1024px iPad landscape / small laptop
--bp-desktop: 1280px standard desktop
--bp-wide: 1600px large desktop / 27" iMac
--bp-ultrawide: 1920px full HD desktop and up
--bp-4k: 2560px 4K / ultrawide
Convention: mobile-first. Base styles target the smallest phone;
@media (min-width: ...) progressively layers desktop affordances on
top. Avoid @media (max-width: ...) for new rules — it inverts the
mental model and conflicts with the mobile-first cascade. */
--bp-phone-sm: 360px;
--bp-phone: 480px;
--bp-tablet: 768px;
--bp-laptop: 1024px;
--bp-desktop: 1280px;
--bp-wide: 1600px;
--bp-ultrawide: 1920px;
--bp-4k: 2560px;
}
.dark-mode {
--ink: #f6f2e9;
--paper: #1a1916;
--paper-alt: #252320;
--paper-deep: #2e2b26;
--muted: #9a9088;
/* Lightened from #c44340: that shade measured ~3.5:1 against --paper,
below WCAG AA for the small accent-coloured labels used throughout.
#da6b67 measures ~5.3:1 as text on dark paper AND as a button fill
under dark (--paper) label text. */
--accent: #da6b67;
--hairline: 1px solid rgba(246,242,233,0.10);
--hairline-strong: 1px solid rgba(246,242,233,0.18);
--rule-ink: 1px solid var(--ink);
--rule-ink-heavy: 2px solid var(--ink);
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 2px 8px rgba(0,0,0,0.4);
--shadow-lg: 0 8px 28px rgba(0,0,0,0.6);
--scrollbar-track: rgba(246,242,233,0.06);
--scrollbar-thumb: rgba(246,242,233,0.24);
--scrollbar-thumb-hover: rgba(246,242,233,0.38);
}
/* The fluid clamp() width tokens above already cap and centre on 4K — no
per-breakpoint measure recalibration needed. */
/* ---------- 2. RESET + BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
scroll-padding-top: var(--chrome-lesson-top);
}
body {
font-family: var(--serif);
background: var(--paper);
color: var(--ink);
font-size: var(--t-body);
line-height: 1.55;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
transition: background var(--t-slow), color var(--t-slow);
}
html {
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
scrollbar-width: thin;
}
body,
.mh-account-menu,
.masthead-mobile,
.lesson-outline {
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
scrollbar-width: thin;
}
*::-webkit-scrollbar {
width: 12px;
height: 12px;
}
*::-webkit-scrollbar-track {
background: var(--scrollbar-track);
}
*::-webkit-scrollbar-thumb {
background: var(--scrollbar-thumb);
border: 3px solid transparent;
border-radius: 999px;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: var(--scrollbar-thumb-hover);
border: 3px solid transparent;
background-clip: padding-box;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 {
font-weight: 500;
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0 0 var(--s3);
text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); }
h4 { font-size: var(--t-body); }
p { margin: 0 0 var(--s3); line-height: 1.6; }
/* ---------- 3. SHELL ---------- */
/* Shell containers — mobile-first.
.app-shell is the outermost wrap; .main holds the page content. Both
use min-width: 0 so flex/grid children can shrink below their content
size on narrow screens (without it, a long word or unbreakable URL
would cause horizontal overflow). Background is set at the root level
so empty page states still show the brand paper, not white. */
.app-shell { display: block; min-height: 100vh; min-width: 0; background: var(--paper); }
.main { display: block; min-width: 0; background: var(--paper); overflow-wrap: anywhere; }
/* Masthead — brand + primary nav */
.masthead {
position: sticky; top: 0; z-index: 200;
background: var(--paper);
border-bottom: var(--rule-ink-heavy);
transition: background var(--t-slow), border-color var(--t-slow);
}
.masthead-brand {
display: flex; justify-content: center;
padding: 16px var(--screen-gutter) 10px;
}
.masthead-brand-link {
display: inline-flex; align-items: center; gap: 12px;
color: var(--ink);
text-decoration: none;
}
.masthead-logo--landscape { display: none; }
.masthead-logo--symbol { height: 38px; width: 38px; display: block; }
.masthead-wordmark {
display: flex;
flex-direction: column;
gap: 1px;
padding-left: 12px;
border-left: var(--hairline);
}
.masthead-wordmark__small {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--muted);
}
.masthead-wordmark__name {
font-family: var(--serif);
font-size: var(--t-body-lg);
line-height: 1;
font-weight: 500;
}
.masthead-wordmark__masters {
margin-top: 4px;
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--accent);
}
.dark-mode .masthead-logo--symbol { filter: invert(1) hue-rotate(180deg); }
/* Login / forgot-password / device-bind inline the brand SVG with
hardcoded #1a1916 ink strokes. Without this rule those strokes
stay dark in dark mode and the entire emblem becomes nearly
invisible against --paper. Same invert+hue trick the masthead
uses; safe here because the SVGs use the same palette. */
.dark-mode .login-brand svg { filter: invert(1) hue-rotate(180deg); }
/* topbar back link — small uppercased "← Section" link that sits in the
topbar_left block of full-bleed pages (exam, exam_result, every admin
editor). Extracted here so the style lives in one place instead of
ten inline copies that drift independently. The variables make it
dark-mode-safe automatically. */
.topbar-back-link {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
}
.topbar-back-link:hover { color: var(--ink); }
.masthead-nav-row { border-top: var(--hairline); }
.masthead-nav-row__inner {
max-width: var(--measure-cap-wide); margin: 0 auto;
padding: 8px var(--screen-gutter);
display: flex; align-items: center; justify-content: space-between;
gap: var(--s4);
}
.masthead-nav { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; }
.mnav-link {
font-family: var(--mono);
font-size: var(--t-mono-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
padding: 6px 0;
border-bottom: 2px solid transparent;
transition: color var(--t-fast), border-color var(--t-fast);
white-space: nowrap;
}
.mnav-link:hover { color: var(--ink); }
.mnav-link--active { color: var(--ink); border-bottom-color: var(--ink); }
.mnav-link--admin { color: var(--accent); }
.mnav-link--admin.mnav-link--active { border-bottom-color: var(--accent); }
.masthead-end { display: flex; align-items: center; gap: var(--s2); }
.mh-icon {
width: 38px; height: 38px;
padding: 0;
padding: 0;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: var(--hairline-strong);
border-radius: var(--btn-radius);
color: var(--muted);
transition: all var(--t-fast);
cursor: pointer;
box-sizing: border-box;
}
.mh-icon svg {
width: 16px; height: 16px;
}
.mh-icon:hover { color: var(--ink); border-color: var(--ink); background: var(--paper-alt); }
.mh-account {
position: relative;
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.mh-account-trigger {
display: inline-flex; align-items: center; gap: 8px;
height: 38px;
padding: 0 12px 0 6px;
background: transparent;
border: var(--hairline-strong);
border-radius: var(--btn-radius);
font-family: var(--serif);
font-size: var(--t-body-sm);
color: var(--ink);
list-style: none; cursor: pointer;
transition: all var(--t-fast);
box-sizing: border-box;
}
.mh-account-trigger::-webkit-details-marker { display: none; }
.mh-account-trigger:hover { border-color: var(--ink); background: var(--paper-alt); }
.mh-account-initials {
width: 26px; height: 26px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--ink); color: var(--paper);
border-radius: 50%;
font-family: var(--mono); font-size: var(--t-mono-xs);
text-transform: uppercase;
}
.mh-account-name {
font-size: var(--t-body-sm);
max-width: 18ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mh-account-menu {
position: absolute; top: calc(100% + 6px); right: 0;
min-width: 240px;
background: var(--paper);
border: var(--rule-ink);
border-radius: var(--card-radius);
box-shadow: var(--shadow-lg);
padding: 4px;
z-index: 210;
}
.mh-account-menu__head {
padding: 8px 12px;
border-bottom: var(--hairline);
margin-bottom: 4px;
display: flex; flex-direction: column; gap: 2px;
}
.mh-account-menu__name { font-size: var(--t-body-sm); font-weight: 500; }
.mh-account-menu__email { font-family: var(--mono); font-size: var(--t-mono-xs); letter-spacing: 0.08em; color: var(--muted); }
.mh-account-menu__item {
display: flex; align-items: center;
min-height: 44px; padding: 8px 12px;
font-size: var(--t-body-sm); color: var(--ink);
border-radius: 2px;
transition: background var(--t-fast);
}
.mh-account-menu__item:hover { background: var(--paper-alt); }
.mh-account-menu__item--danger { color: var(--accent); }
.mh-account-menu hr { margin: 4px 0; border: 0; border-top: var(--hairline); }
.mh-mobile-toggle {
display: none;
width: 34px; height: 34px;
background: transparent;
border: var(--hairline-strong);
border-radius: var(--btn-radius);
color: var(--ink);
align-items: center; justify-content: center;
}
.masthead-mobile {
display: none;
position: fixed;
inset: 109px var(--s3) auto auto;
width: min(340px, calc(100vw - (var(--s3) * 2)));
z-index: 205;
}
.masthead-mobile.is-open { display: block; }
.masthead-mobile__panel {
display: flex;
flex-direction: column;
gap: 0;
background: var(--paper);
border: var(--rule-ink);
border-radius: var(--card-radius);
box-shadow: var(--shadow-lg);
padding: 6px 0;
}
.masthead-mobile__label {
padding: 8px 14px 10px;
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.masthead-mobile .mnav-link {
padding: 12px 14px;
border-bottom: 1px dotted rgba(26,25,22,0.14);
}
.masthead-mobile .mnav-link:last-child { border-bottom: 0; }
body.mobile-nav-open,
body.lesson-outline-open { overflow: hidden; }
body.mobile-nav-open::before,
body.lesson-outline-open::before {
content: "";
position: fixed;
inset: 0;
background: rgba(26,25,22,0.18);
backdrop-filter: blur(2px);
z-index: 190;
}
/* Subnav — contextual breadcrumb strip */
.subnav { background: var(--paper); border-bottom: var(--hairline); }
.subnav-inner {
max-width: var(--measure-cap-wide); margin: 0 auto;
padding: 8px var(--screen-gutter);
min-height: 36px;
display: flex; align-items: center; justify-content: space-between;
gap: var(--s3);
}
.subnav-context {
display: flex; align-items: center; gap: var(--s2);
font-family: var(--mono);
font-size: var(--t-mono-sm);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
flex-wrap: wrap;
}
.subnav-context a { color: var(--muted); transition: color var(--t-fast); }
.subnav-context a:hover { color: var(--ink); }
.subnav-actions { display: flex; align-items: center; gap: var(--s2); }
/* On the lesson page, drop the centred 1600px container so the curriculum
toggle and breadcrumb sit flush with the outline panel below — matching
its 16px content inset rather than the 64px wide-screen gutter. */
.main:has(> .lesson-shell) .subnav-inner {
max-width: none;
padding-left: var(--s3);
padding-right: var(--s3);
justify-content: flex-start;
gap: var(--s3);
}
/* School footer */
.school-footer {
border-top: var(--rule-ink-heavy);
background: var(--paper);
margin-top: var(--s7);
padding: var(--s4) var(--screen-gutter);
}
.school-footer-inner {
max-width: var(--measure-cap-wide); margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
flex-wrap: wrap;
}
.school-footer-brand { display: flex; align-items: center; min-width: 0; }
.school-footer-name { font-family: var(--serif); font-size: var(--t-body-lg); font-weight: 500; }
.school-footer-meta {
display: flex; align-items: center; gap: var(--s3);
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted);
}
.school-footer-meta a { display: inline-block; color: var(--muted); border-bottom: 1px solid transparent; }
.school-footer-meta a:hover { color: var(--ink); border-bottom-color: var(--ink); }
body:has(.login-shell) .school-footer,
body:has(.cert-shell) .school-footer,
body:has(.error-shell) .school-footer { display: none; }
/* ---------- 4. COMPONENT PRIMITIVES ---------- */
/* Screen-reader-only text. Conveys state that is otherwise expressed only
visually (e.g. the outline progress dots). */
.visually-hidden {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Layout/control utilities shared by auth + interstitial pages. */
.bind-phase--centered { text-align: center; }
.login-links--split { display: flex; justify-content: space-between; align-items: center; }
.form-inline { margin: 0; display: inline; }
.btn-linklike {
background: none; border: none; padding: 0; cursor: pointer;
font-family: inherit; font-size: inherit;
color: var(--accent); text-decoration: underline;
}
/* Admin "view as student" banner — pinned above all chrome so the admin
never forgets gating is being applied to their own browsing. */
.preview-banner {
display: flex; align-items: center; justify-content: center; gap: var(--s3);
flex-wrap: wrap;
padding: 8px var(--s3);
background: var(--ink); color: var(--paper);
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.08em; text-transform: uppercase;
}
.preview-banner__btn {
background: none; border: 1px solid var(--paper); border-radius: 3px;
padding: 3px 10px; cursor: pointer;
color: var(--paper); font-family: inherit; font-size: inherit;
letter-spacing: inherit; text-transform: inherit;
}
.preview-banner__btn:hover { background: rgba(246,242,233,0.15); }
/* Buttons
Touch target minimum 44x44 (WCAG 2.5.5) — applied via min-height. Desktop
visually still looks compact because text + padding rarely exceeds 44px
anyway; this just sets the floor for mobile/touch users where mis-taps
were previously easy. .btn--sm relaxes to 36px (acceptable for dense
admin tables where rows already separate the targets visually). */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 44px;
padding: 12px 18px;
font-family: var(--mono); font-size: var(--t-mono-md);
letter-spacing: 0.12em; text-transform: uppercase;
background: var(--ink); color: var(--paper);
border: 1px solid var(--ink);
border-radius: var(--btn-radius);
text-decoration: none;
transition: all var(--t-fast);
white-space: nowrap;
box-shadow: var(--shadow-sm);
}
.btn:hover { background: rgba(26,25,22,0.85); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.dark-mode .btn:hover { background: rgba(246,242,233,0.86); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mnav-link:focus-visible,
.mh-icon:focus-visible,
.mh-account-trigger:focus-visible,
.course-card:focus-visible,
.lesson-row:focus-visible,
.outline-lesson:focus-visible,
.lesson-nav-card:focus-visible,
.lesson-nav-submit:focus-visible,
.lblock-download-card:focus-visible,
.cert-footer a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
.btn--outline {
background: transparent; color: var(--ink); border-color: var(--ink); box-shadow: none;
}
.btn--outline:hover { background: var(--paper-alt); }
.dark-mode .btn--outline { color: var(--ink); border-color: var(--ink); }
.dark-mode .btn--outline:hover { background: var(--paper-alt); }
.btn--ghost { background: transparent; color: var(--ink); border-color: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--paper-alt); transform: translateY(-1px); }
.btn--accent { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn--accent:hover { background: rgba(122,31,28,0.88); }
.dark-mode .btn--accent:hover { background: rgba(218,107,103,0.88); }
.theme-icon--sun { display: none; }
.dark-mode .theme-icon--moon { display: none; }
.dark-mode .theme-icon--sun { display: block; }
.btn--danger { background: transparent; color: var(--accent); border-color: var(--accent); box-shadow: none; }
.btn--danger:hover { background: rgba(122,31,28,0.06); }
.btn--xs { min-height: 30px; padding: 6px 10px; font-size: var(--t-mono-xs); letter-spacing: 0.12em; }
.btn--sm { min-height: 36px; padding: 8px 14px; font-size: var(--t-mono-sm); letter-spacing: 0.12em; }
.btn--block { width: 100%; }
/* Form fields */
.field { margin-bottom: var(--s3); }
.field-label, .field label {
display: block; margin-bottom: 6px;
font-family: var(--mono); font-size: var(--t-mono-sm);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.field-input, .input {
width: 100%;
padding: 9px 12px;
font-family: var(--serif); font-size: var(--t-body);
background: var(--paper);
border: 1px solid rgba(26,25,22,0.22);
border-radius: var(--btn-radius);
color: var(--ink);
outline: none;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field-input:hover, .input:hover { border-color: var(--ink); }
.field-input:focus, .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(122,31,28,0.15); }
.field-input--code { font-family: var(--mono); letter-spacing: 0.10em; text-transform: uppercase; }
.field-input--mono { font-family: var(--mono); font-size: var(--t-mono-md); }
.field-input--sm { padding: 6px 9px; font-size: var(--t-body-xs); }
.admin-grant-window {
display: flex;
gap: var(--s2);
margin-top: var(--s2);
flex-wrap: wrap;
}
.admin-field-inline {
display: flex;
flex-direction: column;
gap: 4px;
flex: 1 1 140px;
}
.admin-field-inline__label {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
textarea.field-input { line-height: 1.55; padding: clamp(8px, 0.6vw, 14px) clamp(10px, 0.8vw, 18px); resize: vertical; }
select.field-input, select.input {
appearance: none; -webkit-appearance: none; padding-right: 36px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%231a1916' stroke-width='1.5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
}
.dark-mode .field-input, .dark-mode .input { background: var(--paper-alt); border-color: rgba(246,242,233,0.20); }
/* Common label utility (kicker above headings) */
.label {
display: block; margin-bottom: var(--s1);
font-family: var(--mono); font-size: var(--t-mono-sm);
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted);
}
/* Rules / dividers */
.rule { border: 0; border-top: var(--hairline); margin: var(--s4) 0; }
.rule--dot { border-top: 1px dotted rgba(26,25,22,0.30); }
.rule--heavy{ border-top: var(--rule-ink-heavy); }
/* Badges */
.module-badge {
display: inline-flex; align-items: center;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
padding: 4px 10px;
background: var(--paper-alt);
border: var(--hairline);
border-radius: var(--badge-radius);
white-space: nowrap;
}
.module-badge--pass { color: var(--accent); border-color: var(--accent); background: transparent; }
.group-badge {
display: inline-block;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--accent);
border: 1px solid var(--accent);
padding: 2px 8px;
border-radius: var(--badge-radius);
}
/* Progress bar */
.progress-wrap {
height: 4px;
background: rgba(26,25,22,0.10);
border-radius: 2px;
overflow: hidden;
}
.dark-mode .progress-wrap { background: rgba(246,242,233,0.12); }
.progress-fill { height: 100%; background: var(--accent); transition: width 0.3s ease-out; }
.progress-pct {
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted); margin-top: 6px;
}
.progress-pct--complete { color: var(--accent); }
/* Stat grid (used in dashboard hero, course ledger).
"Ledger" treatment: 1px-gap with the grid background showing through as
hairline separators between cells — feels like a typographic record,
not a row of tiles. */
.stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: rgba(26,25,22,0.14);
}
.dark-mode .stat-grid { background: rgba(246,242,233,0.10); }
.stat-cell {
background: var(--paper-alt);
padding: var(--s2) var(--s3);
min-height: clamp(80px, 8vh, 140px);
display: flex;
flex-direction: column;
justify-content: center;
}
.dark-mode .stat-cell { background: var(--paper-deep); }
.stat-cell strong {
display: block;
font-family: var(--serif); font-size: var(--t-h2); font-weight: 400;
color: var(--ink);
line-height: 1; margin-bottom: 4px;
}
.stat-cell span {
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
/* Status messages */
/* .login-error / .flash-ok are styled as live regions in markup via
role="alert" so screen readers announce password failures, reset
success, etc. Without that role, AT users get no feedback after
submitting a form that returned an error. */
.login-error {
background: rgba(122,31,28,0.08);
border: 1px solid var(--accent);
color: var(--accent);
padding: 10px 14px;
font-size: var(--t-body-sm); line-height: 1.5;
margin-bottom: var(--s2);
border-radius: var(--surface-radius-sm);
}
.flash-ok {
background: rgba(45,106,79,0.08);
border: 1px solid var(--pass);
color: #1b4332;
padding: 10px 14px;
font-size: var(--t-body-sm); line-height: 1.5;
margin-bottom: var(--s2);
border-radius: var(--surface-radius-sm);
}
.code-block {
font-family: var(--mono); font-size: var(--t-mono-md);
word-break: break-all;
padding: 14px 16px;
border: var(--rule-ink);
background: var(--paper-alt);
border-radius: var(--surface-radius-sm);
}
/* ---------- 5. SCREEN + UTILITIES ---------- */
/* Screen — the standard page wrapper.
Mobile-first: full-width on phone with --screen-gutter padding
(clamp(20px, 4vw, 64px) gives 20px on phones, ~50px on laptops,
capped 64px on wider). Inner content caps at --measure-app (1280px)
so it doesn't stretch end-to-end on big screens. The --admin variant
trades the editorial measure cap for a wider --measure-cap-wide
(1600px) ceiling — admin tables need horizontal room, but they
shouldn't sprawl across a 4K monitor. */
.screen {
display: block;
width: 100%;
max-width: var(--measure-app);
margin: 0 auto;
padding: var(--s5) var(--screen-gutter) var(--s6);
min-height: calc(100vh - 200px);
min-width: 0;
}
.screen.screen--admin { max-width: var(--measure-cap-wide); padding: var(--s4) var(--screen-gutter) var(--s6); }
.screen.screen--lesson { padding: 0; max-width: none; margin: 0; }
.screen.screen--full { max-width: none; }
.screen-stack { width: 100%; max-width: var(--measure-editorial); margin: 0 auto; }
.screen-stack--narrow { max-width: var(--measure-narrow); }
.section-head {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--s3);
padding-top: var(--s3);
border-top: var(--hairline);
}
.section-head .label { margin-bottom: 0; }
.section-head__note {
color: var(--muted);
font-style: italic;
font-size: var(--t-body-xs);
}
.section-head__note--mono {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.12em;
text-transform: uppercase;
font-style: normal;
}
/* Page header */
.page-header {
border-bottom: var(--rule-ink-heavy);
padding: var(--s4) 0;
margin-bottom: var(--s4);
display: grid;
grid-template-columns: minmax(0, 1.6fr) auto;
gap: var(--s4);
align-items: end;
}
.page-header h1 { font-size: clamp(28px, 3.6vw, var(--t-display)); line-height: 1.05; margin: 0; letter-spacing: -0.005em; }
.page-header__deck {
color: var(--muted);
font-style: italic;
font-size: var(--t-body);
line-height: 1.55;
margin: var(--s2) 0 0;
max-width: 60ch;
}
/* Utilities */
.muted { color: var(--muted); }
.italic { font-style: italic; }
.text-accent { color: var(--accent); }
.text-xs { font-size: var(--t-body-xs); }
.flex-row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.flex-center { justify-content: center; }
.flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.grid-2up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.grid-2up > .field { margin-bottom: 0; }
.mt-1 { margin-top: var(--s1); } .mt-2 { margin-top: var(--s2); } .mt-3 { margin-top: var(--s3); }
.mt-4 { margin-top: var(--s4); } .mt-5 { margin-top: var(--s5); } .mt-6 { margin-top: var(--s6); }
.mb-1 { margin-bottom: var(--s1); } .mb-2 { margin-bottom: var(--s2); } .mb-3 { margin-bottom: var(--s3); }
.mb-4 { margin-bottom: var(--s4); } .mb-5 { margin-bottom: var(--s5); } .mb-6 { margin-bottom: var(--s6); }
.link-label {
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.topbar-kicker,
.topbar-link {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
}
.topbar-link:hover,
.topbar-current { color: var(--ink); }
.topbar-trail {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.topbar-sep {
color: var(--muted);
font-size: var(--t-mono-md);
}
.topbar-current {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.topbar-tool {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 10px; /* .btn--xs step of the button padding scale */
border: var(--hairline-strong);
border-radius: var(--btn-radius);
background: transparent;
color: var(--muted);
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.topbar-tool:hover {
color: var(--ink);
border-color: var(--ink);
background: var(--paper-alt);
}
.topbar-tool__label { white-space: nowrap; }
/* Curriculum toggle — sits inline at the start of the breadcrumb as a
quiet borderless hamburger icon. No box, no label, just a tap target.
Only visible when the sidebar is closed/collapsed and the user needs
a way back in. */
.topbar-tool--outline {
display: none;
align-items: center;
justify-content: center;
padding: 4px;
margin-right: 4px;
border: 0;
background: transparent;
color: var(--muted);
cursor: pointer;
border-radius: 2px;
transition: color var(--t-fast), background var(--t-fast);
}
.topbar-tool--outline:hover {
color: var(--ink);
background: rgba(26,25,22,0.06);
}
.dark-mode .topbar-tool--outline:hover { background: rgba(246,242,233,0.08); }
.topbar-tool--outline .topbar-tool__label { display: none; }
/* Desktop: sidebar is open by default; surface the toggle only after
the user has collapsed it. */
@media (min-width: 981px) {
#main:has(.lesson-outline.collapsed) .topbar-tool--outline,
#main:has(.lesson-outline.is-collapsed) .topbar-tool--outline {
display: inline-flex;
}
}
/* Mobile: sidebar is closed by default (slides over). Show the toggle
unless the sidebar is currently open. */
@media (max-width: 980px) {
.topbar-tool--outline { display: inline-flex; }
#main:has(.lesson-outline.open) .topbar-tool--outline { display: none; }
}
.topbar-link:hover,
.app-inline-link:hover { color: var(--ink); }
.app-inline-link {
color: var(--muted);
text-decoration: none;
}
/* ---------- 6. AUTH + VERIFY + ERROR ---------- */
/* Auth shell — mobile-first centered card.
Mobile: vertically centered with --s4 padding. On phones where the
keyboard rises (form focus), align-items: center can hide the form
under the keyboard; the existing 720px override at the bottom of
this file switches to align-items: flex-start to compensate. */
.login-shell {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: var(--paper);
padding: var(--s4);
min-width: 0;
}
.login-box { width: 100%; max-width: 400px; min-width: 0; }
.login-spinner {
display: flex; justify-content: center; align-items: center;
height: 48px;
margin-top: var(--s3);
}
.login-spinner__dot {
width: 14px; height: 14px;
border-radius: 50%;
background: var(--accent);
animation: login-spinner-pulse 1s ease-in-out infinite;
}
@keyframes login-spinner-pulse {
0%, 100% { opacity: 0.3; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
}
.login-brand {
display: flex; flex-direction: column; align-items: center;
gap: var(--s2); margin-bottom: var(--s4);
}
.login-brand-title {
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--muted); text-align: center;
}
.login-brand-name {
font-family: var(--serif); font-size: var(--t-h2); font-weight: 500;
text-align: center;
}
.login-brand-name em { font-style: italic; font-weight: 400; }
.login-card {
border: var(--rule-ink);
background: var(--paper);
border-radius: var(--card-radius);
padding: var(--s5);
box-shadow: var(--shadow-md);
}
.dark-mode .login-card { background: var(--paper-alt); }
.auth-title {
font-family: var(--serif);
font-weight: 400;
font-size: var(--t-h2);
line-height: 1.2;
margin: 6px 0 var(--s2);
}
.auth-copy {
font-family: var(--serif);
font-size: var(--t-body);
font-style: italic;
color: var(--muted);
line-height: 1.6;
}
.auth-copy--compact { font-size: var(--t-body-sm); margin-bottom: var(--s3); }
.auth-note {
font-family: var(--serif);
font-size: var(--t-body-xs);
font-style: italic;
color: var(--muted);
}
.claim-name-note { margin-top: -6px; margin-bottom: var(--s3); }
.login-footer { display: flex; flex-direction: column; align-items: center; gap: var(--s2); margin-top: var(--s4); }
.login-footer-rule { display: block; width: 60%; height: 1px; background: rgba(26,25,22,0.18); margin: 0 auto; }
.login-footer-mark { color: var(--accent); }
.login-footer-line { font-family: var(--serif); font-size: var(--t-body-xs); }
.login-footer-sub {
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--muted);
}
.login-footer-link {
display: block; margin-top: var(--s2); text-align: center;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.login-footer-link:hover { color: var(--ink); }
/* Recovery codes screen */
.codes-shell { max-width: 680px; margin: var(--s5) auto; padding: 0 var(--s4); }
.codes-card {
border: var(--rule-ink);
background: var(--paper);
border-radius: var(--card-radius);
padding: var(--s5);
box-shadow: var(--shadow-sm);
}
.codes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); margin: var(--s3) 0; }
.codes-grid code { font-family: var(--mono); font-size: var(--t-mono-md); letter-spacing: 0.08em; padding: 8px 12px; background: var(--paper-alt); border: var(--hairline-strong); display: block; text-align: center; }
.codes-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.codes-copy-status { min-height: 1.3em; margin-top: var(--s2); }
.codes-intro { margin-top: var(--s1); }
.codes-fineprint { margin-top: var(--s3); font-size: var(--t-body-xs); }
/* Error shell */
.error-shell {
max-width: 540px;
margin: 96px auto;
padding: 0 var(--s4);
text-align: center;
}
.error-code {
font-family: var(--mono);
font-size: var(--t-mono-md); letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--accent);
display: block; margin-bottom: var(--s3);
}
.error-shell h1 { font-style: italic; }
.error-actions { justify-content: center; }
/* Prerequisite-locked page: actionable rows under the error shell. */
.prereq-list { display: flex; flex-direction: column; gap: var(--s2); text-align: left; }
.prereq-list__row {
display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
padding: var(--s3); border: 1px solid var(--line); border-radius: 6px;
text-decoration: none; color: var(--ink); background: var(--paper);
transition: border-color 0.15s ease;
}
.prereq-list__row:hover { border-color: var(--accent); }
.prereq-list__title { display: block; font-family: var(--serif); font-size: var(--t-body-lg); }
.prereq-list__status {
display: block; margin-top: 2px;
font-family: var(--serif); font-style: italic; font-size: var(--t-body-xs); color: var(--muted);
}
.prereq-list__action {
white-space: nowrap; font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.account-back {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
}
.account-back:hover { color: var(--ink); }
/* ---------- 7. DASHBOARD ---------- */
/* Hero: welcome heading on the left, study ledger panel on the right.
Bottom rule separates the hero from the continue card below. */
.dash-hero {
display: grid;
grid-template-columns: minmax(0, 1.9fr) minmax(320px, 0.95fr);
gap: var(--s6);
align-items: center;
padding-bottom: var(--s4);
margin-bottom: var(--s4);
border-bottom: 2px solid var(--ink);
}
.dash-hero__intro {
min-width: 0;
}
.dash-hero h1 {
font-size: clamp(34px, 5vw, 72px);
line-height: 1.02;
max-width: 16ch;
margin: 0 0 var(--s2);
letter-spacing: -0.01em;
text-wrap: balance;
}
.dash-hero__deck {
color: var(--muted);
font-style: italic;
max-width: 62ch;
font-size: var(--t-body-lg);
line-height: 1.65;
text-wrap: pretty;
}
.dash-hero__panel {
background: var(--paper-alt);
border: var(--hairline-strong);
border-radius: var(--card-radius);
padding: var(--s3);
box-shadow: none;
}
.dash-hero__panel-label { margin-bottom: var(--s2); }
/* Continue studying: 2-col grid — narrative copy on the left, action card on the right */
.dash-continue {
display: grid;
grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 420px);
gap: var(--s3);
align-items: stretch;
margin-bottom: var(--s5);
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
box-shadow: none;
}
.dash-continue::before { content: none; }
.dash-continue-copy {
background: var(--paper-alt);
border: var(--hairline-strong);
border-radius: var(--card-radius);
padding: var(--s3);
text-align: left;
}
.dash-continue-copy .label { margin-bottom: var(--s1); }
.dash-continue-copy h2 {
font-size: var(--t-h3);
margin: 0 0 var(--s1);
letter-spacing: -0.01em;
}
.dash-continue-copy__meta {
color: var(--muted);
font-style: italic;
font-size: var(--t-body);
}
.dash-continue-copy .progress-wrap {
max-width: none;
margin-inline: 0;
}
.dash-continue-action {
background: var(--paper-alt);
border: var(--hairline-strong);
border-radius: var(--card-radius);
padding: var(--s3);
display: flex;
flex-direction: column;
justify-content: space-between;
text-decoration: none;
color: var(--ink);
transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.dash-continue-action:hover {
background: var(--paper-deep);
border-color: var(--ink);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.dash-continue-action .label { margin-bottom: var(--s2); }
.dash-continue-action strong {
display: block;
font-family: var(--serif);
font-size: var(--t-h3);
font-weight: 400;
color: var(--ink);
line-height: 1;
margin: var(--s2) 0;
}
.dash-continue-action .link-label {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
}
.course-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
gap: var(--s4);
}
.course-card {
display: flex;
flex-direction: column;
align-items: stretch;
background: var(--paper);
border: var(--hairline-strong);
border-radius: var(--card-radius);
padding: var(--s3) var(--s3) var(--s4);
text-decoration: none;
color: var(--ink);
text-align: left;
box-shadow: var(--shadow-sm);
transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
min-height: 100%;
}
.course-card:hover { border-color: var(--ink); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.course-card__body {
display: flex;
flex: 1;
flex-direction: column;
align-items: stretch;
gap: var(--s2);
}
/* Course card thumbnail. The SVG itself is background-less and uses
currentColor — this rule paints the background and ink color so the
thumbnail looks at home in either light (parchment) or dark mode. */
.course-card__thumb {
width: 100%; aspect-ratio: 16/10;
margin-bottom: var(--s3);
background:
radial-gradient(circle at 72% 18%, rgba(122,31,28,0.10), transparent 38%),
linear-gradient(145deg, var(--paper-alt), var(--paper-deep));
color: rgba(26,25,22,0.82);
border: var(--hairline);
border-radius: 2px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.dark-mode .course-card__thumb {
background:
radial-gradient(circle at 70% 20%, rgba(122,31,28,0.26), transparent 32%),
linear-gradient(145deg, rgba(26,25,22,0.98), rgba(26,25,22,0.76));
color: #e8e2d4;
border-color: rgba(246,242,233,0.08);
}
.course-card__thumb svg { width: 78%; height: 78%; opacity: 0.92; }
.course-card__kicker {
display: block; margin: 0;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--muted);
text-align: left;
}
.course-card__title {
width: 100%;
max-width: 100%;
font-size: clamp(18px, 1.55vw, 23px);
font-weight: 500;
line-height: 1.14;
letter-spacing: -0.01em;
margin: 0;
text-wrap: pretty;
}
.course-card__footer {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--s2);
margin-top: var(--s3);
}
.course-card .progress-wrap { width: 100%; }
/* Program tag chip — sits between the thumbnail and the kicker on a course
card, naming the program/curriculum the course belongs to. */
.program-tag {
display: inline-block;
align-self: flex-start;
margin: 0 0 var(--s2);
padding: 4px 9px;
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--badge-radius);
background: transparent;
line-height: 1;
}
/* Locked / not-yet-enrolled course card — used in the "More from the Skool"
upsell row. Muted, with a CTA in place of the progress bar. */
.course-card--locked {
opacity: 0.82;
transition: opacity var(--t-fast), border-color var(--t-fast),
box-shadow var(--t-fast), transform var(--t-fast);
}
.dark-mode .course-card--locked { opacity: 0.9; }
.course-card--locked:hover { opacity: 1; }
.course-card__desc {
max-width: 42ch;
font-style: italic;
color: var(--muted);
font-size: var(--t-body-sm);
line-height: 1.6;
margin: 0;
text-wrap: pretty;
}
.course-card__cta {
margin-top: 0;
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
border-bottom: 1px solid currentColor;
padding-bottom: 2px;
align-self: flex-start;
}
/* ---------- 8. COURSE LANDING ---------- */
.course-hero {
border-bottom: var(--rule-ink-heavy);
display: grid;
grid-template-columns: minmax(0, 1.6fr) clamp(300px, 26vw, 420px);
gap: var(--s5);
padding-bottom: var(--s5);
margin-bottom: var(--s5);
align-items: start;
}
.course-hero > div:first-child {
min-width: 0;
}
.course-hero h1 {
font-size: var(--t-display);
line-height: 1.05;
max-width: 16ch;
margin: 0 0 var(--s3);
letter-spacing: -0.01em;
}
.course-hero__desc {
color: var(--muted);
font-size: var(--t-body); font-style: italic;
line-height: 1.6;
max-width: 52ch;
}
.course-ledger {
background: var(--paper-alt);
border: var(--hairline-strong);
border-radius: var(--card-radius);
padding: var(--s4);
box-shadow: var(--shadow-sm);
position: sticky;
top: 128px;
}
.course-ledger__note {
margin: var(--s3) 0 0;
color: var(--muted);
font-size: var(--t-body-sm);
line-height: 1.55;
font-style: italic;
}
.module-list { display: grid; gap: var(--s4); }
.module-card {
background: var(--paper);
border: var(--hairline-strong);
border-radius: var(--card-radius);
padding: var(--s4);
box-shadow: var(--shadow-sm);
position: relative;
overflow: hidden;
}
.module-card::before {
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--ink);
opacity: 0.14;
}
.dark-mode .module-card { background: var(--paper-alt); }
.module-card--locked {
opacity: 0.72;
background: var(--paper-alt);
}
.module-card--locked::before { background: var(--muted); opacity: 0.24; }
.module-card__head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: var(--s3); margin-bottom: var(--s3);
}
.module-card__kicker {
display: block; margin: 0 0 4px;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.module-card__kicker strong { color: var(--accent); font-weight: 700; }
.module-card h2 { font-size: var(--t-h3); font-weight: 500; margin: 0; }
.module-state {
margin-top: var(--s3); padding-top: var(--s2);
border-top: 1px dotted rgba(26,25,22,0.18);
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.module-state--pass { color: var(--accent); }
.lesson-row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--s3);
align-items: center;
min-height: 44px;
padding: 8px 10px;
border-top: var(--hairline);
text-decoration: none;
color: var(--ink);
transition: background var(--t-fast);
}
.lesson-row:hover { background: var(--paper-alt); padding-left: 14px; }
.lesson-row--done { opacity: 1; }
.lesson-row--locked { opacity: 0.5; pointer-events: none; }
.lesson-row--exam { background: rgba(122,31,28,0.04); padding-left: 10px; padding-right: 10px; }
.lesson-row__title {
display: flex; align-items: center; gap: 8px;
font-size: var(--t-body); line-height: 1.35;
}
.lesson-row__title svg { opacity: 1 !important; flex-shrink: 0; }
.lesson-row__status {
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--muted);
white-space: nowrap;
}
.lesson-row__status--done {
color: var(--paper);
background: var(--accent);
border: 1px solid var(--accent);
border-radius: var(--badge-radius);
padding: 3px 8px;
}
.cert-earned-banner {
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--s3);
padding: var(--s4);
border: 1px solid var(--accent);
background: rgba(122,31,28,0.04);
border-radius: var(--card-radius);
color: var(--ink);
box-shadow: var(--shadow-sm);
}
.cert-earned-banner__icon {
width: 46px;
height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent);
color: var(--paper);
border-radius: 50%;
}
.cert-earned-banner__title {
display: block;
font-family: var(--serif);
font-size: var(--t-h2);
line-height: 1.1;
}
.cert-earned-banner__deck {
display: block;
margin-top: 4px;
color: var(--muted);
font-style: italic;
}
.cert-earned-banner a { justify-self: end; }
/* ---------- 9. LESSON PAGE ---------- */
.lesson-shell {
display: flex;
min-height: max(600px, calc(100vh - 110px));
overflow: visible;
}
.lesson-outline {
flex: 0 0 300px;
align-self: flex-start;
position: sticky;
top: var(--chrome-lesson-top);
max-height: calc(100vh - var(--chrome-lesson-top) - var(--s2));
background: var(--paper-alt);
border-right: var(--hairline);
overflow-y: auto;
/* Soft-fade the bottom edge so a long curriculum dissolves into the
gutter instead of being guillotined mid-row at the viewport edge.
The fade only shows while there's more to scroll (the mask sits at the
very bottom of the scroll content). */
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
transition: flex-basis var(--t-slow), opacity var(--t-slow);
scrollbar-width: thin;
scrollbar-color: var(--rule-ink, rgba(0,0,0,0.1)) transparent;
}
.lesson-outline::-webkit-scrollbar {
width: 6px;
}
.lesson-outline::-webkit-scrollbar-track {
background: transparent;
}
.lesson-outline::-webkit-scrollbar-thumb {
background: var(--rule-ink, rgba(0,0,0,0.1));
border-radius: 3px;
}
.lesson-outline::-webkit-scrollbar-thumb:hover {
background: var(--muted);
}
/* Outline collapse — JS toggles .collapsed; we shrink the rail to 0 width
and fade so the content column gets the reclaimed space. */
.lesson-outline.collapsed,
.lesson-outline.is-collapsed {
flex: 0 0 0;
width: 0;
min-width: 0;
padding: 0;
border-right: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
.lesson-outline-head {
padding: var(--s3);
border-bottom: var(--hairline);
}
.lesson-outline-head-row { display: flex; justify-content: space-between; align-items: center; }
.lesson-outline-kicker { margin: 0; }
.lesson-outline-title { font-family: var(--serif); font-size: var(--t-body); font-weight: 500; margin-top: 4px; line-height: 1.3; }
.lesson-outline-list { padding: var(--s2) 0 var(--s4); }
.outline-collapse-btn {
position: relative;
width: 44px; height: 44px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0;
cursor: pointer;
color: var(--muted);
font-size: var(--t-body-sm);
margin-right: 6px;
z-index: 10;
flex-shrink: 0;
}
.outline-collapse-btn::before {
content: ""; position: absolute;
width: 28px; height: 28px;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
border: var(--hairline-strong);
border-radius: 999px;
transition: border-color var(--t-fast), background var(--t-fast);
z-index: 1;
}
.outline-collapse-btn svg {
width: 12px; height: 12px;
transition: transform var(--t-fast, 150ms) ease;
position: relative;
z-index: 2;
}
.outline-collapse-btn:hover { color: var(--paper); }
.outline-collapse-btn:hover::before { border-color: var(--ink); background: var(--ink); }
/* Rotates the inline SVG chevron 180 degrees when collapsed */
.lesson-outline.collapsed .outline-collapse-btn svg,
.lesson-outline.is-collapsed .outline-collapse-btn svg {
transform: rotate(180deg);
}
.outline-module { padding-bottom: var(--s2); border-bottom: var(--hairline); }
.outline-module:last-child { border-bottom: 0; }
.outline-module-head {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 8px;
align-items: center;
padding: var(--s3) var(--s3) 8px;
}
.outline-module-num {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--paper);
background: var(--ink);
padding: 3px 6px;
border-radius: var(--badge-radius);
font-weight: 700;
}
.outline-module-title {
font-family: var(--serif);
font-size: var(--t-body-sm);
font-weight: 500;
color: var(--ink);
line-height: 1.3;
}
.outline-module-count {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.10em;
color: var(--muted);
}
.outline-lesson {
display: grid;
grid-template-columns: auto 1fr;
gap: 10px;
align-items: center;
padding: 7px var(--s3);
font-family: var(--serif);
font-size: var(--t-body-xs);
color: var(--ink);
border-left: 2px solid transparent;
transition: background var(--t-fast), border-color var(--t-fast);
line-height: 1.35;
}
.outline-lesson:hover { background: rgba(26,25,22,0.04); }
.outline-lesson--locked {
color: var(--muted);
cursor: default;
opacity: 0.62;
}
.outline-lesson--locked:hover { background: transparent; }
.outline-lesson.active {
background: rgba(122,31,28,0.10);
border-left: 3px solid var(--accent);
padding-left: calc(var(--s3) - 1px);
font-weight: 500;
color: var(--ink);
}
.outline-lesson.active .outline-lesson-title { color: var(--ink); }
.outline-lesson.done .outline-lesson-title { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(26,25,22,0.20); }
.outline-lesson-title {
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.outline-dot {
width: 16px; height: 16px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid rgba(26,25,22,0.28);
border-radius: 50%;
font-size: var(--t-mono-xs);
background: var(--paper);
flex-shrink: 0;
transition: all var(--t-fast);
}
.outline-dot--active { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.outline-dot--done { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.outline-dot--locked {
background: transparent;
color: var(--muted);
border-color: color-mix(in srgb, var(--muted) 45%, transparent);
}
.lesson-main {
flex: 1; min-width: 0;
overflow: visible;
display: flex; flex-direction: column;
}
/* Content fills the lesson column — no centered narrow column.
Inner blocks (text, callouts) self-constrain to a readable measure;
media blocks (video, image, pdf, download) span the full width so the
page actually uses the screen instead of leaving 30–40% as dead paper. */
/* The lesson content column is CENTRED in the reading area (right of the
curriculum rail), fluid width. Hero centred, prose centred at --measure-read,
media centred at --measure-page — everything on one centred axis. */
.lesson-content-area {
width: 100%;
max-width: var(--measure-media);
margin-inline: auto;
padding: var(--s5) var(--s4) calc(var(--s5) + 76px);
}
@media (min-width: 981px) {
.lesson-content-area { padding: var(--s6) var(--s5) calc(var(--s6) + 76px); }
}
.lesson-breadcrumb {
display: flex; gap: 8px; align-items: center;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.lesson-breadcrumb a { color: var(--muted); }
.lesson-breadcrumb a:hover { color: var(--ink); }
.lesson-title {
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.1; letter-spacing: -0.01em;
margin: var(--s2) 0 var(--s4);
}
/* Lesson hero — chapter opening, not a webform header */
.lesson-hero {
padding-bottom: var(--s4);
margin-bottom: var(--s5);
border-bottom: var(--rule-ink-heavy);
}
.lesson-hero-meta {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: var(--t-mono-sm);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: var(--s3);
flex-wrap: wrap;
}
.lesson-hero-course { color: var(--accent); border-bottom: 1px solid currentColor; }
.lesson-hero-sep { opacity: 0.5; }
.lesson-hero-kind { color: var(--ink); font-weight: 700; }
.lesson-hero-title {
font-family: var(--serif);
/* Lesson titles are sub-headers under the course/module hierarchy —
not the page's primary brand mark. Previous clamp topped out at
56px which read as a billboard. 38px keeps it editorial, sits
comfortably under the course title, and stops eating two lines on
longer lesson names. */
font-size: clamp(24px, 2.6vw, 38px);
font-weight: 500;
line-height: 1.15;
letter-spacing: -0.01em;
margin: 0;
text-wrap: balance;
max-width: 32ch;
}
.lblock-section-h {
font-family: var(--mono);
font-size: var(--t-mono-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin: 0 0 var(--s2);
}
/* Essay + reflections: prose-first typography. Built for the v2 content
format where each lesson has a written companion that reads on its
own. Type is slightly larger than baseline lesson text, line-height
loosened, paragraph rhythm given proper space. inside an essay
marks a section break — handled with a mono kicker style, not a
second big serif heading, so it sits below the lesson title without
competing. */
.lesson-essay {
font-family: var(--serif);
font-size: var(--t-body-lg);
line-height: 1.75;
color: var(--ink);
}
.lesson-essay p { margin: 0 0 1.1em; }
.lesson-essay p:last-child { margin-bottom: 0; }
.lesson-essay h4 {
font-family: var(--mono);
font-size: var(--t-mono-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin: 1.8em 0 0.6em;
font-weight: 500;
}
.lesson-essay blockquote {
margin: 1.2em 0;
padding-left: var(--s4);
border-left: 2px solid var(--accent);
font-style: italic;
color: var(--muted);
}
.lesson-essay em { font-style: italic; }
.lesson-essay strong { font-weight: 600; }
.lesson-reflections {
font-family: var(--serif);
font-size: var(--t-body-lg);
line-height: 1.7;
color: var(--ink);
margin-top: var(--s4);
padding-top: var(--s4);
border-top: var(--hairline);
}
.lesson-reflections p { margin: 0 0 1.1em; }
.lesson-reflections p:last-child { margin-bottom: 0; }
.lesson-reflections em { font-style: italic; color: var(--muted); }
.lblock--text details.transcript > summary {
cursor: pointer;
font-family: var(--mono);
font-size: var(--t-mono-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
padding: var(--s2) 0;
list-style: none;
}
.lblock--text details.transcript > summary::before {
content: "▸ ";
display: inline-block;
margin-right: 6px;
transition: transform var(--t-fast);
}
.lblock--text details.transcript[open] > summary::before {
transform: rotate(90deg);
}
.lblock--text details.transcript[open] > summary { color: var(--ink); }
.lblock--text details.transcript > p {
margin-top: var(--s3);
color: var(--muted);
font-size: var(--t-body);
line-height: 1.65;
}
/* Composed content blocks */
.lesson-blocks { display: flex; flex-direction: column; gap: var(--s5); margin-top: var(--s4); }
.lblock { width: 100%; }
.lblock-kicker {
display: block; margin-bottom: 6px;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
}
/* Text / media width split. Text-bearing blocks read at an editorial
measure (--measure-lesson, ch-anchored) and centre inside the content
area; media blocks span the full --measure-lesson-bleed width so the
page still uses the screen. Inline (non-full) images sit in the
editorial column with the text they illustrate.
.lblock--bleed is the explicit override — any block carrying it
escapes the editorial column to full content-area width. */
.lblock--text,
.lblock--heading,
.lblock--callout,
.lblock--image {
width: 100%;
max-width: var(--measure-read); /* prose reading measure */
margin-inline: auto; /* centred column */
}
/* Media columns: centred at the lesson media measure. */
.lblock--bleed,
.lblock--video,
.lblock--pdf,
.lblock--image-full,
.lblock--download {
width: 100%;
max-width: var(--measure-media) !important;
margin-inline: auto !important;
}
/* Editorial sub-blocks render as standalone sections — pin them to the
prose measure, centred to match the column. */
.lesson-objectives,
.lesson-flashback,
.lesson-mistakes,
.lesson-objection {
max-width: var(--measure-read);
margin-inline: auto;
}
.lblock--heading h2 { font-size: var(--t-h2); margin: 0; font-weight: 500; }
.lblock--heading h3 { font-size: var(--t-h3); margin: 0; font-weight: 500; }
.lblock--text { font-size: var(--t-body-lg); line-height: 1.7; }
.lblock--text p { margin: 0 0 var(--s3); }
.lblock--text p:last-child { margin-bottom: 0; }
.lesson-lead {
font-size: var(--t-body-lg);
line-height: 1.55;
color: var(--ink);
}
.transcript {
font-size: var(--t-body);
line-height: 1.65;
color: var(--ink);
}
.transcript p {
margin: 0 0 var(--s3);
}
.lblock--text ul,
.lblock--text ol { margin: 0 0 var(--s3); padding-left: var(--s4); }
.lblock--text blockquote {
margin: var(--s4) 0;
padding: 0 var(--s4);
border-left: 2px solid var(--ink);
font-style: italic; color: var(--muted);
}
.lblock--text a { color: var(--accent); border-bottom: 1px solid currentColor; }
.lblock--text table { width: 100%; border-collapse: collapse; margin: var(--s4) 0; font-size: var(--t-body-sm); }
/* Media blocks fill the content column — no negative margins needed
because the column itself fills available width now. */
.lblock--video {
width: 100%;
background: #0f0e0c;
border-radius: var(--card-radius);
overflow: hidden;
}
.lblock-video-wrap {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.lblock-video-wrap iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
.lblock-video-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--s2);
color: rgba(246,242,233,0.85);
}
.video-meta { font-family: var(--mono); font-size: var(--t-mono-xs); letter-spacing: 0.20em; text-transform: uppercase; color: rgba(246,242,233,0.55); }
.video-title { font-family: var(--serif); font-size: var(--t-h2); }
.video-source-badge { font-family: var(--mono); font-size: var(--t-mono-xs); letter-spacing: 0.20em; text-transform: uppercase; color: rgba(246,242,233,0.55); margin-top: var(--s2); }
.lblock--video .lblock-caption {
text-align: center; padding: var(--s2) var(--s4);
background: rgba(15,14,12,0.04);
font-style: italic; font-size: var(--t-body-sm); color: var(--muted);
}
.lblock--pdf {
border: var(--hairline-strong);
background: var(--paper);
border-radius: var(--card-radius);
padding: var(--s2);
}
.lblock-pdf-title {
padding: 6px 8px 8px;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.lblock-pdf-frame {
width: 100%; height: 70vh;
border: var(--hairline);
background: #fff;
}
.lblock--download { width: 100%; }
.lblock-download-card {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: var(--s4); align-items: center;
padding: 18px var(--s4);
border: 1px solid var(--ink);
background: var(--paper);
border-radius: var(--card-radius);
text-decoration: none; color: var(--ink);
box-shadow: var(--shadow-md);
transition: all var(--t-fast);
}
.lblock-download-card:hover {
background: var(--paper-alt);
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.lblock-download-icon {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: var(--accent);
color: var(--paper);
border-radius: var(--card-radius);
flex-shrink: 0;
}
.lblock-download-meta { display: flex; flex-direction: column; gap: 4px; }
.lblock-download-title {
font-family: var(--serif);
font-size: var(--t-body-lg);
font-weight: 500;
line-height: 1.25;
}
.lblock-download-sub {
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
}
.lblock-download-cta {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: var(--t-mono-sm);
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--ink);
white-space: nowrap;
font-weight: 500;
}
.lblock-download-card:hover .lblock-download-cta { color: var(--accent); }
.lblock-download-card:hover .lblock-download-cta svg { transform: translateX(3px); }
.lblock-download-cta svg { transition: transform var(--t-fast); }
.lblock--image { width: 100%; }
.lblock--image img { width: 100%; height: auto; display: block; border-radius: var(--card-radius); }
.lblock--image:not(.lblock--image-full) img { border: var(--hairline); }
.lblock--image-full { max-width: none; }
.lblock-caption {
margin-top: var(--s1);
font-style: italic; font-size: var(--t-body-sm); color: var(--muted);
text-align: center;
}
.lblock--callout {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s4); align-items: start;
width: 100%;
padding: var(--s4);
border: var(--hairline);
border-left: 5px solid var(--muted);
background: var(--paper-alt);
border-radius: var(--card-radius);
box-shadow: var(--shadow-sm);
}
.lblock--callout-tip { border-left-color: var(--pass); background: rgba(45,106,79,0.05); }
.lblock--callout-warning { border-left-color: var(--accent); background: rgba(122,31,28,0.06); }
.lblock-callout-tag {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: var(--t-mono-sm);
letter-spacing: 0.20em; text-transform: uppercase;
color: var(--muted);
font-weight: 700;
padding: 4px 10px 4px 0;
border-right: 1px solid rgba(26,25,22,0.18);
align-self: stretch;
white-space: nowrap;
}
.lblock--callout-tip .lblock-callout-tag { color: var(--pass); }
.lblock--callout-warning .lblock-callout-tag { color: var(--accent); }
.lblock-callout-body { min-width: 0; font-size: var(--t-body); line-height: 1.65; }
.lblock-callout-body p:last-child { margin-bottom: 0; }
/* Video placeholder — proper film-still card, not raw text */
.lblock-video-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: var(--s2);
background: linear-gradient(160deg, #1a1916 0%, #2a2722 100%);
color: rgba(246,242,233,0.85);
}
.lblock-video-placeholder::before {
content: '';
position: absolute; inset: 0;
background-image:
repeating-linear-gradient(90deg, transparent 0 60px, rgba(246,242,233,0.02) 60px 61px),
repeating-linear-gradient(0deg, transparent 0 60px, rgba(246,242,233,0.02) 60px 61px);
pointer-events: none;
}
.lblock-video-placeholder svg { position: relative; }
.lblock-video-placeholder .video-title {
position: relative;
font-family: var(--serif); font-size: var(--t-h2);
margin-top: var(--s2);
}
.lblock-video-placeholder .video-source-badge {
position: relative;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.24em; text-transform: uppercase;
color: rgba(246,242,233,0.45);
margin-top: var(--s2);
padding: 4px 10px;
border: 1px solid rgba(246,242,233,0.20);
border-radius: 2px;
}
/* End-of-lesson marker. A quiet, centred close to the reading column —
the actual Complete/Next action is the sticky action bar, so this is
confirmation, not a control. Replaces the old pair of giant nav cards. */
.lesson-endmark {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: var(--s6);
padding-top: var(--s4);
border-top: var(--hairline);
font-family: var(--mono);
font-size: var(--t-mono-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
}
.lesson-endmark--done { color: var(--pass); }
.lesson-endmark svg { flex-shrink: 0; }
/* Mark-complete moment — proper primary action */
.lesson-complete {
margin-top: var(--s6);
padding: var(--s4);
background: var(--paper-alt);
border: var(--hairline-strong);
border-radius: var(--card-radius);
text-align: center;
box-shadow: var(--shadow-sm);
}
.lesson-complete--done {
width: 100%;
margin-inline: auto;
margin-top: var(--s5);
padding: var(--s3) var(--s4);
background: transparent;
border: none;
box-shadow: none;
}
.lesson-complete-form {
display: flex; flex-direction: column; align-items: center; gap: var(--s2);
}
.lesson-complete-hint {
font-family: var(--serif);
font-style: italic;
font-size: var(--t-body-sm);
color: var(--muted);
}
.lesson-complete-done {
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--mono); font-size: var(--t-mono-xs);
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--pass);
font-weight: 700;
border: 1px solid rgba(45, 106, 79, 0.25);
padding: 6px 14px;
border-radius: var(--badge-radius);
background: rgba(45, 106, 79, 0.05);
}
/* Big primary button size */
.btn--lg {
padding: 16px 28px;
font-size: var(--t-mono-md);
letter-spacing: 0.18em;
border-radius: var(--btn-radius);
}
/* Prev / Next nav — substantial cards, not footnotes */
.lesson-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s3);
margin-top: var(--s5);
}
.lesson-nav--single {
grid-template-columns: minmax(320px, clamp(600px, 80vw, var(--measure-lesson-bleed)));
justify-content: center;
}
.lesson-nav-card {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--s4);
align-items: center;
padding: var(--s4) var(--s5);
background: var(--paper);
border: var(--hairline-strong);
border-radius: var(--card-radius);
text-decoration: none;
color: var(--ink);
box-shadow: var(--shadow-sm);
transition: all var(--t-fast);
min-height: 120px;
}
/* When the next-card is a submit button (lesson completion) we make the
ENTIRE card surface one button so clicks anywhere submit the form, not
just the arrow. The wrapping