/* === code stage (code-block component) === */
.code {
  margin: 0;
  border: 1px solid var(--stage-line);
  border-radius: var(--radius-stage);
  background: var(--stage-bg);
  color: var(--stage-ink);
  box-shadow: var(--shadow-stage);
  overflow: hidden;
}
.code--bleed { border-radius: 0; border-inline: 0; }

.code__caption {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-block: var(--s-1);
  padding-inline: var(--s-4) var(--s-1);
  background: var(--stage-bg-raised);
  border-bottom: 1px solid var(--stage-line);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--stage-muted);
}
.code__label { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.75rem; }
.code__marks { flex: 1; min-width: 0; }
.code__marks:empty { display: block; }
.code__copy {
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding-inline: var(--s-4);
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--stage-link);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.code__copy:hover { background: var(--stage-line); }
.code__copy:focus-visible, .code__scroll:focus-visible { outline: 3px solid var(--stage-focus); outline-offset: 2px; }
.code__scroll:focus-visible { outline-offset: -3px; }

.code__scroll { overflow-x: auto; padding-block: var(--s-4); }
.code__pre {
  margin: 0;
  font-family: var(--font-code);
  font-size: var(--text-code);
  line-height: var(--lh-code);
  font-variant-ligatures: none;
  tab-size: 4;
  white-space: pre;
}
.code__code { display: block; min-width: 100%; width: max-content; counter-reset: ln; font: inherit; --ln-w: 4ch; }
.code__code[data-digits="1"] { --ln-w: 1ch; }
.code__code[data-digits="2"] { --ln-w: 2ch; }
.code__code[data-digits="3"] { --ln-w: 3ch; }

.code .line { display: block; padding-inline-end: var(--s-5); }
.code .line::before {
  counter-increment: ln;
  content: counter(ln);
  display: inline-block;
  box-sizing: content-box;
  position: sticky;
  inset-inline-start: 0;
  width: var(--ln-w);
  margin-inline-end: var(--s-4);
  padding-inline: var(--s-4) var(--s-3);
  background: var(--stage-bg);
  color: var(--stage-linenum);
  text-align: end;
  user-select: none;
  -webkit-user-select: none;
}
.code .line.is-marked { background: var(--stage-mark); box-shadow: inset 4px 0 0 var(--stage-mark-edge); }
.code .line.is-marked::before { background: var(--stage-mark); }
.code .line.is-cursor { outline: 2px solid var(--stage-focus); outline-offset: -2px; }

.code .tok-keyword { color: var(--tok-keyword); }
.code .tok-string { color: var(--tok-string); }
.code .tok-number { color: var(--tok-number); }
.code .tok-comment { color: var(--tok-comment); font-style: italic; }
.code .tok-function { color: var(--tok-function); }
.code .tok-builtin { color: var(--tok-builtin); }
.code .tok-decorator { color: var(--tok-decorator); }

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

/* Inline code in prose */
:not(pre) > code {
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--font-code);
  font-size: 0.9em;
  font-variant-ligatures: none;
}

/* Home hero: the highlighter reads the stage once */
@keyframes read {
  0% { background-color: transparent; }
  30% { background-color: var(--attention-wash); }
  100% { background-color: transparent; }
}
.hero-stage .line { animation: read 1.1s var(--ease) both; }
.hero-stage .line:nth-child(1) { animation-delay: 0.3s; }
.hero-stage .line:nth-child(2) { animation-delay: 0.6s; }
.hero-stage .line:nth-child(3) { animation-delay: 0.9s; }
.hero-stage .line:nth-child(4) { animation-delay: 1.2s; }
.hero-stage .line:nth-child(5) { animation-delay: 1.5s; }
.hero-stage .line:nth-child(6) { animation-delay: 1.8s; }
.hero-stage .line:nth-child(7) { animation-delay: 2.1s; }
.hero-stage .line:nth-child(8) { animation-delay: 2.4s; }
.hero-stage .line:nth-child(n+9) { animation-delay: 2.7s; }

@media (forced-colors: active) {
  .code .line.is-marked { border-inline-start: 4px solid Highlight; box-shadow: none; }
  .code .line.is-cursor { outline-color: Highlight; }
}
/* === /code stage === */

