/* Battery Core — course design system.
 *
 * Colour roles. Every hue on the site means one thing, so a reader can tell a
 * module's tier before reading its label:
 *
 *   --accent  (mint)    the core learning path: primary parts, primary
 *                       actions, part numbers, the brand mark.
 *   --blue              optional depth: the "B" parts that go further into a
 *                       topic without being required to finish the chapter.
 *   --orange            the toolkit: authoring and maintenance tools that
 *                       build the course rather than teach it.
 *
 * Nothing else introduces a hue. Surfaces are the four navy steps below, and
 * text is --text or --muted. Standalone module pages get the same palette
 * through `module-theme.css`; new pages start from `page-template.html`.
 */

:root {
  color-scheme: dark;
  --background: #07131d;
  --surface: #0d1d29;
  --surface-raised: #122635;
  --surface-soft: #0a1822;
  --text: #edf6f8;
  --muted: #9fb3bd;
  --line: rgba(196, 224, 231, 0.16);
  --accent: #68e0bd;
  --accent-strong: #95f1d5;
  --blue: #71b7ff;
  --orange: #ffb067;

  /* Tier aliases. Components read these, never the raw hues, so a tier can be
     recoloured in one place. */
  --tier-core: var(--accent);
  --tier-deeper: var(--blue);
  --tier-toolkit: var(--orange);

  /* Illustration only. The mascot is a character, not a UI state, so this hue
     never marks a tier, a status, or a control — it appears in the drawn lemon
     and nowhere else. */
  --lemon: #ffd94a;

  --radius: 22px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 15% 0%, rgba(60, 141, 169, 0.16), transparent 34rem),
    radial-gradient(circle at 85% 12%, rgba(74, 210, 170, 0.10), transparent 30rem),
    var(--background);
  color: var(--text);
  line-height: 1.65;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  background: var(--accent);
  color: #03251d;
  font-weight: 800;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  padding: 1.35rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand-mark {
  display: grid;
  grid-template-columns: repeat(4, 6px);
  gap: 3px;
  align-items: end;
  width: 34px;
  height: 24px;
  padding: 4px;
  border: 1px solid rgba(104, 224, 189, 0.55);
  border-radius: 7px;
}

.brand-mark span {
  display: block;
  border-radius: 3px;
  background: var(--accent);
}

.brand-mark span:nth-child(1) { height: 35%; }
.brand-mark span:nth-child(2) { height: 55%; }
.brand-mark span:nth-child(3) { height: 75%; }
.brand-mark span:nth-child(4) { height: 100%; }

nav {
  display: flex;
  gap: 1.4rem;
}

nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
}

nav a:hover {
  color: var(--text);
}

nav a[aria-current="page"] {
  color: var(--accent);
}

main,
footer {
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
}

.hero {
  min-height: 660px;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: 6.5rem 0 7rem;
}

.eyebrow {
  margin: 0 0 0.8rem;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  line-height: 1.12;
}

h1 {
  max-width: 820px;
  margin: 0;
  font-size: clamp(3rem, 7vw, 5.8rem);
  letter-spacing: -0.065em;
}

h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -0.045em;
}

h3 {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: -0.025em;
}

.hero-summary {
  max-width: 700px;
  margin: 1.7rem 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.8rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 800;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  background: var(--accent);
  color: #04251e;
}

.button-primary:hover {
  background: var(--accent-strong);
}

.button-secondary {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
}

.button-secondary:hover {
  border-color: rgba(104, 224, 189, 0.55);
}

.hero-visual {
  position: relative;
  min-height: 420px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 34px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    var(--surface-soft);
  box-shadow: var(--shadow);
}

.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(18px);
}

.hero-visual::before {
  top: -130px;
  right: -100px;
  background: rgba(104, 224, 189, 0.13);
}

.hero-visual::after {
  bottom: -160px;
  left: -100px;
  background: rgba(113, 183, 255, 0.12);
}

.cell-shell {
  position: relative;
  z-index: 1;
  width: min(330px, 76%);
  height: 184px;
  display: flex;
  align-items: center;
  padding: 20px 28px;
  border: 2px solid rgba(224, 245, 247, 0.6);
  border-radius: 30px;
  background: rgba(3, 16, 24, 0.74);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.025);
}

.cell-shell::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -18px;
  width: 17px;
  height: 66px;
  transform: translateY(-50%);
  border-radius: 0 8px 8px 0;
  background: rgba(224, 245, 247, 0.58);
}

.cell-layers {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 0.38fr 1.35fr 0.4fr 1.35fr 0.38fr;
  gap: 7px;
}

