/* zanbur-ui sheet: the drawing sheet every page of zanbur.tech is made of (sheet.js draws it).
   One landscape A4 page: the border with its zone references, the field divided into plates, and
   along the bottom the notes and the title block. Every size is a share of the sheet's own width
   (cqw), so the page scales as one object, on a screen and on paper. Colours and type come from
   tokens.css only: ink on paper, blue for what can be changed, orange for where the action is. */

.zs-wrap { overflow: auto; -webkit-overflow-scrolling: touch; }
.zs-sheet {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 1188 / 840;
  width: 100%;
  min-width: 860px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  box-shadow: var(--shadow-sheet-app);
}
.zs-sheet * { box-sizing: border-box; }
/* The type scale (2026-10-15, audit S4 / EG2): every size is a share of the sheet's width, so the sheet still
   grows as one object; on a sheet fitted to a 1440 x 900 window (about 1080 px wide) the smallest lettering of a
   value or a label is 11 px and most of it 12 px. Room for it is found in the lettering (tighter spacing, less
   padding), not by leaving anything out. A page may turn the whole scale with --zs-type (1 is this scale). */
.zs-sheet { --zs-type: 1; }
.zs-sheet__in {
  --zs-fs: max(8.5px, calc(1.12cqw * var(--zs-type)));   /* values, labels, buttons: the body of the sheet */
  --zs-fs-s: max(8px, calc(1.02cqw * var(--zs-type)));   /* the small lettering: table heads, units, captions, notes, title-block keys */
  --zs-fs-l: max(10px, calc(1.38cqw * var(--zs-type)));   /* large lettering: key results, the title block's sheet line */
  --zs-fs-t: max(14px, calc(2.05cqw * var(--zs-type)));   /* the sheet's name in its title block (2026-10-17: was the large size, 1.38cqw) */
  position: absolute; inset: 0; font-size: var(--zs-fs); line-height: 1.3;
}
.zs-sheet__zone { position: absolute; display: flex; justify-content: space-around; align-items: center; font-size: max(7px, 0.8cqw); color: var(--ink-light); }
.zs-sheet__zone.x { left: 2.4cqw; right: 2.4cqw; height: 2.4cqw; }
.zs-sheet__zone.y { top: 2.4cqw; bottom: 2.4cqw; width: 2.4cqw; flex-direction: column; }
.zs-sheet__zone.t { top: 0; } .zs-sheet__zone.b { bottom: 0; } .zs-sheet__zone.l { left: 0; } .zs-sheet__zone.r { right: 0; }
.zs-sheet__frame { position: absolute; inset: 2.4cqw; border: var(--pen-border) solid var(--ink); display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.zs-sheet__field { position: relative; min-height: 0; }
.zs-sheet__foot { display: grid; grid-template-columns: minmax(0, 1fr) 46cqw; border-top: var(--pen-object) solid var(--ink); min-height: 11cqw; }

/* ---- plates: rectangles of the field, on a grid of 12 by 8 ---- */
.zs-plate { position: absolute; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 0.7cqw 0.8cqw 0.5cqw; }
.zs-plate + .zs-plate { outline: var(--pen-faint) solid var(--rule); }
.zs-plate__body { flex: 1; min-height: 0; position: relative; overflow: auto; }
.zs-plate__cap { flex: none; padding-top: 0.3cqw; font-size: var(--zs-fs-s); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-plate__cap b { font-weight: 700; border-bottom: var(--pen-thin) solid var(--ink); }
.zs-plate__cap span { color: var(--ink-light); margin-left: 0.7cqw; }

/* ---- tables on the sheet: parameters, parts lists, results ---- */
.zs-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.zs-table caption { text-align: left; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0 0 0.35cqw; }
.zs-table caption small { color: var(--ink-light); font-weight: 400; margin-left: 0.7cqw; font-size: var(--zs-fs-s); }
.zs-table th, .zs-table td { border: var(--pen-thin) solid var(--ink); padding: 0.2cqw 0.5cqw; text-align: left; vertical-align: middle; white-space: nowrap; height: 2.1cqw; }
.zs-table th { font-weight: 400; font-size: var(--zs-fs-s); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-light); }
.zs-table td.num { text-align: right; }
.zs-table td.unit { color: var(--ink-light); width: 1%; }
.zs-table td.item { width: 1%; text-align: center; color: var(--ink-light); }
.zs-table tr.is-on td { background: var(--fill-section); }
.zs-table .act, .zs-palette .act { border: 0; background: none; padding: 0 0.3cqw; font: inherit; color: var(--dim); cursor: pointer; letter-spacing: 0.04em; text-transform: uppercase; }
.zs-table .act:hover, .zs-palette .act:hover { color: var(--hot); }

/* what the app does, as buttons lettered on the sheet */
.zs-btns { display: flex; flex-wrap: wrap; gap: 0.6cqw; }
.zs-btn { font: inherit; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); background: var(--paper); border: var(--pen-object) solid var(--dim); border-radius: 0; padding: 0.4cqw 1cqw; min-height: 2.4cqw; cursor: pointer; }
.zs-btn:hover { color: var(--hot); border-color: var(--hot); }
.zs-btn.is-primary { color: var(--on-hot); background: var(--hot); border-color: var(--hot); font-weight: 700; }
/* disabled: still readable (3:1 at least), told apart by its faint dashed edge and no blue */
.zs-btn[disabled] { color: var(--ink-light); border-color: var(--ink-faint); border-style: dashed; background: var(--paper); cursor: default; }

/* a value that can be changed is lettered in the draughtsman's blue; it becomes a box when touched */
.zs-edit { color: var(--dim); cursor: text; border-bottom: var(--pen-faint) dashed var(--dim); }
.zs-edit:hover, .zs-edit:focus-visible { color: var(--hot); border-bottom-color: var(--hot); }
.zs-edit.is-toggle, .zs-edit.is-choice { cursor: pointer; }
/* a choice reads as one (UI audit 2026-10-18, finding 4): a button-like cell, ruled in blue, with a ▾ after the value (a flex
   item put last, so the value's own text stays the value). A plate that is the sheet's one choice of what it shows (prominent)
   letters it large. */
.zs-edit.is-choice { display: inline-flex; align-items: center; justify-content: space-between; gap: 0.45em; max-width: 100%; padding: 0 0.35em; border: var(--pen-object) solid var(--dim); background: var(--paper); line-height: 1.25; vertical-align: middle; }
.zs-edit.is-choice::before { content: '\25BE'; order: 2; flex: none; font-weight: 700; color: var(--dim); }
.zs-edit.is-choice:hover, .zs-edit.is-choice:focus-visible { border-color: var(--hot); }
.zs-edit.is-choice:hover::before, .zs-edit.is-choice:focus-visible::before { color: var(--hot); }
.zs-table td.num > .zs-edit.is-choice { text-align: left; }
.zs-plate.is-prominent .zs-table, .zs-plate.is-prominent .zs-table td { border: 0; }
.zs-plate.is-prominent .zs-table tr[data-var] > td[role=rowheader] { width: 1%; padding-left: 0; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--zs-fs-l); white-space: nowrap; }
.zs-plate.is-prominent .zs-table td.unit { display: none; }
.zs-plate.is-prominent .zs-edit.is-choice { display: flex; width: 100%; min-height: max(2.7cqw, 28px); padding: 0.2cqw 0.8cqw; font-size: var(--zs-fs-l); font-weight: 700; border-width: var(--pen-border); }
.zs-wrap.is-portrait .zs-plate.is-prominent .zs-edit.is-choice { min-height: 44px; font-size: 17px; }
html.zs-printing .zs-edit.is-choice, .zs-pages.is-paper .zs-edit.is-choice { border-color: transparent; } html.zs-printing .zs-edit.is-choice::before, .zs-pages.is-paper .zs-edit.is-choice::before { content: none; }
.zs-sheet input.zs-editbox, .zs-sheet select.zs-editbox {
  font: inherit; color: var(--ink); background: var(--paper); border: var(--pen-object) solid var(--hot); border-radius: 0;
  padding: 0 0.3cqw; margin: -0.1cqw 0; width: 100%; min-width: 6cqw; height: 1.7cqw; min-height: 16px; outline: none;
}
.zs-bad { color: var(--alarm-ink); }