/* === home === */
.home { display: grid; gap: var(--s-8); }
.hero { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 60rem) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--s-7); } }
.hero__text { display: grid; gap: var(--s-5); justify-items: start; }
.hero h1 { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; max-width: 14ch; }
.hl { text-decoration: underline; text-decoration-color: var(--accent-line); text-decoration-thickness: 0.14em; text-underline-offset: 0.1em; text-decoration-skip-ink: none; }
.hero__hint { color: var(--muted); font-size: var(--text-sm); }
.hero-stage { margin: 0; }
.welcome { font-size: var(--text-xl); }

/* === /home === */

/* === reading map === */
.map { display: grid; gap: var(--s-3); }
.map__row { display: grid; gap: var(--s-2) var(--s-4); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 48rem) { .map__row { grid-template-columns: minmax(10rem, 16rem) 1fr; } }
.map__label { font-weight: 700; }
.map__cells { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; margin: 0; }
.cell { position: relative; display: block; width: 1.125rem; height: 1.125rem; border: 2px solid var(--mark-none); border-radius: 5px; box-sizing: border-box; }
.cell--none { border-color: var(--line-strong); opacity: 0.55; }
.cell--full { background: var(--mark-right); border-color: var(--mark-right); }
.cell--partial { border-color: var(--mark-partial); background: linear-gradient(90deg, var(--mark-partial) 50%, transparent 50%); }
.cell--wrong { border-color: var(--mark-wrong); background: repeating-linear-gradient(135deg, var(--mark-wrong) 0 2px, transparent 2px 5px); }
.cell--unsure { border-color: var(--outcome-unknown); border-style: dashed; }
.cell.is-next { outline: 2px solid var(--accent-attention-text); outline-offset: 2px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: var(--text-sm); }
.legend li { display: inline-flex; align-items: center; gap: var(--s-2); }
.map-card { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: grid; gap: var(--s-4); }
.map-card h2 { font-size: var(--text-lg); }
/* === /reading map === */

/* === course & lesson lists === */
.level { display: grid; gap: var(--s-3); }
.level__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); }
.level__head .kicker { color: var(--accent-attention-text); }
.lessons { list-style: none; padding: 0; display: grid; gap: var(--s-2); max-width: 52rem; }
.lesson-link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-1) var(--s-4); min-height: var(--tap); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lesson-link:hover { border-color: var(--line-strong); transform: translateX(2px); }
.lesson-link__title { font-weight: 800; }
.lesson-link__status { color: var(--muted); font-size: var(--text-sm); text-align: end; }
.lesson-link .map__cells { grid-column: 1 / -1; }
.lesson-link .cell { width: 0.875rem; height: 0.875rem; border-radius: 4px; }
.lessons--questions .lesson-link { grid-template-columns: 1fr auto; }

.course-head { display: grid; gap: var(--s-3); }
/* === /course === */

/* === question === */
.question { display: grid; gap: var(--s-5); }
.question__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); }
.question__meta { display: grid; gap: var(--s-2); }
.question__title { font-size: var(--text-2xl); max-width: 46rem; font-weight: 800; }
.question__title--long { font-size: var(--text-lg); line-height: 1.4; font-weight: 700; }

.progress { display: flex; gap: 4px; }
.progress__seg { flex: none; width: 1.25rem; height: 6px; border-radius: 3px; background: var(--line); }
.progress__seg.is-done { background: var(--line-strong); }
.progress__seg.is-current { background: var(--accent-attention); box-shadow: 0 0 0 2px var(--accent-attention); }

.q-grid { display: grid; gap: var(--s-5); align-items: start; }
.q-stage { display: grid; gap: var(--s-4); min-width: 0; }
.q-side { display: grid; gap: var(--s-5); min-width: 0; }
@media (min-width: 64rem) {
  .q-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-6); }
  .q-stage { position: sticky; inset-block-start: var(--s-4); max-height: calc(100dvh - 2rem); overflow-y: auto; border-radius: var(--radius-stage); }
  .q-stage:focus-visible { outline-offset: 4px; }
}
@media (max-width: 47.99rem) {
  .q-stage .code { border-radius: var(--radius); }
}