.layer {
  border-radius: 7px;
}

.collector { background: linear-gradient(#d8e6eb, #8da5af); }
.electrode-negative { background: linear-gradient(#66747b, #27363e); }
.separator { background: linear-gradient(#f5f1cf, #b9b591); }
.electrode-positive { background: linear-gradient(#6fb69b, #225c4b); }

.terminal {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  transform: translateY(-50%);
  border-radius: 50%;
  color: #06131c;
  font-size: 1.5rem;
  font-weight: 900;
}

.terminal-negative {
  left: 9px;
  background: #bccbd1;
}

.terminal-positive {
  right: 9px;
  background: var(--accent);
}

.visual-caption {
  position: absolute;
  z-index: 2;
  bottom: 2.2rem;
  display: flex;
  gap: 0.7rem;
  align-items: center;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.visual-caption span:nth-child(even) {
  color: var(--accent);
}

.section {
  padding: 6rem 0;
  border-top: 1px solid var(--line);
}

.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 0.62fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.4rem;
}

.section-heading > p {
  margin: 0;
  color: var(--muted);
}

.section-heading.compact {
  grid-template-columns: 1fr;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.module-card {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.45rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015));
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.module-card.available:hover {
  transform: translateY(-5px);
  border-color: rgba(104, 224, 189, 0.45);
  background: linear-gradient(150deg, rgba(104, 224, 189, 0.08), rgba(255, 255, 255, 0.018));
}

.module-card.planned {
  opacity: 0.72;
}

.module-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4rem;
}

.part-number {
  color: var(--accent);
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.status {
  padding: 0.35rem 0.62rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.format {
  margin: 0 0 0.7rem;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.module-card p:not(.format):not(.launch-note),
.wide-card p,
.principle-grid p,
.closing p {
  color: var(--muted);
}

.module-card h3 + p {
  margin-bottom: 0;
}

.card-action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--accent);
  text-decoration: none;
  font-weight: 850;
}

.card-action:hover {
  color: var(--accent-strong);
}

.card-action.muted {
  color: var(--muted);
}

.launch-note {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.text-link {
  display: inline-flex;
  gap: 0.6rem;
  margin-top: 1.6rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 800;
}

.text-link-secondary {
  margin-left: 1.4rem;
  color: var(--blue);
}

.wide-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.wide-card p {
  max-width: 740px;
  margin-bottom: 0;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.principle-grid article {
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
}

.principle-number {
  display: block;
  margin-bottom: 2rem;
  color: var(--accent);
  font-weight: 900;
}

.closing {
  margin: 5rem 0;
  padding: clamp(2.5rem, 6vw, 5rem);
  border: 1px solid var(--line);
  border-radius: 30px;
  background:
    radial-gradient(circle at 90% 0%, rgba(104, 224, 189, 0.16), transparent 25rem),
    var(--surface-raised);
  box-shadow: var(--shadow);
}

.closing h2 {
  max-width: 760px;
}

.closing p:not(.eyebrow) {
  max-width: 690px;
  margin-bottom: 1.7rem;
}

.guide-hero {
  min-height: 620px;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  padding: 6rem 0;
}

.guide-hero h1 {
  font-size: clamp(3rem, 6vw, 5.2rem);
}

.chapter-status {
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0%, rgba(104, 224, 189, 0.14), transparent 18rem),
    var(--surface);
  box-shadow: var(--shadow);
}

.chapter-status > strong {
  display: block;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.04em;
}

.progress-track {
  height: 10px;
  margin: 1.5rem 0 1.8rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.progress-track span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--accent));
}

.chapter-status dl {
  margin: 0;
}

.chapter-status dl div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--line);
}

.chapter-status dt {
  color: var(--muted);
}

.chapter-status dd {
  margin: 0;
  text-align: right;
  font-weight: 800;
}

.question-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  padding: 0;
  list-style: none;
}

.question-path li {
  padding: 1.4rem;
  border-top: 1px solid var(--line);
}

.question-path span {
  color: var(--accent);
  font-weight: 900;
}

.question-path p {
  margin: 1.4rem 0 0;
  color: var(--muted);
}

.question-path strong {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--text);
}

.study-sequence {
  display: grid;
  gap: 1rem;
}

.study-step {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}

.study-step-deeper {
  border-color: rgba(113, 183, 255, 0.28);
  background: linear-gradient(150deg, rgba(113, 183, 255, 0.07), rgba(255, 255, 255, 0.012));
}

.study-step-number {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.7rem;
  border-right: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.018);
}

.study-step-number span {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.study-step-number strong {
  color: var(--accent);
  font-size: 2.5rem;
  line-height: 1;
}

.study-step-copy {
  padding: 1.7rem;
}

.study-step-copy > p:not(.format):not(.launch-note),
.study-prompts p {
  color: var(--muted);
}

.study-prompts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.study-prompts p {
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.12);
}

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

.checkpoint-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.checkpoint-grid article {
  min-height: 250px;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.checkpoint-grid p {
  color: var(--muted);
}

.guide-closing {
  margin-bottom: 0;
}

footer {
  min-height: 120px;
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  padding: 2rem 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}

footer div {
  display: flex;
  gap: 1rem;
}

footer a {
  color: var(--text);
  text-decoration: none;
}

@media (max-width: 920px) {
  .hero,
  .guide-hero {
    grid-template-columns: 1fr;
    padding-top: 4.5rem;
  }

  .hero-visual {
    min-height: 360px;
  }

  .module-grid,
  .principle-grid,
  .question-path {
    grid-template-columns: 1fr;
  }

  .module-card {
    min-height: 360px;
  }

  .section-heading {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
}

@media (max-width: 640px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  nav {
    width: 100%;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  h1 {
    font-size: clamp(2.8rem, 14vw, 4.2rem);
  }

  .hero {
    min-height: auto;
    padding-bottom: 5rem;
  }

  .hero-actions,
  .hero-actions .button {
    width: 100%;
  }

  .text-link-secondary {
    margin-left: 0;
  }

  .hero-visual {
    min-height: 320px;
  }

  .cell-shell {
    width: 82%;
    height: 155px;
  }

  .visual-caption {
    gap: 0.38rem;
    font-size: 0.72rem;
  }

  .section {
    padding: 4.5rem 0;
  }

  .wide-card {
    grid-template-columns: 1fr;
  }

  .study-step {
    grid-template-columns: 1fr;
  }

  .study-step-number {
    min-height: 110px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .study-prompts,
  .checkpoint-grid {
    grid-template-columns: 1fr;
  }

  .wide-card .button {
    width: 100%;
  }

  footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}

/* ===========================================================================
   Tier variants
   A part's tier is carried by one modifier class, and the modifier only ever
   swaps --tier. Nothing else about the component changes.
   =========================================================================== */

.study-step,
.module-card,
.checkpoint-grid article {
  --tier: var(--tier-core);
}

.study-step-deeper,
.module-card.deeper {
  --tier: var(--tier-deeper);
  border-color: color-mix(in srgb, var(--tier) 28%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tier) 7%, transparent), rgba(255, 255, 255, 0.012));
}

.study-step-toolkit,
.module-card.toolkit {
  --tier: var(--tier-toolkit);
  border-color: color-mix(in srgb, var(--tier) 28%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tier) 7%, transparent), rgba(255, 255, 255, 0.012));
}

.study-step-toolkit .study-step-number strong,
.study-step-deeper .study-step-number strong,
.module-card.toolkit .part-number,
.module-card.deeper .part-number,
.study-step-toolkit .card-action,
.module-card.toolkit .card-action {
  color: var(--tier);
}

.module-card.available.deeper:hover,
.module-card.available.toolkit:hover {
  border-color: color-mix(in srgb, var(--tier) 45%, transparent);
  background: linear-gradient(150deg, color-mix(in srgb, var(--tier) 11%, transparent), rgba(255, 255, 255, 0.018));
}

/* A legend that states the colour roles rather than leaving them to be
   inferred. */
.tier-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 0 0 2.4rem;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.85rem;
}

.tier-legend li {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.tier-legend li::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--tier, var(--tier-core));
}

