/* ==========================================================================
   Mornio Wake School — /wake-school and its lessons
   Loaded after styles.css, and only on Wake School pages. Every rule is scoped
   to a .ws-* class (or to body.ws), so no other page can be affected by it.
   Built on the site's own tokens, so light and dark both work with no second
   palette. No fonts, no images, no script: the diagrams are HTML and inline SVG.
   ========================================================================== */

.ws { --ws-col: 720px; }

/* styles.css pads every <section>. Wake School sets its own rhythm, so the
   reset comes first and each section below restates the padding it wants. */
.ws main section { padding: 0; }
.ws main .ws-sources { padding-top: var(--sp-6); }
.ws main .related { padding-top: var(--sp-7); }

/* Reading progress. Pure CSS, tied to the page scroll: no script, no storage,
   nothing remembered. Browsers without scroll timelines simply show no bar. */
.ws-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 150; pointer-events: none; }
.ws-progress::before {
  content: ""; display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--sun));
  transform-origin: 0 50%; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .ws-progress::before { animation: ws-progress linear both; animation-timeline: scroll(root block); }
}
@keyframes ws-progress { to { transform: scaleX(1); } }

@media (min-width: 761px) and (max-width: 900px) {
  .ws .nav { gap: var(--sp-3); }
  .ws .nav-links { gap: 2px; }
  .ws .nav-links a { padding-inline: .5rem; font-size: .94rem; }
}

.ws .crumbs { max-width: var(--ws-col); }
.ws-hub .crumbs { max-width: none; }

/* Icons share one drawing style: 24px grid, round 1.8 stroke. */
.ws-ic { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------ Hub: hero ------------------------------- */
.ws-hero {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(2.5rem, 8vw, 5rem) 0 clamp(2.25rem, 6vw, 3.75rem);
}
/* Dawn: light coming up from the horizon, sky at the top corners. */
.ws-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(62% 58% at 50% 112%, color-mix(in srgb, var(--sun) 40%, transparent), transparent 72%),
    radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--sky) 40%, transparent), transparent 60%),
    radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--sky) 26%, transparent), transparent 60%);
}
.ws-hero .eyebrow { max-width: none; margin-bottom: var(--sp-4); }
.ws-hero h1 {
  font-size: clamp(2.9rem, 11vw, 4.9rem); letter-spacing: -.04em; line-height: 1.02;
  margin: 0 auto var(--sp-5); text-wrap: balance;
}
.ws-lede {
  font-size: clamp(1.125rem, 2.8vw, 1.4rem); line-height: 1.5; color: var(--text-muted);
  max-width: 33em; margin: 0 auto var(--sp-6); text-wrap: pretty;
}
.ws-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: center; align-items: center; }
.ws-actions .btn { min-height: 52px; padding-inline: 1.6rem; font-size: 1.05rem; }
.ws-textlink { font-weight: 650; text-decoration: none; }
.ws-textlink:hover { text-decoration: underline; }
.ws-byline { margin: var(--sp-5) auto 0; font-size: .92rem; color: var(--text-muted); max-width: 40em; }

/* The wake-up path: the one picture Wake School is built around. Waking is a
   stretch of road, not a switch, and the lessons sit on the middle of it. */
.ws-path {
  list-style: none; position: relative;
  margin: clamp(2rem, 6vw, 3.25rem) auto 0; padding: 0; max-width: 820px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
}
.ws-path::before {
  content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 23px; height: 2px;
  background: linear-gradient(90deg, var(--border-strong), var(--brand) 45%, var(--sun));
}
.ws-stop { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.ws-stop-ic {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted);
}
.ws-stop b { font-size: .86rem; line-height: 1.2; font-weight: 700; }
.ws-stop-cap { display: none; font-size: .84rem; line-height: 1.35; color: var(--text-muted); max-width: 17ch; }
.ws-stop.is-focus .ws-stop-ic { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand) 18%, transparent); }
.ws-stop.is-sun .ws-stop-ic { background: color-mix(in srgb, var(--sun) 30%, var(--surface)); border-color: color-mix(in srgb, var(--sun) 60%, var(--border)); color: var(--text); }
@media (min-width: 620px) {
  .ws-path { gap: var(--sp-4); }
  .ws-path::before { top: 31px; }
  .ws-stop-ic { width: 64px; height: 64px; }
  .ws-stop-ic .ws-ic { width: 28px; height: 28px; }
  .ws-stop b { font-size: 1rem; }
  .ws-stop-cap { display: block; }
}

