/* t's pages: a Bauhaus poster, in the visual language of tilo.so, tuned for a tool read all day.
   Each page is one sheet ruled into cells: flat paper and ink with three inks of their own (red,
   blue, yellow: the belt dithers to these five), hard edges and hard offset shadows. Nothing lies
   behind text but its flat background: no texture, no noise. Readability first: thin rules
   between cells (a strong one only around the sheet and under the masthead), body text at 16px in
   sans, mono only for code, ids and numbers, mono capitals only for table heads, kickers and tile
   labels, a faint riso ghost on the page's title only (and the masthead's "t"). The inks are
   tilo.so's own and no others (its tokens below, light and dark); every other colour here is a
   color-mix of them. Colour means something and nothing else: red = broken (red text is bold),
   yellow = needs a person (only ever a fill, its text in ink), blue = running, links and the
   brand; passed is ink with its mark, and skipped, cancelled or ended is muted or machine grey.
   Light and dark follow the system.

   THE VOCABULARY. Pages are built from these pieces; shell.rs has helpers for the common ones.

   .poster   The sheet: a 12-column grid whose gaps are the ink rules. shell.rs puts it out: the
             .masthead cell (the mark, the belt, the sections), then <main> (a grid of the same
             12 columns, holding the page's cells), then the .foot cell. Pages never write
             these three themselves. A page outside the sections gets .poster.narrow. The page
             never scrolls sideways at any width: the sections wrap, and whatever is too wide
             (a table) scrolls inside its own cell.

   .cell     A box of paper, a thin ink rule between it and the next: the only thing that sits in
             <main>. Full width by default. A cell's content scrolls sideways inside it when too
             wide (a wide table), never the page. Its edge is its rule: a heading inside needs none.
               <section class=cell><h2>Waiting <span class=count>14</span></h2>…</section>
             shell::cell("span-8", html) puts one out (a <div>).

   .span-4 .span-6 .span-8
             How many of the 12 columns a cell takes from 680px up (phones: always all 12). A
             row's spans add up to 12, or ink shows in the gap: 8+4, 4+8, 6+6, 4+4+4. The cells
             of a row are as tall as the tallest. Also for a .stack.

   .stack    A column of cells beside another cell, e.g. the side of a dashboard: its last cell
             grows to the row's height.
               <div class="stack span-4"><section class=cell>…</section><section class=cell>…</section></div>

   .hero     The title cell: each page opens with one. A .kicker over the title (what it belongs
             to: small mono capitals, items apart, links in ink), the h1 (about 2–2.4rem, with a
             faint ghost), then a .meta line of facts (sans, sentence case). A title longer than
             ~22 letters takes class=long on its h1 (title_cell does that) and is set smaller.
               <header class="cell hero span-8"><p class=kicker><a href=/repos/tilo/t>tilo/t</a><span>run r0042</span></p>
               <h1>clippy failed</h1><div class=meta><span>quinten</span><span>2m 14s</span></div></header>
             shell::title_cell("span-8", &kicker, title_html, meta_html).

   .companion
             The cell beside a .hero (span-4 beside span-8): what the page is filtered by (the
             whose chips), a run's progress, its steering buttons. Content sits at the bottom.
               <div class="cell companion span-4">{Filter::choices}</div>

   .blk-red .blk-yellow .blk-blue
             A cell marked by meaning, never for decoration: a 5px edge in its ink down the left,
             text in ink. red = what is broken or failing (an alert, a failing check), with a
             faint red tint; yellow = what needs a person (a question waiting, a claim to make),
             with a faint yellow tint; blue = facts about the thing shown worth setting apart,
             on plain paper (most facts need no block: a dl.rows reads fine in a plain cell).
             A .lead is its one sentence (red in a red block, blue in a blue one).
               <div class="cell blk-red span-8"><p class=lead>clippy fails on main since 3f2a1c.</p></div>

   .solid    With a block: the solid ink, its text in the matching on-colour. Only for the one
             thing on a page that truly needs the eye: a real alert, or something waiting on the
             person looking. At most one per page; most pages have none.
               <div class="cell blk-yellow solid"><p class=lead>A question waits for you: …</p><form>…</form></div>

   .lead     The one sentence of a block or of a cell: larger, bold.

   dl.rows   Facts as pairs, two columns: the name in muted sans, the value in ink. In any cell
             (or a blue block).
               <dl class=rows><dt>machine</dt><dd>t-worker-x86-1</dd><dt>took</dt><dd>2m 14s</dd></dl>
             shell::rows(&[("machine", html), …]).

   ul.tree   Agents nested under the agent that started them, each an li.agent: its role, its
             state, its spend, what it last heard (a small ul.list), then those under it.

   ul.list   A list of statements, one per row, thin rules apart: what failed, what was said.
               <ul class=list><li><span class="dot fail"></span> test/core <span class=dim>3 tests</span></li>…</ul>

   .foot     The night cell at the bottom (always dark): bracketed links and copy. shell.rs puts
             it out.

   .sheet    A cell holding a body that isn't cells, as the pages' specimen frames one.

   Within cells, as before: h2 (bold sans, 18px) names a cell's section, h3 (bold sans, 15px) a
   group in it; .meta, .chips, .dim, .count in sentence case; states .st-* / .s-* (words), .dot,
   .pill (sentence case; solid only for failed, running, waiting), .tag, .note; tables
   (table.grid: mono capitals heads, roomy rows, a hover tint, .num right-aligned, td.st);
   .bar and .meter; .vitals .tile and svg.spark (labels and targets wrap, never ellipsis);
   .alerts and .limited (the calm red and yellow blocks); .waits; .cards .card; pre.log;
   details.fold; .pager; links (blue, underlined faintly, yellow on hover); blue buttons with a
   hard shadow; inputs.
*/
@font-face{font-family:"Atkinson Hyperlegible Next";src:url(/atkinson-next.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url(/atkinson-mono.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{color-scheme:light dark;
  --paper:#f0e9d8;--ink:#141412;--muted:#5d584e;--red:#d0291c;--blue:#1f45a6;--yellow:#f2b51c;
  --on-red:#f8f2e4;--on-blue:#f8f2e4;--on-yellow:#141412;--machine:#8d877a;--night:#12110f;--logo:#1f45a6;
  --person-0:#d0291c;--person-1:#1f45a6;
  /* The night foot is dark in both themes: the dark theme's ink and muted. */
  --night-ink:#efe8d6;--night-muted:#a59f91;
  /* Derived, never inks of their own: a second paper and the thin lines, from ink and paper. */
  --bg:var(--paper);--bg2:color-mix(in srgb,var(--ink) 6%,var(--paper));--fg:var(--ink);--dim:var(--muted);
  --line:color-mix(in srgb,var(--ink) 16%,var(--paper));--accent:var(--blue);
  /* The states, on the palette: passed in ink, failed in the brand red, running in blue, waiting
     the yellow as a fill (--wait) with its words in ink (--error), the rest muted. */
  --pass:var(--ink);--fail:var(--red);--error:var(--ink);--run:var(--blue);--wait:var(--yellow);--skip:var(--dim);
  --riso-ghost:color-mix(in srgb,var(--blue) 26%,transparent);--ghost:var(--riso-ghost);
  --text:"Atkinson Hyperlegible Next",system-ui,sans-serif;--sans:var(--text);
  --mono:"Atkinson Hyperlegible Mono",ui-monospace,Menlo,Consolas,monospace;
  --u:1rem;--rule:1px;--rule-strong:2px;--pad:clamp(.9rem,1.6vw,1.5rem);
  --tint-red:color-mix(in srgb,var(--red) 8%,var(--paper));--tint-yellow:color-mix(in srgb,var(--yellow) 20%,var(--paper));
  --tint-blue:color-mix(in srgb,var(--blue) 6%,var(--paper));--hover:color-mix(in srgb,var(--ink) 5%,var(--paper))}
@media(prefers-color-scheme:dark){:root{
  --paper:#12110f;--ink:#efe8d6;--muted:#a59f91;--red:#f0533f;--blue:#6684ff;--yellow:#f5c442;
  --on-red:#12110f;--on-blue:#12110f;--on-yellow:#12110f;--machine:#6b665c;--logo:#6684ff;
  --person-0:#f0533f;--person-1:#6684ff;
  --line:color-mix(in srgb,var(--ink) 13%,var(--paper));
  --riso-ghost:color-mix(in srgb,var(--red) 30%,transparent);
  --tint-red:color-mix(in srgb,var(--red) 10%,var(--paper));--tint-yellow:color-mix(in srgb,var(--yellow) 12%,var(--paper));
  --tint-blue:color-mix(in srgb,var(--blue) 9%,var(--paper));--hover:color-mix(in srgb,var(--ink) 6%,var(--paper))}}
@media(min-width:680px){:root{--rule-strong:2.5px}}
@media(min-width:1000px){:root{--rule-strong:3px}}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--text);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);text-underline-offset:.2em}
a:hover{background:var(--yellow);color:var(--on-yellow);text-decoration-color:currentColor}
/* Links that are controls (the sections, chips, tags, buttons, the checks list) carry no underline. */
.masthead a,.foot a,.pager a,a.chip,a.tag,a.button,nav.checks a,h1 a,.brand{text-decoration:none}
:focus-visible{outline:2px solid currentColor;outline-offset:2px}
code,pre,.mono{font-family:var(--mono)}
.mono{font-size:14px}
code{font-size:.9em}
small{font-size:.85em;color:var(--dim)}

