/* Self-hosted so body copy renders in the same face on every OS. Named in --sans but never
   loaded, Inter silently fell through to whatever sans the system supplied. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/vendor/inter-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  color-scheme: light;
  --bg: #f5f7fa;
  --panel: #ffffff;
  --panel-soft: #f7f9fc;
  --panel-alt: #eef2f7;
  --line: #d6dce5;
  --line-strong: #bcc7d4;
  --text: #1b2733;
  --muted: #5a6b7b;
  --soft: #7d8b99;
  --accent: #14487f;
  --accent-hover: #0f3a68;
  --accent-soft: #e9f0f8;
  --accent-line: #b9cbe0;
  /* Status colours are named by meaning, not hue, so a chip and its matching graph node
     cannot drift apart. --accent-2 stays the danger role it already had. */
  --accent-2: #b3261e;
  --ok: #1a7f4b;
  --ok-soft: #e8f5ee;
  --ok-line: #9cc9b1;
  --plan: #5a5082;
  --plan-soft: #f6f5fb;
  --plan-line: #c0bad8;
  --warn: #8a5b12;
  --warn-soft: #fdf3e3;
  --warn-line: #e0b877;
  /* The one dark surface in the system: the live-course card, which has to outrank
     the white panels around it. --on-ink is the only text colour legible on it. */
  --ink: #142a42;
  --on-ink: #eef3f8;
  /* Enterprise surfaces read as flat panels with a hairline border, so the one
     elevation in the system stays shallow and is used sparingly. */
  --shadow: 0 1px 2px rgba(21, 35, 51, 0.05), 0 6px 16px rgba(21, 35, 51, 0.06);
  --radius: 4px;
  --radius-sm: 3px;
  /* The application bar is pinned, so anything else that pins has to start below it.
     Kept as a token because .workout-title-row and lesson scroll anchoring both
     depend on this height and must not drift from it.

     Two tokens, not one. --topbar-min-h is what the bar is told to be; --topbar-h is what
     it turned out to be, which on a narrow screen is taller because the actions wrap onto
     a second line. The shell measures the bar and republishes --topbar-h, so the sticky
     lesson header and scroll anchoring follow the real bottom edge instead of tucking
     under it. Feeding the measurement back into min-height would ratchet the bar taller
     and never let it shrink again, so the minimum stays its own token. */
  --topbar-min-h: 56px;
  --topbar-h: var(--topbar-min-h);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* Display and reading were separate serif stacks. The interface is now one sans
     family throughout; the roles stay so size/weight can still tune per context. */
  --display: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --reading: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.55;
}

body::before {
  content: none;
}

/* A real application bar: full-bleed white, pinned, separated from the page by a
   hairline rather than by the page background showing through. The bar spans the
   viewport but its contents align to the same measure as the page below it. */
#topBarContainer {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  margin: 0;
  padding: 0 max(24px, calc((100vw - 980px) / 2));
  min-height: var(--topbar-min-h);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 12px;
}

.brand-title {
  color: var(--text);
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.brand-title-accent {
  color: var(--accent);
}

.brand-subtitle,
.topbar-copy,
.footer-note {
  color: var(--muted);
  font-size: 0.92rem;
}

.topbar-pill,
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
}

/* The gutter is the enclosing #product-wrap's job. Sizing this against 100vw as well
   subtracted a gutter the parent had already taken, so the lesson column was wider than
   the column it sits in and the whole learning view scrolled sideways on a phone. */
#wrap {
  width: min(720px, 100%);
  margin: 4px auto 48px;
}

.workout-shell {
  width: 100%;
  margin: 0 auto;
}

.activity-menu-heading {
  margin: 20px 0 16px;
}

.activity-menu-heading p {
  margin: 7px 0 0;
  color: var(--muted);
}

.activity-menu-tabs {
  display: flex;
  gap: 5px;
  margin-top: 14px;
}

.activity-menu-tabs button {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  background: var(--panel-soft);
  color: var(--muted);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.activity-menu-tabs button[aria-selected="true"] {
  border-color: var(--accent);
  background: var(--panel);
  color: var(--text);
  font-weight: 700;
}

.progress-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 18px 2px 12px;
  color: var(--muted);
  font-size: 0.76rem;
}

.progress-graph-legend span,
.progress-graph-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.progress-graph-legend span::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 14%, transparent);
  content: "";
}

.graph-status-complete { color: var(--ok); }
.graph-status-ready { color: var(--accent); }
.graph-status-review { color: var(--warn); }
.graph-status-locked { color: var(--soft); }
.graph-status-planned { color: var(--plan); }

.progress-graph-viewport {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  overscroll-behavior-x: contain;
}

.progress-graph-canvas {
  position: relative;
}

.progress-graph-edges {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.progress-graph-edges path {
  fill: none;
  stroke: var(--line-strong);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.progress-graph-edges marker path {
  fill: var(--line-strong);
  stroke: none;
}

.progress-graph-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 12px 10px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(21, 35, 51, 0.07), 0 1px 2px rgba(21, 35, 51, 0.08);
  color: var(--text);
  line-height: 1.2;
}

.progress-graph-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.progress-graph-status {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(20, 72, 127, 0.08);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.progress-graph-node button.progress-graph-status {
  border: 0;
  min-height: 0;
  margin: 0;
  line-height: 1.2;
}

.graph-status-complete.progress-graph-node { border-color: var(--ok-line); background: var(--ok-soft); }
.graph-status-ready.progress-graph-node { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: 0 8px 24px rgba(20, 72, 127, 0.12), 0 1px 2px rgba(20, 72, 127, 0.1); }
.graph-status-review.progress-graph-node { border-color: var(--warn-line); background: var(--warn-soft); }
.graph-status-locked.progress-graph-node { background: var(--panel-alt); box-shadow: none; color: var(--muted); opacity: 0.82; }
.graph-status-planned.progress-graph-node { border-style: dashed; border-color: var(--plan-line); background: var(--plan-soft); box-shadow: none; color: var(--plan); }
.graph-status-complete .progress-graph-status { color: var(--ok); }
.graph-status-ready .progress-graph-status { color: var(--accent); }
.graph-status-review .progress-graph-status { color: var(--warn); }
.graph-status-locked .progress-graph-status { color: var(--soft); }
.graph-status-planned .progress-graph-status { color: var(--plan); }
.graph-status-complete .progress-graph-status { background: rgba(26, 127, 75, 0.09); }
.graph-status-review .progress-graph-status { background: rgba(138, 91, 18, 0.09); }
.graph-status-locked .progress-graph-status { background: rgba(27, 45, 68, 0.08); }
.graph-status-planned .progress-graph-status { background: rgba(90, 80, 130, 0.08); }

.progress-graph-loading {
  display: grid;
  grid-template-columns: repeat(3, 9px);
  justify-content: center;
  gap: 8px;
  min-height: 220px;
  padding-top: 78px;
  color: var(--muted);
  text-align: center;
}

.progress-graph-loading span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  animation: graph-loading 900ms ease-in-out infinite alternate;
}

.progress-graph-loading span:nth-child(2) { animation-delay: 150ms; }
.progress-graph-loading span:nth-child(3) { animation-delay: 300ms; }

.progress-graph-loading p {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  font-size: 0.78rem;
}

@keyframes graph-loading {
  to { opacity: 0.3; transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .progress-graph-loading span { animation: none; }
}

.learning-map-error {
  margin: 18px 0;
  padding: 12px;
  border: 1px solid var(--warn-line);
  border-radius: var(--radius-sm);
  background: var(--warn-soft);
  color: var(--warn);
}

.course-orientation {
  display: grid;
  gap: 8px;
  margin-top: 24px;
}

.course-contract {
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.79rem;
}

.course-contract summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 700;
}

.course-contract dl {
  display: grid;
  gap: 10px;
  margin: 13px 0 2px;
}

.course-contract dl div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 10px;
}