/* ------------------------------ Hub: sections --------------------------- */
.ws main .ws-sec { padding: clamp(2.25rem, 6vw, 3.75rem) 0; scroll-margin-top: 72px; }
.ws main .ws-sec--last { padding-bottom: var(--sp-8); }
.ws-sec + .ws-sec { border-top: 1px solid var(--border); }
.ws-sec-head { max-width: 40em; margin: 0 0 var(--sp-5); }
.ws-sec-head h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-bottom: var(--sp-2); letter-spacing: -.025em; }
.ws-sec-head p { color: var(--text-muted); margin: 0; font-size: 1.05rem; }

/* "What are you struggling with?" Big, plain, first-person. */
.ws-problems { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 720px) { .ws-problems { grid-template-columns: 1fr 1fr; gap: var(--sp-4); } }
.ws-problem {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-4); align-items: center;
  padding: var(--sp-5); min-height: 104px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); color: var(--text); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ws-problem:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); color: var(--text); }
.ws-problem:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ws-problem-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.ws-problem-ic .ws-ic { width: 28px; height: 28px; }
.ws-problem h3 { margin: 0 0 2px; font-size: 1.2rem; letter-spacing: -.015em; }
.ws-problem p { margin: 0; color: var(--text-muted); font-size: .96rem; line-height: 1.45; }
.ws-arrow { color: var(--text-muted); }

/* Wake Up 101: the numbered course. */
.ws-course { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.ws-course li { margin: 0; }
.ws-lesson-row {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: start;
  padding: var(--sp-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ws-lesson-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); color: var(--text); }
.ws-lesson-row:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ws-num {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}
.ws-lesson-row h3 { margin: 0 0 4px; font-size: 1.18rem; line-height: 1.3; letter-spacing: -.015em; }
.ws-lesson-row p { margin: 0 0 var(--sp-2); color: var(--text-muted); font-size: .97rem; line-height: 1.5; max-width: 60ch; }
.ws-meta { font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.ws-course-note { margin: var(--sp-4) 0 0; font-size: .92rem; color: var(--text-muted); }

/* Tracks: one syllabus card per problem. */
.ws-tracks { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 1000px) { .ws-tracks { grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: start; } }
.ws-track {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-5) var(--sp-3); scroll-margin-top: 84px;
}
.ws-track:target { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); }
.ws-track-head { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center; margin-bottom: var(--sp-4); }
.ws-track-head h3 { margin: 0; font-size: 1.28rem; letter-spacing: -.02em; }
.ws-track-head p { margin: 2px 0 0; color: var(--text-muted); font-size: .94rem; line-height: 1.45; }
.ws-track ol { list-style: none; margin: 0; padding: 0; }
.ws-track li { margin: 0; border-top: 1px solid var(--border); }
.ws-track li a {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); align-items: center;
  min-height: 56px; padding: var(--sp-3) 2px;
  color: var(--text); text-decoration: none; font-weight: 600; line-height: 1.35;
}
.ws-track li a:hover { color: var(--brand); }
.ws-min { color: var(--text-muted); font-weight: 500; font-size: .86rem; white-space: nowrap; }
.ws-tag {
  display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; vertical-align: 2px;
  font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: color-mix(in srgb, var(--sun) 32%, var(--surface)); color: var(--text);
}

/* How Wake School works: the four promises. */
.ws-promises { display: grid; grid-template-columns: 1fr; gap: var(--sp-4); }
@media (min-width: 620px) { .ws-promises { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } }
@media (min-width: 1000px) { .ws-promises { grid-template-columns: repeat(4, 1fr); } }
.ws-promise h3 { margin: var(--sp-3) 0 var(--sp-2); font-size: 1.08rem; }
.ws-promise p { margin: 0; color: var(--text-muted); font-size: .96rem; line-height: 1.55; }
.ws-promise-ic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.ws-fineprint { margin: var(--sp-5) 0 0; font-size: .92rem; color: var(--text-muted); max-width: 62em; }

