/* Revision maps (tools/revision-maps.html, tools/revision-maps.js).
   The page wears the class builders' look (class-builder.css); this is the
   grid of sixteen maps, the viewer's bar and the sheets themselves.

   A sheet looks like a printed page: landscape, white with ink-coloured
   lines in either theme (its drawings are drawn for paper), everything on
   it sized in ems of the sheet's one font size. On screen that size follows
   the width and the sheet grows to hold its boxes. While printing
   (html.rm-printing) the sheet is its page, --pw by --ph in millimetres,
   the type 9 pt times --k, and the blanks get room to write in by hand;
   fitPaper in revision-maps.js steps --k down, or splits the subtopic,
   until the boxes fit. */

/* ── The hero's example ──────────────────────────────────────── */
.rmd { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 34px 12px; padding: 4px 0 2px; }
.rmd-hub { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-white); box-shadow: 2px 2px 0 var(--riso-pink); font-family: var(--font-display); font-size: 13px; font-weight: 700; white-space: nowrap; }
.rmd-hub small { display: block; font-family: var(--font-mono); font-size: 9px; font-weight: 400; letter-spacing: .08em; color: var(--ink-dim); text-align: center; }
.rmd-spokes { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.rmd-spokes path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.rmd-box { position: relative; z-index: 1; min-width: 0; padding: 7px 8px; border: 1.5px solid var(--ink); border-radius: 8px; background: var(--paper-white); font-size: 11.5px; line-height: 1.45; }
.rmd-box b { display: block; margin-bottom: 3px; font-family: var(--font-display); font-size: 11.5px; }
.rmd-box svg { display: block; width: 100%; height: auto; }
.rmd-fill { display: inline-block; min-width: 4.4em; padding: 0 2px; border-bottom: 1.5px dotted var(--ink); color: transparent; font-family: var(--font-display); font-weight: 600; line-height: 1.2; transition: color .35s; }
.rmd-fill.on { color: #14583a; color: color-mix(in srgb, var(--riso-green-deep) 62%, var(--ink)); border-bottom-style: solid; }
.rmd-t { width: 100%; border-collapse: collapse; font-size: 10.5px; }
.rmd-t th, .rmd-t td { padding: 2px 4px; border: 1px solid var(--line-strong); text-align: left; font-weight: 400; }
.rmd-t th { font-weight: 650; }
.rmd-tick { position: absolute; right: 2px; bottom: -6px; z-index: 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--riso-green); color: var(--on-brand); font-family: var(--font-display); font-size: 17px; font-weight: 800; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s cubic-bezier(.2, .9, .3, 1.4); }
.rmd-tick.on { opacity: 1; transform: none; }
.rmd.reset .rmd-fill { transition: none; }

/* ── The grid of sixteen ─────────────────────────────────────── */
.rm-grid16 { display: grid; grid-template-columns: minmax(0, .9fr) repeat(4, minmax(0, 1fr)); gap: 8px; }
.rm-gh { align-self: end; padding: 0 2px 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.rm-gh b, .rm-gt b { font-weight: 500; color: var(--riso-pink-deep); }
.rm-gt { align-self: center; padding-right: 4px; font-family: var(--font-display); font-size: 15px; font-weight: 650; line-height: 1.2; }
.rm-gt b { display: block; font-family: var(--font-mono); font-size: 12px; }
.rm-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 9px 11px 10px; border: 1.5px dashed var(--line-strong); border-radius: 10px; background: transparent; color: var(--ink-dim); font: inherit; text-align: left; }
.rm-cell.ready { border: 1.5px solid var(--ink); background: var(--paper-white); color: var(--ink); cursor: pointer; transition: transform .12s, box-shadow .12s; }
.rm-cell.ready:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 var(--riso-green); }
.rm-cell[aria-current="true"] { box-shadow: 3px 3px 0 var(--riso-pink); }
.rm-cell:focus-visible { outline: 2px solid var(--riso-pink-deep); outline-offset: 2px; }
.rm-cid { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: -.01em; }
.rm-clvl { display: none; }
.rm-csubs { display: grid; gap: 1px; font-size: 13px; line-height: 1.3; }
.rm-csubs i { font-family: var(--font-mono); font-size: 10px; font-style: normal; color: var(--riso-pink-deep); }
.rm-cgo { margin-top: auto; padding-top: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.rm-cell.ready .rm-cgo { color: var(--riso-green-deep); }
@media (max-width: 760px) {
  .rm-grid16 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rm-gh { display: none; }
  .rm-gt { grid-column: 1 / -1; margin-top: 8px; }
  .rm-gt b { display: inline; margin-right: 4px; }
  .rm-clvl { display: inline; margin-left: 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .04em; color: var(--ink-dim); }
}

/* ── The viewer ──────────────────────────────────────────────── */
.rm-view { margin: 0 0 40px; scroll-margin-top: 100px; }
.rm-view[hidden] { display: none; }
.rm-view-h { display: grid; gap: 4px; margin: 0 0 12px; }
.rm-view-h h2 { margin: 0; font-family: var(--font-display); font-size: 28px; letter-spacing: -.015em; }
.rm-view-h h2 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--riso-pink-deep); }
.rm-view-h p { margin: 0; max-width: 72ch; color: var(--ink-dim); font-size: 15.5px; line-height: 1.5; }
.rm-bar { position: sticky; top: var(--rm-bar, 64px); z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin: 0 0 16px; padding: 10px 12px; background: var(--paper-white); border: 1.5px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--riso-green); }
.rm-bar .cb-btn { padding: 7px 13px; font-size: 13.5px; }
.rm-bar .cb-btn[aria-pressed="true"] { background: var(--riso-green); border-color: var(--ink); color: var(--on-brand); }
.rm-bar .cb-seg button { padding: 6px 11px; font-size: 13px; }
.rm-grp { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.rm-grp-l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.rm-sep { flex: 1 1 auto; }
.rm-score { flex: 1 1 100%; margin: 0; font-size: 14.5px; color: var(--ink-dim); }
.rm-score:empty { display: none; }
.rm-score b { color: var(--riso-green-deep); }
.rm-err { padding: 24px; border: 1.5px dashed var(--line-strong); border-radius: 10px; color: var(--ink-dim); font-style: italic; text-align: center; }
@media (max-width: 760px) {
  .rm-bar { position: static; }
}

/* ── A sheet ─────────────────────────────────────────────────── */
.rm-sheets { display: grid; gap: 26px; }
.rm-sheet { container-type: inline-size; }
.rm-page {
  /* A sheet keeps its own paper colours in either theme. */
  --ink: #1a3a2a; --ink-dim: #4a6859; --line: rgba(26, 58, 42, .16); --line-strong: rgba(26, 58, 42, .38);
  --green-ink: #14583a; --tint: #e8f6ee; --pink-tint: #ffe6f0;
  position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: .55em;
  aspect-ratio: 277 / 188; padding: 1.3em 1.5em 1.2em;
  font-size: clamp(12.5px, 1.05cqw, 15px); line-height: 1.38;
  background: #fff; color: var(--ink); border: 1.5px solid #1a3a2a; border-radius: 6px; box-shadow: 4px 4px 0 var(--riso-pink);
  font-family: var(--font-display);
}
.rm-sh { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .8em; padding-bottom: .4em; border-bottom: 1.5px solid var(--ink); }
.rm-sh h3 { margin: 0; font-family: var(--font-display); font-size: 1.75em; line-height: 1.05; letter-spacing: -.015em; color: var(--ink); }
.rm-part { font-family: var(--font-mono); font-size: .82em; font-weight: 600; letter-spacing: .04em; }
.rm-code { padding: .1em .55em; border: 1.5px solid var(--ink); border-radius: 99px; font-family: var(--font-mono); font-size: .95em; font-weight: 600; }
.rm-sub { font-family: var(--font-mono); font-size: .82em; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.rm-name { margin-left: auto; display: flex; align-items: baseline; gap: .4em; font-family: var(--font-mono); font-size: .82em; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.rm-name i { display: inline-block; width: 16em; border-bottom: 1px solid var(--ink); }

.rm-grid { display: grid; grid-template-columns: var(--tpl, repeat(var(--cols), minmax(0, 1fr))); grid-template-rows: repeat(var(--rows), auto); align-content: stretch; gap: .9em; min-height: 0; }
.rm-hub { position: relative; display: grid; place-items: center; min-height: 6em; }
.rm-spokes { position: absolute; inset: -.9em; width: calc(100% + 1.8em); height: calc(100% + 1.8em); overflow: visible; pointer-events: none; }
.rm-spokes path { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rm-spokes path.g { stroke: #2db876; stroke-width: 2.4; opacity: .55; }
.rm-bub { position: relative; z-index: 1; display: grid; justify-items: center; gap: .1em; max-width: 92%; padding: .9em 1.6em; border: 2px solid var(--ink); border-radius: 999px; background: #fff; box-shadow: .25em .25em 0 #ff7eb6; text-align: center; }
.rm-bub small { font-family: var(--font-mono); font-size: .95em; letter-spacing: .08em; color: var(--ink-dim); }
.rm-bub strong { font-family: var(--font-display); font-size: 2.2em; font-weight: 800; line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }

/* A box on a branch. */
.rm-p { position: relative; z-index: 1; display: flex; flex-direction: column; gap: .35em; min-width: 0; padding: .55em .7em .65em; border: 1.5px solid var(--ink); border-radius: .6em; background: #fff; }
.rm-p.hl { border-style: dashed; border-width: 2px; }
.rm-p h4 { display: flex; align-items: baseline; gap: .45em; margin: 0; font-family: var(--font-display); font-size: 1.12em; font-weight: 700; line-height: 1.15; color: var(--ink); }
.rm-ref { flex: none; font-family: var(--font-mono); font-size: .72em; font-weight: 400; letter-spacing: .02em; color: var(--ink-dim); }
.rm-pt { min-width: 0; }
.rm-hl { margin-left: auto; flex: none; padding: .05em .45em; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--pink-tint); font-family: var(--font-mono); font-size: .7em; font-weight: 700; letter-spacing: .06em; }
.rm-pb { display: flex; flex-direction: column; gap: .35em; min-width: 0; }
.rm-pb p { margin: 0; }

/* A blank: an underline the length of its answer. */
.rm-in { box-sizing: content-box; width: calc(var(--w, 6) * .56em); max-width: calc(100% - .4em); height: 1.18em; margin: 0 .08em; padding: 0 .2em; border: 0; border-bottom: 1.5px dotted var(--ink); border-radius: .2em .2em 0 0; background: transparent; color: var(--green-ink); font: inherit; font-family: var(--font-display); font-weight: 600; line-height: 1.18; vertical-align: baseline; outline: none; }
.rm-in:focus { background: var(--tint); border-bottom: 1.5px solid #2db876; }
.rm-in.ok { background: var(--tint); border-bottom: 2px solid #1a8a55; }
.rm-in.no { background: var(--pink-tint); border-bottom: 2px dashed #e3589c; color: #8a1d52; }
.rm-in[readonly] { border-bottom-style: solid; cursor: default; }
.show-key .rm-in { background: var(--tint); }
.rm-wide { flex: 1 1 auto; width: auto; min-width: 0; }
.rm-num { width: 1.4em; height: 1.4em; margin: 0; padding: 0; border: 1.5px solid var(--ink); border-radius: .25em; text-align: center; }
.rm-num.ok, .rm-num.no { border-width: 2px; }

/* A drawing, with numbered pins on it. */
.rm-fig { min-width: 0; }
.rm-fig-in { position: relative; width: min(100%, calc(var(--fh, 11em) * var(--ar, 1.6))); margin: 0 auto; }
.rm-fig-in > svg { display: block; width: 100%; height: auto; }
.rm-pin { position: absolute; display: grid; place-items: center; width: 1.45em; height: 1.45em; margin: -.725em 0 0 -.725em; border: 1.5px solid #fff; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: .82em; font-weight: 700; line-height: 1; }
.rm-labs { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5em, 1fr)); gap: .25em .7em; margin: 0; padding: 0; list-style: none; }
.rm-labs li { display: flex; align-items: baseline; gap: .35em; min-width: 0; }
.rm-labs .n { flex: none; display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--ink); color: #fff; font-family: var(--font-mono); font-size: .78em; font-weight: 700; }
.rm-label .rm-pb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: .4em .8em; }
.rm-label .rm-labs { grid-template-columns: minmax(0, 1fr); }
.rm-label .rm-cloze { grid-column: 1 / -1; }
.rm-cloze { margin: 0; line-height: 1.55; }
.rm-cloze .rm-in { max-width: 12em; }
/* A paragraph beside its drawing. */
.rm-p.rm-cloze .rm-pb { display: block; }
.rm-p.rm-cloze .rm-fig { float: right; width: 44%; margin: .1em 0 .2em .7em; }
.rm-p.rm-cloze .rm-fig-in { width: 100%; }

/* A table to complete. */
.rm-t { width: 100%; border-collapse: collapse; font-size: .94em; line-height: 1.3; }
.rm-t th, .rm-t td { padding: .22em .4em; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.rm-t thead th { background: var(--tint); font-family: var(--font-display); font-weight: 700; }
.rm-t th[scope="row"] { font-weight: 650; }
.rm-t .rm-in { max-width: calc(100% - .5em); }

/* Steps to number. */
.rm-hint { margin: 0; font-size: .86em; font-style: italic; color: var(--ink-dim); }
.rm-ord { display: grid; gap: .25em; margin: 0; padding: 0; list-style: none; }
.rm-ord li { display: flex; align-items: flex-start; gap: .5em; line-height: 1.3; }
.rm-ord li span { padding-top: .08em; }

/* The word bank, under the boxes when asked for. */
.rm-bank { display: none; flex-wrap: wrap; gap: .3em .4em; align-items: baseline; padding-top: .45em; border-top: 1px dashed var(--line-strong); font-size: .9em; }
.show-bank .rm-bank { display: flex; }
.rm-bank b { margin-right: .3em; font-family: var(--font-mono); font-size: .9em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.rm-bank span { padding: .02em .5em; border: 1px solid var(--line-strong); border-radius: 99px; }

/* ── Laid out as its page, to print ──────────────────────────── */
html.rm-printing .rm-sheets { display: block; }
html.rm-printing .rm-sheet { width: var(--pw, 276mm); }
html.rm-printing .rm-page { height: var(--ph, 188mm); aspect-ratio: auto; min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; font-size: calc(9pt * var(--k, 1)); }
html.rm-printing .rm-page.rm-tall { height: auto; }
html.rm-printing .rm-grid { overflow: hidden; }
html.rm-printing .rm-page.rm-tall .rm-grid { overflow: visible; }
/* Room to write by hand: taller lines, longer blanks. */
html.rm-printing .rm-cloze, html.rm-printing .rm-t td, html.rm-printing .rm-t th { line-height: 1.95; }
html.rm-printing .rm-in { width: calc(var(--w, 6) * .72em); height: 1.3em; }
html.rm-printing .rm-cloze .rm-in { max-width: 16em; }
html.rm-printing .rm-wide { width: auto; }
html.rm-printing .rm-labs { gap: .55em .7em; }
html.rm-printing .rm-labs li { min-height: 1.7em; align-items: flex-end; }
html.rm-printing .rm-num { width: 1.6em; height: 1.6em; }

/* ── A phone: one box under another, at a reading size ───────── */
@media (max-width: 760px) {
  html:not(.rm-printing) .rm-page { aspect-ratio: auto; font-size: 15px; padding: 14px 12px 16px; }
  html:not(.rm-printing) .rm-grid { display: flex; flex-direction: column; gap: 12px; overflow: visible; }
  html:not(.rm-printing) .rm-hub { order: -1; min-height: 0; padding: 4px 0; }
  html:not(.rm-printing) .rm-spokes { display: none; }
  html:not(.rm-printing) .rm-bub strong { font-size: 1.5em; }
  html:not(.rm-printing) .rm-name { display: none; }
  html:not(.rm-printing) .rm-in { height: 1.35em; font-size: 16px; }
  html:not(.rm-printing) .rm-label .rm-pb { grid-template-columns: minmax(0, 1fr); }
  html:not(.rm-printing) .rm-fig-in { --fh: 13em; }
  html:not(.rm-printing) .rm-p.rm-cloze .rm-fig { float: none; width: auto; margin: 0 0 .3em; }
}

/* ── Print: the sheets, one a page ───────────────────────────── */
@media print {
  html, body { background: #fff !important; }
  body > :not(main), main > :not(#rmView), #rmView > :not(#rmSheets) { display: none !important; }
  main.pr-page, #rmView { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .rm-sheet { break-after: page; break-inside: avoid; }
  .rm-sheet:last-child { break-after: auto; }
  .rm-page.rm-tall { break-inside: auto; }
  .rm-bub { box-shadow: none !important; }
  .rm-in, .rm-in:focus { background: transparent; }
  .rm-in.ok, .rm-in.no { background: transparent; border-bottom: 1.5px dotted #1a3a2a; color: #14583a; }
  .show-key .rm-in { background: transparent; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}