/* ---- notes and the title block ---- */
.zs-sheet__notes { padding: 0.7cqw 1cqw; min-width: 0; overflow: hidden; }
.zs-sheet__notes h2 { margin: 0 0 0.25cqw; font: inherit; font-size: var(--zs-fs-s); font-weight: 700; letter-spacing: 0.08em; }
.zs-sheet__notes ol { margin: 0; padding-left: 2.2cqw; }
.zs-sheet__notes li { text-transform: uppercase; font-size: var(--zs-fs-s); letter-spacing: 0.02em; line-height: 1.25; }
.zs-tblock { border-left: var(--pen-object) solid var(--ink); border-collapse: collapse; width: 100%; height: 100%; table-layout: fixed; }
.zs-tblock td { border: var(--pen-thin) solid var(--ink); padding: 0.15cqw 0.55cqw; vertical-align: top; line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.zs-tblock tr:first-child td { border-top: 0; } .zs-tblock td:last-child { border-right: 0; } .zs-tblock tr:last-child td { border-bottom: 0; }
.zs-tblock small { display: block; color: var(--ink-light); font-size: var(--zs-fs-s); letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.15; }
.zs-tblock .name { font-weight: 700; font-size: var(--zs-fs-l); letter-spacing: 0.05em; line-height: 1.1; }
.zs-tblock .name small { font-weight: 400; font-size: var(--zs-fs-s); letter-spacing: 0.02em; }
/* The sheet's name, what the sheet is for (owner, 2026-10-17: "too small, we need to bold it"): bold and large, about twice
   the body; a long name is set smaller to fit its cell (--zs-n is its length; a mono letter is 0.6 em, plus the spacing),
   never wrapped or cut. Light and dark, screen and paper: the ink of the sheet. */
.zs-tblock .name .zs-tblock__title { display: block; font-weight: 700; font-size: max(var(--zs-fs), min(var(--zs-fs-t), calc(21cqw / (var(--zs-n, 8) * 0.66)))); letter-spacing: 0.06em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: clip; color: var(--ink); padding: 0; }
.zs-tblock td.name { padding-top: 0.05cqw; padding-bottom: 0.05cqw; } .zs-tblock .name small { line-height: 1.05; }   /* (the name larger, the block no taller: the sheet's field keeps its room) */
.zs-tblock .name .zs-tblock__title.is-wrap { white-space: normal; overflow-wrap: anywhere; }
.zs-tblock .nav { border: 0; background: none; font: inherit; color: var(--dim); cursor: pointer; padding: 0 0.4cqw; }
.zs-tblock .nav:hover { color: var(--hot); } .zs-tblock .nav[disabled] { color: var(--ink-light); opacity: 0.75; cursor: default; }

/* ---- the model, as boxes joined by lines ---- */
.zs-graph { position: absolute; inset: 0; }
.zs-graph svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.zs-graph path { fill: none; stroke: var(--ink); stroke-width: var(--pen-object); cursor: pointer; }
.zs-graph path:hover { stroke: var(--alarm); }
.zs-graph path.is-pending { stroke: var(--hot); stroke-dasharray: 4 3; pointer-events: none; }
.zs-graph { font-size: var(--zs-fs); line-height: 1.2; }
.zs-node { position: absolute; background: var(--paper); border: var(--pen-object) solid var(--ink); min-width: 13cqw; }
.zs-node__t { padding: 0.2cqw 0.5cqw; border-bottom: var(--pen-thin) solid var(--ink); font-size: var(--zs-fs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: grab; touch-action: none; user-select: none; }
.zs-node__t small { display: block; font-size: var(--zs-fs-s); font-weight: 400; color: var(--ink-light); letter-spacing: 0; text-transform: none; }
.zs-node__r { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.7cqw; padding: 0.12cqw 0.5cqw; position: relative; white-space: nowrap; }
.zs-node__r span:first-child { color: var(--ink-light); }
.zs-node__r.is-out { text-align: right; grid-template-columns: auto minmax(0, 1fr); }
.zs-port { position: absolute; top: 50%; width: 0.9cqw; height: 0.9cqw; min-width: 9px; min-height: 9px; margin-top: -0.45cqw; background: var(--paper); border: var(--pen-object) solid var(--ink); cursor: crosshair; padding: 0; }
.zs-port.in { left: -0.5cqw; } .zs-port.out { right: -0.5cqw; }
.zs-port:hover, .zs-port.is-armed { background: var(--hot); border-color: var(--hot); }
.zs-port.is-fed { background: var(--ink); }
/* a box that could not be worked out says why; the kinds of box there are, along the top of the plate */
.zs-node.is-bad { border-color: var(--alarm); }
.zs-node__bad { padding: 0.2cqw 0.6cqw; border-top: var(--pen-thin) solid var(--alarm); color: var(--alarm-ink); white-space: normal; max-width: 22cqw; }
/* a box's own buttons (graph boxes' buttons), one line said on it (note), and the app's own joins (a plate with joins: false): read, not removed */
.zs-node__btns { padding: 0.2cqw 0.5cqw; gap: 0.3cqw; flex-wrap: wrap; }
.zs-node__btns .zs-btn { padding: 0.1cqw 0.6cqw; font-size: var(--zs-fs-s); }
/* a box's lead switch (node.lead): its label, then its choices side by side, larger than the box's other buttons */
.zs-node__lead { display: grid; grid-template-columns: auto 1fr 1fr; align-items: stretch; padding: 0.35cqw 0.5cqw; border-bottom: 1px solid var(--ink-light); }
.zs-node__leadk { align-self: center; font-size: var(--zs-fs-s); letter-spacing: .06em; text-transform: uppercase; padding-right: 0.4cqw; }
.zs-node__lead .zs-btn { font-size: var(--zs-fs-l); font-weight: 700; padding: 0.3cqw 0.5cqw; }
.zs-node__note { padding: 0.15cqw 0.5cqw 0.25cqw; border-top: var(--pen-faint) solid var(--ink-light); color: var(--ink-light); font-size: var(--zs-fs-s); white-space: normal; max-width: 24cqw; }
.zs-graph path.is-fixed { cursor: default; }
.zs-graph path.is-fixed:hover { stroke: var(--ink); }
.zs-node__x { position: absolute; top: 0; right: 0; border: 0; background: none; font: inherit; color: var(--ink-light); cursor: pointer; padding: 0.2cqw 0.5cqw; line-height: 1; }
.zs-node__x:hover { color: var(--alarm); }
.zs-palette { position: absolute; left: 0; top: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3cqw 0.8cqw; font-size: var(--zs-fs-s); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-light); }

/* a view the app draws itself (a model, a chart) fills its plate */
.zs-view { position: absolute; inset: 0; }
.zs-view > img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---- what the smaller things look like: headings, status, the slider, the hint ---- */
.zs-table tr.zs-head th { border-left: 0; border-right: 0; border-top: 0; padding-top: 0.6cqw; color: var(--ink); font-weight: 700; font-size: inherit; letter-spacing: 0.06em; }
.zs-table tr.zs-head:first-child th { padding-top: 0; }
.zs-table td.zs-status { width: 1%; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.zs-table td.zs-status.is-ok { color: var(--good-ink); } .zs-table td.zs-status.is-watch { color: var(--warn-ink); } .zs-table td.zs-status.is-bad { color: var(--alarm-ink); }
.zs-table td.has-slide { position: relative; }
.zs-table td.has-slide .zs-edit { cursor: ew-resize; touch-action: pan-y; }
.zs-slide { position: absolute; left: 0.6cqw; right: 0.6cqw; bottom: 0.14cqw; height: 0.22cqw; min-height: 2px; background: var(--rule); cursor: ew-resize; touch-action: none; }
.zs-slide i { display: block; height: 100%; background: var(--dim); }
.zs-slide::before { content: ''; position: absolute; left: 0; right: 0; top: -0.5cqw; bottom: -0.14cqw; }
.zs-slide:hover i, .zs-slide:focus-visible i { background: var(--hot); }
.zs-hint { margin-top: 0.3cqw; color: var(--dim); font-size: var(--zs-fs-s); }
.zs-hint:empty { display: none; }

/* ---- looking closer (the zoom option of create): the sheet in a window it can be moved and enlarged in ----
   Fitted, it stands exactly where a sheet without zoom stands. The strip under it belongs to the
   page, not to the sheet, so it is sized in pixels and does not grow with the drawing. */
.zs-wrap.is-zoom { overflow: visible; }
.zs-wrap.is-zoom.is-fill { height: 100%; display: flex; flex-direction: column; }
.zs-lens { position: relative; overflow: hidden; width: 100%; aspect-ratio: 1188 / 840; touch-action: pan-y; }
.zs-wrap.is-fill .zs-lens { aspect-ratio: auto; flex: 1; min-height: 0; }
.zs-wrap.is-zoom:not(.is-fitted) .zs-lens { touch-action: none; }
.zs-wrap.is-panning .zs-lens { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.zs-pane { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.zs-wrap.is-zoom .zs-sheet { min-width: 0; }
.zs-zoomer { display: flex; align-items: center; justify-content: flex-end; gap: 4px; padding-top: 6px; font: 11px/1 var(--mono); letter-spacing: 0.08em; color: var(--ink-light); }
.zs-zoomer__tip { margin-right: auto; text-transform: uppercase; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.zs-zoomer__at { min-width: 44px; text-align: center; }
.zs-zoomer button { font: inherit; min-width: 28px; height: 28px; padding: 0 8px; color: var(--dim); background: var(--paper); border: var(--pen-object) solid var(--dim); border-radius: 0; cursor: pointer; }
.zs-zoomer button:hover { color: var(--hot); border-color: var(--hot); }
.zs-zoomer button[disabled] { color: var(--ink-faint); border-color: var(--ink-faint); cursor: default; }
.zs-wrap.is-touch .zs-zoomer button { min-width: 40px; height: 40px; }
/* on a touch screen a value, a button or a square answers over the whole height of a row, which
   looking at a plate makes a fingertip high (40 px) */
.zs-wrap.is-touch .zs-edit, .zs-wrap.is-touch .zs-table .act, .zs-wrap.is-touch .zs-tblock .nav, .zs-wrap.is-touch .zs-palette .act { position: relative; }
.zs-wrap.is-touch .zs-edit::after, .zs-wrap.is-touch .zs-table .act::after, .zs-wrap.is-touch .zs-tblock .nav::after, .zs-wrap.is-touch .zs-palette .act::after, .zs-wrap.is-touch .zs-port::after, .zs-wrap.is-touch .zs-node__x::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 2.1cqw); height: 2.1cqw; transform: translate(-50%, -50%);
}
.zs-wrap.is-touch input.zs-editbox, .zs-wrap.is-touch select.zs-editbox { height: 2.1cqw; margin: -0.3cqw 0; }

/* a mount with a height of its own is a workspace: the sheet is fitted both ways and stands on the desk */
.zs-wrap.is-desk .zs-lens { background: var(--desk); }
.zs-wrap.is-zoom:not(.is-fitted) .zs-lens { cursor: grab; }
.zs-wrap.is-zoom .zs-plate[data-zoom=off], .zs-wrap.is-zoom .zs-edit, .zs-wrap.is-zoom .zs-table .act { cursor: auto; }
.zs-wrap.is-zoom .zs-edit { cursor: text; } .zs-wrap.is-zoom .zs-table .act { cursor: pointer; }

/* ---- the sheet tabs (the tabs option of create): a strip along the bottom of the mount ----
   The layout tabs of a CAD program: square, lettered in the sheet's mono, the sheet on show joined
   to the paper above it. It belongs to the page, not to the sheet: sized in pixels, never printed.
   With groups (the steps of the job) it is TWO ROWS: the upper names the groups, the lower has the tabs
   of the group chosen, lined up under it; Home and the pinned sheets (the Library) stand first, the
   height of both, and the list of every sheet and the zoom controls stand at the two ends. */
.zs-tabs { position: relative; display: flex; align-items: stretch; flex: none; height: 32px; font: 12px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink-light); color: var(--zs-strip-ink); background: var(--fill-section); border-top: var(--pen-object) solid var(--ink); user-select: none; -webkit-user-select: none;
  --zs-strip-ink: color-mix(in srgb, var(--ink-light) 72%, var(--ink)); }   /* the grey lettering of the strip, a little nearer the ink: 4.5:1 on its grey even where an app keeps an older grey */
.zs-tabs.is-rows { height: 60px; }
.zs-tabs, .zs-tabs * { box-sizing: border-box; }
.zs-tabs > button, .zs-tabs__strip button, .zs-tabs__list button, .zs-tabs__pins button, .zs-tabs__groups button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; border-radius: 0; margin: 0; padding: 0; cursor: pointer; }
.zs-tabs button:focus-visible, .zs-tabs a:focus-visible { outline: 2px solid var(--hot); outline-offset: -3px; }
.zs-tabs__all { display: flex; align-items: center; gap: 7px; flex: none; padding: 0 10px !important; border-right: var(--pen-object) solid var(--ink) !important; color: var(--ink) !important; }
.zs-tabs__all:hover, .zs-tabs__go:hover:not([disabled]), .zs-tab:hover, .zs-tabs__group:hover { color: var(--hot) !important; }
.zs-tabs__all b { font-weight: 400; }
.zs-tabs__bars { display: block; width: 12px; height: 9px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; position: relative; }
.zs-tabs__bars::after { content: ''; position: absolute; left: 0; right: 0; top: 2.25px; border-top: 1.5px solid currentColor; }
.zs-tabs__go { display: none; flex: none; width: 24px; color: var(--dim) !important; }
.zs-tabs.is-over .zs-tabs__go.is-prev, .zs-tabs.is-over .zs-tabs__go.is-next { display: block; }
.zs-tabs__go.is-next { border-left: var(--pen-thin) solid var(--ink-faint) !important; } .zs-tabs__go.is-prev { border-right: var(--pen-thin) solid var(--ink-faint) !important; }
.zs-tabs__go[disabled] { color: var(--ink-light) !important; opacity: 0.6; cursor: default; }
.zs-tabs__rows { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.zs-tabs__line { flex: 1; min-height: 0; display: flex; align-items: stretch; }
.zs-tabs__strip { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.zs-tabs__strip::-webkit-scrollbar { display: none; }
.zs-tab { display: flex; align-items: center; gap: 6px; flex: none; max-width: 260px; padding: 0 10px !important; border-right: var(--pen-thin) solid var(--ink-faint) !important; text-transform: uppercase; white-space: nowrap; }
.zs-tab[hidden] { display: none; }
.zs-tab i, .zs-tabs__list i { font-style: normal; color: var(--zs-strip-ink, var(--ink-light)); min-width: 1.2em; text-align: right; }
.zs-tab span { overflow: hidden; text-overflow: ellipsis; }
.zs-tab.is-on { margin-top: calc(-1 * var(--pen-object)); background: var(--paper); color: var(--ink) !important; font-weight: 700; border-left: var(--pen-object) solid var(--ink) !important; border-right: var(--pen-object) solid var(--ink) !important; box-shadow: inset 0 -3px 0 var(--hot); }
.zs-tab.is-on i { color: var(--ink); }
/* sheets a person adds (sheet.addable, 2026-10-17): "+" after the last sheet of its kind, and a remove mark after each added copy */
.zs-tab.is-add { justify-content: center; min-width: 32px; padding: 0 9px !important; font-size: 15px; font-weight: 700; color: var(--dim) !important; }
.zs-tab.is-add[disabled] { color: var(--ink-light) !important; opacity: 0.6; cursor: default; }
.zs-tab.has-x { padding-right: 4px !important; border-right: 0 !important; }
.zs-tab__x { flex: none; width: 22px; font-size: 14px !important; color: var(--zs-strip-ink, var(--ink-light)) !important; border-right: var(--pen-thin) solid var(--ink-faint) !important; }
.zs-tab__x:hover { color: var(--alarm) !important; } .zs-tab__x[hidden] { display: none; }
.zs-tab.is-on + .zs-tab__x { background: var(--paper); border-right: var(--pen-object) solid var(--ink) !important; box-shadow: inset 0 -3px 0 var(--hot); margin-top: calc(-1 * var(--pen-object)); }
.zs-tabs__list button.is-add { color: var(--dim); } .zs-tabs__list button.is-add[disabled] { color: var(--ink-light); cursor: default; }
/* one row (a set without groups): a heading where a chapter begins */
.zs-tabs__strip .zs-tabs__group { display: flex; align-items: center; flex: none; padding: 0 9px 0 10px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); border-left: var(--pen-object) solid var(--ink); background: var(--paper); white-space: nowrap; }
.zs-tabs__strip .zs-tabs__group:first-child { border-left: 0; }
.zs-tabs__strip .zs-tabs__group.is-none { padding: 0; } .zs-tabs__strip .zs-tabs__group.is-none:first-child { display: none; }
/* two rows: the upper row, the groups (steps) of the job */
.zs-tabs__top { display: none; flex: none; height: 28px; align-items: stretch; border-bottom: var(--pen-thin) solid var(--ink); background: var(--paper); }
.zs-tabs.is-rows .zs-tabs__top { display: flex; }
.zs-tabs__groups { flex: 1; min-width: 0; display: flex; align-items: stretch; overflow: hidden; }
.zs-tabs__tools { flex: none; display: flex; align-items: stretch; }
.zs-tabs__tools:empty { display: none; }
.zs-tabs__tools .zs-zoomer { padding-top: 0; }
.zs-tabs__groups .zs-tabs__group { position: relative; display: flex; align-items: center; gap: 5px; flex: none; padding: 0 11px !important; text-transform: uppercase; white-space: nowrap; color: var(--ink) !important; border-right: var(--pen-thin) solid var(--ink-faint) !important; }
.zs-tabs__group i { font-style: normal; font-weight: 400; color: var(--zs-strip-ink, var(--ink-light)); }
.zs-tabs__group b { font-weight: 600; }
.zs-tabs__groups .zs-tabs__group.is-on { background: var(--ink); color: var(--paper) !important; }
.zs-tabs__groups .zs-tabs__group.is-on i { color: inherit; opacity: 0.8; }
.zs-tabs__groups .zs-tabs__group.is-on:hover { color: var(--paper) !important; background: var(--hot); }
.zs-tabs__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-left: 2px; }
.zs-tabs__dot.is-bad { color: var(--alarm-ink); } .zs-tabs__dot.is-watch { color: var(--warn-ink); }
.zs-tabs__go.is-gprev, .zs-tabs__go.is-gnext { width: 26px; border: 0 !important; }
.zs-tabs.is-compact .zs-tabs__go.is-gprev, .zs-tabs.is-compact .zs-tabs__go.is-gnext { display: block; }
.zs-tabs.is-compact .zs-tabs__groups .zs-tabs__group:not(.is-on) { display: none; }
.zs-tabs.is-compact .zs-tabs__groups .zs-tabs__group.is-on { flex: 1; min-width: 0; justify-content: center; overflow: hidden; }
.zs-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the pinned sheets (the Library) stand with Home, the height of both rows: their step above their name */
.zs-tabs__pins { display: flex; align-items: stretch; }
.zs-tabs__pins[hidden] { display: none; }
.zs-tab.is-pin { border-left: var(--pen-thin) solid var(--ink-faint) !important; }
.zs-tabs.is-rows .zs-tab.is-pin { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }
.zs-tabs.is-rows .zs-tab.is-pin > i { display: none; }
.zs-tab.is-pin .zs-tabs__group { display: flex; gap: 4px; font-size: 10.5px; letter-spacing: 0.06em; color: var(--zs-strip-ink, var(--ink-light)); }
.zs-tab.is-pin.is-on .zs-tabs__group { color: var(--ink); }
.zs-tab__mark { font-style: normal; font-weight: 700; font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 4px; border: var(--pen-object) solid currentColor; color: var(--zs-strip-ink, var(--ink-light)); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-tab__mark.is-ok { color: var(--good-ink); } .zs-tab__mark.is-watch { color: var(--warn-ink); } .zs-tab__mark.is-bad { color: var(--alarm-ink); }
.zs-tabs__list { position: absolute; left: 0; bottom: 100%; z-index: 20; min-width: 250px; max-width: min(440px, 100%); max-height: min(62vh, 560px); overflow: auto; background: var(--paper); color: var(--ink); border: var(--pen-object) solid var(--ink); box-shadow: var(--shadow-pop); }
.zs-tabs__list[hidden] { display: none; }
.zs-tabs__list button { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; min-height: 30px; padding: 5px 10px !important; text-align: left; text-transform: uppercase; border-bottom: var(--pen-faint) solid var(--rule) !important; }
.zs-tabs__list button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-tabs__list button:hover { color: var(--hot); } .zs-tabs__list button.is-on { background: var(--fill-section); font-weight: 700; box-shadow: inset 3px 0 0 var(--hot); }
.zs-tabs__head { padding: 8px 10px 4px; font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zs-strip-ink, var(--ink-light)); border-bottom: var(--pen-thin) solid var(--ink); }
/* the zoom controls are the right end of the strip */
.zs-tabs .zs-zoomer { flex: none; align-items: center; padding: 0 6px 0 8px; border-left: var(--pen-object) solid var(--ink); }
.zs-tabs .zs-zoomer__tip { display: none; }
.zs-tabs .zs-zoomer button { height: 24px; min-width: 26px; padding: 0 6px; }
:is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tabs { height: 44px; font-size: 12px; }
.zs-wrap.is-touch .zs-tabs.is-rows { height: 80px; } .zs-wrap.is-touch .zs-tabs__top { height: 36px; }
.zs-wrap.is-touch .zs-tabs .zs-zoomer button { height: 36px; min-width: 40px; }
.zs-wrap.is-touch .zs-tabs__list button { min-height: 42px; }
@media (pointer: coarse) { .zs-tabs { height: 44px; font-size: 12px; } .zs-tabs.is-rows { height: 80px; } .zs-tabs__top { height: 36px; } .zs-tabs__list button { min-height: 42px; } }
/* a fingertip for every button of the strip on a touch screen (UI audit 2026-10-18, finding 7: the steps' row was 35 px; 2026-10-25:
   44 px, the phone's rule, was 40): the steps' row 45 px with its rule, the tabs' row 44 px, every arrow, Home, "+" and a remove
   mark 44 px wide, the zoom 44 px */
:is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tabs.is-rows { height: 90px; } :is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tabs__top { height: 45px; }
:is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tabs__go, :is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tabs__go.is-gprev, :is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tabs__go.is-gnext { width: 44px; }
:is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tabs .zs-zoomer button { height: 44px; min-width: 44px; }
:is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tab__x, :is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tab.is-add { width: 44px; min-width: 44px; }
:is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tab.is-link { min-width: 44px; justify-content: center; }
:is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tabs__list button, :is(.zs-wrap.is-touch, .zs-wrap.is-portrait) .zs-tabs__list a { min-height: 44px; }
@media (pointer: coarse) { .zs-tabs.is-rows { height: 90px; } .zs-tabs__top { height: 45px; } .zs-tabs__go, .zs-tabs__go.is-gprev, .zs-tabs__go.is-gnext { width: 44px; } .zs-tabs__list button { min-height: 44px; } }
/* a graph's squares and a box's "Edit the curve" answer a fingertip on a touch screen and a phone: an invisible 44 px hit area round
   the 10 px square, and the button 44 px tall */
.zs-wrap.is-touch .zs-port::after, .zs-wrap.is-portrait .zs-port::after { content: ''; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.zs-wrap.is-touch .zs-node__edit, .zs-wrap.is-portrait .zs-node__edit { display: flex; align-items: center; min-height: 44px; }
/* a view with nothing of the app's to show (paper, a view without mount): its sentence */
.zs-view__text { position: absolute; inset: 0; display: grid; place-items: center; padding: 1cqw; text-align: center; white-space: pre-line; color: var(--ink-light); }

/* ---- more a table can show: a tone, a small bar, a picture, a link, wrapped text, a chosen row ---- */
.zs-table td.is-wrap { white-space: normal; overflow-wrap: anywhere; }
.zs-table td.is-ok { color: var(--good-ink); } .zs-table td.is-watch { color: var(--warn-ink); } .zs-table td.is-bad { color: var(--alarm-ink); }
.zs-table td.has-meter { position: relative; }
.zs-meter { position: absolute; left: 0.6cqw; right: 0.6cqw; bottom: 0.14cqw; height: 0.22cqw; min-height: 2px; background: var(--rule); }
.zs-meter b { display: block; height: 100%; background: currentColor; }
.zs-table td.is-pic { padding-top: 0.15cqw; padding-bottom: 0.15cqw; }
.zs-pic { display: block; height: 3.4cqw; max-width: 9cqw; object-fit: contain; }
.zs-link { color: var(--dim); text-decoration: none; border-bottom: var(--pen-faint) solid var(--dim); }
.zs-link:hover, .zs-link:focus-visible { color: var(--hot); border-bottom-color: var(--hot); outline: none; }
.zs-table tr.is-pick { cursor: pointer; }
.zs-table tr.is-pick:hover td { background: var(--fill-section); }
.zs-table tr.is-pick.is-on td.item { box-shadow: inset 0.3cqw 0 0 var(--hot); }
.zs-table tr.is-pick.is-on td.item .act { color: var(--ink); font-weight: 700; }
.zs-table tr.zs-more td { color: var(--ink-light); font-size: var(--zs-fs-s); letter-spacing: 0.04em; text-transform: uppercase; }
/* a button that is switched on, and something that takes time */
.zs-btn.is-on { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.zs-btn.is-on:hover { color: var(--paper); background: var(--hot); border-color: var(--hot); }
.zs-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5cqw 1cqw; align-items: center; }
.zs-progress__bar { height: 1cqw; min-height: 6px; border: var(--pen-object) solid var(--ink); overflow: hidden; }
.zs-progress__bar i { display: block; height: 100%; width: 0; background: var(--hot); }
.zs-progress.is-wait .zs-progress__bar i { width: 30%; animation: zs-wait 1.4s linear infinite; }
.zs-progress__at:empty { display: none; }
.zs-progress__text { grid-column: 1 / -1; white-space: pre-line; }
@keyframes zs-wait { from { margin-left: -30%; } to { margin-left: 100%; } }
/* the time bar (ZuSheet.timebar, plate kind 'time'): Play / Pause, the speed, the slider, where it stands in words.
   On a sheet it is lettered as the sheet is; on its own (over a drawing) the same; a fingertip high where the pointer is one. */
.zs-time { display: flex; flex-wrap: wrap; align-items: center; gap: max(4px, 0.5cqw) max(6px, 0.8cqw); font-size: max(9px, 1.12cqw); }
.zs-time__play, .zs-time__speed { flex: none; font: inherit; color: var(--ink); background: var(--paper); border: var(--pen-object) solid var(--ink); border-radius: 0; min-height: max(24px, 2.4cqw); cursor: pointer; }
.zs-time__play { min-width: max(28px, 3cqw); padding: 0 max(4px, 0.6cqw); }
.zs-time__play:hover, .zs-time__play:focus-visible, .zs-time.is-playing .zs-time__play { color: var(--on-hot); background: var(--hot); border-color: var(--hot); outline: none; }
.zs-time__speed { padding: 0 max(2px, 0.3cqw); width: auto; max-width: 9em; }
.zs-time__play[disabled] { color: var(--ink-faint); border-color: var(--ink-faint); background: var(--paper); cursor: default; }
.zs-time__range { flex: 1 1 12em; width: auto; min-width: 8em; margin: 0; padding: 0; border: 0; background: none; accent-color: var(--hot); min-height: max(24px, 2.4cqw); cursor: ew-resize; touch-action: none; }
.zs-time__at { flex: 1 1 16em; min-width: 0; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-time.is-still .zs-time__bar { display: block; flex: 1 1 100%; height: max(4px, 0.5cqw); border: var(--pen-object) solid var(--ink); }
.zs-time.is-still .zs-time__bar b { display: block; height: 100%; background: var(--ink); }
@media (pointer: coarse) { .zs-time__play, .zs-time__speed, .zs-time__range { min-height: 44px; } .zs-time__play { min-width: 44px; } }
@media (prefers-reduced-motion: reduce) { .zs-progress.is-wait .zs-progress__bar i { animation: none; width: 100%; opacity: 0.35; } }

/* ---- paper: every sheet of the set, one to a page, exactly as on the screen ----
   The pages wait off the screen, laid out at the width of the paper (so the joins of a model are
   ruled where the printer will put the boxes); in print they are the only thing on the page. */
.zs-print, .zs-pages { position: absolute; left: -10000px; top: 0; width: 297mm; }
.zs-print .zs-sheet, .zs-pages .zs-sheet { min-width: 0; box-shadow: none; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  html.zs-printing, html.zs-printing body { background: #fff !important; height: auto !important; min-height: 0 !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  html.zs-printing body > :not(.zs-print) { display: none !important; }
  /* paper is white and ink is ink whatever the screen is set to: the light sheet values of tokens.css */
  html.zs-printing .zs-print {
    position: static; width: auto; print-color-adjust: exact; -webkit-print-color-adjust: exact;
    --paper: #ffffff; --ink: #1a2330; --ink-light: #5d6875; --ink-faint: rgba(26, 35, 48, 0.32); --rule: rgba(26, 35, 48, 0.18);
    --dim: #265eba; --hot: #ff6a1a; --alarm: #e0304a; --good: #12a35a; --good-ink: #0b7a42; --warn: #e0940a; --warn-ink: #8f5a00; --alarm-ink: #c4223b; --fill-section: #f1f4f9;
  }
  html.zs-printing .zs-print .zs-sheet { width: 297mm; min-width: 0; height: 210mm; aspect-ratio: auto; overflow: hidden; box-shadow: none; break-after: page; page-break-after: always; break-inside: avoid; page-break-inside: avoid; }
  html.zs-printing .zs-print .zs-sheet:last-child { break-after: auto; page-break-after: auto; }
  html.zs-printing .zs-edit { color: var(--ink); border-bottom: 0; }
  html.zs-printing .zs-tblock .nav, html.zs-printing .zs-table .act, html.zs-printing .zs-table .zs-acts, html.zs-printing .zs-btns, html.zs-printing .zs-slide, html.zs-printing .zs-palette, html.zs-printing .zs-node__x { display: none; }
}

/* ---- links at the head of the strip (the tabs option { home, links }): the site's front page first ----
   A link is not a sheet: no number, never printed. It reads as a tab, quieter, and the set's own
   tabs start after the rule that follows it. */
.zs-tabs__links { display: flex; align-items: stretch; flex: none; border-right: var(--pen-object) solid var(--ink); }
.zs-tab.is-link { color: var(--zs-strip-ink, var(--ink-light)); text-decoration: none; letter-spacing: 0.08em; }
.zs-tab.is-link:last-child { border-right: 0 !important; }
.zs-tab.is-link:focus-visible, .zs-tabs__list a:focus-visible { outline: var(--pen-border) solid var(--hot); outline-offset: -2px; }
.zs-tab__icon { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.zs-tabs__list a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 9px; align-items: center; min-height: 28px; padding: 5px 10px; color: var(--ink); text-decoration: none; text-transform: uppercase; border-bottom: var(--pen-object) solid var(--ink); }
.zs-tabs__list a:hover { color: var(--hot); }
.zs-tabs__list a .zs-tab__icon { justify-self: end; }

/* ---- a PDF (set.pdf, the action export.pdf): the pages as paper has them, drawn as pictures ----
   White paper and dark ink whatever the screen is set to, and nothing that is only for the screen. */
.zs-pages.is-paper {
  --paper: #ffffff; --ink: #1a2330; --ink-light: #5d6875; --ink-faint: rgba(26, 35, 48, 0.32); --rule: rgba(26, 35, 48, 0.18);
  --dim: #265eba; --hot: #ff6a1a; --alarm: #e0304a; --good: #12a35a; --good-ink: #0b7a42; --warn: #e0940a; --warn-ink: #8f5a00; --alarm-ink: #c4223b; --fill-section: #f1f4f9;
  background: #fff; color: var(--ink);
}
.zs-pages.is-paper .zs-edit { color: var(--ink); border-bottom: 0; }
.zs-pages.is-paper .zs-plate__body { overflow: hidden !important; scrollbar-width: none; }
.zs-pages.is-paper .zs-tblock .nav, .zs-pages.is-paper .zs-table .act, .zs-pages.is-paper .zs-table .zs-acts, .zs-pages.is-paper .zs-btns,
.zs-pages.is-paper .zs-slide, .zs-pages.is-paper .zs-palette, .zs-pages.is-paper .zs-node__x { display: none; }
/* what the page is busy with, for a moment: making the PDF */
.zs-busy { position: fixed; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 60; padding: 9px 14px; font: 12px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: var(--paper); border: var(--pen-object) solid var(--ink); box-shadow: var(--shadow-pop); }

/* ---- the library sheet (library.js): what every app has kept, kind by kind, as parts lists ----
   The same tables, buttons and lettering as every sheet: it is a plate like any other. */
.zl-root { overflow: hidden; }
.zl { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.8cqw; }
.zl-head { flex: none; display: flex; align-items: flex-start; gap: 1.6cqw; padding-bottom: 0.8cqw; border-bottom: var(--pen-object) solid var(--ink); }
.zl-where { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2cqw 1cqw; align-items: baseline; }
.zl-where small { color: var(--ink-light); font-size: var(--zs-fs-s); letter-spacing: 0.04em; text-transform: uppercase; }
.zl-where b { font-size: var(--zs-fs-l); letter-spacing: 0.04em; }
.zl-where span { grid-column: 1 / -1; color: var(--ink-light); white-space: normal; }
.zl-do { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6cqw; max-width: 55%; }
.zl-do .zs-btn.is-primary { font-size: var(--zs-fs); padding: 0.6cqw 1.6cqw; }
.zl-msg { flex: none; color: var(--alarm); }
.zl-body { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1.2cqw; padding-right: 0.4cqw; }
.zl-kind td.is-wrap { min-width: 18cqw; white-space: normal; }
.zl-kind tr.zl-none td { color: var(--ink-light); }
.zl-kind td.zs-acts { white-space: nowrap; text-align: right; }
.zl-kind td.zl-key { white-space: normal; max-width: 20cqw; }
.zl-kind a.act { text-decoration: none; display: inline-block; }
.zs-pages.is-paper .zl-do { display: none; }
/* the working folder (2026-10-17): a section a part (each app's own, then Shared), its own buttons above it; and the
   picker an app's box opens over the page ("Library" on the Part, Program, Machine and Tool boxes) */
.zl-sec { display: flex; flex-direction: column; gap: 0.4cqw; }
.zl-extra { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6cqw; }
.zl-built { display: inline-flex; align-items: center; gap: 0.6cqw; color: var(--ink-light); font-size: var(--zs-fs-s); letter-spacing: 0.04em; text-transform: uppercase; }
.zl-built select { font: inherit; text-transform: none; color: var(--ink); background: var(--paper); border: var(--pen-object) solid var(--dim); border-radius: 0; padding: 0.3cqw 0.6cqw; max-width: 24cqw; }
.zs-pages.is-paper .zl-extra { display: none; }
/* results ticked to compare (2026-10-19: an app's comparison is made in its Library): the tick box, the row ticked, and the
   comparison the app draws above the tables (its own table, a picture to each result, a line of conclusion) */
.zl-kind .zl-tick { width: 1%; padding-right: 0; text-align: center; }
.zl-kind .zl-tick input { width: max(1.4cqw, 18px); height: max(1.4cqw, 18px); margin: 0; accent-color: var(--hot); cursor: pointer; }
.zl-kind tr.is-chosen td { background: color-mix(in srgb, var(--hot) 8%, transparent); }
.zl-chosen { margin-right: auto; color: var(--ink-light); }
.zl-cmp { display: flex; flex-direction: column; gap: 0.8cqw; padding: 0.8cqw; border: var(--pen-border) solid var(--ink); }
.zl-cmp__top { display: flex; align-items: center; justify-content: space-between; gap: 1cqw; letter-spacing: 0.06em; text-transform: uppercase; }
.zl-cmp__head { font-size: var(--zs-fs-l); font-weight: 700; letter-spacing: 0.04em; }
.zl-cmp__head.is-ok { color: var(--good-ink); } .zl-cmp__head.is-watch { color: var(--warn-ink); } .zl-cmp__head.is-bad { color: var(--alarm-ink); }
.zl-cmp__pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16cqw, 160px), 1fr)); gap: 0.8cqw; }
.zl-cmp__pics figure { margin: 0; display: flex; flex-direction: column; gap: 0.3cqw; }
.zl-cmp__pics img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: var(--pen-object) solid var(--ink-light); background: var(--paper); }
.zl-cmp__pics figcaption { white-space: normal; }
.zl-cmp__nopic { aspect-ratio: 3 / 2; border: var(--pen-object) dashed var(--ink-light); }
.zl-cmp__note { color: var(--ink-light); white-space: normal; }
/* a comparison laid side by side (Chip Load: a column to each result): the values that differ marked, the best and the worst of a number, and a word when the question is not the same */
.zl-cmp__side { width: 100%; table-layout: fixed; }
.zl-cmp__side th, .zl-cmp__side td { white-space: normal; overflow-wrap: anywhere; height: auto; }
.zl-cmp__side th[scope=row] { text-align: left; width: 16%; }
.zl-cmp__side td.is-diff { background: color-mix(in srgb, var(--hot) 12%, transparent); font-weight: 700; }
.zl-cmp__side td.is-best { color: var(--good-ink); font-weight: 700; } .zl-cmp__side td.is-worst { color: var(--alarm-ink); }
.zl-cmp__warn { margin: 0; padding: 0.4cqw 0.6cqw; border: var(--pen-object) solid var(--warn-ink); color: var(--warn-ink); white-space: normal; }
.zl-cmp__names { margin: 0; padding-left: 1.6em; white-space: normal; }
.zl-cmp__pics .is-ok { color: var(--good-ink); } .zl-cmp__pics .is-watch { color: var(--warn-ink); } .zl-cmp__pics .is-bad { color: var(--alarm-ink); }
.zs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zl-pick { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.32); font: 13px/1.35 var(--mono); color: var(--ink); }
.zl-pick__box { width: min(720px, 100%); max-height: min(640px, 100%); display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--paper); border: var(--pen-object) solid var(--ink); box-shadow: var(--shadow-pop); container-type: inline-size; }
.zl-pick__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.zl-pick .zs-btn { min-height: 32px; padding: 4px 12px; font-size: 12px; }
.zl-pick .zl-head { gap: 12px; padding-bottom: 8px; }
.zl-pick .zl-where b { font-size: 14px; } .zl-pick .zl-where small { font-size: 11px; }
.zl-pick__list { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.zl-pick__list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.zl-pick__item { width: 100%; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 10px; align-items: baseline; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink-faint); padding: 9px 4px; min-height: 40px; cursor: pointer; }
.zl-pick__item:hover, .zl-pick__item:focus-visible { color: var(--hot); outline: none; background: var(--paper-2, transparent); }
.zl-pick__item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-pick__item span { color: var(--ink-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-pick__sub { color: var(--ink-light); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; }
.zl-pick__none { color: var(--ink-light); margin: 6px 0; }
@media (max-width: 560px) { .zl-pick__item { grid-template-columns: minmax(0, 1fr) auto; } .zl-pick__item span:nth-of-type(n+2) { display: none; } }

/* ---- the keyboard: everything that can be pressed or changed shows where the keyboard is (audit S6, CL14) ----
   An orange ring, outside the thing, on paper and on the strip alike. */
.zs-sheet :is(.zs-edit, .zs-btn, .act, .nav, .zs-port, .zs-node__x, .zs-node__fold, .zs-plate__fit, .zs-link, .zs-time__play, .zs-time__speed, .zs-time__range, .zs-slide, .zs-editbox, .zs-adv__btn):focus-visible,
.zs-zoomer button:focus-visible, .zs-adv button:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.zs-graph path:focus-visible, .zs-graph path.is-focus { outline: none; stroke: var(--hot) !important; stroke-width: 2.5px; }
.zs-graph path.zs-link__focus { fill: none; stroke: var(--hot); stroke-width: 7px; stroke-opacity: 0.4; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.zs-curve__plot .pt-ring { fill: none; stroke: var(--hot); stroke-width: 2px; pointer-events: none; }
.zs-curve__plot .pt-hit { fill: transparent; stroke: none; cursor: grab; }
.zs-port:focus-visible { background: var(--hot); }

/* ---- zoom inside a plate (zoom: 'plate'; a graph plate by default): its FIT, and what it looks like zoomed ---- */
.zs-plate[data-zoom=plate] { touch-action: none; }
.zs-plate__fit { position: absolute; right: 0.5cqw; top: 0.4cqw; z-index: 3; font: inherit; font-size: var(--zs-fs-s); letter-spacing: 0.04em; color: var(--dim); background: var(--paper); border: var(--pen-object) solid var(--dim); border-radius: 0; padding: 0.15cqw 0.5cqw; cursor: pointer; opacity: 0.85; }
.zs-plate__fit:hover { color: var(--hot); border-color: var(--hot); opacity: 1; }
.zs-plate.is-inzoom { outline: var(--pen-object) dashed var(--dim); outline-offset: -1px; }
.zs-plate.is-inzoom .zs-plate__fit { color: var(--paper); background: var(--dim); opacity: 1; }
.zs-wrap.is-touch .zs-plate__fit { min-height: 2.1cqw; min-width: 4cqw; }
/* SEE ALL (a graph whose FIT is held at the readable floor, UI audit 2026-10-18): the whole graph for a look, at the plate's foot on the
   right; seen whole the plate says so, and a press on it reads there */
.zs-plate__all { position: absolute; right: 0.5cqw; bottom: 0.4cqw; z-index: 3; font: inherit; font-size: var(--zs-fs-s); font-weight: 700; letter-spacing: 0.04em; color: var(--dim); background: var(--paper); border: var(--pen-object) solid var(--dim); border-radius: 0; padding: 0.25cqw 0.7cqw; cursor: pointer; }
.zs-plate__all[hidden] { display: none; }
.zs-plate__all:hover { color: var(--hot); border-color: var(--hot); }
.zs-plate__all[aria-pressed=true] { color: var(--paper); background: var(--dim); }
.zs-plate.is-overview .zs-plate__body { cursor: zoom-in; }
.zs-plate.is-overview .zs-plate__body * { cursor: zoom-in !important; }
.zs-sheet .zs-plate__all:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.zs-pages.is-paper .zs-plate__all { display: none; }
@media print { html.zs-printing .zs-plate__all { display: none; } }

/* ---- the model graph, for the settings graph to come: groups that fold, values on the joins, the path a result comes along ---- */
.zs-node.is-group { border-style: double; border-width: 3px; }
.zs-node__fold { margin-left: 0.4cqw; border: var(--pen-object) solid currentColor; background: var(--paper); font: inherit; font-weight: 700; color: var(--dim); cursor: pointer; padding: 0 0.35cqw; line-height: 1.1; }
.zs-node__fold:hover { color: var(--hot); }
.zs-node.is-group .zs-node__t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5cqw; }
.zs-node.is-group .zs-node__t small { order: 3; flex-basis: 100%; }
.zs-group { position: absolute; border: var(--pen-object) dashed var(--ink-light); pointer-events: none; }
.zs-group__head { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 0.4cqw; padding: 0.15cqw 0.5cqw; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-light); pointer-events: auto; }
.zs-group.is-path { border-color: var(--hot); }
.zs-link__mask { fill: var(--paper); stroke: none; pointer-events: none; }
.zs-link__label { fill: var(--ink); font: inherit; font-size: var(--zs-fs-s); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.zs-graph.has-path .zs-node:not(.is-path) { opacity: 0.4; }
.zs-graph.has-path path:not(.is-path), .zs-graph.has-path .zs-link__label:not(.is-path) { opacity: 0.3; }
.zs-graph path.is-path { stroke: var(--hot); stroke-width: 2.2px; }
.zs-node.is-path { border-color: var(--hot); box-shadow: 0 0 0 1px var(--hot); }
.zs-port.is-lit { background: var(--hot); border-color: var(--hot); }
.zs-link__label.is-path { fill: var(--ink); font-weight: 700; }
.zs-pages.is-paper .zs-plate__fit, .zs-pages.is-paper .zs-node__fold { display: none; }
@media print { html.zs-printing .zs-plate__fit, html.zs-printing .zs-node__fold { display: none; } }

/* ---- stages on a graph (graph.stages, SHEETS.md 19): the graph as a timeline, left to right, of named bands ----
   Paper tones only: every other band a breath of ink, a hairline between bands, the header "1 · PART" in the sheet's ink,
   a thin rule along the tops with an arrow at its end. A lit stage (its header tapped) keeps its boxes and joins, the rest
   is dimmed. Light, dark and paper alike (the tints are shares of the ink on the paper). */
.zs-graph.has-stages > .zs-node { width: max-content; max-width: 26cqw; }
.zs-graph.has-stages .zs-node__t small { max-width: 16cqw; }
/* a long label or value wraps inside its box rather than widening the box (and the map) past what reads at the floor (UI audit 2026-10-18) */
.zs-graph.has-stages .zs-node__r > span { white-space: normal; overflow-wrap: break-word; }
.zs-graph.has-stages.is-fixed .zs-node__given { white-space: pre-line; }
.zs-plate.is-inzoom:not(.is-overview) > .zs-plate__body { cursor: grab; }
.zs-stage { position: absolute; left: 0; top: 0; width: 0; height: 0; background: color-mix(in srgb, var(--ink) 2.5%, transparent); border-left: var(--pen-thin) solid var(--rule); pointer-events: none; }
.zs-stage:first-child { border-left: 0; }
.zs-stage.is-odd { background: color-mix(in srgb, var(--ink) 5.5%, transparent); }
.zs-stage.is-plain { background: none; }
.zs-stage.is-key { background: color-mix(in srgb, var(--ink) 7.5%, transparent); }
.zs-stage.is-on { background: color-mix(in srgb, var(--hot) 7%, transparent); }
.zs-stage__head { position: absolute; left: 0.8em; top: 1.25em; display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; font: inherit; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); background: none; border: 0; border-bottom: var(--pen-thin) solid var(--ink); border-radius: 0; padding: 0.15em 0.1em; pointer-events: auto; }
.zs-stage__head b { font-weight: 700; color: var(--ink); }
.zs-stage__head span { white-space: pre; }
button.zs-stage__head { cursor: pointer; }
button.zs-stage__head:hover { color: var(--hot); border-bottom-color: var(--hot); } button.zs-stage__head:hover b { color: var(--hot); }
.zs-stage.is-on .zs-stage__head { color: var(--hot); border-bottom: var(--pen-object) solid var(--hot); } .zs-stage.is-on .zs-stage__head b { color: var(--hot); }
.zs-stage__head:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
.zs-stages__rule { position: absolute; top: 0.6em; height: 0; border-top: var(--pen-object) solid var(--ink-light); pointer-events: none; }
.zs-stages__rule::after { content: ''; position: absolute; right: -0.1em; top: calc(-0.32em - 0.55px); border-left: 0.75em solid var(--ink-light); border-top: 0.32em solid transparent; border-bottom: 0.32em solid transparent; }
.zs-stages__rule i { position: absolute; top: -0.3em; height: 0.6em; border-left: var(--pen-object) solid var(--ink-light); }
.zs-graph.has-stage > .zs-node:not(.is-stage), .zs-graph.has-stage > .zs-op:not(.is-stage) { opacity: 0.35; }
.zs-graph.has-stage path[data-link]:not(.is-stage), .zs-graph.has-stage .zs-link__label:not(.is-stage) { opacity: 0.22; }
.zs-graph.has-stage path.is-stage { stroke-width: 1.8px; }
.zs-graph.has-stage > .zs-node.is-stage { box-shadow: 0 0 0 1px var(--ink); }
.zs-wrap.is-portrait button.zs-stage__head { min-height: 44px; align-items: center; top: 1em; }
.zs-stage__head.is-stuck { background: var(--paper); padding-left: 0.4em; padding-right: 0.4em; box-shadow: 0 1px 0 var(--rule); z-index: 2; }
.zs-stages__rule.is-stuck { z-index: 2; }

/* ---- Simple / Advanced: "2 advanced settings changed", and what they are (Simple only) ---- */
.zs-adv { position: relative; flex: none; display: flex; align-items: stretch; border-left: var(--pen-object) solid var(--ink); }
.zs-adv__btn { display: flex; align-items: center; gap: 0; padding: 0 10px; font: inherit; letter-spacing: inherit; text-transform: uppercase; color: var(--warn-ink); background: var(--paper); border: 0; border-radius: 0; cursor: pointer; white-space: nowrap; }
.zs-adv__btn b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-right: 6px; color: var(--paper); background: var(--warn-ink); font-weight: 700; }
.zs-adv__btn span { color: var(--ink); }
.zs-adv__btn:hover span { color: var(--hot); }
.zs-adv__list { position: absolute; right: 0; bottom: 100%; z-index: 22; width: max-content; min-width: 280px; max-width: min(460px, 92vw); max-height: min(60vh, 520px); overflow: auto; padding: 10px 12px; display: grid; gap: 6px; font: 12px/1.35 var(--mono); text-transform: none; color: var(--ink); background: var(--paper); border: var(--pen-object) solid var(--ink); box-shadow: var(--shadow-pop); }
.zs-adv__list[hidden] { display: none; }
.zs-adv__list p { margin: 0 0 2px; color: var(--ink-light); }
.zs-adv__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 2px 10px; align-items: baseline; padding: 4px 0; border-bottom: var(--pen-faint) solid var(--rule); }
.zs-adv__row small { grid-column: 1 / 3; color: var(--ink-light); }
.zs-adv__row .act { grid-row: 1 / 3; grid-column: 3; border: var(--pen-object) solid var(--dim); background: none; color: var(--dim); font: inherit; text-transform: uppercase; padding: 2px 6px; cursor: pointer; }
.zs-adv__list > .zs-btn { justify-self: start; margin-top: 4px; font-size: 12px; padding: 5px 10px; }
.zs-adv.is-notes { display: inline-flex; margin-top: 0.4cqw; border: var(--pen-object) solid var(--warn); }
.zs-adv.is-notes .zs-adv__btn { padding: 0.15cqw 0.5cqw; font-size: var(--zs-fs-s); }
.zs-adv.is-notes .zs-adv__list { left: 0; right: auto; }
.zs-pages.is-paper .zs-adv { display: none; }

