/* /learn styles. Sections 1-4 are copied from marksuguitan/laboratory (src/styles/tokens.css, base.css, ui.css and src/pages/learning-space/Workspace.css) so the course looks like the Learning Space; keep them in step with it. Section 5 is Kardiograph's own: the header, the live-tracing bench and the wave stepper. */
/* ===== 1. tokens (laboratory) ===== */
/*
 * Design tokens — the single source of truth for the visual language.
 *
 * Components reference roles (--text, --surface, --tone-normal…), never raw
 * hex, so light and dark mode swap in one place. Dark values are declared
 * twice: once for the OS preference (unless the user forced light) and once
 * for an explicit dark choice from the theme toggle.
 */

:root {
  color-scheme: light;

  /* Typography */
  --font-sans: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Manrope Variable', 'Inter Variable', system-ui, sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --text-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);

  /* Spacing (4px grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 480ms;

  /* Layout */
  --page-max: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --header-h: 72px;
  --tabbar-h: 64px;

  /* Surfaces — warm neutrals */
  --bg: #ffffff;
  --bg-subtle: #f7f7f5;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-sunken: #f2f2ef;
  --surface-hover: #f7f7f5;

  /* Ink */
  --text: #222222;
  --text-secondary: #5e5e5b;
  --text-muted: #8a8984;
  --text-on-accent: #ffffff;

  /* Lines */
  --border: #ebebe8;
  --border-strong: #dcdcd8;
  --grid: #ecebe6;
  --axis: #c9c8c0;

  /* Brand accent — Ultra Violet tuned to Comma Clinical, distinct from every
     clinical status hue so it never reads as a result. */
  --accent: #6941a1;
  --accent-hover: #573289;
  --accent-soft: #ebe3fc;
  --accent-ring: rgba(105, 65, 161, 0.28);

  /* Clinical status — fixed meaning everywhere, always paired with an icon
     and a label so color never carries meaning alone. */
  --tone-normal: #0ca30c;
  --tone-normal-ink: #146c14;
  --tone-normal-soft: #e8f6e8;
  --tone-borderline: #f2a60f;
  --tone-borderline-ink: #8a5a00;
  --tone-borderline-soft: #fdf3dd;
  --tone-abnormal: #ec835a;
  --tone-abnormal-ink: #b2471c;
  --tone-abnormal-soft: #fdece5;
  --tone-critical: #d03b3b;
  --tone-critical-ink: #b42828;
  --tone-critical-soft: #fbe6e6;

  /* Categorical (identity, e.g. ions in a Gamblegram) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;

  /* Depth */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.08), 0 18px 48px rgba(0, 0, 0, 0.1);
  --shadow-thumb: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.18);

  --header-bg: rgba(255, 255, 255, 0.86);
  --band-dim: 0.3;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #121211;
    --bg-subtle: #181817;
    --surface: #1c1c1b;
    --surface-raised: #232322;
    --surface-sunken: #161615;
    --surface-hover: #262625;
    --text: #f0efec;
    --text-secondary: #c3c2b7;
    --text-muted: #8f8e88;
    --border: #2b2b29;
    --border-strong: #3a3a37;
    --grid: #2c2c2a;
    --axis: #45453f;
    --accent: #b093e5;
    --accent-hover: #c1a9ee;
    --accent-soft: #322843;
    --accent-ring: rgba(176, 147, 229, 0.38);
    --text-on-accent: #12111f;
    --tone-normal-ink: #4cc44c;
    --tone-normal-soft: #16291a;
    --tone-borderline-ink: #f6bd45;
    --tone-borderline-soft: #2e2512;
    --tone-abnormal-ink: #f29a76;
    --tone-abnormal-soft: #33201a;
    --tone-critical-ink: #ef7070;
    --tone-critical-soft: #351a1a;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.35), 0 18px 48px rgba(0, 0, 0, 0.45);
    --shadow-thumb: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
    --header-bg: rgba(18, 18, 17, 0.82);
    --band-dim: 0.42;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #121211;
  --bg-subtle: #181817;
  --surface: #1c1c1b;
  --surface-raised: #232322;
  --surface-sunken: #161615;
  --surface-hover: #262625;
  --text: #f0efec;
  --text-secondary: #c3c2b7;
  --text-muted: #8f8e88;
  --border: #2b2b29;
  --border-strong: #3a3a37;
  --grid: #2c2c2a;
  --axis: #45453f;
  --accent: #b093e5;
  --accent-hover: #c1a9ee;
  --accent-soft: #322843;
  --accent-ring: rgba(176, 147, 229, 0.38);
  --text-on-accent: #12111f;
  --tone-normal-ink: #4cc44c;
  --tone-normal-soft: #16291a;
  --tone-borderline-ink: #f6bd45;
  --tone-borderline-soft: #2e2512;
  --tone-abnormal-ink: #f29a76;
  --tone-abnormal-soft: #33201a;
  --tone-critical-ink: #ef7070;
  --tone-critical-soft: #351a1a;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 6px 16px rgba(0, 0, 0, 0.35), 0 18px 48px rgba(0, 0, 0, 0.45);
  --shadow-thumb: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
  --header-bg: rgba(18, 18, 17, 0.82);
  --band-dim: 0.42;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}
/* ===== 2. base (laboratory) ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
}

svg {
  display: block;
}

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

::selection {
  background: var(--accent-soft);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Layout primitives */

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--space-8) var(--gutter) var(--space-20);
}

