/*
  Calmdrill site stylesheet: the exercise binder.
  The full reference is docs/design/DESIGN-SYSTEM.md. Read it before adding a rule here.

  Paper colour says who a sheet is for.
    White  (.sheet)          everyone taking part
    Canary (.sheet--canary)  the controller, which is the customer's AI. Players do not see it.
    Pink   (.sheet--pink)    the evaluator's record: what was done, and what gets filed.

  Two voices.
    Printed   = Archivo. Everything the form had on it before the exercise.
    Filled in = Courier Prime (.typed). Only what was entered during an exercise.

  Contents
    1  Fonts            7  Tables
    2  Tokens           8  Notes, lists and key moments
    3  Base             9  Report, log and order form
    4  Type             10 Questions
    5  Chrome           11 Scenario index and records
    6  Sheets, layout,  12 Drill and scorecard parts
       actions, forms   13 Restacking, small screens, motion, print
*/

/* ===================================================================== 1  Fonts */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-vf.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/assets/fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/assets/fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===================================================================== 2  Tokens */
:root {
  color-scheme: light;

  /* stocks */
  --white: #ffffff;
  --canary: #f5e98a;
  --pink: #f3c3cc;

  /* inks */
  --ink: #000000; /* printing black: text, rules, table heads, the binder edge */
  --ink-soft: #454545; /* secondary printed matter. 9.6:1 on white, 6.2:1 on pink */
  --carbon: #2d2a8c; /* short entries on canary and pink; focus ring; selection */
  --stamp: #bf1f2b; /* the exercise marking, a page, a failure. Nothing else */

  /* state (drill and scorecard only) */
  --ok: #1a6b3c; /* resolved, success */
  --wait: #8a5300; /* waiting on you */
  --bad: var(--stamp); /* a page, a failure */

  /* faces */
  --sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --typed: "Courier Prime", "Courier New", Courier, monospace;

  /* printed scale, 1.25 from 17px */
  --t-cap: 0.8125rem; /* 13  captions, table heads */
  --t-small: 0.9375rem; /* 15  tables, notes, footer */
  --t-body: 1.0625rem; /* 17  reading */
  --t-lead: 1.3125rem; /* 21  lede */
  --t-h3: 1.625rem; /* 26  sub-heading, table caption */
  --t-h2: clamp(2rem, 1.3rem + 2.2vw, 3rem); /* 32 to 48 */
  --t-h1: clamp(3rem, 0.4rem + 9.4vw, 8.2rem); /* fills the sheet on one line at desktop */
  --t-page: clamp(2.6rem, 1rem + 5vw, 4.75rem); /* h1 on every page but the homepage */

  /* typed scale */
  --ty: 1rem; /* 16  entries */
  --ty-out: 0.9375rem; /* 15  terminal output, long report text */
  --ty-read: 1.75rem; /* 28  readings and scores */

  /* space, 8px unit */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --max: 1240px;
  --gutter: clamp(16px, 4vw, 56px);
  --gap: 24px; /* column gutter */
  --part-gap: clamp(72px, 9vw, 128px); /* between parts on one sheet */
  --sheet-pad: clamp(56px, 7.5vw, 112px); /* top and foot of a coloured sheet */
  --measure: 34em; /* prose */
  --rail: 0px; /* the binder edge; set where the fore-edge tabs show */

  /* current stock and entry colour; sheets and objects reset these */
  --stock: var(--white);
  --fill: var(--ink);
}

/* ===================================================================== 3  Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--s5);
}
body {
  margin: 0;
  padding-right: var(--rail);
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-stretch: 94%;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
p,
figure,
dl,
dd,
ol,
ul,
blockquote {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
img,
svg {
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}
a:hover {
  text-decoration-thickness: 3px;
}
:focus-visible {
  outline: 3px solid var(--carbon);
  outline-offset: 3px;
}
::selection {
  background: var(--carbon);
  color: #fff;
}
b,
strong {
  font-weight: 700;
}
hr {
  border: 0;
  border-top: 2px solid var(--ink);
  margin: var(--s7) 0;
}
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 8px;
  top: -80px;
  z-index: 30;
  background: var(--ink);
  color: #fff;
  padding: 10px 14px;
}
.skip:focus {
  top: 8px;
}
.nowrap {
  white-space: nowrap;
}
p,
li,
dd,
td {
  text-wrap: pretty;
}

/* ===================================================================== 4  Type
   The printed voice. Archivo at three widths: extra-condensed heavy for titles,
   semi-condensed semibold for captions, 94% for reading. */
h1 {
  font-size: var(--t-page);
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.92;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.home h1 {
  font-size: var(--t-h1);
  line-height: 0.9;
}
h2 {
  font-size: var(--t-h2);
  font-weight: 750;
  font-stretch: 66%;
  line-height: 1;
  text-wrap: balance;
  max-width: 19ch;
}
h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  font-stretch: 75%;
  line-height: 1.1;
}
h4 {
  font-size: var(--t-body);
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1.3;
}
.lede {
  font-size: var(--t-lead);
  line-height: 1.4;
  max-width: 33em;
}
.prose {
  max-width: var(--measure);
}
.prose > * + * {
  margin-top: 0.9em;
}
.prose > h2,
.prose > h3 {
  margin-top: 1.6em;
}
.prose > h2 + *,
.prose > h3 + * {
  margin-top: 0.6em;
}
/* Lists. A dash for each item, a number for each step. .dashes gives the same dash list
   outside .prose (typed entries in a form cell); a briefing's lists take it too. */
.prose ul > li,
.prose ol > li,
.dashes > li,
.briefing > ul > li {
  position: relative;
  padding-left: 1.2em;
}
.prose ul > li + li,
.prose ol > li + li,
.dashes > li + li,
.briefing > ul > li + li {
  margin-top: 0.4em;
}
.prose ul > li::before,
.dashes > li::before,
.briefing > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.55em;
  border-top: 2px solid var(--ink);
}
.prose ol {
  counter-reset: li;
}
.prose ol > li {
  counter-increment: li;
}
.prose ol > li::before {
  content: counter(li) ".";
  position: absolute;
  left: 0;
  font-weight: 700;
}
.small {
  font-size: var(--t-small);
}
.soft {
  color: var(--ink-soft);
}
/* a printed caption: a form box's label, a table head, a list term */
.cap {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: var(--t-cap);
  font-weight: 600;
  font-stretch: 88%;
  line-height: 1.25;
}

/* The filled-in voice. Only what was entered during an exercise. */
.typed {
  font-family: var(--typed);
  font-size: var(--ty);
  font-stretch: 100%;
  line-height: 1.45;
  color: var(--fill);
}
.typed--b {
  font-weight: 700;
}
/* long typed text (report evidence, actions) is black on every stock */
.typed--long {
  font-size: var(--ty-out);
  line-height: 1.5;
  color: var(--ink);
}
code,
kbd,
pre,
samp {
  font-family: var(--typed);
  font-size: 0.94em;
  font-stretch: 100%;
}
pre {
  margin: 0;
  font-size: var(--ty-out);
  line-height: 1.4;
  color: var(--fill);
  white-space: pre;
  overflow-x: auto;
}
/* machine output: never wraps; scrolls inside its own box */
.out {
  display: block;
  max-width: 100%;
  padding: 10px 12px 12px;
  border: 1.5px solid var(--ink);
  background: var(--stock);
}

