/* /learn — eight chapters, each a bench. Only what vision.css lacks. */

/* Chapter titles sit in a narrow column; the full display size would overflow it. */
.learn .chapter h2 { font-size: clamp(2rem, 2.2vw + 1rem, 3.5rem); }
.learn .page-head h1 { font-size: clamp(2.5rem, 4.5vw + 0.5rem, 5rem); }
.learn .page-head .lede { font-weight: 400; max-width: 42ch; }
.learn .page-head .cta { margin-top: 20px; }
.learn .prose p { margin-bottom: 0.9em; }

/* Contents: one line of quiet links under the specimen bar. */
.learn-toc {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 12px var(--gutter) 0;
}
.learn-toc a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--target); padding: 0 12px;
  background: var(--quiet); color: var(--quiet-text);
  font-size: var(--micro); text-decoration: none;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}
.learn-toc a:hover, .learn-toc a:focus-visible { background: var(--field); color: var(--field-text); }

/* The journey map: the eight chapters as one path, drawn, tappable. */
.learn-map { padding: 16px var(--gutter) 8px; }
.learn-map svg { min-width: 900px; }

/* "Try" lines under the prose. */
.try { font-size: var(--micro); max-width: 62ch; }
.try .label { margin-right: 8px; }

/* Benches */
.learn .bench .readout { margin: 0; }
.learn .bench .controls .btn { flex: 1 1 auto; }
.bench-view.tap canvas { cursor: crosshair; }

.hist-view { position: relative; height: 64px; background: var(--black); }
.hist-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Chapter 4: the nine multiplications, laid out as they happen. */
.kmath {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px;
  padding: 12px 16px 4px; background: var(--black); color: var(--white);
}
.kmath figcaption { padding: 0 0 6px; color: var(--gray); }
.kgrid { display: grid; grid-template-columns: repeat(3, minmax(2.5em, auto)); gap: 2px; font-size: var(--micro); }
.kgrid span { background: var(--black-2); padding: 6px 4px; text-align: center; }
.kout {
  display: flex; align-items: center; justify-content: center;
  min-width: 3.5em; min-height: calc(3 * (1.4em + 12px) + 4px); padding: 0 12px;
  background: var(--black-2); font-size: var(--body);
}
.kop { font-family: var(--mono); font-size: var(--body); color: var(--gray); padding-bottom: 1.4em; }

/* Chapter 7: scores below the line stay listed, quieter — the network did guess. */
.score-list { padding: 0 0 2px; }
.score-list:empty { display: none; }
.bar.below { opacity: 0.5; }

/* Chapter 8: the limits, as a list that reads like prose. */
.limits { padding-left: 1.2em; }
.limits li { margin-bottom: 0.8em; }

/* Where next: rows on the ink field darken on hover instead of vanishing into it. */
.learn-next .index a:hover, .learn-next .index a:focus-visible { background: var(--black); color: var(--white); }
.learn-next .index { padding-bottom: clamp(32px, 5vw, 72px); }

/* The specimen bar is sticky; chapters reached from the contents must land below it.
   (html already pads 72px for the rail; this adds the bar.) */
.learn .chapter { scroll-margin-top: var(--specimen-height, 88px); }
@media (max-width: 820px) { .learn .chapter { scroll-margin-top: 0; } }


/* One chapter is one working area, with the instrument wide enough to study. */
@media (min-width: 1101px) {
  .learn .chapter { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr); column-gap: clamp(24px, 3.5vw, 56px); }
  .learn .chapter > header { grid-column: 1; grid-row: 1; }
  .learn .chapter-body.split { display: contents; }
  .learn .chapter-body.split > .prose { grid-column: 1; grid-row: 2; }
  .learn .chapter-body.split > .bench { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
}

@media (max-width: 600px) {
  .learn-toc { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .learn-toc a { flex: 0 0 auto; }
}