.stack {
  display: flex;
  flex-direction: column;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* An eyebrow carrying a name whose casing means something (pH, PaCO₂, eGFR). */
.eyebrow--as-is {
  text-transform: none;
  letter-spacing: 0.03em;
}

.lede {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  max-width: 62ch;
}

.section-title {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.muted {
  color: var(--text-muted);
}

.num {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Hero figures read better with proportional digits; tabular spacing looks loose at display sizes. */
.num--hero {
  font-variant-numeric: proportional-nums;
  letter-spacing: -0.035em;
}

/* Page entrance — content rises gently into place. */
.enter {
  animation: rise var(--dur-slow) var(--ease-out) both;
}

.enter-delay-1 {
  animation-delay: 60ms;
}
.enter-delay-2 {
  animation-delay: 120ms;
}
.enter-delay-3 {
  animation-delay: 180ms;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) {
  .page {
    padding-top: var(--space-5);
    padding-bottom: var(--space-12);
  }
}
/* ===== 3. ui (laboratory) ===== */
/* Shared surface and control styles used across pages. */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  padding: var(--space-6);
}

.card--raised {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card--interactive {
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.card--interactive:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.card--interactive:active {
  transform: translateY(0) scale(0.995);
}

.card__title {
  font-size: var(--text-lg);
  margin-bottom: var(--space-3);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn--secondary:hover {
  border-color: var(--text);
}

.btn--ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 0 12px;
}

.btn--ghost:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.btn--sm {
  height: 36px;
  padding: 0 14px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  flex: none;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.chip:hover {
  border-color: var(--text);
}

.icon-tile {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  color: var(--accent);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--space-6);
  margin-left: -12px;
}

/* Formulas are typeset by KaTeX at build time; see src/components/Formula.tsx. */
.formula {
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text);
}

/* Long equations scroll sideways on narrow screens instead of overflowing the card. */
.formula__math {
  overflow-x: auto;
  overflow-y: hidden;
}

.formula__math .katex-display {
  margin: 0;
}

.formula__math .katex-display > .katex {
  font-size: 1.1em;
  text-align: left;
}

@media (max-width: 767px) {
  .formula {
    padding: var(--space-3);
  }

  .formula__math .katex-display > .katex {
    font-size: 1em;
  }
}

.formula__units {
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--text-secondary);
}

.prose strong {
  color: var(--text);
}

.pearl {
  display: flex;
  gap: var(--space-4);
  background: var(--accent-soft);
  border-color: transparent;
}

.pearl__icon {
  flex: none;
  color: var(--accent);
}

.pearl p {
  color: var(--text);
}

.scenario-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.scenario-link h3 {
  font-size: var(--text-lg);
  margin-top: 2px;
}

/* Interpretation tables; the row that applies is marked .is-active. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur-base) var(--ease-out);
}

.table th,
.table td.num {
  font-weight: 700;
  white-space: nowrap;
}

.table td {
  color: var(--text-secondary);
}

.table tr:last-child th,
.table tr:last-child td {
  border-bottom: 0;
}

.table tr.is-active th,
.table tr.is-active td {
  background: var(--accent-soft);
  color: var(--text);
}

.table tr.is-active th:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.table tr.is-active td:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
/* ===== 4. Learning Space (laboratory) ===== */
/*
 * The Learning Space. Its home and course pages sit in the app shell; lessons
 * open in the Learnspace, a full-window space of its own: a slim top bar with
 * Exit (back to the course), the lesson's segmented progress and a syllabus
 * drawer; a guide pane (Learn, then Instructions) beside a bench where the
 * element sits; and a step bar along the bottom whose Next waits on the
 * instructions. On wide screens each
 * pane scrolls on its own and the bars stay put; on phones the page scrolls
 * and the bars stick.
 */

.ws {
  --ws-bar-h: 56px;
  --ws-foot-h: 68px;
  min-height: var(--app-h, 100dvh);
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* Top bar */
.ws-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: var(--ws-bar-h);
  padding: 0 var(--space-4);
  background: var(--header-bg);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--border);
}

.ws-bar__exit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px 0 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  flex: none;
}

.ws-bar__exit:hover {
  background: var(--surface-hover);
  color: var(--text);
}

.ws-bar__middle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.ws-bar__crumb {
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-bar__crumb:hover {
  color: var(--text);
}

.ws-bar__sep {
  color: var(--border-strong);
}

.ws-bar__title {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-bar__end {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

/* Progress bars */
.path-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.path-bar > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width var(--dur-slow) var(--ease-out);
}

/* Learning Space home and course pages, inside the app shell's .page */
.ws-home {
  max-width: 1080px;
}

.path__hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: end;
  margin-bottom: var(--space-10);
}

.path__title {
  font-size: var(--text-3xl);
  line-height: 1.08;
  margin: var(--space-3) 0 var(--space-4);
}

.path__accent {
  color: var(--accent);
}

.path__continue {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.path__continue-title {
  font-size: var(--text-xl);
}

.path__continue-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.path__meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.path__note {
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* Lesson: guide pane beside the bench */
.ws-lesson {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
  min-height: 0;
}

/* Lesson title and segmented progress in the top bar */
.ws-bar__lesson {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ws-bar__lesson .ws-bar__title {
  font-size: var(--text-sm);
}

.ws-icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text);
  cursor: pointer;
}

.ws-icon-btn:hover {
  background: var(--surface-hover);
}

.ws-segs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 4px;
}

/* Not reached: hatched; done: filled; the current one is ringed. */
.ws-seg {
  width: 28px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: repeating-linear-gradient(-45deg, var(--border-strong) 0 2px, transparent 2px 4px);
  transition: background-color var(--dur-base) var(--ease-out);
}

.ws-seg.is-done {
  background: var(--accent);
}

.ws-seg.is-current {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent);
}

/* Lesson: guide pane beside the bench, or the guide alone for a reading */
.ws-lesson.is-reading {
  grid-template-columns: minmax(0, 1fr);
}

.ws-guide {
  /* Contains absolutely positioned children (screen-reader-only labels), so
     they scroll with the pane instead of stretching the page below the step bar. */
  position: relative;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow-y: auto;
}

.ws-lesson.is-reading .ws-guide {
  border-right: 0;
}

.ws-guide__section + .ws-guide__section {
  margin-top: var(--space-4);
}

/* Section headings stay in view while the section scrolls under them. */
.ws-guide__head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  background: var(--surface-sunken);
  border-block: 1px solid var(--border);
}

.ws-guide__section:first-child .ws-guide__head {
  border-top: 0;
}

/* Instructions heading: a child of the guide itself, so it can also stick to the
   bottom of the pane while the instructions are below the fold (.is-below). */
.ws-guide__anchor {
  height: 0;
  margin-top: var(--space-4);
  scroll-margin-top: 0;
}

.ws-guide__head--instructions {
  bottom: 0;
  z-index: 2;
  padding: 0;
}

.ws-guide__section--instructions {
  margin-top: 0 !important;
}

.ws-guide__jump {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-6);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: default;
}

.ws-guide__count,
.ws-guide__chevron {
  display: none;
}

.ws-guide__head--instructions.is-below {
  border-bottom: 0;
  box-shadow: 0 -8px 20px -12px rgba(0, 0, 0, 0.35);
}

.ws-guide__head--instructions.is-below .ws-guide__jump {
  cursor: pointer;
}

.ws-guide__head--instructions.is-below .ws-guide__jump:hover {
  background: var(--surface-hover);
}

.ws-guide__head--instructions.is-below .ws-guide__count {
  display: inline-flex;
  margin-left: auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
}

.ws-guide__head--instructions.is-below.is-met .ws-guide__count {
  background: var(--surface-hover);
  color: var(--text-muted);
}

.ws-guide__head--instructions.is-below .ws-guide__chevron {
  display: inline-flex;
}

@media (prefers-reduced-motion: no-preference) {
  .ws-guide__head--instructions.is-below:not(.is-met) .ws-guide__chevron {
    animation: ws-nudge 1.6s var(--ease-out) 2;
  }
}

@keyframes ws-nudge {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(3px); }
}

.ws-guide__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}

/* A reading's heading lines up with its centered column. */
.ws-lesson.is-reading .ws-guide__head {
  padding-inline: max(var(--space-6), calc((100% - 720px) / 2 + var(--space-6)));
}

.ws-lesson.is-reading .ws-guide__body {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
  padding-block: var(--space-10) var(--space-16);
}

