/* CDAN UI kit for the web (web/ui; user, 24 Oct 2026: "Lots of the buttons have visual issues, can we actually start
 * having standardised reusable UI"). The one place the controls are drawn: every window makes its buttons, pop-ups,
 * fields, check boxes, lists, tabs, alerts, progress bars and the watch through window.CUI (ui.js), which puts these
 * classes on them. The Tab5's toolkit, mac/cdanui (SPEC-cdanui-v2.md), is the model: the same System 7 look and,
 * where they fit, the same names.
 *
 * Everything is in Mac pixels, calc(N * var(--px)), and --px is a whole number of device pixels (app.js applyScale),
 * so every edge is sharp. Rounded controls are pixel art drawn as flat background rectangles placed from the nearest
 * edge (tools/ui_shapes.py writes them, below): the corners are the same at any width, nothing is a scaled picture.
 * No rule here needs a style attribute or an inline script (the page's Content-Security-Policy). The ES5 build
 * (legacy-build) writes every custom property out for the oldest TV browsers, so a state never relies on changing
 * one: each state's look is spelled out. Labels are never underlined; only a real link is (cui-link, a[href]). */

/* ---- the design tokens (SPEC-design-system.md, #327): every colour, size and space the kit draws with ------------
 * One Mac pixel is --px (style.css, snapped by app.js). Spaces step 2, 4, 6, 8, 12, 16, 24 Mac pixels. A window, an app
 * or a test reads these names; no rule writes a number the token already says. The ES5 build writes them out (each
 * token's first value), so a token is never redefined per state, only per device below. The fonts are style.css's
 * (--chicago, --geneva, --monaco), the only place a font file is named. */
:root {
  /* colour: System 7's black and white, its greys, and its eight colours for the few places colour means something */
  --cui-ink: #000; --cui-paper: #fff; --cui-dim: #888; --cui-quiet: #444; --cui-rule: #aaa; --cui-faint: #ddd;
  --cui-track: #ccc; --cui-desk: #777;
  --cui-red: #dd0806; --cui-orange: #ff6403; --cui-yellow: #fcf305; --cui-green: #1fb714; --cui-blue: #0000d4;
  --cui-near: #ffc864; --cui-full: #ff6b5e; --cui-warn-tint: #fff4d6; --cui-error-tint: #ffe0dc;
  /* a line a change adds (its removed line is --cui-error-tint), and a note pinned to a line (Studio's diffs) */
  --cui-ok-tint: #dff5d8; --cui-note-tint: #ffffcc;
  /* Rainbow (#380): Oscar's magic, a colour choice like the others; the old Apple's six colours, as Present's Six Colours */
  --cui-rainbow-1: #61bb46; --cui-rainbow-2: #fdb827; --cui-rainbow-3: #f5821f; --cui-rainbow-4: #e03a3e;
  --cui-rainbow-5: #963d97; --cui-rainbow-6: #009ddc;
  --cui-rainbow: linear-gradient(90deg, #61bb46 0%, #fdb827 20%, #f5821f 40%, #e03a3e 60%, #963d97 80%, #009ddc 100%);
  --cui-secure: #e34d03; --cui-secure-tint: #ffe9de; --cui-secure-wash: rgba(227, 77, 3, .16);
  --cui-oscar-coral: #ff6b6b; --cui-oscar-coral-faint: #ff9a97;   /* Oscar's loader only (#532): BRAND_CORAL, coralHover */
  --cui-soft: #1f5fd6; --cui-soft-tint: #e6eeff;
  --cui-secure-mark: #ff8c00; --cui-secure-mark-wash: rgba(255, 140, 0, .14);   /* #435: the underline, plain orange */
  /* WhatsApp's own green, under a message that went that way; always with its WhatsApp tag (the Tab5's Messages) */
  --cui-wa-tint: #dcf8c6;
  /* the white veil over the part of a picture outside what is chosen (a film strip's trim) */
  --cui-veil: rgba(255, 255, 255, .55);
  /* the grey laid over the cells of a range chosen in a grid (Graph), with the range's frame round it */
  --cui-shade: rgba(0, 0, 0, .12);
  /* type: Chicago for every control, title and menu; Geneva for text; Monaco for code; sizes in Mac pixels */
  --cui-font-ui: var(--chicago); --cui-font-text: var(--geneva); --cui-font-code: var(--monaco);
  --cui-text-xs: calc(9 * var(--px)); --cui-text-sm: calc(10 * var(--px)); --cui-text-md: calc(12 * var(--px));
  --cui-text-lg: calc(14 * var(--px)); --cui-text-xl: calc(18 * var(--px));
  /* space */
  --cui-space-2: calc(2 * var(--px)); --cui-space-4: calc(4 * var(--px)); --cui-space-6: calc(6 * var(--px));
  --cui-space-8: calc(8 * var(--px)); --cui-space-12: calc(12 * var(--px)); --cui-space-16: calc(16 * var(--px));
  --cui-space-24: calc(24 * var(--px));
  /* the spacing rules: between controls in a row, under a button or a row of them (#326), round a window's content */
  --cui-gap-row: calc(6 * var(--px)); --cui-space-under: calc(6 * var(--px)); --cui-bar-pad: calc(3 * var(--px)); --cui-pad-win: calc(8 * var(--px)) calc(10 * var(--px));
  /* sizes: glyphs, controls */
  --cui-icon-sm: calc(12 * var(--px)); --cui-icon: calc(16 * var(--px)); --cui-icon-lg: calc(32 * var(--px));
  /* #536: a glyph is drawn only at a whole multiple of its own 16 x 16 pixels; in a small slot (12) it is drawn at 16
     and pulled in 2 on every side, so it takes 12 and its clear edge overlaps (shrunk to 12 it lost rows: rough) */
  --cui-icon-sm-inset: calc(-2 * var(--px));
  --cui-control-h: calc(20 * var(--px)); --cui-control-h-sm: calc(16 * var(--px)); --cui-control-h-lg: calc(28 * var(--px));
  --cui-field-h: calc(22 * var(--px)); --cui-row-h: calc(22 * var(--px));
  /* lines, corners and shadows: one Mac pixel, square or the button's pixel-art round rect, one hard shadow */
  --cui-line: var(--px); --cui-radius: 0; --cui-radius-tag: calc(3 * var(--px)); --cui-radius-bubble: calc(6 * var(--px));
  --cui-shadow: var(--px) var(--px) 0 #000; --cui-focus: var(--px) dotted #000;
}

/* ---- a glyph: 16 Mac pixels unless where it sits says otherwise. The glyphs are viewBox-only SVGs, so without this a
 * glyph with no rule of its own fills the width it is given (the giant caution of Oscar's Allow, 28 Oct) */

.cui-icon { width: var(--cui-icon); height: var(--cui-icon); flex: 0 0 auto; image-rendering: pixelated; }

/* ---- push buttons (cdanui CUI_Button, R65-R70) ------------------------------------------------------------- */

.cui-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(4 * var(--px));
  box-sizing: border-box; height: calc(20 * var(--px)); min-width: calc(58 * var(--px)); margin: 0;
  padding: 0 calc(10 * var(--px)); border: 0; border-radius: 0; box-shadow: none; outline: none;
  font-family: var(--chicago); font-size: calc(12 * var(--px)); font-weight: normal; line-height: 1;
  color: var(--cui-ink); text-decoration: none; white-space: nowrap; vertical-align: middle;
  cursor: default; user-select: none; -webkit-user-select: none; -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent; flex: 0 0 auto;
}
.cui-btn::-moz-focus-inner { border: 0; padding: 0; }
.cui-btn > .cui-label { display: block; overflow: hidden; text-overflow: ellipsis; text-decoration: none;
  line-height: 1.3; }   /* #536: room for a descender (the y of Deny was cut by a line one em high) */
.cui-btn > .cui-icon, .cui-bevel > .cui-icon {
  display: block; flex: 0 0 auto; width: var(--cui-icon); height: var(--cui-icon); image-rendering: pixelated;
  pointer-events: none;
}
.cui-btn.cui-on, .cui-btn:active:not(:disabled):not(.cui-off) { color: var(--cui-paper); }
.cui-btn.cui-on > .cui-icon, .cui-btn:active:not(:disabled):not(.cui-off) > .cui-icon { filter: invert(1); }
/* latched and pressed: the normal look again while a finger is on it (R65) */
.cui-btn.cui-on:active:not(:disabled) { color: var(--cui-ink); }
/* small: beside a name or in a busy bar (Stop, Retry): Geneva's compact words, but the one button height (#564, the
   user, 31 Oct: "lots of buttons don't align in size and placement across the app"): every push button is
   --cui-control-h high (20, 28 on a phone, 24 on a tablet), so buttons in a row are the same size and share a centre
   line; small only narrows the words */
.cui-btn.cui-small { height: var(--cui-control-h); min-width: calc(36 * var(--px)); padding: 0 calc(6 * var(--px));
  font-family: var(--geneva); font-size: calc(10 * var(--px)); font-weight: bold; }
/* inside a row of a list or table (a row 22 high) the small button keeps the list row's own 16, as System 7's list
   rows did; every button in such a row is small, so the row still shares one height */
tr .cui-btn.cui-small, .cui-row .cui-btn.cui-small, .srow .cui-btn.cui-small { height: var(--cui-control-h-sm); }
tr .cui-btn.cui-small.cui-iconly, .cui-row .cui-btn.cui-small.cui-iconly, .srow .cui-btn.cui-small.cui-iconly { width: calc(20 * var(--px)); }
/* large: the touch size, 28 Mac px high (R70) */
.cui-btn.cui-large { height: calc(28 * var(--px)); min-width: calc(64 * var(--px)); padding: 0 calc(12 * var(--px)); }
/* a button with only a glyph: one size everywhere (#564), 30 x 20, small or not */
.cui-btn.cui-iconly { min-width: 0; width: calc(30 * var(--px)); padding: 0; }
.cui-btn.cui-wide { width: 100%; }

/* the default button: the 3 px ring with a white gap, 4 px outside it. Room is kept above, below and before it, not
   after (#564): its frame lines up with the buttons above and below it, the ring standing out past the row's edge as
   System 7 drew it */
.cui-default { margin: calc(4 * var(--px)) 0 calc(4 * var(--px)) calc(4 * var(--px)); }
/* the buttons beside it keep the same room above and below, so their frames share its line whether the row is centred
   or aligned to its foot (the chat's attach beside Send stood 4 lower) */
:where(*):has(> .cui-default) > .cui-btn:not(.cui-default) { margin-top: calc(4 * var(--px)); margin-bottom: calc(4 * var(--px)); }
.cui-default::before {
  content: ""; position: absolute; left: calc(-4 * var(--px)); top: calc(-4 * var(--px)); right: calc(-4 * var(--px));
  bottom: calc(-4 * var(--px)); pointer-events: none;
}

/* disabled and dimmed (R66): the frame stays solid; the label and glyph in System 7's grey, every other pixel */
.cui-btn:disabled, .cui-btn.cui-dim, .cui-bevel:disabled, .cui-bevel.cui-dim { color: var(--cui-dim); }
.cui-btn:disabled > .cui-icon, .cui-btn.cui-dim > .cui-icon, .cui-bevel:disabled > .cui-icon, .cui-bevel.cui-dim > .cui-icon { opacity: .4; }
@supports ((-webkit-mask-image: url("dim.svg")) or (mask-image: url("dim.svg"))) {
  .cui-btn:disabled, .cui-btn.cui-dim, .cui-bevel:disabled, .cui-bevel.cui-dim { color: var(--cui-ink); }
  .cui-btn:disabled > *, .cui-btn.cui-dim > *, .cui-bevel:disabled > *, .cui-bevel.cui-dim > *,
  .cui-check.cui-disabled > span, .cui-radios.cui-disabled .cui-radiolabel, .cui-segb:disabled > * {
    opacity: 1;
    -webkit-mask-image: url("dim.svg"); mask-image: url("dim.svg");
    -webkit-mask-size: calc(2 * var(--px)) calc(2 * var(--px)); mask-size: calc(2 * var(--px)) calc(2 * var(--px));
    -webkit-mask-repeat: repeat; mask-repeat: repeat;
  }
  /* a glyph is drawn grey instead: the checker would take every pixel of a one-pixel diagonal (the pencil) */
  .cui-btn:disabled > .cui-icon, .cui-btn.cui-dim > .cui-icon, .cui-bevel:disabled > .cui-icon, .cui-bevel.cui-dim > .cui-icon,
  .cui-segb:disabled > .cui-icon {
    -webkit-mask-image: none; mask-image: none; opacity: .35;
  }
}

/* keyboard focus: a dotted frame on a computer; a TV gets its own big ring (style.css, body.tv :focus) */
.cui-btn:focus-visible, .cui-bevel:focus-visible, .cui-segb:focus-visible, .cui-tab:focus-visible, .cui-plain:focus-visible,
.cui-link:focus-visible, .cui-sort:focus-visible {
  outline: var(--cui-focus); outline-offset: calc(2 * var(--px));
}
.cui-default:focus-visible { outline-offset: calc(6 * var(--px)); }
/* a disabled default button: its ring in the grey too */
.cui-default:disabled::before { -webkit-mask-image: url("dim.svg"); mask-image: url("dim.svg");
  -webkit-mask-size: calc(2 * var(--px)) calc(2 * var(--px)); mask-size: calc(2 * var(--px)) calc(2 * var(--px)); }

/* ---- bevel buttons with a glyph (the player's bar, cdanui's glyph buttons) ------------------------------------ */

.cui-bevel {
  position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  box-sizing: border-box; width: calc(28 * var(--px)); height: calc(22 * var(--px)); margin: 0; padding: 0;
  border: 0; border-radius: 0; box-shadow: none; outline: none; color: var(--cui-ink); line-height: 0;
  cursor: default; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.cui-bevel::-moz-focus-inner { border: 0; padding: 0; }
.cui-bevel.cui-on > .cui-icon, .cui-bevel:active:not(:disabled):not(.cui-off) > .cui-icon { filter: invert(1); }
.cui-bevel.cui-on:active:not(:disabled) > .cui-icon { filter: none; }
.cui-bevel.cui-small { width: calc(22 * var(--px)); height: calc(20 * var(--px)); }
.cui-bevel.cui-large { width: calc(44 * var(--px)); height: calc(28 * var(--px)); }

/* ---- plain pressables: a tile, a row, a crumb, an icon; the kit's button with no frame of its own --------- */

.cui-plain {
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; outline: none;
  font: inherit; color: inherit; text-align: inherit; text-decoration: none; line-height: inherit;
  cursor: default; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.cui-plain::-moz-focus-inner { border: 0; padding: 0; }

/* ---- tiles (#327): a framed square pressable, a glyph or picture with its name; inverted when on ------------------ */

.cui-tile { position: relative; box-sizing: border-box; min-width: 0; overflow: hidden; border: var(--cui-line) solid var(--cui-ink);
  border-radius: var(--cui-radius); background: var(--cui-paper); color: var(--cui-ink); }
.cui-tilestack { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--cui-space-2);
  padding: var(--cui-space-4) var(--cui-space-2); text-align: center; }
.cui-tilerow { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--cui-space-6);
  align-items: center; padding: var(--cui-space-4) var(--cui-space-6); text-align: left; }