/* the kinds of box, to add one: a button at the top of the graph plate that lists them */
.zs-palette { z-index: 4; display: block; }
.zs-palette__open { border: var(--pen-object) solid var(--dim); background: var(--paper); font: inherit; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); padding: 0.1cqw 0.5cqw; cursor: pointer; }
.zs-palette__open:hover, .zs-palette__open[aria-expanded=true] { color: var(--hot); border-color: var(--hot); }
.zs-palette__list { position: absolute; left: 0; top: 100%; margin-top: 0.3cqw; display: flex; flex-wrap: wrap; gap: 0.3cqw 0.8cqw; width: max-content; max-width: 46cqw; padding: 0.5cqw 0.7cqw; background: var(--paper); border: var(--pen-object) solid var(--ink); box-shadow: var(--shadow-pop); }
.zs-palette__list[hidden] { display: none; }
.zs-sheet .zs-palette__open:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
/* a label of a params plate wraps before its value is cut short */
.zs-table tr[data-var] > td[role=rowheader] { white-space: normal; overflow-wrap: break-word; min-width: 6em; }

/* a plate whose lettering does not fit is set tighter (sheet.js, tighten): first closer lines, less padding and no
   letter-spacing at the same size (is-tight); then, if that is not enough, the small size too (is-tighter). Never smaller. */
