/* "How it works" (how/index.html). */

/* ---- the row of cells, as the figures here use it ---- */
main.how .tape.joined.wrap { flex-wrap: wrap; row-gap: var(--s2); --cell-h: 2.5rem; }
main.how .tape.joined.wrap > .cell { flex: 0 0 1.75rem; min-width: 0; }

/* the three keys of the reading machine */
#fig-read .keypad { grid-template-columns: repeat(3, minmax(0, 1fr));--key-h: 4.5rem; --key-fs: 1.5rem; gap: var(--edge); border-width: var(--edge); margin-bottom: var(--s4); }
#fig-read .keypad > button { border-top-width: 8px; }
#fig-read .keypad small { font-family: var(--mono); }
#fig-read { --cell: var(--c-in); --cell-ink: var(--on-data); }       /* the number on the green cell: dark ink in both themes */
#fig-read .tape.joined { --cell-w: none; }

/* ---- bars: the shared .bars, placed ---- */
main.how .bars { grid-template-columns: fit-content(45%) minmax(3rem, 1fr) auto; }
/* a bar made of parts: the two parts of the program, to scale */
main.how .stack { display: flex; gap: 1px; height: 3rem; background: var(--sunk); }
main.how .stack > i { min-width: 4px; height: 100%; }
main.how .twocap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s4); margin: var(--s3) 0 0; }
main.how .twocap > span { display: inline-flex; align-items: center; gap: var(--s2); }
main.how .twocap .sw { margin: 0; }
#fig-size dl.facts { margin: 0; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
#fig-size .seg { display: flex; flex: 1 1 auto; }
#fig-write td.bf { min-width: 12rem; }

/* ---- narrower ---- */
@media (max-width: 45em) {
  main.how .bars { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--s1); }
  main.how .bars .lab { grid-column: 1 / -1; margin-top: var(--s2); }
}
@media (max-width: 36em) {
  #fig-read .keypad { --key-h: 4rem; --key-fs: 1.375rem; }
}

/* ---- one comma, one full stop: from the whole program to the characters around it (how.js) ---- */
#stop-view { display: block; width: 100%; height: 26rem; margin-top: var(--s3); }
#fig-stop .ctl { gap: var(--s2); }

/* ---- with pencil and paper: one answer of each program on the calendar (home-figures.js) ---- */
.hand { position: relative; font: var(--fs-ui)/1.4 var(--sans); }
.hand-marks { position: relative; z-index: 1; }      /* over the dashed lines of the events in the rows above */
.hand-mark { position: absolute; top: 0; padding: 0 3px; background: var(--panel); white-space: nowrap; font: 500 .75rem/1.25 var(--mono); }
.hand-mark b { display: block; color: var(--ink); font-weight: 600; }
.hand-mark span { color: var(--muted); }
.hand-mark.right { text-align: right; }
.hand-guide { position: absolute; bottom: 0; width: 0; border-left: 1px dashed var(--rule); opacity: .55; pointer-events: none; }
.hand-axis { position: relative; z-index: 1; height: 1.75rem; border-top: var(--edge) solid var(--ink); }
.hand-axis i { position: absolute; top: 0; height: 6px; border-left: 1px solid var(--ink); }
.hand-axis span { position: absolute; top: 7px; padding: 0 3px; background: var(--panel); transform: translateX(-50%); white-space: nowrap; color: var(--muted); font: .75rem/1.2 var(--mono); font-variant-numeric: tabular-nums; }
.hand-axis span.now { transform: translateX(-100%); color: var(--ink); font-weight: 600; }
.hand-lane { position: relative; margin-top: var(--s3); }
.hand-lane .who { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s3); margin: 0 0 4px; }
.hand-lane .who > span { position: relative; background: var(--panel); }      /* over the dashed lines of the events */
.hand-lane .who b { font-family: var(--mono); }
.hand-lane .who q { color: var(--muted); quotes: "\201C" "\201D"; }
.hand-lane .when { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hand-track { position: relative; height: 1.5rem; background: var(--sunk); border: 1px solid var(--ink); cursor: pointer; touch-action: pan-y; }
.hand-track i { position: absolute; top: 0; bottom: 0; background: var(--c-in); box-shadow: inset -1px 0 0 var(--panel); }
.hand-track i.print { background: var(--c-out); }
.hand-track i.end { background: var(--c-lt); }
.hand-track i.on { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 1; }
.hand-say { min-height: 3.1em; margin: var(--s3) 0 0; font: var(--fs-ui)/1.55 var(--sans); }
.hand-say b { font-family: var(--mono); }
.hand-tick { margin: var(--s2) 0 0; font-family: var(--mono); font-variant-numeric: tabular-nums; }
#fig-hand .key { margin: var(--s2) 0 0; }
#fig-hand .key { display: flex; flex-wrap: wrap; gap: 4px 16px; }
#fig-hand .key > span { display: inline-flex; align-items: center; gap: 6px; }
#fig-hand .key > span::before { content: ""; width: 12px; height: 12px; background: var(--k); }
#fig-hand .hand-tick { font-family: var(--mono); }

/* ---- the word piece every layer would print (how.js, fig-lens) ---- */
#fig-lens .lens { display: grid; grid-template-columns: max-content repeat(var(--cols, 8), minmax(4.25rem, 1fr)); gap: 1px; width: max-content; min-width: 100%; background: var(--line); border: 1px solid var(--line); font: 500 .75rem/1 var(--mono); }
#fig-lens .lens > * { display: block; min-width: 0; min-height: 0; height: 1.25rem; margin: 0; padding: 0 .3rem; line-height: 1.25rem; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--panel); color: var(--ink); }
#fig-lens .lh { color: var(--muted); }
#fig-lens .lh.top, #fig-lens .lh.corner { height: 1.75rem; line-height: 1.75rem; background: var(--sunk); }
#fig-lens .lh.top { color: var(--ink); font-weight: 700; }
#fig-lens .lh.side { text-align: right; font-variant-numeric: tabular-nums; }
#fig-lens button.lc { border: 0; border-radius: 0; box-shadow: none; cursor: pointer; font: inherit; line-height: 1.25rem; }
#fig-lens button.lc:hover { outline: 2px solid var(--ink); outline-offset: -2px; }
#fig-lens button.lc:focus-visible { outline: var(--ring) solid var(--ink); outline-offset: -3px; }
#fig-lens button.lc.win { background: var(--go); color: var(--on-go); font-weight: 700; }
#fig-lens .lc.mtp, #fig-lens .lh.mtp { height: 1.75rem; line-height: 1.75rem; border-bottom: 2px solid var(--rule); }
#fig-lens button.lc.mtp { line-height: 1.75rem; }
#fig-lens button.lc.mtp.hit { background: var(--goodbg); color: var(--good); font-weight: 700; }
#fig-lens button.lc.mtp.miss { color: var(--muted); text-decoration: line-through; }
#fig-lens .lc.empty { background: var(--sunk); }