.options { display: grid; gap: var(--s-2); border: 0; margin: 0; padding: 0; }
.option {
  position: relative; display: flex; align-items: flex-start; gap: var(--s-3);
  min-height: var(--tap); padding: var(--s-3) var(--s-4);
  border: 2px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.option:hover { border-color: var(--line-strong); background: var(--surface-2); }
.option__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.option__ring { display: none; }
.option__letter {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; margin-inline-end: var(--s-1);
  border-radius: 50%; background: var(--ink); color: var(--bg); font-weight: 800; font-size: var(--text-sm);
}
.option__text { min-width: 0; overflow-wrap: anywhere; padding-block: 0.15rem; }
.option:has(.option__input:checked) { border-color: var(--link); background: var(--surface); box-shadow: 0 0 0 1px var(--link); }
.option:has(.option__input:checked) .option__letter { background: var(--accent-attention); color: var(--on-accent-attention); }
.option:has(.option__input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.option:has(.option__input:disabled) { cursor: default; }
.option:has(.option__input:disabled):hover { border-color: var(--line); background: var(--surface); }
.option:has(.option__input:disabled:checked):hover { border-color: var(--link); }
.option--unsure { background: transparent; border-style: dashed; color: var(--muted); }
.option--unsure:has(.option__input:checked) { color: var(--ink); }
.option--unsure .option__text { padding-inline-start: 0.25rem; }
.options__divider { margin-block: var(--s-1); border-color: transparent; }

.hint { color: var(--muted); font-size: var(--text-sm); }
.hint--nudge { color: var(--ink); font-weight: 700; }
@media (max-width: 47.99rem) {
  .question .actions:not(.actions--row) { position: sticky; inset-block-end: 0; z-index: 5; padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
}

.feedback:empty { display: none; }
.feedback { display: grid; gap: var(--s-5); }
@keyframes slide-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.verdict { padding: var(--s-4) var(--s-5); border-radius: var(--radius); border: 2px solid currentColor; display: grid; gap: var(--s-3); color: var(--ink); animation: slide-in 240ms var(--ease) both; }
.verdict__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: var(--text-lg); }
.verdict__points { font-weight: 500; }
.verdict--correct { background: var(--outcome-right-bg); border-color: var(--outcome-right); }
.verdict--correct .verdict__title, .verdict--correct .fb__heading { color: var(--outcome-right); }
.verdict--partial { background: var(--outcome-partial-bg); border-color: var(--outcome-partial); }
.verdict--partial .verdict__title { color: var(--outcome-partial); }
.verdict--wrong { background: var(--outcome-wrong-bg); border-color: var(--outcome-wrong); }
.verdict--wrong .verdict__title { color: var(--outcome-wrong); }
.verdict--unsure { background: var(--surface); border-color: var(--line-strong); }
.verdict--unsure .verdict__title { color: var(--ink); }
.verdict--quiet { background: transparent; animation: none; }
.icon { flex: none; }

.fb__heading { font-size: var(--text-lg); }
.fb__letter { display: inline-block; padding: 0 var(--s-2); margin-inline-end: var(--s-1); border-radius: 999px; background: var(--ink); color: var(--bg); font-weight: 800; font-size: var(--text-sm); }
.q-next { align-items: center; }
.fb__answer { font-weight: 700; }
.chip--misc { background: var(--surface); border: 1px solid var(--line-strong); }
.partial { padding-inline-start: var(--s-3); border-inline-start: 4px solid var(--outcome-partial); display: grid; gap: var(--s-1); }
.partial__label { font-weight: 800; font-size: var(--text-sm); }

.others { display: grid; gap: var(--s-3); justify-items: start; }
.others__list { display: grid; gap: var(--s-2); width: 100%; }
.other { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.other > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); min-height: var(--tap); padding: var(--s-3) var(--s-4); cursor: pointer; }
.other > summary:focus-visible { outline-offset: -3px; }
.other__text { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.other__verdict { display: inline-flex; align-items: center; gap: var(--s-1); font-weight: 700; font-size: var(--text-sm); }
.other--partial .other__verdict { color: var(--outcome-partial); }
.other--wrong .other__verdict { color: var(--outcome-wrong); }
.other__body { display: grid; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }

.explanation { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); }
.attribution { color: var(--muted); font-size: var(--text-sm); }

.summary { display: grid; gap: var(--s-3); max-width: var(--measure); }
.again { padding-inline-start: 1.25rem; display: grid; gap: var(--s-2); }

@media (forced-colors: active) {
  .option:has(.option__input:checked) { border-width: 4px; }
  .verdict { border-width: 3px; }
  .cell { forced-color-adjust: none; }
}
/* === /question === */

/* === study sheet === */
.study-open { display: inline-flex; align-items: center; gap: var(--s-2); }
.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: none; height: min(85dvh, 100%); max-height: none;
  padding: 0; border: 0; border-radius: var(--radius-stage) var(--radius-stage) 0 0;
  background: var(--bg); color: var(--ink); box-shadow: var(--shadow-sheet);
  overflow: hidden;
}
.sheet[open] { display: flex; flex-direction: column; animation: sheet-up 240ms var(--ease) both; }
.sheet::backdrop { background: var(--scrim); }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 48rem) {
  .sheet { inset: 0 0 0 auto; width: min(30rem, 100%); height: 100dvh; border-radius: var(--radius-stage) 0 0 var(--radius-stage); }
  .sheet[open] { animation-name: sheet-in; }
}
.sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-3); border-bottom: 1px solid var(--line); }
.sheet__title { font-size: var(--text-xl); }
.sheet__body { overflow-y: auto; padding: var(--s-5); display: grid; gap: var(--s-5); align-content: start; }
.sheet__tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sheet__tabs button { min-height: 2.5rem; padding: 0 var(--s-3); border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink); font: inherit; font-weight: 600; font-size: var(--text-sm); cursor: pointer; }
.sheet__tabs button[aria-current="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.note { display: grid; gap: var(--s-3); }
.note h3 { font-size: var(--text-lg); }
.note__summary { font-size: var(--text-lg); color: var(--muted); }
.note-section { display: grid; gap: var(--s-3); }
.note-deeper { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.note-deeper > summary { min-height: var(--tap); display: flex; align-items: center; padding: var(--s-3) var(--s-4); cursor: pointer; font-weight: 700; }
.note-deeper > summary:focus-visible { outline-offset: -3px; }
.note-deeper__body { padding: 0 var(--s-4) var(--s-4); display: grid; gap: var(--s-3); }
.formula { margin: 0; padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--stage-bg); color: var(--stage-ink); font-family: var(--font-code); overflow-x: auto; white-space: pre; }
.draft-flag { display: inline-block; justify-self: start; padding: 0 var(--s-3); border-radius: 999px; background: var(--outcome-partial-bg); color: var(--outcome-partial); font-size: var(--text-sm); font-weight: 700; line-height: 1.9; }
/* === /study sheet === */

/* Reserved: step player (run the code line by line) sits under the code in .q-stage as .stage-tools */
.stage-tools { display: grid; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--stage-line); border-radius: var(--radius); background: var(--stage-bg-raised); color: var(--stage-ink); }
.stage-tools:empty { display: none; }