.ws-guide__title {
  font-size: var(--text-2xl);
  line-height: 1.15;
}

.ws-lesson.is-reading .ws-guide__title {
  font-size: var(--text-3xl);
}

.ws-guide__deeper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.ws-guide__deeper > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Instructions: a box per goal that ticks as it is met */
.ws-goals {
  list-style: none;
  margin: 0;
  padding: var(--space-5) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.ws-goal {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.ws-goal__box {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  flex: none;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.ws-goal.is-met .ws-goal__box {
  background: var(--tone-normal);
  border-color: var(--tone-normal);
  color: #fff;
}

.ws-goal__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  line-height: 1.55;
}

.ws-goal__num {
  font-weight: 700;
}

.ws-goal.is-met .ws-goal__body > p {
  color: var(--text-muted);
}

.ws-hint {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  font-size: var(--text-sm);
}

.ws-hint summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.ws-hint summary::-webkit-details-marker {
  display: none;
}

.ws-hint__chevron {
  margin-left: auto;
  transition: transform var(--dur-base) var(--ease-out);
}

.ws-hint[open] .ws-hint__chevron {
  transform: rotate(180deg);
}

.ws-hint > p {
  padding: 0 var(--space-3) var(--space-3);
  color: var(--text-secondary);
}

/* Syllabus: the course outline in a drawer from the left */
.ws-drawer {
  inset: 0 auto 0 0;
  width: min(420px, 100vw);
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-10);
  border: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}

.ws-drawer[open] {
  animation: ws-drawer-in var(--dur-slow) var(--ease-out);
}

.ws-drawer::backdrop {
  background: rgb(0 0 0 / 0.35);
}

@keyframes ws-drawer-in {
  from {
    transform: translateX(-24px);
    opacity: 0;
  }
}

.ws-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ws-drawer__lesson {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-6) 0;
}

.ws-drawer__title {
  font-size: var(--text-2xl);
}

.ws-drawer__lesson .ws-seg {
  flex: 1;
}

.ws-drawer__group + .ws-drawer__group {
  margin-top: var(--space-5);
}

.ws-drawer__module {
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ws-drawer__lessons,
.ws-drawer__elements {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ws-drawer__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text);
  font-weight: 600;
}

a.ws-drawer__row:hover {
  background: var(--surface-hover);
}

.ws-drawer__row.is-locked {
  color: var(--text-muted);
  cursor: not-allowed;
}

.ws-drawer__row.is-current {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.ws-drawer__row-text {
  display: flex;
  flex-direction: column;
}

.ws-drawer__row-text .path__meta {
  font-weight: 400;
}

.ws-drawer__lesson-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.ws-drawer__lesson-icon.is-done {
  background: var(--tone-normal);
  color: #fff;
}

.ws-drawer__elements {
  padding: var(--space-2) 0 var(--space-3) var(--space-6);
}

.ws-drawer__element {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  text-align: left;
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
}

.ws-drawer__element:hover:not(:disabled) {
  background: var(--surface-hover);
}

.ws-drawer__element.is-current {
  font-weight: 700;
  background: var(--surface-sunken);
  box-shadow: inset 3px 0 0 var(--accent);
}

.ws-drawer__element:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
}

.ws-drawer__check {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  color: var(--text-muted);
}

.ws-drawer__element.is-done .ws-drawer__check {
  background: var(--tone-normal);
  color: #fff;
}

.ws-drawer__element-title {
  flex: 1;
  min-width: 0;
}

.ws-drawer__kind {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* The bench: where the interactive sits, on a faint grid like graph paper. */
.ws-bench {
  position: relative;
  min-width: 0;
  overflow-y: auto;
  background-color: var(--bg-subtle);
  background-image: radial-gradient(var(--border-strong) 1px, transparent 1px);
  background-size: 22px 22px;
}

.ws-bench__step:not([hidden]) {
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: var(--space-10) var(--space-8);
}

.ws-instrument {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8);
}

.ws-instrument__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.ws-instrument__value {
  font-size: clamp(3rem, 2rem + 3vw, 4.5rem);
  line-height: 1;
}

.ws-instrument__numbers {
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* A registered bench widget; its reading is in the guide. */
.ws-widget {
  width: 100%;
  align-self: start;
}

.ws-bench__step--interactive:has(.ws-widget .page) {
  place-items: start stretch;
  padding-inline: 0;
}

.ws-widget .page {
  max-width: 1100px;
  padding: var(--space-6) var(--space-8) var(--space-10);
}

/* A widget shown as one card in the middle of the bench. A fixed track keeps
   the card from sizing the bench to its chart on a phone. */
.ws-bench__step--interactive:has(.ws-widget--card) {
  grid-template-columns: minmax(0, 1fr);
}

.ws-widget--card {
  max-width: 640px;
  margin-inline: auto;
  align-self: center;
}

/* An app page's reading in the guide: paragraphs, formulas, lists and small tables. */
.ws-learn--page,
.ws-learn--page .scenario-text,
.ws-learn--page .scenario-text section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.ws-learn--page .scenario-text {
  gap: var(--space-8);
}

.ws-learn--page h3 {
  font-size: var(--text-lg);
  color: var(--text);
}

.ws-learn--page strong {
  color: var(--text);
}

.ws-learn--page .prose,
.ws-learn--page .mnemonic,
.ws-learn--page .bullets {
  font-size: var(--text-base);
}

.ws-learn--page .table-note {
  margin: 0;
}

.ws-learn--page .learn__cards .card__title {
  font-size: var(--text-base);
}

/* Step bar */
.ws-foot {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-4);
  height: var(--ws-foot-h);
  padding: 0 var(--space-4) env(safe-area-inset-bottom, 0px);
  background: var(--header-bg);
  backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--border);
}

.ws-foot .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.ws-foot__note {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.ws-foot__count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ws-foot__nav {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* Course list */
.path__section {
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.path-courses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
  gap: var(--space-4);
}

.path-course {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-5);
  height: 100%;
}

.path-course__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  color: var(--accent);
  flex: none;
}

.path-course__icon--lg {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
}

.path-course__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.path-course__title {
  font-size: var(--text-xl);
}

.path-course__summary {
  color: var(--text-secondary);
}

/* Course page: hero, then modules that open and close */
.ws-course__hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
  margin-bottom: var(--space-8);
}

.ws-course__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

.ws-course__title {
  margin: 0;
}

.ws-course__start {
  justify-self: start;
}

.ws-modules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card.ws-module {
  padding: 0;
  overflow: hidden;
}

.ws-module__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: var(--bg-subtle);
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}

.ws-module__head:hover {
  background: var(--surface-hover);
}

/* Locked: a module or lesson not reached yet. */
.ws-module.is-locked .ws-module__title,
.ws-module.is-locked .ws-module__num {
  color: var(--text-muted);
}

.ws-module__num {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.ws-module__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
}