/* ===================================================================== 5  Chrome
   Masthead, tab index and colophon. Markup in site/src/partials/layout.html. */
.masthead {
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px var(--gutter);
}
.masthead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--ink);
  font-size: 1.625rem;
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.brand svg {
  flex: none;
  width: 28px;
  height: 28px;
}
.issuer {
  font-size: var(--t-cap);
  font-weight: 600;
  font-stretch: 88%;
  text-align: right;
}

/* The tab index. One 44px row under the masthead; fore-edge tabs on wide, tall windows. */
.tabs {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.tabs ul {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 2px solid var(--ink);
}
.tabs li {
  flex: 1 1 auto;
}
.tab {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 10px;
  border: 1.5px solid var(--ink);
  border-bottom: 0;
  background: var(--white);
  color: var(--ink);
  font-size: var(--t-cap);
  font-weight: 650;
  font-stretch: 85%;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
.tab--pink {
  background: var(--pink);
}
.tab--go {
  background: var(--ink);
  color: #fff;
}
.tab:hover,
.tab:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.tab[aria-current] {
  background: var(--ink);
  color: #fff;
  font-weight: 800;
}
.tab--go[aria-current],
.tab--go:hover,
.tab--go:focus-visible {
  background: var(--white);
  color: var(--ink);
}
.tab:focus-visible {
  outline-offset: -6px;
}
.tab--go:focus-visible {
  outline-color: var(--canary);
}
@media (max-width: 559px) {
  .tabs {
    padding: 0;
  }
  .tabs ul {
    gap: 0;
  }
  .tab {
    padding: 0 7px;
    border-width: 0 0 0 1px;
    font-size: 0.78rem;
    font-stretch: 78%;
  }
  .tabs li:first-child .tab {
    border-left: 0;
  }
  .tab-x {
    display: none;
  }
}

@media (min-width: 1100px) and (min-height: 700px) {
  :root {
    --rail: 52px;
  }
  /* the tabs leave the top edge, so the masthead carries the rule */
  .masthead-row {
    border-bottom: 2px solid var(--ink);
  }
  .tabs {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 20;
    width: var(--rail);
    max-width: none;
    margin: 0;
    padding: 12px 0 0;
    background: var(--ink);
  }
  .tabs ul {
    flex-direction: column;
    gap: 3px;
    overflow: visible;
    border: 0;
  }
  .tabs li {
    flex: none;
  }
  .tabs li:first-child {
    margin-bottom: 14px;
  }
  .tab {
    writing-mode: vertical-rl;
    width: 38px;
    min-height: 0;
    padding: 14px 0 15px;
    border: 0;
    border-radius: 0 7px 7px 0;
  }
  .tab--go {
    box-shadow: inset -2px 0 0 #fff, inset 0 2px 0 #fff, inset 0 -2px 0 #fff;
  }
  .tab:hover,
  .tab:focus-visible {
    width: 46px;
    text-decoration: none;
  }
  /* the current tab stands out further, in its own stock, and is set heavier */
  .tab[aria-current] {
    width: 50px;
    background: var(--white);
    color: var(--ink);
  }
  .tab--pink[aria-current] {
    background: var(--pink);
  }
  .tab:focus-visible {
    outline-offset: -5px;
  }
}

/* The colophon */
.colophon {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  font-size: var(--t-small);
}
.colophon-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s6) var(--gap);
  padding-block: var(--s6) var(--s7);
  border-top: 2px solid var(--ink);
}
.colophon-grid > div {
  grid-column: span 6;
}
.colophon-grid > nav {
  grid-column: span 2;
}
.colophon-grid > div p {
  max-width: 26em;
  margin-top: 10px;
}
.colophon h2 {
  max-width: none;
  margin-bottom: 8px;
  font-size: var(--t-small);
  font-weight: 750;
  font-stretch: 80%;
  line-height: 1.3;
}
.colophon li + li {
  margin-top: 5px;
}
.colophon .legal {
  padding-block: 12px 18px;
  border-top: 1px solid var(--ink);
  font-size: var(--t-cap);
  line-height: 1.45;
}
@media (max-width: 900px) {
  .colophon-grid > div {
    grid-column: 1 / -1;
  }
  .colophon-grid > nav {
    grid-column: span 4;
  }
}
@media (max-width: 559px) {
  .colophon-grid {
    row-gap: var(--s5);
  }
  .colophon-grid > nav {
    grid-column: span 6;
  }
  .colophon li a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .colophon li + li {
    margin-top: 0;
  }
}

/* ===================================================================== 6  Sheets */
.sheet {
  --stock: var(--white);
  --fill: var(--ink);
  background: var(--stock);
  padding-block: var(--s4) var(--sheet-pad);
}
.sheet--canary {
  --stock: var(--canary);
  --fill: var(--carbon);
}
.sheet--pink {
  --stock: var(--pink);
  --fill: var(--carbon);
}
/* a sheet that follows another opens with its handling line, after a full margin */
.sheet + .sheet {
  padding-top: var(--sheet-pad);
}
.sheet--first {
  padding-top: 0;
}
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap > * + .part,
.wrap > .part + * {
  margin-top: var(--part-gap);
}
.wrap > .sheet-head + * {
  margin-top: 0;
}
/* who a coloured sheet is for, set where a document carries its handling line */
.sheet-head {
  margin-bottom: clamp(32px, 4.5vw, 64px);
  padding-bottom: 9px;
  border-bottom: 2px solid var(--ink);
  font-size: var(--t-small);
  font-stretch: 88%;
  line-height: 1.35;
}
.sheet-head b {
  font-weight: 750;
}

/* A page title block, for every page but the homepage */
.page-title {
  padding-top: clamp(28px, 4vw, 56px);
}
.page-title .lede {
  margin-top: var(--s5);
}
/* A title row: the lede (and anything under it) in columns 1 to 7, and in 9 to 12 what
   goes beside it: the page's caveat, or its actions. Replaces .page-title .lede's margin. */
.title-row {
  display: grid;
  gap: var(--s5) var(--gap);
  margin-top: var(--s5);
}
.title-row > * {
  min-width: 0;
}
.page-title .title-row .lede {
  margin-top: 0;
}
@media (min-width: 1024px) {
  .title-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .title-row > :first-child {
    grid-column: 1 / span 7;
  }
  .title-row > :last-child {
    grid-column: 9 / span 4;
    padding-top: 6px;
  }
}
/* A short page (404, checkout error). The sheet holds the colophon below the fold;
   .page-next is the one form saying what to do next, and its actions follow it. */
.sheet--short {
  min-height: 60vh;
}
.page-next {
  max-width: 48rem;
  margin-top: var(--s6);
}
.page-next + .acts {
  margin-top: var(--s5);
}

/* ---------- The homepage's opening ---------- */
.hero {
  padding-top: clamp(24px, 3.4vw, 44px);
}
.hero-row {
  display: grid;
  gap: var(--s5) var(--gap);
  margin-top: clamp(24px, 2.8vw, 36px);
}
.hero-acts .onward {
  margin-top: var(--s2);
}
@media (min-width: 1024px) {
  .hero-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .hero-row .lede {
    grid-column: 1 / span 7;
  }
  .hero-row .hero-acts {
    grid-column: 9 / span 4;
    padding-top: 4px;
  }
}
.hero-slip {
  margin-top: clamp(36px, 5vw, 64px);
}