/* Built by Mornio: one quiet block, one button. */
.ws-built {
  display: grid; grid-template-columns: 1fr; gap: var(--sp-5); align-items: center;
  padding: clamp(1.5rem, 5vw, 2.5rem); border-radius: var(--radius-lg);
  background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
}
@media (min-width: 820px) { .ws-built { grid-template-columns: 1fr auto; gap: var(--sp-7); } }
.ws-built h2 { font-size: clamp(1.4rem, 4vw, 1.8rem); margin-bottom: var(--sp-3); }
.ws-built p { margin: 0; color: var(--text-muted); max-width: 54ch; }
.ws-built .cta-row { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }

/* ------------------------------ Lesson page ----------------------------- */
.ws-lesson { padding-bottom: var(--sp-8); }
.ws-lesson > * { max-width: var(--ws-col); margin-inline: auto; }

.ws-lesson-head { padding: clamp(1.5rem, 5vw, 2.5rem) 0 var(--sp-5); }
.ws-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2); margin: 0 0 var(--sp-4);
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand);
}
.ws-kicker a { color: inherit; text-decoration: none; }
.ws-kicker a:hover { text-decoration: underline; }
.ws-kicker span + span::before, .ws-kicker a + span::before { content: "\00B7"; margin-right: var(--sp-2); color: var(--border-strong); }
.ws-lesson-head h1 { font-size: clamp(2rem, 6.6vw, 3.1rem); letter-spacing: -.03em; line-height: 1.08; margin-bottom: var(--sp-4); text-wrap: balance; }
.ws-lesson-meta { margin: 0; color: var(--text-muted); font-size: .92rem; }

/* The 30-second answer. The whole lesson, for someone who reads nothing else. */
.ws-answer {
  background: var(--brand-soft);
  border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
  border-radius: var(--radius-lg); padding: clamp(1.25rem, 4.5vw, 2rem);
}
.ws-answer-label {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3);
  font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); line-height: 1.2;
}
.ws-answer-label .ws-ic { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.ws-answer > p { max-width: none; margin: 0 0 var(--sp-3); font-size: clamp(1.15rem, 3.3vw, 1.34rem); line-height: 1.5; letter-spacing: -.01em; }
.ws-answer > p:last-of-type { margin-bottom: 0; }
.ws-glance {
  margin: var(--sp-5) 0 0; padding: var(--sp-4) 0 0; display: grid; gap: var(--sp-3);
  border-top: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border));
}
.ws-glance > div { display: grid; grid-template-columns: 1fr; gap: 2px; }
@media (min-width: 600px) { .ws-glance > div { grid-template-columns: 11.5em 1fr; gap: var(--sp-4); } }
.ws-glance dt { font-weight: 700; font-size: .96rem; }
.ws-glance dd { margin: 0; font-size: 1.02rem; line-height: 1.5; }

/* Body copy: big, open, one idea per paragraph. */
.ws-body { font-size: 1.125rem; line-height: 1.7; }
.ws-body > h2 { font-size: clamp(1.5rem, 4.6vw, 1.9rem); letter-spacing: -.025em; margin: clamp(2.5rem, 7vw, 3.5rem) 0 var(--sp-4); scroll-margin-top: 84px; text-wrap: balance; }
.ws-body > h3 { font-size: 1.22rem; margin: var(--sp-6) 0 var(--sp-3); }
.ws-body p { max-width: none; margin: 0 0 1.15em; }
.ws-body ul, .ws-body ol { padding-left: 1.3em; margin: 0 0 1.15em; }
.ws-body li { margin-bottom: .5em; }
.ws-body li::marker { color: var(--brand); }
.ws-lead { font-size: 1.24rem; line-height: 1.55; color: var(--text-muted); margin-top: var(--sp-6) !important; }
.ws-cite { font-size: .7em; line-height: 0; vertical-align: super; white-space: nowrap; }
.ws-cite a { text-decoration: none; font-weight: 700; padding: 2px 1px; border-radius: 4px; }
.ws-cite a + a::before { content: ","; margin-right: 1px; color: var(--text-muted); font-weight: 500; }
.ws-cite a:hover { background: var(--brand-soft); }
.ws-term { font-style: normal; font-weight: 650; }