/* The sheet: a 12-column grid on ink, the gaps between its cells its thin rules; a strong rule
   around it and under the masthead. */
/* The sheet never grows past the window, whatever its content (contain:inline-size): what is
   too wide scrolls inside its cell, the page never sideways. */
.poster{--u:clamp(1rem,1.05vw,1.25rem);contain:inline-size;min-width:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--rule);background:var(--ink);border:var(--rule-strong) solid var(--ink);margin:clamp(.5rem,1.4vw,1.25rem)}
.poster>main{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--rule);min-width:0}
.poster.narrow{max-width:36rem;margin:clamp(1rem,8vh,5rem) auto}
/* (Scoped to where cells sit: the coverage table has a td.cell of its own.) */
:where(.poster,.poster>main,.stack)>.cell{grid-column:1/-1;min-width:0;max-width:100%;padding:var(--pad);background:var(--paper);overflow-x:auto}
.stack{grid-column:1/-1;display:flex;flex-direction:column;gap:var(--rule);min-width:0}
.stack>.cell:last-child{flex:1}
:where(.poster>main,.stack)>.cell>:first-child{margin-top:0}
:where(.poster>main,.stack)>.cell>:last-child{margin-bottom:0}
@media(min-width:680px){
  .poster>main{grid-auto-flow:row dense}
  .span-4{grid-column:span 4}.span-6{grid-column:span 6}.span-8{grid-column:span 8}}
@media(max-width:679px){.poster,.poster.narrow{margin:0;border:0}}