.ws-module__chevron {
  transition: transform var(--dur-base) var(--ease-out);
  transform: rotate(-90deg);
}

.ws-module.is-open .ws-module__chevron {
  transform: none;
}

.ws-module.is-locked .ws-module__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ws-lesson-list {
  list-style: none;
  margin: 0;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
}

.ws-lesson-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

a.ws-lesson-row:hover {
  background: var(--surface-hover);
}

.ws-lesson-row.is-locked {
  color: var(--text-muted);
  cursor: not-allowed;
}

.ws-lesson-row.is-locked .ws-lesson-row__kinds {
  opacity: 0.5;
}

.ws-lesson-row.is-next {
  background: var(--accent-soft);
}

.ws-lesson-row__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--text-muted);
}

/* The lesson last opened on this device: ringed, with a small tag. */
.ws-lesson-row.is-here {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.ws-lesson-row__here {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  vertical-align: 2px;
  white-space: nowrap;
}

.ws-lesson-row.is-next .ws-lesson-row__icon {
  color: var(--accent);
}

.ws-lesson-row.is-done .ws-lesson-row__icon {
  background: var(--tone-normal);
  color: #fff;
}

.ws-lesson-row__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ws-lesson-row__title {
  font-weight: 600;
}

.ws-lesson-row__kinds {
  display: flex;
  gap: 4px;
}

.path-lesson__covers {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* Element type icons, tinted per type */
.ws-kind {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  flex: none;
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.ws-kind--text {
  background: var(--accent-soft);
  color: var(--accent);
}

.ws-kind--image,
.ws-kind--interactive {
  background: var(--tone-normal-soft);
  color: var(--tone-normal-ink);
}

.ws-kind--video,
.ws-kind--quiz {
  background: var(--tone-abnormal-soft);
  color: var(--tone-abnormal-ink);
}

.ws-kind.is-done {
  background: var(--tone-normal);
  color: #fff;
}

/* Elements on the bench */
.ws-figure,
.ws-video,
.ws-quiz,
.ws-interactive {
  width: 100%;
  max-width: 760px;
  margin: 0;
}

.ws-figure,
.ws-video,
.ws-quiz {
  padding: var(--space-8);
}

.ws-interactive--widget {
  max-width: none;
}

.ws-learn {
  font-size: var(--text-lg);
  line-height: 1.65;
  color: var(--text-secondary);
}

.ws-pending {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.ws-figure__img {
  display: block;
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}

.ws-figure__caption {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.ws-video__player,
.ws-video__empty {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: #111;
}

.ws-video__empty {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.ws-quiz__meta {
  margin-bottom: var(--space-3);
}

.ws-quiz__question {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.ws-quiz__prompt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
}

.ws-quiz__choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-2);
}

.ws-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text);
  cursor: pointer;
}

.ws-choice:hover {
  border-color: var(--text);
}

.ws-choice__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
}

.ws-choice.is-right {
  border-color: var(--tone-normal);
  background: var(--tone-normal-soft);
}

.ws-choice.is-right .ws-choice__mark {
  background: var(--tone-normal);
  border-color: var(--tone-normal);
  color: #fff;
}

.ws-choice.is-wrong {
  border-color: var(--tone-critical);
  background: var(--tone-critical-soft);
}

.ws-choice.is-wrong .ws-choice__mark {
  background: var(--tone-critical);
  border-color: var(--tone-critical);
  color: #fff;
}

.ws-quiz__feedback {
  min-height: 3.2em;
  margin-top: var(--space-4);
}

.ws-quiz__right {
  color: var(--tone-normal-ink);
}

.ws-quiz__wrong {
  color: var(--tone-critical-ink);
}

.ws-quiz__nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.ws-quiz__nav .btn:disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* Wide screens: the lesson fills the window and each pane scrolls on its own. */
@media (min-width: 960px) {
  .ws:has(.ws-lesson) {
    height: var(--app-h, 100dvh);
    overflow: hidden;
  }
}

@media (max-width: 959px) {
  .ws-lesson {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The guide sits above the bench and the page scrolls; its headings stick under the top bar. */
  .ws-guide {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    overflow: visible;
  }

  .ws-guide__head {
    top: var(--ws-bar-h);
    padding-inline: var(--gutter);
  }

  /* The page scrolls here: wait just above the step bar, and land below the top bar. */
  .ws-guide__head--instructions {
    bottom: calc(var(--ws-foot-h) + env(safe-area-inset-bottom, 0px));
    padding-inline: 0;
  }

  .ws-guide__jump {
    padding-inline: var(--gutter);
  }

  .ws-guide__anchor {
    scroll-margin-top: var(--ws-bar-h);
  }

  .ws-guide__body,
  .ws-goals {
    padding-inline: var(--gutter);
  }

  .ws-bench {
    overflow: visible;
  }

  .ws-bench__step:not([hidden]) {
    padding: var(--space-6) var(--gutter);
  }

  .ws-widget .page {
    padding: var(--space-4) var(--gutter) var(--space-8);
  }

  .path__hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 640px) {
  .ws-bar__exit span {
    display: none;
  }

  .ws-foot {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ws-foot__note {
    display: none;
  }

  .ws-instrument,
  .ws-figure,
  .ws-video,
  .ws-quiz {
    padding: var(--space-5);
  }

  .ws-foot .btn {
    padding: 0 14px;
  }

  .ws-course__hero,
  .path-course {
    grid-template-columns: minmax(0, 1fr);
  }

  .ws-lesson-row__kinds {
    display: none;
  }
}

/* The superuser's reset, under the note. */
.path__admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

/* ===== 5. Kardiograph's own ===== */

:root {
  /* The laboratory self-hosts the variable fonts; here they come from Google Fonts. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
  /* Kardiograph's coral accent (the editor's --accent) in place of the laboratory's violet. */
  --accent: #e0574f;
  --accent-hover: #c9463f;
  --accent-soft: #fcebea;
  --accent-ring: rgba(224, 87, 79, 0.3);
  --text-on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --accent: #e86a62;
    --accent-hover: #ef847d;
    --accent-soft: #3a1f1d;
    --accent-ring: rgba(232, 106, 98, 0.35);
    --text-on-accent: #ffffff;
  }
}
:root[data-theme='dark'] {
  --accent: #e86a62;
  --accent-hover: #ef847d;
  --accent-soft: #3a1f1d;
  --accent-ring: rgba(232, 106, 98, 0.35);
  --text-on-accent: #ffffff;
}

/* Site header on the home, course and checklist pages. */
.kg-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border); }
.kg-header .header__inner { max-width: var(--page-max); margin: 0 auto; height: var(--header-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.kg-brand { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.kg-brand__mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent); color: var(--text-on-accent); }
.kg-brand__name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); letter-spacing: -0.02em; }
.kg-brand__sub { font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); padding-left: 10px; border-left: 1px solid var(--border-strong); }
.kg-header__actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-left: auto; }
/* The sections as pills beside the name (src/ui/tabbar.ts sectionNav); the tab bar on phones. */
.kg-nav { display: flex; align-items: center; gap: var(--space-1); }
.kg-nav__link { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); white-space: nowrap; text-decoration: none; }
.kg-nav__link:hover { background: var(--surface-hover); color: var(--text); }
.kg-nav__link.is-current { background: var(--surface-sunken); color: var(--text); }
.kg-note { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-8); }
.kg-checklist-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); align-items: start; }