.course-contract dt {
  color: var(--text);
  font-weight: 700;
}

.course-contract dd {
  margin: 0;
}

.source-grounding-note {
  padding: 0 2px;
  color: var(--muted);
  font-size: 0.78rem;
}

.source-grounding-note small {
  display: block;
}

.source-grounding-note small {
  margin-top: 3px;
}

.chapter-unpassed {
  margin-bottom: 24px;
  padding: 16px 18px;
  border-left: 3px solid var(--warn-line);
  border-radius: 0 8px 8px 0;
  background: var(--warn-soft);
  color: var(--warn);
}

.chapter-unpassed p {
  margin: 6px 0 0;
  font-size: 0.9rem;
}

.lesson-sources {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
}

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

.lesson-sources ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

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

.beta-feedback {
  margin-top: 28px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
}

.beta-feedback h2 {
  margin-top: 0;
  font-size: 1.1rem;
}

.beta-feedback fieldset {
  margin: 16px 0;
  border: 0;
  padding: 0;
}

.beta-feedback legend,
.feedback-comment {
  margin-bottom: 7px;
  color: var(--text);
  font-weight: 700;
}

.beta-feedback fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-right: 18px;
}

.feedback-comment {
  display: block;
}

.feedback-comment span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 400;
}

.feedback-comment textarea {
  display: block;
  width: 100%;
  margin: 7px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  resize: vertical;
}

.beta-feedback-thanks p {
  margin-bottom: 0;
}

.activity-list {
  display: grid;
  gap: 12px;
}

.activity-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.activity-card:hover,
.activity-card:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.recommended-activity {
  border-color: var(--accent-line);
  box-shadow: inset 3px 0 0 var(--accent);
}

.activity-kind {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
}

.activity-title {
  grid-column: 1;
  font-size: 1.08rem;
  font-weight: 650;
}

.activity-context {
  grid-column: 1;
  color: var(--muted);
  font-size: 0.82rem;
}

.activity-reason {
  grid-column: 1;
  color: var(--text);
  font-size: 0.82rem;
  line-height: 1.4;
}

.activity-action {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  color: var(--soft);
  font-size: 1.15rem;
}

/* Pins below the application bar, not under it: this row carries the only exit from a
   stepped lesson, so it must never end up behind the bar. */
.workout-title-row {
  position: sticky;
  top: var(--topbar-h);
  z-index: 10;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 12px;
  padding: 9px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.workout-view {
  margin-top: 20px;
}

.workout-skill-title {
  margin: 0;
  font-size: 1.18rem;
  letter-spacing: -0.01em;
}

.activity-score {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 0.7rem;
}

.workout-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.history-link {
  padding: 5px 7px;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.74rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* minmax(0, 1fr), not the default auto track: an auto track refuses to shrink below the
   min-content of what it holds, so one wide lesson table pushed the track past the
   viewport and took the page's horizontal scroll with it. A 0 minimum lets the track
   follow the column, and each wide child scrolls inside its own box instead. */
.session-feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.session-entry {
  padding: 22px;
  scroll-margin-top: calc(var(--topbar-h) + 92px);
}

/* A stepped lesson is one surface: teaching, then the questions on that teaching, then the
   next step below it. The step marker is a position indicator rather than a heading that
   competes with the lesson title. */

/* The teaching stream is the one surface a learner reads rather than scans, so it is set a
   step larger than the surrounding UI with more leading. The font-family belongs on these
   containers rather than the prose inside them so that the 66ch measure resolves against
   the face the text is actually set in. */
.stream-opener,
.stream-step,
.stream-figures,
.step-figures {
  font-family: var(--reading);
  font-size: 1.0125rem;
}

.stream-opener .block-text p,
.stream-step .block-text p {
  line-height: 1.65;
}

.stream-opener {
  max-width: 66ch;
  margin-bottom: 2px;
}

.stream-step {
  max-width: 66ch;
  margin-top: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + 92px);
}

.stream-step:first-of-type {
  margin-top: 4px;
}

.stream-step-marker {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soft);
}