/* ---------- One layout for every part ----------
   Heading in columns 1 to 8, supporting text in 9 to 12, the object underneath.
   A split part keeps its object in 1 to 8 and lets the side run beside it. */
.part {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s5) var(--gap);
  align-items: start;
}
.part > .side:not(.prose),
.part > div.aside {
  display: grid;
  gap: var(--s6);
  align-content: start;
}
.part > .side.prose > * + * {
  margin-top: 0.9em;
}
.part > .main,
.part > .after,
.part > .aside {
  margin-top: var(--s2);
  min-width: 0;
}
@media (min-width: 1024px) {
  .part {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: var(--s6);
  }
  .part > h2,
  .part > .head {
    grid-column: 1 / span 8;
  }
  .part > .side {
    grid-column: 9 / span 4;
    padding-top: 6px;
  }
  .part > .main,
  .part > .after {
    grid-column: 1 / -1;
    margin-top: var(--s2);
  }
  .part > .main--8 {
    grid-column: 1 / span 8;
  }
  .part > .aside {
    grid-column: 9 / span 4;
    margin-top: var(--s2);
  }
  /* split: the object starts under the heading; the side text runs down beside it,
     and an .aside (if any) follows the side text. On a phone the order is the markup's:
     heading, side, object, aside. */
  .part--split {
    grid-template-rows: auto auto 1fr;
  }
  .part--split > h2,
  .part--split > .head {
    grid-row: 1;
  }
  .part--split > .side {
    grid-row: 1 / span 2;
  }
  .part--split > .main {
    grid-column: 1 / span 8;
    grid-row: 2 / span 2;
  }
  .part--split > .aside {
    grid-column: 9 / span 4;
    grid-row: 3;
  }
  /* a part whose heading spans the sheet and whose text sits under it */
  .part--wide > h2 {
    max-width: 24ch;
  }
}

/* ---------- Actions ----------
   Plain rectangles. Solid black is the one to press; outline for every other. */
.act {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 0.6em 1.1em;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.act:hover,
.act:focus-visible {
  background: var(--ink);
  color: #fff;
}
.act--solid {
  background: var(--ink);
  color: #fff;
}
.act--solid:hover,
.act--solid:focus-visible {
  background: var(--stock);
  color: var(--ink);
}
.acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
}
/* a checkout form in a row of actions behaves as its button */
.acts > form {
  display: flex;
  margin: 0;
}
.acts > form > .act {
  flex: 1 1 auto;
}
/* stacked full-width in a side column on wide screens; a row until then */
@media (min-width: 1024px) {
  .acts--stack {
    flex-direction: column;
    align-items: stretch;
  }
}
.line .acts--stack {
  flex-direction: column;
  align-items: stretch;
}
/* a link that leaves for the next document, set after the actions */
.onward {
  font-size: var(--t-small);
  font-weight: 650;
  font-stretch: 88%;
}
.onward a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ---------- Form boxes ----------
   A form is a 2px black box. Cells are divided by 1px rules: caption top-left, value beneath.
   Prose is never boxed. */
