/* The lesson page: the text at a reading width, the calculator beside it (above it on a narrow screen). */

.top {
  display: flex;
  flex-wrap: wrap;            /* a phone: the mode switch and Settings take a second line rather than overflow */
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-4) 0;
}
.brand { font-weight: 600; white-space: nowrap; color: var(--ink); text-decoration: none; }

/* The footer every page carries (the licence line and the trademark line, decision 60). */
.foot {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-7);
  font-size: var(--t-xs);
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}
.foot p { max-width: 90ch; margin: 0; }
.foot a, .index a { color: var(--accent); }

/* The lesson index and the licence page: text at a reading width. */
.index { max-width: 70ch; margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-8); }
.index h1 { font-size: var(--t-2xl); line-height: var(--lh-tight); margin: var(--s-5) 0 var(--s-3); }
.index h2 { font-size: var(--t-lg); margin: var(--s-6) 0 var(--s-2); }
.lede { color: var(--ink-soft); margin: 0 0 var(--s-5); }
.lesson-list { padding-left: var(--s-5); }
.lesson-list li { margin: 0 0 var(--s-2); }
.tag { font-size: var(--t-xs); color: var(--ink-soft); }
@media (max-width: 599px) { .tag { display: none; } }

/* The mode switch: one segmented radio group for the page (decision 56), like an API doc's tabs. */
.mode-switch { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }
.mode-label { font-size: var(--t-xs); color: var(--ink-soft); }
.mode-group { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.mode-opt { position: relative; font-size: var(--t-sm); font-weight: 600; padding: var(--s-1) var(--s-3); cursor: pointer; }
.mode-opt + .mode-opt { border-left: 1px solid var(--line); }
.mode-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: inherit; }
.mode-opt:has(input:checked) { background: var(--accent); color: var(--accent-ink); }
.mode-opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.mode-opt:has(input:disabled) { color: var(--ink-faint); cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-6);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-9);
}
@media (min-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 70ch) 380px; justify-content: center; }
  .calc-col { order: 2; position: sticky; top: var(--s-5); align-self: start; }
  .lesson { order: 1; }
}

.calc-actions { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-3); }
.btn-keys { display: none; }

/* A narrow screen: the calculator's screen stays in view while the lesson scrolls under it, so "Try it"
   shows its result where the student is reading; the keypad opens on demand. */
@media (max-width: 999px) {
  .calc-col {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
    padding: var(--s-2) 0;
    box-shadow: 0 1px 0 var(--line);
  }
  .calc-col .calc { max-width: none; padding: var(--s-2); }
  .calc-col .lcd { margin-bottom: 0; }
  .calc-col:not(.open) .keypad { display: none; }
  .calc-col.open .lcd { margin-bottom: var(--s-3); }
  .calc-actions { margin-top: var(--s-2); }
  .btn-keys { display: inline-block; }
  .layout { gap: var(--s-4); padding-top: 0; }
}
.note { font-size: var(--t-sm); color: var(--err-strong); }

.lesson { max-width: 70ch; }
.prose h1 { font-size: var(--t-2xl); line-height: var(--lh-tight); margin: 0 0 var(--s-5); }
.prose h2 { font-size: var(--t-lg); line-height: var(--lh-tight); margin: var(--s-7) 0 var(--s-3); }
.prose p { margin: 0 0 var(--s-4); }
.prose code { font-family: var(--font-mono); font-size: 0.9em; }
/* a lesson's figure drawn in text (geometry's angles and crossings, labelled a-d, p-w): every character in its column,
   scrolled inside its own box on a narrow screen rather than widening the page */
.prose pre { margin: 0 0 var(--s-4); padding: var(--s-3); background: var(--surface); border-radius: var(--r-sm);
  overflow-x: auto; line-height: 1.25; }