/* The bar: the mark, the belt between (belt.js), the sections in brackets, logging out last. */
.masthead{display:flex;align-items:center;gap:1rem;padding:.25rem var(--pad) .25rem calc(var(--pad)*.6);min-height:4rem;overflow:visible;white-space:nowrap;font-size:15px;border-bottom:calc(var(--rule-strong) - var(--rule)) solid var(--ink)}
.brand{display:flex;align-items:center;gap:.4rem;flex:none;padding:0 .3rem;color:var(--ink)}
.brand .name{font:800 2.3rem/1 var(--text);letter-spacing:-.045em;text-shadow:2px 1.5px 0 var(--riso-ghost)}
svg.mark{display:block;width:2.6rem;height:2.6rem}
svg.mark rect{fill:var(--logo)}
svg.mark .side{fill:color-mix(in srgb,var(--logo) 42%,var(--paper))}
.brand:hover{background:var(--yellow);color:var(--on-yellow)}
.masthead .art{flex:1 1 0;min-width:0;width:0;height:60px;display:block;image-rendering:pixelated;cursor:pointer}
.masthead nav{margin-left:auto;min-width:0;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.25rem clamp(.5rem,1vw,1rem);font:400 .78em/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.masthead nav a,.masthead nav form.out button{color:var(--ink)}
.masthead nav a::before,.masthead nav form.out button::before,.foot a::before,.pager a::before{content:"[";color:var(--muted);margin-right:.35em}
.masthead nav a::after,.masthead nav form.out button::after,.foot a::after,.pager a::after{content:"]";color:var(--muted);margin-left:.35em}
.masthead nav a:hover::before,.masthead nav a:hover::after,.masthead nav a[aria-current]::before,.masthead nav a[aria-current]::after,.masthead nav form.out button:hover::before,.masthead nav form.out button:hover::after,.pager a:hover::before,.pager a:hover::after{color:inherit}
.masthead nav a[aria-current]{background:var(--ink);color:var(--paper)}
.masthead nav form.out{display:contents}
.masthead nav form.out button{all:unset;cursor:pointer;color:var(--muted)}
.masthead nav form.out button:hover{background:var(--yellow);color:var(--on-yellow)}
.belt-tip{position:fixed;z-index:95;max-width:360px;padding:7px 10px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font:13px/1.45 var(--mono);white-space:pre-wrap;pointer-events:none}
.belt-tip b{font-weight:700}
@media(max-width:679px){
  .masthead{flex-wrap:wrap;white-space:normal;padding:.5rem var(--pad);gap:.4rem 1rem}
  .brand .name{font-size:1.9rem}svg.mark{width:2.1rem;height:2.1rem}
  .masthead .art{display:none}
  .masthead nav{margin-left:0;justify-content:flex-start;gap:.2rem .9rem}
  .masthead nav a[aria-current]{padding:0 .3em}
  .masthead nav a::before,.masthead nav a::after,.masthead nav form.out button::before,.masthead nav form.out button::after{content:none}}

/* The title cell: kicker, the page's title with a faint ghost, the facts; a companion beside it. */
.hero{display:flex;flex-direction:column;justify-content:flex-end;gap:.4rem}
.hero h1{margin:0;font:800 clamp(1.75rem,1.3rem + 1vw,2.4rem)/1.05 var(--text);letter-spacing:-.03em}
.hero h1.long{font-size:clamp(1.5rem,1.2rem + .6vw,1.9rem);letter-spacing:-.02em;line-height:1.1}
.kicker{display:flex;flex-wrap:wrap;gap:.2rem 1.4em;margin:0;font:400 12.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.kicker a{color:var(--ink)}
.companion{display:flex;flex-direction:column;justify-content:flex-end;gap:.6rem}
.companion .chips{margin:0}

/* Blocks, by meaning: an edge in the ink and a faint tint of it; the solid ink only with .solid. */
.blk-red,.blk-yellow,.blk-blue{border-left:5px solid var(--edge);padding-left:calc(var(--pad) - 5px + .25rem)}
.blk-red{--edge:var(--red);background:var(--tint-red)}
.blk-yellow{--edge:var(--yellow);background:var(--tint-yellow)}
.blk-blue{--edge:var(--blue)}
.blk-red .lead{color:var(--fail)}.blk-blue .lead,.blk-blue h2{color:var(--blue)}
.blk-red.solid{background:var(--red);color:var(--on-red)}
.blk-yellow.solid{background:var(--yellow);color:var(--on-yellow)}
.blk-blue.solid{background:var(--blue);color:var(--on-blue)}
.solid{border-left:0;padding-left:var(--pad)}
.solid :is(a,h2,h3,.lead,.dim,.err,.warn,.count,small,th,.num){color:inherit}
.solid :is(.dim,small,th,.count){opacity:.85}
.solid a:hover{background:var(--ink);color:var(--paper)}
.solid :is(th,td){border-color:currentColor}
.lead{margin:0 0 .4em;font:700 1.1rem/1.4 var(--text);letter-spacing:-.005em}
dl.rows{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem 1.2rem;margin:0;font:400 15px/1.45 var(--text)}
dl.rows dt{color:var(--muted);white-space:nowrap}
.solid dl.rows dt,dl.rows .solid dt{color:inherit;opacity:.85}
dl.rows dt::after{content:" ··"}
dl.rows dd{margin:0;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}


/* A list of statements, ruled apart. */
ul.list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
ul.list>li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;padding:.65em 0}
ul.list>li+li{border-top:1px solid var(--line)}
/* A task's agents as a tree: each agent a block, those under it indented on a thin rule. */
ul.tree{list-style:none;margin:0;padding:0}
ul.tree ul.tree{margin:.4em 0 0 .45rem;padding-left:1rem;border-left:1.5px solid var(--line)}
li.agent{padding:.55em 0}
li.agent>p{margin:0 0 .2em}
li.agent>ul.list{border-top:0;font-size:14px}
li.agent>ul.list>li{padding:.3em 0}
/* An agent's transcript: one entry per thing said or run, what was said kept as written. */
ol.transcript{list-style:none;margin:0;padding:0}
ol.transcript>li{padding:.55em 0;border-top:1px solid var(--line)}
ol.transcript>li:empty{display:none}
ol.transcript p{margin:0 0 .25em}
ol.transcript .said{white-space:pre-wrap;margin:.2em 0}
ol.transcript pre.log{max-height:16em;overflow:auto;margin:.3em 0 0}
ul.list>li:last-child{padding-bottom:0}

/* The foot: a night cell whatever the theme. */
.foot{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.5rem;padding-block:.8rem;background:var(--night);color:var(--night-muted);font:400 .78rem/1.5 var(--mono)}
.foot nav{display:flex;flex-wrap:wrap;gap:.2rem 1rem;text-transform:uppercase;letter-spacing:.06em}
.foot a{color:var(--night-ink)}
.foot a::before,.foot a::after{color:var(--night-muted)}
.foot a:hover{background:var(--yellow);color:var(--on-yellow)}
.foot a:hover::before,.foot a:hover::after{color:inherit}
.foot p{margin:0}

/* A page's body as it was before the poster, in one cell. */
.sheet h2{padding-top:14px;border-top:1px solid var(--line)}
.sheet>h2:first-child,.sheet>:first-child>h2:first-child,.sheet>:first-child>:first-child>h2:first-child{padding-top:0;border-top:0}

/* Headings: the page's title with a faint ghost, a cell's sections and groups in bold sans. */
h1{font:800 clamp(1.6rem,1.25rem + .9vw,2.2rem)/1.1 var(--text);letter-spacing:-.03em;margin:0 0 10px;text-shadow:1.5px 1px 0 color-mix(in srgb,var(--riso-ghost) 70%,transparent);overflow-wrap:anywhere}
h1.mono{font:700 clamp(1.3rem,1.1rem + .6vw,1.7rem)/1.2 var(--mono);letter-spacing:-.01em}
h1 a{color:inherit}
h1 .dim,h2 .dim,h3 .dim{font-weight:400}
h2{font:700 18px/1.3 var(--text);letter-spacing:-.01em;margin:24px 0 10px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
h3{font:700 15px/1.4 var(--text);margin:16px 0 6px}
h3 a{font-size:14px}
.pagehead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;margin-bottom:8px}
.pagehead h1{margin-bottom:6px}
.count{font:400 15px var(--text);text-transform:none;letter-spacing:0;color:var(--dim);font-variant-numeric:tabular-nums}
.meta{display:flex;flex-wrap:wrap;gap:4px 18px;color:var(--fg);margin:2px 0;font:400 15px/1.5 var(--text);font-variant-numeric:tabular-nums}
span.meta{display:inline-flex}
.dim{color:var(--dim)}
.warn{color:var(--error);box-shadow:inset 0 -.38em 0 color-mix(in srgb,var(--yellow) 65%,transparent)}
.err{color:var(--fail);font-weight:700}
.empty{margin:0;padding:8px 0;color:var(--dim)}
section{margin:0}

/* Whose work: the choices in one line, the chosen one in ink. */
.chips{display:flex;flex-wrap:wrap;gap:2px 6px;align-items:baseline;font:14px/1.7 var(--text);margin:0 0 6px}
.chip+.chip:not([aria-current])::before{content:"·";color:var(--dim);margin-right:6px}
.chip[aria-current]+.chip::before{content:none}
.chip[aria-current]{background:var(--ink);color:var(--paper);padding:0 5px}
.pagehead nav.chips{margin-left:auto}
.pagehead nav.chips .chip::before{content:"[";color:var(--dim);margin-right:.35em}
.pagehead nav.chips .chip::after{content:"]";color:var(--dim);margin-left:.35em}

/* States, the same everywhere: words in their colour, a square for a row's mark. */
.st-pass,.s-passed{color:var(--pass)}.st-fail,.s-failed,.s-error,.s-checking{color:var(--fail);font-weight:700}.st-run,.s-running,.s-preparing{color:var(--run)}
/* Waiting words: ink, marked underneath in the yellow like a highlighter (never yellow text). */
.st-wait,.s-waiting,.s-joined,.s-couldntrun{color:var(--error);box-shadow:inset 0 -.38em 0 color-mix(in srgb,var(--yellow) 65%,transparent)}.st-skip,.s-skipped,.s-cancelled,.s-planned,.s-ended,.s-superseded{color:var(--dim)}
.dot{display:inline-block;width:9px;height:9px;background:var(--machine);border:1.5px solid var(--ink);vertical-align:0;flex:none}
.dot.pass{background:var(--pass)}.dot.fail{background:var(--fail)}.dot.run{background:var(--run);animation:blink 1.6s steps(2,jump-none) infinite}
.dot.wait{background:var(--wait)}
@keyframes blink{50%{opacity:.35}}
.pill{display:inline-block;font:600 12.5px/1.6 var(--mono);padding:0 7px;border:1px solid currentColor;color:var(--dim);white-space:nowrap}
.pill.pass{color:var(--pass)}.pill.fail{background:var(--red);border-color:var(--red);color:var(--on-red)}.pill.run{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}.pill.wait{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.tag{display:inline-block;max-width:100%;margin:1px 4px 1px 0;padding:0 6px;font:13px/1.6 var(--mono);border:1px solid currentColor;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.tag.fail{color:var(--fail);font-weight:700}.tag.wait{color:var(--error);border-color:var(--ink);background:color-mix(in srgb,var(--yellow) 45%,var(--paper))}.tag.skip{color:var(--dim)}.tag.run{color:var(--run)}.tag.pass{color:var(--pass)}
a.tag:hover{border-color:var(--ink)}
.note{margin-left:8px;font:13px/1.6 var(--text);padding:0 6px;background:var(--tint-yellow);color:var(--fg);border-left:3px solid var(--yellow)}
.more{font:14px var(--text);color:var(--dim)}

/* Tables: plain and full width, mono capitals over an ink rule, roomy rows with a hover tint,
   numbers right-aligned in tabular figures. */
table{border-collapse:collapse;width:100%}
th{text-align:left;font:700 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim);padding:6px 10px;border-bottom:1.5px solid var(--ink);white-space:nowrap}
td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:hover>td{background:var(--hover)}
th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}
tbody tr:last-child>td{border-bottom:0}
table.grid td{font-size:15px}
.num,td.num{text-align:right!important;white-space:nowrap;color:var(--dim);font:14px var(--mono);font-variant-numeric:tabular-nums}
td.st,th.st{width:20px;padding-right:0!important}
td.st .dot{vertical-align:-1px}
.who{font-size:14px;color:var(--dim)}
tr.sel td,tr[aria-current] td{background:color-mix(in srgb,var(--yellow) 45%,var(--paper))}
tr.sel td:first-child{box-shadow:inset 4px 0 var(--ink)}

/* Progress and meters: ink-edged boxes, filled in blue. */
.bar{position:relative;display:inline-block;width:140px;height:12px;border:1.5px solid var(--ink);background:var(--bg2);overflow:hidden;vertical-align:middle}
.bar i{display:block;height:100%;background:var(--blue);transition:width .9s steps(12)}
.bar.fail i{background:var(--red)}
.pct{margin-left:8px;font:14px var(--text);color:var(--dim);white-space:nowrap;font-variant-numeric:tabular-nums}
td.prog{white-space:nowrap}
.meter{position:relative;display:block;min-width:72px;height:12px;border:1.5px solid var(--ink);background:var(--bg2);overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0}
.meter .bk{background:color-mix(in srgb,var(--blue) 35%,var(--paper))}
.meter .us{background:var(--blue)}
.meter.over .us{background:var(--red)}

/* The health strip: is t keeping up, a tile per measure, ruled apart. */
.vitals{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px 0;margin:0 0 14px;padding:0}
.cell>.vitals:only-child,[data-c=vitals]:only-child>.vitals{margin:0}
.tile{position:relative;display:flex;flex-direction:column;gap:2px;min-width:0;padding:0 14px;border-left:1px solid var(--line);color:var(--fg)}
.tile .k{font:700 11.5px/1.35 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
.tile .v{font:700 1.4rem/1.2 var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.tile .m{display:inline-block;width:1.15em;font:700 14px/1 var(--mono);vertical-align:3px}
.tile.good .m{color:var(--pass)}.tile.bad .m,.tile.bad .v{color:var(--fail)}.tile.none .m,.tile.none .v{color:var(--dim)}
.tile .tg,.tile .d{font-size:13.5px;line-height:1.4;color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
svg.spark{display:block;width:100%;height:28px;margin:3px 0 2px;overflow:visible}
.spark-none{display:block;height:28px;margin:3px 0 2px}
svg.spark .ln{fill:none;stroke:var(--blue);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
svg.spark .ar{fill:var(--blue);opacity:.12}
svg.spark .tg{stroke:var(--dim);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
svg.spark.bad .ln{stroke:var(--red)}svg.spark.bad .ar{fill:var(--red)}
svg.spark.mem .ln{stroke:var(--ink)}svg.spark.mem .ar{fill:var(--ink)}
/* What is wrong with t: a calm red block (edge and tint) wherever it sits. */
.alerts{margin:0 0 16px;padding:10px 14px;list-style:none;background:var(--tint-red);border-left:5px solid var(--red);font-size:15px}
.alerts li{margin:2px 0}
.alerts b{color:var(--fail)}

/* The overview's cells: the alerts' cell only when there are any (a live part that shows nothing
   hides its cell), the vitals across, what waits and runs in a wide column beside a narrow one.
   Below 1180px the two columns go full width, one over the other (the runs' table needs the
   room); on phones what waits and runs come before the vitals and the rest. */
.hide-empty:not(:has([data-k]:not([hidden]))){display:none}
.now-alerts .alerts{margin:0;padding:0;background:none;border:0}
.now-vitals .vitals{margin:0}
@media(min-width:1000px){.now-vitals .vitals{grid-template-columns:repeat(5,minmax(0,1fr))}}
:is(.now-work,.now-aside) h2{margin-top:0}
.now-aside p:last-child{margin-bottom:0}
@media(min-width:680px) and (max-width:1179px){.stack:is(.now-work,.now-aside){grid-column:1/-1}}
@media(max-width:679px){.now-vitals{order:1}.now-aside{order:2}}
table.runs td{font-size:15px}
table.runs td.checks{min-width:120px}
table.runs tr.person td{padding-top:14px;border-bottom:1px solid var(--ink)}
table.runs tr.person:first-child td{padding-top:4px}
table.runs tr.person .what b{font-size:16px}
table.runs tr.session{cursor:pointer}
table.runs tr.session td.what{padding-left:22px;font-weight:700}
table.runs tr.session .tw{display:inline-block;width:14px;font-family:var(--mono);color:var(--dim)}
table.runs tr.session .tw::before{content:"+"}
table.runs tr.session[aria-expanded=true] .tw::before{content:"−"}
table.runs tr.session a.dim{font-weight:400;margin-left:4px}
table.runs tr.run td.what{padding-left:44px}
table.runs tr.run td{background:var(--bg2)}
table.runs .n{font:14px var(--mono);color:var(--dim);margin-right:4px}
.waits details{margin:0;border-bottom:1px solid var(--line)}
.waits summary{display:grid;grid-template-columns:48px minmax(0,1fr) auto auto;gap:14px;align-items:baseline;padding:7px 8px 7px 0;cursor:pointer;list-style:none}
.waits summary::-webkit-details-marker{display:none}
.waits summary:hover{background:var(--hover)}
.waits details[open] summary{border-bottom:1px solid var(--ink)}
.waits .n{font:700 17px/1 var(--mono);color:var(--error);text-align:right}
.waits .kind{font-weight:700}
.waits .nodes{font:400 14px var(--mono)}
.waits .nums,.waits .age{font:14px var(--text);color:var(--dim);white-space:nowrap}
.waits .age.late{color:var(--fail);font-weight:700}
.waits table{margin:0 0 8px}
.waits td.why{font:14px var(--text);color:var(--dim);max-width:560px;background:none;border-left:0;padding:4px 8px;margin:0;white-space:normal}
/* Phones: what holds a group back on its own line, how short and how old under it; a run's
   checks take no more room than they need. */
@media(max-width:679px){.waits summary{grid-template-columns:2.5rem minmax(0,1fr) auto;gap:2px 10px}.waits .kind{grid-column:2/-1}.waits .nums{grid-column:2}table.runs td.checks{min-width:0}}
.mains,.ended{margin:0;padding:0;list-style:none}
.mains li,.ended li{padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
.mains li:last-child,.ended li:last-child{border-bottom:0}
.mains .dot{margin-right:6px}
table.nodes-mini td{padding:4px 4px;vertical-align:top}
table.nodes-mini td.name{font:14px var(--mono);white-space:nowrap;padding-top:4px}
table.nodes-mini .meta{display:block;margin-top:3px;font:13.5px var(--text);color:var(--dim)}

/* A run: what was asked, its checks beside the one opened. */
.runhead,.sesshead,.commithead{margin-bottom:8px}
.runhead h1,.sesshead h1,.commithead h1{margin:0 0 8px}
.runhead .meta,.sesshead .meta,.commithead .meta{margin-top:2px}
/* The run's head is live (data-c=head): its wrappers step aside, so its hero and companion are
   cells of the sheet. Stopping it, for a viewer who may, is a second companion under the first,
   the hero beside both. */
[data-c=head],[data-c=head]>[data-k]:not([hidden]){display:contents}
[data-c=head] .cell{min-width:0;padding:var(--pad);background:var(--paper);overflow-x:auto}
@media(max-width:679px){[data-c=head] .cell{grid-column:1/-1}}
@media(min-width:680px){.poster>main:has(>.runstop) .runhero{grid-row:span 2}}
.runhero .kicker code,.loghero .kicker code{font-size:inherit;text-transform:none;letter-spacing:.02em}
.runhero .meta{align-items:baseline}
.runnow .progress .bar{display:block;width:100%;height:14px}
.runnow .meta{margin:0}
.runhero .plan{margin:0;font:15px/1.45 var(--text);color:var(--dim)}
.runstop form.steer{display:flex;flex-wrap:wrap;gap:8px 12px;margin:0 0 4px}
.runstop p{margin:0;font-size:14.5px;line-height:1.5}
.runstop b{color:var(--fg)}
button,a.button{display:inline-block;padding:7px 14px;background:var(--blue);color:var(--on-blue);border:2px solid var(--ink);border-radius:0;box-shadow:3px 3px 0 var(--ink);font:700 12px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;cursor:pointer}
button:hover,a.button:hover{background:var(--yellow);color:var(--on-yellow)}
button:active,a.button:active{transform:translate(3px,3px);box-shadow:none}
button[disabled]{opacity:.45;cursor:default}
button[disabled]:active{transform:none;box-shadow:3px 3px 0 var(--ink)}
/* The checks and the session's other runs beside the opened step; on a phone after it. */
@media(max-width:679px){.runside.below{order:1}}
nav.checks h3{margin:0 0 4px;padding-bottom:4px;border-bottom:1px solid var(--ink)}
nav.checks .grp+.grp h3{margin-top:18px}
nav.checks h3.st-wait{box-shadow:none}
nav.checks .grp a{display:grid;grid-template-columns:10px minmax(0,1fr) auto;column-gap:9px;align-items:center;padding:6px 8px;border-bottom:1px solid var(--line);color:var(--fg)}
nav.checks .grp a:hover{background:var(--yellow);color:var(--on-yellow)}
nav.checks .grp a[aria-current]{background:color-mix(in srgb,var(--yellow) 45%,var(--paper));box-shadow:inset 4px 0 var(--ink)}
nav.checks .name{font:14.5px/1.45 var(--mono);color:var(--accent);overflow-wrap:anywhere}
nav.checks .grp a:hover .name{color:inherit}
nav.checks .t{font:14px var(--text);color:var(--dim);font-variant-numeric:tabular-nums}
nav.checks .note{grid-column:2/4;margin:0;padding:0;background:none;border:0;font:14px/1.4 var(--text);color:var(--dim)}
.earlier .list a{font-size:14.5px}
/* The opened step: its head (a calm red block when it failed), its log, its job's graphs. */
.panel{min-width:0}
.panelhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.panelhead h2,.sheet .panelhead h2{margin:0;padding:0;border:0;font:700 1.45rem/1.2 var(--mono);letter-spacing:-.01em;overflow-wrap:anywhere}
.panelhead a{margin-left:auto;font-size:15px}
.panelhead-cell>.meta{margin-top:6px}
.failures{margin-top:10px}
.failures details{margin:4px 0 0;padding:8px 12px;border-left:5px solid var(--red);background:var(--tint-red)}
.blk-red .failures details{padding:0;border:0;background:none}
.failures summary{font:700 15px var(--text);color:var(--fail);cursor:pointer;overflow-wrap:anywhere}
.failures pre{margin:6px 0 0;font:13.5px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.loghead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin:0 0 8px;font:14px var(--text);color:var(--dim)}
.loghead h2{margin:0;color:var(--fg)}
.loghead a{margin-left:auto}
.following{color:var(--run);font-weight:700}
.following::before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;background:var(--blue);vertical-align:0;animation:blink 1.6s steps(2,jump-none) infinite}
/* The log pane: mono on the second paper, scrolling inside itself, a comfortable height. */
pre.log{margin:0;padding:8px 10px;max-height:min(72vh,52rem);overflow:auto;background:var(--bg2);border:1px solid var(--line);font:13.5px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:4}
pre.log[data-follow]{min-height:14rem}
.logpage pre.log{max-height:calc(100vh - 6rem)}
pre.log .l{display:block;position:relative;padding-left:5.2em;min-height:1.5em}
pre.log .tm{position:absolute;left:0;width:4.5em;padding-right:6px;text-align:right;color:var(--dim);font-style:normal;user-select:none;-webkit-user-select:none;border-right:1px solid var(--line)}
pre.log .err{color:var(--fail);font-weight:700}
pre.log .hl{background:color-mix(in srgb,var(--red) 18%,transparent)}
.b{font-weight:700}.d{opacity:.7}
/* ANSI colours on the palette: red, blue, ink (yellow's words bold ink), muted. */
.c30,.c90{color:var(--muted)}.c31,.c91{color:var(--red);font-weight:700}.c32,.c92{color:var(--ink)}.c33,.c93{color:var(--ink);font-weight:700}
.c34,.c94{color:var(--blue)}.c35,.c95{color:var(--blue)}.c36,.c96{color:var(--muted)}.c37,.c97{color:var(--ink)}
.agent{margin:6px 0 10px 12px;padding-left:10px;border-left:3px solid var(--line)}
.res{font:14px var(--text)}

/* A job's graphs: two to a row in the opened step's cell when there is room, one on a phone;
   lines in blue, ink and muted (dashed), each named beside its chart's title. */
.graphs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px 24px;margin:0}
svg.graph{width:100%;height:auto;display:block;font:9px var(--mono);overflow:visible}
.graph text{fill:var(--dim)}.graph .ttl{fill:var(--fg);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.graph tspan.key{stroke:none}.graph .key.used{fill:var(--blue)}.graph .key.s2{fill:var(--ink)}.graph .key.s3{fill:var(--muted)}
.graph .ax{stroke:var(--line);stroke-width:1}
.graph .area{fill:var(--blue);opacity:.16}.graph .used{fill:none;stroke:var(--blue);stroke-width:2;stroke-linejoin:round}.graph .s2{stroke:var(--ink);stroke-width:1.5}.graph .s3{stroke:var(--muted);stroke-width:1.5;stroke-dasharray:4 2}
.graph .hit{fill:transparent}.graph .hit:hover{fill:var(--ink);opacity:.08}
.graphcell .warn{display:inline-block;margin:10px 0 0;font-size:14px}

/* Machines: the totals at a glance beside the title (the companion: how many, then the meters),
   then the machines' cards, each a cell of its own ruled from the next: two abreast from 1000px,
   one under the other below (a card's table of jobs needs the room). On phones a group's check
   takes a line of its own over its numbers. A degraded machine's card is a calm red block. */
.totals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;margin:0}
.companion .totals{grid-template-columns:repeat(2,minmax(0,1fr))}
.totals>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.totals>.wide{grid-column:1/-1}
.totals .k,.card .k{font:700 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--dim)}
.totals .v{font:700 1.6rem/1.15 var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.totals .v small{margin-left:2px;font-size:.6em;font-weight:400;white-space:nowrap}
.totals .meter{height:14px}
.totals .meta{display:block;font:14px var(--text);color:var(--dim)}
.totals .err{color:var(--fail);white-space:nowrap}
.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--rule)}
.cell.cards{padding:0}
@media(min-width:1000px){.cell.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card{margin:0;padding:var(--pad);background:var(--paper);min-width:0}
.cell.cards>.card{box-shadow:0 0 0 var(--rule) var(--ink)}
.card.blk-red{background:var(--tint-red);padding-left:calc(var(--pad) - 5px + .25rem)}
.card>.lead{margin:0 0 8px}
.cards>.empty{grid-column:1/-1;padding:var(--pad)}
.card>header{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin-bottom:6px}
.card>header h2,.sheet .card>header h2{margin:0;padding:0;border:0;font:700 17px var(--mono)}
.card .res .row{display:grid;grid-template-columns:62px minmax(0,1fr);gap:3px 10px;align-items:center;margin:6px 0}
.card .res .meta{display:block;grid-column:2;font:14px var(--text);color:var(--dim)}
.card .res .meta b{color:var(--fg);font-weight:700}
.card .famhead,.card details.fam summary{display:grid;grid-template-columns:minmax(0,1fr) 38px 72px 60px 60px;gap:8px;align-items:baseline}
.card .famhead{margin-top:10px;padding:4px 8px;border-bottom:1.5px solid var(--ink);font:700 11.5px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
.card details.fam{border-bottom:1px solid var(--line)}
.card details.fam summary{padding:6px 8px;cursor:pointer;list-style:none}
.card details.fam summary::-webkit-details-marker{display:none}
.card details.fam summary:hover,.card details.fam[open] summary{background:var(--hover)}
.card details.fam summary .what{min-width:0;overflow-wrap:anywhere}
.card details.fam summary .what b{font:700 14px var(--mono)}
.card details.fam table{margin:0 0 6px}
.card .history{display:grid;grid-template-columns:62px 1fr 1fr;gap:10px;align-items:end;margin:10px 0 4px}
.card .history .line{display:flex;flex-direction:column}
.card .history small{font-size:13px}
.card .history svg.spark{height:26px}
.card table.jobs{margin-top:8px;font-size:14px}
.card .empty{padding:6px 0 2px;font-size:14px}
@media(max-width:679px){
  .card .famhead,.card details.fam summary{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:2px}
  .card .famhead>:first-child,.card details.fam summary .what{grid-column:1/-1;text-align:left}}

/* Portfolio and a goal: tables of counts, their number columns headed on the right; a goal's
   title kept readable on phones (its table scrolls instead); a spend against its day's limit
   as a meter in its row; a goal's tasks landed as a bar beside its title; a goal's tasks in a
   table per stage, their columns lined up from one to the next. */
table.tally th.num{font:700 12px/1.5 var(--mono);color:var(--dim)}
table.goals td.what{min-width:11rem}
td.gauge{width:34%;min-width:96px;padding-top:12px}
.companion dl.rows .bar{width:min(100%,200px);margin-top:4px}
table.tasks{table-layout:fixed;min-width:34rem}
table.tasks th:nth-child(1){width:4.5rem}table.tasks th:nth-child(2){width:32%}
table.tasks td{overflow-wrap:anywhere}

/* History. */
table.history td.what{max-width:560px}
.pager{display:flex;justify-content:flex-end;gap:18px;margin-top:14px;font:14px var(--mono)}
/* On a phone the runs keep their columns readable and scroll inside their cell, rather than
   breaking every word onto a line of its own. */
@media(max-width:679px){.history table{min-width:36rem}}

/* Logging in: the narrow poster's one cell, roomier than most: a button per login, then the
   token's form under a thin rule. */
.login{max-width:none;margin:0;padding:calc(var(--pad)*1.6) calc(var(--pad)*1.4)}
.login h1{margin-bottom:20px}
.login .with{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.login form{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.login label{display:block;margin-bottom:8px;font-size:15px;color:var(--dim)}
.login .token{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.login .token input{flex:1 1 12rem;min-width:0}
input,textarea,select{font:15px var(--mono);padding:7px 9px;background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);border-radius:0}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:0}
textarea{width:100%;font-size:15px;resize:vertical}

/* Needs you: the list's items a row each, what a question offers on the line under its title; an
   item's page, its round of questions (a form whose cells are a stack) beside the chat, whose
   lines scroll inside their pane and whose box sits under it. */
.needforms .held{margin:0;font-size:15px}
.needforms form{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.needforms input{flex:1 1 9rem;min-width:0;font-size:14px;padding:5px 7px}
.round h2{margin:6px 0 8px}
.round .kicker code,.musts code{font-size:13px;text-transform:none;letter-spacing:0}
.why-asked{margin:0 0 12px}
fieldset.options{display:flex;flex-direction:column;gap:6px;margin:0 0 12px;padding:0;border:0}
fieldset.options legend{padding:0;margin-bottom:4px;font:700 12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--dim)}
fieldset.options label{display:flex;gap:.55rem;align-items:baseline;padding:6px 8px;border:1px solid var(--line);cursor:pointer}
fieldset.options label:hover{background:var(--hover)}
fieldset.options label:has(input:checked){border-color:var(--ink)}
fieldset.options input{flex:none;margin:0;accent-color:var(--blue)}
ul.list.facts>li{display:block;font-size:15px;padding:.45em 0}
ul.list.facts>li.answered{font-weight:700}
.answerbar{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}
.chat{display:flex;flex-direction:column;gap:10px}
.chat h2{margin:0}
.chat p{margin:0}
.chatlog{flex:0 1 auto;min-height:6rem;max-height:min(60vh,34rem);overflow-y:auto;border-top:1px solid var(--ink)}
.chatlog:empty{display:none}
.chatlog .line{padding:8px 0;border-bottom:1px solid var(--line)}
.chatlog .line.mine{padding-left:10px;background:var(--bg2)}
.chatlog .who{margin:0;font-size:14px}
.chatlog .said{margin:2px 0 0;font-size:15px;white-space:pre-wrap;overflow-wrap:anywhere}
form.say{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.note-line{font-size:14px}
table.needlist td.what{overflow-wrap:anywhere}
table.needlist td.what .offers{display:block;font-size:14px;color:var(--dim)}
@media(max-width:679px){table.needlist thead{display:none}
  table.needlist :is(tbody,tr,td){display:block;padding-left:0;padding-right:0}
  table.needlist td{border:0;padding-block:2px}
  table.needlist tr{padding:8px 0;border-bottom:1px solid var(--line)}
  table.needlist tbody tr:last-child{border-bottom:0}
  table.needlist td.who{display:inline-block;margin-right:14px}
  table.needlist td.who:nth-child(2)::before{content:"raised by "}
  table.needlist td.who:nth-child(3)::before{content:"held by "}
  table.needlist td.actions form{margin-left:0}}
@media(min-width:900px){table.needlist{table-layout:fixed}table.needlist th:nth-child(1){width:44%}table.needlist th:nth-child(2){width:17%}table.needlist th:nth-child(3){width:13%}}
/* Folds. */
summary{cursor:pointer}
details.fold{margin-top:6px}
details.fold>summary{color:var(--dim);font:14px var(--text);margin-left:10px}

/* Sessions, people, checks, commits, main. */
.limited{margin:8px 0 16px;padding:8px 14px;background:var(--tint-yellow);border-left:5px solid var(--yellow);font-size:15px}
.sessnow>h2:first-child{margin-top:0}
td.num>form.steer{margin:0}
.sessrun{margin:6px 0 10px 12px;padding-left:10px;border-left:3px solid var(--line)}
.runline{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;font:15px var(--text)}
.runline .why{margin:0;padding:0;background:none;border:0;font:15px var(--text);color:var(--error);white-space:normal}
.checksnow{margin:2px 0 4px 8px;font-size:14px;line-height:1.9}
.checksnow b{margin-right:6px;font:700 14px var(--text)}
.checksnow .dim{margin-right:8px}
ul.subs,ul.notes,ul.how{margin:0;padding:0;list-style:none}
ul.subs>li{padding:7px 0;border-bottom:1px solid var(--line)}
ul.subs>li>a{font-family:var(--mono);font-size:14.5px}
ul.subs .sessrun{margin:6px 0 4px 14px}
ul.subs>li:last-child{border-bottom:0;padding-bottom:0}
ul.notes li{padding:7px 0;border-bottom:1px solid var(--line);font-size:15px}
ul.list.how>li{display:block;font-size:15px}
ul.how b{font:700 15px var(--text)}
.steering form,.steer form{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:8px 0}
.steering form.notice{flex-direction:column;align-items:flex-start}
.steering form.notice label{display:flex;flex-direction:column;gap:6px;width:min(640px,100%);font-size:15px}
.steering label{font:15px var(--text);color:var(--dim)}
.steering input{width:80px;font-size:15px;padding:5px 7px}
/* A session's actions: its runs and its limit side by side, the notice below across both. */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:12px 40px}
.acts h3{margin:0}
.acts p{margin:6px 0 0}
.acts .forms{display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.acts .wide{grid-column:1/-1;padding-top:12px;border-top:1px solid var(--line)}
td.actions{white-space:normal}
td.actions form{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 2px 6px;max-width:100%}
td.actions input{width:min(150px,100%);min-width:0;font-size:14px;padding:4px 6px}
td.actions button{padding:3px 8px;box-shadow:2px 2px 0 var(--ink)}
p.summary{margin:2px 0 10px;font:15px/1.9 var(--text)}
p.summary .pill{vertical-align:1px}
/* A repository's main: its live region (#live) and the region's one block hold the page's every
   cell, and lay them on the sheet's grid as if they sat in <main>; its cells as cells there are
   (no specificity of their own, so spans and blocks still say). */
.poster>main>#live,.poster>main>#live>[data-k]{display:contents}
:where(.poster>main>#live>[data-k]>.cell){grid-column:1/-1;min-width:0;max-width:100%;padding:var(--pad);background:var(--paper);overflow-x:auto}
:where(.poster>main>#live>[data-k]>.cell)>:first-child{margin-top:0}
:where(.poster>main>#live>[data-k]>.cell)>:last-child{margin-bottom:0}
table.broken td{font-size:15px}
table.broken td.what{overflow-wrap:anywhere}
table.broken .test{font:14px var(--mono);color:var(--dim);overflow-wrap:anywhere}
.striprow{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:12px;align-items:center;margin:6px 0}
.striprow .repo{font:14px var(--mono);overflow-wrap:anywhere}
.strip{display:flex;flex-wrap:wrap;gap:3px;min-width:0;overflow:hidden}
.sq{flex:0 0 auto;width:12px;height:18px;background:var(--line)}
.sq.pass{background:var(--muted)}.sq.fail{background:var(--fail)}.sq.error{background:var(--wait)}
.sq:hover{outline:2px solid var(--ink);outline-offset:1px;background-clip:content-box}
.striprow .meta{font-size:14px;white-space:nowrap;color:var(--dim)}
p.facts{margin:0 0 8px;font-size:15px}
p.facts b{font:700 15px var(--text)}
td.firstfail{max-width:420px;font:700 14px var(--mono);color:var(--fail);overflow-wrap:anywhere}
.history tr.fail td.what>a,.history tr.run td.what>a{font-weight:700}
.history td.what .tag{margin-left:4px}
.history td.who a.dim{margin-left:2px}
.why{margin:4px 0 8px;padding:8px 12px;border-left:5px solid var(--red);background:var(--tint-red);font:13.5px/1.5 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere}
.cov{overflow-x:auto}
.cov table{width:auto}
.cov th{writing-mode:vertical-rl;transform:rotate(180deg);font:400 12.5px var(--mono);text-transform:none;letter-spacing:0;padding:4px 2px;white-space:nowrap;border-bottom:1.5px solid var(--ink)}
td.cell{text-align:center;padding:2px 4px;font-size:12px}td.cell.fail,td.cell.fail a{color:var(--fail);font-weight:700}td.cell.error{color:var(--error);background:color-mix(in srgb,var(--yellow) 45%,var(--paper))}td.cell.pass{color:var(--muted)}

@media(max-width:900px){.runcols{grid-template-columns:minmax(0,1fr)}.totals{grid-template-columns:1fr 1fr}}
@media(max-width:679px){table.runs th.prog,table.runs td.prog{display:none}.striprow{grid-template-columns:minmax(0,1fr)}.pagehead nav.chips{margin-left:0}.totals{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* The page lost its live stream and is opening it again (ui.js). */
.reconnecting{position:fixed;right:1rem;bottom:1rem;z-index:96;padding:5px 12px;background:var(--yellow);color:var(--on-yellow);border:1.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);font:700 14px/1.4 var(--text)}
.reconnecting[hidden]{display:none}