.tier-legend li:nth-child(2) { --tier: var(--tier-deeper); }
.tier-legend li:nth-child(3) { --tier: var(--tier-toolkit); }

.tier-legend strong {
  color: var(--text);
  font-weight: 800;
}

/* ===========================================================================
   Standard page shell
   The hero every page other than the homepage and the chapter guide uses.
   `page-template.html` is the copy-ready version.
   =========================================================================== */

.page-hero {
  padding: 4.5rem 0 3rem;
}

.page-hero h1 {
  font-size: clamp(2.4rem, 5vw, 4rem);
}

.page-hero .lede {
  max-width: 760px;
  margin: 1.4rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.15rem);
}

.page-hero .eyebrow[data-tier="deeper"] { color: var(--tier-deeper); }
.page-hero .eyebrow[data-tier="toolkit"] { color: var(--tier-toolkit); }

.footer-note {
  max-width: 46ch;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===========================================================================
   Tool surface
   Controls for the interactive authoring tools. Compact by design: these sit
   beside a canvas, so they use the small type scale rather than the page one.
   =========================================================================== */

.tool-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 1rem;
  align-items: start;
}

.panel {
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}

.panel + .panel {
  margin-top: 1rem;
}

.panel > h2,
.panel > h3 {
  font-size: 1.05rem;
}