.zs-plate.is-tight { padding: 0.35cqw 0.4cqw 0.25cqw; }
.zs-plate.is-tight > .zs-plate__cap { padding-top: 0.15cqw; }
.zs-plate.is-tight > .zs-plate__body { line-height: 1.14; }
.zs-plate.is-tight .zs-table th, .zs-plate.is-tight .zs-table td { padding: 0.06cqw 0.35cqw; height: 1.7cqw; letter-spacing: 0; }
.zs-plate.is-tight .zs-table caption { padding-bottom: 0.15cqw; letter-spacing: 0.02em; }
.zs-plate.is-tight .zs-table tr.zs-head th { padding-top: 0.3cqw; }
.zs-plate.is-tight .zs-btns { gap: 0.35cqw; }
.zs-plate.is-tight .zs-btn { padding: 0.2cqw 0.6cqw; min-height: 1.9cqw; letter-spacing: 0.02em; }
.zs-plate.is-tight .zs-progress { gap: 0.3cqw 0.8cqw; grid-template-columns: minmax(4cqw, 30%) auto minmax(0, 1fr); }
.zs-plate.is-tight .zs-progress__text { grid-column: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-plate.is-tight .zs-progress__at:empty + .zs-progress__text { grid-column: 2 / -1; }
.zs-plate.is-tighter > .zs-plate__body { font-size: var(--zs-fs-s); line-height: 1.1; }
.zs-plate.is-tighter .zs-table th, .zs-plate.is-tighter .zs-table td { height: 1.55cqw; padding: 0.03cqw 0.3cqw; }
.zs-plate.is-tighter .zs-table td:not(.unit):not(.item):not(.zs-acts), .zs-plate.is-tighter .zs-table tr[data-var] td.num { white-space: normal; }   /* words wrap before the plate scrolls */
.zs-plate.is-tighter .zs-btn { padding: 0.12cqw 0.5cqw; min-height: 1.7cqw; line-height: 1.05; }

/* ---- the settings graph (2026-10-16): a fixed map, key results, tones, advanced squares, a curve on a box ---- */
.zs-graph.is-fixed path { cursor: default; } .zs-graph.is-fixed path:hover { stroke: var(--ink); } .zs-graph.is-fixed path.is-path:hover { stroke: var(--hot); }
.zs-graph.is-fixed .zs-node__t, .zs-graph.is-fixed .zs-port { cursor: default; }
.zs-graph.is-fixed .zs-port:hover { background: var(--paper); border-color: var(--ink); } .zs-graph.is-fixed .zs-port.is-fed:hover { background: var(--ink); }
.zs-node__r.is-key { font-weight: 700; font-size: var(--zs-fs-l); padding-top: 0.25cqw; padding-bottom: 0.25cqw; }
.zs-node__r.is-key:not(.is-out) > span:first-child, .zs-node__r.is-out.is-key > span:nth-child(2) { font-size: var(--zs-fs); font-weight: 400; }
.zs-node__r.is-out.is-key > span:first-child { color: var(--ink); }
.zs-node__r.is-ok:not(.is-out) > span:nth-child(2), .zs-node__r.is-out.is-ok > span:first-child { color: var(--good-ink); }
.zs-node__r.is-watch:not(.is-out) > span:nth-child(2), .zs-node__r.is-out.is-watch > span:first-child { color: var(--warn-ink); }
.zs-node__r.is-bad:not(.is-out) > span:nth-child(2), .zs-node__r.is-out.is-bad > span:first-child { color: var(--alarm-ink); }
.zs-node__curve { padding: 0.2cqw 0.5cqw; border-bottom: var(--pen-thin) solid var(--ink); }
.zs-graph .zs-node__curve svg { position: static; display: block; width: 12cqw; height: auto; overflow: visible; }
.zs-graph .zs-node__curve path, .zs-graph .zs-node__curve path:hover { fill: none; stroke: var(--ink); stroke-width: 1.2; cursor: default; }
.zs-graph .zs-node__curve path.axis { stroke: var(--ink-light); stroke-width: 0.8; }
.zs-graph .zs-node__curve path.also { stroke: var(--ink-light); stroke-dasharray: 3 2; }
.zs-node__curve .at { fill: var(--hot); stroke: var(--paper); stroke-width: 0.8; }
.zs-node__curve text { fill: var(--ink-light); font: inherit; font-size: 7px; }
.zs-graph.is-fixed .zs-node__given { white-space: pre-line; text-align: right; color: var(--ink); }
.zs-graph.is-fixed .zs-node { width: max-content; min-width: 10cqw; }
.zs-graph.is-fixed .zs-node__t small { max-width: 12cqw; text-transform: none; }

/* ---- a sheet that flows (create's flow, 2026-10-17; SHEETS.md section 17) ----
   A page of a document rather than a drawing of fixed shape: the same border, zones, plates, notes and
   title block, but the sheet is as tall as what is on it and the page scrolls. The plates follow one
   another in the document's order on a row of twelve columns (a plate's box gives its width, --zs-span;
   its place and height come from what it holds), and the lettering takes the chrome's fixed sizes
   instead of a share of the sheet's width. Under 760 px of sheet every plate takes the whole row; under
   560 px the side zones give their width back. The tab strip stays at the foot of the window while the
   page scrolls. On paper a flowing sheet is the drawing it always was (the pages are drawn apart). */
.zs-wrap.is-flow { overflow: visible; padding: 14px var(--gutter) 18px; background: var(--desk); }
.zs-wrap.is-flow .zs-sheet { aspect-ratio: auto; min-width: 0; max-width: 1680px; margin: 0 auto; }
.zs-wrap.is-flow .zs-sheet__in { position: relative; inset: auto; padding: 22px; --zs-fs: var(--fs-sm); --zs-fs-s: var(--fs-xs); --zs-fs-l: var(--fs-md); --zs-fs-t: var(--fs-2xl); line-height: 1.4; }
.zs-wrap.is-flow .zs-sheet__zone { font-size: 9px; }
.zs-wrap.is-flow .zs-sheet__zone.x { left: 22px; right: 22px; height: 22px; }
.zs-wrap.is-flow .zs-sheet__zone.y { top: 22px; bottom: 22px; width: 22px; }
.zs-wrap.is-flow .zs-sheet__frame { position: relative; inset: auto; display: flex; flex-direction: column; min-height: calc(100dvh - var(--topbar) - 152px); }
.zs-wrap.is-flow .zs-sheet__field { flex: 1 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: start; }
.zs-wrap.is-flow .zs-plate { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; grid-column: span var(--zs-span, 12); padding: 12px 14px; }
.zs-wrap.is-flow .zs-plate__body { flex: none; overflow: visible; }
.zs-wrap.is-flow .zs-plate__cap { padding-top: 7px; }
.zs-wrap.is-flow .zs-plate__cap span { margin-left: 8px; }
.zs-wrap.is-flow .zs-view { position: relative; inset: auto; }
/* a plate whose content the app has hidden (an element with hidden, alone in its view) takes no room */
.zs-wrap.is-flow .zs-plate:has(> .zs-plate__body > .zs-view > [hidden]:only-child) { display: none; }
.zs-wrap.is-flow .zs-sheet__foot { grid-template-columns: minmax(0, 1fr) minmax(300px, 40%); min-height: 0; }
.zs-wrap.is-flow .zs-sheet__notes { padding: 10px 14px 12px; }
.zs-wrap.is-flow .zs-sheet__notes h2 { margin-bottom: 4px; }
.zs-wrap.is-flow .zs-sheet__notes ol { padding-left: 20px; }
/* notes on a flowing sheet may be sentences: read as sentences, not lettered in capitals */
.zs-wrap.is-flow .zs-sheet__notes li { text-transform: none; letter-spacing: 0; line-height: 1.45; max-width: 90ch; color: var(--ink-light); }
.zs-wrap.is-flow .zs-sheet__notes li + li { margin-top: 3px; }
.zs-wrap.is-flow .zs-tblock td { padding: 4px 9px 5px; }
.zs-wrap.is-flow .zs-tblock .nav { padding: 0 6px; min-height: 26px; }
.zs-wrap.is-flow + .zs-tabs { position: sticky; bottom: 0; z-index: 30; }
@container (max-width: 760px) {
  .zs-wrap.is-flow .zs-plate { grid-column: 1 / -1; }
  .zs-wrap.is-flow .zs-sheet__foot { grid-template-columns: minmax(0, 1fr); }
  .zs-wrap.is-flow .zs-tblock { border-left: 0; border-top: var(--pen-object) solid var(--ink); }
}
@container (max-width: 560px) {
  .zs-wrap.is-flow .zs-sheet__in { padding: 16px 6px; }
  .zs-wrap.is-flow .zs-sheet__zone.x { left: 6px; right: 6px; height: 16px; }
  .zs-wrap.is-flow .zs-sheet__zone.y { display: none; }
  .zs-wrap.is-flow .zs-plate { padding: 10px 6px; }
  .zs-wrap.is-flow .zs-tblock td { white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 560px) { .zs-wrap.is-flow { padding: 0; } .zs-wrap.is-flow .zs-sheet { box-shadow: none; } }
/* a flowing sheet on a phone or a tablet (2026-11-01): a table's words wrap in its cells (never inside a word), and every button,
   arrow, row action and link answers a fingertip (44 px), as on a portrait sheet; the strip's tabs too */
.zs-wrap.is-flow .zs-table :is(th, td) { white-space: normal; overflow-wrap: break-word; }   /* (a table that fits is laid out as before: nothing wraps until the room runs out) */
@container (max-width: 760px) {
  .zs-wrap.is-flow .zs-table :is(th, td) { height: auto; padding: 6px 8px; }
  .zs-wrap.is-flow .zs-btn { min-height: 44px; padding: 8px 14px; }
  .zs-wrap.is-flow .zs-btns { gap: 8px; }
  .zs-wrap.is-flow .zs-tblock .nav, .zs-wrap.is-flow .zs-table .act { min-height: 44px; min-width: 44px; }
  .zs-wrap.is-flow .zs-sheet .zs-link { position: relative; }
  .zs-wrap.is-flow .zs-sheet .zs-link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
}
@media (max-width: 760px) { .zs-wrap.is-flow + .zs-tabs { height: 44px; } .zs-wrap.is-flow + .zs-tabs .zs-tabs__all { min-width: 64px; justify-content: center; } }

/* ---- HTML in a plate: zs-html (2026-10-17; SHEETS.md section 17) ----
   Pages whose plates hold HTML of their own (lists, forms, figures: the admin pages) letter it in the
   kit's ink with these short class names, which mean something only inside an element with the class
   zs-html (a view's element), so they can never touch another page. Same rules as everywhere: ink draws,
   blue is a link or what can be pressed, orange is where the action is, red is trouble, green healthy.
   Phone first: nothing scrolls sideways, form controls are 16 px on a phone (iOS does not zoom), and
   every button is 40 px tall there. */
.zs-html { --wash: color-mix(in srgb, var(--ink) 4%, transparent); --rule-soft: color-mix(in srgb, var(--ink) 10%, transparent);
  font-family: var(--sans); font-size: var(--fs-base); line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.zs-html a { color: var(--dim); }
.zs-html .grow { flex: 1; }
.zs-html [hidden] { display: none !important; }
/* buttons: the kit's (zs-btn): blue outline; primary is the orange fill */
.zs-html .btn { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); background: var(--paper); border: var(--pen-object) solid var(--dim); border-radius: 0; padding: 6px 12px; min-height: 30px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow-wrap: normal; }
.zs-html .btn:hover:not([disabled]) { border-color: var(--hot); color: var(--hot); }
.zs-html .btn.primary { background: var(--hot); border-color: var(--hot); color: var(--on-hot); font-weight: 700; }
.zs-html .btn.primary:hover:not([disabled]) { color: var(--on-hot); background: color-mix(in srgb, var(--hot) 85%, var(--ink)); }
.zs-html .btn.small { padding: 4px 9px; min-height: 26px; letter-spacing: 0.06em; }
.zs-html .btn[disabled] { color: var(--ink-light); border-color: var(--ink-faint); border-style: dashed; background: var(--paper); cursor: default; }
.zs-html .btn:focus-visible, .zs-html .fchip:focus-visible, .zs-html .seg button:focus-visible { outline: 2px solid var(--hot); outline-offset: 1px; }
/* a choice of a few, one ruled strip */
.zs-html .seg { display: inline-flex; border: var(--pen-object) solid var(--ink); }
.zs-html .seg button { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; color: var(--ink-light); border: 0; border-right: var(--pen-thin) solid var(--rule); padding: 6px 12px; cursor: pointer; }
.zs-html .seg button:last-child { border-right: 0; }
.zs-html .seg button:hover { color: var(--hot); }
.zs-html .seg button[aria-pressed='true'], .zs-html .seg button[role='tab'][aria-selected='true'] { background: var(--ink); color: var(--paper); }
/* typing: a ruled line, orange while it is being typed in */
.zs-html input[type='search'], .zs-html select { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink); background: transparent; border: 0; border-bottom: var(--pen-object) solid var(--ink); border-radius: 0; padding: 5px 2px; min-width: 0; }
.zs-html select { border: var(--pen-thin) solid var(--rule); padding: 5px 7px; background: var(--paper); }
.zs-html input:focus-visible, .zs-html select:focus-visible, .zs-html textarea:focus-visible { outline: none; border-color: var(--hot); }
.zs-html textarea { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink); background: var(--paper); border: var(--pen-thin) solid var(--rule); padding: 8px 9px; }
/* a view: a captioned block, its item number in a balloon, a note in the corner */
.zs-html .view { border: var(--pen-object) solid var(--ink); background: var(--paper); }
.zs-html .view-cap { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; padding: 8px 12px; border-bottom: var(--pen-object) solid var(--ink); background: var(--wash); }
.zs-html .vno { width: 22px; height: 22px; flex: none; border: var(--pen-object) solid var(--ink); border-radius: 50%; display: grid; place-items: center; font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; }
.zs-html .view-cap h2 { margin: 0; font-family: var(--mono); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.zs-html .vmeta { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-light); letter-spacing: 0.06em; }
.zs-html .view-body { padding: 13px 12px; }
.zs-html .view-body.flush { padding: 0; }
.zs-html .vnote { margin: 0 0 12px; color: var(--ink-light); font-size: var(--fs-sm); max-width: 78ch; }
.zs-html .vnote:last-child { margin-bottom: 0; }
.zs-html .vnote code { font-family: var(--mono); font-size: 0.92em; color: var(--ink); }
.zs-html h3.hkey { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-light); margin: 0 0 9px; font-weight: 600; }
/* figures: a callout box with corner ticks, the number large */
.zs-html .figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.zs-html .fig { position: relative; padding: 12px 14px 13px; border-right: var(--pen-thin) solid var(--rule); border-bottom: var(--pen-thin) solid var(--rule); min-width: 0; }
.zs-html .fig i { position: absolute; width: 7px; height: 7px; font-style: normal; border-color: var(--ink-faint); border-style: solid; border-width: 0; }
.zs-html .fig i.tl { top: 4px; left: 4px; border-top-width: 1px; border-left-width: 1px; }
.zs-html .fig i.br { bottom: 4px; right: 4px; border-bottom-width: 1px; border-right-width: 1px; }
.zs-html .fig k { display: block; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-light); }
.zs-html .fig v { display: block; font-family: var(--mono); font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 3px 0 1px; overflow-wrap: normal; }
.zs-html .fig v.out { color: var(--hot); } .zs-html .fig v.in { color: var(--good); } .zs-html .fig v.flag { color: var(--alarm); }
.zs-html .fig v.small { font-size: var(--fs-lg); letter-spacing: 0.02em; overflow-wrap: anywhere; }
.zs-html .fig n { display: block; font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-light); letter-spacing: 0.04em; }
.zs-html .fig n em { font-style: normal; color: var(--dim); font-weight: 600; }   /* a figure the page worked out: the draughtsman's blue */
/* a key under a chart */
.zs-html .plot { width: 100%; height: auto; display: block; }
.zs-html .key { display: flex; flex-wrap: wrap; gap: 16px; padding: 2px 0 12px; }
.zs-html .key span { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-light); letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.zs-html .key i { width: 14px; height: 9px; display: block; border: 1px solid var(--ink); }
/* nothing to show, said in a sentence */
.zs-html .empty { padding: 34px 16px; text-align: center; color: var(--ink-light); font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.06em; }
/* a line of totals under a list */
.zs-html .foot-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-top: var(--pen-object) solid var(--ink); font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-light); letter-spacing: 0.06em; text-transform: uppercase; }
.zs-html .foot-bar b { color: var(--ink); } .zs-html .foot-bar b.out { color: var(--hot); } .zs-html .foot-bar b.in { color: var(--good); }
/* the filter strip: chips that are pressed or not */
.zs-html .filters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 12px; border-bottom: var(--pen-thin) solid var(--rule); }
.zs-html .fchip { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; background: transparent; border: var(--pen-object) solid var(--rule); color: var(--ink-light); padding: 4px 9px; cursor: pointer; }
.zs-html .fchip:hover { border-color: var(--hot); color: var(--hot); }
.zs-html .fchip[aria-pressed='true'] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.zs-html .fchip em { font-style: normal; opacity: 0.6; margin-left: 5px; }
/* a form: a field is a label above its control, with a line of help */
.zs-html .exp-ctl { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 13px; }
.zs-html .field { display: flex; flex-direction: column; gap: 5px; padding: 12px 13px; border-bottom: var(--pen-thin) solid var(--rule-soft); }
.zs-html .field:last-child { border-bottom: 0; }
.zs-html .field label { display: block; font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-light); }
.zs-html .field .fname { font-weight: 600; font-size: var(--fs-sm); }
.zs-html .field .fhelp { font-size: var(--fs-micro); color: var(--ink-light); margin: 2px 0 8px; line-height: 1.5; }
.zs-html .field input[type='text'], .zs-html .field input[type='password'], .zs-html .field input[type='number'], .zs-html .field select { font-family: var(--mono); font-size: var(--fs-xs); color: var(--ink); background: transparent; border: 0; border-bottom: var(--pen-object) solid var(--ink); padding: 5px 2px; width: 100%; max-width: 420px; }
/* a list of rows: a mark in the margin, the words, the date */
.zs-html .mrow { display: grid; grid-template-columns: 54px minmax(0, 1fr) 62px; gap: 10px; align-items: start; padding: 9px 12px; border-bottom: var(--pen-thin) solid var(--rule-soft); font-size: var(--fs-sm); }
.zs-html .mrow:hover { background: var(--wash); }
.zs-html .mrow:last-child { border-bottom: 0; }
.zs-html .mrow .tier { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-align: center; border: 1px solid currentColor; padding: 2px 0; }
.zs-html .mrow .tier.p1 { color: var(--alarm); } .zs-html .mrow .tier.p2 { color: var(--warn); } .zs-html .mrow .tier.p3 { color: var(--dim); } .zs-html .mrow .tier.noise { color: var(--ink-light); opacity: 0.7; }
.zs-html .mrow .who { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-light); display: flex; gap: 7px; align-items: center; }
.zs-html .mrow .subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 1px 0 2px; }
.zs-html .mrow .subj.unread { font-weight: 650; }
.zs-html .mrow .why { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-html .mrow .when { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-light); text-align: right; }
.zs-html .mrow .move { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.zs-html .srow { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.zs-html .srow .item { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zs-html .tag { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: 0.06em; border: var(--pen-thin) solid var(--rule); padding: 1px 5px; margin-right: 4px; color: var(--ink-light); }
.zs-html .srow .tag.ok { border-color: var(--good); color: var(--good); }
/* a gauge: a span with its limit marked and the measured value laid against it */
.zs-html .gauge { padding: 12px 13px 13px; border-bottom: var(--pen-thin) solid var(--rule); }
.zs-html .gauge:last-child { border-bottom: 0; }
.zs-html .gauge .g-cap { display: flex; align-items: baseline; gap: 10px; }
.zs-html .gauge k { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-light); }
.zs-html .gauge n { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-light); letter-spacing: 0.04em; text-align: right; }
.zs-html .gauge .g-line { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.zs-html .gauge v { font-family: var(--mono); font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; width: 4.6ch; text-align: right; flex: none; overflow-wrap: normal; }
.zs-html .gauge .track { position: relative; flex: 1; height: 11px; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.zs-html .gauge .track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--rule); }
.zs-html .gauge .track::after { content: ''; position: absolute; top: -3px; bottom: -3px; left: 90%; border-left: 1px dashed var(--ink-faint); }
.zs-html .gauge .track i { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--ink); display: block; transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
.zs-html .gauge .g-note { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-light); letter-spacing: 0.04em; margin-top: 6px; padding-left: calc(4.6ch + 12px); }
.zs-html .gauge.warn v, .zs-html .gauge.warn .g-note { color: var(--hot); } .zs-html .gauge.warn .track i { background: var(--hot); }
.zs-html .gauge.alarm v, .zs-html .gauge.alarm .g-note { color: var(--alarm); } .zs-html .gauge.alarm .track i { background: var(--alarm); }
.zs-html .gauge.unknown v { color: var(--ink-faint); }
@media (prefers-reduced-motion: reduce) { .zs-html * { transition: none !important; } }
@media (max-width: 760px) {
  /* iOS zooms the whole page into a form control lettered under 16 px */
  .zs-html input, .zs-html select, .zs-html textarea, .zs-html .field input[type='text'], .zs-html .field input[type='password'], .zs-html .field input[type='number'], .zs-html .field select { font-size: 16px; }
  .zs-html .view-body { padding: 12px 10px; }
  .zs-html .gauge .g-cap { flex-wrap: wrap; gap: 2px 10px; }
  .zs-html .gauge n { text-align: left; }
  .zs-html .gauge v { font-size: var(--fs-lg); width: 4.2ch; }
  .zs-html .gauge .g-note { padding-left: 0; }
}
@media (max-width: 560px) {
  .zs-html .btn { min-height: 40px; justify-content: center; padding: 8px 13px; }
  .zs-html .btn.small { min-height: 40px; padding: 8px 11px; }
  .zs-html .fchip { min-height: 40px; display: inline-flex; align-items: center; }
  .zs-html .seg button { min-height: 40px; padding: 0 13px; }
  .zs-html .view-cap { gap: 6px 10px; }
  .zs-html .srow { grid-template-columns: minmax(0, 1fr); }
  .zs-html .srow .pacts, .zs-html .mrow .move { grid-column: 1 / -1; margin-top: 8px; }
  .zs-html .mrow .move .btn, .zs-html .pacts .btn { flex: 1 1 auto; }
  .zs-html .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zs-html .fig v { white-space: nowrap; font-size: clamp(16px, 5.2vw, 23px); }
  .zs-html .fig v.small { font-size: clamp(14px, 4.4vw, 19px); white-space: normal; }
  .zs-html .field > span:first-child { flex: none; overflow-wrap: normal; }
  /* a message row: the mark and the date share the first line, the words take the width under them */
  .zs-html .mrow:not(.orow):not(.erow) { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .zs-html .mrow:not(.orow):not(.erow) > .tier { grid-row: 1; grid-column: 1; justify-self: start; padding: 2px 7px; }
  .zs-html .mrow:not(.orow):not(.erow) > .tier ~ .when { grid-row: 1; grid-column: 2; }
  .zs-html .mrow:not(.orow):not(.erow) > .tier + div { grid-row: 2; grid-column: 1 / -1; }
}
/* ---- the curve editor (2026-10-17, REDESIGN.md 1): a plate of kind 'curve', and a box's curve opened full size ----
   The plot (axes, round ticks, the curve, its points), a bar above it, the points as a small table under it. Ink on
   paper, blue for what is dragged or typed, orange for the point chosen and the point something stands at. */
.zs-curve { display: flex; flex-direction: column; height: 100%; min-height: 0; gap: 0.3cqw; }
.zs-curve__bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3cqw 0.6cqw; }
.zs-curve__bar .zs-btn { min-height: 2cqw; padding: 0.2cqw 0.7cqw; }
.zs-curve__bar .zs-btn.is-on { color: var(--paper); background: var(--dim); }
.zs-curve__said { flex: 1 1 18cqw; min-width: 0; font-size: var(--zs-fs-s); color: var(--ink-light); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-curve__plot { flex: 1 1 auto; min-height: 9cqw; position: relative; font-size: var(--zs-fs-s); }
.zs-curve__plot svg { position: absolute; inset: 0; display: block; overflow: visible; touch-action: none; user-select: none; -webkit-user-select: none; }
.zs-curve__plot .grid { fill: none; stroke: var(--rule); stroke-width: 0.6; }
.zs-curve__plot .axis { fill: none; stroke: var(--ink); stroke-width: var(--pen-object); }
.zs-curve__plot .tick, .zs-curve__plot .name, .zs-curve__plot .also-label, .zs-curve__plot .at-label { fill: var(--ink-light); font: inherit; font-size: var(--zs-fs-s); }
.zs-curve__plot .name { fill: var(--ink); letter-spacing: 0.04em; text-transform: uppercase; }
.zs-curve__plot .line { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-linejoin: round; }
.zs-curve__plot .also { fill: none; stroke: var(--ink-light); stroke-width: 1.2px; stroke-dasharray: 5 4; }
.zs-curve__plot .hit { fill: none; stroke: transparent; cursor: copy; pointer-events: stroke; }
.zs-curve__plot .at { fill: var(--hot); stroke: var(--paper); stroke-width: 1.5px; }
.zs-curve__plot .at-label { fill: var(--ink); }
.zs-curve__plot .pt { fill: var(--paper); stroke: var(--dim); stroke-width: 2px; cursor: grab; }
.zs-curve__plot .pt:hover { fill: var(--dim); }
.zs-curve__plot .pt.is-on { fill: var(--hot); stroke: var(--ink); }
.zs-curve__plot .pt.is-gone { opacity: 0.35; stroke-dasharray: 2 2; }
.zs-curve__plot .pt:focus-visible { outline: none; stroke: var(--hot); stroke-width: 3.5px; }
.zs-curve__plot .readout { fill: var(--ink); font: inherit; font-size: var(--zs-fs-s); font-weight: 700; paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.zs-curve__tablewrap { flex: none; overflow-x: auto; max-height: 34%; }
.zs-curve__table { width: auto; }
.zs-curve__table th[scope=row] { text-align: left; white-space: nowrap; padding-right: 0.8cqw; }
.zs-curve__table td { min-width: 4.2cqw; }
.zs-curve__table td.is-on { background: var(--fill-section); box-shadow: inset 0 -2px 0 var(--hot); }
.zs-curve__table caption { text-align: left; }
.zs-plate.is-pop { z-index: 30; background: var(--paper); border: var(--pen-object) solid var(--ink); box-shadow: var(--shadow-pop); outline: 0 !important; }
.zs-plate.is-pop > .zs-curve__done { position: absolute; right: 0.8cqw; top: 0.6cqw; z-index: 2; }
.zs-plate.is-pop .zs-curve__bar { padding-right: 7cqw; }
.zs-plate.zs-curve-shade { z-index: 29; background: color-mix(in srgb, var(--paper) 72%, transparent); outline: 0 !important; cursor: zoom-out; }
.zs-plate.zs-curve-shade .zs-plate__body { overflow: hidden; }
.zs-node__edit { display: block; margin: 0.15cqw 0 0; border: 0; padding: 0; background: none; font: inherit; font-size: var(--zs-fs-s); letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); cursor: pointer; border-bottom: var(--pen-faint) dashed var(--dim); }
.zs-node__edit:hover { color: var(--hot); }

/* ---- operators on joins and values (2026-10-17, REDESIGN.md 1): a small box on the line, its constant in blue, its x;
   the square it feeds and the value on its box marked, and the title block says how many values are modified ---- */
.zs-op { position: absolute; z-index: 3; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1cqw; padding: 0.15cqw 0.45cqw; background: var(--paper); border: var(--pen-object) solid var(--hot); font-size: var(--zs-fs-s); line-height: 1.2; white-space: nowrap; }
.zs-op[hidden] { display: none; }
.zs-node .zs-op { position: static; margin-left: 0.4cqw; }
.zs-op__one { display: inline-flex; align-items: baseline; gap: 0.25cqw; }
.zs-op__sign { color: var(--hot); font-weight: 700; }
.zs-op__u { color: var(--ink-light); }
.zs-op__was { color: var(--ink); font-size: inherit; }
.zs-op__x, .zs-op__add { border: 0; background: none; padding: 0 0.15cqw; font: inherit; color: var(--dim); cursor: pointer; }
.zs-op__x:hover, .zs-op__add:hover { color: var(--alarm); }
.zs-op__add { margin-left: auto; font-weight: 700; }
.zs-node__r.is-operand { display: flex; align-items: center; gap: 0.4cqw; flex-wrap: wrap; }
.zs-node__r.is-op > span:nth-child(2), .zs-node__r.is-op .zs-node__given { color: var(--hot); }
.zs-graph path.takes-op { cursor: pointer; }
.zs-graph path.takes-op:hover, .zs-graph.is-fixed path.takes-op:hover { stroke: var(--hot); }
.zs-graph path.zs-link__hit, .zs-graph path.zs-link__hit:hover { stroke: transparent; fill: none; pointer-events: stroke; cursor: pointer; }
.zs-opmenu { position: absolute; z-index: 40; display: flex; flex-direction: column; gap: 0.3cqw; padding: 0.6cqw 2.4cqw 0.7cqw 0.8cqw; background: var(--paper); border: var(--pen-object) solid var(--ink); box-shadow: var(--shadow-pop); font-size: var(--zs-fs-s); width: max-content; max-width: 40cqw; }
.zs-opmenu__t { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.zs-opmenu__h { color: var(--ink-light); letter-spacing: 0.03em; text-transform: uppercase; }
.zs-opmenu__row { display: flex; flex-wrap: wrap; gap: 0.3cqw; }
.zs-opmenu .zs-btn { min-height: 2cqw; min-width: 2.6cqw; padding: 0.15cqw 0.5cqw; text-transform: none; }
.zs-opmenu__close { position: absolute; right: 0.3cqw; top: 0.2cqw; border: 0; background: none; font: inherit; font-size: var(--zs-fs); color: var(--dim); cursor: pointer; }
.zs-tblock td.is-op { color: var(--hot); font-weight: 700; } .zs-tblock td.is-op small { color: var(--hot); font-weight: 400; }
html.zs-printing .zs-op__x, html.zs-printing .zs-op__add, html.zs-printing .zs-node__edit, html.zs-printing .zs-opmenu, html.zs-printing .zs-curve__bar .zs-btn, html.zs-printing .zs-curve__table .zs-acts { display: none; }
.zs-pages.is-paper .zs-op__x, .zs-pages.is-paper .zs-op__add, .zs-pages.is-paper .zs-node__edit, .zs-pages.is-paper .zs-opmenu, .zs-pages.is-paper .zs-curve__bar .zs-btn, .zs-pages.is-paper .zs-curve__table .zs-acts { display: none; }
.zs-curve.is-side { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr); column-gap: 1cqw; }
.zs-curve.is-side > .zs-curve__bar { grid-column: 1 / -1; }
.zs-curve.is-side > .zs-curve__tablewrap { overflow: auto; align-self: start; max-height: 100%; }
.zs-curve.is-side .zs-curve__table td { min-width: 0; }

/* ---- portrait sheets (create's portrait, 2026-10-17; SHEETS.md section 16) ----
   The owner (2026-10-17): "the sheet view is what we always use. Maybe the mobile would have a vertical sheet instead of
   the horizontal". On a narrow or upright mount each sheet is an UPRIGHT drawing sheet in the same look: the border and
   its zones, the plates, the notes, then the title block the whole width at the foot, the two-row strip of tabs under the
   sheet. The plates run top to bottom (their order and width from sheet.js, --zs-span; the main drawing first), each as
   tall as what it holds, or a height of its own (is-aspect, is-high); the sheet is as tall as that and scrolls in its
   place. The lettering is a phone's, not a share of the sheet's width: 14 px for the body, 12.5 px for the small, a
   value a fingertip high (44 px since 2026-10-25, was 40: every value, button, tab and arrow answers 44 x 44 or more, the hit
   area larger than the drawn mark where the mark is small). A graph keeps the shape and lettering of a desk and pans sideways in its plate. */
.zs-wrap.is-portrait { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--desk); --tap: 44px; }   /* (--tap: the kit's buttons and selects in an app's view, 44 px too) */
.zs-wrap.is-portrait.is-fill { height: 100%; }
.zs-portrait { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px; outline: none; }
.zs-wrap.is-portrait .zs-sheet { aspect-ratio: auto; min-width: 0; width: 100%; box-shadow: var(--shadow-sheet-app); }
.zs-wrap.is-portrait .zs-sheet__in { position: relative; inset: auto; padding: 18px 12px; --zs-fs: 14px; --zs-fs-s: 12.5px; --zs-fs-l: 17px; --zs-fs-t: 24px; line-height: 1.35; }
.zs-wrap.is-portrait .zs-sheet__zone { font-size: 10px; }
.zs-wrap.is-portrait .zs-sheet__zone.x { left: 12px; right: 12px; height: 18px; }
.zs-wrap.is-portrait .zs-sheet__zone.y { top: 18px; bottom: 18px; width: 12px; }   /* (2026-10-25: 12 px margins, were 16: the width goes to the drawing) */
.zs-wrap.is-portrait .zs-sheet__zone.x span:nth-child(n+5) { display: none; }          /* four zones across an upright sheet, as many letters down it as it is tall */
.zs-wrap.is-portrait .zs-sheet__frame { position: relative; inset: auto; display: flex; flex-direction: column; min-height: calc(100% - 0px); }
.zs-wrap.is-portrait .zs-sheet__field { flex: 1 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-content: start; }
.zs-wrap.is-portrait .zs-plate { position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; grid-column: span var(--zs-span, 12); padding: 10px 8px 8px; min-width: 0; }
.zs-wrap.is-portrait .zs-plate + .zs-plate { outline: 0; }
.zs-wrap.is-portrait .zs-plate:not(.is-main) { border-top: var(--pen-thin) solid var(--rule); }
/* the main drawing the whole width inside the border (2026-10-25: it had the plates' 8 px each side as well); its caption keeps them */
.zs-wrap.is-portrait .zs-plate.is-main:not(.is-auto):has(> .zs-plate__body > :is(.zs-view, .zs-graph)) { padding-left: 0; padding-right: 0; }
.zs-wrap.is-portrait .zs-plate.is-main:not(.is-auto):has(> .zs-plate__body > :is(.zs-view, .zs-graph)) > :not(.zs-plate__body) { margin-left: 8px; margin-right: 8px; }
.zs-wrap.is-portrait .zs-plate__body { flex: none; overflow-x: auto; overflow-y: visible; }
.zs-wrap.is-portrait .zs-plate.is-aspect > .zs-plate__body { aspect-ratio: 1 / var(--zs-pa, 0.75); max-height: 70svh; min-height: 180px; overflow: hidden; }
.zs-wrap.is-portrait .zs-plate.is-main.is-aspect > .zs-plate__body { max-height: 60svh; }    /* (room left under the main drawing to scroll the page by) */
.zs-wrap.is-portrait .zs-plate.is-high > .zs-plate__body { height: var(--zs-ph); overflow: hidden; }
/* a drawing laid out for a desk (portrait: { desk }): a desk's width and its own shape, at most a screen tall (less the bar and the strip);
   one finger sideways scrolls it, up and down the page */
