@font-face {
  font-family: 'Grotesk'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('fonts/inter-var.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500 600;
  font-display: swap; src: url('fonts/jetbrains-mono-500.woff2') format('woff2');
}

* { box-sizing: border-box; }

html, body { background: #F3F5F8; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 450;
  letter-spacing: -0.02em;
  color: #0F1B2D;
  -webkit-font-smoothing: antialiased;
}
/* code keeps its own spacing */
[data-s*="JetBrains"], code, .mono { letter-spacing: 0; }

.sheet {
  max-width: 1440px;
  margin: 0 auto;
  min-height: 100vh;
  background: #F3F5F8;
  display: flex;
  flex-direction: column;
}

/* THE grid. Every horizontal measure on the page comes from these values. The
   column count steps 12 -> 8 -> 4; between the steps the columns are fluid
   fractions, never fixed widths; gutter and margin close in with the viewport but
   never leave the unit (2U to 3U, 2U to MARGIN). The type scale is not in here. */
:root {
  --cols: 12; --side: 4; --ms: 5; --per: 3;
  --sans: 'Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --gut: clamp(16px, 1.67vw, 24px);
  --margin: clamp(16px, 2.5vw, 36px);
}
@media (max-width: 1199px) { :root { --cols: 8; --per: 2; } }
@media (max-width: 599px) { :root { --cols: 4; --ms: 1; } }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gut);
  padding-left: var(--margin);
  padding-right: var(--margin);
}

/* The masthead and the title divide at the same column line. */
.lead { grid-column: 1 / span var(--side); min-width: 0; }
.rest { grid-column: var(--ms) / -1; min-width: 0; }
/* A vertical rule sits in the middle of the gutter, never on a column edge. */
.ruled { position: relative; }
.ruled::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--gut) / -2); width: 1px; background: var(--rule, rgba(15,27,45,0.15));
}

