/* What a lesson page needs on top of the article layer (article.css): the machine widget of learn/ui.js. */

/* ---- 1. the machine widget ---- */
:where(.machine) { max-width: 46rem; margin: var(--s4) 0; }
:where(.machine) .ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s3) 0 0; }
:where(.machine) .ctl > label { flex: 1 1 14rem; }
:where(.machine) .ctl > label > output { min-width: 5.5em; font-variant-numeric: tabular-nums; }
:where(.machine) input[type="range"] { max-width: none; }
:where(.machine) .tell { min-height: 3em; margin: var(--s3) 0 0; color: var(--ink-2); font: var(--fs-ui)/1.5 var(--sans); }
:where(.machine) .tell .last { color: var(--muted); }
:where(.machine) .measured { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--fs-small); }
:where(.machine) .tape.joined { --cell-w: 6rem; --cell-h: 3.25rem; margin: 0; }
:where(.machine) .tape.joined > .cell > .top { display: block; overflow: hidden; padding-bottom: var(--s1); color: var(--muted); font: var(--lab); white-space: nowrap; }
:where(.machine) .tape.joined > .cell.hit > b { background: var(--hot); color: var(--ink); font-weight: 700; }
:where(.machine) .printed { display: flex; align-items: baseline; gap: var(--s3); margin: var(--s3) 0 0; }
:where(.machine) .printed > .label { margin: 0; }
:where(.machine) .printed > output { min-height: 1.5em; font: 700 var(--fs-h2)/1.3 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
:where(.machine) .printed > output .now { background: var(--ink); color: var(--bg); outline: 2px solid var(--ink); }
:where(.machine) .verdict.err { margin-top: 0; }

/* the program is long, or has many lines: it scrolls inside its own box */
.machine .prog { min-height: 2.4em; max-height: 8.2em; overflow-y: auto; margin: 0 0 var(--s3); }
.machine .tape.joined > .cell.here.hit > b { background: var(--hot); }
/* the box to write a program in, and the input field above the program */
.machine > textarea { display: block; width: 100%; max-width: none; min-height: 5.5rem; margin: 0 0 var(--s3); }
.machine > label.stacked { margin: 0 0 var(--s3); max-width: 24rem; }
.machine > .label { margin: 0 0 var(--s1); }
/* the buttons that hold the pointer-and-plus-minus pad of the first lessons */
.machine .ctl.pad { margin-top: var(--s3); }

/* ---- 2. a lesson page ---- */
main.lesson figure.fig > .verdict:empty { display: none; }
main.lesson figure.fig .callout.hint { margin: var(--s3) 0 0; }
main.lesson figure.fig > .row { margin: var(--s3) 0 0; }
main.lesson .after { margin: var(--s4) 0 var(--s5); }
main.lesson .after[hidden] { display: none; }
main.lesson .after > :first-child { margin-top: 0; }
main.lesson p.skip { margin: calc(-1 * var(--s3)) 0 var(--s4); max-width: var(--measure); }
main.lesson p.skip button.link { min-height: var(--target); }
main.lesson p.skip[hidden] { display: none; }
/* the state line of the summary */
main.lesson .state { min-height: 1.5em; margin: var(--s3) 0 0; font-weight: 600; }
main.lesson #now.complete .state::before { content: "\2713\2002"; }
main.lesson .verdict.said.ok:not(:empty)::before { content: "\2713\2002"; }
main.lesson .verdict.said.no:not(:empty)::before { content: "\2715\2002"; font-weight: 700; }

/* the row of command keys under a box for a program (challenges/common.js) */
main.lesson .keyrow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s2) var(--s3); margin: calc(-1 * var(--s1)) 0 var(--s3); }
main.lesson .keyrow .keypad { flex: 0 1 28rem; margin: 0; }
main.lesson .keyrow .row { margin: 0; }
main.lesson .keyrow .row > button { height: 100%; }
main.lesson figure.fig > .machine { margin: 0; max-width: none; }

/* the character chart (lesson 3): one key for each character */
main.lesson .chart { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--target), 1fr)); gap: 3px; margin: var(--s2) 0; }
main.lesson .chart > button { flex-direction: column; min-width: 0; min-height: 2.875rem; padding-left: 0; padding-right: 0; }
main.lesson .chart small { display: block; }
main.lesson .chart-say { min-height: 3.4em; margin: 0 0 var(--s2); }

/* the quiz, and other questions with a few answers */
main.lesson .ask-q { margin: var(--s3) 0 var(--s2); }
main.lesson .picklist + .verdict { margin-top: var(--s3); }
main.lesson .pieces { display: grid; gap: var(--s2); margin: var(--s2) 0; max-width: 40rem; }
main.lesson .pieces label { display: grid; grid-template-columns: 8rem 1fr; align-items: center; gap: var(--s2); }
main.lesson .pieces select { width: 100%; min-width: 0; }
main.lesson .ask { align-items: flex-end; margin: var(--s2) 0; }
main.lesson .ask input[type="number"] { width: 7rem; }
main.lesson .ask input[type="text"] { width: 14rem; max-width: 100%; }
main.lesson .ask select, main.lesson .ask textarea { max-width: 100%; }
main.lesson pre.plan { white-space: pre-wrap; }
main.lesson details.code { margin: var(--s2) 0; }

/* the table of commands at the end of a lesson */
main.lesson section.notes { margin-top: var(--s6); }
main.lesson section.notes table { margin-bottom: var(--s3); }
main.lesson section.now { margin-top: var(--s6); }

main.lesson #startbox { margin: var(--s4) 0 var(--s5); max-width: none; }
main.lesson #startbox .stepbar { margin: var(--s2) 0 var(--s3); }
main.lesson .grouphead { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin: var(--s6) 0 var(--s2); max-width: none; }
main.lesson .grouphead h2 { margin: 0; }
main.lesson ol.toc.lessons { columns: 1; margin-top: 0; max-width: none; }
main.lesson ol.toc.lessons a { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: var(--s2); align-items: start; padding: var(--s3) 0; }
main.lesson ol.toc.lessons a::before { grid-row: 1 / span 3; }
main.lesson ol.toc.lessons a > * { grid-column: 2; }

/* ---- 3. narrower, paper ---- */
@media (max-width: 36em) {
  main.lesson .pieces label { grid-template-columns: 1fr; }
  main.lesson .machine .ctl > :is(button) { flex: 1 1 auto; }
}
@media print {
  .machine .ctl, main.lesson p.skip, main.lesson .keyrow { display: none; }
  main.lesson .after[hidden] { display: block; }
  .machine .prog { max-height: 9em; overflow: hidden; }
}