.zs-wrap.is-portrait .zs-plate.is-desk.is-aspect > .zs-plate__body { aspect-ratio: auto; max-height: calc(100svh - 146px); min-height: 0; height: calc(var(--zs-dw) * var(--zs-pa)); overflow-x: auto !important; overflow-y: hidden !important; overscroll-behavior-x: contain; touch-action: pan-x pan-y; }   /* (over the view's own inline overflow) */
.zs-wrap.is-portrait .zs-plate.is-desk > .zs-plate__body > .zs-view { right: auto; width: var(--zs-dw); }
.zs-wrap.is-portrait .zs-plate.is-auto > .zs-plate__body > .zs-view { position: relative; inset: auto; }
.zs-wrap.is-portrait .zs-plate.is-auto > .zs-plate__body > .zs-view > .zl { position: relative; inset: auto; }
.zs-wrap.is-portrait .zl-body { overflow: visible; }
/* a comparison's table has a column per thing compared (seven or more): on a phone it is wider than the screen, and the
   library's box hides what runs past its edge, so the Moves and Open columns could not be reached (2026-11-01). The table
   scrolls sideways on its own instead, with its caption allowed to wrap so the caption does not set the width. */
.zs-wrap.is-portrait .zl-cmp { min-width: 0; }
.zs-wrap.is-portrait .zl-cmp__table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zs-wrap.is-portrait .zl-cmp__table caption { white-space: normal; }
.zs-wrap.is-portrait .zs-plate__cap { white-space: normal; padding-top: 6px; }
.zs-wrap.is-portrait .zs-plate__cap span { margin-left: 8px; }
/* a graph: laid out at a desk's width (sheet.js sets its size), its lettering a desk's; the plate clips it and pans it sideways */
.zs-wrap.is-portrait .zs-plate[data-zoom=plate] { touch-action: pan-y; }
.zs-wrap.is-portrait .zs-plate > .zs-plate__body:has(> .zs-graph) { overflow: hidden; }
.zs-wrap.is-portrait .zs-graph { inset: auto; left: 0; top: 0; container-type: inline-size; --zs-fs: 13px; --zs-fs-s: 12px; --zs-fs-l: 15.5px; }
.zs-wrap.is-portrait .zs-plate__fit { right: 6px; top: 6px; min-height: 44px; min-width: 52px; padding: 0 10px; font-size: 12.5px; opacity: 1; }
/* every value and button a fingertip: 44 px high, and a value narrower than 44 px answers over 44 px across (an invisible hit area
   centred on it, ::after; a choice's ▾ is its ::before) */