.panel-label {
  margin: 0 0 0.85rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 750;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.chip:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.chip:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.chip:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.chip-primary {
  border-color: transparent;
  background: var(--accent);
  color: #04251e;
}

.chip-primary:hover:not(:disabled) {
  background: var(--accent-strong);
}

.chip {
  --tier: var(--tier-core);
}

.chip[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--tier) 60%, transparent);
  background: color-mix(in srgb, var(--tier) 16%, transparent);
  color: var(--tier);
}

.chip-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.chip-ghost:hover:not(:disabled) {
  color: var(--text);
}

.field {
  display: block;
  margin-bottom: 0.9rem;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.field:last-child {
  margin-bottom: 0;
}

.field input[type="text"],
.field textarea {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.22);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

.field textarea {
  min-height: 9rem;
  resize: vertical;
}

/* Machine-readable payloads read better fixed-width; prose does not. */
.field textarea.monospace,
#cf-export-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
}

.field input[type="text"]:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 1px;
}

.field input:disabled {
  opacity: 0.5;
}

.field input[type="range"] {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
  accent-color: var(--accent);
}

.field-value {
  color: var(--accent);
}

.switch {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.switch input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.nudge-pad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.nudge-pad .chip {
  padding: 0.45rem 0;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
}

.pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.pill[data-state="warning"] {
  border-color: color-mix(in srgb, var(--orange) 45%, transparent);
  color: var(--orange);
}

.pill[data-state="warning"]::before {
  background: var(--orange);
}

.pill[data-state="idle"]::before {
  background: var(--muted);
}

.canvas-card {
  padding: 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
  touch-action: none;
  overflow: hidden;
}

.canvas-card svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 0%, rgba(104, 224, 189, 0.07), transparent 22rem),
    var(--surface);
}

.tool-statusbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.tool-statusbar .spacer {
  flex: 1 1 auto;
}

@media (max-width: 980px) {
  .tool-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .nudge-pad {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .tool-statusbar {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ===========================================================================
   Study coach
   The checkpoint questions, run as a loop: answer first, then compare against
   what a complete answer covers. Built from the tool-surface components above
   so it inherits their sizing rather than inventing a third control scale.
   =========================================================================== */

.coach {
  display: grid;
  gap: 1rem;
}

.coach-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

.coach-bar .spacer {
  flex: 1 1 auto;
}

.coach-part[data-tier="deeper"] {
  border-color: color-mix(in srgb, var(--tier-deeper) 45%, transparent);
  color: var(--tier-deeper);
}

.coach-part[data-tier="deeper"]::before {
  background: var(--tier-deeper);
}

.coach .progress-track {
  margin: 0;
}

.coach-card {
  padding: 1.5rem;
}

.coach-question {
  margin: 0 0 1.3rem;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
}

.coach-question:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
  border-radius: 8px;
}

.coach-card .field textarea::placeholder {
  color: var(--muted);
  opacity: 0.75;
}

.coach-drill-prompt {
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--text);
}

.coach-hint-list {
  display: grid;
  gap: 0.6rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}

.coach-hint-list li {
  padding: 0.85rem 1rem;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: var(--muted);
  font-size: 0.94rem;
}

.coach-actions {
  margin-top: 0.4rem;
}

.coach-answer {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}

.coach-points,
.coach-working {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.coach-points label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.coach-points label:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.coach-points input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

.coach-points input:checked + span {
  color: var(--text);
}

.coach-working li {
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88rem;
}

.coach-revisit {
  margin-top: 1.2rem;
}

.coach-revisit .card-action {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.coach-overall {
  color: var(--muted);
  font-size: 0.85rem;
}

.coach-tutor {
  margin-top: 1rem;
}

.coach-tutor-reply {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.16);
  color: var(--text);
  white-space: pre-wrap;
}

.coach-noscript {
  padding: 1.2rem 1.4rem;
  border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--orange) 7%, transparent);
  color: var(--muted);
}

@media (max-width: 640px) {
  .coach-actions .chip {
    flex: 1 1 auto;
  }
}