/* === step player === */
.code .line.is-active { background: var(--stage-bg-raised); box-shadow: inset 4px 0 0 var(--stage-link); }
.code .line.is-active::before { background: var(--stage-bg-raised); color: var(--stage-ink); }
.code .line.is-active.is-marked { box-shadow: inset 4px 0 0 var(--stage-link), inset 8px 0 0 var(--stage-mark-edge); }
.code .line.is-active::after { content: "  \25C0  ran"; color: var(--stage-link); font-family: var(--font-ui); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
.stage-tools__title { font-size: var(--text-lg); color: var(--stage-ink); }
.sp-hint { color: var(--stage-muted); }
.sp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.sp-controls .button--secondary { color: var(--stage-ink); border-color: var(--stage-muted); }
.sp-controls .button--secondary:hover { background: var(--stage-line); }
.sp-controls .button:disabled { opacity: 0.45; cursor: not-allowed; }
.sp-counter { margin-inline-start: auto; color: var(--stage-muted); font-size: var(--text-sm); }
.sp-now { font-weight: 700; font-size: var(--text-lg); line-height: 1.3; }
.sp-frame { color: var(--stage-muted); }
.sp-picker { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sp-picker .chip { background: transparent; color: var(--stage-ink); border: 1px solid var(--stage-muted); }
.sp-picker .chip[aria-pressed="true"] { background: var(--stage-ink); color: var(--stage-bg); }
.sp-vars { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sp-vars caption { text-align: start; color: var(--stage-muted); padding-block-end: var(--s-1); }
.sp-vars th, .sp-vars td { text-align: start; padding: var(--s-1) var(--s-2); border-block-end: 1px solid var(--stage-line); vertical-align: top; }
.sp-vars thead th { color: var(--stage-muted); font-weight: 700; }
.sp-vars tbody th { font-family: var(--font-code); font-weight: 600; }
.sp-vars td code { background: transparent; padding: 0; color: var(--stage-ink); font-size: 0.9375rem; overflow-wrap: anywhere; }
.sp-new, .sp-changed { background: var(--stage-mark); }
.sp-tag { margin-inline-start: var(--s-2); padding: 0 var(--s-2); border-radius: 999px; border: 1px solid var(--stage-mark-edge); color: var(--stage-ink); font-size: 0.75rem; font-weight: 700; }
.sp-h { font-size: var(--text-sm); color: var(--stage-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.sp-out { margin: 0; padding: var(--s-3); border-radius: var(--radius-sm); background: var(--stage-bg); border: 1px solid var(--stage-line); color: var(--stage-ink); font-family: var(--font-code); font-size: 0.9375rem; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 10rem; overflow: auto; }
.stage-tools :focus-visible { outline-color: var(--stage-focus); }
.stage-tools .muted { color: var(--stage-muted); }
@media (forced-colors: active) { .code .line.is-active { border-inline-start: 4px solid Highlight; box-shadow: none; } }
/* === /step player === */
.code .line.is-active.is-event::after { content: "  \25C0  event"; }
.sp-end { padding: var(--s-2) var(--s-3); border-inline-start: 4px solid var(--stage-mark-edge); background: var(--stage-mark); color: var(--stage-ink); font-weight: 600; }
.sp-end[hidden] { display: none; }
.sp-input { color: var(--stage-muted); }

.lesson-link__summary { grid-column: 1 / -1; color: var(--muted); font-size: var(--text-sm); }
.lesson-summary { max-width: 40rem; }
.sp-newout { background: var(--stage-mark); box-shadow: 0 0 0 2px var(--stage-mark); border-radius: 2px; }
.sp-vars td .sp-tag { white-space: nowrap; }

/* === navigation: continue card, header link, end of lesson === */
.continue-card { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); border-inline-start: 6px solid var(--accent-attention); }
.continue-card h2 { font-size: var(--text-lg); }
.continue-card p { color: var(--muted); }
.nav__continue:empty { display: none; }
.nav .nav__link--continue { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: var(--s-4); border-radius: 999px; background: var(--accent-attention); color: var(--on-accent-attention); font-weight: 800; font-size: 0.9375rem; text-decoration: none; }
.nav .nav__link--continue:hover { background: var(--accent-attention-hover); }
.lesson-next { display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); max-width: var(--measure); }
.lesson-next h3 { font-size: var(--text-base); }
.lesson-next ul { margin: 0; padding-inline-start: 1.25rem; display: grid; gap: var(--s-1); }
@media (max-width: 37.49rem) { .nav .nav__link--continue { padding-inline: var(--s-3); font-size: 0.875rem; } }
@media (forced-colors: active) { .nav .nav__link--continue { border: 1px solid ButtonText; } .continue-card, .lesson-next { border: 1px solid CanvasText; } }

/* === account screens (test mode) === */
.mock { display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--radius); background: var(--outcome-partial-bg); color: var(--ink); border: 2px dashed var(--outcome-partial); }
.mock__title { font-weight: 800; color: var(--outcome-partial); }
.mock__controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); font-size: var(--text-sm); }
.mock__check { display: inline-flex; align-items: center; gap: var(--s-2); }
.mock__select { min-height: 2.5rem; font: inherit; }
.account { max-width: var(--measure); }
.account__card { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.account__card h2 { font-size: var(--text-lg); }
.account__product { font-weight: 800; font-size: var(--text-lg); }
.account__status { min-height: 1.5em; color: var(--muted); }
.providers { display: grid; gap: var(--s-3); }
.provider-row { display: grid; gap: var(--s-1); }
.provider { justify-content: flex-start; width: 100%; }
.provider[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); cursor: not-allowed; border-style: dashed; }
.provider-note { color: var(--muted); font-size: var(--text-sm); padding-inline-start: var(--s-4); }
.email-form { display: grid; gap: var(--s-2); }
.email-form input { min-height: var(--tap); padding-inline: var(--s-3); font: inherit; border: 2px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); }
.consent { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 2px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.consent input { width: 1.5rem; height: 1.5rem; margin-block-start: 0.15rem; flex: none; }
.receipt { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-4); margin: 0; }
.receipt dt { font-weight: 700; }
.receipt dd { margin: 0; }
@media print { .site-header, .site-footer, .mock, .skip-link, .actions button { display: none; } }