.zs-wrap.is-portrait .zs-edit { position: relative; display: inline-flex; align-items: center; min-height: 44px !important; }
.zs-wrap.is-portrait .zs-edit::after { content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.zs-wrap.is-portrait .zs-table td, .zs-wrap.is-portrait .zs-table th { height: auto; padding: 4px 8px; }
.zs-wrap.is-portrait .zs-btn { min-height: 44px !important; padding: 8px 12px; }      /* (a fingertip, over any app's smaller buttons on a desk) */
.zs-wrap.is-portrait .zs-btns { gap: 8px; }
.zs-wrap.is-portrait .zs-table .act, .zs-wrap.is-portrait .zs-palette .act { min-height: 44px; min-width: 44px; padding: 0 8px; }
.zs-wrap.is-portrait input.zs-editbox, .zs-wrap.is-portrait select.zs-editbox { height: 44px; margin: 0; font-size: 16px; }   /* (16 px: a phone does not zoom the page into a box) */
/* a scale under a value: a band of its own under the value, 44 px tall (the value itself also slides when dragged sideways) */
.zs-wrap.is-portrait .has-slide { padding-bottom: 44px !important; }
.zs-wrap.is-portrait .has-slide > .zs-slide { left: 8px; right: 8px; bottom: 20px; height: 4px; }
.zs-wrap.is-portrait .has-slide > .zs-slide::before { top: -20px; bottom: -20px; }
/* a link in the lettering: 44 px tall to a finger, drawn as before */
.zs-wrap.is-portrait .zs-sheet .zs-link { position: relative; }
.zs-wrap.is-portrait .zs-sheet .zs-link::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.zs-wrap.is-portrait .zs-time { font-size: 14px; }
.zs-wrap.is-portrait :is(.zs-time__play, .zs-time__speed, .zs-time__range) { min-height: 44px; }
.zs-wrap.is-portrait :is(.zs-time__play, .zs-time__speed) { min-width: 44px; }
/* the notes, then the title block the whole width at the foot */
.zs-wrap.is-portrait .zs-sheet__foot { grid-template-columns: minmax(0, 1fr) !important; min-height: 0 !important; }      /* (over an app's landscape layout of its foot) */
.zs-wrap.is-portrait .zs-sheet__notes { padding: 10px 10px 12px; }
.zs-wrap.is-portrait .zs-sheet__notes ol { padding-left: 20px; }
.zs-wrap.is-portrait .zs-sheet__notes li { letter-spacing: 0.02em; }
.zs-wrap.is-portrait .zs-tblock { border-left: 0; border-top: var(--pen-object) solid var(--ink); }
.zs-wrap.is-portrait .zs-tblock td { padding: 4px 8px 5px; white-space: normal; overflow-wrap: anywhere; }
.zs-wrap.is-portrait .zs-tblock .name .zs-tblock__title { font-size: max(var(--zs-fs), min(var(--zs-fs-t), calc(56cqw / (var(--zs-n, 8) * 0.66)))); }
.zs-wrap.is-portrait .zs-tblock .nav { min-height: 44px; min-width: 44px; padding: 0 8px; }
/* a curve with its points' table beside it (is-side, a desk's layout) stands on a phone as plot, then the table under it, the plot a
   shape of its own (2026-10-25: side by side the table left the plot about 30 px wide) */
.zs-wrap.is-portrait .zs-plate.is-aspect > .zs-plate__body:has(.zs-curve.is-side) { aspect-ratio: auto; height: auto; max-height: none; overflow: visible; }
.zs-wrap.is-portrait .zs-curve.is-side { display: flex; flex-direction: column; height: auto; gap: 8px; }
.zs-wrap.is-portrait .zs-curve.is-side > .zs-curve__plot { flex: none; height: min(78vw, 50svh); margin: 0 4px 0 40px; }
.zs-wrap.is-portrait .zs-curve.is-side > .zs-curve__tablewrap { max-height: none; overflow-x: auto; }
/* the curve editor opened over the sheet: over the screen */
.zs-wrap.is-portrait .zs-plate.zs-curve-shade { position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; z-index: 40; }
.zs-wrap.is-portrait .zs-plate.is-pop { position: fixed !important; left: 6px !important; right: 6px; top: 6svh !important; width: auto !important; height: 84svh !important; z-index: 41; background: var(--paper); }
.zs-wrap.is-portrait .zs-plate.is-pop > .zs-plate__body { flex: 1; min-height: 0; overflow: auto; }
/* the strip under a portrait sheet: Home is its mark, the Library its name, so the tabs have the width */
.zs-wrap.is-portrait .zs-tab.is-link span { display: none; }
.zs-wrap.is-portrait .zs-tab.is-link { padding: 0 12px !important; min-width: 44px; justify-content: center; }
.zs-wrap.is-portrait .zs-tabs.is-rows .zs-tab.is-pin .zs-tabs__group { display: none; }
.zs-wrap.is-portrait .zs-tabs__all { padding: 0 8px !important; }
/* the Library on a portrait sheet: where the folder stands over its buttons, a row's words wrapped in its cells */
.zs-wrap.is-portrait .zl-head { flex-direction: column; gap: 10px; padding-bottom: 10px; }
.zs-wrap.is-portrait .zl-do { max-width: none; justify-content: flex-start; gap: 8px; }
.zs-wrap.is-portrait .zl-kind td { white-space: normal; overflow-wrap: break-word; }
.zs-wrap.is-portrait .zl-kind th { white-space: nowrap; }
.zs-wrap.is-portrait .zl-kind td.zs-acts { white-space: normal; }

/* ---- a phone, 2026-11-01 (shared/site-plan.md, lane A; SHEETS.md 16, "A phone, 2026-11-01") ----
   The Library's box does not cut what runs past its edge on a portrait sheet: its tables are blocks (below) and the
   comparison scrolls on its own, so nothing in it is out of reach. */
.zs-wrap.is-portrait .zl-root { overflow: visible; }
.zs-wrap.is-portrait .zl-kind .zl-tick input { width: 24px; height: 24px; }
/* never a word broken inside itself on a phone: a table that cannot fit its words is drawn as blocks instead (sheet.js stackTables) */
.zs-wrap.is-portrait .zs-table td { white-space: normal; overflow-wrap: break-word; word-break: normal; hyphens: manual; }   /* (a value's words wrap in its cell; a word is never broken inside itself) */
/* a table as blocks: each row a small ruled block, its item number in a column at its left as on a parts list, each cell a
   line with its column's head in front, lettered as the heads are; the row's actions at its foot */
.zs-wrap.is-portrait table.zs-table.is-stack { display: block; width: 100%; }
.zs-wrap.is-portrait table.zs-table.is-stack > caption { display: block; white-space: normal; }
.zs-wrap.is-portrait table.zs-table.is-stack > :is(thead, tbody, tfoot) { display: block; }
.zs-wrap.is-portrait table.zs-table.is-stack tr { display: block; position: relative; min-height: 44px; padding: 4px 8px 5px; border: var(--pen-thin) solid var(--ink); }
.zs-wrap.is-portrait table.zs-table.is-stack tr + tr { border-top-width: 0; }
.zs-wrap.is-portrait table.zs-table.is-stack tr.zs-stack-head { display: none; }
.zs-wrap.is-portrait table.zs-table.is-stack tr.zs-stack-head + tr { border-top-width: var(--pen-thin); }
.zs-wrap.is-portrait table.zs-table.is-stack tr:has(> td.item) { padding-left: 54px; }
.zs-wrap.is-portrait table.zs-table.is-stack :is(td, th) { display: block; width: auto; max-width: none; min-width: 0; height: auto; border: 0; padding: 3px 0; white-space: normal; text-align: left; overflow-wrap: break-word; background: none; }
.zs-wrap.is-portrait table.zs-table.is-stack tr.is-on, .zs-wrap.is-portrait table.zs-table.is-stack tr.is-chosen { background: var(--fill-section); }
.zs-wrap.is-portrait table.zs-table.is-stack td.item { position: absolute; left: 0; top: 0; bottom: 0; width: 46px; display: flex; align-items: center; justify-content: center; padding: 0; border-right: var(--pen-thin) solid var(--ink); }
.zs-wrap.is-portrait table.zs-table.is-stack td[data-zs-th] { position: relative; padding-left: calc(36% + 10px); min-height: 26px; }
.zs-wrap.is-portrait table.zs-table.is-stack td[data-zs-th]::before { content: attr(data-zs-th); position: absolute; left: 0; top: 5px; width: 36%; font-size: var(--zs-fs-s); line-height: 1.25; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-light); overflow-wrap: normal; }
.zs-wrap.is-portrait table.zs-table.is-stack td[data-zs-th].zs-stack-over { padding-left: 0; display: block; }
.zs-wrap.is-portrait table.zs-table.is-stack td[data-zs-th].zs-stack-over::before { position: static; display: block; width: auto; transform: none; padding-top: 2px; }
.zs-wrap.is-portrait table.zs-table.is-stack td.zs-stack-title { padding-left: 0; font-weight: 700; letter-spacing: 0.02em; }
.zs-wrap.is-portrait table.zs-table.is-stack td.zs-stack-title::before { content: none; }
.zs-wrap.is-portrait table.zs-table.is-stack td.zs-stack-empty { display: none; }
.zs-wrap.is-portrait table.zs-table.is-stack td a { overflow-wrap: anywhere; }   /* (a link's address or a file's name is not a word: it may break where it must, so the block never runs past the sheet) */
.zs-wrap.is-portrait table.zs-table.is-stack td:has(> :is(.zs-link, .zs-edit)) { display: flex; flex-wrap: wrap; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }   /* (a link or a value in a cell: a fingertip tall) */
.zs-wrap.is-portrait table.zs-table.is-stack td:has(> :is(.zs-link, .zs-edit))::before { top: 50%; transform: translateY(-50%); }
.zs-wrap.is-portrait table.zs-table.is-stack td.zs-status { width: auto; }
.zs-wrap.is-portrait table.zs-table.is-stack td.zl-tick { display: flex; align-items: center; min-height: 44px; padding-top: 0; padding-bottom: 0; text-align: left; }
.zs-wrap.is-portrait table.zs-table.is-stack td.zl-tick::before { top: 50%; transform: translateY(-50%); }
.zs-wrap.is-portrait table.zs-table.is-stack td.zs-acts { display: flex; flex-wrap: wrap; gap: 0 14px; padding: 2px 0 0; margin-top: 3px; border-top: var(--pen-faint) dashed var(--rule); text-align: left; }
.zs-wrap.is-portrait table.zs-table.is-stack td.zs-acts:empty { display: none; }
.zs-wrap.is-portrait table.zs-table.is-stack td.zs-acts .act { padding: 0 2px; }
.zs-wrap.is-portrait table.zs-table.is-stack td[colspan] { padding-left: 0; }
.zs-wrap.is-portrait table.zs-table.is-stack .zs-meter { left: calc(36% + 10px); right: 0; bottom: 0; }
.zs-wrap.is-portrait table.zs-table.is-stack .zs-pic { height: 48px; max-width: 100%; }
.zs-wrap.is-portrait table.zs-table.is-stack tr.zs-head { border-left-width: 0; border-right-width: 0; padding-left: 0; padding-top: 10px; }
.zs-wrap.is-portrait table.zs-table.is-stack tr.zs-acts { border-style: dashed; }
/* a plate with more to one side than shows: a shadow and an arrow at that edge (sheet.js edges); the arrow scrolls it on */
.zs-edge { position: absolute; z-index: 4; margin: 0 !important; width: 26px; padding: 0; border: 0; border-radius: 0; font: 700 18px/1 var(--mono); color: var(--dim); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.zs-edge[hidden] { display: none; }
.zs-edge.is-r { background: linear-gradient(270deg, color-mix(in srgb, var(--paper) 92%, transparent) 30%, transparent); box-shadow: inset -7px 0 7px -6px rgba(10, 16, 24, 0.35); }
.zs-edge.is-l { background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 92%, transparent) 30%, transparent); box-shadow: inset 7px 0 7px -6px rgba(10, 16, 24, 0.35); }
.zs-edge.is-graph { pointer-events: none; }
.zs-pages.is-paper .zs-edge, .zs-pages.is-paper .zs-desk__fit { display: none; }
/* a comparison or a curve's points that scroll sideways: the same shadow at the edge with more past it */
.zs-wrap.is-portrait :is(.zl-cmp__table, .zs-curve__tablewrap) {
  background: linear-gradient(90deg, var(--paper) 30%, transparent) left / 22px 100% no-repeat local, linear-gradient(270deg, var(--paper) 30%, transparent) right / 22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(10, 16, 24, 0.28), transparent) left / 9px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgba(10, 16, 24, 0.28), transparent) right / 9px 100% no-repeat scroll;
}
/* a drawing laid out for a desk: its FIT (the whole drawing across the plate, or the desk's size); two fingers zoom it */
.zs-wrap.is-portrait .zs-plate.is-desk > .zs-plate__body { touch-action: pan-x pan-y; }
/* the strip under a portrait sheet (2026-11-01): the list and Home are one cell (Home is the list's first line), the Library is a
   tab of its step, the step row says "STEP 2 OF 5 · SET UP" with arrows to the others, and the tab on show has the width of the
   lower row in the middle, its neighbours showing at either side (swiped, or pressed) */