/* ===========================================================================
   The coach's mascot
   Drawn rather than embedded, so it stays sharp at any size, costs no request,
   and can change expression — `data-mood` swaps the brows and mouth. The only
   hue outside the role system, because a character is illustration, not state.
   =========================================================================== */

.coach-mascot {
  flex: 0 0 auto;
  width: clamp(56px, 9vw, 76px);
  height: auto;
  overflow: visible;
}

.lemon-body {
  fill: var(--lemon);
  stroke: #c9a12c;
  stroke-width: 1.2;
}

.lemon-leaf {
  fill: #4fbf7c;
  stroke: #2f8f56;
  stroke-width: 1.1;
  stroke-linejoin: round;
}

.lemon-stem {
  fill: none;
  stroke: #2f8f56;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.lemon-shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.5);
  stroke-width: 2.6;
  stroke-linecap: round;
}

.lemon-freckles circle {
  fill: #e0a93a;
}

.lemon-eyes ellipse {
  fill: #fbfdfd;
}

.lemon-pupils circle {
  fill: #1d3a2c;
}

.lemon-glints circle {
  fill: #ffffff;
}

.lemon-brows path {
  fill: none;
  stroke: #23313a;
  stroke-width: 2.6;
  stroke-linecap: round;
  transition: transform 220ms ease;
}

.lemon-mouth path {
  fill: none;
  stroke: #23313a;
  stroke-width: 2.4;
  stroke-linecap: round;
  display: none;
}

/* One mouth per mood. Toggled by display rather than by the CSS `d` property,
   which Firefox does not support. */
.coach-mascot[data-mood="idle"] .mouth-idle,
.coach-mascot[data-mood="thinking"] .mouth-flat,
.coach-mascot[data-mood="happy"] .mouth-happy,
.coach-mascot[data-mood="encouraging"] .mouth-soft {
  display: block;
}

.lemon-headset path,
.lemon-headset rect {
  fill: none;
  stroke: #23313a;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.lemon-headset rect {
  fill: #23313a;
}

.lemon-mic {
  fill: #23313a;
  stroke: none;
}

.lemon-sparkle path {
  fill: var(--accent);
  opacity: 0;
  transition: opacity 240ms ease;
}

/* Moods. Only the brows and mouth move — the face itself stays put, which is
   what keeps it reading as the same character. */
.coach-mascot[data-mood="thinking"] .brow-left {
  transform: translateY(-2.5px) rotate(-7deg);
  transform-origin: 25px 25px;
}

.coach-mascot[data-mood="happy"] .lemon-sparkle path {
  opacity: 1;
}

.coach-mascot[data-mood="happy"] .brow-left,
.coach-mascot[data-mood="happy"] .brow-right {
  transform: translateY(-1.5px);
}

.coach-mascot[data-mood="encouraging"] .brow-left {
  transform: rotate(-8deg);
  transform-origin: 25px 25px;
}

.coach-mascot[data-mood="encouraging"] .brow-right {
  transform: rotate(8deg);
  transform-origin: 40px 25px;
}

/* ===========================================================================
   Auto-checked question types
   =========================================================================== */

.coach-head {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  margin-bottom: 1.3rem;
}

.coach-head .format {
  margin-bottom: 0.45rem;
}

.coach-head .coach-question {
  margin-bottom: 0;
}

.coach-mode[data-state="idle"] {
  border-color: color-mix(in srgb, var(--blue) 40%, transparent);
  color: var(--blue);
}

.coach-mode[data-state="idle"]::before {
  background: var(--blue);
}

.coach-options,
.coach-order {
  display: grid;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.coach-options label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.coach-options label:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  color: var(--text);
}

.coach-options input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--accent);
}

.coach-options li[data-mark] label {
  cursor: default;
}

.coach-options li[data-mark="right"] label {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--text);
}

.coach-options li[data-mark="wrong"] label {
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
  background: color-mix(in srgb, var(--orange) 9%, transparent);
  color: var(--text);
}

.coach-why {
  margin: 0.5rem 0 0 2.5rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.coach-order {
  counter-reset: step;
}

.coach-order li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.7rem 0.6rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.14);
  color: var(--text);
}

.coach-order li::before {
  counter-increment: step;
  content: counter(step);
  flex: 0 0 auto;
  width: 22px;
  color: var(--accent);
  font-weight: 900;
  font-size: 0.85rem;
}

.coach-order-text {
  flex: 1 1 auto;
}

.coach-order-controls {
  display: flex;
  gap: 0.3rem;
}

.coach-order-controls .chip {
  min-height: 32px;
  padding: 0.2rem 0.6rem;
}