/* === course page: lesson cards and compact map rows === */
.lesson-card { list-style: none; }
.lesson-card__link { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-2) var(--s-4); min-height: var(--tap); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.lesson-card__link:hover { border-color: var(--line-strong); transform: translateX(2px); }
.lesson-card__title { font-weight: 800; font-size: var(--text-lg); line-height: 1.25; }
.lesson-card__status { color: var(--muted); font-size: var(--text-sm); text-align: end; white-space: nowrap; }
.lesson-card__summary { grid-column: 1 / -1; color: var(--muted); max-width: 40rem; }
.lesson-card__link .map__cells { grid-column: 1 / -1; }
.lesson-card__link .cell { width: 0.875rem; height: 0.875rem; border-radius: 4px; }
.lesson-card__builds { padding-inline: var(--s-5); margin-block-start: var(--s-1); }
@media (max-width: 37.49rem) {
  .lesson-card__link { grid-template-columns: 1fr; padding: var(--s-4); }
  .lesson-card__status { text-align: start; white-space: normal; }
  .lesson-card__builds { padding-inline: var(--s-4); }
}
.map--compact .map__count { font-weight: 700; }
@media (forced-colors: active) { .lesson-card__link { border: 1px solid ButtonText; } }

/* === home: facts and shortcuts for new visitors === */
.hero__facts { color: var(--ink); font-size: var(--text-sm); font-weight: 600; max-width: 34rem; }

