@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/pixel-paper.css

@@ -1,20 +1,11 @@
-/* pixel paper: base elements and every component class, built on the tokens only.
-   Components render exactly this markup; DESIGN.md documents it for use without Foldkit. */
-
 @import "./tokens.css";
 
-/* ---------- base ---------- */
-
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-/* anchors land 16px clear of the sticky top bar, at the height TopBar measures it to be
-   however it wraps; without Foldkit, at one line's height. A status bar along the bottom is
-   kept clear the same way: the page ends above it, and so does a scrolled-to anchor. The
-   measured heights are written inline on <html>, over these */
 :root {
   --topbar-h: 48px;
   --statusbar-h: 0px;
@@ -87,7 +78,6 @@ kbd {
   display: inline-block;
   vertical-align: -1px;
   flex: none;
-  /* the grid is pixels: never let the rasterizer soften a cell edge */
   shape-rendering: crispedges;
 }
 
@@ -124,10 +114,6 @@ kbd {
   display: none !important;
 }
 
-/* ---------- hit areas: every target at least 24px square ---------- */
-
-/* a control drawn smaller than 24px (a tab, a filter chip, a mark, a text button, a crumb)
-   keeps its look and takes the pointer over an invisible 24px square centred on it */
 :is(
   .nav.tabs button,
   .switch > button,
@@ -162,7 +148,6 @@ kbd {
   translate: -50% -50%;
 }
 
-/* an icon button never gives up its 24px square to a full line; a tag beside it clips first */
 .iconbtn {
   flex: none;
 }
@@ -172,7 +157,6 @@ kbd {
   min-width: 0;
 }
 
-/* a clickable tag clips its words inside, so its hit square is not clipped with them */
 button.tag:has(> span) {
   overflow: visible;
 }
@@ -183,8 +167,6 @@ button.tag > span {
   text-overflow: ellipsis;
 }
 
-/* ---------- registers ---------- */
-
 .label {
   font-family: var(--font-px);
   font-size: var(--type-label);
@@ -225,12 +207,6 @@ button.tag > span {
   max-width: 46ch;
 }
 
-/* ---------- layout: stack, group, wrap ---------- */
-
-/* Space between components, and nothing else: no paper, border or shadow. A stack is a
-   column whose children take its width (s, m or l apart; m by default); a group is one line
-   centred on its cross axis that never wraps (s apart); a wrap is a line that wraps, for
-   buttons and chips (s apart). */
 .stack {
   display: grid;
   align-content: start;
@@ -253,7 +229,6 @@ button.tag > span {
   min-width: 0;
 }
 
-/* a wide table or a long line scrolls inside its own box, never widening the stack */
 .stack > *,
 .group > * {
   min-width: 0;
@@ -271,8 +246,6 @@ button.tag > span {
   gap: var(--space-l);
 }
 
-/* ---------- the page head: a working screen's name, its count and its actions ---------- */
-
 .page-head {
   display: flex;
   flex-wrap: wrap;
@@ -299,7 +272,6 @@ button.tag > span {
   overflow-wrap: anywhere;
 }
 
-/* on the dithered ground muted ink is too faint: the count prints in ink */
 .page-head .meta {
   font-size: var(--type-state);
   color: var(--ink);
@@ -318,9 +290,6 @@ button.tag > span {
   }
 }
 
-/* ---------- top bar ---------- */
-
-/* the rail and the stage hang from the bar's lower edge, whatever its height */
 .topbar {
   anchor-name: --topbar;
   position: sticky;
@@ -346,9 +315,6 @@ button.tag > span {
   white-space: nowrap;
 }
 
-/* the block cursor, blinking in whole steps: after a word that is busy (a button, a
-   chip, the connection word, a loading line), and four times after the wordmark. Each
-   place sets only its size */
 .cursor {
   display: inline-block;
   width: 6px;
@@ -378,8 +344,6 @@ button.tag > span {
   flex: 1;
 }
 
-/* the right-hand tools wrap as one group, never one control per line; a group wider than the
-   window wraps onto lines of its own, at the right */
 .topbar-tools {
   display: flex;
   flex-wrap: wrap;
@@ -417,7 +381,6 @@ button.tag > span {
   color: var(--muted);
 }
 
-/* the link dropped and is coming back: a warning, on amber, until it holds or gives up */
 .link-state.reconnecting {
   padding: 2px 6px;
   color: var(--on-status);
@@ -445,8 +408,6 @@ a.textbtn {
   border-bottom-color: var(--ink);
 }
 
-/* ---------- nav and tabs: one ink-bordered strip of segments ---------- */
-
 .nav {
   display: flex;
   gap: 0;
@@ -455,7 +416,6 @@ a.textbtn {
   border: var(--line) solid var(--ink);
 }
 
-/* tabs at the top of a flush panel sit inside its padding */
 .panel > .tabbed > .nav.tabs {
   margin: var(--pad) var(--pad) 0;
 }
@@ -475,7 +435,6 @@ a.textbtn {
   white-space: nowrap;
 }
 
-/* every segment after the first (the element rules above would otherwise remove it) */
 .nav > :is(a, button) + :is(a, button) {
   border-left: var(--line) solid var(--ink);
 }
@@ -487,7 +446,6 @@ a.textbtn {
   color: var(--paper);
 }
 
-/* --on-head remains readable on plain and inverted segments. */
 .nav .navnum {
   display: inline-block;
   margin-left: 8px;
@@ -502,7 +460,6 @@ a.textbtn {
   font-size: var(--type-state);
 }
 
-/* a phone keeps every segment on one strip: tighter pads, never a horizontal scroll */
 @media (max-width: 600px) {
   .nav a,
   .nav button {
@@ -514,9 +471,6 @@ a.textbtn {
     margin-left: 5px;
   }
 
-  /* the phone bar: wordmark and tools on one line, the page nav as a full-width strip
-     under them. Where the two do not fit side by side the tools wrap under the wordmark,
-     which never clips. Every tool stays: a session action may have nowhere else to live */
   .topbar {
     gap: 8px 12px;
     padding: 8px 12px;
@@ -538,8 +492,6 @@ a.textbtn {
   }
 }
 
-/* ---------- places: a column of places to go, the one you are in inverted ---------- */
-
 .places ul {
   list-style: none;
 }
@@ -575,7 +527,6 @@ a.textbtn {
   cursor: pointer;
 }
 
-/* the ring sits inside the line, so the panel's edge never cuts it */
 .places li > :is(a, button):focus-visible {
   outline-offset: -4px;
 }
@@ -612,8 +563,6 @@ a.textbtn {
   outline-color: var(--paper);
 }
 
-/* ---------- buttons ---------- */
-
 .btn {
   font-family: var(--font-px);
   font-size: var(--type-control);
@@ -676,14 +625,10 @@ a.textbtn {
   color: var(--paper);
 }
 
-/* One ring at a time: once the action bar holds focus anywhere, focus carries the ring;
-   the resting default falls back to the plain print shadow so the ring visibly moves. */
 .card-actions:focus-within .btn.default-ring:not(:focus) {
   box-shadow: var(--shadow-button);
 }
 
-/* a held default that does not hold focus (a confirm's cancel while its delete runs) prints
-   as every held button, with no ring and no shadow; its margin stays, so nothing moves */
 .btn.default-ring[aria-disabled="true"]:not(:focus),
 .card-actions:focus-within .btn.default-ring[aria-disabled="true"]:not(:focus) {
   box-shadow: none;
@@ -700,8 +645,6 @@ a.textbtn {
   box-shadow: none;
 }
 
-/* red at rest is reserved: .danger is the commit button inside a confirm card, never a
-   row or form action. Rows carry neutral buttons; the confirm card turns them red */
 .btn.danger {
   color: var(--red);
   border-color: var(--red);
@@ -733,7 +676,6 @@ a.textbtn {
   color: var(--ink);
 }
 
-/* the key that does the same, small after the words, in the button's own colour */
 .btn .key-hint {
   margin-left: var(--space-s);
   font-family: var(--font-px);
@@ -743,10 +685,6 @@ a.textbtn {
   opacity: 0.65;
 }
 
-/* ---------- buttons: busy and done ---------- */
-
-/* busy: the working cursor prints in the right padding, one cell after the label, so going
-   busy moves nothing and the button keeps its width */
 .btn {
   position: relative;
 }
@@ -764,9 +702,6 @@ a.textbtn {
   height: 9px;
 }
 
-/* done: the work went (a form sent). Ink, as the ok notice's glyph box is, because success
-   is not a status colour and never green; flat and still, because nothing is left to press.
-   The check takes the glyph's place and both words share one cell, so the width holds */
 .btn.done[aria-disabled="true"] {
   color: var(--paper);
   background: var(--ink);
@@ -786,8 +721,6 @@ a.textbtn {
   visibility: hidden;
 }
 
-/* ---------- menus: one printed slip under its toggle ---------- */
-
 /* hung under its toggle by @foldkit/ui's Anchor, which positions it and flips it near the
    window edge, in the page's top layer (inside the open dialog when there is one). Anchor
    writes left and top for an absolute box (fixed it sets itself, under a fixed toggle), so
@@ -809,7 +742,6 @@ a.textbtn {
   position: relative;
 }
 
-/* a context menu hangs from the pointer; ContextMenu keeps it inside the window */
 .menu.at-point {
   position: fixed;
 }
@@ -843,8 +775,6 @@ a.textbtn {
   background: var(--head);
 }
 
-/* unavailable: printed muted, no hover, still reached by the arrows (its ring shows where
-   the keyboard is). The item in force keeps its inversion below */
 .menu [role^="menuitem"][aria-disabled="true"] {
   color: var(--muted);
   cursor: default;
@@ -869,7 +799,9 @@ a.textbtn {
   color: var(--muted);
 }
 
-.menu :is([aria-current="page"], [role="menuitemradio"][aria-checked="true"]) .key-hint {
+.menu
+  :is([aria-current="page"], [role="menuitemradio"][aria-checked="true"])
+  .key-hint {
   color: inherit;
   opacity: var(--fade-on-ink);
 }
@@ -893,7 +825,6 @@ a.textbtn {
   background: var(--ink);
 }
 
-/* a sentence, not a label: sans, sentence case, one quiet line; a group's heading too */
 .menu .menu-note {
   display: block;
   padding: 7px 12px;
@@ -913,12 +844,10 @@ a.textbtn {
   gap: var(--gap);
 }
 
-/* grid items must never let min-content widen a panel past the deck */
 .deck > * {
   min-width: 0;
 }
 
-/* a sheet takes a panel's place on the page, so it prints as one */
 .panel,
 .sheet {
   background: var(--paper);
@@ -974,29 +903,20 @@ a.textbtn {
   margin-left: auto;
 }
 
-/* a notice in a foot takes the whole line */
 .panel-foot > .notice {
   flex: 1 1 100%;
 }
 
-/* the shelf: a strip on the head tint under the bar, for a field that picks what the body
-   shows */
 .panel-shelf {
   padding: 10px 12px 12px;
   background: var(--head);
   border-bottom: var(--hair) solid var(--rule);
 }
 
-/* on the head tint a field's label takes on-head: muted misses AA there */
 .panel-shelf :is(.field > label:not(.choice), .field-label) {
   color: var(--on-head);
 }
 
-/* ---------- the panel's title-bar lead and actions ---------- */
-
-/* small buttons and icon buttons at the bar's right end, and an icon button before the
-   title; the bar trims its padding around them, as a window's does, so a small button keeps
-   the bar near its one-line height */
 .panel-tb:has(> :is(.panel-lead, .panel-acts)) {
   align-items: center;
   padding-block: 3px;
@@ -1025,13 +945,10 @@ a.textbtn {
   flex: none;
 }
 
-/* a meta keeps its place right of the title, before the actions */
 .panel-tb:has(> .panel-acts) > .meta {
   margin-left: 0;
 }
 
-/* on the ink bar a button prints in paper: an outline, or filled when primary. No print
-   shadow (it cannot show on ink), so a press nudges 1px, as a toolbar tool does */
 .panel-lead .btn,
 .panel-acts .btn {
   color: var(--paper);
@@ -1058,22 +975,17 @@ a.textbtn {
   opacity: var(--fade-held);
 }
 
-/* a quiet icon button prints in paper, and a hover cannot darken it to the ink of the bar */
 .panel-lead .iconbtn.quiet,
 .panel-acts .iconbtn.quiet {
   color: inherit;
 }
 
-/* the ring sits 4px inside the button in its own text colour, so it reads on an outline and
-   on a filled one alike */
 .panel-lead .btn:focus-visible,
 .panel-acts .btn:focus-visible {
   outline-color: currentColor;
   outline-offset: -4px;
 }
 
-/* ---------- the filter strip ---------- */
-
 .strip {
   display: flex;
   align-items: center;
@@ -1158,7 +1070,6 @@ button.fchip:active {
   color: var(--paper);
 }
 
-/* inverted, the name prints in paper like its value: a faded paper misses AA on plum */
 .fchip.pinned .fchip-name,
 .fchip[aria-pressed="true"] .fchip-name {
   color: inherit;
@@ -1173,8 +1084,6 @@ button.fchip:active {
   background: var(--head);
 }
 
-/* the input lies above the chip's hit square (in the chip's own stacking context), so a press
-   in it places the caret or selects; the rest of the square is the label's, which focuses it */
 .fchip.query input {
   position: relative;
   z-index: 1;
@@ -1212,8 +1121,6 @@ button.fchip:active {
   border-color: var(--ink);
 }
 
-/* ---------- chips ---------- */
-
 .chip {
   font-family: var(--font-px);
   font-size: var(--type-state);
@@ -1232,7 +1139,6 @@ button.fchip:active {
   color: var(--on-status);
 }
 
-/* amber: a warning the row carries (an update waiting, a source behind) */
 .chip.warn {
   background: var(--amber);
   color: var(--on-status);
@@ -1249,11 +1155,6 @@ button.fchip:active {
   border-color: var(--muted);
 }
 
-/* a chip as a cell, where its word would take a title's room: a 10px square, hollow where the
-   chip is plain and filled where it has a tone, so plain and toned differ by form, not hue.
-   Blocked fills red, where the chip only outlines it, and done fills muted, where the chip only
-   tints, since neither an outline nor a tint reads in a 6px cell. Its word is its name and its
-   tip. In a row it keeps the 18px of the glyph cell it stands in */
 .chip-dot {
   display: inline-block;
   flex: none;
@@ -1286,7 +1187,6 @@ button.fchip:active {
   margin-inline: 4px;
 }
 
-/* Black on amber preserves 3:1 contrast; an amber glyph on paper does not. */
 .mark {
   display: inline-flex;
   align-items: center;
@@ -1302,7 +1202,6 @@ button.mark {
   cursor: pointer;
 }
 
-/* where every row is marked the mark prints plain: amber is for the one among many */
 .mark.plain {
   background: none;
   color: var(--muted);
@@ -1333,8 +1232,6 @@ button.tag:hover {
   border-color: var(--muted);
 }
 
-/* ---------- rows and the outline ---------- */
-
 .rows {
   list-style: none;
 }
@@ -1343,7 +1240,6 @@ button.tag:hover {
   padding: 8px 0 14px;
 }
 
-/* nested lists indent 26px and hang on a 1px rule guide */
 .tree ul.rows {
   position: relative;
   padding-left: 26px;
@@ -1368,7 +1264,6 @@ button.tag:hover {
   min-height: var(--row);
 }
 
-/* background-color, not background: hover must not wipe the inline indent guides */
 .row:hover,
 .row:focus-within {
   background-color: var(--head);
@@ -1395,8 +1290,6 @@ button.glyph {
   color: var(--ink);
 }
 
-/* the text clips, but 4px of room inside the clip (given back by the margin, so nothing moves)
-   lets a title's ring, 2px out and 2px wide, print whole */
 .row .grow {
   flex: 1;
   min-width: 0;
@@ -1407,7 +1300,6 @@ button.glyph {
   margin: -4px;
 }
 
-/* the title opens the record; the pencil renames */
 .row .title {
   font: inherit;
   background: none;
@@ -1427,13 +1319,10 @@ button.glyph {
   text-underline-offset: 3px;
 }
 
-/* held while work runs: the words stay as they are, only the press and the underline go */
 .board-card .title[aria-disabled="true"] {
   cursor: default;
 }
 
-/* stays in layout so hover never reflows the row; dims instead of hiding.
-   0.55 keeps the icons above the 3:1 UI-component contrast floor */
 .row .tools {
   display: inline-flex;
   align-items: center;
@@ -1446,8 +1335,6 @@ button.glyph {
   opacity: 1;
 }
 
-/* a treegrid's own cells around the parts the caller gives (the glyph, the actions): they hold
-   their parts as the row would, so a row lays out the same in a treegrid or out of one */
 .row > .cell {
   display: inline-flex;
   align-items: center;
@@ -1469,10 +1356,6 @@ button.glyph {
   gap: 6px;
 }
 
-/* a row whose box is its link's target: the link's ::after covers the row (the row places it;
-   the text's clip does not, being no containing block). Only the row's controls and what has a
-   tip sit above it, so a menu stays its own target and a dot's tip still shows, while a chip or
-   a due day is the link's like the rest of the row */
 .row.linked .grow a {
   color: inherit;
   text-decoration: none;
@@ -1494,7 +1377,6 @@ button.glyph {
   text-underline-offset: 3px;
 }
 
-/* the keyboard's one stop is the link; its ring is the row's, 4px inside it */
 .row.linked .grow a:focus-visible {
   outline: 0;
 }
@@ -1504,11 +1386,7 @@ button.glyph {
   outline-offset: -4px;
 }
 
-/* the row you are on (its link is aria-current) and a board's cursor card print inverted, as
-   a place does and as the system marks the one current thing: hover adds nothing, what prints
-   muted on paper prints in paper at --fade-on-ink, as a title bar's meta does, chips, marks
-   and buttons keep their own fills, and a ring inside prints in paper. Each selector is
-   written out, not joined in :is(), so each keeps its own specificity */
+/* each selector is written out, not joined in :is(), so each keeps its own specificity */
 .row.linked:has(.grow a[aria-current]),
 .board-card[aria-current="true"] {
   background-color: var(--ink);
@@ -1519,8 +1397,10 @@ button.glyph {
   border-color: var(--paper);
 }
 
-.row.linked:has(.grow a[aria-current]) :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet),
-.board-card[aria-current="true"] :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet) {
+.row.linked:has(.grow a[aria-current])
+  :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet),
+.board-card[aria-current="true"]
+  :is(.glyph, .age, .due, .tag, .done-title, .iconbtn.quiet) {
   color: inherit;
   opacity: var(--fade-on-ink);
 }
@@ -1530,7 +1410,6 @@ button.glyph {
   border-color: currentColor;
 }
 
-/* lateness cannot be red on ink: it takes a red slip, drawn by a spread so nothing moves */
 .row.linked:has(.grow a[aria-current]) :is(.due.late, .age.stale),
 .board-card[aria-current="true"] :is(.due.late, .age.stale) {
   opacity: 1;
@@ -1545,14 +1424,6 @@ button.glyph {
   outline-color: var(--paper);
 }
 
-/* the cursor: the one row (or board card) the keyboard's commands act on. It is not focus
-   (the ring, which can be elsewhere) and not selection (the box's cell).
-
-   A list's cursor row is drawn, not filled: a 1px muted line 4px inside the row, so it follows
-   the indent of a nested row and never leaves the panel. The row keeps its own colours and
-   no fill at all, not even the hover or focus tint other rows take. Focus on the row itself
-   thickens that same line to 2px: one line inside the row, never a second ring outside it.
-   Controls and fields in the row keep their own ring and surface. */
 .row[aria-current="true"] {
   outline: 1px solid var(--muted);
   outline-offset: -4px;
@@ -1568,8 +1439,6 @@ button.glyph {
   opacity: 1;
 }
 
-/* a phone has no room for the hover tools; the detail card carries every edit. Titles
-   wrap to a second line instead of clipping to a few characters beside the chips */
 @media (max-width: 600px) {
   .row .tools {
     display: none;
@@ -1592,10 +1461,6 @@ button.glyph {
   }
 }
 
-/* ---------- selectable rows and the select-all head ---------- */
-
-/* the box's cell: the row's full height at its left edge, all of it the box's target. The
-   text beside it is the box's label, so a click there toggles too */
 .row-check {
   position: relative;
   align-self: stretch;
@@ -1606,8 +1471,6 @@ button.glyph {
   padding: 0 10px;
 }
 
-/* the box: a role="checkbox" button printed as a choice's box is, with the same 6px mark
-   painted only when checked */
 .row-check > [role="checkbox"] {
   appearance: none;
   width: 14px;
@@ -1628,7 +1491,6 @@ button.glyph {
   height: 6px;
 }
 
-/* a press anywhere in the cell lands on the box */
 .row-check > [role="checkbox"]::after {
   content: "";
   position: absolute;
@@ -1639,11 +1501,6 @@ button.glyph {
   cursor: pointer;
 }
 
-/* selected: the box's cell inverts, an ink square at the row's edge with the box printed in
-   paper inside it. Not the whole row: inversion is the system's mark for the one current
-   thing, and a list with half its rows inverted reads as a barcode that buries its titles
-   and chips. A column of ink cells still reads at a glance, as a history's inverted version
-   box does */
 .row-check:has(> [aria-checked="true"]) {
   background: var(--ink);
 }
@@ -1661,19 +1518,16 @@ button.glyph {
   outline-color: var(--paper);
 }
 
-/* a box that cannot be picked (a select-all over an empty list, never checked) prints muted */
 .row-check > [aria-disabled="true"] {
   border-color: var(--muted);
   cursor: default;
 }
 
-/* mixed: some of the list, not all; a 2px bar across the box's cell */
 .row-check > [aria-checked="mixed"]::before {
   height: 2px;
   background: var(--ink);
 }
 
-/* the head above a selectable list: the box, the count, and the bulk actions */
 .row.bulk {
   border-bottom: var(--hair) solid var(--rule);
 }
@@ -1687,7 +1541,8 @@ button.glyph {
   color: var(--muted);
 }
 
-.row.bulk:has(> .row-check > :is([aria-checked="true"], [aria-checked="mixed"])) .bulk-count {
+.row.bulk:has(> .row-check > :is([aria-checked="true"], [aria-checked="mixed"]))
+  .bulk-count {
   color: var(--ink);
 }
 
@@ -1698,7 +1553,6 @@ button.glyph {
   flex: none;
 }
 
-/* inline editing: the ghost ⇄ input swap must not change the row's height */
 input.inline-input {
   font: inherit;
   color: inherit;
@@ -1710,7 +1564,6 @@ input.inline-input {
   height: calc(1lh + 1px);
 }
 
-/* a write is out: the text holds, muted, until it settles; a refused one keeps it on a red rule */
 input.inline-input[aria-busy="true"] {
   color: var(--muted);
   cursor: progress;
@@ -1720,9 +1573,6 @@ input.inline-input[aria-invalid="true"] {
   border-bottom-color: var(--red);
 }
 
-/* in a row, focus shows as the caret and the rule, not a ring: the rule doubles to 2px, as a
-   field's baseline does, drawn inside the box, so the row keeps its height, and in the rule's
-   own colour, so a refused edit stays red */
 .row .grow input.inline-input:focus-visible {
   outline: none;
   box-shadow: inset 0 -1px 0 var(--ink);
@@ -1732,7 +1582,6 @@ input.inline-input[aria-invalid="true"] {
   box-shadow: inset 0 -1px 0 var(--red);
 }
 
-/* the flash word: a transient confirmation printed beside the action, then gone */
 .flash-word {
   font-family: var(--font-px);
   font-size: var(--type-state);
@@ -1746,8 +1595,6 @@ input.inline-input[aria-invalid="true"] {
   display: none;
 }
 
-/* ---------- selects, checks, radios ---------- */
-
 select,
 select::picker(select) {
   appearance: none;
@@ -1795,9 +1642,6 @@ select option {
   cursor: pointer;
 }
 
-/* a field that cannot change prints its value muted. The boxless one also drops its dotted
-   baseline, the mark of a place to type, so it reads as a value; boxed ones mute their box.
-   The .boxed selector is there for its weight: it out-weighs `.field.boxed input`, below */
 .field :is(input, textarea):disabled,
 .field.boxed :is(input, textarea):disabled,
 select:disabled {
@@ -1824,8 +1668,6 @@ select:disabled {
   cursor: pointer;
 }
 
-/* a radio choice is its option: the whole line is the button, so a press anywhere on it
-   chooses it */
 button.choice {
   appearance: none;
   font: inherit;
@@ -1853,16 +1695,12 @@ button.choice {
   gap: 2px;
 }
 
-/* side by side while they fit, then onto the next line: never off the panel's edge */
 .choices.inline {
   display: flex;
   flex-wrap: wrap;
   gap: 2px 24px;
 }
 
-/* the choice's box: a role="checkbox" button, or the mark inside a role="radio" one, a 14px
-   ink square whose 6px mark exists in both states and is only painted when checked, so the
-   line never bounces on toggle */
 .choice-box {
   appearance: none;
   width: 14px;
@@ -1884,8 +1722,6 @@ button.choice {
   height: 6px;
 }
 
-/* a radio's mark is a diamond: the same cell, turned, so a single choice reads differently
-   from a checkbox at a glance */
 .choice[role="radio"] > .choice-box::before {
   clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
   width: 8px;
@@ -1897,8 +1733,6 @@ button.choice {
   background: var(--ink);
 }
 
-/* a failed radio group (the group is aria-invalid, which a radio does not take): each box and
-   its name turn red; the mark inside stays ink */
 .choices[aria-invalid="true"] > .choice[role="radio"] > .choice-box {
   border-color: var(--red);
 }
@@ -1919,8 +1753,6 @@ button.choice {
   cursor: default;
 }
 
-/* ---------- fields ---------- */
-
 .field > label:not(.choice),
 .field-label {
   display: block;
@@ -1932,7 +1764,6 @@ button.choice {
   margin-bottom: 4px;
 }
 
-/* boxless: a dotted muted baseline that becomes solid ink on focus */
 .field input,
 .field textarea {
   width: 100%;
@@ -1963,7 +1794,6 @@ textarea::-webkit-resizer {
   padding-bottom: 1px;
 }
 
-/* the failed field wears red on its own rule and label, not only in the notice above */
 .field input[aria-invalid="true"],
 .field textarea[aria-invalid="true"] {
   border-bottom: 2px solid var(--red);
@@ -1981,7 +1811,6 @@ textarea::-webkit-resizer {
   color: var(--muted);
 }
 
-/* why the field failed, said in red ink under the control and before its help */
 .field .field-error {
   color: var(--red);
 }
@@ -1992,7 +1821,6 @@ textarea::-webkit-resizer {
   gap: 12px 16px;
 }
 
-/* boxed: the field that is the whole job of its row (sign-in, a quick-add field) */
 .field.boxed input,
 .field.boxed textarea {
   border: var(--line) solid var(--ink);
@@ -2012,7 +1840,6 @@ textarea::-webkit-resizer {
   padding-bottom: 5px;
 }
 
-/* a password: the show/hide toggle sits inside the box, at its right end */
 .password {
   display: grid;
 }
@@ -2031,7 +1858,6 @@ textarea::-webkit-resizer {
   padding-right: 32px;
 }
 
-/* a new password's strength: four short cells and its word, under the box */
 .field .strength {
   display: flex;
   align-items: center;
@@ -2039,9 +1865,6 @@ textarea::-webkit-resizer {
   margin-top: 6px;
 }
 
-/* a date is picked like a select: always boxed (Field adds .boxed), a little shorter, in
-   the pixel face. After the boxed rules, so its padding holds when it fails or has focus;
-   its border, red or muted, is theirs */
 .field.boxed input[type="date"] {
   min-height: 30px;
   padding: 3px 8px;
@@ -2078,9 +1901,6 @@ input.inline-input.title-edit {
   border-bottom-color: var(--muted);
 }
 
-/* ---------- notices: one line, a glyph in a box, the product's own words ---------- */
-
-/* a link or a path in a notice breaks rather than pushing its box wide */
 .notice {
   white-space: normal;
   overflow-wrap: anywhere;
@@ -2116,8 +1936,6 @@ input.inline-input.title-edit {
   display: block;
 }
 
-/* the glyph box a notice, an outcome or a banner opens with, filled in its tone: amber by
-   default */
 :is(.notice, .outcome, .banner) > .glyph {
   flex: none;
   width: 20px;
@@ -2135,8 +1953,6 @@ input.inline-input.title-edit {
   border-color: var(--red);
 }
 
-/* done: a committed change the product wants acknowledged (registered, published). Ink,
-   not green: green means active, and success is not a status */
 :is(.notice, .outcome, .banner) > .glyph.ok {
   background: var(--ink);
   color: var(--paper);
@@ -2148,20 +1964,14 @@ input.inline-input.title-edit {
   border-color: var(--rule);
 }
 
-/* ---------- form errors: the failed field in red, and the summary above the form ---------- */
-
-/* a failed select: a red box, as a failed boxed field is */
 select[aria-invalid="true"] {
   border-color: var(--red);
 }
 
-/* a fieldset holding a failed control turns its legend red, as a field turns its label */
 .field:has([aria-invalid="true"]) > legend {
   color: var(--red);
 }
 
-/* the summary: the error notice, its headline, then a link to each failed field */
-/* links 24px apart, so each keeps its 24px hit square to itself */
 .error-summary ul {
   list-style: none;
   margin-top: 4px;
@@ -2180,8 +1990,6 @@ select[aria-invalid="true"] {
   text-decoration-thickness: 2px;
 }
 
-/* ---------- tables ---------- */
-
 .table-wrap {
   overflow-x: auto;
 }
@@ -2234,7 +2042,6 @@ select[aria-invalid="true"] {
   white-space: nowrap;
 }
 
-/* the actions stay in reach while a wide table scrolls under them */
 .table td.acts,
 .table:has(td.acts) th:last-child {
   position: sticky;
@@ -2250,7 +2057,6 @@ select[aria-invalid="true"] {
   background: var(--head);
 }
 
-/* the pinned column is a printed seam: the rest of the row scrolls under a 2px ink rule */
 @media (max-width: 600px) {
   /* a box-shadow, not a border: collapsed table borders paint with the table and stay
      behind when the cell sticks; the inset shadow travels with the cell */
@@ -2265,8 +2071,6 @@ select[aria-invalid="true"] {
   margin-left: 8px;
 }
 
-/* a stacked table: on a phone each row becomes a block of label and value lines, so a
-   pinned action column never slices through what the row says */
 @media (max-width: 600px) {
   .table thead {
     display: none;
@@ -2325,14 +2129,12 @@ select[aria-invalid="true"] {
   text-decoration: line-through;
 }
 
-/* ---------- properties: label, value, copy ---------- */
-
-/* cells stretch so every rule in a row meets at one line; each cell centres its own content */
-/* the action column stands against the longest value, not at the far edge of a wide
-   panel, so a copy button reads as belonging to its value; the rules still run full width */
 .props {
   display: grid;
-  grid-template-columns: max-content minmax(0, max-content) minmax(max-content, 1fr);
+  grid-template-columns: max-content minmax(0, max-content) minmax(
+      max-content,
+      1fr
+    );
   align-items: stretch;
 }
 
@@ -2396,8 +2198,6 @@ select[aria-invalid="true"] {
   padding: 1px 6px;
 }
 
-/* ---------- code surfaces and secrets ---------- */
-
 .code-surface {
   display: block;
   width: 100%;
@@ -2418,7 +2218,6 @@ textarea.code-surface {
   max-height: 60vh;
 }
 
-/* a phone wraps code rather than scrolling it sideways under a thumb */
 @media (max-width: 600px) {
   textarea.code-surface {
     white-space: pre-wrap;
@@ -2517,7 +2316,6 @@ pre.code-surface {
   letter-spacing: 0.02em;
 }
 
-/* a phone wraps the value rather than hiding its end past the edge */
 @media (max-width: 600px) {
   .secret code {
     white-space: normal;
@@ -2525,8 +2323,6 @@ pre.code-surface {
   }
 }
 
-/* ---------- history ---------- */
-
 .history-list {
   list-style: none;
   border-top: var(--hair) solid var(--rule);
@@ -2572,13 +2368,11 @@ pre.code-surface {
   white-space: nowrap;
 }
 
-/* every version keeps the same box, so inverting the one in force moves nothing */
 .history-list li.current .v {
   background: var(--ink);
   color: var(--paper);
 }
 
-/* a Time in it (an age, "4m ago") takes the inverted box's paper, not its own muted ink */
 .history-list li.current .v .age {
   color: inherit;
 }
@@ -2646,7 +2440,6 @@ pre.code-surface {
   color: var(--ink);
 }
 
-/* an added line sits on the head tint, where muted misses AA in plum */
 .diff tr.add td.ln {
   color: var(--on-head);
 }
@@ -2659,7 +2452,6 @@ pre.code-surface {
   color: var(--red);
 }
 
-/* a folded run prints as a ruled gap, not as code */
 .diff tr.fold td {
   font-family: var(--font-px);
   font-size: var(--type-label);
@@ -2679,8 +2471,6 @@ pre.code-surface {
   }
 }
 
-/* ---------- overlays ---------- */
-
 /* A dialog opens with show(), in place: Foldkit's Dialog makes the page around it inert and
    hidden from screen readers, and sets its fixed, full-viewport box inline. The veil is an
    element of its own (.veil-backdrop) under the pad; the pad lets a press through to it
@@ -2784,20 +2574,16 @@ dialog.veil:focus {
   opacity: var(--fade-on-ink);
 }
 
-/* a held icon button fades on the bar, as a held button in a panel's title bar does */
 :is(.card-tb, .panel-tb) .iconbtn[aria-disabled="true"] {
   opacity: var(--fade-held);
   cursor: default;
 }
 
-/* an ink ring vanishes on an ink bar: in a title bar the ring prints in paper and sits
-   inside the control, so it never runs off the bar's edge onto paper */
 :is(.panel-tb, .card-tb) :focus-visible {
   outline-color: var(--paper);
   outline-offset: -2px;
 }
 
-/* a word longer than the card (a path, a link, an id) breaks rather than pushing it wide */
 .card-body {
   overflow-wrap: break-word;
   padding: var(--pad);
@@ -2820,7 +2606,6 @@ dialog.veil:focus {
   flex-wrap: wrap;
 }
 
-/* the actions hold together at the right; when the bar wraps they drop below the lead as one */
 .card-acts {
   display: flex;
   flex-wrap: wrap;
@@ -2830,8 +2615,6 @@ dialog.veil:focus {
   margin-left: auto;
 }
 
-/* ---------- outcomes: a glyph in a box, a headline, a sentence ---------- */
-
 .outcome {
   display: flex;
   gap: 14px;
@@ -2868,8 +2651,6 @@ dialog.veil:focus {
   margin-top: 8px;
 }
 
-/* ---------- the keymap card ---------- */
-
 .keymap {
   display: grid;
   gap: 14px;
@@ -2910,10 +2691,6 @@ dialog.veil:focus {
   color: var(--muted);
 }
 
-/* ---------- the command palette ---------- */
-
-/* the scope (what the commands act on, a long title as well) wraps inside its chip, and the
-   field takes its own line when what is left is too narrow to type in */
 .palette-q {
   display: flex;
   flex-wrap: wrap;
@@ -2940,7 +2717,6 @@ dialog.veil:focus {
   overflow-wrap: anywhere;
 }
 
-/* on a page, its name after the scope: what is being chosen for what */
 .palette-title {
   font-family: var(--font-px);
   font-size: var(--type-label);
@@ -2969,9 +2745,8 @@ dialog.veil:focus {
   align-items: center;
   gap: 10px;
   width: 100%;
-  /* on a page's tree a choice indents a step a level under the roots (--palette-level), never
-     past a third of the row */
-  padding: 8px 16px 8px calc(16px + min((var(--palette-level, 1) - 1) * 20px, 33%));
+  padding: 8px 16px 8px
+    calc(16px + min((var(--palette-level, 1) - 1) * 20px, 33%));
   font-family: var(--font-px);
   font-size: var(--type-control);
   text-transform: uppercase;
@@ -2983,15 +2758,11 @@ dialog.veil:focus {
   text-align: left;
 }
 
-/* a row that cannot run now prints muted, its reason in the hint; on the cursor it inverts
-   like any other, and the reason says why Enter does nothing */
 .palette-row[aria-disabled="true"] {
   color: var(--muted);
   cursor: default;
 }
 
-/* the cursor: the inverted row, moved by the keys only. The pointer shades the row under it,
-   as a list's row does on hover, and a click picks it */
 .palette-row[aria-selected="true"] {
   background: var(--ink);
   color: var(--paper);
@@ -3001,7 +2772,6 @@ dialog.veil:focus {
   background-color: var(--head);
 }
 
-/* a choice a query keeps only to show where a found one sits: muted, still pickable */
 .palette-row.context:not([aria-selected="true"]) {
   color: var(--muted);
 }
@@ -3051,7 +2821,6 @@ dialog.veil:focus {
   color: inherit;
 }
 
-/* a command that opens a page of choices says so at the far right */
 .palette-row .glyph.opens {
   display: inline-flex;
   color: var(--muted);
@@ -3065,7 +2834,6 @@ dialog.veil:focus {
   margin-left: auto;
 }
 
-/* above the list: the app's own word (a sync notice, why a pick was refused) */
 .palette-detail {
   display: grid;
   gap: 8px;
@@ -3081,8 +2849,6 @@ dialog.veil:focus {
   color: var(--muted);
 }
 
-/* ---------- empty states ---------- */
-
 .empty {
   padding: 26px 16px;
   text-align: center;
@@ -3108,8 +2874,6 @@ dialog.veil:focus {
   margin-top: 6px;
 }
 
-/* ---------- banners and walls ---------- */
-
 .banner {
   position: fixed;
   bottom: calc(var(--statusbar-h) + 16px);
@@ -3162,11 +2926,6 @@ dialog.veil:focus {
   color: var(--ink);
 }
 
-/* ---------- the wall's corner: a slip of controls where a top bar would be ---------- */
-
-/* A page with no top bar keeps what a bar would hold (the palette switch) on a paper slip in
-   its top-left corner, outside the wall's card. It sits in the page, not fixed to the window,
-   so it scrolls away with the top and never covers a tall card. */
 .wall-corner {
   position: absolute;
   top: 12px;
@@ -3183,12 +2942,10 @@ dialog.veil:focus {
   box-shadow: var(--shadow-button);
 }
 
-/* the card keeps clear of the slip */
 .wall-corner ~ .wall {
   padding-top: 72px;
 }
 
-/* a phone has no corner to spare: the slip wraps in the page's flow above the card */
 @media (max-width: 600px) {
   .wall-corner {
     position: static;
@@ -3201,22 +2958,15 @@ dialog.veil:focus {
   }
 }
 
-/* ---------- lists in a card: rows of identities, edge to edge ---------- */
-
-/* a list of rows in a card's body meets the card's edges, between two rules */
 .card-body > .rows {
   margin-inline: calc(-1 * var(--pad));
   border-block: var(--hair) solid var(--rule);
 }
 
-/* an identity as a row's text wraps its name instead of clipping it */
 .row .grow > .identity {
   white-space: normal;
 }
 
-/* ---------- groups in an outline ---------- */
-
-/* a group's name: the row that owns the rows under it */
 .group-name {
   font-family: var(--font-px);
   font-size: var(--type-name);
@@ -3224,14 +2974,12 @@ dialog.veil:focus {
   letter-spacing: var(--tracking-caps);
 }
 
-/* outside a filter, printed only to keep a match on its chain: muted, no chips */
 .row.context .title,
 .row.context .group-name,
 .row.context:hover button.glyph {
   color: var(--muted);
 }
 
-/* a phone gives the title its own line; chips and tools go under it */
 @media (max-width: 600px) {
   .tree .row {
     flex-wrap: wrap;
@@ -3256,8 +3004,6 @@ dialog.veil:focus {
   }
 }
 
-/* ---------- due days ---------- */
-
 .due {
   font-family: var(--font-px);
   font-size: var(--type-state);
@@ -3269,8 +3015,6 @@ dialog.veil:focus {
   color: var(--red);
 }
 
-/* ---------- the board: columns of printed slips ---------- */
-
 .board {
   display: grid;
   grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
@@ -3341,25 +3085,20 @@ dialog.veil:focus {
 .board-card [data-board-grip] {
   margin-right: -6px;
   cursor: grab;
-  /* the grip is where a finger drags; the rest of the slip scrolls the page */
   touch-action: none;
 }
 
-/* the held copy that follows the pointer: lifted onto the card shadow */
 .board-card.lifted {
   cursor: grabbing;
   background: var(--head);
   box-shadow: var(--shadow-card);
 }
 
-/* its holder, placed at the pointer by the board; the board measures the card it lifts,
-   so the copy is as wide as the card and keeps the pointer where it pressed */
 .board-lift {
   width: var(--lift-width, 240px);
   translate: var(--lift-x, 0) var(--lift-y, 0);
 }
 
-/* a card held by the keyboard prints its copy at the top of the column it would land in */
 .board-lift-slot {
   list-style: none;
 }
@@ -3372,7 +3111,6 @@ dialog.veil:focus {
   opacity: var(--fade-dragged);
 }
 
-/* focus on the title rings the whole slip, outside its own border */
 .board-card:focus-within {
   outline: var(--line) solid var(--ink);
   outline-offset: 2px;
@@ -3383,7 +3121,6 @@ dialog.veil:focus {
   outline: none;
 }
 
-/* the card's own hover and focus tints come after the cursor: it keeps its ink */
 .board-card[aria-current="true"]:is(:hover, :focus-within) {
   background-color: var(--ink);
 }
@@ -3403,8 +3140,6 @@ dialog.veil:focus {
   overflow-wrap: anywhere;
 }
 
-/* a title edited in place prints ink on paper, on the cursor's inverted slip too; its caret
-   and its rule are its focus, inside the slip's ring */
 .board-card input.inline-input {
   color: var(--ink);
 }
@@ -3424,13 +3159,10 @@ dialog.veil:focus {
   flex: 1;
 }
 
-/* ---------- sortable: items the reader puts in order, as rows or tiles ---------- */
-
 .sortable-items {
   list-style: none;
 }
 
-/* a row: the grip, then the item, between 1px rules, edge to edge in a flush panel */
 .sortable-item {
   display: flex;
   align-items: center;
@@ -3455,7 +3187,6 @@ dialog.veil:focus {
   flex: none;
 }
 
-/* the grip is the only handle: the rest of the item selects its text and scrolls the page */
 .sortable-item.movable [data-sortable-grip] {
   cursor: grab;
   touch-action: none;
@@ -3465,8 +3196,6 @@ dialog.veil:focus {
   opacity: var(--fade-dragged);
 }
 
-/* where a pointer would drop the held item: a 2px dashed ink line beside the item it lands
-   next to, drawn over the layout so nothing moves under the pointer */
 .sortable-item:is(.drop-before, .drop-after)::before {
   content: "";
   position: absolute;
@@ -3484,7 +3213,8 @@ dialog.veil:focus {
   bottom: -1px;
 }
 
-.sortable:is(.grid, .panels) .sortable-item:is(.drop-before, .drop-after)::before {
+.sortable:is(.grid, .panels)
+  .sortable-item:is(.drop-before, .drop-after)::before {
   top: -2px;
   bottom: -2px;
   left: auto;
@@ -3501,8 +3231,6 @@ dialog.veil:focus {
   right: -9px;
 }
 
-/* the held copy, following the pointer or where the keyboard would drop it: lifted onto the
-   card shadow and tinted, as a board's is; the held item keeps its own print */
 .sortable-item.lifted {
   border: var(--line) solid var(--ink);
   background: var(--head);
@@ -3521,7 +3249,6 @@ dialog.veil:focus {
   translate: var(--lift-x, 0) var(--lift-y, 0);
 }
 
-/* tiles: paper slips on the 3px print shadow that wrap, 180px and up */
 .sortable.grid .sortable-items {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
@@ -3545,9 +3272,6 @@ dialog.veil:focus {
   padding: 0;
 }
 
-/* panels: the parent's own panels, up to three across in the deck's gutter and 300px and up,
-   so two across and then one as the column narrows. A row takes its tallest panel's height,
-   and each panel's foot sits at its bottom */
 .sortable.panels .sortable-items {
   display: grid;
   grid-template-columns: repeat(
@@ -3578,7 +3302,6 @@ dialog.veil:focus {
   margin-top: auto;
 }
 
-/* the drop line runs down the middle of the gutter */
 .sortable.panels .sortable-item.drop-before::before {
   left: calc(var(--gap) / -2 - 1px);
 }
@@ -3587,7 +3310,6 @@ dialog.veil:focus {
   right: calc(var(--gap) / -2 - 1px);
 }
 
-/* the held copy is the panel itself, tinted head and lifted onto the card shadow */
 .sortable.panels .sortable-item.lifted {
   border: 0;
   box-shadow: none;
@@ -3602,7 +3324,6 @@ dialog.veil:focus {
   padding: 0;
 }
 
-/* while a pointer carries an item, the page grabs and selects nothing */
 :root[data-pixel-paper-dragging] {
   user-select: none;
 }
@@ -3611,8 +3332,6 @@ dialog.veil:focus {
   cursor: grabbing !important;
 }
 
-/* ---------- cells: a reading printed as ink squares in a box ---------- */
-
 .cells {
   display: inline-flex;
   gap: 2px;
@@ -3637,23 +3356,17 @@ dialog.veil:focus {
   height: 8px;
 }
 
-/* meters in a list step down by their column instead (below) */
 @media (max-width: 600px) {
   .cells:not(.short, .meters *) .cell {
     width: 8px;
   }
 }
 
-/* ---------- meters: a named reading, its cells, the numbers and a foot line ---------- */
-
-/* the list is the container its rows measure: they stack and their cells narrow by the
-   column they are placed in, not by the window */
 .meters {
   container: meters / inline-size;
   list-style: none;
 }
 
-/* name and plan in a left column; the cells, the reading and the foot beside them */
 .meter-row {
   display: grid;
   grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
@@ -3697,8 +3410,6 @@ dialog.veil:focus {
   }
 }
 
-/* twenty cells take 246px at 10px each; in a narrower column they step down whole pixels,
-   never to a fraction, so a meter fits a column of 160px and up */
 @container meters (width < 280px) {
   .meters .cells .cell {
     width: 8px;
@@ -3738,8 +3449,6 @@ dialog.veil:focus {
   flex-wrap: wrap;
 }
 
-/* a toned meter's lit cells take its reading's tone, amber from 80% and red at the maximum,
-   unless the reading is stale */
 .meter-row.toned.high:not(.stale) .cells .cell.on {
   background: var(--amber);
 }
@@ -3748,7 +3457,6 @@ dialog.veil:focus {
   background: var(--red);
 }
 
-/* a stale reading prints its cells muted: the number is last known, not current */
 .meter-row.stale .cells .cell.on {
   background: var(--muted);
 }
@@ -3784,7 +3492,6 @@ dialog.veil:focus {
   color: var(--red);
 }
 
-/* a history list of checks: when, what was checked, what it read */
 .history-list.checks {
   border-top: 0;
 }
@@ -3804,12 +3511,6 @@ dialog.veil:focus {
   }
 }
 
-/* wrapped: each entry in full, compact enough for a rail's panel. When (a whole timestamp,
-   muted, flush with the what under it) and who share the first line, with the action at its
-   end; what runs under them in the note size and wraps. No rule above the first entry and no
-   padding outside the first and last, so the list starts and ends where its body's content
-   does. The version in force still inverts only its own box, padded so its ink clears the
-   words */
 .history-list.wrapped {
   border-top: 0;
 }
@@ -3859,9 +3560,6 @@ dialog.veil:focus {
   overflow-wrap: anywhere;
 }
 
-/* ---------- charts: amounts as cells, a reading over time as a stepped line ---------- */
-
-/* the picture is aria-hidden; screen readers read the chart's table (.sr-only) instead */
 .chart {
   min-width: 0;
 }
@@ -3874,7 +3572,6 @@ dialog.veil:focus {
   background: var(--ink);
 }
 
-/* scale, labels and the key: the label register, figures tabular */
 .bar-scale,
 .bar-label,
 .line-scale,
@@ -3889,8 +3586,6 @@ dialog.veil:focus {
   line-height: 10px;
 }
 
-/* a reading: the meter's numbers, 11px muted tabular; a toned one is the amber mark or the
-   red chip, so the cells stay ink */
 .bar-num {
   font-family: var(--font-px);
   font-size: var(--type-state);
@@ -3901,14 +3596,11 @@ dialog.veil:focus {
   font-variant-numeric: tabular-nums;
 }
 
-/* a missing reading says so; over a column it breaks onto two lines to keep the column narrow */
 .bar-cols .bar-num.none {
   white-space: normal;
   text-align: center;
 }
 
-/* columns: the scale, then a column of cells per point in one 2px ink frame; readings over
-   it, labels under it. Past twelve points the columns narrow and only a toned reading prints. */
 .bar-cols {
   display: grid;
   grid-template-columns: max-content repeat(var(--n), minmax(6px, 40px));
@@ -3923,7 +3615,6 @@ dialog.veil:focus {
   grid-template-columns: max-content repeat(var(--n), minmax(min-content, 48px));
 }
 
-/* the frame: drawn behind the cells, 2px of paper and 2px of ink outside them */
 .bar-cols::before,
 .bar-rows::before {
   content: "";
@@ -3963,7 +3654,6 @@ dialog.veil:focus {
   gap: 2px;
 }
 
-/* a label under its column, or under the run of columns it stands for, clipped to fit */
 .bar-cols .bar-label {
   grid-row: 3;
   width: 0;
@@ -3981,7 +3671,6 @@ dialog.veil:focus {
   text-align: center;
 }
 
-/* rows: the label, a row of the meter's cells inside the one frame, the reading */
 .bar-rows {
   display: grid;
   grid-template-columns: minmax(0, max-content) minmax(120px, 1fr) max-content;
@@ -4018,7 +3707,6 @@ dialog.veil:focus {
   align-items: center;
 }
 
-/* a toned reading keeps to the row's 14px, so the cells stay 2px apart */
 .bar-rows .chip {
   padding-block: 0;
   line-height: 10px;
@@ -4035,7 +3723,6 @@ dialog.veil:focus {
   }
 }
 
-/* the line chart: the key over the plot, the scale beside it, the labels under it */
 .line-chart {
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);
@@ -4074,7 +3761,6 @@ dialog.veil:focus {
   background: var(--muted);
 }
 
-/* the scale's top and zero centre on the plot's top line and on its axis */
 .line-scale {
   grid-area: scale;
   display: flex;
@@ -4092,7 +3778,6 @@ dialog.veil:focus {
   translate: 0 50%;
 }
 
-/* the axes are the plot's 1px rules; the SVG inside keeps its points clear of them */
 .line-plot {
   grid-area: plot;
   height: var(--chart-plot);
@@ -4120,7 +3805,6 @@ dialog.veil:focus {
   stroke-width: var(--line);
 }
 
-/* a zero-length stroke with square caps: a 6px cell at each point, whatever the width */
 .line-cells {
   stroke-width: 6px;
 }
@@ -4133,7 +3817,6 @@ dialog.veil:focus {
   stroke-width: 4px;
 }
 
-/* labels sit under their points, the first and the last inside the plot's ends */
 .line-labels {
   grid-area: labels;
   position: relative;
@@ -4159,15 +3842,12 @@ dialog.veil:focus {
   translate: -100% 0;
 }
 
-/* a phone has room for half the labels */
 @media (max-width: 600px) {
   .line-labels > span:nth-child(even) {
     display: none;
   }
 }
 
-/* ---------- crumbs: the path to where you are ---------- */
-
 .crumbs ol {
   list-style: none;
   display: flex;
@@ -4200,14 +3880,11 @@ dialog.veil:focus {
   color: var(--ink);
 }
 
-/* ---------- the file tree ---------- */
-
 .file-tree {
   border: var(--line) solid var(--ink);
   padding: 6px 0;
 }
 
-/* flush in a panel, the panel's border is the tree's */
 .panel > .file-tree {
   border: 0;
 }
@@ -4276,8 +3953,6 @@ dialog.veil:focus {
   white-space: nowrap;
 }
 
-/* ---------- the drop zone: dashed while waiting, solid and tinted while a file hovers ---------- */
-
 .drop-zone {
   display: grid;
   justify-items: center;
@@ -4322,8 +3997,6 @@ dialog.veil:focus {
   outline-offset: 2px;
 }
 
-/* ---------- the reading sheet: an authored page in a panel's place ---------- */
-
 .sheet {
   padding: 28px 32px 36px;
 }
@@ -4382,8 +4055,6 @@ dialog.veil:focus {
   }
 }
 
-/* ---------- prose: text keeps a reading measure; code and tables may use the whole sheet ---------- */
-
 .prose {
   font: var(--read-body) / 1.65 var(--font-body);
   color: var(--ink);
@@ -4402,7 +4073,6 @@ dialog.veil:focus {
   margin-top: 1em;
 }
 
-/* an h1 inside prose (a document's own title, under the page's) reads as a section */
 .prose :is(h1, h2) {
   font: var(--read-weight) var(--read-h2) / 1.3 var(--font-body);
   letter-spacing: -0.005em;
@@ -4415,9 +4085,6 @@ dialog.veil:focus {
   margin-top: 1.6em;
 }
 
-/* below h3 the reading scale has no smaller step that still reads as a heading, so each
-   deeper level changes voice instead: pixel caps, then bold body type at the UI's body
-   size, then the muted pixel label. Each stands as far below the text above as an h3 */
 .prose :is(h4, h5, h6) {
   margin-top: calc(1.6 * var(--read-body));
 }
@@ -4526,15 +4193,12 @@ dialog.veil:focus {
   text-decoration-thickness: 2px;
 }
 
-/* a link to a page that does not exist: red, the error colour, on a dotted rule */
 .prose a.missing {
   color: var(--red);
   text-decoration-style: dotted;
   text-decoration-color: var(--red);
 }
 
-/* ---------- contents: the page's headings, with the reading position ---------- */
-
 .toc {
   list-style: none;
   padding: 6px 0;
@@ -4556,13 +4220,11 @@ dialog.veil:focus {
   color: var(--muted);
 }
 
-/* an entry with detail: its words, and what the section holds under them */
 .toc-entry {
   display: grid;
   gap: 2px;
 }
 
-/* the reading position: one ink cell before the entry; every entry keeps the slot */
 .toc a::before {
   content: "";
   flex: none;
@@ -4583,8 +4245,6 @@ dialog.veil:focus {
   background: var(--head);
 }
 
-/* ---------- the working cursor's sizes ---------- */
-
 .chip .cursor,
 .link-state .cursor {
   width: 5px;
@@ -4596,8 +4256,6 @@ dialog.veil:focus {
   margin-left: 6px;
 }
 
-/* ---------- loading: the place content will be, working ---------- */
-
 .loading {
   padding: 26px 16px;
   text-align: center;
@@ -4615,8 +4273,6 @@ dialog.veil:focus {
   position: absolute;
 }
 
-/* ---------- monograms: letters in an ink square, or a mark the product draws in cells ---------- */
-
 .monogram {
   display: inline-grid;
   place-items: center;
@@ -4644,7 +4300,6 @@ dialog.veil:focus {
   color: var(--paper);
 }
 
-/* a mark drawn in cells prints bare, in ink, in the square the letters would take */
 .monogram.drawn {
   border: 0;
   background: none;
@@ -4654,8 +4309,6 @@ dialog.veil:focus {
   background: var(--ink);
 }
 
-/* ---------- identity: who or what, as its monogram beside its name ---------- */
-
 .identity {
   display: flex;
   align-items: center;
@@ -4689,13 +4342,6 @@ dialog.veil:focus {
   font-size: var(--type-title);
 }
 
-/* ---------- stats: a figure, what changed, and what it means, in ruled cells ---------- */
-
-/* Stats are cells in a flush panel, parted by 1px rules like meter rows, not a grid of
-   shadowed slips: a figure belongs to the panel that names what it measures, and a row of
-   raised cards each holding one big number is the hero-metric template this world refuses.
-   Each cell carries its rules right and below; the last column's and row's are clipped by
-   the box, so the rules only ever divide. */
 .stats {
   display: grid;
   grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
@@ -4727,12 +4373,10 @@ dialog.veil:focus {
   color: var(--ink);
 }
 
-/* not known: a muted dash, with words for screen readers */
 .stat-value.unknown {
   color: var(--muted);
 }
 
-/* the working cursor at the figure's height while the value is on its way */
 .stat-value .cursor {
   width: 12px;
   height: 24px;
@@ -4747,8 +4391,6 @@ dialog.veil:focus {
   color: var(--muted);
 }
 
-/* the change: ink, its direction a glyph, never a hue. A warning fills amber, a fault
-   prints red in a red box, as a meter's reading and its full chip do */
 .stat-delta {
   display: inline-flex;
   align-items: center;
@@ -4783,12 +4425,10 @@ dialog.veil:focus {
   color: var(--muted);
 }
 
-/* the last cell has nothing beside it to divide from, in a short last row too */
 .stat:last-child {
   border-right: 0;
 }
 
-/* narrower, four figures across step down the ramp before they would break */
 @media (max-width: 900px) {
   .stat-value {
     font-size: var(--type-figure-narrow);
@@ -4810,12 +4450,6 @@ dialog.veil:focus {
   }
 }
 
-/* ---------- tips: an inverted label above its control ---------- */
-
-/* the page's one tip, anchored to the control it names (its source). A label, not a surface:
-   flat ink with no print shadow, ringed in paper so it parts from an ink bar under it.
-   Centred above its control; near an edge it hangs from the control's side instead, and
-   flips below when the window has no room above */
 .tip[popover] {
   position-anchor: auto;
   inset: auto;
@@ -4841,7 +4475,6 @@ dialog.veil:focus {
   overflow: visible;
 }
 
-/* the key that does the same as the control, after its words, as a button prints it */
 .tip .key-hint {
   margin-left: 6px;
   font-family: var(--font-px);
@@ -4851,9 +4484,6 @@ dialog.veil:focus {
   opacity: var(--fade-on-ink);
 }
 
-/* ---------- toolbars: one strip of tools, one stop for Tab ---------- */
-
-/* the rules between tools are the strip's ink showing through a 2px gap */
 .toolbar {
   display: inline-flex;
   gap: var(--line);
@@ -4901,8 +4531,6 @@ dialog.veil:focus {
   background: var(--head);
 }
 
-/* the ring sits inside the tool in the tool's own ink, so it reads on a pressed (inverted)
-   tool and never lands on the strip's ink between tools */
 .toolbar > :focus-visible {
   outline-color: currentColor;
   outline-offset: -4px;
@@ -4925,16 +4553,12 @@ dialog.veil:focus {
   cursor: default;
 }
 
-/* beside a vertical strip of tools, not over the next tool */
 .tip[popover][data-side="right"] {
   margin: 0 0 0 6px;
   position-area: right;
   position-try-fallbacks: flip-inline;
 }
 
-/* ---------- disclosures: a line that opens what hangs under it ---------- */
-
-/* the line is a summary in plain markup, or the component's button.disclosure-summary */
 .disclosure > :is(summary, .disclosure-summary) {
   display: flex;
   align-items: center;
@@ -4958,7 +4582,6 @@ dialog.veil:focus {
   display: none;
 }
 
-/* the caret turns a quarter, in one step: the grid survives a right angle */
 .disclosure[open] > summary .px-icon,
 .disclosure > .disclosure-summary[aria-expanded="true"] .px-icon {
   transform: rotate(90deg);
@@ -4977,7 +4600,9 @@ dialog.veil:focus {
   cursor: default;
 }
 
-.disclosure > .disclosure-summary[aria-disabled="true"]:hover .disclosure-label {
+.disclosure
+  > .disclosure-summary[aria-disabled="true"]:hover
+  .disclosure-label {
   border-bottom-color: transparent;
 }
 
@@ -4985,7 +4610,6 @@ dialog.veil:focus {
   margin-left: auto;
 }
 
-/* the content hangs from the caret on a 1px guide, level with the summary's words */
 .disclosure-body {
   display: grid;
   gap: var(--space-m);
@@ -4998,12 +4622,6 @@ dialog.veil:focus {
   min-width: 0;
 }
 
-/* ---------- the status bar: the quiet line along the bottom ---------- */
-
-/* fixed along the bottom edge at the height StatusBar measures it to be (`--statusbar-h`,
-   one line without Foldkit): the page, the rail, the stage, a banner and the toasts all stop
-   above it, as they hang below the top bar. The status at the left, the keys at the right;
-   narrow, the keys drop under the status rather than leaving the bar */
 .statusbar {
   position: fixed;
   right: 0;
@@ -5042,13 +4660,6 @@ dialog.veil:focus {
   color: var(--ink);
 }
 
-/* ---------- the rail: a column of panels beside the deck, a drawer on a phone ---------- */
-
-/* one element in two places: at rest, fixed down the left edge from the top bar's lower
-   edge (as the stage hangs); on a phone the same element opens as a popover drawer. The reader's width, when they gave one, is --railed-width, which the view
-   sets on .railed, so the page's padding and the rail's width follow it together; without one,
-   --rail. It is not inherited: each box it sizes takes it from .railed by name, so a width that
-   changes under a dragged splitter restyles those four and none of the rows inside them */
 @property --railed-width {
   syntax: "*";
   inherits: false;
@@ -5085,10 +4696,6 @@ dialog.veil:focus {
   min-width: 0;
 }
 
-/* the rail's top stays put: what comes before its last panel keeps its height, and the last
-   panel takes the room left, at most its own height, its bar, shelf and foot staying while
-   its body scrolls (the padded body, or a flush body's list). The rail scrolls as a whole
-   only when what comes before that panel is taller than the column */
 .rail > .panel:last-child {
   display: flex;
   flex-direction: column;
@@ -5106,7 +4713,6 @@ dialog.veil:focus {
   overflow-y: auto;
 }
 
-/* a long name ends short of the bar's tools rather than wrapping the bar taller */
 .rail .panel-tb h2 {
   min-width: 0;
   overflow: hidden;
@@ -5115,15 +4721,10 @@ dialog.veil:focus {
   text-overflow: ellipsis;
 }
 
-/* the toggle is the button itself in the bar's lead */
 .rail-toggle {
   display: contents;
 }
 
-/* the splitter on the rail's right edge: a 12px strip from the edge outward, over the page's
-   margin and never over the rail's own scrollbar, and beside the rail rather than in it (the
-   rail scrolls, and its drawer's first Tab stop is its first control). It shows itself as a
-   2px ink line down the edge while it is hovered or focused */
 .rail-resize {
   position: fixed;
   top: anchor(--topbar bottom, 0px);
@@ -5160,11 +4761,6 @@ dialog.veil:focus {
   display: none;
 }
 
-/* folded: the first panel stands its title bar on end on the ground where the rail stood, the
-   toggle at its top and the title and count reading down; the rest of the rail and the
-   splitter are gone, and the deck takes the width. Above 900px only: the drawer opens whole.
-   Folding and unfolding move in three steps, as the drawer enters, but never while a pointer
-   drags the splitter, where the rail follows the pointer */
 @media not (max-width: 900px) {
   .railed.folded {
     --railed-width: var(--rail-folded);
@@ -5197,7 +4793,8 @@ dialog.veil:focus {
     transition-property: padding-left, width, left;
   }
 
-  :root[data-pixel-paper-dragging] :is(.railed, .railed > .rail, .railed > .bench) {
+  :root[data-pixel-paper-dragging]
+    :is(.railed, .railed > .rail, .railed > .bench) {
     transition: none;
   }
 }
@@ -5212,7 +4809,6 @@ dialog.veil:focus {
     display: none;
   }
 
-  /* a slice of the ground slides in from the left edge, in three steps */
   .rail[popover]:popover-open {
     inset: 0 auto 0 0;
     width: min(var(--rail-drawer), calc(100vw - 40px));
@@ -5241,8 +4837,6 @@ dialog.veil:focus {
     justify-self: start;
   }
 
-  /* the drawer opens and closes but never folds, so it prints no toggle, and the bar the
-     toggle led keeps its own padding */
   .panel-lead:has(> .rail-toggle) {
     display: none;
   }
@@ -5258,14 +4852,6 @@ dialog.veil:focus {
   }
 }
 
-/* ---------- the bench: a page's work, the window wide, under its head ---------- */
-
-/* hung from the top bar's lower edge like the stage, down to the status bar, edge to edge, or
-   from the rail's edge beside one (a fixed box takes nothing from .railed's padding). The head
-   takes its own height while the work keeps at least --bench-work-min, or all but the head's
-   first --bench-head-min (its padding and a small button: the rail's open button) on a window too short
-   for both; past that the head scrolls itself. The work takes the rest and lays out what
-   fills it (a reel's height is 100% of it). The page does not scroll */
 .bench {
   position: fixed;
   top: anchor(--topbar bottom, 0px);
@@ -5283,10 +4869,6 @@ dialog.veil:focus {
   left: var(--railed-width, var(--rail));
 }
 
-/* the head lines up with a reel's windows, a reel's gutter in from the edge; the reel's own
-   gutter is the space between the head and the windows. A scroller clips at its padding, so
-   the head pads its foot by the ink a control prints past its box (a 3px shadow, a 4px focus
-   ring) and hands that back to the work, which starts where it would */
 .bench-head {
   display: grid;
   align-content: start;
@@ -5311,9 +4893,6 @@ dialog.veil:focus {
   }
 }
 
-/* ---------- the stage: the ground itself, under the top bar, for a canvas ---------- */
-
-/* it does not scroll: what is on it pans. It hangs from the top bar's lower edge */
 .stage {
   position: fixed;
   top: anchor(--topbar bottom, 0px);
@@ -5352,7 +4931,6 @@ dialog.veil:focus {
   translate: -50% 0;
 }
 
-/* the link dropped: the veil comes down over the work, which stops taking input */
 .stage-paused {
   position: absolute;
   inset: 0;
@@ -5376,15 +4954,11 @@ dialog.veil:focus {
     translate: -50% 0;
   }
 
-  /* along the bottom edge the canvas's tools lie flat */
   .stage-tools .toolbar {
     flex-direction: row;
   }
 }
 
-/* ---------- windows: a panel on a stage ---------- */
-
-/* the panel's box and bar, filling whatever places it; the bar is trimmed to hold tools */
 .window {
   display: flex;
   flex-direction: column;
@@ -5400,7 +4974,6 @@ dialog.veil:focus {
   user-select: none;
 }
 
-/* a lead (a reel's grip) trims the bar's left, as a panel's does */
 .window > .panel-tb:has(> .panel-lead) {
   padding-left: 3px;
 }
@@ -5421,8 +4994,6 @@ dialog.veil:focus {
   color: inherit;
 }
 
-/* a child Submodel's tools come back as one element; the group is no box of its own, so its
-   buttons take the bar's gap as the others do */
 .window-tools {
   display: contents;
 }
@@ -5442,7 +5013,6 @@ dialog.veil:focus {
   padding: 0;
 }
 
-/* flush, what fills the body lets the window's border be its own */
 .window.flush .window-body > :is(.code-surface, .file-tree, .diff-wrap) {
   min-height: 100%;
   border: 0;
@@ -5452,8 +5022,6 @@ dialog.veil:focus {
   min-width: 0;
 }
 
-/* ---------- the reel: a scrolling row of columns of panes ---------- */
-
 /* the reel takes its height from whatever holds it; the held copy hangs from it, outside the
    scroller, whose containment would hold a fixed copy inside it */
 .reel {
@@ -5461,8 +5029,6 @@ dialog.veil:focus {
   min-height: 0;
 }
 
-/* the scroller, sideways and, where a column is taller than the view, down. Its size is what
-   a column's width (100cqw) and least height (100cqh) are shares of, so it takes no padding */
 .reel-view {
   height: 100%;
   overflow: auto;
@@ -5470,8 +5036,6 @@ dialog.veil:focus {
   container-type: size;
 }
 
-/* the columns in a row, and the panes' containing block. Each pane is pinned to its slot by
-   anchor positioning, so a move changes where a pane is drawn and never its place in the page */
 .reel-track {
   position: relative;
   display: flex;
@@ -5489,10 +5053,6 @@ dialog.veil:focus {
   width: var(--reel-gutter);
 }
 
-/* a column is width × (view − gutter) − gutter wide, so columns whose widths add up to one
-   fill the view with a gutter between each and at either side; never under the minimum. It is
-   the view's height less a gutter above and below, and taller where its panes need more, which
-   the view scrolls to */
 .reel-column {
   display: flex;
   flex: none;
@@ -5504,7 +5064,6 @@ dialog.veil:focus {
   min-height: calc(100cqh - 2 * var(--reel-gutter));
 }
 
-/* a slot holds a pane's place, its share of the column by weight; the pane is drawn over it */
 .reel-slot {
   position: relative;
   flex: var(--reel-weight, 1) 1 0;
@@ -5512,7 +5071,6 @@ dialog.veil:focus {
   anchor-name: var(--reel-anchor);
 }
 
-/* the splitters: the gutter between two panes, and the one after each column */
 .reel-split {
   position: relative;
   flex: none;
@@ -5526,8 +5084,6 @@ dialog.veil:focus {
   touch-action: none;
 }
 
-/* a splitter shows itself as a 2px ink line along the middle of its gutter while it is
-   hovered or focused; focused, the ring is the system's */
 .reel-resize::after,
 .reel-split::after {
   content: "";
@@ -5561,8 +5117,6 @@ dialog.veil:focus {
   outline-offset: -2px;
 }
 
-/* where a drop would land: a 2px dashed ink line down the gap it would open, or across the
-   gutter between the panes it would join, drawn over the layout so nothing moves under it */
 .reel-gap.drop-here::before {
   content: "";
   position: absolute;
@@ -5590,12 +5144,10 @@ dialog.veil:focus {
   bottom: calc(var(--reel-gutter) / -2 - 1px);
 }
 
-/* the panes' layer is no box of its own: each pane's containing block is the track */
 .reel-panes {
   display: contents;
 }
 
-/* a pane or a column scrolled into view keeps its gutter showing */
 .reel-pane,
 .reel-column {
   scroll-margin: var(--reel-gutter);
@@ -5611,8 +5163,6 @@ dialog.veil:focus {
   min-width: 0;
 }
 
-/* the focused pane lifts onto the card shadow; taking focus itself (it holds no control), it
-   keeps the system's ring outside its window */
 .reel-pane.focused > .window {
   box-shadow: var(--shadow-card);
 }
@@ -5630,8 +5180,6 @@ dialog.veil:focus {
   opacity: var(--fade-dragged);
 }
 
-/* under tabs, the reel is its tab list over the scroller, which takes the height left. The
-   list sits a gutter in from the reel's edges, as the windows do */
 .reel.tabbed {
   display: flex;
   flex-direction: column;
@@ -5649,8 +5197,6 @@ dialog.veil:focus {
   margin: var(--reel-gutter) var(--reel-gutter) 0;
 }
 
-/* a tab holds a kind glyph before its words, and gives up width before the list overflows:
-   its words end in an ellipsis */
 .reel-tabs button {
   display: inline-flex;
   align-items: center;
@@ -5664,7 +5210,6 @@ dialog.veil:focus {
   text-overflow: ellipsis;
 }
 
-/* the one slot under tabs: the view less a gutter at every edge, every pane pinned to it */
 .reel-stage {
   flex: 1 1 0;
   height: calc(100cqh - 2 * var(--reel-gutter));
@@ -5672,20 +5217,15 @@ dialog.veil:focus {
   margin-inline: var(--reel-gutter);
 }
 
-/* a pane behind the selected tab keeps its place and its size, so what sizes itself by its
-   box (a terminal) is not resized as the tabs change; it is only not drawn */
 .reel-pane.behind {
   visibility: hidden;
 }
 
-/* only the grips lift: a pane's text selects and its terminal takes the pointer */
 [data-reel-grip] {
   cursor: grab;
   touch-action: none;
 }
 
-/* the held copy, following the pointer from the window's corner (its transform puts it at the
-   pointer): the title bar alone, tinted head on the card shadow */
 .reel-lift {
   position: fixed;
   top: 0;
@@ -5700,11 +5240,6 @@ dialog.veil:focus {
   box-shadow: var(--shadow-card);
 }
 
-/* ---------- images and media: a picture or a player in a 2px ink frame, at rest ---------- */
-
-/* a figure sits at rest wherever it is placed (a panel, prose): no print shadow. The frame
-   keeps --ratio from the first paint, so nothing moves when the picture arrives; a figure
-   given a width prints at it and shrinks to fit, never grows */
 .image,
 .video {
   display: grid;
@@ -5713,7 +5248,6 @@ dialog.veil:focus {
   min-width: 0;
 }
 
-/* the ratio is the picture's, inside the border */
 .image-frame,
 .media-screen {
   position: relative;
@@ -5739,7 +5273,6 @@ dialog.veil:focus {
   object-fit: cover;
 }
 
-/* a video is never cropped */
 .media-screen > video {
   object-fit: contain;
 }
@@ -5750,7 +5283,6 @@ dialog.veil:focus {
   color: var(--paper);
 }
 
-/* under the picture, which paints over it when it arrives: head tint and the picture glyph */
 .image-wait {
   position: absolute;
   inset: 0;
@@ -5760,13 +5292,10 @@ dialog.veil:focus {
   color: var(--on-head);
 }
 
-/* held loading (.waiting, never the loading line's .loading): the placeholder shows whatever
-   the picture does */
 .image.waiting img {
   visibility: hidden;
 }
 
-/* waiting for data: the loading line on a paper slip over the picture */
 .media-wait {
   position: absolute;
   inset: 0;
@@ -5782,8 +5311,6 @@ dialog.veil:focus {
   color: var(--ink);
 }
 
-/* failed: the frame turns red and its notice fills it, unboxed, so the red rule is the
-   frame's own */
 .image.broken > .image-frame,
 .video.broken > .media-box,
 .audio.broken {
@@ -5823,7 +5350,6 @@ dialog.veil:focus {
   margin-left: auto;
 }
 
-/* the player's controls: glyph buttons, the place as cells, the time */
 .media-bar {
   display: flex;
   flex-wrap: wrap;
@@ -5861,7 +5387,6 @@ dialog.veil:focus {
   white-space: nowrap;
 }
 
-/* cells to see, a native range over them (unseen) to use */
 .media-seek {
   position: relative;
   display: flex;
@@ -5889,7 +5414,6 @@ dialog.veil:focus {
   cursor: pointer;
 }
 
-/* a thin thumb, so the place under the pointer is the place it seeks to */
 .media-seek > input::-webkit-slider-thumb {
   appearance: none;
   width: 2px;
@@ -5901,7 +5425,6 @@ dialog.veil:focus {
   border: 0;
 }
 
-/* disabled while broken, held (aria-disabled) while the length is unknown */
 .media-seek > input:is(:disabled, [aria-disabled="true"]) {
   cursor: default;
 }
@@ -5935,14 +5458,14 @@ dialog.veil:focus {
   margin-left: 4px;
 }
 
-/* ---------- toasts: printed slips at the bottom right, the newest lowest ---------- */
-
 /* the page's stack: @foldkit/ui's Toast container, fixed at the bottom right above the page
    and inside the open dialog when Toaster is rendered there. Its placement is inline (16px
    padding from the corner), so the stylesheet raises it clear of a banner, its anchor when one
    is showing, or of a status bar, and sets the gap. A phone spans it across the bottom */
 .toasts .toast-stack {
-  bottom: calc(anchor(--banner top, calc(var(--statusbar-h) + 4px)) - 4px) !important;
+  bottom: calc(
+    anchor(--banner top, calc(var(--statusbar-h) + 4px)) - 4px
+  ) !important;
   gap: 10px !important;
   width: min(392px, 100vw);
 }
@@ -5951,8 +5474,6 @@ dialog.veil:focus {
   anchor-name: --banner;
 }
 
-/* a notice on the button's print. On the ground every slip is closed in ink (an error in
-   red), so a quiet one keeps the ink border and speaks through its tinted glyph box */
 .toast {
   box-shadow: var(--shadow-button);
 }
@@ -5971,7 +5492,6 @@ dialog.veil:focus {
   margin: -2px -4px -2px 0;
 }
 
-/* a slip arrives in three steps, like a card; it leaves at once */
 .toasts .toast {
   animation: toastIn var(--motion-card) steps(3, end);
 }
@@ -5990,8 +5510,6 @@ dialog.veil:focus {
   }
 }
 
-/* ---------- reduced motion ---------- */
-
 @media (prefers-reduced-motion: reduce) {
   .cursor,
   .veil-backdrop,