/* Figures: the picture comes before the paragraph that explains it. */
.ws-figure {
  margin: var(--sp-6) 0; padding: clamp(1rem, 4vw, 1.5rem);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.ws-fig-title { margin: 0 0 var(--sp-4); font-size: 1.02rem; font-weight: 700; line-height: 1.35; max-width: none; }
.ws-figure figcaption { margin-top: var(--sp-4); font-size: .9rem; line-height: 1.5; color: var(--text-muted); }
.ws-figure .ws-path { margin-top: var(--sp-2); }

.ws-chart { display: block; width: 100%; height: auto; max-width: 560px; margin-inline: auto; overflow: visible; }
.ws-chart .axis { stroke: var(--border-strong); stroke-width: 1.5; fill: none; }
.ws-chart .guide { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; fill: none; }
.ws-chart .zone { fill: color-mix(in srgb, var(--sun) 24%, transparent); }
.ws-chart .line { stroke: var(--brand); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ws-chart .dot { fill: var(--brand); stroke: var(--surface); stroke-width: 2; }
.ws-chart text { fill: var(--text-muted); font-family: var(--font); font-size: 12px; }
.ws-chart text.strong { fill: var(--text); font-weight: 700; }

/* Light levels, drawn to scale. The office bar is meant to be a sliver. */
.ws-body .ws-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.ws-bars li { margin: 0; }
.ws-bar-label { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--sp-3); margin-bottom: 6px; font-size: .96rem; line-height: 1.35; }
.ws-bar-label span { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ws-bar { height: 16px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.ws-bar i { display: block; height: 100%; width: calc(var(--v) * 1%); min-width: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--sun), var(--sun-2)); }
.ws-bar i.is-indoor { background: var(--brand); border-radius: 0; }

/* Two-row cause and effect (morning light / evening light). */
.ws-effects { display: grid; gap: var(--sp-3); }
.ws-effect { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-4); border-radius: var(--radius); background: var(--surface-2); }
.ws-effect-ic { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border-strong); color: var(--brand); }
.ws-effect.is-sun .ws-effect-ic { background: color-mix(in srgb, var(--sun) 30%, var(--surface)); border-color: color-mix(in srgb, var(--sun) 60%, var(--border)); color: var(--text); }
.ws-effect b { display: block; font-size: 1.02rem; line-height: 1.35; }
.ws-effect div > span { display: block; margin-top: 2px; color: var(--text-muted); font-size: .95rem; line-height: 1.45; }

/* Evidence cards. The chip says how sure anyone can be, in words, so the
   meaning never rests on colour alone. */
.ws-evidence { list-style: none; margin: var(--sp-5) 0; padding: 0 !important; display: grid; gap: var(--sp-3); }
.ws-ev { margin: 0 !important; padding: var(--sp-4) var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.ws-ev-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-2); }
.ws-ev h3 { margin: 0; font-size: 1.1rem; }
.ws-ev p { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.ws-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  font-size: .78rem; font-weight: 700; line-height: 1.25; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.ws-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; box-sizing: border-box; background: var(--text-muted); }
.ws-chip--good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 32%, var(--border)); }
.ws-chip--good::before { background: var(--good); }
.ws-chip--mixed { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 26%, var(--border)); }
.ws-chip--mixed::before { background: var(--brand); }
.ws-chip--early { background: color-mix(in srgb, var(--sun) 18%, var(--surface)); border-color: color-mix(in srgb, var(--sun) 46%, var(--border)); }
.ws-chip--early::before { background: var(--sun); }
.ws-chip--none::before { background: transparent; border: 2px solid var(--text-muted); }
.ws-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); padding: 0 !important; list-style: none; }
.ws-legend li { margin: 0 !important; }