.sp-vars--globals { margin-block-start: var(--s-2); }
.sp-omitted { padding: var(--s-2) var(--s-3); border-inline-start: 4px solid var(--stage-muted); background: var(--stage-bg); color: var(--stage-ink); }
.sp-omitted[hidden], .sp-globals-note[hidden] { display: none; }

/* === clean components: eyebrow, fact pills, note, source card === */
.eyebrow { display: inline-flex; align-items: center; gap: var(--s-3); margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-attention-text); }
.eyebrow::before { content: ""; flex: none; width: 1.25rem; height: 3px; border-radius: 2px; background: var(--accent-line); }
.facts { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.facts li { padding: var(--s-2) var(--s-4); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: var(--text-sm); }
.facts strong { color: var(--ink); font-weight: 800; }
.note { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); align-items: start; padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.note__icon { grid-row: 1 / 3; color: var(--accent-attention-text); font-size: 1.5rem; font-weight: 900; line-height: 1; }
.note__title { margin: 0; font-weight: 800; }
.note__text { margin: 0; color: var(--muted); }
.source { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.source__title { margin: 0; font-size: var(--text-base); }
.source__text { margin: 0; color: var(--muted); font-size: var(--text-sm); }
@media (forced-colors: active) { .eyebrow::before { background: CanvasText; } .facts li, .note, .source { border-color: CanvasText; } }

/* === clean views: hero column, block actions, question note === */
.hero__text { justify-items: stretch; }
.hero__text > .eyebrow { justify-self: start; }
.hero__text .actions { display: grid; gap: var(--s-3); width: 100%; max-width: 30rem; }
.hero__text .lead { max-width: 34rem; }
.hero__facts { color: var(--muted); font-weight: 400; }
.q-next { display: grid; gap: var(--s-2); }
.q-next .hint { text-align: center; }
.course-head > .eyebrow { justify-self: start; }
.lesson-next .button--block { width: 100%; }

/* === review unsure === */
.review__position { margin: 0; font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.review__description { margin: 0; font-size: var(--text-sm); }
.review-empty { max-width: var(--measure); }
.continue-card + .actions, .course-head + .actions { max-width: 24rem; }

/* === quick wins: shortcuts disclosure, step pointer, key hints === */
.hero__shortcuts { display: block; color: var(--muted); font-size: var(--text-sm); }
.hero__shortcuts > summary { cursor: pointer; font-weight: 700; padding-block: var(--s-2); min-height: 2.75rem; display: flex; align-items: center; }
.hero__shortcuts > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.hero__shortcut-links { display: flex; flex-wrap: wrap; gap: var(--s-2); padding-block-end: var(--s-2); }
.hero__shortcut-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--s-4); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-weight: 600; text-decoration: none; }
.hero__shortcut-links a:hover { background: var(--surface-2); }
.step-pointer { margin-block-start: var(--s-2); }
.hint--keys { align-self: center; }
@media (forced-colors: active) { .hero__shortcut-links a { border: 1px solid ButtonText; } }

/* === moments === */
.moment { display: grid; gap: var(--s-2); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent-line); border-radius: var(--radius); background: var(--surface); animation: slide-in 240ms var(--ease) both; }
.moment__title { font-size: var(--text-lg); }
.moment p { margin: 0; color: var(--muted); }
.lesson-done__line { margin: 0; font-weight: 800; color: var(--ink); }
.lesson-done .map__cells { gap: 0; animation: close-gap 500ms var(--ease) both; }
.lesson-done .map__cells .cell { border-radius: 0; margin-inline-end: -2px; }
.lesson-done .map__cells .cell:first-child { border-start-start-radius: 5px; border-end-start-radius: 5px; }
.lesson-done .map__cells .cell:last-child { border-start-end-radius: 5px; border-end-end-radius: 5px; margin-inline-end: 0; }
@keyframes close-gap { from { gap: 5px; } to { gap: 0; } }
.sp-firstrun { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; font-weight: 700; color: var(--stage-ink); }
.sp-firstrun .button--secondary { color: var(--stage-ink); border-color: var(--stage-muted); }
.review-empty p { margin: 0; }