.form {
  display: grid;
  gap: 1px;
  background: var(--ink);
  border: 2px solid var(--ink);
}
.row {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr));
}
.n2 {
  --n: 2;
}
.n3 {
  --n: 3;
}
.n4 {
  --n: 4;
}
.cell {
  min-width: 0;
  padding: 7px 12px 11px;
  background: var(--stock);
}
.cell > .typed {
  display: block;
}
.form-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--s5);
  padding: 9px 12px 8px;
  background: var(--stock);
}
.form-head .name {
  font-size: 1.5rem;
  font-weight: 800;
  font-stretch: 70%;
  line-height: 1.1;
}
.signoff .cell {
  min-height: 4.6rem;
}
@media (max-width: 620px) {
  .row.n4,
  .row.n3 {
    --n: 2;
  }
  .row.s1 {
    --n: 1;
  }
  .row.signoff {
    --n: 3;
  }
  .row.n3:not(.signoff) > .cell:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- The exercise message (an inject slip, canary) ---------- */
.slip {
  --stock: var(--canary);
  --fill: var(--carbon);
}
.slip-meta {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .slip-meta {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .slip-meta .cell {
    grid-column: span 2;
  }
  .slip-meta .cell:nth-child(-n + 2) {
    grid-column: span 3;
  }
}
.slip .message {
  padding: 9px 12px 20px;
}
.slip .message .typed {
  font-weight: 700;
}
.hero-slip .message .typed {
  font-size: clamp(1.3rem, 0.55rem + 3.1vw, 3.1rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
/* a page arriving: the one alert colour */
.slip--page {
  border-color: var(--stamp);
  background: var(--stamp);
  box-shadow: 0 0 0 2px var(--stamp);
}
/* The exercise marking. It opens and closes exercise traffic, and appears nowhere else. */
.exmark {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin: 0;
  padding: 8px 12px 5px;
  background: var(--stock);
  color: var(--stamp);
  font-size: 1.375rem;
  font-weight: 800;
  font-stretch: 62%;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
/* a figure caption under an object */
.caption {
  max-width: 62em;
  margin-top: var(--s3);
  color: var(--ink-soft);
  font-size: var(--t-small);
}
.caption + .caption {
  margin-top: var(--s1);
}
.caption b {
  color: var(--ink);
}
/* a square of stock, used where the stock rule is stated */
.swatch {
  display: inline-block;
  width: 0.78em;
  height: 0.78em;
  margin: 0 0.35em 0 0.15em;
  border: 1.5px solid var(--ink);
  background: var(--white);
  vertical-align: -0.04em;
}
.swatch--canary {
  background: var(--canary);
}
.swatch--pink {
  background: var(--pink);
}

/* tick boxes: only where the paper really has them */
.ticks li {
  display: flex;
  align-items: baseline;
}
.ticks li + li {
  margin-top: 6px;
}
.box {
  display: inline-grid;
  flex: none;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.5em;
  border: 1.5px solid var(--ink);
  transform: translateY(0.14em);
}

/* difficulty: four boxes, n filled. Always followed by a .vh "n of 4". */
.diff {
  display: inline-flex;
  gap: 3px;
  margin-right: 0.3em;
  vertical-align: -1px;
}
.diff i {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--ink);
}
.diff i.on {
  background: var(--ink);
}

/* ===================================================================== 7  Tables
   Default: the reference table. Rules between rows, a 2px rule under the head, no
   vertical rules. For prose pages, markdown output and anything read rather than filled.
   .ruled: the word-processor events list. Solid black head and a full grid. Only for
   exercise documents: events list, schedule, rubric, improvement actions. */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-small);
  line-height: 1.45;
}
caption {
  caption-side: top;
  padding-bottom: var(--s3);
  font-size: var(--t-h3);
  font-weight: 700;
  font-stretch: 75%;
  line-height: 1.1;
  text-align: left;
}
caption small {
  display: block;
  max-width: 44em;
  margin-top: 6px;
  color: var(--ink-soft);
  font-size: var(--t-small);
  font-weight: 400;
  font-stretch: 94%;
  line-height: 1.4;
}
th,
td {
  padding: 10px 16px 12px 0;
  border-bottom: 1px solid var(--ink);
  text-align: left;
  vertical-align: top;
}
thead th {
  padding-block: 0 8px;
  border-bottom: 2px solid var(--ink);
  font-size: var(--t-cap);
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.25;
  vertical-align: bottom;
}
tbody th {
  font-weight: 700;
}
tbody th a {
  text-decoration-thickness: 1px;
}
tbody tr:last-child > * {
  border-bottom-width: 2px;
}
/* a reference table keyed by its row heads (a framework, a pack item, a file section):
   the row head is set at reading size so it reads as the term being defined */
.keyed tbody th {
  font-size: var(--t-body);
  font-stretch: 85%;
  line-height: 1.3;
}
/* the last row set apart: a total, or the option this page is about */
tr.last > * {
  border-top: 2px solid var(--ink);
}
.table-scroll {
  max-width: 100%;
  overflow-x: auto;
}

/* The ruled table */
table.ruled {
  border: 2px solid var(--ink);
}
.ruled th,
.ruled td {
  padding: 9px 12px 11px;
  border: 1px solid var(--ink);
}
.ruled thead th {
  padding-block: 7px 8px;
  border-color: var(--ink);
  border-right-color: rgb(255 255 255 / 0.4);
  background: var(--ink);
  color: #fff;
}
.ruled thead th:last-child {
  border-right-color: var(--ink);
}
.ruled tbody tr:last-child > * {
  border-bottom-width: 1px;
}
td.typed,
th.typed {
  font-size: var(--ty);
  line-height: 1.45;
}
td.typed--long {
  font-size: var(--ty-out);
  line-height: 1.5;
}
td.score {
  font-size: var(--ty-read);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.tally {
  font-size: var(--t-lead);
  line-height: 1.4;
}
.table-note {
  max-width: 44em;
  margin-top: 14px;
}
.only-small {
  display: none;
}
/* a caption that is hidden while the table has its head, and shown when it restacks */
caption.vh-wide {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .stack caption.vh-wide {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    padding-bottom: var(--s2);
    font-size: var(--t-body);
    font-weight: 750;
    font-stretch: 80%;
  }
}

/* column measures for the homepage's documents */
.compare thead th:first-child {
  width: 22%;
}
.sched thead th:nth-child(1) {
  width: 5.5rem;
}
.sched thead th:nth-child(2) {
  width: 9rem;
}
.sched thead th:nth-child(3) {
  width: 8.5rem;
}
.sched .at {
  font-size: var(--t-lead);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.sched tbody th {
  font-size: var(--t-body);
  font-stretch: 85%;
}
.sched .who {
  font-weight: 650;
  font-stretch: 88%;
}

.msel thead th:nth-child(1) {
  width: 3.4rem;
}
.msel thead th:nth-child(2) {
  width: 6.4rem;
}
.msel thead th:nth-child(3) {
  width: 13rem;
}
.msel thead th:nth-child(4) {
  width: 14rem;
}
.msel thead th:nth-child(5) {
  width: 5.4rem;
}
.rubric thead th:first-child {
  width: 11rem;
}
.rubric thead th:nth-child(2) {
  width: 6.2rem;
}
.actions thead th:first-child {
  width: 2.9rem;
}

/* ===================================================================== 8  Notes, lists, key moments */

/* Note: the single setting for every compliance caveat. Placed beside what it qualifies. */
.note {
  display: grid;
  grid-template-columns: max-content minmax(0, 40em);
  column-gap: 0.55em;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
  font-size: var(--t-small);
  line-height: 1.45;
}
.note > b:first-child {
  font-weight: 750;
  font-stretch: 85%;
}
@media (max-width: 519px) {
  .note {
    display: block;
  }
}

/* Plain facts: a term and a short definition, not boxed */
.facts dt {
  font-weight: 750;
  font-stretch: 80%;
}
.facts dd {
  max-width: 33em;
}
.facts dd + dt {
  margin-top: var(--s4);
}

/* Steps: a short set-up sequence, numbered like a set-up sheet. Three or four steps, each an
   h3 and a sentence or two. .steps--3 sets three across from 860px; .steps--4 two across
   from 620px and four from 1024px. */
.steps {
  display: grid;
  gap: var(--s5) var(--gap);
  counter-reset: step;
}
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  column-gap: var(--s3);
  align-content: start;
  padding-top: var(--s3);
  border-top: 2px solid var(--ink);
}
.steps > li::before {
  content: counter(step);
  grid-row: span 2;
  font-size: 2.75rem;
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
}
.steps h3 {
  margin-bottom: var(--s2);
}
.steps p {
  max-width: 30em;
}
.steps code {
  overflow-wrap: anywhere;
}
@media (min-width: 860px) {
  .steps--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 620px) {
  .steps--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {
  .steps--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Two-column reference list: frameworks and their references */
.reflist {
  display: grid;
  grid-template-columns: minmax(6.5rem, max-content) minmax(0, 1fr);
  border-top: 2px solid var(--ink);
  font-size: var(--t-small);
  line-height: 1.4;
}
.reflist > dt,
.reflist > dd {
  padding: 7px 0 8px;
  border-bottom: 1px solid var(--ink);
}
.reflist > dt {
  padding-right: var(--s4);
  font-weight: 700;
  font-stretch: 88%;
}
.reflist-head {
  margin-bottom: var(--s2);
}

/* Key moments: the times that matter, read before the scores */
.moments {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
}
/* the outcome closes the block on its own line */
.moments > .outcome {
  grid-column: 1 / -1;
}
.moments > .outcome dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--s4);
}
.moments > div {
  min-width: 0;
  padding: 7px 12px 11px;
  background: var(--stock);
}
.moments dt {
  font-size: var(--t-cap);
  font-weight: 600;
  font-stretch: 88%;
  line-height: 1.25;
}
.moments dd {
  margin-top: 3px;
  color: var(--fill);
  font-family: var(--typed);
  font-size: var(--ty-read);
  font-weight: 700;
  line-height: 1.05;
  font-stretch: 100%;
}
.moments dd small {
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 400;
  font-stretch: 94%;
  line-height: 1.35;
}
@media (max-width: 760px) {
  .moments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===================================================================== 9  Report, log, order form */
.report {
  display: grid;
  gap: var(--s4);
}
.report .form-head .small {
  color: var(--ink-soft);
}
.report .typed--long {
  max-width: 62ch;
}
.signature {
  margin-top: var(--s3);
  text-wrap: balance;
  font-size: var(--t-lead);
  font-weight: 700;
  font-stretch: 80%;
  line-height: 1.25;
}

/* The exercise log: the evaluator's running record (pink) */
.exlog {
  --stock: var(--pink);
  --fill: var(--carbon);
  border: 2px solid var(--ink);
  background: var(--pink);
}
.exlog > h2,
.exlog > h3 {
  max-width: none;
  padding: 7px 12px 8px;
  background: var(--ink);
  color: #fff;
  font-size: var(--t-cap);
  font-weight: 650;
  font-stretch: 88%;
  line-height: 1.25;
}
.exlog li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  gap: 0 10px;
  padding: 7px 12px 9px;
  border-top: 1px solid var(--ink);
  color: var(--fill);
  font-family: var(--typed);
  font-size: var(--ty);
  line-height: 1.4;
}
.exlog li:first-child {
  border-top: 0;
}
.exlog li pre {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 7px 9px 8px;
  border: 1px solid var(--ink);
}
.exlog-foot {
  padding: 8px 12px 10px;
  border-top: 1px solid var(--ink);
  font-size: var(--t-cap);
  font-stretch: 88%;
  line-height: 1.4;
}

/* The order form: one box, one line per edition */
.order {
  border: 2px solid var(--ink);
}
.order-head,
.line {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 5fr) minmax(0, 4fr);
}
.order-head {
  background: var(--ink);
  color: #fff;
  font-size: var(--t-cap);
  font-weight: 650;
  font-stretch: 88%;
}
.order-head span {
  padding: 7px 14px 8px;
}
.line {
  border-top: 2px solid var(--ink);
}
.order-head + .line {
  border-top: 0;
}
.line > div {
  min-width: 0;
  padding: 20px 16px 24px;
}
.line > div + div {
  border-left: 1px solid var(--ink);
}
.line h3 {
  font-size: 2.5rem;
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.95;
}
.line .for {
  margin-top: var(--s2);
}
.inc li {
  position: relative;
  max-width: 34em;
  padding-left: 1.1em;
}
.inc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0.5em;
  border-top: 2px solid var(--ink);
}
.inc li + li {
  margin-top: 5px;
}
.price {
  font-size: 3.25rem;
  font-weight: 800;
  font-stretch: 62%;
  line-height: 0.9;
}
.price small {
  margin-left: 4px;
  font-size: var(--t-small);
  font-weight: 500;
  font-stretch: 88%;
}
.line .terms {
  margin: var(--s2) 0 var(--s4);
  font-size: var(--t-small);
}
.line form {
  margin: 0;
}
.line .act {
  width: 100%;
}
/* the foot of the list: not an edition */
.line--plain {
  background: var(--white);
}
.line--plain h3 {
  font-size: var(--t-h3);
  font-weight: 700;
  font-stretch: 75%;
  line-height: 1.1;
}
.line--plain .acts {
  gap: 10px;
}
.order-terms {
  max-width: 44em;
  margin-top: 14px;
  font-size: var(--t-small);
}
@media (max-width: 900px) {
  .order-head {
    display: none;
  }
  .line {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--s4);
    align-items: start;
    padding: 18px 14px 22px;
  }
  .line > div {
    display: contents;
  }
  .line > div > * {
    grid-column: 1 / -1;
    order: 6;
  }
  .line h3 {
    grid-column: 1;
    order: 1;
    font-size: 2.25rem;
  }
  .line .price {
    grid-column: 2;
    order: 2;
    font-size: 2.25rem;
    line-height: 0.95;
    text-align: right;
  }
  .line .price small {
    display: block;
    margin: 4px 0 0;
    line-height: 1.2;
  }
  .line .for {
    order: 3;
  }
  .line .terms {
    order: 5;
    margin: 4px 0 0;
  }
  .line .inc {
    margin-block: 14px 18px;
  }
  .line form,
  .line .acts,
  .line > div > .act {
    order: 7;
  }
  .line--plain h3 {
    grid-column: 1 / -1;
    font-size: var(--t-h3);
  }
  .line--plain p:not(.acts) {
    margin-block: var(--s2) var(--s4);
  }
}