/* The routine: a timeline you can follow with one eye open. */
.ws-steps { list-style: none; position: relative; margin: var(--sp-5) 0; padding: 0 !important; }
.ws-steps::before { content: ""; position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: linear-gradient(var(--brand), var(--sun)); opacity: .55; }
.ws-step { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: var(--sp-4); margin: 0 0 var(--sp-5) !important; }
.ws-step:last-child { margin-bottom: 0 !important; }
.ws-step-ic { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--brand); color: var(--brand); }
.ws-step-time { display: block; margin: 2px 0 2px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.ws-step h3 { margin: 0 0 var(--sp-2); font-size: 1.22rem; letter-spacing: -.015em; }
.ws-step p { margin: 0 0 var(--sp-3); }
.ws-step p:last-child { margin-bottom: 0; }
@media (max-width: 480px) {
  .ws-steps::before { left: 21px; }
  .ws-step { grid-template-columns: 44px 1fr; gap: var(--sp-3); }
  .ws-step-ic { width: 44px; height: 44px; }
}

/* Callouts: what this does not mean, and when to see a doctor. */
.ws-callout { margin: var(--sp-7) 0 0; padding: clamp(1.1rem, 4vw, 1.6rem); border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); }
.ws-callout h2 { display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-3); font-size: 1.3rem; letter-spacing: -.02em; scroll-margin-top: 84px; }
.ws-callout h2 .ws-ic { color: var(--brand); }
.ws-callout > :last-child { margin-bottom: 0; }
.ws-callout--warn { background: color-mix(in srgb, var(--sun) 13%, var(--surface)); border-color: color-mix(in srgb, var(--sun) 42%, var(--border)); }
.ws-callout--warn h2 .ws-ic { color: var(--sun-2); }
.ws-callout--doctor { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, var(--border)); }
.ws-callout--doctor h2 .ws-ic { color: var(--good); }

/* Where Mornio can help. Deliberately plainer than the lesson around it. */
.ws-mornio { margin-top: var(--sp-7); padding: clamp(1.25rem, 4.5vw, 2rem); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border-strong); }
.ws-mornio-kicker { margin: 0 0 var(--sp-2); font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ws-mornio h2 { margin: 0 0 var(--sp-3); font-size: 1.4rem; letter-spacing: -.02em; }
.ws-mornio p { max-width: none; margin: 0 0 var(--sp-4); font-size: 1.06rem; line-height: 1.6; }
.ws-mornio .btn { min-height: 50px; }
.ws-mornio .convert-note { margin: var(--sp-3) 0 0; font-size: .88rem; color: var(--text-muted); }

/* Sources. A citation number in the text lands here and lights its row. */
.ws-sources { margin-top: var(--sp-7); border-top: 1px solid var(--border); font-size: .95rem; line-height: 1.55; }
.ws-sources h2 { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.ws-sources > p { color: var(--text-muted); max-width: none; }
.ws-sources ol { margin: var(--sp-4) 0 0; padding-left: 1.5em; color: var(--text-muted); }
.ws-sources li { margin-bottom: var(--sp-3); padding: 2px 4px; border-radius: 6px; scroll-margin-top: 90px; overflow-wrap: anywhere; }
.ws-sources li:target { color: var(--text); background: var(--brand-soft); box-shadow: 0 0 0 6px var(--brand-soft); }
.ws-reviewed { margin: var(--sp-5) 0 0; font-size: .88rem; color: var(--text-muted); max-width: none; }

/* Next lesson. */
.ws-next {
  display: grid; grid-template-columns: 1fr auto; gap: var(--sp-4); align-items: center;
  margin-top: var(--sp-7); padding: var(--sp-5) clamp(1.25rem, 4vw, 2rem);
  border-radius: var(--radius-lg); background: var(--brand); color: var(--on-brand); text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.ws-next:hover { background: var(--brand-ink); color: var(--on-brand); transform: translateY(-2px); }
.ws-next:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.ws-next small { display: block; margin-bottom: 4px; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; opacity: .82; }
.ws-next b { display: block; font-size: clamp(1.15rem, 3.6vw, 1.4rem); line-height: 1.25; letter-spacing: -.015em; }
.ws-back { display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); color: var(--text-muted); font-weight: 600; text-decoration: none; }
.ws-back:hover { color: var(--brand); }
.ws-back .ws-ic { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .ws-problem, .ws-problem:hover, .ws-lesson-row, .ws-lesson-row:hover, .ws-next, .ws-next:hover { transition: none; transform: none; }
}

@media print {
  .ws-progress, .ws-mornio, .ws-next, .ws-back { display: none !important; }
}