/* === course map on phones: counts, not every cell === */
.map__count--phone, .map-intro--phone { display: none; }
@media (max-width: 37.49rem) {
  .map-intro--wide { display: none; }
  .map-intro--phone { display: block; }
  .map__row:not(.map--compact) .map__cells { display: none; }
  .map__count--phone { display: block; margin: 0; font-weight: 700; }
  .map .legend { display: none; }
}

/* Course catalog (home) and the premium note (course page) */
.catalog { display: grid; gap: var(--s-4); }
.catalog > h2 { font-size: var(--text-xl); }
.catalog__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
.course-card { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.course-card__title { font-size: var(--text-lg); }
.course-card__title a { color: var(--ink); text-decoration-thickness: 2px; }
.course-card__text { color: var(--muted); }
.course-card__progress { color: var(--muted); }
.premium-note { border-inline-start-color: var(--line-strong); }
@media (min-width: 60rem) { .catalog__list { grid-template-columns: repeat(3, 1fr); } }
@media (forced-colors: active) { .course-card { border: 1px solid CanvasText; } }

/* Phone: the course cards come right after the first buttons; the code stage follows them. */
@media (max-width: 59.99rem) {
  .home > .hero { display: contents; }
  .home .hero__text { order: 1; }
  .home > .catalog { order: 2; }
  .home .hero-stage { order: 3; }
  .home > .home-notes { order: 4; }
  .home > .map-card { order: 5; }
}

/* Scoring views: profile, leaderboards, result moment (behind CONFIG.scoringUi) */
.score-pair { display: grid; gap: var(--s-4); }
.score-pair > * { min-width: 0; }
@media (min-width: 60rem) { .score-pair { grid-template-columns: 1fr 1fr; } .score-pair--board { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.score-card { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.score-card h2 { font-size: var(--text-lg); }
.score-card--challenge { border-inline-start: 6px solid var(--accent-attention); }
.score-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2); margin: 0; }
.score-big__value { font-size: var(--text-3xl); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.score-big__unit { font-size: var(--text-lg); font-weight: 700; color: var(--muted); }
.score-lock { color: var(--muted); }
.score-table { width: 100%; border-collapse: collapse; }
.score-table th, .score-table td { text-align: start; padding: var(--s-3); border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.score-table thead th { font-size: var(--text-sm); color: var(--muted); border-bottom-color: var(--line-strong); padding-block: var(--s-2); }
.score-table tbody th { font-weight: 600; }
.score-table .num { text-align: end; white-space: nowrap; }
.board__me td { background: var(--attention-wash); font-weight: 800; }
.board__gap td { text-align: center; color: var(--muted); padding-block: var(--s-1); }
.score-history { list-style: none; padding: 0; margin: 0; }
.score-history li { display: grid; grid-template-columns: 8rem 1fr; gap: var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--line); }
.score-history li:first-child { border-top: 0; }
.score-rules { display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-3); margin: 0; font-size: var(--text-sm); }
.score-rules dt { font-weight: 800; text-align: end; font-variant-numeric: tabular-nums; }
.score-rules dd { margin: 0; color: var(--muted); }
.score-line, .score-delta { margin: 0; }
.score-delta { color: var(--ink); font-weight: 700; }
.option__sub { display: block; font-size: var(--text-sm); color: var(--muted); font-weight: 400; }
.board-controls { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.board-controls .theme-select { margin: 0; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--line-strong); border-radius: 999px; }
.seg__option { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: var(--s-4); border-radius: 999px; font-weight: 700; font-size: var(--text-sm); cursor: pointer; }
.seg__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg__option:has(.seg__input:checked) { background: var(--surface-2); }
.seg__option:has(.seg__input:checked) span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.seg__option:has(.seg__input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.tag { display: inline-flex; align-items: center; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--text-sm); font-weight: 700; line-height: 1.9; vertical-align: middle; }
.tag--real { border-color: var(--accent-line); }
.test-strip { padding: var(--s-2) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--text-sm); font-weight: 700; }
.result-card { max-width: 44rem; }
.result-card__invite { border-inline-start-color: var(--line-strong); max-width: none; }
.result-card .result-card__invite p { color: var(--ink); }
.result-card__invite .banner__title { font-weight: 800; }
@media (max-width: 37.49rem) {
  .score-card { padding: var(--s-4); }
  .score-table { font-size: var(--text-sm); }
  .score-table th, .score-table td { padding-inline: var(--s-2); }
  .score-history li { grid-template-columns: 1fr; gap: 0; }
}
@media (forced-colors: active) { .score-card, .seg, .tag, .test-strip { border: 1px solid CanvasText; } .board__me td { outline: 2px solid CanvasText; outline-offset: -2px; } .seg__option:has(.seg__input:checked) { outline: 2px solid Highlight; } }

/* Answer moment: a check that draws itself, a disc that fills to half, a one-time glow on the right option.
   Each animation runs from an empty start to the final state, so with motion off the final icon shows. */
.moment-icon { flex: none; width: 2rem; height: 2rem; }
.moment-icon__ring { fill: none; stroke: currentColor; stroke-width: 2; }
.moment-icon__tick { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.moment-icon__pie { fill: none; stroke: currentColor; stroke-width: 11; stroke-dasharray: 0.5 1; }
.moment-icon.is-fresh .moment-icon__ring { animation: moment-ring 240ms var(--ease) both; }
.moment-icon.is-fresh .moment-icon__tick { animation: moment-draw 400ms var(--ease) 160ms both; }
.moment-icon.is-fresh .moment-icon__pie { animation: moment-pie 480ms var(--ease) 160ms both; }
@keyframes moment-ring { from { opacity: 0; transform: scale(0.8); transform-origin: center; } }
@keyframes moment-draw { from { stroke-dashoffset: 1; } }
@keyframes moment-pie { from { stroke-dasharray: 0 1; } }
.option.is-glow { animation: moment-glow 900ms var(--ease) 1; }
@keyframes moment-glow { 0% { background: var(--attention-wash); outline: 3px solid var(--accent-line); outline-offset: 2px; } 100% { outline: 3px solid transparent; outline-offset: 2px; } }

/* After the answer: verdict, the way on, then why; the rest folded under "Read more". */
.why, .read-more { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.why > summary, .read-more > summary { min-height: var(--tap); display: flex; align-items: center; padding: var(--s-3) var(--s-4); cursor: pointer; font-weight: 700; }
.why > summary:focus-visible, .read-more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.why__body, .read-more__body { display: grid; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }
.why__body .fb__heading, .read-more__body .fb__heading { font-size: var(--text-base); }
@media (forced-colors: active) { .why, .read-more { border: 1px solid CanvasText; } .option.is-glow { animation: none; } }

/* Course path on the home page: steps 1 and 2 are coming soon, step 3 is the first real course. */
.path__heading { font-size: var(--text-lg); margin-block-start: var(--s-2); }
.path { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-3); }
.path__step { display: grid; grid-template-columns: 2.25rem 1fr; gap: var(--s-3); align-items: start; }
.path__n { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 2px solid var(--line-strong); font-weight: 800; color: var(--ink); background: var(--bg); }
.path__step:not(.path__step--soon) .path__n { background: var(--accent-attention); border-color: var(--accent-attention); color: var(--on-accent-attention); }
.path__body { min-width: 0; display: grid; gap: var(--s-1); align-content: start; }
.path__step--soon .path__body { padding: var(--s-3) var(--s-4); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.path__title { font-weight: 800; }
.path__soon { font-weight: 700; color: var(--muted); }
.path__card { padding: var(--s-4); }
@media (min-width: 60rem) {
  .path { grid-template-columns: 1fr 1fr 1.4fr; align-items: stretch; }
  .path__step { grid-template-columns: 1fr; }
  .path__step--soon .path__body, .path__card { height: 100%; }
}
@media (forced-colors: active) { .path__n { border: 2px solid CanvasText; } .path__step--soon .path__body { border: 1px dashed CanvasText; } }