.zs-wrap.is-portrait .zs-tabs__links, .zs-tabs.is-phone .zs-tabs__pins { display: none; }
.zs-wrap.is-portrait .zs-tabs__all { min-width: 64px; justify-content: center; }
.zs-tabs.is-phone .zs-tabs__line > .zs-tabs__go { display: none !important; }
.zs-tabs.is-phone .zs-tabs__strip { scroll-snap-type: x proximity; }
.zs-tabs.is-phone.is-over .zs-tabs__strip { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent); }
.zs-tabs.is-phone .zs-tab { scroll-snap-align: center; }
.zs-tabs.is-phone .zs-tab.is-on { max-width: calc(100% - 60px); }
.zs-tabs.is-phone .zs-tab.is-on span { text-overflow: ellipsis; }
.zs-tabs.is-phone .zs-tabs__groups .zs-tabs__group.is-on { gap: 0; }
.zs-tabs.is-phone .zs-tabs__group .zs-tabs__step, .zs-tabs.is-phone .zs-tabs__group .zs-tabs__of { font-size: inherit; font-weight: 400; letter-spacing: inherit; opacity: 0.8; white-space: pre; }
.zs-tabs.is-phone .zs-tabs__group b { margin-left: 0.6em; overflow: hidden; text-overflow: ellipsis; }
.zs-tabs.is-phone .zs-tabs__group i { font-style: normal; color: inherit; opacity: 1; }
/* a phone on its side (under 500 px of height): the step row and the tabs side by side, one row of 45 px, so the sheet keeps the height */
.zs-wrap.is-portrait.is-short .zs-tabs.is-phone.is-rows { height: 45px; }
.zs-wrap.is-portrait.is-short .zs-tabs.is-phone .zs-tabs__rows { flex-direction: row; }
.zs-wrap.is-portrait.is-short .zs-tabs.is-phone .zs-tabs__top { flex: 0 0 auto; width: min(46%, 360px); height: auto; border-bottom: 0; border-right: var(--pen-object) solid var(--ink); }