/* ===================================================================== 10  Questions
   Printed open, question beside answer. Closed on a phone, where they add screens. */
.qa {
  border-top: 2px solid var(--ink);
}
.qa-item {
  border-bottom: 1px solid var(--ink);
}
.qa-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 48px;
  padding: 12px 0 13px;
  list-style: none;
  cursor: pointer;
  font-size: 1.375rem;
  font-weight: 700;
  font-stretch: 75%;
  line-height: 1.15;
}
.qa-item summary::-webkit-details-marker {
  display: none;
}
.qa-item summary::after {
  content: "+";
  flex: none;
  font-weight: 500;
  font-stretch: 100%;
}
.qa-item[open] summary::after {
  content: "\2212";
}
.qa-item .ans {
  max-width: var(--measure);
  padding-bottom: 20px;
}
.qa-item .ans > * + * {
  margin-top: var(--s4);
}
@media (min-width: 860px) {
  .qa-item {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gap);
    padding: 20px 0 24px;
  }
  .qa-item summary {
    grid-column: 1 / span 4;
    display: block;
    min-height: 0;
    padding: 0;
    font-size: var(--t-h3);
    text-wrap: balance;
    cursor: text;
    pointer-events: none;
  }
  .qa-item summary::after {
    content: none;
  }
  .qa-item::details-content {
    grid-column: 5 / -1;
    display: block;
    content-visibility: visible;
  }
  .qa-item .ans {
    padding-bottom: 0;
  }
}

/* ===================================================================== 11  Scenarios
   Markup generated by scripts/build-site.mjs (scenarioCards, scenarioDetails). */

/* The index: a reference table, one row a scenario */
.index thead th:nth-child(1) {
  width: 4.6rem;
}
.index thead th:nth-child(2) {
  width: 15.5rem;
}
.index thead th:nth-child(3) {
  width: 10.5rem;
}
.index thead th:nth-child(4) {
  width: 6.4rem;
}
.index thead th:nth-child(5) {
  width: 6.6rem;
}
.index tbody th {
  font-size: var(--t-body);
  font-stretch: 88%;
  line-height: 1.25;
}
.index td:first-child {
  font-weight: 700;
}

/* A scenario record (scenario catalogue) */
.record {
  padding-top: var(--s5);
  border-top: 2px solid var(--ink);
  scroll-margin-top: var(--s5);
}
.record + .record {
  margin-top: var(--part-gap);
}
.record-code {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--t-h3);
  font-weight: 700;
  font-stretch: 75%;
  line-height: 1.1;
}
.record h2 {
  max-width: 22ch;
}
.record > .form {
  margin-top: var(--s5);
}
.record-grid {
  display: grid;
  gap: var(--s6) var(--gap);
  margin-top: var(--s5);
}
.record-grid > * {
  min-width: 0;
}
@media (min-width: 1024px) {
  .record-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .record-grid > .record-main {
    grid-column: 1 / span 7;
  }
  .record-grid > .record-side {
    grid-column: 9 / span 4;
  }
}
.record h3 {
  margin: var(--s6) 0 var(--s3);
}
.record-main > h3:first-child {
  margin-top: 0;
}
.record-side {
  display: grid;
  gap: var(--s6);
  align-content: start;
}
.record .reflist-head {
  margin: 0 0 var(--s2);
}
.objectives {
  counter-reset: o;
  display: grid;
  gap: 6px;
  max-width: 40em;
}
.objectives li {
  counter-increment: o;
  display: grid;
  grid-template-columns: 1.6em minmax(0, 1fr);
}
.objectives li::before {
  content: counter(o) ".";
  font-weight: 700;
}
/* the player briefing: printed matter, with its opening page set as a slip */
.briefing {
  display: grid;
  gap: 14px;
  max-width: var(--measure);
}
.briefing > *,
.briefing blockquote > * {
  margin: 0;
}
.briefing em {
  font-style: normal;
}
.briefing blockquote {
  max-width: 36rem;
  padding: 10px 12px 12px;
  border: 2px solid var(--ink);
  background: var(--canary);
  color: var(--carbon);
  font-family: var(--typed);
  font-size: var(--ty);
  font-stretch: 100%;
}
.briefing blockquote code {
  font-size: 1em;
  overflow-wrap: anywhere;
}
.briefing blockquote strong {
  font-weight: 700;
}
.held {
  --stock: var(--canary);
  --fill: var(--carbon);
  margin-top: var(--s6);
}

/* ===================================================================== 12  Drill and scorecard parts
   Shared by /drill and /scorecard. Page layout lives in each page's own stylesheet. */