/* Segmented control (the laboratory's SegmentedControl, small size). */
.kg-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.kg-seg__btn { border: 0; background: transparent; color: var(--text-secondary); height: 30px; padding: 0 12px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.kg-seg__btn:hover { color: var(--text); }
.kg-seg__btn[aria-checked='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.kg-seg--icons .kg-seg__btn { width: 32px; padding: 0; justify-content: center; }

/* The bench of a figure, live tracing or practice element. */
.kg-bench { width: 100%; max-width: 1040px; display: flex; flex-direction: column; gap: var(--space-3); }
.kg-bench__tabs { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); min-width: 0; }
.kg-bench__tabs .kg-seg { padding: 2px; }
.kg-bench__tabs .kg-seg__btn { height: 26px; padding: 0 10px; font-size: var(--text-xs); }
.kg-bench > [hidden] { display: none !important; }
.kg-live-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.kg-live { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.kg-live__top { display: flex; justify-content: space-between; gap: var(--space-3); }
.kg-paper { width: 100%; overflow: hidden; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--border); line-height: 0; }
.kg-live[data-layout='beat'] .kg-paper { display: flex; justify-content: center; background: #fff; }
.kg-live__foot { display: flex; flex-direction: column; gap: var(--space-2); }
.kg-readout { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: 0; }
.kg-readout > div { display: flex; flex-direction: column; }
.kg-readout dt { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.kg-readout dd { margin: 0; font-size: var(--text-lg); font-weight: 700; }
.kg-caliper { font-size: var(--text-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* The wave stepper under the single beat; it shows only in that view. */
.kg-waves { display: none; flex-direction: column; gap: var(--space-3); }
.kg-live[data-layout='beat'] .kg-waves { display: flex; }
.kg-waves__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kg-wave { cursor: pointer; }
.kg-wave[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.kg-wave:disabled { opacity: 0.4; cursor: not-allowed; }
.kg-waves__about { color: var(--text-secondary); min-height: 3em; }

.kg-slider { display: grid; grid-template-columns: auto minmax(0, 1fr) 4.5em; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); }
.kg-slider__label { font-weight: 600; font-size: var(--text-sm); }
.kg-slider input { width: 100%; accent-color: var(--accent); }
.kg-slider__value { font-size: var(--text-lg); font-weight: 700; text-align: right; }

/* Figures from the original course are drawn on white. */
.kg-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.kg-figure .ws-figure__img { background: #fff; border-radius: var(--radius-sm); }
.kg-quiz-stage:empty { display: none; }

/* The reading: the old app's figure marks are buttons that show their figure. */
.kg-reading { display: flex; flex-direction: column; gap: var(--space-3); }
.kg-reading ul, .kg-reading ol { padding-left: 1.4em; display: flex; flex-direction: column; gap: var(--space-1); }
.kg-reading sup { font-size: 0.7em; }
.kg-reading .footnote { font-size: var(--text-sm); color: var(--text-muted); border-top: 1px solid var(--border); padding-top: var(--space-3); }
/* A phrase that shows its figure on the bench: a quiet link, lit only while that figure is showing (Mark, 2026-11-08). */
.kg-figref { display: inline; font: inherit; color: inherit; background: none; border: 0; border-radius: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; text-decoration: underline dotted; text-decoration-color: var(--text-muted); text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out); }
.kg-figref__tail { white-space: nowrap; }
.kg-figref__punct { display: inline-block; color: var(--text-secondary); }
.kg-figref svg { display: inline-block; width: 0.7em; height: 0.7em; margin-left: 0.25em; vertical-align: 0.05em; color: var(--text-muted); transition: color var(--dur-fast) var(--ease-out); }
.kg-figref:hover, .kg-figref:focus-visible { color: var(--accent); text-decoration-color: var(--accent); }
.kg-figref.is-showing { color: var(--accent); text-decoration-style: solid; text-decoration-color: var(--accent); }
.kg-figref:hover svg, .kg-figref:focus-visible svg, .kg-figref.is-showing svg { color: var(--accent); }

/* The checklist page. */
.kg-checklist section + section { margin-top: var(--space-6); }
.kg-checklist h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.kg-checklist ul { padding-left: 1.3em; display: flex; flex-direction: column; gap: var(--space-1); color: var(--text-secondary); }
.kg-checklist ul ul { margin-top: var(--space-1); color: var(--text-muted); }

@media (max-width: 640px) {
  .kg-brand__sub { display: none; }
  /* On phones Learn, Practice and Editor live in the tab bar (.kg-tabbar). */
  .kg-header .kg-nav { display: none; }
  .kg-header .header__inner { height: 56px; }
  .kg-live-card { padding: var(--space-3); }
  .kg-bench__tabs > svg { display: none; }
}

/* The phone tab bar (src/ui/tabbar.ts): the sections at the bottom of the course and practice home pages. */
.kg-tabbar { display: none; }
@media (max-width: 640px) {
  .kg-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    height: calc(64px + env(safe-area-inset-bottom, 0px));
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--border);
  }
  .kg-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-muted); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
  .kg-tabbar__item.is-current { color: var(--accent); }
  .kg-tabbar__item:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; border-radius: var(--radius-sm); }
  body:has(.kg-tabbar) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body:has(.kg-tabbar) .auth-note { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

/* Keep wide tracings inside the bench: the canvas is sized from the bench's width, never the other way round. */
.ws-bench__step:not([hidden]) { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.kg-bench, .kg-live-card, .kg-live, .kg-paper, .kg-bench__tabs { min-width: 0; max-width: 100%; }
.kg-bench__tabs .kg-seg { min-width: 0; }
.kg-bench { justify-self: stretch; margin-inline: auto; }
/* On a desktop the widget sits at the top left of the bench and its paper starts at the card's left edge. */
@media (min-width: 960px) {
  .ws-bench__step--interactive:not([hidden]) { place-items: start; padding-top: var(--space-6); }
  .ws-bench__step--interactive .kg-bench { margin-inline: 0; }
}

/* One line on what a module covers, above its lessons. */
.kg-module__summary {
  margin: 0;
  padding: 0 var(--space-5) var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

/* The course's own progress, under the hero's lede. */
.kg-course-progress {
  margin-top: var(--space-4);
  max-width: 420px;
  display: grid;
  gap: var(--space-2);
}
.kg-course-progress .path__meta { margin: 0; }
.ws-modules + .path__section { margin-top: var(--space-8); }

/* Medzcool account (src/auth/account.ts) */
.account { display: inline-flex; align-items: center; gap: var(--space-2); }

/* The shared Medzcool account menu (src/ui/accountmenu.ts). */
.account-menu { position: relative; display: flex; }
.avatar { flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--text-on-accent); font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); cursor: pointer; }
.avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.account-menu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; display: flex; flex-direction: column; width: 264px; max-width: calc(100vw - 2 * var(--gutter)); padding: var(--space-2); background: var(--surface-raised); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text); font-size: var(--text-sm); text-align: left; }
.account-menu__who { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-1); }
.account-menu__who span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }
.account-menu__who .account-menu__plan { align-self: flex-start; margin-top: var(--space-2); padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.account-menu__item, .account-menu__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 40px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit; font-size: var(--text-sm); text-align: left; text-decoration: none; }
.account-menu__item { cursor: pointer; }
.account-menu__item:hover { background: var(--surface-hover); }
.account-menu__hint { color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
.account-menu__seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--surface-sunken); box-shadow: inset 0 0 0 1px var(--border); }
.account-menu__seg button { padding: 4px 10px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); font-weight: 600; cursor: pointer; }
.account-menu__seg button[aria-pressed="true"] { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-sm), 0 0 0 1px var(--border); }
.account-menu__rule { width: 100%; margin: var(--space-1) 0; border: 0; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .avatar { width: 36px; height: 36px; } }
.account:empty { display: none; }
.account__name { font-size: 0.8125rem; color: var(--text-muted, inherit); max-width: 12em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .account__name { display: none; } }