/* no ligatures: a monospace font's would join "-----+-----" into one rule and shrink its "+" (seen in Cascadia Code) */
.prose pre code { font-size: 0.85em; white-space: pre; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.prose disp, disp {
  font-family: var(--font-mono);
  background: var(--dev-lcd);
  color: var(--dev-lcd-ink);
  border-radius: var(--r-sm);
  padding: 0 var(--s-1);
  white-space: nowrap;
}

.keys {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin: 0 0 var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--quick);
}
.keys.active { box-shadow: 0 0 0 2px var(--accent); }
.keys-row { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.keys-side { display: flex; align-items: center; gap: var(--s-2); }
.mode-tag { font-size: var(--t-xs); font-weight: 600; color: var(--accent); }
.chip {
  font-family: var(--font);
  font-size: var(--t-sm);
  font-weight: 600;
  padding: 2px var(--s-2);
  border-radius: var(--r-sm);
  background: var(--dev-key);
  color: var(--dev-key-ink);
}
.chip-gold { background: var(--dev-gold); color: var(--dev-body); }
.chip-blue { background: var(--dev-blue); color: var(--dev-body); }
/* a key name is a button: pointed at, it lights its key on the calculator; clicked, it presses it */
button.chip { border: 0; cursor: pointer; line-height: inherit; }
button.chip:hover, button.chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* the header's link to the settings, at the far right */
.top-link { margin-left: auto; font-size: var(--t-sm); color: var(--accent); white-space: nowrap; }
/* the entry switch sits right of the mode switch, the same control */
.mode-switch + .entry-switch { margin-left: var(--s-4); }
.entry-switch[hidden] { display: none; }
.mode-switch + .top-link { margin-left: var(--s-4); }
.entry-switch + .top-link { margin-left: var(--s-4); }
@media (max-width: 599px) { .mode-switch + .top-link { margin-left: 0; } }   /* wrapped: under the brand */

/* /settings/: one fieldset a setting, its options a list of radios */
.setting { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.setting legend { font-size: var(--t-lg); font-weight: 600; padding: 0; margin: 0 0 var(--s-2); }
.setting-help { color: var(--ink-soft); margin: 0 0 var(--s-3); }
.setting-options { display: flex; flex-direction: column; gap: var(--s-2); }
.setting-opt { display: flex; align-items: baseline; gap: var(--s-2); cursor: pointer; }
.setting-name { font-weight: 600; min-width: 8ch; }
.setting-note { color: var(--ink-soft); font-size: var(--t-sm); }

.btn {
  font: inherit;
  font-size: var(--t-sm);
  font-weight: 600;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
}
.btn-try { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

.state { color: var(--ink-soft); }
.state-error { color: var(--err-strong); }

/* Courses (decision 63): the course list, a course's units, a lesson's place in its course */
.course-list { list-style: none; padding: 0; margin: 0 0 var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.course-card { padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.course-title { font-size: var(--t-lg); font-weight: 600; }
.course-facts { margin: var(--s-1) 0 0; color: var(--ink-soft); font-size: var(--t-sm); }
.unit h2 { font-size: var(--t-lg); margin: var(--s-5) 0 var(--s-2); }
.unit .state { margin: 0 0 var(--s-2); font-size: var(--t-sm); }
.progress { font-size: var(--t-xs); font-weight: 600; color: var(--ink-soft); }
.progress-done { color: var(--accent); }
.crumbs { font-size: var(--t-sm); color: var(--ink-soft); margin: 0 0 var(--s-2); }
.crumbs a { color: var(--accent); }
.before { margin: 0 0 var(--s-5); padding: var(--s-2) var(--s-4); background: var(--surface); border-radius: var(--r-md); font-size: var(--t-sm); }
.before summary { cursor: pointer; font-weight: 600; }
.before-list { margin: var(--s-2) 0 var(--s-1); padding-left: var(--s-5); }
.before-list li { margin: 0 0 var(--s-1); }
.before-lesson { font-weight: 600; }
.before a { color: var(--accent); }
.lesson-end { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin: var(--s-6) 0 0; }
.btn-done[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.next-lesson { color: var(--accent); font-weight: 600; }
.prose h2[id] { scroll-margin-top: var(--s-4); }

/* /settings/: the progress file's actions, and the choice shown after a file is read */
.setting-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.setting-actions label.btn { display: inline-block; }
.setting-actions:has(#load-file:focus-visible) label[for="load-file"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.load-choice { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-md); }
.load-choice[hidden] { display: none; }
.load-choice p { flex-basis: 100%; margin: 0 0 var(--s-1); }

/* Achievements (decision 67): earned first, then ahead; a quiet note on the lesson page when one is earned */
.ach-group h2 { font-size: var(--t-lg); margin: var(--s-5) 0 var(--s-2); }
.ach-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.ach { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--surface); }
.ach-earned .ach-title { font-weight: 600; color: var(--accent); }
.ach-ahead { color: var(--ink-soft); }
.ach-detail { font-size: var(--t-sm); color: var(--ink-soft); }
.ach-note { flex-basis: 100%; margin: 0; font-size: var(--t-sm); }
.ach-note:empty { display: none; }
.ach-note a, .note a { color: var(--accent); }

/* Items (decision 67): a quiz or checkpoint question, its answer judged by the calculator */
.item { margin: 0 0 var(--s-5); padding: var(--s-3) var(--s-4); background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-1); border-left: 3px solid var(--line); }
.item-right { border-left-color: var(--accent); }
.item-head { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: baseline; font-size: var(--t-sm); margin: 0 0 var(--s-2); }
.item-kind { font-weight: 600; }
.item-tag, .item-howto { color: var(--ink-soft); }
.item-done { color: var(--accent); font-weight: 600; }
.item-prompt { margin: 0 0 var(--s-3); }
.item-row { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.item-input { font: inherit; padding: var(--s-1) var(--s-2); border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 12ch; background: var(--bg); color: var(--ink); }
.item-result { margin: var(--s-2) 0 0; }
.item-result:empty { display: none; }
.item-result a { color: var(--accent); }
.item-working { margin: var(--s-2) 0 0; font-size: var(--t-sm); }
.item-working summary { cursor: pointer; }

/* Why blocks (tutor 77979c9): a question under its example, the reason behind a disclosure */
.why { margin: 0 0 var(--s-5); padding: var(--s-2) var(--s-4); border-left: 3px solid var(--line); }
.why-ask { margin: 0 0 var(--s-2); font-weight: 600; }
.why-because { font-size: var(--t-sm); }
.why-because summary { cursor: pointer; color: var(--accent); }
.why-because p { margin: var(--s-2) 0 0; font-size: var(--t-md); }

/* The placement check (decision 67) */
.placement-step { display: flex; flex-direction: column; gap: var(--s-3); }
.placement-step .item { display: flex; flex-direction: column; gap: var(--s-2); }
.placement-step .btn-try { align-self: flex-start; }
.placement-calc { max-width: 380px; margin: var(--s-4) 0; }
.placement-calc[hidden] { display: none; }
.placement-offer { margin: 0 0 var(--s-4); }
.prerequisite { margin: 0 0 var(--s-4); }
.prerequisite a { color: var(--accent); }
.placement-offer a { color: var(--accent); }
.placement-result h2 { font-size: var(--t-xl); margin: var(--s-4) 0 var(--s-2); }
.placement-result a { color: var(--accent); }

/* Maths (web/lesson/maths.mjs, KaTeX): a display equation on its own line, scrolled inside its box on a narrow screen
   rather than widening the page; a span KaTeX refused shows its TeX, marked */
.maths-display { margin: var(--s-3) 0; overflow-x: auto; overflow-y: hidden; }
.maths-error { color: var(--err-strong); font-family: var(--font-mono); font-size: var(--t-sm); }

/* The setup card's sentence (abacus #6900): on its own line above the keys */
.keys:has(> .setup-note:not([hidden])) { flex-wrap: wrap; row-gap: var(--s-2); }
.setup-note { flex-basis: 100%; margin: 0; font-size: var(--t-sm); color: var(--ink-soft); }