.choices {
  display: grid;
  gap: 10px;
}
/* a real choice among options, so a real tick box */
.choice {
  --x: 0%;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: 0 var(--s3);
  width: 100%;
  min-height: 48px;
  padding: 13px 16px 14px 14px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: var(--t-body);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.choice::before {
  content: "";
  width: 1.15em;
  height: 1.15em;
  margin-top: 0.14em;
  border: 2px solid var(--ink);
  background:
    linear-gradient(45deg, transparent calc(50% - 1.3px), var(--ink) calc(50% - 1.3px), var(--ink) calc(50% + 1.3px), transparent calc(50% + 1.3px)),
    linear-gradient(-45deg, transparent calc(50% - 1.3px), var(--ink) calc(50% - 1.3px), var(--ink) calc(50% + 1.3px), transparent calc(50% + 1.3px));
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--x) var(--x);
}
.choice:hover,
.choice:focus-visible {
  --x: 100%;
  background: var(--canary);
}
.choice .k {
  font-weight: 800;
  font-stretch: 75%;
}
/* one action, not a choice: a plain button */
.choice--again {
  display: inline-flex;
  justify-self: start;
  width: auto;
  font-weight: 650;
  font-stretch: 88%;
}
.choice--again::before {
  content: none;
}
.choice--again:hover,
.choice--again:focus-visible {
  background: var(--ink);
  color: #fff;
}
/* state words: always beside a word, never colour alone */
.state-ok {
  color: var(--ok);
}
.state-wait {
  color: var(--wait);
}
.state-bad {
  color: var(--bad);
}

/* ===================================================================== 13  Restacking
   Below 860px (.stack-lg) or 700px (.stack) each row of a table becomes a compact record.
   The generators and page markup write role="table", "row", "cell", "rowheader" and
   "columnheader" so a restacked table is still announced as a table. */