.coach-order li[data-mark="right"] {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.coach-order li[data-mark="wrong"] {
  border-color: color-mix(in srgb, var(--orange) 55%, transparent);
  background: color-mix(in srgb, var(--orange) 9%, transparent);
}

.coach-feedback:not(:empty) {
  margin-top: 1.4rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
}

.coach-verdict {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 800;
}

.coach-verdict[data-verdict="right"] {
  color: var(--accent);
}

.coach-verdict[data-verdict="wrong"],
.coach-verdict[data-verdict="warning"] {
  color: var(--orange);
}

@media (max-width: 560px) {
  .coach-head {
    gap: 0.8rem;
  }

  .coach-order li {
    flex-wrap: wrap;
  }
}

/* ===========================================================================
   Data table
   For the roadmap, where "part / concept / status / format" genuinely is a
   table and reads worse as anything else. Scrolls inside its own container so
   the page body never scrolls sideways on a phone.
   =========================================================================== */

.table-scroll {
  overflow-x: auto;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
}

.table-scroll table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.table-scroll th,
.table-scroll td {
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table-scroll thead th {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

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

.table-scroll tbody th {
  color: var(--tier, var(--tier-core));
  font-weight: 900;
  white-space: nowrap;
}

.table-scroll tr[data-tier="deeper"] th { --tier: var(--tier-deeper); }

.table-scroll td a {
  color: var(--accent);
  font-weight: 700;
}

.status-cell {
  color: var(--muted);
  white-space: nowrap;
}

.status-cell[data-state="available"] {
  color: var(--accent);
}


/* ===========================================================================
   Lesson pages
   The readable version of a module: the explanation, the equations, worked
   examples, the check-yourself questions and the references, on the page
   itself rather than behind a notebook launch. Structure:

     nav.breadcrumbs  →  .page-hero  →  .lesson (aside.lesson-toc + article.prose)
                      →  nav.lesson-pager

   `.lesson` carries the tier through `data-tier`, exactly like the hero
   eyebrow, so rules, callouts and links pick up the module's colour.
   =========================================================================== */

.breadcrumbs {
  padding-top: 1.4rem;
  font-size: 0.85rem;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.breadcrumbs li + li::before {
  content: "/";
  margin-right: 0.45rem;
  opacity: 0.5;
}

.breadcrumbs a {
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover,
.breadcrumbs [aria-current="page"] {
  color: var(--text);
}

.lesson-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.9rem;
}

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

.lesson {
  --tier: var(--tier-core);
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding: 0 0 5rem;
  border-top: 1px solid var(--line);
}

.lesson[data-tier="deeper"] { --tier: var(--tier-deeper); }

.lesson-toc {
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
  padding: 2.4rem 0 1rem;
}

.lesson-toc h2 {
  margin: 0 0 0.8rem;
  color: var(--tier);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.lesson-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.lesson-toc a {
  display: block;
  padding: 0.38rem 0 0.38rem 0.95rem;
  margin-left: -1px;
  border-left: 2px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
}

.lesson-toc a:hover {
  border-left-color: var(--tier);
  color: var(--text);
}

.lesson-toc .lesson-toc-run {
  display: inline-block;
  margin-top: 1.4rem;
  color: var(--tier);
  font-weight: 800;
  font-size: 0.88rem;
  text-decoration: none;
}

.prose {
  min-width: 0;
  max-width: 780px;
  padding-top: 2.4rem;
  font-size: 1.06rem;
  line-height: 1.75;
}

.prose > section + section {
  margin-top: 3.4rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}

.prose h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.7rem, 3.2vw, 2.35rem);
  scroll-margin-top: 1.5rem;
}

.prose h2 .section-number {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--tier);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.prose h3 {
  margin: 2.2rem 0 0.7rem;
  font-size: 1.28rem;
  scroll-margin-top: 1.5rem;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 1.15rem;
}

.prose li {
  margin: 0.35rem 0;
}

.prose li::marker {
  color: var(--tier);
}

.prose a {
  color: var(--tier);
  text-underline-offset: 3px;
}

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

.prose .button {
  text-decoration: none;
}

.prose .button-primary,
.prose .button-primary:hover {
  color: #04251e;
}

.prose code,
.prose kbd {
  padding: 0.1em 0.38em;
  border-radius: 6px;
  background: var(--surface-raised);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.88em;
}

.prose pre {
  margin: 1.2rem 0 1.6rem;
  padding: 1.05rem 1.25rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
  font-size: 0.88rem;
  line-height: 1.6;
}

.prose pre code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.prose .lede-inline {
  color: var(--muted);
  font-size: 1.12rem;
}

.table-wrap {
  margin: 1.3rem 0 1.7rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-soft);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  line-height: 1.5;
}

.prose caption {
  padding: 0.85rem 1rem 0;
  color: var(--muted);
  font-size: 0.85rem;
  text-align: left;
}

.prose th,
.prose td {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

/* Header cells keep their case: units such as kJ/mol and mΩ change meaning
   when they are upper-cased. */
.prose thead th {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 750;
  white-space: nowrap;
}

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

.prose .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.equation {
  margin: 1.4rem 0 1.6rem;
  padding: 1.15rem 1.3rem;
  overflow-x: auto;
  border-left: 3px solid var(--tier);
  border-radius: 0 14px 14px 0;
  background: var(--surface-soft);
  text-align: center;
}

math {
  font-family: "STIX Two Math", "Cambria Math", "Latin Modern Math", math, serif;
}

.equation math {
  font-size: 1.3em;
}

.callout {
  margin: 1.6rem 0;
  padding: 1.15rem 1.35rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
}

.callout > :last-child {
  margin-bottom: 0;
}

.callout-title {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--tier);
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.callout-limits .callout-title {
  color: var(--muted);
}

.sources {
  margin: 1.4rem 0 0;
  padding-left: 0.95rem;
  border-left: 2px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.sources a {
  color: var(--muted);
}

.answers details {
  margin: 0 0 0.75rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

.answers summary {
  padding: 0.95rem 1.2rem;
  cursor: pointer;
  font-weight: 750;
  line-height: 1.5;
}

.answers summary::marker {
  color: var(--tier);
}

.answers details[open] summary {
  border-bottom: 1px solid var(--line);
}

.answers details > div {
  padding: 1rem 1.2rem 0.2rem;
  color: var(--muted);
}

.answers details > div strong {
  color: var(--text);
}

.references {
  padding-left: 1.4rem;
  font-size: 0.95rem;
}

.references li {
  margin: 0.6rem 0;
  color: var(--muted);
}

.references cite {
  color: var(--text);
  font-style: italic;
}

/* An embedded interactive panel. The frame sizes itself to its content when
   the panel can report its height; the min-height is only the first paint. */
.panel-frame {
  margin: 1.6rem 0 1.8rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-soft);
}

.panel-frame iframe {
  display: block;
  width: 100%;
  min-height: 360px;
  border: 0;
}

.panel-frame figcaption {
  padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

/* A small calculator inside a lesson. Results are written into the HTML with
   the worked example, so the page reads correctly before any script runs. */
.calc {
  margin: 1.6rem 0 1.8rem;
  padding: 1.3rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.calc-title,
.prose .calc-title {
  margin: 0 0 1rem;
  color: var(--tier);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.calc-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
}

.calc label {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
}

.calc input,
.calc select {
  width: 100%;
  min-height: 46px;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

.calc input:focus-visible,
.calc select:focus-visible {
  outline: 2px solid var(--tier);
  outline-offset: 1px;
}

.calc-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.1rem 0 0;
}

.calc-results div {
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: var(--surface-soft);
}

.calc-results dt {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.calc-results dd {
  margin: 0.15rem 0 0;
  color: var(--text);
  font-size: 1.35rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.calc-note,
.prose .calc-note {
  margin: 0.9rem 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

.calc-note[data-state="error"] {
  color: var(--text);
}

.calc-note[data-state="error"]::before {
  content: "⚠ ";
  color: var(--orange);
}

.lesson-pager {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  padding: 2.5rem 0 4rem;
  border-top: 1px solid var(--line);
}

.lesson-pager a {
  display: grid;
  gap: 0.25rem;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease;
}

.lesson-pager a:hover {
  border-color: rgba(104, 224, 189, 0.55);
  transform: translateY(-2px);
}

.lesson-pager span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lesson-pager strong {
  font-size: 1.05rem;
}

.lesson-pager .pager-next {
  grid-column: 2;
  text-align: right;
}

/* Glossary */
.glossary-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.glossary-index a {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.glossary-index a:hover {
  border-color: var(--tier);
  color: var(--text);
}

.glossary dl {
  margin: 0;
}

.glossary dt {
  margin-top: 2rem;
  font-size: 1.2rem;
  font-weight: 850;
  letter-spacing: -0.015em;
  scroll-margin-top: 1.5rem;
}

.glossary dd {
  margin: 0.45rem 0 0;
}

.glossary dd p {
  margin: 0 0 0.6rem;
}

.glossary .term-link {
  font-size: 0.9rem;
  font-weight: 750;
}

@media (max-width: 920px) {
  .lesson {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .lesson-toc {
    position: static;
    max-height: none;
    padding-bottom: 0;
  }

  /* On a narrow screen the contents become a compact set of chips instead of
     a full-height column the reader has to scroll past. */
  .lesson-toc ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    border-left: 0;
  }

  .lesson-toc a {
    margin-left: 0;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.82rem;
  }

  .lesson-toc a:hover {
    border-color: var(--tier);
  }

  .lesson-pager {
    grid-template-columns: 1fr;
  }

  .lesson-pager .pager-next {
    grid-column: 1;
  }
}

@media print {
  .site-header nav,
  .lesson-toc,
  .lesson-pager,
  .calc,
  .panel-frame {
    display: none;
  }

  .lesson {
    display: block;
  }
}


/* ===========================================================================
   Course discipline
   The structure a learner expects from a course platform: objectives before a
   lesson, a practice quiz and "mark as complete" after it, and a syllabus
   with item types, times and progress. Progress is kept by
   `course-progress.js` in the learner's own browser.
   =========================================================================== */

.objectives {
  margin: 0 0 2.6rem;
  padding: 1.3rem 1.45rem;
  border: 1px solid var(--line);
  border-top: 3px solid var(--tier, var(--tier-core));
  border-radius: 16px;
  background: var(--surface);
}

.objectives h2 {
  margin: 0 0 0.7rem;
  color: var(--tier, var(--tier-core));
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.objectives p {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.objectives ul {
  margin: 0;
  padding-left: 1.2rem;
}

.objectives li {
  margin: 0.3rem 0;
}

.objectives .prerequisite {
  margin: 0.9rem 0 0;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}

.complete-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.4rem 0 0;
  padding: 1.15rem 1.3rem;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.complete-bar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.complete-bar .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.complete-button {
  min-height: 46px;
  padding: 0.65rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.complete-button:hover {
  border-color: var(--accent);
}

.complete-button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.complete-button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--accent);
  color: #04251e;
}

.complete-bar .button {
  min-height: 46px;
}

/* Course overview */
.course-about {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
  gap: 1.2rem;
  align-items: start;
}

.course-about > div,
.course-facts {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.course-about h3 {
  margin-bottom: 0.9rem;
  font-size: 1.15rem;
}

.learn-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.learn-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted);
}

.learn-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 900;
}

.skill-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1.4rem 0 0;
  padding: 1.2rem 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.skill-chips li {
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 0.85rem;
  font-weight: 700;
}

.course-facts dl {
  display: grid;
  gap: 0.85rem;
  margin: 0;
}

.course-facts dl div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.8rem;
}

.course-facts dt {
  color: var(--muted);
  font-size: 0.88rem;
}

.course-facts dd {
  margin: 0;
  font-weight: 750;
}

.course-progress {
  margin-top: 1.3rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

.course-progress p {
  margin: 0 0 0.6rem;
  font-weight: 800;
}

/* Syllabus items inside a study step */
.syllabus-items {
  display: grid;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.syllabus-items li {
  display: grid;
  grid-template-columns: 1.4rem 8.5rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: baseline;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  background: var(--surface-soft);
  font-size: 0.9rem;
}

.syllabus-items li::before {
  content: "○";
  color: var(--muted);
  font-weight: 900;
}

.syllabus-items li[data-done="true"]::before {
  content: "✓";
  color: var(--tier, var(--tier-core));
}

.syllabus-items .item-type {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.syllabus-items a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
}

.syllabus-items a:hover {
  color: var(--tier, var(--tier-core));
}

.syllabus-items .item-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.study-step-copy .complete-button {
  display: block;
  margin-top: 0.9rem;
  min-height: 40px;
  padding: 0.45rem 0.95rem;
  font-size: 0.88rem;
}

@media (max-width: 920px) {
  .course-about,
  .learn-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .syllabus-items li {
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  }

  .syllabus-items li::before { grid-column: 1; grid-row: 1 / span 2; }
  .syllabus-items .item-type { grid-column: 2; grid-row: 1; }
  .syllabus-items li > a,
  .syllabus-items li > .item-title { grid-column: 2; grid-row: 2; }
  .syllabus-items .item-time { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
}

.section > .syllabus-items {
  max-width: 760px;
  margin-bottom: 0.9rem;
}

.section > .complete-button {
  margin: 0 0 2rem;
}

.glossary {
  --tier: var(--tier-core);
  padding-top: 2.5rem;
}

.glossary .prose {
  max-width: 820px;
  padding-top: 0;
}