/* Sign-in screen over the app (src/auth/account.ts) */
/* Editor links show only while the signed-in user may use the editor (auth/account.ts). */
html:not([data-editor="open"]) .kg-editor-link { display: none; }
.auth-gate { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 16px; background: var(--auth-gate-bg, #f6f5f1); color: var(--auth-gate-fg, #1d1d1b); font-family: Inter, system-ui, -apple-system, sans-serif; }
.auth-gate__card { width: min(400px, 100%); text-align: center; }
.auth-gate__title { margin: 0 0 12px; font-size: 28px; font-weight: 700; letter-spacing: -0.01em; }
.auth-gate__title::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 12px; background: #e0574f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12h4l2-5 4 10 2-5h8'/%3E%3C/svg%3E") center / 24px no-repeat; }
.auth-gate__text { margin: 0 0 24px; font-size: 15px; line-height: 1.5; opacity: .75; }
.auth-gate__actions { display: flex; flex-direction: column; gap: 10px; }
.auth-gate__btn { display: block; padding: 11px 16px; border-radius: 10px; border: 1px solid rgba(0,0,0,.14); background: transparent; color: inherit; font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; }
.auth-gate__btn--primary { background: #e0574f; border-color: #e0574f; color: #fff; }
.auth-gate__btn:focus-visible { outline: 2px solid #2f6fed; outline-offset: 2px; }
@media (prefers-color-scheme: dark) { .auth-gate { --auth-gate-bg: #161614; --auth-gate-fg: #ecebe6; } .auth-gate__btn { border-color: rgba(255,255,255,.18); } }
:root[data-theme="dark"] .auth-gate { --auth-gate-bg: #161614; --auth-gate-fg: #ecebe6; }
:root[data-theme="light"] .auth-gate { --auth-gate-bg: #f6f5f1; --auth-gate-fg: #1d1d1b; }

/* One-time note for owners of the old app (auth/account.ts showOwnerNote) */
.auth-note { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000; display: flex; align-items: center; gap: 8px; max-width: 720px; margin: 0 auto; padding: 10px 10px 10px 16px; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; background: var(--auth-gate-bg, #f6f5f1); color: var(--auth-gate-fg, #1d1d1b); box-shadow: 0 8px 24px rgba(0,0,0,.12); font-family: Inter, system-ui, -apple-system, sans-serif; }
.auth-note__text { flex: 1; margin: 0; font-size: 14px; line-height: 1.45; opacity: .85; }
.auth-note__text strong { opacity: 1; }
.auth-note__btn { flex: none; padding: 7px 10px; border-radius: 8px; border: 1px solid rgba(0,0,0,.14); background: transparent; color: inherit; font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer; }
.auth-note__btn:focus-visible { outline: 2px solid #2f6fed; outline-offset: 2px; }
@media (max-width: 640px) { .auth-note { flex-wrap: wrap; } .auth-note__text { flex-basis: 100%; } }
@media (prefers-color-scheme: dark) { .auth-note { --auth-gate-bg: #161614; --auth-gate-fg: #ecebe6; border-color: rgba(255,255,255,.18); } .auth-note__btn { border-color: rgba(255,255,255,.18); } }
:root[data-theme="dark"] .auth-note { --auth-gate-bg: #161614; --auth-gate-fg: #ecebe6; border-color: rgba(255,255,255,.18); }
:root[data-theme="light"] .auth-note { --auth-gate-bg: #f6f5f1; --auth-gate-fg: #1d1d1b; border-color: rgba(0,0,0,.12); }

.ws-guide__head[hidden] {
  display: none;
}

/* ===== Lesson widgets (src/learn/widgets.ts) ===== */
:root {
  --kg-plus: #c9463f;
  --kg-minus: #2a78d6;
  /* Kardiograph red: the positive electrode. */
  --kg-red: #e0574f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) { --kg-plus: #ef7070; --kg-minus: #5a9cf0; --kg-red: #e86a62; }
}
:root[data-theme='dark'] { --kg-plus: #ef7070; --kg-minus: #5a9cf0; --kg-red: #e86a62; }

.kg-widget { gap: var(--space-4); }
.kg-widget__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.kg-widget__title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; }
.kg-widget__sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); }
.kg-widget__foot { display: flex; flex-direction: column; gap: var(--space-2); }
.kg-widget__readout { margin: 0; min-height: 1.4em; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kg-widget__readout.is-reading { color: var(--text); font-weight: 500; }
@media (min-width: 960px) { .kg-widget__readout--tall { min-height: 4.5em; } }
/* Two chip groups on one line, wrapping as groups on a phone. */
.kg-chiprows { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
/* Hypertrophy criteria: each limit with the value measured on the beat; the ones met in red. */
.kg-crit { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.kg-crit li.is-met { color: var(--kg-red); }
.kg-crit li b { display: inline-block; width: 1.2em; }
.kg-widget__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.kg-widget__chips .chip b { color: var(--text); }
.kg-widget__chips .chip[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }
.kg-widget__chips .chip[aria-pressed='true'] b { color: inherit; }
.kg-widget__scrub { display: flex; align-items: center; gap: var(--space-3); }
.kg-widget__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.kg-widget input[type='range'] { flex: 1; width: 100%; accent-color: var(--accent); }
.kg-widget__slider { display: flex; flex-direction: column; gap: var(--space-1); }
.kg-widget__slider-head { display: flex; justify-content: space-between; font-size: var(--text-sm); color: var(--text-secondary); }
.kg-widget__slider-head b { color: var(--text); }
.kg-paper--beat { display: flex; justify-content: center; background: #fff; }
.kg-pair { display: flex; gap: var(--space-3); align-items: flex-start; }
.kg-pair > .kg-paper { flex: 1 1 0; min-width: 0; }
@media (max-width: 959px) { .kg-pair { gap: var(--space-2); } }

/* The myocyte */
.kg-cell-stack { display: flex; flex-direction: column; gap: var(--space-3); }
.kg-cell { width: 100%; height: auto; display: block; background: var(--surface-sunken); border-radius: var(--radius-sm); font-family: var(--font-sans); }
.kg-cell__membrane { fill: none; stroke: var(--text-secondary); stroke-width: 3; }
.kg-cell__note { fill: var(--text-muted); }
.kg-cell__plus { fill: var(--kg-plus); font-weight: 700; }
.kg-cell__plus-fill { fill: var(--kg-plus); }
.kg-cell__minus { fill: var(--kg-minus); font-weight: 700; }
.kg-cell__ion { stroke: var(--kg-plus); stroke-width: 2.5; fill: none; }
.kg-cell__front { stroke: var(--accent); stroke-width: 3; stroke-dasharray: 5 4; }
.kg-cell__lead { stroke: var(--border-strong); stroke-width: 2; stroke-dasharray: 4 4; }
.kg-cell__electrode { fill: var(--kg-red); }
.kg-cell-strip-wrap { border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 0 0 1px var(--border); line-height: 0; }
.kg-cell-strip { width: 100%; height: auto; display: block; font-family: var(--font-sans); }

/* The electrode dial, in the landing page's axis-explorer style */
.kg-dial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-5); align-items: center; }
.kg-dial__left { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.kg-dial__right { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.kg-dial__ring { width: 100%; display: flex; justify-content: center; }
.gx-hex { width: 100%; max-width: 300px; height: auto; font-family: var(--font-sans); font-size: 12px; font-weight: 700; fill: var(--text-secondary); touch-action: none; user-select: none; -webkit-user-select: none; }
.gx-hex__ring { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.gx-hex__line { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.gx-hex__vector path { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; fill: none; }
.gx-hex__vector .gx-hex__head { fill: var(--accent); stroke: none; }
.gx-hex__hub { fill: var(--text); }
.gx-hex text.is-here { fill: var(--kg-red); }
.kg-dial__heart { fill: var(--kg-plus); opacity: 0.3; }
.kg-dial__sight { stroke: var(--kg-red); stroke-width: 1.5; stroke-dasharray: 3 4; }
.kg-dial__electrode { cursor: grab; }
.kg-dial__electrode circle { fill: var(--kg-red); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }
.kg-dial__electrode text { fill: #fff; font-size: 22px; font-weight: 800; pointer-events: none; }
.gx-axis__readout { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); text-align: center; }
.gx-axis__readout b { color: var(--text); }
.gx-axis__lead { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gx-axis__lead figcaption { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.gx-axis__lead figcaption b { color: var(--text); }
.gx-axis__tag { font-weight: 600; color: var(--text); }

@media (max-width: 959px) {
  .kg-dial { grid-template-columns: minmax(0, 1fr); }
  .gx-hex { max-width: 220px; }
}

/* ===== Phones: the guide is a sheet over the bench ===== */
.ws-sheet { display: none; }

@media (max-width: 959px) {
  .ws:has(.ws-lesson:not(.is-reading)) {
    height: var(--app-h, 100dvh);
    min-height: 0;
    overflow: hidden;
  }

  .ws-lesson:not(.is-reading) {
    --sheet-handle-h: 60px;
    position: relative;
    display: block;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .ws-lesson:not(.is-reading) .ws-bench {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .ws-lesson:not(.is-reading) .ws-bench__step:not([hidden]) {
    align-items: start;
    min-height: 0;
    padding: var(--space-3) var(--space-3) calc(var(--sheet-handle-h) + var(--space-8));
  }

  .ws-lesson:not(.is-reading) .ws-guide {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: var(--sheet-y, 50%);
    bottom: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.14);
    transition: top var(--dur-slow) var(--ease-out);
  }

  .ws-lesson:not(.is-reading) .ws-guide.is-dragging { transition: none; }
  .ws-lesson:not(.is-reading) .ws-guide[data-sheet='peek'] { overflow: hidden; }

  .ws-lesson:not(.is-reading) .ws-sheet {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    height: var(--sheet-handle-h);
    padding: 8px var(--gutter) 10px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
  }

  .ws-sheet__bar { width: 40px; height: 5px; flex: none; border-radius: var(--radius-pill); background: var(--border-strong); }
  .ws-sheet__row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .ws-sheet__title { font-family: var(--font-display); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ws-sheet__hint { flex: none; font-size: var(--text-xs); color: var(--text-muted); }

  /* Inside the sheet the Learn and Try it headings scroll with the text; only the handle stays put (Mark, 2026-11-08). */
  .ws-lesson:not(.is-reading) .ws-guide__head { position: static; }
  .ws-lesson:not(.is-reading) .ws-guide__anchor { scroll-margin-top: var(--sheet-handle-h); }
  .ws-lesson:not(.is-reading) .ws-guide__title { display: none; }
}

/* Lesson 2 knobs: the QT against half the R–R, as two bars. */
.kg-bars { display: flex; flex-direction: column; gap: var(--space-1); }
.kg-bar { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) 4.5em; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); }
.kg-bar__name { font-weight: 600; color: var(--text); }
.kg-bar__track { position: relative; height: 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border); overflow: hidden; }
.kg-bar__fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-pill); transition: width var(--dur-fast) var(--ease-out); }
.kg-bar__fill--qt { background: rgb(105, 65, 161); }
.kg-bar__fill--half { background: var(--kg-red); }
.kg-bar .num { text-align: right; }
.kg-widget__chips .chip[data-state='long'] { border-color: var(--kg-red); color: var(--kg-red); }
.kg-widget__chips .chip[data-state='long'] b { color: inherit; }
/* A reading (a span, not a button): filled and borderless, so it cannot be mistaken for a choice. */
.kg-widget__chips span.chip { border-color: transparent; background: var(--surface-sunken); color: var(--text-muted); font-weight: 500; font-variant-numeric: tabular-nums; white-space: normal; height: auto; min-height: 36px; padding-block: 6px; line-height: 1.3; }
.kg-widget__chips span.chip:hover { border-color: transparent; }
.kg-widget__chips span.chip[data-state='long'] { border-color: transparent; background: color-mix(in srgb, var(--kg-red) 10%, transparent); color: var(--kg-red); }

/* Phone header, as in the lesson 1 mock-up: one light/dark icon, and the syllabus button at the right end (Mark, 2026-11-08). */
.ws-bar__phone { display: none; }
@media (max-width: 959px) {
  .ws-bar__desk { display: none !important; }
  .ws-icon-btn.ws-bar__phone { display: grid; }
  .ws-bar__end { gap: var(--space-1); }
  .ws-bar { padding-right: var(--space-2); }
}

/* Phone type: the sizes the lesson 1 mock-up used (Mark, 2026-11-08: the app's read too big). Desktop keeps its larger reading. */
@media (max-width: 959px) {
  .ws-learn { font-size: var(--text-md); line-height: 1.55; }
  .ws-goal__body { font-size: 0.95rem; line-height: 1.5; }
  .ws-guide__head { font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; }
  .ws-guide__jump { text-transform: inherit; letter-spacing: inherit; }
  .ws-foot__count { font-size: var(--text-sm); font-weight: 400; }
  .kg-widget__title { font-size: 1.05rem; }
  .ws-sheet__title { font-size: var(--text-md); }
}

@media (max-width: 959px) and (prefers-reduced-motion: reduce) {
  .ws-lesson:not(.is-reading) .ws-guide { transition: none; }
}

/* On a desktop a single beat's paper starts at the card's left edge instead of floating in the middle. */
@media (min-width: 960px) {
  .kg-paper--beat, .kg-live[data-layout='beat'] .kg-paper { justify-content: flex-start; }
}

/* The end of a lesson: one card on the bench, the guide looking back. */
.ws-bench__step--end:not([hidden]) { place-items: start; }
.ws-end { width: 100%; max-width: 560px; padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); }
.ws-end__check { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; margin-bottom: var(--space-2); }
.ws-end__title { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.15; }
.ws-end__tally { margin: 0; color: var(--text-secondary); }
.ws-end__next { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); display: flex; flex-direction: column; gap: 4px; }
.ws-end__next strong { font-family: var(--font-display); font-size: var(--text-lg); }
.ws-end__next p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.ws-end__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }
.ws-end__group:last-child { padding-bottom: var(--space-8); }
.ws-end__group .ws-goals { padding-block: var(--space-3) 0; }
.ws-end__step { margin: 0; padding: var(--space-6) var(--space-6) 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
@media (max-width: 959px) {
  .ws-end { padding: var(--space-5); }
  .ws-end__step { padding-inline: var(--gutter); }
}

/* Marks drawn over the paper in page millimetres (the graph-paper widgets). */
.kg-paper__marks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }

/* Lesson 4: Einthoven's triangle. */
.kg-tri { width: 100%; max-width: 300px; height: auto; font-family: var(--font-sans); font-size: 12px; font-weight: 700; fill: var(--text-secondary); user-select: none; -webkit-user-select: none; }
.kg-tri__side { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.kg-tri__side--faint { opacity: 0.45; }
.kg-tri__axis { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.kg-tri__ground { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 4 3; }
.kg-tri__lead path { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; fill: none; }
.kg-tri__lead .kg-tri__head { fill: var(--accent); stroke: none; }
.kg-tri__lead--thin path { stroke-width: 2.5; }
.kg-tri__pad circle { stroke: var(--surface); stroke-width: 2; }
.kg-tri__pos circle { fill: var(--kg-red); }
.kg-tri__neg circle { fill: var(--text-muted); }
.kg-tri__plain circle { fill: var(--surface-sunken); stroke: var(--border-strong); stroke-width: 1.5; }
.kg-tri__pad text { fill: #fff; font-size: 18px; font-weight: 800; pointer-events: none; }
.kg-tri__name { fill: var(--text); }
.kg-tri__name.is-here { fill: var(--accent); }

/* ===== Module 5, axis: the ring, small beats in a row, the chest seen from below ===== */
.kg-ring__shade path { fill: var(--accent); opacity: 0.13; }
.kg-ring__shade path.is-neg { fill: var(--text-muted); opacity: 0.07; }
.kg-ring__deg { font-size: 9px; font-weight: 600; fill: var(--text-muted); }
.kg-ring__lead-in { font-size: 10px; }
.kg-ring__quad { font-size: 9px; font-weight: 600; fill: var(--text-muted); letter-spacing: 0.02em; }
.kg-ring__quad.is-here { fill: var(--accent); }
.kg-ring__loop { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.7; }
.kg-ring__inst { fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: 0.6; }
.kg-ring__inst.is-now { stroke: var(--kg-red); stroke-width: 2.5; opacity: 1; }
.kg-ring__tip { fill: var(--kg-red); }
.kg-ring__now .kg-ring__inst.is-now { stroke: var(--kg-minus); stroke-width: 3.5; stroke-linecap: round; }
.kg-ring__insthead { fill: var(--kg-minus); }
.kg-ring__fan { fill: none; stroke: var(--kg-minus); stroke-width: 1; opacity: 0.22; }
.kg-ring__trail { fill: none; stroke: var(--kg-minus); stroke-width: 1.5; opacity: 0.55; }
.kg-loop__legend { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 14px; font-size: var(--text-xs, 12px); color: var(--text-secondary); }
.kg-loop__legend span { white-space: nowrap; }
.kg-loop__key { display: inline-block; width: 16px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.kg-loop__key--now { background: var(--kg-minus); }
.kg-loop__key--past { background: var(--kg-minus); opacity: 0.35; }
.kg-loop__key--mean { background: var(--accent); }
.kg-ring--faint .gx-hex__vector { opacity: 0.25; }
.kg-ring--small { max-width: 240px; }
.kg-ring__ghost { opacity: 0.25; }
.kg-ring__pvec path { stroke: var(--kg-red); stroke-width: 4; stroke-linecap: round; fill: none; }
.kg-ring__pvec .gx-hex__head { fill: var(--kg-red); stroke: none; }
.kg-ring__perp { stroke: var(--kg-red); stroke-width: 2; stroke-dasharray: 4 3; }
.kg-six { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); width: 100%; }
.kg-six__cell { border: 2px solid transparent; border-radius: 6px; padding: 2px; justify-content: center; }
.kg-six__cell.is-iso { border-color: var(--kg-red); }
.kg-paper[hidden] { display: none; }
.kg-dial__wide { width: 100%; }
.kg-hz { width: 100%; max-width: 320px; height: auto; font-family: var(--font-sans); font-size: 12px; font-weight: 700; user-select: none; -webkit-user-select: none; }
.kg-hz__torso { fill: var(--surface-sunken); stroke: var(--border-strong); stroke-width: 1; }
.kg-hz__front { fill: var(--accent); opacity: 0.13; }
.kg-hz__front.is-neg { fill: var(--text-muted); opacity: 0.08; }
.kg-hz__elec circle { fill: var(--kg-red); stroke: var(--surface); stroke-width: 2; }
.kg-hz__elec text { fill: #fff; font-size: 9px; font-weight: 800; pointer-events: none; }
.kg-hz__side { font-size: 10px; font-weight: 600; fill: var(--text-muted); }
@media (max-width: 959px) {
  .kg-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kg-hz { max-width: 240px; }
}