@media (max-width: 860px) {
  .stack-lg,
  table.stack-lg.ruled {
    border: 0;
  }
  .stack-lg thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .stack-lg,
  .stack-lg caption,
  .stack-lg tbody,
  .stack-lg th,
  .stack-lg td {
    display: block;
  }
  .stack-lg tr {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 2px solid var(--ink);
  }
  .stack-lg tr + tr {
    margin-top: var(--s3);
  }
  .stack-lg tbody th,
  .stack-lg td {
    grid-column: 1 / -1;
    width: auto;
    padding: 7px 10px 9px;
    border: 0;
    border-top: 1px solid var(--ink);
  }
  .stack-lg tr > :first-child {
    border-top: 0;
  }
  .stack-lg td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-cap);
    font-weight: 600;
    font-stretch: 88%;
    line-height: 1.25;
  }

  /* events list: no. | time, deliver, from | via, inject */
  .msel td:nth-child(1) {
    grid-column: span 2;
  }
  .msel td:nth-child(2) {
    grid-column: span 4;
    border-top: 0;
    border-left: 1px solid var(--ink);
  }
  .msel td:nth-child(4) {
    grid-column: span 4;
  }
  .msel td:nth-child(5) {
    grid-column: span 2;
    border-left: 1px solid var(--ink);
  }

  /* scenario index: one ruled list. code | title, then type | difficulty | runs for */
  .index tbody {
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
  }
  .index tr {
    grid-template-columns: 3.6rem minmax(0, 1fr) auto auto;
    gap: 2px var(--s3);
    align-items: center;
    padding: 10px 0 12px;
    border: 0;
    border-top: 1px solid var(--ink);
  }
  .index tr:first-child {
    border-top: 0;
  }
  .index tr + tr {
    margin-top: 0;
  }
  .index tbody th,
  .index td {
    grid-column: auto;
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .index tbody th {
    grid-column: 2 / -1;
  }
  .index td:nth-child(3) {
    grid-column: 2;
  }
  .index td:nth-child(5) {
    min-width: 5.2rem;
    text-align: right;
    white-space: nowrap;
  }
  .index td:nth-child(6) {
    grid-column: 2 / -1;
    margin-top: 4px;
    color: var(--ink-soft);
  }
}
@media (max-width: 700px) {
  .stack,
  table.stack.ruled {
    border: 0;
  }
  .stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .stack,
  .stack caption,
  .stack tbody,
  .stack th,
  .stack td {
    display: block;
  }
  .stack tr {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    border: 2px solid var(--ink);
  }
  .stack tr + tr {
    margin-top: var(--s3);
  }
  .stack tbody th,
  .stack td {
    grid-column: 1 / -1;
    width: auto;
    padding: 7px 10px 9px;
    border: 0;
    border-top: 1px solid var(--ink);
  }
  .stack tr > :first-child {
    border-top: 0;
  }
  .stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--t-cap);
    font-weight: 600;
    font-stretch: 88%;
    line-height: 1.25;
  }
  /* a reference table restacks into ruled records, not boxes */
  .stack:not(.ruled) tr {
    border: 0;
    border-top: 1px solid var(--ink);
    padding-block: 4px 8px;
  }
  .stack:not(.ruled) tr + tr {
    margin-top: 0;
  }
  .stack:not(.ruled) tbody {
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
  }
  .stack:not(.ruled) tbody tr:first-child {
    border-top: 0;
  }
  .stack:not(.ruled) tbody th,
  .stack:not(.ruled) td {
    padding: 6px 0;
    border: 0;
  }
  .stack:not(.ruled) tr.last {
    border-top-width: 2px;
  }

  /* options: name, then cost | needs, covers | evidence */
  .compare td:nth-child(n + 2) {
    grid-column: span 3;
  }
  .compare td:nth-child(odd) {
    padding-left: var(--s3);
  }
  /* schedule: elapsed | activity, who, text */
  .sched td:nth-child(1) {
    grid-column: span 2;
  }
  .sched tbody th {
    grid-column: span 4;
    border-top: 0;
    border-left: 1px solid var(--ink);
  }
  .sched tr.cont {
    margin-top: 0;
    border-top: 0;
  }
  /* rubric: dimension | score, evidence */
  .rubric tbody th {
    grid-column: span 4;
  }
  .rubric td:nth-child(2) {
    grid-column: span 2;
    border-top: 0;
    border-left: 1px solid var(--ink);
  }
  /* actions: no. | action, owner | due | status */
  .actions td:nth-child(1) {
    grid-column: span 1;
  }
  .actions td:nth-child(2) {
    grid-column: span 5;
    border-top: 0;
    border-left: 1px solid var(--ink);
  }
  .actions td:nth-child(n + 3) {
    grid-column: span 2;
    white-space: normal;
  }
  .actions td:nth-child(n + 4) {
    border-left: 1px solid var(--ink);
  }
}
@media (max-width: 600px) {
  :root {
    --part-gap: 64px;
    --sheet-pad: 52px;
  }
  .more {
    display: none !important;
  }
  .only-small {
    display: block;
  }
  .index td:nth-child(6) {
    display: none;
  }
}
@media (max-width: 520px) {
  .lede {
    font-size: 1.1875rem;
  }
  .exmark {
    font-size: 1.125rem;
  }
  .brand {
    font-size: 1.4375rem;
  }
  .acts {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .choice::before {
    transition: background-size 0.14s ease-out;
  }
  .tab {
    transition: width 0.12s ease-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Printed, the homepage is the binder: each sheet starts a page and keeps its stock. */
@media print {
  .tabs,
  .skip {
    display: none;
  }
  body {
    padding-right: 0;
  }
  .sheet {
    padding-block: 12px 24px;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .sheet + .sheet {
    break-before: page;
  }
  table,
  .form,
  .exlog,
  .line,
  .record {
    break-inside: avoid;
  }
  .qa-item summary::after {
    content: none;
  }
  .qa-item::details-content {
    content-visibility: visible;
  }
}

/* ===================================================================== 14  The binder (the physical layer)
   Everything above describes the paperwork. This makes it an object: a cloth-covered board, sheets
   of stock with edges and punched holes, index tabs standing proud of the fore-edge, printed foot
   lines and rubber stamps. Each device states something true (which copy, which sheet, when a page
   was received); none is ornament. Physical effects live here and nowhere else. */
:root {
  --board: #1b1c1f; /* binder board, black buckram */
  --sheet-max: 1352px; /* a sheet: the 1240 measure plus its margins */
  --edge: calc(max(0px, (100% - var(--max)) / 2) + var(--gutter)); /* where printed matter starts on a sheet */
  /* the same edge for the chrome, whose padding percentages measure the window, not the sheet */
  --edge-out: calc(max(0px, (min(100%, var(--sheet-max)) - var(--max)) / 2) + var(--gutter));
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .028 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
html {
  background: var(--board);
}
body {
  background-color: var(--board);
  /* buckram: a fine weave, lighter threads across, darker down */
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.022) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 4px);
}
.ink-defs {
  position: absolute;
}
main {
  display: block;
  counter-reset: sheet;
  overflow-x: clip;
}

/* The first sheet starts at the masthead: masthead, tab row and sheet are one piece of paper. */
.masthead {
  max-width: var(--sheet-max);
  margin-top: clamp(10px, 1.8vw, 26px);
  padding-inline: var(--edge-out);
  background: var(--white) var(--grain);
}
.tabs {
  max-width: var(--sheet-max);
  padding-inline: var(--edge-out);
  background: var(--white) var(--grain);
}
@media (max-width: 559px) {
  .tabs {
    padding-inline: 0;
  }
}

/* A sheet of stock */
.sheet {
  display: flow-root; /* a first child's margin must not open a gap above the paper */
  position: relative;
  max-width: var(--sheet-max);
  margin-inline: auto;
  padding-bottom: calc(var(--sheet-pad) + 34px);
  background: var(--grain), var(--stock);
  box-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.95);
  counter-increment: sheet;
}
.sheet + .sheet {
  margin-top: clamp(12px, 2vw, 28px);
}
/* the printed foot of every sheet: edition and copy on the left, sheet number on the right */
.sheet::before,
.sheet::after {
  position: absolute;
  bottom: 15px;
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 600;
  font-stretch: 84%;
  line-height: 1.3;
  letter-spacing: 0.015em;
}
.sheet::before {
  content: "Calmdrill exercise binder, edition 1.0. White: participant copy.";
  left: var(--edge);
  right: calc(var(--edge) + 7.5em);
}
.sheet--canary::before {
  content: "Calmdrill exercise binder, edition 1.0. Canary: controller\2019s copy, not for players.";
}
.sheet--pink::before {
  content: "Calmdrill exercise binder, edition 1.0. Pink: evaluator\2019s record.";
}
.sheet::after {
  content: "Sheet " counter(sheet) " of " var(--sheets, "1");
  right: var(--edge);
  font-variant-numeric: tabular-nums;
}

/* Punched for a three-ring binder: 108 mm between holes, the board showing through. */
@media (min-width: 1100px) {
  .sheet {
    background:
      radial-gradient(circle at 23px 50%, var(--board) 0 8px, rgba(0, 0, 0, 0.3) 8px 9.4px, transparent 10px) 0 0 / 46px 408px no-repeat space,
      var(--grain),
      var(--stock);
  }
}

/* The index tabs stand proud of the fore-edge, on the board. */
@media (min-width: 1100px) and (min-height: 700px) {
  .tabs {
    inset: 0 auto 0 min(calc(100% - var(--rail)), calc((100% - var(--rail)) / 2 + var(--sheet-max) / 2));
    padding: clamp(40px, 6vh, 72px) 0 0;
    background: none;
  }
  .tab {
    box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.9);
  }
  .tab--go {
    box-shadow: inset -2px 0 0 #fff, inset 0 2px 0 #fff, inset 0 -2px 0 #fff, 0 6px 12px -6px rgba(0, 0, 0, 0.9);
  }
}

/* The colophon is printed inside the back board. */
.colophon {
  max-width: var(--sheet-max);
  margin-top: clamp(20px, 3vw, 44px);
  padding-inline: var(--edge-out);
  color: #e9e5db;
}
.colophon a,
.colophon .brand {
  color: inherit;
}
.colophon-grid {
  border-top: 0;
}
.colophon .legal {
  border-top-color: rgba(255, 255, 255, 0.28);
  color: #bdb9af;
}
.colophon :focus-visible {
  outline-color: var(--canary);
}

/* ---------- Rubber stamps ----------
   Capitals, a ruled border, struck slightly off square, in stamp-pad ink. A stamp records a fact
   about the sheet it is on (received, whose copy, draft). Never a slogan. */
.stamp {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 15px 6px;
  border: 3px solid currentColor;
  border-radius: 5px;
  color: var(--stamp);
  font-size: 1.3rem;
  font-weight: 800;
  font-stretch: 66%;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.84;
  mix-blend-mode: multiply;
  transform: rotate(var(--tilt, -5deg));
  filter: url(#ink);
  pointer-events: none;
  user-select: none;
}
.stamp small {
  font-size: 0.62em;
  font-weight: 700;
  font-stretch: 78%;
  letter-spacing: 0.13em;
}
.stamp--violet {
  color: var(--carbon);
}
.stamp--frame {
  outline: 1.5px solid currentColor;
  outline-offset: 3px;
}
/* on a sheet's handling line: struck at its right-hand end */
.sheet-head {
  position: relative;
}
.sheet-head .stamp {
  right: 0;
  bottom: 14px;
  --tilt: 3.5deg;
}
@media (min-width: 760px) {
  .sheet-head:has(.stamp) {
    padding-right: 15rem;
  }
}
@media (max-width: 759px) {
  .sheet-head .stamp {
    position: static;
    margin: 0 0 14px;
    font-size: 1.05rem;
    display: inline-flex;
  }
  .sheet-head:has(.stamp) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .sheet-head:has(.stamp) > :not(.stamp) {
    display: inline;
  }
}
/* beside a page title */
.page-title {
  position: relative;
}
.page-title > .stamp {
  right: 0;
  top: clamp(34px, 5vw, 70px);
  --tilt: 6deg;
  font-size: clamp(1.1rem, 0.7rem + 1.2vw, 1.9rem);
}

/* ---------- The hero slip is an object: stapled to the sheet, a touch off square ---------- */
.hero-slip {
  position: relative;
}
.hero-slip .slip {
  position: relative;
  transform: rotate(-0.35deg);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 30px 46px -30px rgba(0, 0, 0, 0.6);
}
/* the staple, through the slip's top corner */
.hero-slip::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 13px;
  left: clamp(-7px, -0.5vw, -4px);
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(#f2f2f2, #b9b9b9 45%, #6a6a6a);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.55), 0 2px 2px rgba(0, 0, 0, 0.35);
  transform: rotate(-38deg);
}
.slip .message {
  position: relative;
}
.stamp--received {
  right: clamp(10px, 2.4vw, 30px);
  bottom: clamp(10px, 1.6vw, 22px);
  --tilt: -7deg;
  font-size: clamp(0.95rem, 0.55rem + 1.3vw, 1.7rem);
}
@media (max-width: 700px) {
  /* no room beside the message on a phone: the stamp goes under it, at the right */
  .stamp--received {
    position: static;
    display: flex;
    width: max-content;
    margin: 12px 0 0 auto;
    padding: 6px 10px 5px;
    border-width: 2px;
    font-size: 1.05rem;
  }
}
/* the marking is printed on the sheet itself */
.sheet > .wrap > .exmark {
  background: none;
}
/* the typed message: what has been struck so far, the rest holding its place */
.ty-rest {
  visibility: hidden;
}
.ty-on .ty-done::after {
  content: "";
  display: inline-block;
  width: 0.56em;
  height: 0.95em;
  margin-left: 1px;
  background: currentColor;
  vertical-align: -0.12em;
}

/* One orchestrated moment: the page arrives, is typed, and is stamped received. */
@media (prefers-reduced-motion: no-preference) {
  .hero-slip .slip {
    animation: slip-in 0.75s cubic-bezier(0.2, 0.9, 0.25, 1.12) 0.15s both;
  }
  .hero-slip::before {
    animation: staple-in 0.2s ease-out 0.85s both;
  }
  .stamp--received {
    animation: stamp-in 0.26s cubic-bezier(0.2, 1.5, 0.4, 1) 2.9s both;
  }
}
@keyframes slip-in {
  from {
    opacity: 0;
    transform: translateY(-34px) rotate(-2.4deg);
  }
  to {
    opacity: 1;
    transform: rotate(-0.35deg);
  }
}
@keyframes staple-in {
  from {
    opacity: 0;
    transform: rotate(-38deg) scale(1.6);
  }
  to {
    opacity: 1;
    transform: rotate(-38deg);
  }
}
@keyframes stamp-in {
  from {
    opacity: 0;
    transform: rotate(var(--tilt, -5deg)) scale(1.9);
  }
  to {
    opacity: 0.84;
    transform: rotate(var(--tilt, -5deg)) scale(1);
  }
}

/* ---------- A tick made with a pen, not a cross drawn by a ruler ---------- */
.choice::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.5 13.2c2.2 1.6 3.9 3.6 5.2 6.1C11.4 12.6 15.6 7 21.6 2.6' fill='none' stroke='%232d2a8c' stroke-width='3.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / var(--x) var(--x) no-repeat;
  overflow: visible;
}
.choice:hover::before,
.choice:focus-visible::before {
  background-size: 135% 135%;
  background-position: 30% 60%;
}

@media print {
  html,
  body {
    background: #fff;
  }
  .sheet {
    box-shadow: none;
    background: var(--stock);
  }
  .sheet + .sheet {
    margin-top: 0;
  }
  .colophon {
    color: #000;
  }
}

/* ===================================================================== 15  A binder in use
   Colour the way a working binder gets it: a fourth stock for the order copy, a highlighter,
   a blue pen in the margin, coloured flags on the index. Each marks something true. */
@font-face {
  font-family: "Reenie Beanie";
  src: url("/assets/fonts/reenie-beanie-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root {
  --green: #bfe5c6; /* the order copy */
  --marker: #c9f451; /* highlighter */
  --pen: #1e3fc2; /* ballpoint */
  --flag-reliability: #2c74d6;
  --flag-security: #ef7d22;
  --flag-continuity: #1f9d62;
}
.sheet--green {
  --stock: var(--green);
  --fill: var(--carbon);
}
.sheet--green::before {
  content: "Calmdrill exercise binder, edition 1.0. Green: order copy.";
}
.swatch--green {
  background: var(--green);
}

/* highlighter: one pass of a chisel tip, not a box */
.hl {
  padding: 0.05em 0.22em 0.02em;
  margin-inline: -0.1em;
  border-radius: 0.5em 0.2em 0.6em 0.25em / 0.3em 0.6em 0.25em 0.5em;
  background: linear-gradient(178deg, transparent 6%, var(--marker) 14% 88%, transparent 96%);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
tr.hl-row > * {
  background: linear-gradient(179deg, transparent 9%, var(--marker) 16% 86%, transparent 93%);
}
tr.hl-row > :first-child {
  border-radius: 12px 0 0 9px;
  box-shadow: -10px 0 0 -2px var(--marker);
}

/* a note in ballpoint */
.pen {
  max-width: 14em;
  color: var(--pen);
  font-family: "Reenie Beanie", "Bradley Hand", "Segoe Print", cursive;
  font-size: 2.45rem;
  font-stretch: 100%;
  line-height: 0.88;
  text-shadow: 0 0 0.6px currentColor, 0.3px 0 0 currentColor;
  letter-spacing: 0.01em;
  transform: rotate(-3deg);
  transform-origin: left center;
}
.pen svg {
  display: inline-block;
  vertical-align: -30px;
  margin-left: 4px;
}
.prose > .pen--down {
  margin-top: var(--s5);
}
.pen--bar {
  max-width: none;
  margin: 8px 0 22px 6px;
  transform: rotate(-1.2deg);
}
.pen--price {
  margin: 6px 0 2px;
  font-size: 2.1rem;
  margin-top: 14px;
  transform: rotate(-4deg);
}
/* ringed in pen */
.circled {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.circled::after {
  content: "";
  position: absolute;
  inset: -24% -13% -26% -15%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M22 58C14 22 70 6 122 8c44 2 70 18 68 44-2 28-52 42-104 40C44 90 8 76 12 48c3-20 34-34 70-38' fill='none' stroke='%231e3fc2' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  pointer-events: none;
}

/* the exercise as a bar of time, on the stock of whoever is working */
.timebar {
  display: flex;
  border: 2px solid var(--ink);
  font-size: var(--t-cap);
  font-stretch: 88%;
  line-height: 1.25;
}
.tb {
  min-width: 0;
  padding: 10px 12px 11px;
}
.tb + .tb {
  border-left: 2px solid var(--ink);
}
.tb b {
  display: block;
  font-size: var(--t-small);
  font-weight: 800;
  font-stretch: 78%;
}
.tb--setup {
  flex: 10 1 0;
  background: var(--white);
}
.tb--play {
  flex: 45 1 0;
  background: var(--canary);
}
.tb--debrief {
  flex: 15 1 0;
  background: var(--pink);
}
@media (max-width: 620px) {
  .tb {
    padding: 8px 7px 9px;
  }
  .tb--setup {
    flex-basis: 3.6em;
  }
  .tb--debrief {
    flex-basis: 5.6em;
  }
}

/* index flags: one colour a scenario type */
.flag {
  display: inline-block;
  width: 24px;
  height: 12px;
  margin-right: 8px;
  background: var(--flag-reliability);
  clip-path: polygon(0 0, 100% 0, 80% 50%, 100% 100%, 0 100%);
  vertical-align: -1px;
}
.flag--security {
  background: var(--flag-security);
}
.flag--continuity {
  background: var(--flag-continuity);
}

/* an edition whose checkout link is not set yet (site/src/checkout.json) */
.act--pending {
  border-style: dashed;
  background: none;
  color: var(--ink-soft);
  cursor: default;
}