.cui-tilerow > .cui-icon { grid-row: 1 / 3; }
.cui-tilename { font-family: var(--cui-font-ui); font-size: var(--cui-text-sm); max-width: 100%; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cui-tilestack > .cui-tilename { font-family: var(--cui-font-text); font-size: var(--cui-text-xs); }
.cui-tilesub { font-family: var(--cui-font-text); font-size: var(--cui-text-xs); color: var(--cui-quiet); min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cui-tile.cui-on, .cui-tile:active:not(:disabled) { background: var(--cui-ink); color: var(--cui-paper); }
.cui-tile.cui-on .cui-tilesub, .cui-tile:active:not(:disabled) .cui-tilesub { color: var(--cui-paper); }
.cui-tile.cui-on > .cui-icon, .cui-tile:active:not(:disabled) > .cui-icon { filter: invert(1); }
.cui-tile:disabled { color: var(--cui-dim); border-style: dotted; }
.cui-tile:disabled > .cui-icon { opacity: .35; }
.cui-tile:focus-visible { outline: var(--cui-focus); outline-offset: var(--cui-space-2); }
/* a word that does something, inside text: chosen inverted, as a menu item is */
.cui-plain.cui-word { padding: 0 calc(3 * var(--px)); font-family: var(--chicago); }
.cui-plain.cui-word:active, .cui-plain.cui-word.cui-on { background: var(--cui-ink); color: var(--cui-paper); }

/* a real link: the only underlined words */
.cui-link {
  display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left;
  text-decoration: underline; text-underline-offset: calc(2 * var(--px)); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.cui-link:active { background: var(--cui-ink); color: var(--cui-paper); }

/* ---- check boxes and radio buttons ---------------------------------------------------------------------------- */

.cui-check { display: inline-flex; align-items: center; gap: calc(6 * var(--px)); cursor: default; }
.cui-check > span, .cui-radiolabel { font-size: calc(12 * var(--px)); }
input.cui-checkbox, input.cui-radio {
  -webkit-appearance: none; appearance: none; flex: 0 0 auto; margin: 0; padding: 0; border-radius: 0; outline: none;
  width: calc(12 * var(--px)); height: calc(12 * var(--px)); cursor: default; vertical-align: middle;
  background-repeat: no-repeat; background-position: center; image-rendering: pixelated;
}
input.cui-checkbox { border: var(--px) solid var(--cui-ink); background-color: var(--cui-paper); }
input.cui-checkbox:checked { background-image: url("check-x.svg"); background-size: calc(10 * var(--px)) calc(10 * var(--px)); }
/* while pressed, a doubled frame, as System 7 tracks it */
input.cui-checkbox:active:not(:disabled) { box-shadow: inset 0 0 0 var(--px) var(--cui-ink); }
input.cui-radio { border: 0; background-color: transparent; background-image: url("radio.svg");
  background-size: calc(12 * var(--px)) calc(12 * var(--px)); }
input.cui-radio:checked { background-image: url("radio-on.svg"); }
input.cui-radio:active:not(:disabled) { background-image: url("radio-down.svg"); }
input.cui-radio:checked:active:not(:disabled) { background-image: url("radio-on-down.svg"); }
input.cui-checkbox:disabled, input.cui-radio:disabled { opacity: .5; }
input.cui-checkbox:focus-visible, input.cui-radio:focus-visible { outline: var(--cui-focus); outline-offset: calc(2 * var(--px)); }
.cui-radios { display: flex; flex-direction: column; gap: calc(4 * var(--px)); margin: 0; padding: 0; border: 0; }
.cui-radios.cui-across { flex-direction: row; flex-wrap: wrap; gap: calc(4 * var(--px)) calc(12 * var(--px)); }

/* ---- pop-up menus and the menus they open ---------------------------------------------------------------------- */

.cui-popup {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; display: inline-flex; align-items: center;
  height: calc(19 * var(--px)); max-width: 100%; min-width: calc(56 * var(--px)); margin: 0 var(--px) var(--px) 0;
  padding: 0 calc(22 * var(--px)) 0 calc(6 * var(--px));
  font-family: var(--chicago); font-size: calc(12 * var(--px)); line-height: 1; color: var(--cui-ink); text-align: left;
  border: var(--px) solid var(--cui-ink); border-radius: 0; box-shadow: var(--cui-shadow); outline: none;
  background: var(--cui-paper) url("tri.svg") no-repeat right calc(6 * var(--px)) center / calc(7 * var(--px)) calc(4 * var(--px));
  image-rendering: pixelated; cursor: default; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cui-popup::-ms-expand { display: none; }
.cui-popup:active:not(:disabled), .cui-popup.cui-on { background-color: var(--cui-ink); color: var(--cui-paper);
  background-image: none; }
.cui-popup:disabled { color: var(--cui-dim); }
.cui-popup:focus-visible { outline: var(--cui-focus); outline-offset: calc(2 * var(--px)); }
.cui-popup .cui-icon { width: var(--cui-icon); height: var(--cui-icon); image-rendering: pixelated; display: block; }
.cui-popup.cui-on .cui-icon { filter: invert(1); }
.cui-popup option { font-family: var(--geneva); }

.cui-menu {
  position: fixed; z-index: 9000; display: flex; flex-direction: column; box-sizing: border-box;
  min-width: calc(120 * var(--px)); max-width: min(92vw, calc(360 * var(--px))); max-height: calc(100vh - 8px);
  overflow-y: auto; margin: 0; padding: var(--px) 0; list-style: none;
  background: var(--cui-paper); border: var(--px) solid var(--cui-ink); box-shadow: var(--cui-shadow);
  font-family: var(--chicago); font-size: calc(12 * var(--px));
}
.cui-menuitem {
  display: flex; align-items: center; gap: calc(4 * var(--px)); width: 100%; box-sizing: border-box;
  min-height: calc(16 * var(--px)); margin: 0; padding: calc(1 * var(--px)) calc(14 * var(--px)) calc(1 * var(--px)) calc(2 * var(--px));
  border: 0; border-radius: 0; background: var(--cui-paper); color: var(--cui-ink); font: inherit; text-align: left; white-space: nowrap;
  text-decoration: none; cursor: default; outline: none; -webkit-appearance: none; appearance: none;
}
.cui-menuitem .cui-mark { flex: 0 0 auto; width: calc(12 * var(--px)); display: flex; justify-content: center; }
.cui-menuitem .cui-mark img { width: calc(9 * var(--px)); height: calc(9 * var(--px)); image-rendering: pixelated; }
.cui-menuitem .cui-icon { width: var(--cui-icon); height: var(--cui-icon); image-rendering: pixelated; display: block; }
.cui-menuitem:hover:not(:disabled), .cui-menuitem:focus { background: var(--cui-ink); color: var(--cui-paper); }
.cui-menuitem:hover:not(:disabled) img, .cui-menuitem:focus img { filter: invert(1); }
.cui-menuitem:disabled { color: var(--cui-dim); }
.cui-menuitem.cui-strong { font-weight: bold; }
.cui-menusep { height: var(--px); margin: calc(3 * var(--px)) 0; flex: 0 0 auto;
  background: repeating-linear-gradient(90deg, var(--cui-ink) 0, var(--cui-ink) var(--px), transparent var(--px), transparent calc(2 * var(--px))); }
.cui-menuitem > .cui-mlabel { flex: 1 1 auto; }
/* an item's shortcut or note (#486: its own class; it was cui-key, the chart key's, and drew as that key's box): a column
   at the right, the item's colour, so a dimmed item's key is dimmed with it and a chosen one's is white */
.cui-menuitem > .cui-mkey { flex: 0 0 auto; margin-left: auto; padding-left: calc(16 * var(--px)); color: inherit; white-space: nowrap; }
.cui-menuitem > .cui-mlabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* a submenu's item: System 7's small solid triangle at the right; open, it stays inverted */
.cui-menuitem > .cui-subtri { flex: 0 0 auto; width: 0; height: 0; margin: 0 calc(-8 * var(--px)) 0 calc(12 * var(--px));
  border-style: solid; border-color: transparent transparent transparent var(--cui-ink);
  border-width: calc(4 * var(--px)) 0 calc(4 * var(--px)) calc(4 * var(--px)); }
.cui-menuitem.cui-open, .cui-menuitem.cui-open:hover { background: var(--cui-ink); color: var(--cui-paper); }
.cui-menuitem.cui-open > .cui-subtri, .cui-menuitem:hover:not(:disabled) > .cui-subtri, .cui-menuitem:focus > .cui-subtri { border-left-color: var(--cui-paper); }
.cui-menuitem:disabled > .cui-subtri { border-left-color: var(--cui-dim); }
.cui-menu.cui-submenu { z-index: 9001; }
/* a menu of icons only (an icon popup with menuCls cui-icongrid): rows of eight, the chosen one framed */
.cui-menu.cui-icongrid { display: grid; grid-template-columns: repeat(8, auto); max-height: min(60vh, calc(260 * var(--px))); padding: var(--px); }
.cui-icongrid .cui-menuitem { width: auto; padding: calc(3 * var(--px)); justify-content: center; }
.cui-icongrid .cui-menuitem .cui-mark { display: none; }
.cui-icongrid .cui-menuitem .cui-icon { width: calc(24 * var(--px)); height: calc(24 * var(--px)); object-fit: contain; }
.cui-icongrid .cui-menuitem[aria-checked="true"] { outline: var(--px) solid var(--cui-ink); outline-offset: calc(-1 * var(--px)); }
html.dev-phone .cui-icongrid .cui-menuitem { min-height: 0; }
.cui-menuhead { padding: calc(1 * var(--px)) calc(14 * var(--px)); color: var(--cui-dim); white-space: nowrap; }

/* ---- text fields ------------------------------------------------------------------------------------------------- */

.cui-field {
  box-sizing: border-box; min-width: 0; height: calc(22 * var(--px)); margin: 0; padding: 0 calc(4 * var(--px));
  font-family: var(--geneva); font-size: calc(12 * var(--px)); line-height: normal; color: var(--cui-ink);
  background: var(--cui-paper); border: var(--px) solid var(--cui-ink); border-radius: 0; box-shadow: none; outline: none;
  -webkit-appearance: none; appearance: none;
}
.cui-field::placeholder { color: var(--cui-dim); opacity: 1; }
.cui-field:focus { box-shadow: inset 0 0 0 var(--px) var(--cui-ink); }
.cui-field:disabled { color: var(--cui-dim); border-color: var(--cui-dim); }
.cui-field.cui-area { height: auto; min-height: calc(60 * var(--px)); padding: calc(3 * var(--px)) calc(4 * var(--px)); resize: vertical;
  line-height: 1.3; }
.cui-field.cui-mono { font-family: var(--cui-font-code); font-size: calc(10 * var(--px)); }
.cui-field.cui-num { width: calc(64 * var(--px)); }
.cui-field.cui-wide { width: 100%; }
.cui-field[type=search]::-webkit-search-cancel-button, .cui-field[type=search]::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.cui-labelled { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.cui-labelled > span { font-size: calc(10 * var(--px)); }

/* ---- segments and tabs (cdanui CUI_Segments, R71) ------------------------------------------------------------- */

.cui-seg { display: inline-flex; flex-wrap: nowrap; max-width: 100%; margin: 0 0 calc(8 * var(--px)); }
.cui-segb {
  position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: calc(20 * var(--px)); min-width: calc(40 * var(--px)); margin: 0 0 0 calc(-1 * var(--px)); padding: 0 calc(10 * var(--px));
  font-family: var(--chicago); font-size: calc(12 * var(--px)); line-height: 1; color: var(--cui-ink); white-space: nowrap;
  background: var(--cui-paper); border: var(--px) solid var(--cui-ink); border-radius: 0; outline: none; cursor: default;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.cui-segb:first-child { margin-left: 0; }
.cui-segb:first-child, .cui-segb:last-child { border: 0; }
.cui-segb.cui-on, .cui-segb:active:not(:disabled) { background-color: var(--cui-ink); color: var(--cui-paper); }
.cui-segb.cui-on img, .cui-segb:active:not(:disabled) img { filter: invert(1); }
.cui-segb:disabled { color: var(--cui-dim); }
.cui-seg.cui-wrap { flex-wrap: wrap; }
.cui-segb > .cui-icon { display: block; flex: 0 0 auto; width: var(--cui-icon); height: var(--cui-icon); image-rendering: pixelated; }
.cui-toolbar > .cui-seg { margin: 0; }

.cui-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 calc(2 * var(--px));
  margin: 0 0 calc(6 * var(--px)); padding: 0 calc(4 * var(--px)); border-bottom: var(--px) solid var(--cui-ink); }
.cui-tab {
  display: inline-flex; align-items: center; height: calc(19 * var(--px)); margin: 0 0 calc(-1 * var(--px)); padding: 0 calc(10 * var(--px));
  font-family: var(--chicago); font-size: calc(12 * var(--px)); line-height: 1; color: var(--cui-ink); white-space: nowrap;
  border: 0; border-radius: 0; outline: none; cursor: default; -webkit-appearance: none; appearance: none;
}
.cui-tab.cui-on { color: var(--cui-paper); }

/* ---- lists and tables --------------------------------------------------------------------------------------------- */

.cui-list { display: flex; flex-direction: column; border: var(--px) solid var(--cui-ink); background: var(--cui-paper); }
.cui-list.cui-bare { border: 0; }
.cui-row {
  display: flex; align-items: center; gap: calc(6 * var(--px)); width: 100%; box-sizing: border-box;
  min-height: calc(22 * var(--px)); margin: 0; padding: calc(2 * var(--px)) calc(6 * var(--px));
  border: 0; border-bottom: var(--px) solid var(--cui-ink); border-radius: 0; background: var(--cui-paper); color: var(--cui-ink);
  font: inherit; text-align: left; cursor: default; outline: none; -webkit-appearance: none; appearance: none;
}
.cui-row:last-child { border-bottom: 0; }
.cui-list.cui-dots .cui-row { border-bottom-style: dotted; }
.cui-row.cui-on, .cui-row:active:not(.cui-static), .cui-row.cui-drop { background: var(--cui-ink); color: var(--cui-paper); }
.cui-row.cui-on img, .cui-row:active:not(.cui-static) img, .cui-row.cui-drop img { filter: invert(1); }
.cui-row:focus-visible { box-shadow: inset 0 0 0 calc(2 * var(--px)) var(--cui-ink), inset 0 0 0 calc(3 * var(--px)) var(--cui-paper); }
.cui-row.cui-on:focus-visible { box-shadow: inset 0 0 0 calc(2 * var(--px)) var(--cui-paper); }
.cui-row .cui-icon { flex: 0 0 auto; width: var(--cui-icon); height: var(--cui-icon); image-rendering: pixelated; }
/* #583 (the user's phone, 31 Oct: a watched episode's tick filled its row, hid the title and ran off the screen): a
   picture a row is given as its own (kids, extra) is icon sized unless its own rule says otherwise. A glyph has a viewBox
   and no size of its own, so left alone it grew to the row's whole free width. Lowest weight, so any class rule wins. */
:where(.cui-row) > img { flex: 0 0 auto; width: var(--cui-icon); height: var(--cui-icon); image-rendering: pixelated; }
.cui-rowmain { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.cui-rowtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(12 * var(--px)); }
.cui-rowsub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(9 * var(--px)); }
.cui-rowextra { flex: 0 0 auto; font-size: calc(9 * var(--px)); }
.cui-row.cui-static { cursor: default; }

/* what plays now (ui.js setPlaying): the number gives way to a speaker, a pause glyph while paused; the name bold */
.cui-playnum { flex: 0 0 calc(18 * var(--px)); display: flex; align-items: center; justify-content: flex-end; font-size: calc(9 * var(--px)); }
.cui-playnum.cui-playonly { display: none; flex-basis: calc(16 * var(--px)); }
.cui-playing .cui-playnum.cui-playonly { display: inline-flex; }
.cui-playglyph { display: none; width: calc(16 * var(--px)); height: calc(16 * var(--px)); image-rendering: pixelated; }
.cui-playing .cui-playglyph { display: block; }
.cui-playing .cui-numtext { display: none; }
.cui-playing .cui-rowtitle, .cui-playing .cui-lvtext, .cui-playing .tt { font-weight: bold; }
.cui-lvcell > .cui-playnum { flex: 0 0 auto; }

.cui-tablewrap { overflow-x: auto; }
.cui-table { width: 100%; border-collapse: collapse; border: var(--px) solid var(--cui-ink); background: var(--cui-paper); font-size: calc(10 * var(--px)); }
.cui-table th {
  padding: calc(2 * var(--px)) calc(4 * var(--px)); text-align: left; white-space: nowrap; vertical-align: bottom;
  font-family: var(--chicago); font-size: calc(12 * var(--px)); font-weight: normal; border-bottom: var(--px) solid var(--cui-ink);
}
.cui-table td { padding: calc(3 * var(--px)) calc(4 * var(--px)); vertical-align: middle; border-top: var(--px) dotted var(--cui-dim); }
.cui-table tr:first-child td { border-top: 0; }
.cui-table td.cui-num { text-align: right; white-space: nowrap; }
.cui-table tr.cui-on td, .cui-table tr.cui-drop td { background: var(--cui-ink); color: var(--cui-paper); }
.cui-table tr.cui-on img, .cui-table tr.cui-drop img { filter: invert(1); }
.cui-table tr[tabindex]:focus-visible td { box-shadow: inset 0 calc(2 * var(--px)) 0 var(--cui-ink), inset 0 calc(-2 * var(--px)) 0 var(--cui-ink); }
.cui-table tr.cui-on[tabindex]:focus-visible td { box-shadow: inset 0 calc(2 * var(--px)) 0 var(--cui-paper), inset 0 calc(-2 * var(--px)) 0 var(--cui-paper); }
.cui-sort {
  display: inline-flex; align-items: center; gap: calc(4 * var(--px)); margin: 0; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; text-decoration: none; cursor: default; -webkit-appearance: none; appearance: none;
}
.cui-sort img { width: calc(7 * var(--px)); height: calc(4 * var(--px)); image-rendering: pixelated; }
.cui-sort.cui-on { font-weight: bold; }

/* ---- progress bars (cdanui's bar) and the wristwatch -------------------------------------------------------- */

.cui-progress { position: relative; box-sizing: border-box; height: calc(10 * var(--px)); min-width: calc(40 * var(--px));
  border: var(--px) solid var(--cui-ink); background: var(--cui-paper); overflow: hidden; }
.cui-progress > .cui-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--cui-ink); }
.cui-progress.cui-near > .cui-fill { background: var(--cui-near); }
.cui-progress.cui-full > .cui-fill { background: var(--cui-full); }
.cui-progress.cui-run { border-color: transparent; background: transparent; overflow: visible; display: flex; align-items: center; }
.cui-progress.cui-run > .cui-fill { display: none; }
.cui-progress.cui-run > .cui-spool { font-size: calc(12 * var(--px)); }
.cui-progress.cui-small { height: calc(6 * var(--px)); }
.cui-progress.cui-large { height: calc(14 * var(--px)); }
.cui-progress .cui-mark { position: absolute; top: 0; bottom: 0; width: var(--px); background: var(--cui-ink);
  box-shadow: var(--px) 0 0 var(--cui-paper), calc(-1 * var(--px)) 0 0 var(--cui-paper); }

/* Oscar's loader (#532, Oscar standard): the literal quarter-circle characters in Oscar coral (BRAND_CORAL), turned by
   ui.js's one clock; nothing here animates. The fainter coral (coralHover) is the rail beside an Allow card's loader. */
.cui-spool, .cui-spoolstill { display: inline-block; flex: none; color: var(--cui-oscar-coral); font-weight: normal; font-style: normal;
  font-family: "DejaVu Sans Mono", Menlo, "Segoe UI Symbol", "Apple Symbols", "Noto Sans Symbols 2", "Noto Sans Symbols2", "DejaVu Sans", sans-serif;
  font-size: var(--cui-icon); line-height: 1; width: 1em; text-align: center; vertical-align: middle; }
.cui-loader { display: inline-flex; align-items: center; gap: 0.4em; min-width: 0; color: inherit; }
.cui-loader .cui-spool { font-size: 1.2em; }
.cui-loadlabel { color: var(--cui-oscar-coral); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cui-loadlabel[hidden], .cui-loadbar[hidden], .cui-loadsecs[hidden] { display: none; }
.cui-loadbar { white-space: pre; font-family: var(--monaco, monospace); font-size: 0.85em; }
.cui-loadfill { color: var(--cui-oscar-coral); }
.cui-loadempty { color: var(--cui-dim, #888); }
.cui-loadsecs { color: var(--cui-dim, #888); font-weight: normal; }
.cui-loadsecs:empty { display: none; }
.cui-loader.cui-loadrail { border-left: calc(2 * var(--px)) solid var(--cui-oscar-coral-faint); padding-left: calc(4 * var(--px)); }
.cui-loading { display: flex; align-items: center; justify-content: center; min-height: calc(120 * var(--px)); height: 100%; }
.cui-loading > .cui-spool { font-size: calc(24 * var(--px)); }

/* ---- toolbars -------------------------------------------------------------------------------------------------- */

.cui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cui-space-under) var(--cui-gap-row); min-width: 0; }
.cui-toolbar.cui-end { justify-content: flex-end; }
.cui-toolbar.cui-nowrap { flex-wrap: nowrap; }
.cui-toolbar > .cui-spacer { flex: 1 1 auto; }
.cui-toolbar > .cui-gap { flex: 0 0 auto; width: calc(6 * var(--px)); }

/* ---- the notice panel and the message band (cdanui CUI_Say, 1.5 M1) ------------------------------------------- */

.cui-notice { display: flex; align-items: center; gap: calc(8 * var(--px)); width: fit-content; max-width: 100%; box-sizing: border-box;
  margin: calc(6 * var(--px)) 0; padding: calc(6 * var(--px)) calc(10 * var(--px)); background: var(--cui-paper); color: var(--cui-ink);
  border: var(--px) solid var(--cui-ink); box-shadow: var(--cui-shadow); font-family: var(--chicago); font-size: calc(12 * var(--px)); }
.cui-notice > .cui-icon { flex: 0 0 auto; width: var(--cui-icon-lg); height: var(--cui-icon-lg); image-rendering: pixelated; }
.cui-notice > .cui-text { min-width: 0; overflow-wrap: anywhere; }

.cui-band {
  position: fixed; z-index: 9500; left: 50%; bottom: calc(8 * var(--px)); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(10 * var(--px)); box-sizing: border-box;
  max-width: calc(100vw - 16px); min-height: calc(22 * var(--px)); padding: calc(2 * var(--px)) calc(4 * var(--px)) calc(2 * var(--px)) calc(8 * var(--px));
  background: var(--cui-ink); color: var(--cui-paper); font-family: var(--geneva); font-size: calc(10 * var(--px)); line-height: 1.3;
}
.cui-band > .cui-text { min-width: 0; overflow-wrap: anywhere; }
.cui-band > .cui-bandbtn {
  flex: 0 0 auto; margin: 0; height: calc(18 * var(--px)); padding: 0 calc(8 * var(--px)); background: var(--cui-ink); color: var(--cui-paper);
  border: var(--px) solid var(--cui-paper); border-radius: 0; font-family: var(--geneva); font-size: calc(10 * var(--px)); font-weight: bold;
  cursor: default; -webkit-appearance: none; appearance: none; outline: none;
}
.cui-band > .cui-bandbtn:active, .cui-band > .cui-bandbtn:focus-visible { background: var(--cui-paper); color: var(--cui-ink); }
/* ---- an icon coloured whole (#540, tint()): the colour cut to the glyph's whole shape (its inside made white), its
   black lines over it multiplied (white takes the colour, black stays black); a glyph that closes nothing in shows the
   colour alone, its lines coloured; until the glyph is read, the glyph as drawn.
   Never inverted in a chosen row: the colour is the point, and its black lines read on the row's black too. ---- */
.cui-tint { position: relative; display: inline-block; flex: 0 0 auto; width: var(--cui-icon); height: var(--cui-icon);
  isolation: isolate; vertical-align: middle; }
.cui-tint > .cui-tintfill { position: absolute; inset: 0; -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.cui-tint > .cui-tintlines { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply;
  image-rendering: pixelated; filter: none !important; }
.cui-tint.cui-tint-line > .cui-tintlines { display: none; }
.cui-tint.cui-tint-wait > .cui-tintfill { display: none; }
.cui-tint.cui-tint-wait > .cui-tintlines { mix-blend-mode: normal; }
/* ---- Rainbow (#380): a fill, the moving letters of a magic word, its underline; still when motion is turned off ---- */
.cui-rainbow, .cui-well > .cui-chip.cui-rainbow, .cui-swatch.cui-rainbow, .cui-tagkey.cui-rainbow, .cui-tag.cui-on .cui-tagkey.cui-rainbow {
  background-color: var(--cui-paper); background-image: var(--cui-rainbow); background-repeat: no-repeat; background-size: 100% 100%; }
.cui-rainbow-text { background-image: var(--cui-rainbow), var(--cui-rainbow); background-size: 200% 100%; background-repeat: repeat-x;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: cui-rainbow-move 4s steps(24) infinite; }
.cui-rainbow-line { background-image: var(--cui-rainbow); background-repeat: no-repeat; background-position: left bottom;
  background-size: 100% calc(2 * var(--px)); padding-bottom: var(--px); }
@keyframes cui-rainbow-move { from { background-position: 0 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .cui-rainbow-text { animation: none; } }
/* #531: a helper named in a conversation, @Name in the moving rainbow, bold so its lighter colours still read; kept
 * on one line. Where text cannot be clipped to a fill it stays plain black */
.cui-mention { font-weight: bold; white-space: nowrap; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .cui-mention.cui-rainbow-text { color: #000; -webkit-text-fill-color: #000; background-image: none; animation: none; } }
/* Sad Oscar where a picture could not be loaded: drawn as pixels, inside the picture's own box */
img.cui-sad { image-rendering: pixelated; object-fit: contain; background: var(--cui-paper); }

/* CUI.copy's hidden text area, for the browsers whose clipboard needs a selection: never seen */
.cui-clip { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cui-band.cui-inwin { position: absolute; left: 0; right: 0; bottom: 0; transform: none; max-width: none; }

/* ---- alerts and dialogs (cdanui CUI_Alert, 4.11): black, white, thick black, a shadow ---------------------- */

.cui-modal { position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 9000; display: flex; align-items: center;
  justify-content: center; padding: calc(10 * var(--px)); }
.cui-alert {
  display: grid; grid-template-columns: auto 1fr; gap: calc(12 * var(--px)); box-sizing: border-box;
  width: calc(340 * var(--px)); max-width: 100%; min-width: 0; max-height: calc(100vh - 20px); overflow: auto;
  padding: calc(16 * var(--px)) calc(16 * var(--px)) calc(12 * var(--px));
  background: var(--cui-paper); border: var(--px) solid var(--cui-ink);
  box-shadow: inset 0 0 0 calc(2 * var(--px)) var(--cui-paper), inset 0 0 0 calc(5 * var(--px)) var(--cui-ink), var(--px) var(--px) 0 var(--cui-ink);
}
.cui-alert > div { min-width: 0; }
.cui-alert .cui-aicon { width: var(--cui-icon-lg); height: var(--cui-icon-lg); image-rendering: pixelated; }
.cui-alert .cui-atext { font-family: var(--chicago); font-size: calc(12 * var(--px)); line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; }
.cui-alert .cui-abuttons { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: calc(6 * var(--px)) calc(10 * var(--px)); }
.cui-alert.cui-wide { width: calc(460 * var(--px)); }
.cui-modal > .cui-alert, .cui-modeless > .cui-alert { max-width: calc(100vw - 20px); }
.cui-alert.cui-plainalert { grid-template-columns: 1fr; }
/* an alert drawn in place (Oscar's Allow): the 32 px icon at the top left, the words wrapping beside it, what it is
 * about and the buttons under both, all inside the frame at any width */
.cui-acard { display: grid; grid-template-columns: calc(32 * var(--px)) minmax(0, 1fr); align-items: start;
  gap: calc(6 * var(--px)) calc(10 * var(--px)); box-sizing: border-box; width: calc(360 * var(--px)); max-width: 100%; min-width: 0;
  padding: calc(8 * var(--px)) calc(10 * var(--px)); background: var(--cui-paper); color: var(--cui-ink);
  border: var(--px) solid var(--cui-ink); box-shadow: var(--cui-shadow); }
.cui-acard > .cui-aicon { display: block; width: var(--cui-icon-lg); height: var(--cui-icon-lg); image-rendering: pixelated; }
.cui-acard > .cui-atext { min-width: 0; align-self: center; font-family: var(--chicago); font-size: calc(12 * var(--px));
  line-height: 1.35; white-space: pre-line; overflow-wrap: anywhere; }
.cui-acard > .cui-abody, .cui-acard > .cui-abuttons { grid-column: 1 / -1; min-width: 0; }
.cui-acard > .cui-abody { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.cui-acard > .cui-abuttons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: calc(6 * var(--px)) calc(10 * var(--px)); }
.cui-acard .cui-adone { display: flex; align-items: center; gap: calc(4 * var(--px)); font-family: var(--chicago); font-size: calc(11 * var(--px)); }
.cui-acard .cui-adone > .cui-icon { width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); }
/* #533: the person's own words as the answer, where the buttons were: as they wrote them, with the files they sent */
.cui-acard .cui-adoneown { align-items: flex-start; font-family: inherit; font-size: calc(12 * var(--px)); max-width: 100%; }
.cui-acard .cui-adoneown > .cui-icon { flex: none; margin-top: calc(1 * var(--px)); }
.cui-acard .cui-adonebody { display: flex; flex-direction: column; gap: calc(4 * var(--px)); min-width: 0; }
.cui-acard .cui-adoneown .cui-adonetext { white-space: pre-wrap; overflow-wrap: anywhere; }
.cui-acard .cui-labelled .cui-field { width: 100%; box-sizing: border-box; }
/* several requests on one card (#43): each its own words, what it is about and its buttons, a rule above each */
.cui-acard .cui-aitem { display: flex; flex-direction: column; gap: calc(4 * var(--px)); min-width: 0;
  padding-top: calc(6 * var(--px)); border-top: var(--px) solid var(--cui-ink); }
.cui-acard .cui-aitem > .cui-aitext { font-family: var(--chicago); font-size: calc(12 * var(--px)); line-height: 1.35;
  white-space: pre-line; overflow-wrap: anywhere; }
.cui-acard .cui-aitem > .cui-abuttons { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
  gap: calc(6 * var(--px)) calc(10 * var(--px)); }
/* #386: a soft approval (blue, routine) and a hard one (Oscar Secure orange, asked every time): the frame and a band
 * of the colour at the top, the kind of a hard one named in it */
.cui-acard.cui-asoft, .cui-acard.cui-ahard { border-width: calc(2 * var(--px)); border-style: solid; }
.cui-acard.cui-asoft { border-color: var(--cui-soft); box-shadow: var(--px) var(--px) 0 var(--cui-soft);
  background: linear-gradient(var(--cui-soft-tint), var(--cui-soft-tint)) top / 100% calc(4 * var(--px)) no-repeat, var(--cui-paper); }
.cui-acard.cui-ahard { border-color: var(--cui-secure); box-shadow: var(--px) var(--px) 0 var(--cui-secure);
  background: linear-gradient(var(--cui-secure-tint), var(--cui-secure-tint)) top / 100% calc(4 * var(--px)) no-repeat, var(--cui-paper); }
.cui-acard > .cui-atag { grid-column: 1 / -1; justify-self: start; font-family: var(--chicago); font-size: calc(10 * var(--px));
  padding: 0 calc(6 * var(--px)); border-radius: calc(3 * var(--px)); background: var(--cui-secure); color: var(--cui-paper); }
.cui-acard .cui-aitem > .cui-atag { align-self: flex-start; font-family: var(--chicago); font-size: calc(10 * var(--px));
  padding: 0 calc(6 * var(--px)); border-radius: calc(3 * var(--px)); background: var(--cui-secure); color: var(--cui-paper); }
.cui-acard .cui-aitem.cui-ahard { border-top-color: var(--cui-secure); }
.cui-acard .cui-aitem.cui-asoft { border-top-color: var(--cui-soft); }
.cui-acard.cui-asoft .cui-default, .cui-acard.cui-asoft .cui-btn.cui-def { outline-color: var(--cui-soft); }
.cui-acard.cui-amany > .cui-abuttons { padding-top: calc(6 * var(--px)); border-top: var(--px) solid var(--cui-ink); }
/* #531: a request's answers (answers()): this once, then the lasting ones in the same two columns, no on the left and
 * yes on the right, each button filling its cell; the answer in other words apart under a dotted rule */
.cui-abuttons > .cui-answers { flex: 1 1 100%; min-width: 0; }
.cui-answers { display: flex; flex-direction: column; gap: calc(6 * var(--px)); min-width: 0; }
.cui-anspair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--px)); align-items: center; }
.cui-anspair > .cui-btn { width: 100%; min-width: 0; }
/* the default's ring sits in its margin: the button shrinks by it, so ring and all stay in the cell, centred */
.cui-anspair > .cui-btn.cui-default { width: calc(100% - 8 * var(--px)); justify-self: center; margin-left: 0; margin-right: 0; }
.cui-anspair > .cui-btn > .cui-label { max-width: 100%; }
.cui-ansalways + .cui-ansalways { margin-top: calc(-2 * var(--px)); }
.cui-ansother { display: flex; justify-content: flex-start; padding-top: calc(6 * var(--px)); border-top: var(--px) dotted var(--cui-ink); }
.cui-ansother > .cui-btn { min-width: calc(50% - 5 * var(--px)); }
/* too narrow for two buttons side by side (a very small phone): one column, this once first */
@media (max-width: 300px) { .cui-anspair { grid-template-columns: minmax(0, 1fr); } .cui-ansother > .cui-btn { width: 100%; } }

/* ---- window chrome and scroll bars (the windows app.js openWin makes) ----------------------------------------- */

.win {
  position: absolute; display: flex; flex-direction: column;
  min-width: calc(160 * var(--px)); min-height: calc(80 * var(--px)); max-width: 100%;
  background: var(--cui-paper); border: var(--px) solid var(--cui-ink); box-shadow: var(--cui-shadow);
  resize: both; overflow: hidden;
}
.titlebar {
  position: relative; flex: 0 0 auto; height: calc(19 * var(--px));
  border-bottom: var(--px) solid var(--cui-ink);
  font-family: var(--chicago); font-size: calc(12 * var(--px)); text-align: center;
  user-select: none; -webkit-user-select: none; touch-action: none; cursor: default;
}
/* six 1-pixel stripes, only on the front window, as in System 7 */
.win.front .titlebar {
  background-image: repeating-linear-gradient(to bottom, var(--cui-ink) 0 var(--px), transparent var(--px) calc(2 * var(--px)));
  background-repeat: no-repeat;
  background-position: var(--px) calc(4 * var(--px));
  background-size: calc(100% - 2 * var(--px)) calc(11 * var(--px));
}
.wtitle {
  display: inline-block; max-width: calc(100% - 90 * var(--px));   /* clear of the close, minimise, Oscar and size boxes */
  padding: 0 calc(6 * var(--px)); background: #fff;
  line-height: calc(18 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top;
}
.win:not(.front) .wtitle { color: var(--dim); }
/* a window Oscar opened behind the one in use: its title bar blinks once, inverted, as System 7 drew a hilite */
.titlebar.blink, .titlebar.blink .wtitle { background-color: var(--cui-ink); color: var(--cui-paper); }
.closebox {
  position: absolute; left: calc(8 * var(--px)); top: calc(4 * var(--px));
  width: calc(11 * var(--px)); height: calc(11 * var(--px)); padding: 0;
  border: var(--px) solid var(--cui-ink); background: var(--cui-paper); box-shadow: 0 0 0 var(--px) var(--cui-paper); cursor: default;
}
/* pressed (req-closebox-pop): System 7's starburst, the box "pops" - eight rays out from the centre, drawn while the
   pointer is down on it (TrackGoAway: off the box it goes away), held a moment on release before the window zooms
   shut, so a quick tap on a phone shows it too */
.closebox.pressed, .closebox:active {
  background: var(--cui-paper) url("../glyphs/closebox-pop.svg") center / calc(9 * var(--px)) calc(9 * var(--px)) no-repeat;
  image-rendering: pixelated;
}
.win:not(.front) .closebox { visibility: hidden; }
/* the minimise box (#245): beside the close box, the same frame, a bar along its foot, as a window gone down */
.minbox {
  position: absolute; left: calc(25 * var(--px)); top: calc(4 * var(--px));
  width: calc(11 * var(--px)); height: calc(11 * var(--px)); padding: 0;
  border: var(--px) solid var(--cui-ink); background: var(--cui-paper); box-shadow: 0 0 0 var(--px) var(--cui-paper); cursor: default;
}
.minbox::before {
  content: ""; position: absolute; left: var(--px); right: var(--px); bottom: var(--px); height: calc(2 * var(--px)); background: var(--cui-ink);
}
.minbox:active { background: var(--cui-ink); }
.minbox:active::before { background: var(--cui-paper); }
.win:not(.front) .minbox { visibility: hidden; }
.minbox:focus { outline: none; }
.minbox:focus-visible { outline: var(--px) dotted var(--cui-ink); outline-offset: calc(2 * var(--px)); }
.win.minimised { display: none !important; }
/* the size box (req-window-size-button-tv): where System 7's zoom box sits, the same frame, a smaller box inside at
   the top left whose size shows the window's, Small, Medium or Large; a window as it opened shows the zoom box's own */
.sizebox {
  position: absolute; right: calc(8 * var(--px)); top: calc(4 * var(--px));
  width: calc(11 * var(--px)); height: calc(11 * var(--px)); padding: 0;
  border: var(--px) solid var(--cui-ink); background: var(--cui-paper); box-shadow: 0 0 0 var(--px) var(--cui-paper); cursor: default;
}
.sizebox::before {
  content: ""; position: absolute; left: 0; top: 0; box-sizing: border-box;
  width: calc(6 * var(--px)); height: calc(6 * var(--px)); border: var(--px) solid var(--cui-ink);
  border-width: 0 var(--px) var(--px) 0;
}
.win.sz-s .sizebox::before { width: calc(3 * var(--px)); height: calc(3 * var(--px)); }
.win.sz-m .sizebox::before { width: calc(5 * var(--px)); height: calc(5 * var(--px)); }
.win.sz-l .sizebox::before { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
.sizebox:active, .sizebox.pressed { background: var(--cui-ink); }
.sizebox:active::before { border-color: var(--cui-paper); }
.win:not(.front) .sizebox { visibility: hidden; }
.sizebox:focus { outline: none; }
.sizebox:focus-visible { outline: var(--cui-focus); outline-offset: calc(2 * var(--px)); }
body.tv .sizebox:focus, body.tv .closebox:focus, body.tv .minbox:focus {
  outline: calc(2 * var(--px)) solid var(--cui-ink) !important; outline-offset: calc(2 * var(--px)); box-shadow: 0 0 0 calc(2 * var(--px)) var(--cui-paper);
}
/* a TV, a touch screen without a mouse: no drag grip (it cannot be reached there); the size box sizes the window */
body.tv .win { resize: none; }
.touchonly .win { resize: none; }
.touchonly .sizebox::after { content: ""; position: absolute; inset: calc(-6 * var(--px)); }
body.tv .sizebox::after { content: ""; position: absolute; inset: calc(-4 * var(--px)); }
.wbody {
  flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain;
  padding: var(--cui-pad-win);
}

/* Mac-style scroll bars everywhere (req-mac-scrollbars-only, 18 Oct: "We should only ever display the mac style
   scroll bar"): every element that scrolls (window bodies, lists inside windows, menus, tables, text areas, the mail
   viewer) gets the System 7 bar, a grey checker track with a white thumb in a black frame and no arrow buttons,
   through one universal rule, so nothing made later by the script can fall back to the browser's own bar. Wheel,
   touch, keys and dragging the thumb are the browser's own and keep working. Firefox draws only the colours. */
*::-webkit-scrollbar { width: var(--cui-icon); height: var(--cui-icon); }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-track {
  background-color: var(--cui-track);
  background-image: conic-gradient(var(--cui-rule) 25%, var(--cui-faint) 0 50%, var(--cui-rule) 0 75%, var(--cui-faint) 0);
  background-size: calc(2 * var(--px)) calc(2 * var(--px));
}
*::-webkit-scrollbar-track:vertical { border-left: var(--px) solid var(--cui-ink); }
*::-webkit-scrollbar-track:horizontal { border-top: var(--px) solid var(--cui-ink); }
*::-webkit-scrollbar-thumb { background: var(--cui-paper); border: var(--px) solid var(--cui-ink); min-height: calc(16 * var(--px)); min-width: calc(16 * var(--px)); }
*::-webkit-scrollbar-corner { background: var(--cui-track); }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-color: var(--cui-paper) #bbb; }
}
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {                    /* phones: a slimmer bar of the same look */
  *::-webkit-scrollbar { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
}

/* the TV's big focus ring: 3 Mac px of black with a white halo, on whatever has the remote's focus */
body.tv :focus, body.tv :focus-visible {
  outline: calc(3 * var(--px)) solid var(--cui-ink) !important; outline-offset: calc(2 * var(--px));
  box-shadow: 0 0 0 calc(5 * var(--px)) var(--cui-paper);
}

/* ---- icon buttons, toggles, the toolbar's separator ---------------------------------------------------------- */

.cui-sep { flex: 0 0 auto; align-self: center; width: var(--px); height: calc(16 * var(--px)); margin: 0 calc(2 * var(--px)); background: var(--cui-ink); }

/* ---- a tag: colour key and name, a close box when it can be taken off --------------------------------------------- */

.cui-tag {
  display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 100%; box-sizing: border-box; gap: calc(2 * var(--px));
  height: calc(16 * var(--px)); padding: 0 calc(3 * var(--px)); border: var(--px) solid var(--cui-ink); border-radius: calc(3 * var(--px));
  background: var(--cui-paper); color: var(--cui-ink); font-size: calc(9 * var(--px)); line-height: 1; white-space: nowrap; vertical-align: middle;
}
/* #542 (the user, 31 Oct: "I can't see any text on the tag"): a tag draws its own black on white wherever it sits; in a
   chosen row (white words on black) it took the row's white and showed only its colour key. Its close box likewise. */
.cui-tag:not(.cui-on) .cui-tagx img { filter: none !important; }
.cui-tag.cui-small { height: calc(13 * var(--px)); font-size: calc(8 * var(--px)); }
.cui-tagmain { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; color: inherit; font: inherit; padding: 0; }
.cui-tagmain > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cui-tagkey { display: inline-block; flex: none; width: calc(7 * var(--px)); height: calc(7 * var(--px)); border: var(--px) solid var(--cui-ink); background: var(--cui-paper); }
.cui-tagkey.cui-none { background: var(--cui-paper); }
.cui-tag.cui-on { background: var(--cui-ink); color: var(--cui-paper); }
.cui-tag.cui-on .cui-tagkey { border-color: var(--cui-paper); }
.cui-tag .cui-tagx { min-width: 0; width: calc(12 * var(--px)); height: calc(12 * var(--px)); padding: 0; margin-right: calc(-2 * var(--px));
  border: 0; box-shadow: none; background: transparent; }
.cui-tag .cui-tagx img { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
/* a phone's touch sizes are not for the tag's close box: it stays inside the tag, its reach widened instead */
html.dev-phone .cui-tag .cui-btn.cui-tagx { width: calc(12 * var(--px)); height: calc(12 * var(--px)); min-width: 0; position: relative; }
html.dev-phone .cui-tag .cui-btn.cui-tagx::after { content: ""; position: absolute; inset: calc(-6 * var(--px)); }
/* #536: the close box draws no push-button frame (the kit's frame is on ::after) */
.cui-tag .cui-btn.cui-tagx::after, .cui-tag .cui-btn.cui-tagx.cui-on::after, .cui-tag .cui-btn.cui-tagx:active::after {
  border: 0; border-image: none; }
.cui-tag.cui-on .cui-tagx img { filter: invert(1); }
button.cui-tagmain:focus-visible { outline: var(--px) dotted currentColor; outline-offset: var(--px); }
body.tv button.cui-tagmain:focus, body.tv .cui-tag .cui-tagx:focus { background: var(--cui-ink); color: var(--cui-paper); outline: none; }

/* ---- the colour well and its palette --------------------------------------------------------------------------- */

.cui-well {
  position: relative; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex: 0 0 auto;
  width: calc(28 * var(--px)); height: calc(20 * var(--px)); margin: 0; padding: calc(3 * var(--px));
  background: var(--cui-paper); border: var(--px) solid var(--cui-ink); border-radius: 0; box-shadow: var(--cui-shadow); outline: none;
  cursor: default; -webkit-appearance: none; appearance: none;
}
.cui-well > .cui-chip { display: block; width: 100%; height: 100%; box-sizing: border-box; border: var(--px) solid var(--cui-ink); background: var(--cui-paper); }
.cui-well.cui-on, .cui-well:active:not(:disabled) { background: var(--cui-ink); }
.cui-well:disabled > .cui-chip { opacity: .4; }
.cui-well:focus-visible { outline: var(--cui-focus); outline-offset: calc(2 * var(--px)); }
.cui-chip.cui-none, .cui-swatch.cui-none {
  background: var(--cui-paper) linear-gradient(to top right, transparent 46%, var(--cui-red) 46%, var(--cui-red) 54%, transparent 54%);
}
.cui-palette {
  position: fixed; z-index: 9100; display: grid; grid-template-columns: repeat(8, calc(14 * var(--px))); gap: calc(2 * var(--px));
  padding: calc(4 * var(--px)); background: var(--cui-paper); border: var(--px) solid var(--cui-ink); box-shadow: var(--cui-shadow);
}
.cui-swatch { width: calc(14 * var(--px)); height: calc(14 * var(--px)); margin: 0; padding: 0; box-sizing: border-box;
  border: var(--px) solid var(--cui-ink); border-radius: 0; outline: none; cursor: default; -webkit-appearance: none; appearance: none; }
.cui-swatch.cui-on { box-shadow: 0 0 0 var(--px) var(--cui-paper), 0 0 0 calc(2 * var(--px)) var(--cui-ink); }
.cui-swatch:focus, .cui-swatch:hover { box-shadow: 0 0 0 var(--px) var(--cui-paper), 0 0 0 calc(3 * var(--px)) var(--cui-ink); }

/* ---- the slider and the number field's little arrows ------------------------------------------------------------ */

input.cui-slider { -webkit-appearance: none; appearance: none; box-sizing: border-box; height: calc(16 * var(--px));
  min-width: calc(80 * var(--px)); margin: 0; padding: 0; background: transparent; outline: none; cursor: default; }
input.cui-slider::-webkit-slider-runnable-track { height: calc(4 * var(--px)); background: var(--cui-paper); border: var(--px) solid var(--cui-ink); }
input.cui-slider::-moz-range-track { height: calc(4 * var(--px)); background: var(--cui-paper); border: var(--px) solid var(--cui-ink); }
input.cui-slider::-webkit-slider-thumb { -webkit-appearance: none; width: calc(11 * var(--px)); height: calc(14 * var(--px));
  margin-top: calc(-8 * var(--px)); border: 0; border-radius: 0; background: url("slider-thumb.svg") 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated; }
input.cui-slider::-moz-range-thumb { width: calc(11 * var(--px)); height: calc(14 * var(--px)); border: 0; border-radius: 0;
  background: url("slider-thumb.svg") 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
input.cui-slider:active::-webkit-slider-thumb { filter: invert(1); }
input.cui-slider:active::-moz-range-thumb { filter: invert(1); }
input.cui-slider:disabled { opacity: .5; }
input.cui-slider:focus-visible { outline: var(--cui-focus); outline-offset: calc(2 * var(--px)); }
.cui-number { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
.cui-number > .cui-field.cui-num { width: calc(48 * var(--px)); text-align: right; }
.cui-arrows { display: flex; flex-direction: column; justify-content: center; }
.cui-arrow { display: flex; align-items: center; justify-content: center; box-sizing: border-box; overflow: hidden;
  width: calc(13 * var(--px)); height: calc(11 * var(--px)); margin: 0; padding: 0; background: var(--cui-paper);
  border: var(--px) solid var(--cui-ink); border-radius: 0; cursor: default; outline: none; -webkit-appearance: none; appearance: none; }
.cui-arrow + .cui-arrow { margin-top: calc(-1 * var(--px)); }
/* the triangles are the button's picture, centred, so the 11 px button never clips a 16 px glyph */
.cui-arrow { background-repeat: no-repeat; background-position: center; background-size: calc(16 * var(--px)) calc(16 * var(--px));
  image-rendering: pixelated; }
.cui-arrow.cui-arrow-up-sm { background-image: url("../glyphs/arrow-up-sm.svg"); }
.cui-arrow.cui-arrow-down-sm { background-image: url("../glyphs/arrow-down-sm.svg"); }
.cui-arrow:active:not(:disabled) { filter: invert(1); }
.cui-arrow:disabled { opacity: .4; }

/* ---- the Finder's list view (CUI.listView): one column model; heading and rows share the table's columns ------- */

.cui-lvwrap { width: 100%; min-width: 0; box-sizing: border-box; background: var(--cui-paper); }
.cui-lvwrap.cui-frame { border: var(--px) solid var(--cui-ink); }
.cui-lvwrap.cui-scroll { overflow: auto; height: 100%; }
table.cui-lv { width: 100%; table-layout: fixed; border-collapse: collapse; border-spacing: 0; margin: 0; border: 0;
  background: var(--cui-paper); font-family: var(--geneva); font-size: calc(10 * var(--px)); color: var(--cui-ink); }
.cui-lv th, .cui-lv td { box-sizing: border-box; padding: 0 calc(4 * var(--px)); border: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; vertical-align: middle; text-align: left; line-height: calc(12 * var(--px)); }
.cui-lv th { position: -webkit-sticky; position: sticky; top: 0; z-index: 1; height: calc(18 * var(--px)); background: var(--cui-paper);
  font-family: var(--geneva); font-size: calc(10 * var(--px)); font-weight: normal; box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--cui-ink); }
.cui-lv td { height: calc(18 * var(--px)); }
.cui-lv th:first-child, .cui-lv td:first-child { padding-left: calc(6 * var(--px)); }
.cui-lv th:last-child, .cui-lv td:last-child { padding-right: calc(6 * var(--px)); }
.cui-lv .cui-r { text-align: right; }
.cui-lv .cui-c { text-align: center; }
.cui-lv .cui-sort { display: flex; align-items: center; gap: calc(3 * var(--px)); width: 100%; height: calc(18 * var(--px)); min-width: 0;
  margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: inherit; text-decoration: none;
  cursor: default; -webkit-appearance: none; appearance: none; }
.cui-lv .cui-r .cui-sort { justify-content: flex-end; }
.cui-lv .cui-c .cui-sort { justify-content: center; }
.cui-lv .cui-sort.cui-on { font-weight: bold; }
.cui-lv .cui-sort:focus-visible { outline: var(--cui-focus); outline-offset: calc(-2 * var(--px)); }
.cui-lv .cui-tri { flex: 0 0 auto; width: var(--cui-icon); height: var(--cui-icon); margin: 0 calc(-4 * var(--px));
  image-rendering: pixelated; }
.cui-lvlabel { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cui-lvcell { display: flex; align-items: center; gap: calc(4 * var(--px)); min-width: 0; height: 100%; }
.cui-r .cui-lvcell { justify-content: flex-end; }
.cui-c .cui-lvcell { justify-content: center; }
.cui-lvcell > .cui-icon { flex: 0 0 auto; width: var(--cui-icon); height: var(--cui-icon); image-rendering: pixelated; }
.cui-lvtext { display: block; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cui-lvmain { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.cui-lvsub { display: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(9 * var(--px)); }
.cui-lv.cui-lines td { box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--cui-rule); }
.cui-lv tbody tr { cursor: default; outline: none; }
.cui-lv tbody tr.cui-on td, .cui-lv tbody tr.cui-drop td { background: var(--cui-ink); color: var(--cui-paper); }
.cui-lv tbody tr.cui-on img, .cui-lv tbody tr.cui-drop img { filter: invert(1); }
.cui-lv tbody tr:focus-visible td { box-shadow: inset 0 calc(2 * var(--px)) 0 var(--cui-ink), inset 0 calc(-2 * var(--px)) 0 var(--cui-ink); }
.cui-lv tbody tr:focus-visible td:first-child { box-shadow: inset calc(2 * var(--px)) 0 0 var(--cui-ink), inset 0 calc(2 * var(--px)) 0 var(--cui-ink),
  inset 0 calc(-2 * var(--px)) 0 var(--cui-ink); }
.cui-lv tbody tr:focus-visible td:last-child { box-shadow: inset calc(-2 * var(--px)) 0 0 var(--cui-ink), inset 0 calc(2 * var(--px)) 0 var(--cui-ink),
  inset 0 calc(-2 * var(--px)) 0 var(--cui-ink); }
.cui-lv tbody tr.cui-on:focus-visible td { box-shadow: inset 0 calc(2 * var(--px)) 0 var(--cui-paper), inset 0 calc(-2 * var(--px)) 0 var(--cui-paper); }
.cui-disc { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: calc(12 * var(--px));
  height: calc(16 * var(--px)); margin: 0; padding: 0; border: 0; background: none; cursor: default; -webkit-appearance: none; appearance: none; }
.cui-disc > .cui-icon { width: var(--cui-icon); height: var(--cui-icon); flex: 0 0 auto; image-rendering: pixelated; }
.cui-lv tbody tr.cui-lvdetail td { height: auto; padding: calc(4 * var(--px)) calc(6 * var(--px)) calc(6 * var(--px)) calc(22 * var(--px));
  white-space: normal; overflow: visible; background: var(--cui-paper); color: var(--cui-ink); box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--cui-rule); }
.cui-lvempty { padding: calc(10 * var(--px)); text-align: center; font-size: calc(10 * var(--px)); color: var(--cui-quiet); }
.cui-lv .cui-w16 { width: calc(16 * var(--px)); }
.cui-lv .cui-w24 { width: calc(24 * var(--px)); }
.cui-lv .cui-w32 { width: calc(32 * var(--px)); }
.cui-lv .cui-w40 { width: calc(40 * var(--px)); }
.cui-lv .cui-w48 { width: calc(48 * var(--px)); }
.cui-lv .cui-w56 { width: calc(56 * var(--px)); }
.cui-lv .cui-w64 { width: calc(64 * var(--px)); }
.cui-lv .cui-w72 { width: calc(72 * var(--px)); }
.cui-lv .cui-w80 { width: calc(80 * var(--px)); }
.cui-lv .cui-w88 { width: calc(88 * var(--px)); }
.cui-lv .cui-w96 { width: calc(96 * var(--px)); }
.cui-lv .cui-w104 { width: calc(104 * var(--px)); }
.cui-lv .cui-w112 { width: calc(112 * var(--px)); }
.cui-lv .cui-w120 { width: calc(120 * var(--px)); }
.cui-lv .cui-w128 { width: calc(128 * var(--px)); }
.cui-lv .cui-w144 { width: calc(144 * var(--px)); }
.cui-lv .cui-w160 { width: calc(160 * var(--px)); }
.cui-lv .cui-w176 { width: calc(176 * var(--px)); }
.cui-lv .cui-w192 { width: calc(192 * var(--px)); }
.cui-lv .cui-w208 { width: calc(208 * var(--px)); }
.cui-lv .cui-w224 { width: calc(224 * var(--px)); }
.cui-lv .cui-w240 { width: calc(240 * var(--px)); }
.cui-lv .cui-w272 { width: calc(272 * var(--px)); }
.cui-lv .cui-w304 { width: calc(304 * var(--px)); }
/* a phone: the minor columns go and the name gets a second line; a tablet: taller rows; a TV: the row in focus inverted */
html.dev-phone .cui-lv .cui-minor { display: none; }
@media (max-width: 600px) { .cui-lv .cui-minor { display: none; } }
html.dev-phone .cui-lvsub { display: block; }
.cui-lvwrap.cui-compact .cui-lv .cui-minor { display: none; }
.cui-lvwrap.cui-compact .cui-lvsub { display: block; }
.cui-lvwrap.cui-compact .cui-lv td { height: calc(28 * var(--px)); }
html.dev-phone .cui-lvwrap.cui-compact .cui-lv td { height: calc(36 * var(--px)); }
html.dev-phone .cui-lv td { height: calc(36 * var(--px)); }
html.dev-phone .cui-lv td, html.dev-phone .cui-lv th { font-size: calc(12 * var(--px)); line-height: calc(15 * var(--px)); }
html.dev-tablet .cui-lv td { height: calc(26 * var(--px)); }
body.tv .cui-lv tbody tr:focus { outline: none !important; box-shadow: none; }
body.tv .cui-lv tbody tr:focus td { background: var(--cui-ink); color: var(--cui-paper); box-shadow: none; }
body.tv .cui-lv tbody tr:focus img { filter: invert(1); }
body.tv .cui-lv td { height: calc(22 * var(--px)); }

/* ---- dialogs with a body, the modeless kind, and the Open and Save dialog --------------------------------------- */

.cui-dialog .cui-dtitle { margin: 0 0 calc(8 * var(--px)); font-family: var(--chicago); font-size: calc(12 * var(--px)); }
.cui-dbody { min-width: 0; }
.cui-modeless { position: fixed; z-index: 8900; right: calc(16 * var(--px)); top: calc(40 * var(--px)); max-width: calc(100vw - 16px); }
.cui-abuttons > .cui-spacer { flex: 1 1 auto; }
.cui-fd { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.cui-fd.cui-fdhasplaces { display: grid; grid-template-columns: calc(96 * var(--px)) 1fr; }
.cui-fd.cui-fdhasplaces > .cui-labelled { grid-column: 1 / -1; }
.cui-fdplaces { border: var(--px) solid var(--cui-ink); }
.cui-fdmain { display: flex; flex-direction: column; gap: calc(6 * var(--px)); min-width: 0; }
.cui-fdwhere { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.cui-fdlist { height: calc(160 * var(--px)); overflow: auto; border: var(--px) solid var(--cui-ink); background: var(--cui-paper); }
html.dev-phone .cui-fd.cui-fdhasplaces { grid-template-columns: 1fr; }
html.dev-phone .cui-fdplaces .cui-list { flex-direction: row; overflow-x: auto; }
html.dev-phone .cui-fdplaces .cui-row { width: auto; flex: 0 0 auto; }
.cui-fd.cui-fdhastree { grid-template-columns: calc(150 * var(--px)) 1fr; }
.cui-fdhastree > .cui-fdplaces { display: flex; flex-direction: column; min-height: 0; height: calc(200 * var(--px)); overflow: auto; background: var(--cui-paper); }
.cui-fdplacelist { border-bottom: var(--px) solid var(--cui-ink); }
.cui-fdpath { min-width: 0; }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .cui-fd.cui-fdhastree { grid-template-columns: 1fr; }
  .cui-fdhastree > .cui-fdplaces { height: auto; max-height: calc(110 * var(--px)); }
}

/* ---- the folder tree and the path bar (fileDialog, the office apps' start window) ------------------------------- */

.cui-tree { display: flex; flex-direction: column; min-width: 0; padding: calc(2 * var(--px)) 0; }
.cui-treerow { display: flex; align-items: center; min-width: 0; padding-left: calc(2 * var(--px)); }
.cui-treerow.cui-d1 { padding-left: calc(14 * var(--px)); } .cui-treerow.cui-d2 { padding-left: calc(26 * var(--px)); }
.cui-treerow.cui-d3 { padding-left: calc(38 * var(--px)); } .cui-treerow.cui-d4 { padding-left: calc(50 * var(--px)); }
.cui-treerow.cui-d5 { padding-left: calc(62 * var(--px)); } .cui-treerow.cui-d6 { padding-left: calc(74 * var(--px)); }
.cui-treerow.cui-d7 { padding-left: calc(86 * var(--px)); } .cui-treerow.cui-d8 { padding-left: calc(98 * var(--px)); }
.cui-treerow .cui-disc { background: none; border: 0; padding: 0; margin: 0; height: calc(18 * var(--px)); }
.cui-treepick { display: flex; align-items: center; gap: calc(4 * var(--px)); flex: 1 1 auto; min-width: 0;
  min-height: calc(18 * var(--px)); margin: 0; padding: calc(1 * var(--px)) calc(4 * var(--px)); border: 0; border-radius: 0;
  background: var(--cui-paper); color: var(--cui-ink); font: inherit; text-align: left; cursor: default; outline: none; -webkit-appearance: none; appearance: none; }
.cui-treepick > .cui-icon { width: var(--cui-icon); height: var(--cui-icon); flex: 0 0 auto; image-rendering: pixelated; }
.cui-treename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cui-treepick.cui-on, .cui-treepick:active, .cui-treerow.cui-drop .cui-treepick { background: var(--cui-ink); color: var(--cui-paper); }
.cui-treepick.cui-on img, .cui-treepick:active img, .cui-treerow.cui-drop .cui-treepick img { filter: invert(1); }
.cui-treepick:focus-visible { box-shadow: inset 0 0 0 calc(2 * var(--px)) var(--cui-ink), inset 0 0 0 calc(3 * var(--px)) var(--cui-paper); }
.cui-treepick.cui-on:focus-visible { box-shadow: inset 0 0 0 calc(2 * var(--px)) var(--cui-paper); }
body.tv .cui-treepick { min-height: calc(22 * var(--px)); }
.cui-path { display: flex; align-items: center; flex-wrap: wrap; gap: calc(2 * var(--px)); min-width: 0; font-size: calc(12 * var(--px)); }
.cui-pathbtn { margin: 0; padding: 0 calc(3 * var(--px)); border: 0; border-radius: 0; background: none; color: var(--cui-ink); font: inherit;
  cursor: default; -webkit-appearance: none; appearance: none; }
.cui-pathbtn:active, .cui-pathbtn.cui-drop { background: var(--cui-ink); color: var(--cui-paper); }
.cui-pathbtn:focus-visible { outline: var(--cui-focus); outline-offset: calc(1 * var(--px)); }
.cui-pathsep { padding: 0 calc(1 * var(--px)); }
.cui-pathhere { padding: 0 calc(3 * var(--px)); font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cui-fdfolders tbody tr { color: var(--cui-ink); }

/* ---- an app's menu bar in its window, split panes, the console -------------------------------------------------- */

.cui-mbar { display: flex; align-items: center; min-height: calc(20 * var(--px)); border-bottom: var(--px) solid var(--cui-ink); background: var(--cui-paper); }
.cui-mtitles { display: flex; align-items: stretch; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
.cui-mtitle { display: inline-flex; align-items: center; height: calc(19 * var(--px)); margin: 0; padding: 0 calc(8 * var(--px));
  background: var(--cui-paper); color: var(--cui-ink); border: 0; border-radius: 0; outline: none; font-family: var(--chicago); font-size: calc(12 * var(--px));
  line-height: 1; white-space: nowrap; cursor: default; -webkit-appearance: none; appearance: none; }
.cui-mtitle.cui-on, .cui-mtitle:active { background: var(--cui-ink); color: var(--cui-paper); }
.cui-mtitle:focus-visible { outline: var(--cui-focus); outline-offset: calc(-3 * var(--px)); }
.cui-mbar > .cui-mbarall { display: none; margin: var(--cui-bar-pad) calc(4 * var(--px)); }
html.dev-phone .cui-mbar > .cui-mtitles { display: none; }
html.dev-phone .cui-mbar > .cui-mbarall { display: inline-flex; }
body.tv .cui-mtitle:focus { background: var(--cui-ink); color: var(--cui-paper); outline: none !important; box-shadow: none; }

.cui-split { display: flex; flex-direction: row; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.cui-split.cui-vertical { flex-direction: column; }
.cui-pane { flex: 0 0 auto; min-width: 0; min-height: 0; overflow: auto; }
.cui-pane.cui-panelast { flex: 1 1 0; }
.cui-divider { flex: 0 0 auto; width: calc(5 * var(--px)); background: var(--cui-paper); outline: none; cursor: col-resize; touch-action: none;
  border-left: var(--px) solid var(--cui-ink); border-right: var(--px) solid var(--cui-ink); box-sizing: border-box; }
.cui-vertical > .cui-divider { width: auto; height: calc(5 * var(--px)); cursor: row-resize; border: 0;
  border-top: var(--px) solid var(--cui-ink); border-bottom: var(--px) solid var(--cui-ink); }
.cui-divider:focus-visible, .cui-divider:active { background: var(--cui-ink); }
html.dev-phone .cui-divider { width: calc(9 * var(--px)); }
html.dev-phone .cui-vertical > .cui-divider { width: auto; height: calc(9 * var(--px)); }

.cui-console { overflow: auto; min-height: 0; background: var(--cui-paper); border: var(--px) solid var(--cui-ink); outline: none;
  font-family: var(--cui-font-code); font-size: calc(10 * var(--px)); line-height: calc(13 * var(--px)); }
.cui-console:focus-visible { box-shadow: inset 0 0 0 var(--px) var(--cui-ink); }
.cui-cline { display: flex; align-items: flex-start; gap: calc(4 * var(--px)); padding: calc(1 * var(--px)) calc(4 * var(--px));
  border-bottom: var(--px) solid var(--cui-faint); }
.cui-cline > .cui-icon { flex: 0 0 auto; width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); image-rendering: pixelated; }
.cui-ctext { min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cui-cline.cui-warn { background: var(--cui-warn-tint); }
.cui-cline.cui-error { background: var(--cui-error-tint); }

.cui-field.cui-area.cui-mono { tab-size: 2; -moz-tab-size: 2; white-space: pre; overflow-wrap: normal; }

/* ---- the position bar (CUI.seek): a dithered track and the scroll box ---------------------------------------- */

.cui-seek {
  position: relative; height: calc(16 * var(--px)); border: var(--px) solid var(--cui-ink); touch-action: none; cursor: default;
  background: url("../glyphs/dither.svg") 0 0 / calc(2 * var(--px)) calc(2 * var(--px)); image-rendering: pixelated;
}
.cui-seek .fill { display: none; }
/* req-seekbar-gestures: "-5s", "+30s", "« 10s" over the position bar while a tap or a hold moves it */
.cui-seek .sbub { position: absolute; bottom: calc(100% + 6 * var(--px)); left: calc(var(--bub, 0) * 100%); transform: translateX(-50%);
  background: var(--cui-paper); color: var(--cui-ink); border: var(--px) solid var(--cui-ink); box-shadow: var(--cui-shadow);
  padding: 0 calc(4 * var(--px)); font-family: var(--chicago); font-size: calc(12 * var(--px));
  line-height: calc(16 * var(--px)); white-space: nowrap; pointer-events: none; z-index: 5; }
.cui-seek .sbub[hidden] { display: none; }
.cui-seek .buf { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--cui-paper); pointer-events: none; }
.cui-seek .thumb {
  position: absolute; top: calc(-1 * var(--px)); width: var(--cui-icon); height: var(--cui-icon);
  left: calc(var(--at, 0) * (100% - 14 * var(--px)) - var(--px));
  background: url("../glyphs/thumb.svg") 0 0 / 100% 100%; image-rendering: pixelated;
}

/* ---- the profiles: a phone and a tablet get touch sizes, a TV a bigger ring (device.js, app.js) ---------------- */

html.dev-phone .cui-btn { height: calc(28 * var(--px)); min-width: calc(56 * var(--px)); }
html.dev-phone .cui-btn.cui-small { height: calc(28 * var(--px)); min-width: calc(40 * var(--px)); }   /* #564: one height */
html.dev-phone .cui-btn.cui-iconly { width: calc(36 * var(--px)); min-width: 0; }
html.dev-phone .cui-bevel { width: calc(36 * var(--px)); height: calc(30 * var(--px)); }
html.dev-phone .cui-popup { height: calc(28 * var(--px)); font-size: 16px; }
html.dev-phone .cui-field { height: calc(30 * var(--px)); font-size: 16px; }
html.dev-phone .cui-field.cui-area { height: auto; }
html.dev-phone .cui-segb { height: calc(28 * var(--px)); }
html.dev-phone .cui-tab { height: calc(26 * var(--px)); }
html.dev-phone .cui-row { min-height: calc(40 * var(--px)); }
html.dev-phone .cui-menuitem { min-height: calc(34 * var(--px)); }
html.dev-phone input.cui-checkbox, html.dev-phone input.cui-radio { width: var(--cui-icon); height: var(--cui-icon); }
html.dev-phone input.cui-checkbox:checked { background-size: calc(14 * var(--px)) calc(14 * var(--px)); }
html.dev-phone input.cui-radio { background-size: calc(16 * var(--px)) calc(16 * var(--px)); }
html.dev-tablet .cui-btn { height: calc(24 * var(--px)); }
html.dev-tablet .cui-row { min-height: calc(28 * var(--px)); }
html.dev-tablet .cui-menuitem { min-height: calc(24 * var(--px)); }
body.tv .cui-row:focus, body.tv .cui-menuitem:focus { outline: none !important; box-shadow: none; background: var(--cui-ink); color: var(--cui-paper); }
body.tv .cui-row:focus img, body.tv .cui-menuitem:focus img { filter: invert(1); }
body.tv .cui-default:focus { outline-offset: calc(6 * var(--px)); }

/* chosen and no longer answerable (a question's answer, 28 Oct: "the text is black and I can't see the text"): a latched
 * button is white on black in every state, never the disabled grey or black on its black */
.cui-btn.cui-on:disabled, .cui-btn.cui-on.cui-dim, .cui-btn.cui-on.cui-disabled { color: var(--cui-paper); }
.cui-btn.cui-on:disabled > *, .cui-btn.cui-on.cui-dim > *, .cui-btn.cui-on.cui-disabled > * {
  opacity: 1; -webkit-mask-image: none; mask-image: none; }
.cui-btn.cui-on:disabled > .cui-icon, .cui-btn.cui-on.cui-dim > .cui-icon { filter: invert(1); }

/* ---- the shapes -------------------------------------------------------------------------------------------------- */
/* ---- generated by tools/ui_shapes.py: do not edit by hand ---- */
/* each rounded control draws its frame and face on its ::after, one nine-slice picture of the pixel art (#536), under
   its label; the control's own box stays clear */
.cui-btn, .cui-bevel, .cui-seg > .cui-segb:first-child, .cui-seg > .cui-segb:last-child, .cui-tab {
  background-color: transparent; background-image: none; position: relative; z-index: 0;   /* its own stacking: the frame under the label */
}
.cui-btn::after, .cui-bevel::after, .cui-seg > .cui-segb:first-child::after, .cui-seg > .cui-segb:last-child::after, .cui-tab::after {
  content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; box-sizing: border-box; z-index: -1;
  pointer-events: none;
}
/* the push button (cui-btn): normal, then pressed or latched, the whole round rect inverted */
.cui-btn::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h3v1h-3zM1 1h2v1h-2zM6 1h2v1h-2zM1 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1zM0 5h1v1h-1zM8 5h1v1h-1zM1 6h1v1h-1zM7 6h1v1h-1zM1 7h2v1h-2zM6 7h2v1h-2zM3 8h3v1h-3z'/%3E%3Cpath fill='%23fff' d='M3 1h3v1h-3zM2 2h5v1h-5zM1 3h7v1h-7zM1 4h7v1h-7zM1 5h7v1h-7zM2 6h5v1h-5zM3 7h3v1h-3z'/%3E%3C/svg%3E") 4 4 4 4 fill stretch;
}
.cui-btn.cui-on::after, .cui-btn:active:not(:disabled):not(.cui-off)::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h3v1h-3zM1 1h7v1h-7zM1 2h7v1h-7zM0 3h9v1h-9zM0 4h9v1h-9zM0 5h9v1h-9zM1 6h7v1h-7zM1 7h7v1h-7zM3 8h3v1h-3z'/%3E%3C/svg%3E") 4 4 4 4 fill stretch;
}
/* the default button's ring, 4 Mac px outside the button */
.cui-default::before {
  border-style: solid; border-color: transparent; border-width: calc(10 * var(--px)) calc(10 * var(--px)) calc(10 * var(--px)) calc(10 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' width='21' height='21' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M6 0h9v1h-9zM4 1h13v1h-13zM3 2h15v1h-15zM2 3h5v1h-5zM14 3h5v1h-5zM1 4h4v1h-4zM16 4h4v1h-4zM1 5h3v1h-3zM17 5h3v1h-3zM0 6h4v1h-4zM17 6h4v1h-4zM0 7h3v1h-3zM18 7h3v1h-3zM0 8h3v1h-3zM18 8h3v1h-3zM0 9h3v1h-3zM18 9h3v1h-3zM0 10h3v1h-3zM18 10h3v1h-3zM0 11h3v1h-3zM18 11h3v1h-3zM0 12h3v1h-3zM18 12h3v1h-3zM0 13h3v1h-3zM18 13h3v1h-3zM0 14h4v1h-4zM17 14h4v1h-4zM1 15h3v1h-3zM17 15h3v1h-3zM1 16h4v1h-4zM16 16h4v1h-4zM2 17h5v1h-5zM14 17h5v1h-5zM3 18h15v1h-15zM4 19h13v1h-13zM6 20h9v1h-9z'/%3E%3Cpath fill='%23fff' d='M7 3h7v1h-7zM5 4h2v1h-2zM14 4h2v1h-2zM4 5h1v1h-1zM16 5h1v1h-1zM4 6h1v1h-1zM16 6h1v1h-1zM3 7h1v1h-1zM17 7h1v1h-1zM3 8h1v1h-1zM17 8h1v1h-1zM3 9h1v1h-1zM17 9h1v1h-1zM3 10h1v1h-1zM17 10h1v1h-1zM3 11h1v1h-1zM17 11h1v1h-1zM3 12h1v1h-1zM17 12h1v1h-1zM3 13h1v1h-1zM17 13h1v1h-1zM4 14h1v1h-1zM16 14h1v1h-1zM4 15h1v1h-1zM16 15h1v1h-1zM5 16h2v1h-2zM14 16h2v1h-2zM7 17h7v1h-7z'/%3E%3C/svg%3E") 10 10 10 10 stretch;
}
/* the bevel button with a glyph (cui-bevel) */
.cui-bevel::after {
  border-style: solid; border-color: transparent; border-width: calc(3 * var(--px)) calc(3 * var(--px)) calc(3 * var(--px)) calc(3 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 0h5v1h-5zM0 1h1v1h-1zM6 1h1v1h-1zM0 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM1 6h5v1h-5z'/%3E%3Cpath fill='%23fff' d='M1 1h5v1h-5zM1 2h1v1h-1zM1 3h1v1h-1zM1 4h1v1h-1z'/%3E%3Cpath fill='%23ddd' d='M2 2h3v1h-3zM2 3h3v1h-3zM2 4h3v1h-3z'/%3E%3Cpath fill='%23888' d='M5 2h1v1h-1zM5 3h1v1h-1zM5 4h1v1h-1zM1 5h5v1h-5z'/%3E%3C/svg%3E") 3 3 3 3 fill stretch;
}
.cui-bevel.cui-on::after, .cui-bevel:active:not(:disabled):not(.cui-off)::after {
  border-style: solid; border-color: transparent; border-width: calc(3 * var(--px)) calc(3 * var(--px)) calc(3 * var(--px)) calc(3 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' width='7' height='7' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M1 0h5v1h-5zM0 1h7v1h-7zM0 2h7v1h-7zM0 3h7v1h-7zM0 4h7v1h-7zM0 5h7v1h-7zM1 6h5v1h-5z'/%3E%3C/svg%3E") 3 3 3 3 fill stretch;
}
/* segments (cui-seg): the end caps, plain and chosen */
.cui-seg > .cui-segb:first-child::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(3 * var(--px)) calc(4 * var(--px)) calc(3 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' width='7' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h4v1h-4zM1 1h2v1h-2zM6 1h1v1h-1zM1 2h1v1h-1zM6 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM1 6h1v1h-1zM6 6h1v1h-1zM1 7h2v1h-2zM6 7h1v1h-1zM3 8h4v1h-4z'/%3E%3Cpath fill='%23fff' d='M3 1h3v1h-3zM2 2h4v1h-4zM1 3h5v1h-5zM1 4h5v1h-5zM1 5h5v1h-5zM2 6h4v1h-4zM3 7h3v1h-3z'/%3E%3C/svg%3E") 4 3 4 3 fill stretch;
}
.cui-seg > .cui-segb:last-child::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(3 * var(--px)) calc(4 * var(--px)) calc(3 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' width='7' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h4v1h-4zM0 1h1v1h-1zM4 1h2v1h-2zM0 2h1v1h-1zM5 2h1v1h-1zM0 3h1v1h-1zM6 3h1v1h-1zM0 4h1v1h-1zM6 4h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM0 6h1v1h-1zM5 6h1v1h-1zM0 7h1v1h-1zM4 7h2v1h-2zM0 8h4v1h-4z'/%3E%3Cpath fill='%23fff' d='M1 1h3v1h-3zM1 2h4v1h-4zM1 3h5v1h-5zM1 4h5v1h-5zM1 5h5v1h-5zM1 6h4v1h-4zM1 7h3v1h-3z'/%3E%3C/svg%3E") 4 3 4 3 fill stretch;
}
.cui-seg > .cui-segb:only-child::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h3v1h-3zM1 1h2v1h-2zM6 1h2v1h-2zM1 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1zM0 5h1v1h-1zM8 5h1v1h-1zM1 6h1v1h-1zM7 6h1v1h-1zM1 7h2v1h-2zM6 7h2v1h-2zM3 8h3v1h-3z'/%3E%3Cpath fill='%23fff' d='M3 1h3v1h-3zM2 2h5v1h-5zM1 3h7v1h-7zM1 4h7v1h-7zM1 5h7v1h-7zM2 6h5v1h-5zM3 7h3v1h-3z'/%3E%3C/svg%3E") 4 4 4 4 fill stretch;
}
.cui-seg > .cui-segb.cui-on:first-child::after, .cui-seg > .cui-segb:active:first-child::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(3 * var(--px)) calc(4 * var(--px)) calc(3 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' width='7' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h4v1h-4zM1 1h6v1h-6zM1 2h6v1h-6zM0 3h7v1h-7zM0 4h7v1h-7zM0 5h7v1h-7zM1 6h6v1h-6zM1 7h6v1h-6zM3 8h4v1h-4z'/%3E%3C/svg%3E") 4 3 4 3 fill stretch;
}
.cui-seg > .cui-segb.cui-on:last-child::after, .cui-seg > .cui-segb:active:last-child::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(3 * var(--px)) calc(4 * var(--px)) calc(3 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 9' width='7' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M0 0h4v1h-4zM0 1h6v1h-6zM0 2h6v1h-6zM0 3h7v1h-7zM0 4h7v1h-7zM0 5h7v1h-7zM0 6h6v1h-6zM0 7h6v1h-6zM0 8h4v1h-4z'/%3E%3C/svg%3E") 4 3 4 3 fill stretch;
}
.cui-seg > .cui-segb.cui-on:only-child::after, .cui-seg > .cui-segb:active:only-child::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9' width='9' height='9' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h3v1h-3zM1 1h7v1h-7zM1 2h7v1h-7zM0 3h9v1h-9zM0 4h9v1h-9zM0 5h9v1h-9zM1 6h7v1h-7zM1 7h7v1h-7zM3 8h3v1h-3z'/%3E%3C/svg%3E") 4 4 4 4 fill stretch;
}
/* folder tabs (cui-tab) */
.cui-tab::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(4 * var(--px)) 0 calc(4 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5' width='9' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h3v1h-3zM1 1h2v1h-2zM6 1h2v1h-2zM1 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM0 4h1v1h-1zM8 4h1v1h-1z'/%3E%3Cpath fill='%23fff' d='M3 1h3v1h-3zM2 2h5v1h-5zM1 3h7v1h-7zM1 4h7v1h-7z'/%3E%3C/svg%3E") 4 4 0 4 fill stretch;
}
.cui-tab.cui-on::after {
  border-style: solid; border-color: transparent; border-width: calc(4 * var(--px)) calc(4 * var(--px)) 0 calc(4 * var(--px));
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5' width='9' height='5' shape-rendering='crispEdges'%3E%3Cpath fill='%23000' d='M3 0h3v1h-3zM1 1h7v1h-7zM1 2h7v1h-7zM0 3h9v1h-9zM0 4h9v1h-9z'/%3E%3C/svg%3E") 4 4 0 4 fill stretch;
}
/* ---- end of generated shapes ---- */

/* ---- drawn in place, and the gallery (ui/gallery.js, /admin/ui-gallery) ------------------------------------ */

.cui-menu.cui-inline, .cui-band.cui-inline { position: static; transform: none; max-height: none; }
.cui-alert.cui-inline { width: calc(340 * var(--px)); max-width: 100%; }
.cui-btn.cui-showfocus, .cui-bevel.cui-showfocus { outline: var(--cui-focus); outline-offset: calc(2 * var(--px)); }
.cui-field.cui-showfocus { box-shadow: inset 0 0 0 var(--px) var(--cui-ink); }
body.tv .cui-showfocus { outline: calc(3 * var(--px)) solid var(--cui-ink) !important; outline-offset: calc(2 * var(--px)); box-shadow: 0 0 0 calc(5 * var(--px)) var(--cui-paper); }
.cuig { display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.cuig-head { margin: 0 0 calc(6 * var(--px)); padding-bottom: calc(2 * var(--px)); border-bottom: var(--px) solid var(--cui-ink);
  font-family: var(--chicago); font-size: calc(12 * var(--px)); font-weight: normal; }
.cuig-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: calc(10 * var(--px)) calc(14 * var(--px)); margin-bottom: calc(8 * var(--px)); }
.cuig-cell { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cui-space-under); margin: 0; min-width: 0; }
.cuig-cell > figcaption { font-size: calc(9 * var(--px)); color: var(--cui-quiet); }
.cuig-wide .cuig-cell { flex: 1 1 calc(160 * var(--px)); }
.cuig-tile { width: calc(64 * var(--px)); height: calc(48 * var(--px)); }
.cuig-wide .cuig-cell > .cui-list, .cuig-wide .cuig-cell > .cui-tablewrap, .cuig-wide .cuig-cell > .cui-progress,
.cuig-wide .cuig-cell > .cui-tabs, .cuig-wide .cuig-cell > .cui-toolbar { align-self: stretch; }
.cuig-lv, .cuig-cell > .cui-lvwrap, .cuig-cell > .cui-mbar { align-self: stretch; }
.cuig-split { align-self: stretch; height: calc(110 * var(--px)); border: var(--px) solid var(--cui-ink); }
.cuig-split .cui-area { width: 100%; height: 100%; min-height: 0; border: 0; resize: none; box-sizing: border-box; }
.cuig-console { align-self: stretch; height: calc(66 * var(--px)); }
.cuig-chat { align-self: stretch; height: calc(180 * var(--px)); border: var(--px) solid var(--cui-ink); }
.cuig-ctx { padding: calc(10 * var(--px)) calc(16 * var(--px)); border: var(--px) dashed var(--cui-ink); background: var(--cui-paper); outline: none; }
.cuig-ctx:focus-visible { outline: var(--cui-focus); outline-offset: calc(2 * var(--px)); }

/* a conversation (CUI.chat): the one who answers on the left, plain; the person's own words on the right in a frame */
.cui-chat { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--cui-paper); }
.cui-chatlog { flex: 1; min-height: 0; overflow: auto; outline: none; padding: calc(6 * var(--px)); display: flex; flex-direction: column;
  gap: calc(8 * var(--px)); font-family: var(--geneva); font-size: calc(11 * var(--px)); line-height: calc(15 * var(--px)); }
.cui-chatlog:focus-visible { box-shadow: inset 0 0 0 var(--px) var(--cui-ink); }
/* #443: the conversation and, over its bottom edge while new messages wait below, Scroll to New Messages */
.cui-chatlogbox { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.cui-chatnew { position: absolute; left: 0; right: 0; bottom: calc(4 * var(--px)); display: flex; justify-content: center; pointer-events: none; }
.cui-chatnew > .cui-btn { pointer-events: auto; }
.cui-chatnew[hidden] { display: none; }
.cui-msg { max-width: 92%; min-width: 0; overflow-wrap: anywhere; }
.cui-msg-me { align-self: flex-end; background: #eee; border: var(--px) solid var(--cui-ink); padding: calc(3 * var(--px)) calc(6 * var(--px));
  white-space: pre-wrap; box-shadow: var(--cui-shadow); }
.cui-msg-them { align-self: flex-start; }
.cui-msg-note { align-self: center; color: #555; font-size: calc(10 * var(--px)); text-align: center; }
.cui-msgwho { font-family: var(--chicago); font-size: calc(10 * var(--px)); margin-bottom: calc(2 * var(--px)); }
.cui-msgtext p { margin: 0 0 calc(5 * var(--px)); }
.cui-msgtext p:last-child { margin-bottom: 0; }
.cui-msgtext ul, .cui-msgtext ol { margin: 0 0 calc(5 * var(--px)); padding-left: calc(16 * var(--px)); }
.cui-msgtext code, .cui-chatcode { font-family: var(--cui-font-code); font-size: calc(10 * var(--px)); }
.cui-chatcode { background: #f2f2f2; border: var(--px) solid var(--cui-track); padding: calc(3 * var(--px)); overflow-x: auto; margin: 0 0 calc(5 * var(--px)); white-space: pre; }
.cui-chathead { font-weight: bold; }
/* #432: a source's number beside the statement, raised and small, and the numbered References at the end */
.cui-cite { font-size: 0.72em; line-height: 0; vertical-align: super; margin-left: calc(1 * var(--px)); white-space: nowrap; }
.cui-cite a { color: inherit; text-decoration: underline; padding: 0 calc(1 * var(--px)); }
.cui-refshead { margin-top: calc(6 * var(--px)); font-size: calc(10 * var(--px)); }
.cui-refs { margin: 0; padding-left: calc(18 * var(--px)); font-size: calc(10 * var(--px)); overflow-wrap: anywhere; }
.cui-refs li { padding: calc(1 * var(--px)) 0; }
.cui-refs a { color: inherit; text-decoration: underline; }
.cui-refs li.cui-refon { background: var(--cui-ink); color: var(--cui-paper); }
.cui-msgacts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cui-space-under) var(--cui-gap-row); margin-top: calc(3 * var(--px)); }
.cui-msgacts:empty { display: none; }
.cui-msgwait { display: flex; align-items: center; gap: calc(4 * var(--px)); color: #555; font-size: calc(10 * var(--px)); margin-top: calc(3 * var(--px)); }
.cui-msg-going .cui-msgtext:empty { display: none; }
.cui-chatbox { flex: none; display: flex; align-items: flex-end; gap: calc(4 * var(--px)); padding: calc(4 * var(--px)) calc(6 * var(--px));
  border-top: var(--px) solid var(--cui-ink); background: var(--cui-paper); }
.cui-chatbox[hidden] { display: none; }
.cui-chatin.cui-area { flex: 1; min-width: 0; resize: none; min-height: calc(32 * var(--px)); max-height: calc(120 * var(--px)); }
.cui-chatlock { flex: none; padding: calc(6 * var(--px)); border-top: var(--px) solid var(--cui-ink); font-family: var(--geneva);
  font-size: calc(10 * var(--px)); display: flex; align-items: center; gap: calc(4 * var(--px)); }
.cui-chatlock[hidden] { display: none; }

/* chart keys and bars (bug-storage-legend-keys, 26 Oct): twelve one-bit patterns, the same in a bar and in its key */
.cui-stack { position: relative; display: flex; box-sizing: border-box; height: calc(10 * var(--px)); min-width: calc(40 * var(--px));
  border: var(--px) solid var(--cui-ink); background: var(--cui-paper); overflow: hidden; }
.cui-stack .cui-seg { flex: none; height: 100%; box-sizing: border-box; border-right: var(--px) solid var(--cui-ink); }
.cui-key { display: inline-block; flex: none; box-sizing: border-box; width: calc(12 * var(--px)); height: calc(8 * var(--px));
  border: var(--px) solid var(--cui-ink); vertical-align: baseline; margin-right: calc(4 * var(--px)); }
.cui-legend { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.cui-lrow { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.cui-lrow .cui-key { margin-right: 0; }
.cui-lval { margin-left: auto; }
.cui-pat-0 { background: var(--cui-ink); }
.cui-pat-1 { background: repeating-linear-gradient(45deg, var(--cui-ink) 0 var(--px), var(--cui-paper) var(--px) calc(3 * var(--px))); }
.cui-pat-2 { background: repeating-linear-gradient(0deg, var(--cui-ink) 0 var(--px), var(--cui-paper) var(--px) calc(2 * var(--px))); }
.cui-pat-3 { background: conic-gradient(var(--cui-ink) 0 25%, var(--cui-paper) 0 100%) 0 0 / calc(4 * var(--px)) calc(4 * var(--px)); }
.cui-pat-4 { background: repeating-linear-gradient(45deg, var(--cui-ink) 0 var(--px), transparent var(--px) calc(4 * var(--px))),
  repeating-linear-gradient(-45deg, var(--cui-ink) 0 var(--px), var(--cui-paper) var(--px) calc(4 * var(--px))); }
.cui-pat-5 { background: repeating-linear-gradient(90deg, var(--cui-ink) 0 var(--px), var(--cui-paper) var(--px) calc(2 * var(--px))); }
.cui-pat-6 { background: repeating-linear-gradient(-45deg, var(--cui-ink) 0 var(--px), var(--cui-paper) var(--px) calc(3 * var(--px))); }
.cui-pat-7 { background: repeating-conic-gradient(var(--cui-ink) 0 25%, var(--cui-paper) 0 50%) 0 0 / calc(2 * var(--px)) calc(2 * var(--px)); }
.cui-pat-8 { background: repeating-linear-gradient(0deg, var(--cui-ink) 0 var(--px), transparent var(--px) calc(4 * var(--px))),
  repeating-linear-gradient(90deg, var(--cui-ink) 0 var(--px), var(--cui-paper) var(--px) calc(4 * var(--px))); }
.cui-pat-9 { background: repeating-linear-gradient(0deg, var(--cui-ink) 0 calc(2 * var(--px)), var(--cui-paper) calc(2 * var(--px)) calc(4 * var(--px))); }
.cui-pat-10 { background: conic-gradient(var(--cui-paper) 0 25%, var(--cui-ink) 0 100%) 0 0 / calc(4 * var(--px)) calc(4 * var(--px)); }
.cui-pat-11 { background: var(--cui-paper); }

/* a question as a card (CUI.choice): framed like a dialog's inner box, the question in Chicago, its choices wrapping */
.cui-choice { border: var(--px) solid var(--cui-ink); box-shadow: var(--cui-shadow); background: var(--cui-paper); padding: calc(6 * var(--px));
  display: flex; flex-direction: column; gap: calc(6 * var(--px)); max-width: 100%; }
.cui-choiceq { font-family: var(--chicago); font-size: calc(11 * var(--px)); line-height: calc(15 * var(--px)); overflow-wrap: anywhere; }
/* the tag picker (#359): the chosen tags as chips with their glyph, then a field with suggestions */
.cui-tagpicker { display: flex; flex-wrap: wrap; align-items: center; gap: calc(4 * var(--px)); }
.cui-tagchips { display: inline-flex; flex-wrap: wrap; gap: calc(4 * var(--px)); }
.cui-tagpick { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
.cui-tagpick > .cui-icon { width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); }
.cui-tagadd.cui-field { width: calc(120 * var(--px)); }
/* suggestions as you type (#529): the menu's look, under the field, the one chosen by the arrows inverted */
.cui-menu.cui-suggest { max-height: min(50vh, calc(200 * var(--px))); }
.cui-suggest .cui-sugitem { cursor: pointer; }
.cui-suggest .cui-sugitem.cui-on { background: #000; color: #fff; }
.cui-popmark { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); }
.cui-choicedetails { margin: 0; padding-left: calc(14 * var(--px)); overflow-wrap: anywhere; }
.cui-choicebtns { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cui-space-under) var(--cui-gap-row); }   /* #564: one centre line */
.cui-choicefields { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.cui-choicedone .cui-btn:not(.cui-on) { opacity: .5; }
.cui-choiceother { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.cui-choiceother > .cui-area { width: 100%; box-sizing: border-box; }
/* the row Send sits in at the right; #457: only the row - the Send button carries the same class, and as a flex row
   ending at the right it pushed its paper plane off centre */
div.cui-choicesend { display: flex; justify-content: flex-end; }
.cui-btn.cui-iconly { justify-content: center; align-items: center; }
/* #468: an answered card as a filled-in view: the question, the answer in place, Edit; no field, no Send */
.cui-choicewrap { display: contents; }
.cui-choiceans { font-size: calc(12 * var(--px)); white-space: pre-wrap; overflow-wrap: anywhere; border: var(--px) solid var(--cui-ink);
  background: var(--cui-paper); padding: calc(3 * var(--px)) calc(6 * var(--px)); }
.cui-choicefilled { box-shadow: none; }
.cui-choicedone.cui-choicefilled .cui-btn { opacity: 1; }
.cui-choiceedit, .cui-choicecancel { justify-content: flex-end; }
.cui-choicesaid { font-size: calc(11 * var(--px)); white-space: pre-wrap; overflow-wrap: anywhere; border-left: calc(2 * var(--px)) solid var(--cui-ink);
  padding-left: calc(6 * var(--px)); }
.cui-choicesaid[hidden] { display: none; }
/* #351: every kind of question and forms (ui.js choiceFields) */
.cui-choicectx { font-size: calc(10 * var(--px)); overflow-wrap: anywhere; color: #333; }
.cui-askfield { display: flex; flex-direction: column; gap: calc(2 * var(--px)); min-width: 0; }
.cui-askfield .cui-labelled { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.cui-askfield .cui-field, .cui-askfield .cui-area { width: 100%; box-sizing: border-box; }
.cui-askrow { display: flex; align-items: center; gap: calc(6 * var(--px)); flex-wrap: wrap; min-width: 0; }
.cui-askunit, .cui-askval { font-size: calc(11 * var(--px)); white-space: nowrap; }
.cui-askslider .cui-slider { flex: 1; min-width: calc(80 * var(--px)); }
.cui-askstars { gap: calc(2 * var(--px)); }
.cui-askchecks { display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.cui-askrank { margin: 0; padding-left: calc(18 * var(--px)); display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.cui-askrankrow { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.cui-askranktext { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: calc(11 * var(--px)); }
.cui-askfilebox { display: flex; flex-direction: column; gap: calc(3 * var(--px)); align-items: flex-start; }
.cui-askfile { display: flex; align-items: center; gap: calc(4 * var(--px)); font-size: calc(11 * var(--px)); overflow-wrap: anywhere; }
.cui-askfile .cui-icon { width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); flex: none; }
.cui-askerr { font-size: calc(10 * var(--px)); color: #b00000; }
.cui-askerr[hidden] { display: none; }
.cui-askbtns { justify-content: flex-end; }

/* a word processor's ruler (CUI.ruler): the scale with the margins shaded above, the indents and tab stops below. Its
   length is the page's, set by the script in the page's own pixels; the markers are Mac pixels, and bigger for a finger */
.cui-ruler { --rk: var(--px); position: relative; flex: none; background: var(--cui-paper); color: var(--cui-ink); user-select: none; -webkit-user-select: none;
  font-family: var(--geneva); font-size: calc(9 * var(--px)); line-height: 1; }
.cui-ruler-h { height: calc(30 * var(--rk)); border-bottom: var(--px) solid var(--cui-ink); }
.cui-ruler-v { width: calc(20 * var(--rk)); border-right: var(--px) solid var(--cui-ink); }
.cui-ruler.cui-disabled .cui-rmarks { opacity: 0.4; pointer-events: none; }
.cui-rscale, .cui-rtrack, .cui-rmarks { position: absolute; }
.cui-ruler-h .cui-rscale { left: 0; right: 0; top: 0; height: calc(13 * var(--rk)); border-bottom: var(--px) solid var(--cui-ink); overflow: hidden; }
.cui-ruler-h .cui-rtrack { left: 0; right: 0; top: calc(13 * var(--rk)); bottom: 0; cursor: copy; }
.cui-ruler-v .cui-rscale { top: 0; bottom: 0; left: 0; width: 100%; overflow: hidden; }
.cui-ruler-v .cui-rtrack { display: none; }
.cui-rtrack:focus-visible { outline: var(--cui-focus); outline-offset: calc(-2 * var(--px)); }
.cui-rmarks { inset: 0; pointer-events: none; }
.cui-rmargin { position: absolute; background: #bbb; }
.cui-ruler-h .cui-rmargin { top: 0; bottom: 0; left: 0; }
.cui-ruler-v .cui-rmargin { left: 0; right: 0; top: 0; }
.cui-rtick { position: absolute; background: var(--cui-ink); }
.cui-ruler-h .cui-rtick { bottom: 0; width: 1px; height: calc(2 * var(--rk)); }
.cui-ruler-h .cui-rquarter { height: calc(3 * var(--rk)); }
.cui-ruler-h .cui-rhalf { height: calc(5 * var(--rk)); }
.cui-ruler-h .cui-rmajor { height: calc(8 * var(--rk)); }
.cui-ruler-v .cui-rtick { right: 0; height: 1px; width: calc(2 * var(--rk)); }
.cui-ruler-v .cui-rquarter { width: calc(3 * var(--rk)); }
.cui-ruler-v .cui-rhalf { width: calc(5 * var(--rk)); }
.cui-ruler-v .cui-rmajor { width: calc(8 * var(--rk)); }
.cui-rnum { position: absolute; }
.cui-ruler-h .cui-rnum { top: calc(2 * var(--rk)); margin-left: calc(2 * var(--px)); }
.cui-ruler-v .cui-rnum { left: calc(2 * var(--rk)); margin-top: calc(1 * var(--px)); }

/* the markers: each is a point on the ruler; its shape is drawn round that point and its press area is bigger still */
.cui-rmark { position: absolute; pointer-events: auto; touch-action: none; cursor: ew-resize; outline: none; }
.cui-ruler-v .cui-rmark { cursor: ns-resize; }
.cui-rmark::after { content: ''; position: absolute; inset: calc(-2 * var(--rk)); }
.cui-rmark:focus-visible { box-shadow: 0 0 0 var(--px) var(--cui-paper), 0 0 0 calc(2 * var(--px)) var(--cui-ink); }
.cui-rmark.cui-on { filter: invert(1); background-color: var(--cui-paper); }
.cui-rmark.cui-roff { opacity: 0.35; }
/* margins: a black tab on the scale, across or down */
.cui-r-mleft, .cui-r-mright { top: 0; width: calc(5 * var(--rk)); height: calc(12 * var(--rk)); margin-left: calc(-2.5 * var(--rk));
  background: var(--cui-ink); border: var(--px) solid var(--cui-paper); box-sizing: border-box; }
.cui-r-mtop, .cui-r-mbot { left: 0; height: calc(5 * var(--rk)); width: calc(19 * var(--rk)); margin-top: calc(-2.5 * var(--rk));
  background: var(--cui-ink); border: var(--px) solid var(--cui-paper); box-sizing: border-box; }
/* indents: the first line's triangle points down, the hanging and right indents' point up, the left indent is the box */
.cui-r-first, .cui-r-hang, .cui-r-right { width: 0; height: 0; margin-left: calc(-4 * var(--rk));
  border-left: calc(4 * var(--rk)) solid transparent; border-right: calc(4 * var(--rk)) solid transparent; }
.cui-r-first { top: calc(13 * var(--rk)); border-top: calc(5 * var(--rk)) solid var(--cui-ink); }
.cui-r-hang { top: calc(18 * var(--rk)); border-bottom: calc(5 * var(--rk)) solid var(--cui-ink); }
.cui-r-right { top: calc(18 * var(--rk)); border-bottom: calc(5 * var(--rk)) solid var(--cui-ink); }
.cui-r-left { top: calc(24 * var(--rk)); width: calc(8 * var(--rk)); height: calc(5 * var(--rk)); margin-left: calc(-4 * var(--rk));
  background: var(--cui-paper); border: var(--px) solid var(--cui-ink); box-sizing: border-box; }
.cui-r-first.cui-on, .cui-r-hang.cui-on, .cui-r-right.cui-on { filter: none; background: none; opacity: 0.6; }
/* a tab stop: its glyph, the stem on the stop */
.cui-r-tab { top: calc(15 * var(--rk)); width: calc(14 * var(--rk)); height: calc(14 * var(--rk)); margin-left: calc(-7 * var(--rk)); }
.cui-r-tab .cui-icon { width: var(--cui-icon); height: var(--cui-icon); margin: calc((14 * var(--rk) - 16 * var(--px)) / 2);
  display: block; image-rendering: pixelated; pointer-events: none; }   /* #536: the glyph at its own 16, centred on the stop */
.cui-r-tab.cui-rk-l { margin-left: calc(-4.8 * var(--rk)); }
.cui-r-tab.cui-rk-r { margin-left: calc(-9.2 * var(--rk)); }
/* a finger: the markers and the press areas round them half as big again */
@media (pointer: coarse) {
  .cui-ruler { --rk: calc(1.6 * var(--px)); }
  .cui-rmark::after { inset: calc(-5 * var(--rk)); }
}
/* the gallery's Icons: every shared glyph at 1x and 2x with its name */
.cuig-icons { display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); }
.cuig-iconcell { width: calc(64 * var(--px)); align-items: center; }
.cuig-iconpair { display: flex; align-items: flex-end; gap: calc(6 * var(--px)); }
.cuig-iconpair .cui-icon { width: var(--cui-icon); height: var(--cui-icon); image-rendering: pixelated; }
.cuig-iconpair .cui-icon.cuig-icon2 { width: var(--cui-icon-lg); height: var(--cui-icon-lg); }
.cuig-iconcell > figcaption { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a stack bar whose small parts keep a minimum width (CUI.stackBar opts.min), its legend across, a greyed part */
.cui-stack.cui-stackmin .cui-seg { flex-shrink: 1; }
.cui-legend.cui-legend-across { flex-direction: row; flex-wrap: wrap; gap: calc(2 * var(--px)) calc(10 * var(--px)); font-size: calc(9 * var(--px)); }
.cui-legend-across .cui-lrow { gap: calc(3 * var(--px)); }
.cui-legend-across .cui-lval { margin-left: calc(3 * var(--px)); }
.cui-seg.cui-dimseg, .cui-lrow .cui-key.cui-dimseg { opacity: .45; }

/* pies (T125): a limit's use; the four states in the System 7 palette */
.cui-pie { display: inline-block; vertical-align: middle; flex: none; }
.cui-pie .cui-pie-bg { fill: var(--cui-paper); }
.cui-pie .cui-pie-rim { fill: var(--cui-ink); }   /* #536: the rim is its own pixels, not a stroke */
.cui-pie-red .cui-pie-fill { fill: var(--cui-red); }
.cui-pie-orange .cui-pie-fill { fill: var(--cui-orange); }
.cui-pie-green .cui-pie-fill { fill: var(--cui-green); }
.cui-pie-blue .cui-pie-fill { fill: var(--cui-blue); }
.cui-pie .cui-pie-open { fill-opacity: 0.35; }
.cui-pie .cui-pie-none { fill-opacity: 0.15; }
/* #573: the inner disc of a two-ring pie has its own state */
.cui-pie .cui-pie-fill.cui-pie-in-red { fill: #dd0806; }
.cui-pie .cui-pie-fill.cui-pie-in-orange { fill: #ff6403; }
.cui-pie .cui-pie-fill.cui-pie-in-green { fill: #1fb714; }
.cui-pie .cui-pie-fill.cui-pie-in-blue { fill: #0000d4; }

/* ---- locked secrets in a message box (req-vault-lock, secrets.js) -------------------------------------------
 * A mirror of the box's text lies over it, its letters clear: only the dashed orange line under what Oscar found
 * and the tint of a locked value's chip show. It never takes a click; the box keeps its caret and keys. */
.cui-sanchor { position: relative; }
.cui-smirror { position: absolute; overflow: hidden; pointer-events: none; z-index: 1; box-sizing: border-box;
  margin: 0; border: 0; background: transparent; }
.cui-sinner { box-sizing: border-box; margin: 0; border: 0; color: transparent; white-space: pre-wrap;
  overflow-wrap: break-word; word-wrap: break-word; }
/* #435: the mark is clearly orange and not a squiggle, so it never reads as a spelling (red dots) or grammar mark:
   a thick band of long dashes with a dot between them, over a light orange wash. Drawn as a background, so the
   pattern is the same in every browser and on every wrapped line. In 1-bit (a monochrome screen, forced colours
   or print) the same dash-dot band is drawn in black: a pattern the spell check's even dots never make. */
.cui-smatch { color: transparent; border-bottom: 0;
  background-color: var(--cui-secure-mark-wash);
  background-image: repeating-linear-gradient(90deg, var(--cui-secure-mark) 0 calc(6 * var(--px)),
    transparent calc(6 * var(--px)) calc(8 * var(--px)), var(--cui-secure-mark) calc(8 * var(--px)) calc(10 * var(--px)),
    transparent calc(10 * var(--px)) calc(12 * var(--px)));
  background-repeat: repeat-x; background-position: 0 100%; background-size: 100% calc(2 * var(--px));
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@media (monochrome), print {
  .cui-smatch { background-color: transparent;
    background-image: repeating-linear-gradient(90deg, #000 0 calc(6 * var(--px)), transparent calc(6 * var(--px)) calc(8 * var(--px)),
      #000 calc(8 * var(--px)) calc(10 * var(--px)), transparent calc(10 * var(--px)) calc(12 * var(--px))); }
}
@media (forced-colors: active) {
  .cui-smatch { forced-color-adjust: none; background-color: transparent;
    background-image: repeating-linear-gradient(90deg, CanvasText 0 calc(6 * var(--px)), transparent calc(6 * var(--px)) calc(8 * var(--px)),
      CanvasText calc(8 * var(--px)) calc(10 * var(--px)), transparent calc(10 * var(--px)) calc(12 * var(--px))); }
}
.cui-slocked { color: transparent; background: var(--cui-secure-wash); box-shadow: 0 0 0 calc(1 * var(--px)) var(--cui-secure);
  border-radius: calc(2 * var(--px)); }
.cui-sguarded.cui-sbusy { cursor: progress; }
/* Lock, under a match the caret is in (keys and the TV remote) */
.cui-slockbtn { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: calc(3 * var(--px));
  height: calc(18 * var(--px)); padding: 0 calc(6 * var(--px)); border: calc(1 * var(--px)) solid var(--cui-ink); background: var(--cui-paper);
  font-family: var(--geneva); font-size: calc(10 * var(--px)); font-weight: bold; color: var(--cui-ink); cursor: default;
  box-shadow: calc(1 * var(--px)) calc(1 * var(--px)) 0 var(--cui-ink); }
.cui-slockbtn[hidden] { display: none; }
.cui-slockbtn > .cui-icon { width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); image-rendering: pixelated; }
.cui-slockbtn:focus { outline: calc(2 * var(--px)) solid var(--cui-secure); }
/* a locked value in a message on the page: the padlock and its label, Unlock and Edit on a tap */
.cui-schip { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); vertical-align: baseline;
  margin: 0 calc(1 * var(--px)); padding: 0 calc(4 * var(--px)); border: calc(1 * var(--px)) solid var(--cui-secure);
  border-radius: calc(3 * var(--px)); background: var(--cui-secure-tint); color: var(--cui-ink); font: inherit; line-height: 1.3; cursor: default;
  -webkit-appearance: none; appearance: none; }
.cui-schip > .cui-icon { width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); image-rendering: pixelated; }
.cui-schip:focus { outline: calc(2 * var(--px)) solid var(--cui-ink); }
.cui-sedit { display: flex; flex-direction: column; gap: calc(6 * var(--px)); min-width: calc(260 * var(--px)); }
.cui-sreveal { font-family: var(--cui-font-code); }
/* @mentions (#548): the names under a comment box, and each @Name in a comment */
.cui-mentionwrap { position: relative; display: flex; flex-direction: column; }
.cui-mentions { position: absolute; left: 0; top: 100%; z-index: 9000; display: flex; flex-direction: column;
  min-width: calc(140 * var(--px)); max-width: 100%; max-height: calc(160 * var(--px)); overflow-y: auto; padding: var(--px) 0;
  background: #fff; border: var(--px) solid #000; box-shadow: var(--cui-shadow); font-family: var(--chicago); font-size: calc(12 * var(--px)); }
.cui-mentions[hidden] { display: none; }
.cui-mentionitem { display: block; width: 100%; box-sizing: border-box; min-height: calc(18 * var(--px)); margin: 0;
  padding: var(--px) calc(8 * var(--px)); border: 0; background: #fff; color: #000; font: inherit; text-align: left;
  white-space: nowrap; -webkit-appearance: none; appearance: none; cursor: default; }
.cui-mentionitem.cui-on, .cui-mentionitem:hover { background: #000; color: #fff; }
.cui-mention { font-weight: bold; white-space: nowrap; }       /* as #531's: @Oscar in the moving rainbow */
.cui-mention.cui-mentionperson { color: var(--cui-blue); }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .cui-mention.cui-rainbow-text { color: #000; -webkit-text-fill-color: #000; background-image: none; animation: none; } }

/* #990: the one code input (ui.js codeInput): a box a digit, in fours, big enough for a finger and a remote */
.cui-code { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(4 * var(--px)); align-items: center; }
.cui-codegap { width: calc(8 * var(--px)); }
.cui-field.cui-digit {
  width: calc(26 * var(--px)); height: calc(34 * var(--px)); min-width: 0; text-align: center; font-family: var(--chicago);
  font-size: calc(22 * var(--px)); border: calc(2 * var(--px)) solid #000; background: #fff; color: #000; padding: 0;
}
html.dev-phone .cui-field.cui-digit { width: calc(22 * var(--px)); height: calc(30 * var(--px)); font-size: calc(18 * var(--px)); }