/* ---- icons on the sheets (2026-10-17; icons/README.md): fewer words, the drawing says what a thing is ----
   A tab: its number, its icon, its name. A box of a graph: the icon beside its title, two lines tall. A plate's caption and
   the title block: the icon before the name. The pens are tokens.css's .zu-icon. */
.zs-tab .zs-tab__icon.zu-icon { width: 15px; height: 15px; stroke: none; }
.zs-tab.has-icon { gap: 5px; }
.zs-tab:not(.is-on) .zs-tab__icon.zu-icon { color: var(--zs-strip-ink, var(--ink-light)); }
.zs-tab:not(.is-on):hover .zs-tab__icon.zu-icon { color: var(--ink); }
.zs-node.has-icon .zs-node__t { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.45cqw; align-items: center; }
.zs-graph .zs-node .zs-node__icon { position: static; inset: auto; pointer-events: none; }   /* (not the joins' drawing, which .zs-graph svg places over the plate) */
.zs-node.has-icon .zs-node__t > .zs-node__icon { grid-row: 1 / span 3; width: calc(var(--zs-fs) * 2.1); height: calc(var(--zs-fs) * 2.1); align-self: start; margin: 0.1em 0; }
.zs-node.has-icon .zs-node__t > :not(.zs-node__icon) { grid-column: 2; }
.zs-node.has-icon .zs-node__t > .zs-node__x { grid-row: 1; justify-self: end; }
.zs-node__hint { font-style: italic; }
.zs-plate__icon { width: calc(var(--zs-fs-s) * 1.5); height: calc(var(--zs-fs-s) * 1.5); margin-right: 0.45cqw; vertical-align: -0.35em; }
.zs-plate__cap .zs-plate__hint { font-style: italic; }
.zs-tblock .name .zs-tblock__title .zs-tblock__icon { width: 0.92em; height: 0.92em; margin-right: 0.28em; vertical-align: -0.1em; }
.zs-tab.is-pin .zs-tab__icon { display: none; }   /* a pinned tab (Library) is two lines already: its step above its name */
/* Simple: each note one line, the whole of them on a press; Advanced and paper: whole */
.zs-sheet__notes.is-short { cursor: pointer; }
.zs-sheet__notes.is-short:not(.is-open) ol { padding-left: 0; list-style-position: inside; }
.zs-sheet__notes.is-short:not(.is-open) li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zs-sheet__notes.is-short h2::after { content: ' \25B8'; color: var(--ink-light); }
.zs-sheet__notes.is-short.is-open h2::after { content: ' \25BE'; }
.zs-sheet__notes.is-short:focus-visible { outline: var(--pen-border) solid var(--hot); outline-offset: -2px; }
@media print { .zs-sheet__notes.is-short li { white-space: normal !important; } .zs-sheet__notes.is-short h2::after { content: none; } }

/* ZuTouch.twoFinger's hint (sheet.js; the site's one gesture rule, 2026-11-01): a moment's label over the drawing */
.zu-touch-hint { position: fixed; z-index: 90; transform: translate(-50%, 0); padding: 9px 14px; font: 700 12.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); background: var(--ink); border: var(--pen-object) solid var(--paper); box-shadow: var(--shadow-pop); pointer-events: none; opacity: 0; transition: opacity 0.18s; white-space: nowrap; }
.zu-touch-hint.is-on { opacity: 0.94; }
@media (prefers-reduced-motion: reduce) { .zu-touch-hint { transition: none; } }

/* ---- the phone sheet, calmer (2026-11-01; the owner on a phone: "so cluttered it's hard to make out anything") ----
   Still a drawing sheet (the frame, the plates and their captions, the title block), with less of everything around the
   reading: no zone letters down the sides (the numbers across the top stay as the cue), the frame close to the screen
   edge, one 45 px strip instead of two rows, prose and table text in the sans (long lines of spaced capitals in the
   mono wrapped into tall blocks), capitals spaced less, and tables ruled across only. Under 600 px wide. */
@media (max-width: 600px) {
  .zs-wrap.is-portrait .zs-sheet { box-shadow: none; }
  .zs-wrap.is-portrait .zs-sheet__in { padding: 16px 3px 3px; --zs-fs: 14.5px; --zs-fs-s: 12px; --zs-fs-l: 16px; }
  .zs-wrap.is-portrait .zs-sheet__zone.y, .zs-wrap.is-portrait .zs-sheet__zone.x.b { display: none; }
  .zs-wrap.is-portrait .zs-sheet__zone.x { left: 3px; right: 3px; height: 16px; font-size: 9px; color: var(--ink-faint); }
  .zs-wrap.is-portrait .zs-sheet__frame { border-width: var(--pen-object); }
  .zs-wrap.is-portrait .zs-plate { padding: 10px 10px 8px; }
  /* reading text in the sans; the mono stays for names, numbers, captions, buttons and the title block */
  .zs-wrap.is-portrait .zs-plate__body { font-family: var(--sans); letter-spacing: 0; }
  .zs-wrap.is-portrait .zs-plate__body :is(button, .zs-btn, .zs-btns, select, input, b, strong, h1, h2, h3, th, caption, td.num, .num, .zs-val, code, pre, textarea, .cm-editor) { font-family: var(--mono); }
  .zs-wrap.is-portrait .zs-plate__cap, .zs-wrap.is-portrait .zs-btn, .zs-wrap.is-portrait .zs-table th, .zs-wrap.is-portrait .zs-table caption { letter-spacing: 0.03em; }
  .zs-wrap.is-portrait .zs-sheet__notes li { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
  /* tables: ruled across, not boxed in */
  .zs-wrap.is-portrait .zs-table:not(.is-stack) { border-collapse: collapse; border: 0; }
  .zs-wrap.is-portrait .zs-table:not(.is-stack) :is(td, th) { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; border-bottom: var(--pen-thin) solid var(--ink-faint) !important; }
  .zs-wrap.is-portrait .zs-table:not(.is-stack) th { border-bottom-color: var(--ink) !important; }
  /* the strip: the step and the sheet side by side in one row, as on a phone on its side */
  .zs-wrap.is-portrait .zs-tabs.is-phone.is-rows { height: 45px; }
  .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tabs__rows { flex-direction: row; }
  .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tabs__top { flex: 0 0 auto; width: 44%; height: auto; border-bottom: 0; border-right: var(--pen-object) solid var(--ink); }
  .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tabs__group :is(.zs-tabs__step, .zs-tabs__of) { display: none; }
  .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tabs__group b { margin-left: 0; }
  .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tabs__go.is-gprev, .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tabs__go.is-gnext { width: 30px; }
  .zs-wrap.is-portrait .zs-tabs__all { min-width: 58px; }
  .zs-wrap.is-portrait .zs-tabs.is-phone :is(.zs-tabs__group, .zs-tab) { letter-spacing: 0.02em; }
  .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tabs__group i, .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tab__mark { display: none; }
  .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tabs__group { padding: 0 6px !important; }
  .zs-wrap.is-portrait .zs-tabs.is-phone .zs-tab { padding-left: 10px; padding-right: 10px; }
  /* the Library's folder line: what it is in one line; the why is the button's tooltip and the Library's README */
  .zs-wrap.is-portrait .zl-where > span { display: none; }
  /* a stacked block's labels: plain small sans, so one rarely takes two lines (a wrapped label ran into the next row) */
  .zs-wrap.is-portrait table.zs-table.is-stack td[data-zs-th]::before { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
  .zs-wrap.is-portrait .zl-head { flex-wrap: wrap; gap: 8px; }
  .zs-wrap.is-portrait .zl-do { max-width: none; justify-content: flex-start; gap: 6px; }
  .zs-wrap.is-portrait .zs-table td.unit { white-space: nowrap; }
  .zs-wrap.is-portrait .zl-do .zs-btn, .zs-wrap.is-portrait .zl-extra .zs-btn, .zs-wrap.is-portrait .zl-cmp__top .zs-btn { min-height: 44px; padding: 6px 12px; font-size: 12.5px; }
}