.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.fl { font-size: 12px; font-weight: 580; color: #5A677C; display: block; }

/* ---- the bar: who is being tested, the views, who is looking ---- */
.bar { min-height: 64px; align-items: center; row-gap: 8px;
        padding-block: 12px; border-bottom: 1px solid rgba(15,27,45,0.15); }
.bar-who { grid-column: 1 / 5; display: flex; align-items: center; gap: 12px;
            min-width: 0; }
.logo { width: 40px; height: 40px; background: #0B1F3A; display: flex;
         align-items: center; justify-content: center; flex: none; }
.who-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.who-name { font-size: 16px; font-weight: 580; line-height: 1.2; }
.who-sub { font-size: 12px; color: #5A677C; }
.tabs { grid-column: 5 / 9; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.tabs a { font-size: 14px; font-weight: 580; color: #5A677C; padding-block: 4px;
           border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs a.on { color: #0F1B2D; border-bottom-color: #0F1B2D; }
.bar-viewer { grid-column: 9 / -1; display: flex; flex-direction: column; gap: 2px;
               min-width: 0; }
.bar-viewer .mono { font-size: 13px; overflow-wrap: anywhere; }

/* ---- the top: the title, the verdict beside it, what the sheet is, its facts ---- */
.top { padding-block: 40px; row-gap: 32px; align-items: start; }
.t-title { grid-column: 1 / 9; grid-row: 1; }
.eyebrow { font-size: 12px; font-weight: 580; color: #4A5870; display: block; }
.t-title h1 { font-size: 64px; font-weight: 780; letter-spacing: -0.008em;
               line-height: 1; margin: 16px 0 0; color: #0F1B2D; text-wrap: balance; }
.t-title h1 .sub { color: #76839A; }
/* The one place a colour may shout, and absent when nothing needs a person. */
.verdict { grid-column: 9 / -1; grid-row: 1 / span 2; background: var(--v-bg);
            color: var(--v-ink); padding: 20px 20px 8px;
            align-self: start; }
.v-head { display: flex; align-items: center; gap: 10px; font-size: 20px;
           font-weight: 580; line-height: 1.2; padding-bottom: 16px; }
.v-head svg { flex: none; }
.v-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px;
          align-items: baseline; padding-block: 10px; border-top: 1px solid var(--v-rule);
          font-size: 14px; }
.v-row .ref { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px;
               letter-spacing: 0; }
.v-row .v-state { font-size: 12px; font-weight: 580; }
.v-none { font-size: 14px; padding: 10px 0; border-top: 1px solid var(--v-rule); margin: 0; }
.t-intro { grid-column: 1 / 5; grid-row: 2; display: flex; flex-direction: column;
            gap: 16px; align-items: flex-start; }
.t-intro p { font-size: 16px; line-height: 1.5; color: #4A5870; margin: 0;
              max-width: 34em; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
          column-gap: var(--gut); row-gap: 16px; }
.t-facts { grid-column: 5 / 9; grid-row: 2; }
.fact { border-top: 1px solid rgba(15,27,45,0.15); padding-top: 8px; min-width: 0; }
.fact .fv { display: block; font-size: 20px; font-weight: 580; line-height: 1.3;
             margin-top: 2px; color: #0F1B2D; }
.fact .fv.mono { font-size: 16px; line-height: 26px; overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap; }

/* ---- level one: the artefact, and the report's outline run across it ---- */
.hero { background: #0B1F3A; --rule: #23385A; padding-top: 32px;
         padding-bottom: 24px; row-gap: 32px; align-items: start;
         scroll-margin-top: 16px; }
.b-id { grid-column: 1 / 5; display: flex; align-items: center; gap: 16px;
         min-width: 0; }
.b-id .fl { color: #8C9BB3; }
.b-title { font-size: 24px; font-weight: 580; letter-spacing: -0.011em; line-height: 1.1;
            color: #FFFFFF; margin: 2px 0 0; }
.b-facts { grid-column: 5 / 9; }
.b-facts .fact { border-top-color: #23385A; }
.b-facts .fl { color: #8C9BB3; }
.b-facts .fv { color: #FFFFFF; }
.b-desc { grid-column: 9 / -1; font-size: 14px; line-height: 1.6; color: #B4C0D3;
           margin: 0; }
/* Twelve cells on twelve columns: eleven sections, and the seal they end in. */
.rail { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
         --rg: var(--gut); row-gap: 24px; padding-top: 24px;
         border-top: 1px solid #23385A; overflow: hidden; }
.rcell { display: block; min-width: 0; }
.rcell .rt, .rcell .rs { display: block; }
.rcell .thr { position: absolute; left: 0; right: calc(var(--rg) * -1);
               top: 11px; height: 2px; }

/* ---- level two: the sections ---- */
.content { padding-top: 24px; padding-bottom: 24px; }
.sections { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
             align-content: start; }
.lvl { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid rgba(15,27,45,0.15); }

/* Cards flow three to a row, or two on eight columns. The basis is one module and
   the last row widens to fill, so two leftover cards take six columns each and one
   takes the row: always on a column line, never a hole. A card is a field, so cards
   are parted by the gutter, across and down, rather than by rules. */
.run { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--gut);
        padding: var(--gut) 0; border-bottom: 1px solid rgba(15,27,45,0.15); }
.card { flex: 1 1 calc((100% - 2 * var(--gut)) / 3 - 1px); min-width: 0;
         display: flex; flex-direction: column; overflow: hidden;
         position: relative; container-type: inline-size;
         scroll-margin-top: 16px; }

/* A card is a poster: the state as a field, the text inset, and a strip cut from the
   section's mark along the foot, bleeding to both edges and clipped where it ends. */
.lv-text { padding: 24px 24px 32px; flex: 1; }
.lv-art { display: flex; overflow: hidden; height: 96px; }
/* A card alone on its row does not stretch the strip across it. The strip keeps one
   module's width, stands in the bottom-right corner at nine tenths of the card's
   height, scaled whole and read from its anchor, running off the right edge. The
   text keeps the columns to its left. Half-row pairs
   and phone widths stay under 800 and keep the strip along the foot. */
@container (min-width: 800px) {
  .lv-text { padding-right: calc((100% - (var(--per) - 1) * var(--gut)) / var(--per)
                                  + var(--gut) + 24px); }
  .lv-art { position: absolute; right: 0; bottom: 0; height: 90%;
             width: calc((100% - (var(--per) - 1) * var(--gut)) / var(--per)); }
  .lv-art svg { height: 100%; width: auto; }
}

/* Mark, then text on an axis eight units in — in a card and in a band alike. */
.s-head { display: flex; align-items: flex-start; gap: 16px; min-width: 0; }
.card .b-body { padding-left: 64px; margin-top: 12px; }

/* A section that carries more than a sentence is a full row, on the columns. */
.band { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
         row-gap: 16px; align-items: start; align-content: start;
         padding: 24px 0; border-bottom: 1px solid rgba(15,27,45,0.15);
         scroll-margin-top: 16px; }
.band.filled { border-bottom: none; }
.b-head { grid-column: 1 / 5; }
.b-body { grid-column: 5 / 9; grid-row: 1; min-width: 0; }
.b-full { grid-column: 1 / -1; padding-left: 64px; min-width: 0; }
.b-bleed { grid-column: 1 / -1; min-width: 0; }
.b-fig { grid-column: 1 / 5; min-width: 0; }
.b-meas { grid-column: 5 / -1; min-width: 0; }

/* ---- level three: the record ---- */
.records { padding-top: 8px; padding-bottom: 24px; row-gap: 24px; }
.rec-a { grid-column: 1 / 7; min-width: 0; }
.rec-b { grid-column: 7 / -1; min-width: 0; }
.rec-full { grid-column: 1 / -1; min-width: 0; }

@media (max-width: 1199px) {
  .t-title h1 .sub { display: block; }
  .t-title { grid-column: 1 / 5; }
  .verdict { grid-column: 5 / -1; grid-row: 1 / span 2; }
  .t-intro { grid-row: 2 / span 2; }
  .t-facts { grid-column: 5 / -1; grid-row: 3; }
  .tabs, .bar-viewer, .b-facts { grid-column: 5 / -1; }
  .b-desc { grid-column: 1 / 5; grid-row: 2; }
  /* The rail keeps its twelve cells, closer set; the cards below carry the titles. */
  .rail { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 8px;
           --rg: 8px; }
  .rcell .rt, .rcell .rs { display: none; }
  .card { flex-basis: calc((100% - var(--gut)) / 2 - 1px); }
  .b-body { grid-column: 5 / -1; }
  .rec-a { grid-column: 1 / 5; }
  .rec-b { grid-column: 5 / -1; }
}
@media (max-width: 599px) {
  .lead, .rest, .b-head, .b-body, .b-fig, .b-meas, .rec-a, .rec-b,
  .bar-who, .tabs, .bar-viewer, .t-title, .verdict, .t-intro, .t-facts,
  .b-id, .b-facts, .b-desc { grid-column: 1 / -1; grid-row: auto; }
  .t-title h1 { font-size: 52px; }
  .top { padding-block: 24px; row-gap: 24px; }
  .bar-viewer { flex-direction: row; align-items: baseline; gap: 8px; }
  .ruled::before { display: none; }
  .rail { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .card { flex-basis: 100%; }
  .b-body { grid-row: auto; padding-left: 64px; margin-top: -8px; }
  .subline { white-space: normal; }
  .actor { flex-wrap: wrap; row-gap: 2px; padding-block: 8px !important; }
  .actor > span:first-child { flex-basis: 100% !important; }
  .lv-art { height: 64px; }
  .plate { height: var(--mod); }
  .plate svg:first-child { margin-left: calc(var(--margin) - var(--gut) / 2
                                              - var(--mod) / 2); }
  .lv-text { padding-bottom: 24px; }
}

/* links and the one affordance style */
a { color: inherit; text-decoration: none; }
a.hit:hover, button.hit:enabled:hover, summary.hit:hover { opacity: .78; }
a.hit:focus-visible, button.hit:focus-visible, summary.hit:focus-visible {
  outline: 2px solid #0F1B2D; outline-offset: 3px; opacity: 1; }
.hero a.hit:focus-visible, .logo a:focus-visible { outline-color: #FFFFFF; }
/* The way past the bar, for a keyboard: out of sight until it takes focus. */
.skip { position: absolute; left: var(--margin); top: 8px; z-index: 10;
         transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
main:focus { outline: none; }
.cta { display: inline-flex; align-items: center; font-size: 14px; font-weight: 580;
        color: #FFFFFF; background: #0B1F3A; padding: 0 16px;
        height: 40px;
        white-space: nowrap; }

/* a state: a square and a word */
.state { display: inline-flex; align-items: center; gap: 8px;
          font-family: var(--sans);
          font-size: 13px; font-weight: 580; white-space: nowrap; }
.state i { width: 9px; height: 9px; flex: none; }
.subline { white-space: nowrap; }
#s05 .b-full { max-width: 904px; }
button.hit { font-family: inherit; border: none; border-radius: 0; cursor: pointer; padding: 0; }
button.hit.cta { padding: 0 16px; }
/* A button has two states past hover and focus. Busy: its form is on its way, so it
   takes no second press and pulses in place, still the vault. Disabled: nobody can act,
   so it goes the slate of a state nobody can act on. Neither dims on hover. */
button.hit:disabled { cursor: default; opacity: 1; }
button.hit.cta:disabled { background: #DFE3EA; color: #38404D; }
button.hit.cta[aria-busy=true] { background: #0B1F3A; color: #FFFFFF; cursor: progress;
                                  animation: blink 2s ease-in-out infinite; }
.s-action { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: center;
             gap: 8px 16px; }
.s-action .note { font-size: 12px; color: #4A5870; }

/* A destructive act (ds.DANGER_*, ds.CONFIRM_*, ds.DESTROY_*). The first button only
   asks: paper, the alarm family's dark step as type and edge. The question is a
   decision, so a CORL field; the button that does it is the family's dark step. */
a.hit.danger { display: inline-flex; align-items: center; gap: 8px;
               height: 40px; padding: 0 16px; font-size: 14px;
               font-weight: 580; white-space: nowrap; color: #9E2412;
               box-shadow: inset 0 0 0 1px #9E2412; }
.confirm { background: #F6BFB2; color: #2A0701; padding: 16px;
            margin: 0 0 24px; }
.confirm:focus { outline: none; }
.confirm .c-ask { display: flex; align-items: center; gap: 8px; margin: 0;
                   font-size: 16px; font-weight: 640; color: #9E2412; }
.confirm .c-what { margin: 8px 0 0; font-size: 14px; max-width: 44em;
                    color: #2A0701; }
.confirm .s-action label { color: #2A0701; }
.confirm .s-action a.link { color: #2A0701; font-size: 14px; }
button.hit.cta.destroy { background: #9E2412; color: #FCE0D8; }

/* ---- the documents: the same sheet, the same three levels (histor.console.document) ---- */
/* Level one: the outline, the rail set on the paper. Cells sit on the columns. */
.outline { border-bottom: 1px solid rgba(15,27,45,0.15); padding-block: 24px; scroll-margin-top: 0; }
.o-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
          row-gap: 24px; overflow: hidden; }
.ocell { grid-column: span var(--span); display: block; min-width: 0; }
.o-mark { position: relative; display: block; height: 24px; }
.o-mark .thr { position: absolute; left: 0; right: calc(var(--gut) * -1);
                top: 11px; height: 2px; }
.ocell:last-child .thr { display: none; }
.o-ref { display: block; margin-top: 8px; font-family: 'JetBrains Mono', monospace;
          font-size: 11px; color: #5A677C; letter-spacing: 0; }
.o-title { display: block; margin-top: 4px; font-size: 14px; line-height: 18px;
            color: #0F1B2D; font-weight: 580; }
.o-state { display: block; margin-top: 4px; }

/* The plate: the sheet's mark as a strip, muted, bleeding edge to edge as the floor
   of the title. Each of the motif's columns is one module of the grid (a column and
   a gutter), so its edges stand in the gutters' centres like every vertical rule;
   it is two modules tall, and on a phone half that. Repeated and clipped. */
.sheet { container-type: inline-size; }
.plate { --mod: calc((100cqw - 2 * var(--margin) + var(--gut)) / var(--cols));
          display: flex; overflow: hidden; height: calc(var(--mod) * 2); }
.plate svg { flex: none; height: 100%; width: auto; display: block; }
.plate svg:first-child { margin-left: calc(var(--margin) - var(--gut) / 2 - var(--mod)); }

/* Level two: a part is a band. Its head on the first four columns, standing while the
   part scrolls past; its content on the last eight. */
.doc { padding-top: 0; }
.part { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
         row-gap: 16px; align-items: start; padding: 32px 0;
         border-bottom: 1px solid rgba(15,27,45,0.15); scroll-margin-top: 16px; }
.part.filled { border-bottom: none; }
.p-head { grid-column: 1 / 5; position: sticky; top: 16px; }
.p-body { grid-column: 5 / -1; min-width: 0; }
.p-body > :first-child { margin-top: 0; }
.p-wide { grid-column: 1 / -1; padding-left: 64px; }
.p-lead { font-size: 16px; line-height: 24px; margin: 0 0 24px;
           max-width: 40em; }
.p-note { font-size: 14px; line-height: 20px; color: #4A5870;
           margin: 16px 0 0; max-width: 44em; }
.p-note .mono, .p-lead .mono { font-size: 13px; }
.p-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
          min-height: 32px; margin: 32px 0 8px; }
.p-sub-t { font-size: 16px; font-weight: 580; color: #0F1B2D; }
.p-sub .state { margin-left: auto; }
.p-group { margin-top: 24px; }
.p-group .tab { margin-top: 8px; }
.p-actions { display: flex; flex-wrap: wrap; gap: 8px 16px;
              align-items: center;
              margin-top: 24px; }
.mono.m { font-size: 13px; font-weight: 500; overflow-wrap: anywhere; }

/* Facts: a ruled row each, the label on two of the eight columns, the value on the
   rest, so every value on every sheet starts on the same line. */
.kv { margin: 0; }
.kv-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
           column-gap: var(--gut); padding-block: 12px;
           border-top: 1px solid rgba(15,27,45,0.15); align-items: baseline; }
.kv-row:last-child { border-bottom: 1px solid rgba(15,27,45,0.15); }
.kv dt { grid-column: 1 / var(--from); font-size: 12px; font-weight: 580;
          color: #5A677C; }
.kv dd { grid-column: var(--from) / -1; margin: 0; min-width: 0; font-size: 14px;
          line-height: 20px; color: #0F1B2D; }
.kv dd .state { vertical-align: middle; }
.kv .state, .tab .state { white-space: normal; align-items: baseline; }
.kv .state i, .tab .state i { transform: translateY(1px); }
.v-name, .kv dd, .prose, .p-lead, .p-note { overflow-wrap: anywhere; }

/* Tables: rows on the same columns. */
.tab { font-size: 14px; }
.tab .tr { display: grid; grid-template-columns: repeat(var(--tc), minmax(0, 1fr));
            column-gap: var(--gut); align-items: center; min-height: 40px;
            padding-block: 4px; border-top: 1px solid rgba(15,27,45,0.15); }
.tab .tr:last-child { border-bottom: 1px solid rgba(15,27,45,0.15); }
.tab .th { min-height: 32px; border-top: none; }
.tab .th span { font-size: 12px; font-weight: 580; color: #5A677C; }
.tab [role=cell], .tab [role=columnheader] { grid-column: span var(--span); min-width: 0;
                                              overflow-wrap: anywhere; }
.g-track { position: relative; display: block; height: 16px;
            background: rgba(15,27,45,0.07); }
.g-val { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 500;
          letter-spacing: 0; font-variant-numeric: tabular-nums; }
.g-scope { display: block; font-size: 12px; color: #5A677C; }
.raw { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 18px;
        color: #4A5870; background: #E6E9EE; padding: 16px;
        margin: 16px 0 0;
        overflow-x: auto; white-space: pre-wrap; word-break: break-word; letter-spacing: 0; }
/* The disclosure: the chev, turned down when open, in place of the browser's marker. */
details.raw-wrap summary { cursor: pointer; font-size: 14px; font-weight: 580;
                            color: #4A5870; list-style: none; display: inline-flex;
                            align-items: center; gap: 8px; }
details.raw-wrap summary::-webkit-details-marker { display: none; }
details.raw-wrap summary svg { flex: none; }
details.raw-wrap[open] > summary svg { transform: rotate(90deg); }

/* The answer to an action: a field, because it is a state, set at the part it is about. */
.said { display: flex; align-items: flex-start; gap: 12px;
         padding: 16px; margin: 0 0 24px; font-size: 14px;
         line-height: 20px; font-weight: 580; }
.said svg { flex: none; margin-top: 2px; }
.said .then { display: block; margin-top: 8px; font-weight: 450; }
.said .then b { font-weight: 580; }
.grid > .said, .sheet > .said { grid-column: 1 / -1; }

/* Level three. */
.doc-record { padding-top: 32px; }
.rec-head { display: flex; align-items: baseline; justify-content: space-between;
             height: 32px; }

/* Forms: a field is grey, square, one unit taller than the text; the button is the vault. */
.s-action label { display: flex; flex-direction: column; gap: 4px;
                   font-size: 12px; font-weight: 580; color: #5A677C; }
.s-action label.check { flex-direction: row; align-items: center; gap: 8px;
                         font-size: 14px; font-weight: 450; color: #0F1B2D; }
.s-action textarea {
  font: inherit; font-size: 14px; font-weight: 450; color: #0F1B2D; letter-spacing: -0.01em;
  padding: 8px 12px; border: none; border-radius: 0; background: #E6E9EE;
  min-width: 440px; box-shadow: inset 0 -1px 0 #5A677C; resize: vertical; }
.s-action textarea:focus-visible { outline: 2px solid #0F1B2D; outline-offset: 0; }
.s-action input:not([type=checkbox]), .s-action select {
  font: inherit; font-size: 14px; font-weight: 450; color: #0F1B2D; letter-spacing: -0.01em;
  height: 40px; padding: 0 12px; border: none; border-radius: 0;
  background: #E6E9EE; min-width: 324px;
  box-shadow: inset 0 -1px 0 #5A677C; }
.s-action input:focus-visible, .s-action select:focus-visible {
  outline: 2px solid #0F1B2D; outline-offset: 0; }
.s-action input[type=checkbox] { width: 16px; height: 16px; margin: 0;
                                  accent-color: #0B1F3A; }
.s-action .note { font-size: 12px; color: #4A5870; max-width: 44em; }
.p-body .s-action { align-items: flex-end; margin: 24px 0 0; }
.p-body .s-action + .s-action { padding-top: 24px; border-top: 1px solid rgba(15,27,45,0.15); }
a.link { font-weight: 580; box-shadow: inset 0 -1px 0 currentColor; }

/* The test data: a contact sheet, one item to a column. */
.contact { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
            column-gap: var(--gut); row-gap: 24px; margin-top: 16px; }
.contact figure { margin: 0; min-width: 0; }
.contact img { display: block; width: 100%; height: auto; aspect-ratio: 1;
                image-rendering: pixelated; background: #E6E9EE; }
.contact figcaption { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.contact .age { font-size: 14px; font-weight: 580; }
.contact .grp { font-size: 12px; color: #5A677C; line-height: 16px; }

/* The report, set from its markdown. */
.prose { font-size: 14px; line-height: 20px; }
.prose p, .prose ul, .prose blockquote { margin: 0 0 16px; max-width: 44em; }
.prose ul { padding-left: 16px; }
.prose li { margin-bottom: 4px; }
.prose h3 { font-size: 16px; font-weight: 580; margin: 24px 0 8px; }
.prose blockquote { padding-left: 16px; box-shadow: inset 1px 0 0 rgba(15,27,45,0.15);
                     color: #4A5870; }
.prose code { font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: 0;
               overflow-wrap: anywhere; }
.prose b { font-weight: 780; }
.prose .tab { margin: 0 0 16px; }

@media (max-width: 1199px) {
  .p-head { grid-column: 1 / -1; position: static; }
  .p-body { grid-column: 1 / -1; padding-left: 64px; }
  .ocell { grid-column: span 2; }
  .ocell:nth-child(4n) .thr { display: none; }
}
@media (max-width: 599px) {
  .p-body, .p-wide { padding-left: 0; }
  .ocell { grid-column: span 1; }
  .o-title, .o-state { display: none; }
  .ocell .thr { display: block !important; }
  .ocell:nth-child(4n) .thr, .ocell:last-child .thr { display: none !important; }
  .kv-row { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .kv dt, .kv dd { grid-column: 1 / -1; }
  .tab .th { display: none; }
  .tab .tr { grid-template-columns: minmax(0, 1fr); row-gap: 4px;
              padding-block: 8px; }
  .tab [role=cell] { grid-column: 1 / -1; }
  .tab [role=cell][data-h]::before { content: attr(data-h); display: block;
                                      font-size: 12px; font-weight: 580; color: #5A677C; }
  .s-action input:not([type=checkbox]), .s-action select, .s-action textarea {
    min-width: 0; width: 100%; }
  .s-action label { width: 100%; }
}

/* the two animations: a run writing, and a value that just changed */
@keyframes thump { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.pulse { animation: blink 2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .pulse, [data-s*="animation"], button.hit.cta[aria-busy=true] {
    animation: none !important; }
}


/* ---- motion (histor.console.motion): classes the script sets, never the server ---- */
@keyframes m-unroll { from { height: 0; opacity: 0; } }
@keyframes m-slide { from { transform: translateX(-16px); opacity: 0;
                              background: #F6BFB2; } }
@keyframes m-pop { 0% { transform: scale(0); } 70% { transform: scale(1.35); }
                    100% { transform: scale(1); } }
@keyframes m-caret { 50% { opacity: 0; } }
@keyframes m-refused { from { background: #F6BFB2; } }
@keyframes m-stamp { 0% { transform: scale(1.6); opacity: 0; }
                      60% { transform: scale(.92); opacity: 1; }
                      100% { transform: scale(1); } }
@keyframes m-seal { 0% { transform: scale(2.6) rotate(-16deg); opacity: 0; }
                     55% { transform: scale(.9) rotate(2deg); opacity: 1; }
                     100% { transform: none; } }
@keyframes m-draw { from { transform: scaleX(0); } }
@keyframes m-rise { from { transform: translateY(8px); opacity: .25; } }
@keyframes m-sheen { from { transform: translateX(-100%); }
                     to { transform: translateX(100%); } }

.m-new { animation: m-unroll .32s cubic-bezier(.2,.7,.2,1); overflow: hidden; }
.m-new[data-enter=slide] { animation: m-slide .45s ease-out; }
.m-new[data-enter=pop] { animation: none; overflow: visible; }
.m-new[data-enter=pop] circle, .m-new[data-enter=pop] path + path {
  transform-box: fill-box; transform-origin: center;
  animation: m-pop .45s cubic-bezier(.3,1.5,.5,1); }

.m-unwritten { visibility: hidden; }
.m-caret::after { content: ""; display: inline-block; width: .5em; height: 1.05em;
                   margin-left: 1px; vertical-align: -.18em; background: currentColor;
                   animation: m-caret .55s steps(1) infinite; }
.m-refused { animation: m-refused 1.2s ease-out; }

.rmark { transform-origin: center; }
.rcell .thr { transform-origin: left center; }
.rcell.m-turned .rmark { animation: m-stamp .5s cubic-bezier(.2,.8,.2,1) both; }
.rcell.m-turned .thr { animation: m-draw .8s cubic-bezier(.6,0,.2,1) both; }
.rcell[data-state-key=seal].m-turned .rmark {
  animation: m-seal .75s cubic-bezier(.2,.9,.3,1.2) both; }
.m-turned .state i { animation: m-stamp .5s cubic-bezier(.2,.8,.2,1) both; }
.card.m-turned h3, .band.m-turned .s-head { animation: m-rise .5s ease-out both; }
.hero.m-turned { position: relative; overflow: hidden; }
.hero.m-turned::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.16) 50%,
                              transparent 65%);
  animation: m-sheen 1.1s ease-out both; }

.m-intro .rcell .rmark { animation: m-stamp .45s cubic-bezier(.2,.8,.2,1) both; }
.m-intro .rcell .thr { animation: m-draw .5s cubic-bezier(.6,0,.2,1) both; }
.m-intro .run .card { animation: m-rise .5s ease-out both; }
.m-intro .rcell:nth-child(1) .rmark, .m-intro .rcell:nth-child(1) .thr { animation-delay: 0ms; }
.m-intro .rcell:nth-child(2) .rmark, .m-intro .rcell:nth-child(2) .thr { animation-delay: 55ms; }
.m-intro .rcell:nth-child(3) .rmark, .m-intro .rcell:nth-child(3) .thr { animation-delay: 110ms; }
.m-intro .rcell:nth-child(4) .rmark, .m-intro .rcell:nth-child(4) .thr { animation-delay: 165ms; }
.m-intro .rcell:nth-child(5) .rmark, .m-intro .rcell:nth-child(5) .thr { animation-delay: 220ms; }
.m-intro .rcell:nth-child(6) .rmark, .m-intro .rcell:nth-child(6) .thr { animation-delay: 275ms; }
.m-intro .rcell:nth-child(7) .rmark, .m-intro .rcell:nth-child(7) .thr { animation-delay: 330ms; }
.m-intro .rcell:nth-child(8) .rmark, .m-intro .rcell:nth-child(8) .thr { animation-delay: 385ms; }
.m-intro .rcell:nth-child(9) .rmark, .m-intro .rcell:nth-child(9) .thr { animation-delay: 440ms; }
.m-intro .rcell:nth-child(10) .rmark, .m-intro .rcell:nth-child(10) .thr { animation-delay: 495ms; }
.m-intro .rcell:nth-child(11) .rmark, .m-intro .rcell:nth-child(11) .thr { animation-delay: 550ms; }
.m-intro .rcell:nth-child(12) .rmark, .m-intro .rcell:nth-child(12) .thr { animation-delay: 605ms; }
.m-intro .run .card:nth-child(1) { animation-delay: 200ms; }
.m-intro .run .card:nth-child(2) { animation-delay: 270ms; }
.m-intro .run .card:nth-child(3) { animation-delay: 340ms; }
.m-intro .run .card:nth-child(4) { animation-delay: 410ms; }
.m-intro .run .card:nth-child(5) { animation-delay: 480ms; }
.m-intro .run .card:nth-child(6) { animation-delay: 550ms; }
.m-intro .run .card:nth-child(7) { animation-delay: 620ms; }
.m-intro .run .card:nth-child(8) { animation-delay: 690ms; }
.m-intro .run .card:nth-child(9) { animation-delay: 760ms; }
.m-intro .run .card:nth-child(10) { animation-delay: 830ms; }
.m-intro .run .card:nth-child(11) { animation-delay: 900ms; }
.m-intro .run .card:nth-child(12) { animation-delay: 970ms; }

@media (prefers-reduced-motion: reduce) {
  .m-new, .m-new *, .m-turned, .m-turned *, .m-intro *, .m-refused,
  .m-caret::after, .hero.m-turned::after { animation: none !important; }
}


@media print {
  .tabs, .export, .skip { display: none; }
  .sheet { max-width: none; }
}