.stream-step-title {
  margin: 6px 0 12px;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.current-stream-step {
  padding: 22px 22px 2px;
  border: 1px solid var(--accent-line);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  background: var(--accent-soft);
}

.current-stream-step .stream-step-marker {
  color: var(--accent);
  font-weight: 700;
}

.completed-step {
  max-width: 66ch;
  margin: 16px 0;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
}

.completed-step > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.completed-step > summary::-webkit-details-marker {
  display: none;
}

.completed-step > summary:focus-visible {
  border-radius: 4px;
  outline: 3px solid rgba(20, 72, 127, 0.24);
  outline-offset: 2px;
}

.completed-step-number,
.completed-step-status {
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.completed-step-number {
  color: var(--soft);
}

.completed-step-title {
  overflow: hidden;
  font-size: 0.9rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.completed-step-status {
  color: var(--ok);
}

.completed-step-body {
  padding: 4px 16px 16px;
  border-top: 1px solid var(--line);
}

.completed-step-body .completed-stream-step {
  margin: 0;
  padding-top: 16px;
  border-top: 0;
}

/* Figures share the reading measure so a tall diagram does not tower over the prose it
   supports. They stay in the stream rather than on a cover, so the learner can scroll back
   to one while answering. */
.stream-figures,
.step-figures {
  max-width: 66ch;
}

.stream-figures {
  margin-top: 14px;
}

.stream-step .lesson-figure {
  margin-top: 16px;
}

/* Set apart because it is a different kind of reading: the idea being used once, rather
   than the idea being stated. */
.worked-example {
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: 4px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: var(--panel-soft);
}

.step-citations {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.76rem;
  line-height: 1.45;
}

.step-citations-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.step-citations ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step-citations a {
  color: var(--accent);
  text-underline-offset: 3px;
}

.step-citations-missing {
  color: var(--warn);
  font-family: var(--sans);
}

@media (max-width: 560px) {
  .step-citations,
  .step-citations ul {
    display: grid;
    width: 100%;
  }
}

.worked-example .block-label {
  margin-bottom: 6px;
}

.completed-details > summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}

.completed-details > summary::-webkit-details-marker {
  display: none;
}

.completed-summary-copy {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The body repeats the prompt in full, so the truncated preview is only useful collapsed. */
.completed-details[open] > summary .completed-summary-copy {
  visibility: hidden;
}

.completed-entry-body {
  margin-top: 17px;
}

.completed-entry {
  background: var(--panel-soft);
}

.completed-entry.entry-correct {
  border-top: 3px solid var(--ok-line);
}

.completed-entry.entry-incorrect {
  border-top: 3px solid var(--warn-line);
}

.result-badge {
  padding: 6px 9px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.entry-correct .result-badge {
  background: var(--ok-soft);
  color: var(--ok);
}

.entry-incorrect .result-badge {
  background: var(--warn-soft);
  color: var(--warn);
}

/* The body states the verdict beside the answer, so the pill is only useful collapsed. */
.completed-details[open] > summary .result-badge {
  visibility: hidden;
}

.submitted-answer {
  display: grid;
  gap: 4px;
  margin: 15px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}

.entry-correct .submitted-answer {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}

.entry-incorrect .submitted-answer {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.answer-verdict {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.entry-correct .answer-verdict {
  color: var(--ok);
}

.entry-incorrect .answer-verdict {
  color: var(--warn);
}

.answer-verdict-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 999px;
  color: #fff;
  font-size: 0.72rem;
}

.entry-correct .answer-verdict-mark {
  background: var(--ok-line);
}

.entry-incorrect .answer-verdict-mark {
  background: var(--warn-line);
}

.answer-verdict-note {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}

@keyframes answer-verdict-enter {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.submitted-answer.verdict-enter .answer-verdict {
  animation: answer-verdict-enter 200ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .submitted-answer.verdict-enter .answer-verdict {
    animation: none;
  }
}

.entry-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.entry-actions .primary-action {
  margin-top: 0;
}

.dev-fill-entry {
  border-color: var(--accent-line);
  background: #fff;
  color: var(--accent);
}

.submitted-answer-label {
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.submitted-answer strong {
  font-family: var(--sans);
  font-size: 0.88rem;
}

.entry-explanation {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.path-progress {
  display: flex;
  gap: 3px;
  width: 100%;
  height: 3px;
  margin: 0 auto 14px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-alt);
}

.path-segment {
  flex: 1;
  height: 3px;
  min-width: 2px;
  border-radius: 999px;
  background: var(--line);
}

.curriculum-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.path-segment.complete {
  background: var(--accent);
}

.path-segment.current {
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(20, 72, 127, 0.12);
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.lesson-card {
  padding: 26px;
}

.question-number {
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.question-copy {
  margin: 24px 0 18px;
  font-size: 1.03rem;
}

.workout-footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  margin-top: 13px;
  color: var(--muted);
  font-size: 0.86rem;
}

.dev-toolbar {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr);
  gap: 9px 14px;
  align-items: center;
  margin-bottom: 14px;
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  padding: 11px 12px;
  background: var(--accent-soft);
}

.dev-toolbar strong {
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dev-toolbar select {
  min-width: 0;
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  padding: 7px 9px;
  background: #fff;
  color: var(--text);
  font: inherit;
}

.dev-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.dev-actions button {
  border: 1px solid var(--accent-line);
  border-radius: 3px;
  padding: 6px 9px;
  background: #fff;
  color: var(--accent);
  font-size: 0.76rem;
}

@media (max-width: 560px) {
  .dev-toolbar {
    grid-template-columns: 1fr;
  }

  .dev-actions {
    grid-column: 1;
  }
}

.reset-link {
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--soft);
  font-size: 0.76rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lesson-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
}

/* Labels are set in the UI sans rather than the mono face: monospace reads as code or
   as a typewriter affectation, and these are section labels, not data. */
.eyebrow,
.block-label {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.69rem;
  font-weight: 700;
  color: var(--soft);
}

h1 {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.intro-view h1,
.activity-menu-heading h1,
.workout-skill-title {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.lede {
  margin: 10px 0 0;
  max-width: 68ch;
  color: var(--muted);
}

.meta-stack {
  display: grid;
  gap: 8px;
  min-width: 190px;
  padding: 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--panel-soft);
}

.meta-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
}

.meta-row span {
  color: var(--soft);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.meta-row strong {
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

.block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.lesson-card > .block:first-of-type {
  margin-top: 14px;
}

.lesson-figures {
  display: grid;
  gap: 16px;
  margin-top: 18px;
}

.lesson-figure {
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel-soft);
}

/* The alt text a diagram shows before Mermaid replaces it, and the SVG afterwards. Both
   are centred so the swap does not move the page under a reader. */
.mermaid-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  color: var(--ink-soft, var(--muted));
  font-size: 0.94rem;
  line-height: 1.5;
  text-align: center;
}

.mermaid-figure[data-mermaid-state="drawn"] {
  color: inherit;
  text-align: initial;
}

.mermaid-figure svg {
  max-width: 100%;
  height: auto;
}

.lesson-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.lesson-figure figcaption {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

/* Lesson prose is authored per course, so the container cannot assume every token fits.
   One long identifier or unspaced string would otherwise paint past the column and give
   the whole page a horizontal scroll on a phone; break-word only acts on words that have
   no other way to fit, so ordinary prose wraps exactly as before. */
.block-text {
  margin-top: 8px;
  overflow-wrap: break-word;
}

.block-text p {
  margin: 0 0 0.85rem;
}

.block-text p:last-child,
.block-text ul:last-child,
.block-text ol:last-child,
.block-text pre:last-child,
.block-text blockquote:last-child,
.block-text .markdown-table-wrap:last-child {
  margin-bottom: 0;
}

.block-text h2,
.block-text h3,
.block-text h4,
.block-text h5,
.block-text h6 {
  margin: 1.4rem 0 0.55rem;
  line-height: 1.25;
}

.block-text h2:first-child,
.block-text h3:first-child,
.block-text h4:first-child,
.block-text h5:first-child,
.block-text h6:first-child {
  margin-top: 0;
}

.block-text h2 { font-size: 1.35rem; }
.block-text h3 { font-size: 1.16rem; }
.block-text h4 { font-size: 1.02rem; }
.block-text h5,
.block-text h6 { font-size: 0.94rem; }

.block-text ul,
.block-text ol {
  margin: 0 0 0.85rem 1.15rem;
  padding: 0;
}

.block-text li + li {
  margin-top: 0.25rem;
}

.block-text a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.block-text blockquote {
  margin: 0 0 0.85rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.block-text blockquote p:last-child {
  margin-bottom: 0;
}

.block-text hr {
  margin: 1.25rem 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.block-text code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--panel-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.05rem 0.25rem;
}

.block-text pre {
  margin: 0 0 0.85rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--ink);
  color: var(--on-ink);
  padding: 12px;
}

.block-text pre code {
  display: block;
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
}

.markdown-table-wrap {
  margin: 0 0 0.85rem;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
}

.markdown-table-wrap table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  background: #fff;
}

.markdown-table-wrap th,
.markdown-table-wrap td {
  padding: 9px 11px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.markdown-table-wrap th {
  background: var(--panel-soft);
  font-weight: 700;
}

.markdown-table-wrap th:last-child,
.markdown-table-wrap td:last-child {
  border-right: 0;
}

.markdown-table-wrap tbody tr:last-child td {
  border-bottom: 0;
}

.markdown-table-wrap .align-left { text-align: left; }
.markdown-table-wrap .align-center { text-align: center; }
.markdown-table-wrap .align-right { text-align: right; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--panel-soft);
  border-radius: 999px;
  padding: 9px 12px;
  font-family: var(--sans);
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--text);
}

.chip:hover,
button:hover {
  border-color: var(--line-strong);
  background: var(--panel-soft);
}

.controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.choice-answer {
  display: grid;
  gap: 9px;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

.choice-answer legend {
  margin-bottom: 7px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

.choice-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  cursor: pointer;
  line-height: 1.45;
}

.choice-option:hover,
.choice-option:has(input:checked) {
  border-color: var(--accent);
}

.choice-option input {
  margin: 3px 0 0;
  accent-color: var(--accent);
}

/* Completed choice questions keep every option visible and mark only the
   learner's pick: green for a correct answer, red for a miss. Specificity
   outranks the active `:has(input:checked)` accent above, and the inputs are
   disabled so the list reads as a review rather than a control. */
.completed-choices {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.completed-choices .choice-option.is-readonly {
  cursor: default;
}

.completed-choices .choice-option.is-readonly:hover {
  border-color: var(--line);
}

.completed-choices .choice-option.is-selected-correct,
.completed-choices .choice-option.is-selected-correct:has(input:checked),
.completed-choices .choice-option.is-selected-correct:hover {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}

.completed-choices .choice-option.is-selected-incorrect,
.completed-choices .choice-option.is-selected-incorrect:has(input:checked),
.completed-choices .choice-option.is-selected-incorrect:hover {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

/* The right option when the learner picked something else: outlined, not filled, so their own
   pick stays the loudest thing on the card. Nothing marked it before, and a miss left the
   answer looking like the options nobody chose. */
.completed-choices .choice-option.is-answer:not(.is-picked),
.completed-choices .choice-option.is-answer:not(.is-picked):hover {
  border-color: var(--ok-line);
}

.completed-choices .is-selected-correct input {
  accent-color: var(--ok);
}

.completed-choices .is-selected-incorrect input {
  accent-color: var(--warn);
}

.choice-pick {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.is-selected-correct .choice-pick,
.is-answer .choice-pick {
  color: var(--ok);
}

.is-selected-incorrect .choice-pick {
  color: var(--warn);
}

/* Only the answered view carries a rationale, so only it wraps. The live picker keeps its
   single row. */
.completed-choices .choice-option {
  flex-wrap: wrap;
}

/* The mistake an option represents, shown under it once the question is answered. It takes a
   full row of its own so the option text and the pick badge keep their line. */
.choice-why {
  flex: 1 0 100%;
  margin: 0.35rem 0 0;
  padding-left: 1.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted, #5a6572);
}

.is-answer .choice-why,
.is-selected-incorrect .choice-why {
  font-weight: 500;
}

.order-answer,
.text-answer {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  border: 0;
}

.order-answer legend,
.text-answer legend {
  margin-bottom: 1px;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soft);
}

.order-selection,
.order-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.order-selection {
  min-height: 48px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
}

.order-selection p {
  margin: 3px;
  color: var(--soft);
  font-size: 0.84rem;
}

.order-option,
.order-selected {
  min-height: 42px;
  text-align: left;
}

.order-option {
  flex: 1 1 180px;
  background: var(--panel);
}

.order-selected {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: rgba(20, 72, 127, 0.36);
  background: var(--accent-soft);
}

.order-selected span {
  display: inline-grid;
  width: 19px;
  height: 19px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.68rem;
}

.order-actions {
  display: flex;
  gap: 10px;
}

.order-actions .history-link {
  padding: 3px 0;
}

.text-answer-label {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.text-answer-input {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.code-completion-context {
  margin: 0;
  padding: 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--panel-soft);
  font-family: var(--mono);
  font-size: 0.84rem;
  line-height: 1.5;
}

.code-completion-gap {
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(20, 72, 127, 0.32);
  color: var(--warn-soft);
}

.code-answer-input,
.submitted-answer code {
  font-family: var(--mono);
}

.primary-action {
  margin-top: 14px;
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

/* Outranks the generic button:hover on specificity, so the filled button darkens
   instead of picking up the pale neutral hover meant for outline buttons. */
.primary-action:hover {
  border-color: var(--accent-hover);
  background: var(--accent-hover);
}

.secondary-action:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.lesson-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}

.lesson-actions .primary-action {
  margin-top: 0;
}

.selection-help-menu {
  position: fixed;
  z-index: 40;
  display: flex;
  gap: 4px;
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  padding: 4px;
  background: var(--panel);
  box-shadow: 0 8px 24px rgba(15, 25, 38, 0.16);
}

.selection-help-menu button {
  border: 0;
  border-radius: 3px;
  padding: 7px 9px;
  background: transparent;
  color: var(--accent);
  font-size: 0.72rem;
}

.selection-help-menu button:hover,
.selection-help-menu button:focus-visible {
  background: var(--accent-soft);
}

.lesson-help-drawer {
  position: fixed;
  z-index: 30;
  top: 0;
  right: 0;
  width: 360px;
  max-width: 100vw;
  height: 100dvh;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  padding: 22px;
  background: var(--panel);
  box-shadow: -10px 0 30px rgba(15, 25, 38, 0.12);
}

.lesson-help-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lesson-help-heading h2 {
  margin: 4px 0 0;
  font-size: 1.2rem;
  line-height: 1.25;
}

.lesson-help-close {
  flex: 0 0 auto;
  border: 0;
  padding: 1px 7px 4px;
  background: transparent;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 1.65rem;
  line-height: 1;
}

.lesson-help-quote {
  max-height: 24vh;
  margin: 20px 0 16px;
  overflow-y: auto;
  border-left: 3px solid var(--accent-line);
  padding: 8px 0 8px 12px;
  color: var(--muted);
  font-size: 0.9rem;
  white-space: pre-wrap;
}

.lesson-help-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.lesson-help-actions button {
  padding: 9px 8px;
  background: var(--panel-soft);
  font-size: 0.72rem;
}

.lesson-help-actions button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}

.lesson-help-status {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.lesson-help-answer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.lesson-help-retry {
  margin-top: 12px;
}

.secondary-action {
  border-color: var(--accent-line);
  color: var(--accent);
}

.assessment-note {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: var(--muted);
  font-size: 0.9rem;
  white-space: pre-wrap;
}

button {
  appearance: none;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.brand-link {
  color: inherit;
  text-decoration: none;
}

#topBarContainer {
  justify-content: space-between;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 16px;
}

.topbar-link {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 500;
}

.course-options {
  position: relative;
}

.course-options-toggle {
  display: inline-block;
  padding: 4px 0;
  cursor: pointer;
  list-style: none;
}

.course-options-toggle::-webkit-details-marker {
  display: none;
}

.course-options-toggle span {
  display: inline-block;
  margin-left: 3px;
  font-size: 0.9em;
  transition: transform 140ms ease;
}

.course-options[open] .course-options-toggle span {
  transform: rotate(180deg);
}

.course-options-toggle:focus-visible {
  outline: 3px solid rgba(20, 72, 127, 0.3);
  outline-offset: 3px;
  border-radius: 2px;
}

.course-options-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  right: 0;
  width: min(270px, calc(100vw - 32px));
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(21, 35, 51, 0.14);
}

.course-options-menu p {
  margin: 5px 0 15px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.course-switch {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
}

.course-switch-list {
  display: grid;
  gap: 4px;
}

.course-switch-link {
  color: inherit;
  font-size: 0.88rem;
  line-height: 1.5;
}

.course-danger-zone {
  display: grid;
  gap: 7px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.course-danger-zone strong {
  color: var(--accent-2);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.course-danger-action {
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-2);
  font: inherit;
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.course-danger-action:hover,
.course-danger-action:focus-visible {
  color: var(--accent-2);
}

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

.logout-button {
  padding: 4px 0;
  border: 0;
  background: transparent;
}

.auth-dialog {
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0;
  background: var(--panel);
  color: var(--text);
  box-shadow: 0 30px 90px rgba(15, 25, 38, 0.2);
}

.auth-dialog::backdrop {
  background: rgba(15, 25, 38, 0.45);
  backdrop-filter: blur(3px);
}

.auth-card {
  position: relative;
  display: grid;
  gap: 14px;
  padding: 30px;
}

.auth-card h2,
.auth-card p {
  margin: 0;
}

.auth-card > p:not(.form-status) {
  color: var(--muted);
}

.auth-card input {
  width: 100%;
}

.google-auth-button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 16px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.google-auth-button:hover {
  background: var(--panel-soft);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--line);
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-field {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
}

.auth-field input {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-weight: 400;
}

.auth-form .primary-action {
  margin-top: 2px;
}

.auth-switch {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* A button, because it acts on this page rather than going anywhere, but it has
   to read as the quiet secondary choice next to the filled submit. */
.auth-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.auth-link:hover {
  background: transparent;
  color: var(--accent-hover);
}

.auth-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  padding: 4px 8px;
  background: transparent;
  color: var(--muted);
  font-size: 1.35rem;
  cursor: pointer;
}

.public-site-footer {
  display: flex;
  justify-content: center;
  gap: 18px;
  padding: 28px 16px 8px;
  color: var(--muted);
  font-size: 0.86rem;
}

.public-site-footer a {
  color: inherit;
}

#product-wrap {
  width: min(980px, calc(100vw - 32px));
  margin: 12px auto 56px;
}

.product-state,
.profile-view {
  width: min(680px, 100%);
  margin: 48px auto;
}

.workspace-loading {
  display: grid;
  min-height: 240px;
  align-content: center;
  justify-items: center;
  gap: 14px;
  color: var(--muted);
  text-align: center;
}

.workspace-loading-mark {
  width: 48px;
  height: 48px;
  filter: drop-shadow(0 8px 14px rgba(20, 72, 127, 0.12));
  animation: workspace-mark 1.8s ease-in-out infinite;
}

@keyframes workspace-mark {
  0%, 100% { opacity: 0.82; transform: translateY(0) scale(1); }
  50% { opacity: 1; transform: translateY(-2px) scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .workspace-loading-mark { animation: none; }
}

.product-heading {
  margin-bottom: 24px;
}

.product-heading h1 {
  margin: 4px 0 6px;
  line-height: 1.2;
}

.product-heading p {
  color: var(--muted);
}

.eyebrow {
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.product-card,
.empty-state,
.authoring-wait {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}

.dashboard-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.dashboard-heading .secondary-action {
  flex: 0 0 auto;
}

.academy-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: end;
  margin: 18px 0 52px;
  padding: clamp(24px, 3vw, 36px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

.academy-hero-copy,
.academy-route {
  position: relative;
  z-index: 1;
}

.academy-hero h1 {
  max-width: 24ch;
  margin: 10px 0 12px;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.academy-hero p {
  max-width: 50ch;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
}

.academy-route {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.academy-route li {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.academy-route li:last-child {
  border-bottom: 1px solid var(--line);
}

.academy-route li > span {
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.academy-route strong,
.academy-route small {
  display: block;
}

.academy-route strong {
  color: var(--text);
  font-size: 0.96rem;
}

.academy-route small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.dashboard-heading h2,
.section-heading h2,
.academy-empty-state h2 {
  margin: 4px 0 6px;
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.curriculum-grid-featured {
  margin-bottom: 48px;
}

.academy-empty-state {
  margin: 0 0 48px;
  padding: 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.56);
}

.academy-empty-state p,
.section-heading p {
  max-width: 58ch;
  margin: 0;
  color: var(--muted);
}

.custom-paths {
  margin: 50px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.section-heading p {
  margin-bottom: 4px;
  font-size: 0.88rem;
}

.curriculum-onboarding {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
  gap: clamp(36px, 7vw, 88px);
  align-items: center;
  min-height: min(680px, calc(100vh - 120px));
  padding: clamp(30px, 6vw, 76px) clamp(0px, 2vw, 24px);
  animation: onboarding-enter 180ms ease-out both;
}

.onboarding-intro {
  position: relative;
  isolation: isolate;
}

.onboarding-intro::before {
  position: absolute;
  z-index: -1;
  top: -72px;
  left: -84px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  content: "";
}

.onboarding-intro h1 {
  max-width: 560px;
  margin: 14px 0 18px;
  font-family: var(--display);
  font-size: clamp(1.6rem, 2.6vw, 2rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.onboarding-intro > p {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.65;
}

.path-motif {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 168px;
  margin-top: 44px;
}

.path-motif::before {
  position: absolute;
  right: 8px;
  left: 8px;
  height: 1px;
  background: var(--accent-line);
  content: "";
}

.path-motif span {
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.path-motif span:last-child {
  width: 17px;
  height: 17px;
  background: var(--accent);
}

.curriculum-onboarding .product-card {
  border-color: rgba(27, 45, 68, 0.24);
  border-radius: 5px;
  padding: clamp(24px, 4vw, 38px);
  box-shadow: var(--shadow);
}

.form-field + .form-field {
  margin-top: 24px;
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-weight: 700;
}

.field-help {
  margin: 7px 0 0 !important;
  color: var(--soft) !important;
  font-size: 0.8rem;
}

.creator-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.creator-buttons .primary-action {
  flex: 0 0 auto;
  min-height: 46px;
  padding-inline: 18px;
  white-space: nowrap;
}

.curriculum-building {
  display: grid;
  min-height: 410px;
  align-content: center;
}

.curriculum-building h2 {
  margin: 12px 0 8px;
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.2;
}

.curriculum-building > p {
  max-width: 42ch;
  color: var(--muted);
}

.curriculum-building .secondary-action {
  margin-top: 14px;
}

.building-path {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
}

.building-path span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line);
  animation: building-pulse 1.25s ease-in-out infinite;
}

.building-path span:nth-child(2) { animation-delay: 140ms; }
.building-path span:nth-child(3) { animation-delay: 280ms; }

.curriculum-building[data-status="failed"] .building-path span {
  animation: none;
  background: var(--accent-2);
}

@keyframes onboarding-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes building-pulse {
  0%, 70%, 100% { background: var(--line); transform: scale(0.9); }
  35% { background: var(--accent); transform: scale(1.1); }
}

.curriculum-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.login-profile-form {
  margin-bottom: 22px;
}

.login-profile-form label,
.create-profile-form label {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.profile-help {
  min-height: 1.25em;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.inline-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.inline-form input,
.inline-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.inline-form input,
.inline-form select {
  padding: 10px 12px;
}

.inline-form .primary-action {
  margin-top: 0;
}

.form-status {
  min-height: 1.4em;
  margin: 10px 0 0;
  color: var(--accent-2) !important;
  font-size: 0.85rem;
}

.save-status {
  width: min(720px, calc(100vw - 32px));
  min-height: 20px;
  margin: 0 auto 4px;
  color: var(--soft);
  font-size: 0.75rem;
  text-align: right;
}

.save-status[data-status="error"] {
  color: var(--accent-2);
  font-weight: 700;
}

.save-retry {
  padding: 2px 5px;
  border-color: currentColor;
  color: inherit;
  font-size: 0.68rem;
}

.authoring-wait {
  border-style: dashed;
  color: var(--muted);
}

.authoring-wait p {
  margin: 5px 0 0;
}

.footer-note {
  margin-top: 14px;
}

/* Public certification catalog */

body.public-beta {
  background: var(--bg);
}

/* Marketing pages run to a wider measure than the app, so the bar's inner alignment
   follows suit and the wordmark stays flush with the content beneath it. */
body.public-beta #topBarContainer {
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
}

body.public-beta #product-wrap {
  width: min(1180px, calc(100vw - 48px));
}

.public-home {
  padding-top: 0;
}

/* Marketing navigation lives in the application bar, so the public page gets the
   section links a commercial site is expected to have without a second bar. */
.public-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-left: 14px;
}

.public-nav a {
  color: var(--muted);
  font-size: 0.855rem;
  font-weight: 500;
  text-decoration: none;
}

.public-nav a:hover {
  color: var(--accent);
}

/* Mobile section menu. Desktop keeps the inline links above; this disclosure owns
   the same five anchors below 760px, where the inline row disappears. It is hidden
   by construction on wide screens so the desktop bar never changes. */
.public-menu-button {
  display: none;
}

.public-menu {
  display: none;
}

/* The hero practice panel is one real answered item. On narrow screens its full
   proof (four options, explanations, citation) runs longer than the promise above
   it, so the body folds behind a native disclosure. Desktop hides the toggle and
   always shows the body, which keeps the current two-column proof exactly as is. */
.public-sample-details {
  margin: 0;
}

.public-sample-toggle {
  display: none;
}

/* Keep the study recommendation beside the promise, with room to read both. */
.public-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(32px, 4vw, 56px) 0 0;
  text-align: left;
}

.public-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 540px;
  margin: 0;
  padding-top: 24px;
}

.public-hero h1 {
  /* Wide enough to break into three lines rather than four: a headline that runs to a
     fourth line of two words reads as crowded before a visitor has read anything else. */
  max-width: 26ch;
  margin: 0 0 18px;
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.6vw, 3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.026em;
}

.public-hero-summary {
  max-width: 63ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.6;
}

.public-hero-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.public-hero-action {
  line-height: 1.25;
  margin: 0;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius);
  padding: 13px 24px;
  font-family: var(--sans);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.public-hero-action.primary-action {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
}


.public-cta-note {
  margin: 14px 0 0;
  color: var(--soft);
  font-size: 0.85rem;
}

/* The product panel is a browser frame around the two surfaces the course view
   actually opens on, so the hero shows the product instead of describing it. */
/* The panel is one real practice item: the question the course asks, the author's own
   line for the option taken and for the right one, and the source that settles it. */
.public-panel {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: 0 2px 4px rgba(21, 35, 51, 0.04), 0 22px 50px rgba(21, 35, 51, 0.1);
  text-align: left;
}

.public-sample-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-soft);
}

.public-sample-head b {
  font-size: 0.88rem;
  font-weight: 700;
}

.public-sample-head span {
  color: var(--soft);
  font-size: 0.79rem;
}

.public-sample-body {
  padding: 18px 18px 20px;
}

.public-sample-prompt {
  margin: 0;
  font-size: 0.93rem;
  font-weight: 600;
  line-height: 1.5;
}

.public-sample-options {
  display: grid;
  gap: 7px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.public-sample-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.public-sample-mark {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  color: var(--panel);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 15px;
  text-align: center;
}

.public-sample-option b {
  display: block;
  color: var(--muted);
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.45;
}

.public-sample-option span span,
.public-sample-option-body > span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

/* A tag in sentence case, not another uppercase badge: the page had 25 of those and the
   count is most of why it read as a specification rather than a product. */
.public-sample-option em {
  font-style: normal;
  font-size: 0.76rem;
  font-weight: 700;
}

.public-sample-option.is-chosen {
  border-color: var(--warn-line);
  background: var(--warn-soft);
}

.public-sample-option.is-chosen .public-sample-mark {
  border-color: var(--warn);
  background: var(--warn);
}

.public-sample-option.is-chosen em {
  color: var(--warn);
}

.public-sample-option.is-correct {
  border-color: var(--ok-line);
  background: var(--ok-soft);
}

.public-sample-option.is-correct .public-sample-mark {
  border-color: var(--ok);
  background: var(--ok);
}

.public-sample-option.is-correct em {
  color: var(--ok);
}

.public-sample-option.is-chosen b,
.public-sample-option.is-correct b {
  color: var(--text);
}

/* The citation is the differentiator, so it gets the affordance of the link it is. */
.public-sample-cite {
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.public-sample-cite b {
  display: block;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
}

.public-sample-cite q {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.public-sample-cite a {
  display: inline-block;
  margin-top: 7px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 650;
  text-decoration: none;
}

.public-sample-cite a:hover {
  text-decoration: underline;
}





.public-showcase-legend {
  margin: 18px 0 10px;
}

.public-showcase-map-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* The shell sizes the map to the slice it lays out, so the box only has to position it. */
.public-showcase-map {
  position: relative;
  margin: 0 auto;
}

.public-showcase-edges {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.public-showcase-edges path {
  fill: none;
  stroke: var(--line-strong);
  stroke-linecap: round;
  stroke-width: 2;
}

.public-showcase-edges marker path {
  fill: var(--line-strong);
  stroke: none;
}

.showcase-node {
  position: absolute;
  display: flex;
  width: 176px;
  height: 84px;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 11px 12px 10px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(21, 35, 51, 0.07), 0 1px 2px rgba(21, 35, 51, 0.08);
  color: var(--text);
  line-height: 1.2;
}

.showcase-node-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.showcase-node-status {
  width: fit-content;
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(20, 72, 127, 0.08);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.025em;
}

.showcase-node.is-complete { border-color: var(--ok-line); background: var(--ok-soft); }
.showcase-node.is-complete .showcase-node-status { background: rgba(26, 127, 75, 0.09); color: var(--ok); }

.showcase-node.is-ready { border-color: var(--accent-line); background: var(--accent-soft); box-shadow: 0 8px 24px rgba(20, 72, 127, 0.12), 0 1px 2px rgba(20, 72, 127, 0.1); }
.showcase-node.is-ready .showcase-node-status { color: var(--accent); }

.showcase-node.is-locked { background: var(--panel-alt); box-shadow: none; color: var(--muted); }
.showcase-node.is-locked .showcase-node-status { background: rgba(27, 45, 68, 0.08); color: var(--soft); }


/* The metrics strip is the one inverted band on the page. It sits directly under the
   product panel so the first thing after the interface is the count behind it. */
.public-proof {
  margin: clamp(40px, 5vw, 64px) calc(50% - 50vw) 0;
  padding: 40px max(24px, calc((100vw - 1180px) / 2));
  background: var(--ink);
  color: var(--on-ink);
}

.public-evidence-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  max-width: 1180px;
}

.public-evidence-facts > div {
  min-width: 0;
  border-left: 1px solid rgba(238, 243, 248, 0.18);
  padding: 0 24px;
}

.public-evidence-facts > div:first-child {
  border-left: 0;
  padding-left: 0;
}

.public-evidence-facts dt,
.public-evidence-facts dd {
  margin: 0;
}

.public-evidence-facts dt {
  color: #fff;
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.public-evidence-facts dd {
  margin-top: 7px;
  color: rgba(238, 243, 248, 0.74);
  font-family: var(--sans);
  font-size: 0.82rem;
  line-height: 1.45;
}

.public-evidence,
.public-catalog,
.public-pricing,
.public-faq {
  padding: clamp(48px, 5.5vw, 72px) 0 0;
}

.public-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  gap: 40px;
  align-items: end;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
}

/* Pricing and the FAQ are decisions, not reference material, so their headings centre
   over the full measure instead of splitting into the two-column reading layout. */
.public-section-heading.is-centred {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 12px;
  border-bottom: 0;
  text-align: center;
}

.public-section-heading h2,
.public-grounding h2 {
  max-width: 34ch;
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-weight: 750;
  line-height: 1.18;
  letter-spacing: -0.022em;
}

.public-section-heading.is-centred h2 {
  max-width: 24ch;
}

.public-section-heading > p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}

.public-section-heading.is-centred > p {
  max-width: 62ch;
  text-align: center;
}

/* Three numbered steps read as one idea with three parts. Three bordered cards, each
   with a miniature of the interface inside it, read as three more things to look at. */
.public-method-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: public-method;
}

.public-method-step {
  counter-increment: public-method;
}

.public-method-step::before {
  content: counter(public-method);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 800;
}

.public-method-step h3 {
  margin: 0 0 9px;
  font-family: var(--display);
  font-size: 1.04rem;
  font-weight: 700;
  letter-spacing: -0.014em;
}

.public-method-step p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* The map is a figure inside the method section now, not the first thing in the hero. */
.public-map-figure {
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 26px 26px 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.public-map-figure h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.018em;
}

.public-map-sub {
  max-width: 68ch;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}














.public-course-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.public-cert-card {
  display: flex;
  min-width: 0;
  min-height: 340px;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  background: var(--panel);
}

/* The shippable course is marked by a heavier top edge in the accent, not by a
   drop shadow: status should be legible in print and at a glance. */
.public-cert-card-live {
  border-top: 3px solid var(--accent);
}

.public-cert-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.public-cert-topline > span:first-child {
  color: var(--accent);
}

.public-course-status {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--ok-soft);
  color: var(--ok);
}

.public-course-status-planned {
  background: var(--panel-alt);
  color: var(--muted);
}

.public-cert-heading {
  margin-top: 20px;
}

.public-cert-heading small {
  color: var(--muted);
  font-size: 0.75rem;
}

.public-cert-card h3 {
  margin: 5px 0 10px;
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.018em;
}

.public-cert-card > p {
  max-width: 57ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
}

/* The card is a flex column and the titles and summaries run to different lengths, so
   the description takes the slack: the counts rule and the action then sit on the same
   line across the row instead of riding up with the shorter text. */
.public-cert-card > p:not(.public-cert-facts) {
  flex: 1 1 auto;
}

/* The counts were a four-cell table with uppercase MODULES / LESSONS / QUIZZES labels.
   As a sentence they carry the same figures and stop competing with the course title. */
.public-cert-facts {
  margin: 18px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.public-cert-facts strong {
  color: var(--text);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}



.public-cert-facts strong {
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 700;
}


.public-cert-progress {
  margin: auto 0 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--panel-soft);
}

.public-progress-copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 600;
}

.public-progress-copy small {
  color: var(--muted);
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  font-weight: 700;
}

.public-progress-track {
  height: 6px;
  margin-top: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--panel-alt);
  box-shadow: inset 0 0 0 1px var(--line);
}

.public-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.public-cert-card .primary-action {
  margin-top: 18px;
}

.public-cert-card-planned {
  border-style: dashed;
  background: var(--panel-soft);
  color: var(--muted);
}

.public-cert-card-planned > p {
  color: var(--soft);
}

.public-planned-note {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 16px;
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.85rem;
}

/* A compliance/assurance callout. Flat panel with a left accent rule, which is the
   convention learners already read as "this is a statement about the product". */

/* Sourcing states the rules on the left and the regulator disclosure on the right, so
   the claim and its limit are read together rather than a section apart. */
.public-grounding {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
  margin-top: clamp(48px, 5.5vw, 72px);
  border-top: 1px solid var(--line);
  padding-top: clamp(44px, 5vw, 64px);
}

.public-grounding-facts {
  display: grid;
  gap: 15px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.public-grounding-facts li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
}

.public-grounding-facts li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 0.66rem;
  font-weight: 800;
}

.public-disclosure {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  background: var(--panel);
}

.public-disclosure h3 {
  margin: 10px 0 0;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.014em;
}

.public-disclosure p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* This was set in the monospace face, uppercase and letter-spaced. A review date is a
   fact the visitor wants, not a machine label, so it reads as one sentence of prose. */
.public-disclosure-meta {
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  color: var(--soft);
  font-size: 0.86rem;
}

.public-disclosure-meta b {
  color: var(--text);
  font-weight: 650;
}

.public-plans {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  max-width: 840px;
  margin: 32px auto 0;
}

.public-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
  background: var(--panel);
}

.public-plan.is-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.public-plan-flag {
  position: absolute;
  top: -11px;
  left: 24px;
  border-radius: 999px;
  padding: 4px 11px;
  background: var(--accent);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.public-plan h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
}

.public-plan-price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 14px 0 6px;
}

.public-plan-price b {
  font-family: var(--display);
  font-size: 2.3rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.public-plan-price span {
  color: var(--muted);
  font-size: 0.9rem;
}

.public-plan-note {
  margin: 0;
  min-height: 40px;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.55;
}

.public-plan-facts {
  display: grid;
  gap: 11px;
  flex: 1;
  margin: 20px 0 24px;
  padding: 0;
  list-style: none;
}

.public-plan-facts li {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  gap: 11px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.public-plan-facts li::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 0.63rem;
  font-weight: 800;
}

.public-plan button {
  width: 100%;
}

.public-plan-terms {
  margin: 12px 0 0;
  color: var(--soft);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
}

.public-faq-list {
  max-width: 820px;
  margin: 28px auto 0;
  border-top: 1px solid var(--line);
}

.public-faq-item {
  border-bottom: 1px solid var(--line);
}

.public-faq-item summary {
  position: relative;
  padding: 16px 34px 16px 4px;
  font-family: var(--display);
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  list-style: none;
  cursor: pointer;
}

.public-faq-item summary::-webkit-details-marker {
  display: none;
}

.public-faq-item summary::after {
  content: "+";
  position: absolute;
  top: 13px;
  right: 6px;
  color: var(--soft);
  font-size: 1.2rem;
  font-weight: 400;
}

.public-faq-item[open] summary::after {
  content: "\2013";
}

.public-faq-item p {
  max-width: 70ch;
  margin: 0;
  padding: 0 34px 18px 4px;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}




.public-closing {
  margin: clamp(48px, 5.5vw, 72px) calc(50% - 50vw) 0;
  padding: clamp(48px, 5.5vw, 72px) max(24px, calc((100vw - 1180px) / 2));
  background: var(--ink);
  color: var(--on-ink);
  text-align: center;
}

.public-closing h2 {
  max-width: 20ch;
  margin: 0 auto 14px;
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.6vw, 2.05rem);
  font-weight: 780;
  line-height: 1.16;
  letter-spacing: -0.024em;
}

.public-closing p {
  max-width: 52ch;
  margin: 0 auto 26px;
  color: rgba(238, 243, 248, 0.78);
  font-size: 0.98rem;
  line-height: 1.6;
}

.public-closing button {
  border-color: var(--panel);
  background: var(--panel);
  color: var(--ink);
}

.public-site-footer {
  display: block;
  gap: 0;
  padding: clamp(40px, 4.5vw, 56px) 0 32px;
  color: var(--muted);
  font-size: 0.86rem;
}

.public-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 32px;
}

.public-footer-brand p {
  max-width: 34ch;
  margin: 12px 0 0;
  line-height: 1.6;
}

.public-footer-col h3 {
  margin: 0 0 14px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 700;
}

.public-footer-col a {
  display: block;
  margin-bottom: 9px;
  color: var(--muted);
  text-decoration: none;
}

.public-footer-col a:hover {
  color: var(--accent);
}

.public-footer-disclosure {
  max-width: 80ch;
  margin: 20px 0 0;
  color: var(--soft);
  font-size: 0.79rem;
  line-height: 1.6;
}

.public-footer-legal {
  margin: 18px 0 0;
  color: var(--soft);
  font-size: 0.79rem;
}


.public-certification-overview {
  padding-top: 18px;
}

.public-overview-back {
  display: inline-flex;
  margin: 6px 0 22px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.75rem;
  text-decoration: none;
}

.public-overview-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.36fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 3.5vw, 40px);
  background: var(--panel);
}

.public-overview-hero h1 {
  max-width: 22ch;
  margin: 8px 0 12px;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.8vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.018em;
}

.public-overview-hero > div > p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.public-overview-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 22px;
}

.public-overview-actions > span {
  color: var(--soft);
  font-family: var(--sans);
  font-size: 0.66rem;
}

.public-overview-facts {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--panel-soft);
}

.public-overview-facts dl {
  margin: 16px 0 0;
}

.public-overview-facts dl div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding: 11px 0;
  font-size: 0.78rem;
}

.public-overview-facts dt {
  color: var(--muted);
}

.public-overview-facts dd {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.public-overview-curriculum {
  padding-top: clamp(70px, 10vw, 112px);
}

.public-module-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 0;
  list-style: none;
}

.public-module-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 19px 4px;
}

.public-module-list li > span {
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
}

.public-module-list strong {
  display: block;
  font-size: 0.92rem;
}

.public-module-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

/* The overview keeps the original single-panel assurance callout: it is a footnote to a
   course page, not the homepage's two-column sourcing argument. */
.public-overview-grounding {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: clamp(70px, 10vw, 112px);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(22px, 3vw, 30px);
  background: var(--panel);
}

.public-grounding-mark {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--ok-soft);
  color: var(--ok);
  font-size: 0.85rem;
  font-weight: 800;
}

.public-overview-grounding h2 {
  max-width: 640px;
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.018em;
}

.public-overview-grounding p {
  max-width: 72ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

@media (max-width: 1040px) {
  .public-course-grid,
  .public-method-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .public-grounding {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .lesson-head {
    grid-template-columns: 1fr;
  }

  .course-options-toggle,
  .topbar-link {
    white-space: nowrap;
  }

  .meta-stack {
    min-width: 0;
  }

  .course-orientation {
    grid-template-columns: 1fr;
  }

  .completed-details > summary {
    grid-template-columns: 1fr auto;
  }

  .completed-step > summary {
    grid-template-columns: auto 1fr;
  }

  .completed-step-status {
    grid-column: 2;
  }

  .completed-summary-copy {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .curriculum-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .academy-hero {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 38px;
    padding: 30px 24px;
  }

  .academy-hero h1 {
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .public-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-height: 0;
    padding: 20px 0 0;
  }

  .public-overview-hero,
  .public-module-list {
    grid-template-columns: 1fr;
  }

  .public-hero-copy {
    padding-top: 0;
  }

  .public-hero-actions {
    gap: 4px;
  }

  .public-hero h1 {
    max-width: none;
    font-size: clamp(1.7rem, 6.4vw, 2.1rem);
  }

  .public-hero-actions,
  .public-hero-actions > * {
    width: 100%;
  }

  .public-hero-actions > * {
    justify-content: center;
    text-align: center;
  }

  .public-nav {
    display: none;
  }

  /* The menu button only exists on narrow screens, and only while the public
     home is showing (shell.js keeps it hidden elsewhere). A 44px minimum keeps
     the touch target honest without widening the bar into a second line. */
  .public-menu-button:not([hidden]) {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font-family: var(--sans);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
  }

  /* A momentary dropdown under the sticky bar, not a second bar. It opens on
     demand, closes on selection or Escape, and never permanently keeps pixels. */
  .public-menu:not([hidden]) {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    gap: 2px;
    border-bottom: 1px solid var(--line);
    padding: 8px max(24px, calc((100vw - 980px) / 2)) 12px;
    background: var(--panel);
    box-shadow: 0 16px 30px rgba(21, 35, 51, 0.12);
    z-index: 30;
  }

  .public-menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 4px;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
  }

  .public-menu a:hover {
    color: var(--accent);
  }

  .public-menu a:focus-visible,
  .public-menu-button:focus-visible,
  .public-sample-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* Anchored sections land below the sticky bar instead of under it. */
  #product,
  #certification-catalog,
  #sourcing,
  #pricing,
  #faq {
    scroll-margin-top: calc(var(--topbar-h) + 12px);
  }

  /* Collapsed by default on narrow screens (shell.js closes the disclosure at
     render); one tap opens the real answered item, explanations and source. */
  .public-sample-toggle {
    display: block;
    padding: 14px 18px;
    color: var(--accent);
    font-size: 0.87rem;
    font-weight: 700;
    cursor: pointer;
  }

  .public-section-heading,
  .public-evidence-facts,
  .public-method-steps,
  .public-plans,
  .public-footer-grid,
  .public-course-grid {
    grid-template-columns: 1fr;
  }

  /* Stacked, the inverted metrics strip needs its dividers to run across rather than
     down, or every figure keeps a rule hanging off its left edge. */
  .public-evidence-facts > div {
    border-left: 0;
    border-top: 1px solid rgba(238, 243, 248, 0.18);
    padding: 16px 0 0;
  }

  .public-evidence-facts > div:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .public-section-heading {
    gap: 15px;
  }

  .public-cert-card {
    min-height: 0;
    padding: 18px;
  }

  /* Shorter perceived page on narrow screens without touching desktop: tighter
     section rhythm, a slimmer proof strip, and compact cards and figures. */
  .public-course-grid {
    gap: 14px;
  }

  .public-proof {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .public-evidence,
  .public-catalog,
  .public-pricing,
  .public-faq {
    padding-top: 40px;
  }

  .public-grounding {
    margin-top: 40px;
    padding-top: 36px;
  }

  .public-map-figure {
    padding: 18px 16px;
  }

  .public-plans {
    gap: 16px;
  }

  .public-plan {
    padding: 22px 20px 24px;
  }

  .public-sample-head {
    padding: 12px 14px;
  }

  .public-sample-body {
    padding: 16px 14px 18px;
  }

  .public-plan-note {
    min-height: 0;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }

  .curriculum-onboarding {
    grid-template-columns: 1fr;
    gap: 34px;
    min-height: 0;
    padding: 34px 0 24px;
  }

  .onboarding-intro h1 {
    max-width: 640px;
    font-size: clamp(1.6rem, 6vw, 2rem);
  }

  .path-motif {
    margin-top: 28px;
  }

  .curriculum-onboarding .product-card {
    padding: 24px 20px;
  }

  .creator-buttons {
    width: 100%;
  }

  .creator-buttons .primary-action {
    flex: 1;
  }

  .lesson-help-drawer {
    width: 100vw;
    border-left: 0;
    padding: 20px;
  }

  .selection-help-menu {
    max-width: calc(100vw - 16px);
  }

  /* The toggle is not at the edge of the bar: sign-out sits to its right. A 270px menu
     measured back from the toggle therefore started off the left of a narrow screen, and
     the controls that ran off it could not be reached at all. Pin it to the bar instead.
     Only here -- on a wide screen the menu should stay visually attached to its toggle. */
  .course-options-menu {
    position: fixed;
    top: calc(var(--topbar-h) + 8px);
    right: 24px;
    left: auto;
    width: min(270px, calc(100vw - 48px));
  }
}

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

  .curriculum-onboarding,
  .building-path span {
    animation: none;
  }
}

/* Shared acquisition and membership block. Set from the tokens rather than its own
   palette: it sits between the overview hero and the module list, so a cool indigo panel
   with a sans heading read as a component from another product. */
.billing-offer { padding: clamp(20px, 4vw, 36px); margin: 20px 0; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--text); }
.billing-offer h2 { margin: 10px 0; font-family: var(--display); font-size: clamp(19px, 2vw, 23px); font-weight: 700; letter-spacing: -0.018em; }
.billing-offer p { max-width: 65ch; line-height: 1.6; }
.billing-offer a { color: var(--accent); }
.billing-offer button { margin: 8px 12px 8px 0; }
.billing-status { color: var(--accent-2); }
.billing-confirmation { padding: 16px 24px; background: var(--accent-soft); }
#billing-dialog { max-width: min(620px, 90vw); border: 0; border-radius: 5px; }
#billing-dialog::backdrop { background: #0f192699; }
[data-locked-lesson] { opacity: .8; }

/* The quiet route to the one-lesson sample, beside a primary button that is selling the
   whole course. It is deliberately not a second `.secondary-action`: two bordered buttons
   of equal weight put the smaller offer back on the same footing as the larger one. */
.sample-link {
  padding: 6px 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.87rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sample-link:hover {
  color: var(--ink);
}

.public-closing .sample-link {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 0;
  color: rgba(238, 243, 248, 0.78);
}

.public-closing .sample-link:hover {
  color: var(--on-ink);
}