/* CDAN Media web portal: the System 7 / CDAN UI look (SPEC-media-server.md MS70a).
 *
 * Everything is measured in Mac pixels: calc(N * var(--px)). --px is the size of one Mac pixel in CSS px.
 * The media query below gives a first guess; app.js then snaps it to whole device pixels (2 device px per Mac
 * px on a laptop, 3 on a phone), so edges stay crisp. Colours are black and white like the Tab5's CDAN UI. */

/* Font files: the ONLY place their names appear. */
/* free lookalikes only (the user, 18 Oct: "free lookalikes"; freefonts/LICENSES.md): ChicagoFLF for Chicago, DejaVu Sans
   for Geneva. Apple's own are not redistributable, and asking for them first left two 404s on every page. */
@font-face { font-family: "CDAN Chicago"; src: url("freefonts/ChicagoFLF.woff") format("woff"), url("freefonts/ChicagoFLF.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "CDAN Geneva"; src: url("freefonts/DejaVuSans-latin.woff") format("woff"); font-weight: normal; font-display: swap; }
@font-face { font-family: "CDAN Geneva"; src: url("freefonts/DejaVuSans-Bold-latin.woff") format("woff"); font-weight: bold; font-display: swap; }
/* IBM Plex Mono stands in for Monaco (freefonts/LICENSES.md), as in Enchantments: every code, key and log line the same */
@font-face { font-family: "CDAN Monaco"; src: url("freefonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: normal; font-display: swap; }
@font-face { font-family: "CDAN Monaco"; src: url("freefonts/IBMPlexMono-700.woff2") format("woff2"); font-weight: bold; font-display: swap; }

:root {
  --px: 2px;
  --chicago: "CDAN Chicago", "Chicago", "ChicagoFLF", "Charcoal", system-ui, sans-serif;
  --geneva: "CDAN Geneva", "Geneva", "Verdana", system-ui, sans-serif;
  --monaco: "CDAN Monaco", "Monaco", "Menlo", "Consolas", monospace;
  --dim: #888;
  --desk-a: #777;
  --desk-b: #999;
  --menubar-h: calc(20 * var(--px));
  color-scheme: light;
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) { :root { --px: 1px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; overflow: hidden; background: var(--desk-a); }
body {
  font-family: var(--geneva);
  font-size: calc(10 * var(--px));
  color: #000;
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img { image-rendering: pixelated; }
button { font: inherit; color: inherit; }
p { margin: 0 0 calc(6 * var(--px)); }
hr { border: 0; border-top: var(--px) solid #000; margin: calc(10 * var(--px)) 0; }
.nojs { position: fixed; top: 40%; width: 100%; text-align: center; font-family: var(--chicago); font-size: 24px; }

/* ---- Menu bar and status strip ------------------------------------------------------------------------- */

#menubar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--menubar-h);
  display: flex; align-items: stretch;
  background: #fff; border-bottom: var(--px) solid #000;
  font-family: var(--chicago); font-size: calc(12 * var(--px));
  user-select: none; -webkit-user-select: none;
  z-index: 5000;
}
#menus { list-style: none; margin: 0; padding: 0 0 0 calc(8 * var(--px)); display: flex; }
.menu { position: relative; }
.mtitle {
  height: 100%; display: flex; align-items: center;
  padding: 0 calc(7 * var(--px)); border: 0; background: none;
  font-family: inherit; font-size: inherit; line-height: 1; cursor: default; white-space: nowrap;
}
.mtitle:focus-visible { outline: var(--px) dotted #000; outline-offset: calc(-2 * var(--px)); }
.mtitle.open { background: #000; color: #fff; }
.mtitle.open .micon { filter: invert(1); }
.micon { display: block; width: calc(16 * var(--px)); height: calc(16 * var(--px)); }

.mdrop {
  position: absolute; top: calc(19 * var(--px)); left: 0;
  margin: 0; padding: 0 0 var(--px); list-style: none;
  min-width: calc(150 * var(--px));
  max-height: calc(100vh - 30 * var(--px)); overflow-y: auto;
  background: #fff; border: var(--px) solid #000; box-shadow: var(--px) var(--px) 0 #000;
  z-index: 5001;
}
.mdrop.flip { left: auto; right: 0; }
.mitem {
  display: flex; align-items: center; width: 100%; height: calc(16 * var(--px));
  padding: 0 calc(16 * var(--px)); border: 0; background: none; text-align: left;
  font-family: inherit; font-size: inherit; white-space: nowrap; cursor: default; position: relative;
}
.mitem:hover:not(:disabled), .mitem:focus-visible { background: #000; color: #fff; outline: none; }
.mitem:disabled { color: var(--dim); }
/* an item's shortcut (#486): its own column at the right, the item's colour, so a dimmed item's key is dimmed with it */
.mitem .mkey { flex: none; margin-left: auto; padding-left: calc(20 * var(--px)); color: inherit; }
/* the person's picture and name over their own items at the end of Help (#523): a label, not an item */
.mwho { display: flex; align-items: center; gap: calc(4 * var(--px)); height: calc(16 * var(--px)); padding: 0 calc(16 * var(--px)) 0 calc(4 * var(--px));
  font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mwho img { width: auto; height: calc(11 * var(--px)); image-rendering: pixelated; flex: none; }
.mwho span { overflow: hidden; text-overflow: ellipsis; }
html.dev-phone .mwho { height: calc(34 * var(--px)); }
.mcheck { position: absolute; left: calc(4 * var(--px)); width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.mitem:hover:not(:disabled) .mcheck, .mitem:focus-visible .mcheck { filter: invert(1); }
.msep {
  height: var(--px); margin: calc(3 * var(--px)) 0;
  background: repeating-linear-gradient(90deg, #000 0 var(--px), transparent var(--px) calc(2 * var(--px)));
}

#strip {
  margin-left: auto; display: flex; align-items: center; gap: calc(10 * var(--px));
  padding: 0 calc(10 * var(--px)); border-left: var(--px) solid #000;
  font-family: var(--geneva); font-size: calc(9 * var(--px)); white-space: nowrap; overflow: hidden;
}
#strip:empty { display: none; }
/* req-nowplaying-icon: a play icon left of the status area while this browser plays something; it opens it */
#nowbtn { margin-left: auto; flex-shrink: 0; position: relative; z-index: 1; background: #fff; align-self: stretch; display: flex; align-items: center; padding: 0 calc(8 * var(--px));
  border: 0; border-left: var(--px) solid #000; background: transparent; cursor: default; }
#nowbtn[hidden] { display: none; }
#nowbtn img { width: calc(11 * var(--px)); height: calc(11 * var(--px)); image-rendering: pixelated; }
#nowbtn:active, #nowbtn:focus-visible { background: #000; outline: none; }
#nowbtn:active img, #nowbtn:focus-visible img { filter: invert(1); }
#nowbtn:not([hidden]) + #strip { margin-left: 0; }
/* the Application menu at the right of the bar (SPEC-desktop 3.9): the front app's icon, as System 7's */
#appmenu { list-style: none; margin: 0; padding: 0; display: flex; flex-shrink: 0; border-left: var(--px) solid #000; position: relative; z-index: 1; background: #fff; }
#appmenu[hidden] { display: none; }
#appmenu .mtitle { padding: 0 calc(6 * var(--px)); }
#appmenu .micon { image-rendering: pixelated; object-fit: contain; }
#appmenu .mdrop { left: auto; right: 0; }
/* the desktop clicked: the Finder is in front and every window behind it, its title bar quiet */
body.deskfront .win.front .titlebar { background-image: none; }
body.deskfront .win.front .wtitle { color: var(--dim); }
body.deskfront .win.front .closebox, body.deskfront .win.front .sizebox { visibility: hidden; }
/* the menu bar's player while music or a book plays with its window closed (app.js drawNowCtl) */
/* above the menus as the bell and Now Playing are: on a narrow bar the menus slide under it (menus-front, 3.9) */
#nowctl { margin-left: auto; flex-shrink: 0; min-width: 0; align-self: stretch; display: flex; align-items: stretch; border-left: var(--px) solid #000;
  position: relative; z-index: 1; background: #fff; }
#nowctl[hidden] { display: none; }
#nowctl:not([hidden]) + #strip { margin-left: 0; }
/* the title's box is one width whatever plays (#523, the user 31 Oct: "too much going on here can the names of whats
   playing be shorter"), so Play and Next never move: 96 Mac pixels on a PC, 64 on a phone, 80 on a TV (style below).
   Words that do not fit slide along inside it (app.js nowScroll); with reduced motion they are cut off at its edge */
#nowctl .nowtitle { flex: none; display: flex; align-items: center; width: calc(108 * var(--px)); min-width: 0; padding: 0 calc(6 * var(--px));
  border: 0; background: transparent; font: inherit; text-align: left;
  font-family: var(--geneva); font-size: calc(9 * var(--px)); white-space: nowrap; overflow: hidden; cursor: default; }
#nowctl .nowclip { display: block; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; }
#nowctl .nowtext { display: inline-block; white-space: nowrap; will-change: transform; }
#nowctl .nowtitle.slide .nowtext { animation: nowslide var(--nowtime, 10s) linear infinite; }
@keyframes nowslide {
  0%, 20% { transform: translateX(0); }
  50%, 70% { transform: translateX(var(--nowshift, 0)); }
  100% { transform: translateX(0); }
}
/* the box with its 6 a side: 96 + 12 on a PC, 64 + 12 on a phone, 80 + 12 on a TV */
html.dev-phone #nowctl .nowtitle { width: calc(76 * var(--px)); }
body.tv #nowctl .nowtitle { width: calc(92 * var(--px)); }
@media (prefers-reduced-motion: reduce) { #nowctl .nowtitle .nowtext { animation: none !important; transform: none !important; } }
#nowctl .nowglyph { flex-shrink: 0; display: flex; align-items: center; padding: 0 calc(4 * var(--px)); border: 0; background: transparent; cursor: default; }
#nowctl .nowglyph img { width: calc(11 * var(--px)); height: calc(11 * var(--px)); image-rendering: pixelated; }
#nowctl .nowglyph:disabled img { opacity: .35; }
#nowctl button:active, #nowctl button:focus-visible { background: #000; color: #fff; outline: none; }
#nowctl button:active img, #nowctl button:focus-visible img { filter: invert(1); }
body.tv #nowctl button:focus { background: #000; color: #fff; outline: none !important; box-shadow: none; }
.sitem { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); }
.sitem img { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.sitem.warn { font-weight: bold; }
/* #532: Oscar's loader (the kit's .cui-spool) in the menu bar's strip, the height of its other marks */
.sitem .cui-spool, .sitem .cui-spoolstill { width: calc(11 * var(--px)); font-size: calc(11 * var(--px)); }
/* the one activity item (req-one-activity-indicator): one loader, the count, a word and the percentage; the loader
   turns only while something runs */
.actitem[hidden] { display: none; }
.actitem .actmark { display: inline-flex; align-items: center; flex-shrink: 0; }
.actitem .actmark .cui-icon { width: calc(11 * var(--px)); height: calc(11 * var(--px)); }
.actitem span:empty { display: none; }
.actitem .actp { font-variant-numeric: tabular-nums; }
.qgroups { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.qgroup .shead { margin: calc(6 * var(--px)) 0 calc(4 * var(--px)); }
.qgroup:first-child .shead { margin-top: 0; }
.form { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.form .lab { display: flex; flex-direction: column; align-items: stretch; gap: calc(2 * var(--px)); }

.formrow { display: flex; align-items: center; gap: calc(8 * var(--px)); }
.formrow.end { justify-content: flex-end; }
/* #326: a form row of controls keeps the design system's space under it before what follows (SPEC-design-system.md 4.1) */
.formrow:not(:last-child) { margin-bottom: var(--cui-space-under); }
/* #326: Settings > Oscar's always-allowed box ends with its Dog Collars row; the triggers follow it */
.oscallows:not(:last-child) { margin-bottom: var(--cui-space-under); }
.formrow.wrap { flex-wrap: wrap; }      /* accounts: button rows that fold on a phone */

/* System 7 check box: a black-outlined white square, an X when checked (no browser check boxes anywhere) */
input[type=checkbox] {
  appearance: none; -webkit-appearance: none; margin: 0; flex: 0 0 auto;
  width: calc(12 * var(--px)); height: calc(12 * var(--px)); border: var(--px) solid #000; background: #fff; cursor: default;
}
input[type=checkbox]:checked {
  background:
    linear-gradient(45deg, transparent calc(50% - .5 * var(--px)), #000 calc(50% - .5 * var(--px)) calc(50% + .5 * var(--px)), transparent calc(50% + .5 * var(--px))),
    linear-gradient(-45deg, transparent calc(50% - .5 * var(--px)), #000 calc(50% - .5 * var(--px)) calc(50% + .5 * var(--px)), transparent calc(50% + .5 * var(--px))),
    #fff;
}
input[type=checkbox]:active { outline: var(--px) solid #000; outline-offset: 0; }
input[type=checkbox]:focus-visible { outline: var(--px) dotted #000; outline-offset: calc(2 * var(--px)); }
.loader { display: grid; place-items: center; min-height: calc(120 * var(--px)); height: 100%; }
body.waitcur, body.waitcur * { cursor: url(glyphs/watch-cursor.svg) 8 8, wait !important; }
.sbtn:active { background: #000; color: #fff; }
.sbtn:active img { filter: invert(1); }
/* progress rows: the kit's bar for a real fraction, Oscar's loader in its place while the length is unknown (#532) */
.qlist { display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.qrow { display: flex; flex-direction: column; gap: calc(3 * var(--px)); padding-bottom: calc(6 * var(--px)); border-bottom: var(--px) solid #000; }
.qname { font-family: var(--chicago); font-size: calc(11 * var(--px)); overflow-wrap: anywhere; }
.qstat { font-size: calc(10 * var(--px)); }
/* slowed for a stream, a sync or an upload: a mark, not words (req-torrent-port-open, 26 Oct) */
.qslow { width: var(--cui-icon); height: var(--cui-icon); margin: calc(-3 * var(--px)); vertical-align: -0.1em; margin-left: 0.4em; }
/* zoom rectangles: the dotted outlines a window opens out of and closes into */
.zoomrect { position: fixed; z-index: 9000; pointer-events: none; box-sizing: border-box;
  border: var(--px) dotted #fff; mix-blend-mode: difference; }   /* inverts what is under it, as XOR */
/* menu flash: the chosen item blinks */
.mitem.flash { background: #fff !important; color: #000 !important; }

/* ---- Desktop and windows ------------------------------------------------------------------------------- */

#desktop {
  position: fixed; top: var(--menubar-h); left: 0; right: 0; bottom: 0; overflow: hidden;
  overflow: clip;                         /* #302: never scrolled by a focus or scrollIntoView, windows stay below the bar */
  background-color: var(--desk-b);
  /* the grey checker: one Mac pixel per square */
  background-image: conic-gradient(var(--desk-a) 25%, var(--desk-b) 0 50%, var(--desk-a) 0 75%, var(--desk-b) 0);
  background-size: calc(2 * var(--px)) calc(2 * var(--px));
}

/* the Minimise bar (#245; #391, the user: compact, no box round each preview, the names in white, the whole window
   in a portrait preview, centred and only as wide as what is on it, the desktop showing at its sides): a black tray
   floating at the foot of the desktop; the windows keep above it (app.js deskSize) */
:root { --minbar-h: calc(66 * var(--px)); }
#minbar {
  position: fixed; left: 0; right: 0; bottom: calc(4 * var(--px)); z-index: 4900;
  display: flex; justify-content: center; pointer-events: none;
}
#minbar[hidden] { display: none; }
body.tv #minbar { left: var(--safe-x); right: var(--safe-x); bottom: calc(var(--safe-y) + 4 * var(--px)); }
.mintray {
  pointer-events: auto; display: flex; align-items: flex-start; gap: calc(8 * var(--px));
  padding: calc(5 * var(--px)) calc(8 * var(--px)); max-width: calc(100% - 24px); overflow-x: auto; overflow-y: hidden;
  background: #000; color: #fff; box-sizing: border-box;
}
.minitem {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--px));
  padding: 0; border: 0; background: none; color: #fff; cursor: default;
}
.minprev { position: relative; display: block; overflow: hidden; pointer-events: none; }
/* the window copied whole: none of a live window's sizing, hiding or phone filling applies to it */
#minbar .win.minshot {
  display: flex !important; position: absolute !important; inset: auto !important;
  left: var(--shot-x) !important; top: var(--shot-y) !important;
  width: var(--shot-w) !important; height: var(--shot-h) !important;
  min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important;
  transform: scale(var(--shot-s)); transform-origin: 0 0; resize: none; pointer-events: none; box-shadow: none;
}
.minprev .minblank { display: block; width: 100%; height: 100%; background: #000; }
.minname {
  display: block; max-width: calc(56 * var(--px)); font-family: var(--geneva); font-size: calc(9 * var(--px));
  line-height: 1.2; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.minitem:hover .minname, .minitem:focus-visible .minname { background: #fff; color: #000; }   /* chosen: the name inverted, as a Mac icon's */
.minitem:active .minprev, .minitem:focus-visible .minprev { outline: var(--px) dotted #fff; outline-offset: var(--px); }
.minitem:focus { outline: none; }

/* window chrome and scroll bars: the UI kit, web/ui/ui.css */

/* ---- Controls ------------------------------------------------------------------------------------------ */

/* Controls are System 7 pixel art (17 Oct, "the buttons look modern"): 9-slice sprites in glyphs/ drawn pixel by
   pixel, one sprite pixel = one Mac pixel (--px is a whole number of device pixels), never border-radius. */

/* the default button's thick ring, as pixels */

/* the glyph exactly in the middle of the button at every size (18 Oct: the player's sat low): placed on the button's
   centre rather than laid out, so a glyph larger than the space inside the bevel cannot push it down; each glyph is
   centred in its own 16 x 16 viewBox */

/* the scrubber is a System 7 scroll bar: 50 % grey dither track, white scroll box */
.vctl .seek { user-select: none; -webkit-user-select: none; }
.vbox { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; background: #fff; }
.vbox:fullscreen { background: #000; }
.vwrap { position: relative; display: flex; flex: 1 1 auto; min-height: 0; }
/* the controller under the picture, QuickTime 1.x style: bevel buttons and scroll bars, one row */
.vctl { display: flex; align-items: center; gap: calc(4 * var(--px)); padding: calc(3 * var(--px)); background: #ddd;
  border-top: var(--px) solid #000; }
.vctl .seek { flex: 1 1 auto; height: calc(16 * var(--px)); }
.vctl .vol { flex: 0 0 calc(60 * var(--px)); min-width: 0; }
.vtime { font-family: var(--geneva); font-size: calc(10 * var(--px)); white-space: nowrap; min-width: calc(70 * var(--px)); text-align: center; }
.vwrap .video { height: 100%; }
/* Oscar's loader over the picture (req-loader-alignment, #532): an overlay over the whole video area that centres its
   box by layout, not by a 50% transform */
.vbuf { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; pointer-events: none; }
.vwrap.buffering .vbuf { display: flex; }
.vbufbox { display: flex; flex-direction: column; align-items: center; max-width: calc(100% - 16px); box-sizing: border-box;
  padding: calc(6 * var(--px)); background: #fff;
  border: var(--px) solid #000; line-height: 0; }
.vbuf .cui-spool { font-size: calc(20 * var(--px)); line-height: 1; }

/* label + control pairs (item choices, settings, player) */
.choices { display: grid; grid-template-columns: auto 1fr; gap: calc(6 * var(--px)) calc(8 * var(--px)); align-items: center; justify-items: start; margin: calc(8 * var(--px)) 0; }
.lab { display: contents; }
.lab > span { font-size: calc(10 * var(--px)); }
.buttons { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); align-items: center; margin-top: calc(6 * var(--px)); }

/* ---- Text bits ----------------------------------------------------------------------------------------- */

.shead {
  margin: calc(12 * var(--px)) 0 calc(6 * var(--px)); padding-bottom: calc(2 * var(--px));
  font-family: var(--chicago); font-size: calc(12 * var(--px)); font-weight: normal;
  border-bottom: var(--px) solid #000;
}
.shead:first-child { margin-top: 0; }
.listhead, .hint { font-size: calc(9 * var(--px)); color: #333; margin: 0 0 calc(8 * var(--px)); }
.note { font-size: calc(10 * var(--px)); margin: calc(4 * var(--px)) 0; }
/* the System 7 notice: icon, pixel border with the 1 px drop shadow of a Mac dialog, Chicago, a few words */
.notice { display: flex; align-items: center; gap: calc(8 * var(--px)); margin: calc(6 * var(--px)) 0;
  padding: calc(6 * var(--px)) calc(10 * var(--px)); background: #fff; border: var(--px) solid #000;
  box-shadow: var(--px) var(--px) 0 #000; font-family: var(--chicago); font-size: calc(12 * var(--px));
  width: fit-content; max-width: 100%; }
.notice .nicon { flex: 0 0 auto; width: calc(32 * var(--px)); height: calc(32 * var(--px)); image-rendering: pixelated; }
.notice .ntext { min-width: 0; overflow-wrap: anywhere; }
.notice .nshut { margin-left: auto; flex: 0 0 auto; }
.grid + .notice, .wbody > .notice:only-child { align-self: flex-start; }
.pnote .notice, .uplist .notice { margin: calc(4 * var(--px)) 0; }
/* a Series that looks like a Movie, or the reverse: the warning with its two answers under it */
.typewarn { margin: calc(6 * var(--px)) 0; }
.typewarn .notice { margin: 0 0 calc(4 * var(--px)); }
.qrow .typewarn .notice { font-size: calc(10 * var(--px)); }
.err { display: flex; gap: calc(8 * var(--px)); align-items: flex-start; font-size: calc(10 * var(--px)); margin: calc(4 * var(--px)) 0; }
.err img { flex: 0 0 auto; width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.findrow { display: flex; gap: calc(8 * var(--px)); align-items: center; margin-bottom: calc(10 * var(--px)); }
.findrow .cui-field, .findrow .cui-field { flex: 1 1 auto; }

/* ---- Poster tiles (Mac-palette minis) ------------------------------------------------------------------ */

.grid { display: grid; grid-template-columns: repeat(auto-fill, calc(72 * var(--px))); gap: calc(10 * var(--px)) calc(6 * var(--px)); }
.strip { display: flex; gap: calc(8 * var(--px)); overflow-x: auto; padding-bottom: calc(4 * var(--px)); }
.strip .tile { flex: 0 0 auto; }
.tile {
  display: flex; flex-direction: column; align-items: center;
  width: calc(72 * var(--px)); padding: 0; border: 0; background: none; text-align: center; cursor: pointer;
}
.tile:focus-visible { outline: none; }
.tile:focus-visible .tt { background: #000; color: #fff; }
.pic { position: relative; width: calc(66 * var(--px)); height: calc(98 * var(--px)); border: var(--px) solid #000; background: #ccc; overflow: hidden; }
.pic img { display: block; width: calc(64 * var(--px)); height: calc(96 * var(--px)); object-fit: cover; }
.pic.square { height: calc(66 * var(--px)); }
.addtile .pic { display: grid; place-items: center; background: #fff; border-style: dotted; }
/* one plus for every library's Add tile, whatever the shape of its covers: the kit's plus glyph at 32 Mac pixels,
   never stretched by .pic img or .pic.square img (bug: Books' plus came out twice the size of Films') */
.tile.addtile .pic .plus { width: calc(32 * var(--px)); height: calc(32 * var(--px)); object-fit: contain; image-rendering: pixelated; }
.addtile:active .pic { background: #000; }
.addtile:active .plus { filter: invert(1); }
.uplist { display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.uprow { display: flex; flex-direction: column; gap: calc(3 * var(--px)); padding-bottom: calc(6 * var(--px)); border-bottom: var(--px) solid #000; }
.upname { font-family: var(--chicago); font-size: calc(11 * var(--px)); overflow-wrap: anywhere; }
.upstat { font-size: calc(10 * var(--px)); }
.pic.square img { height: calc(64 * var(--px)); }
.tile:active .pic { filter: invert(1); }
.tile .pic > .cui-playnum { position: absolute; left: calc(2 * var(--px)); top: calc(2 * var(--px)); background: #fff; border: var(--px) solid #000; }
.nopic {
  position: absolute; inset: 0; display: grid; place-items: center; padding: calc(4 * var(--px));
  background: #fff; font-family: var(--chicago); font-size: calc(12 * var(--px)); overflow: hidden; overflow-wrap: anywhere;
}
.tt, .ts { display: block; max-width: 100%; font-size: calc(9 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt { margin-top: calc(3 * var(--px)); padding: 0 calc(2 * var(--px)); }
.ts { color: #444; }
.prog { position: absolute; left: calc(3 * var(--px)); right: calc(3 * var(--px)); bottom: calc(3 * var(--px)); height: calc(5 * var(--px)); border: var(--px) solid #000; background: #fff; }
.prog > span { display: block; height: 100%; background: #000; }
.seen {
  position: absolute; top: 0; right: 0; display: grid; place-items: center;
  width: calc(12 * var(--px)); height: calc(12 * var(--px));
  background: #fff; border-left: var(--px) solid #000; border-bottom: var(--px) solid #000;
}
.seen img { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }

/* ---- List rows (episodes, tracks, queue) --------------------------------------------------------------- */

.list { border: var(--px) solid #000; }

.lnum { flex: 0 0 calc(18 * var(--px)); text-align: right; font-size: calc(9 * var(--px)); }

/* ---- Item window ----------------------------------------------------------------------------------------- */

.backdrop { margin: calc(-8 * var(--px)) calc(-10 * var(--px)) calc(8 * var(--px)); border-bottom: var(--px) solid #000; }
.backdrop img { display: block; width: 100%; max-height: calc(150 * var(--px)); object-fit: cover; image-rendering: pixelated; }
.ihead { display: flex; gap: calc(10 * var(--px)); align-items: flex-start; }
.poster { display: block; flex: 0 0 auto; width: calc(100 * var(--px)); border: var(--px) solid #000; image-rendering: pixelated; }
.poster.mini { width: calc(66 * var(--px)); image-rendering: pixelated; }
.iinfo { flex: 1 1 auto; min-width: 0; }
.ititle { margin: 0 0 calc(4 * var(--px)); font-family: var(--chicago); font-size: calc(12 * var(--px)); font-weight: normal; }
.facts { font-size: calc(9 * var(--px)); margin: 0 0 calc(4 * var(--px)); }
.plot { font-size: calc(10 * var(--px)); line-height: 1.4; margin: calc(10 * var(--px)) 0 calc(6 * var(--px)); }
.cast { font-size: calc(9 * var(--px)); line-height: 1.4; }

/* ---- Video player ------------------------------------------------------------------------------------- */

.playerwin .wbody { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.video { display: block; flex: 1 1 auto; min-height: 0; width: 100%; background: #000; }
.pctl {
  flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--px)) calc(8 * var(--px));
  padding: calc(6 * var(--px)) calc(8 * var(--px)); border-top: var(--px) solid #000;
}
.pnote { flex: 0 0 auto; margin: 0; padding: 0 calc(8 * var(--px)) calc(6 * var(--px)); font-size: calc(9 * var(--px)); }

/* ---- Music player --------------------------------------------------------------------------------------- */

.np { display: flex; gap: calc(10 * var(--px)); align-items: flex-start; }
.cover { flex: 0 0 auto; width: calc(66 * var(--px)); height: calc(66 * var(--px)); border: var(--px) solid #000; background: #ccc; }
.cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.npinfo { min-width: 0; padding-top: calc(4 * var(--px)); }
.nptitle { font-family: var(--chicago); font-size: calc(12 * var(--px)); margin-bottom: calc(4 * var(--px)); overflow-wrap: anywhere; }
.npsub { font-size: calc(10 * var(--px)); overflow-wrap: anywhere; }
.npseek { margin: calc(10 * var(--px)) 0 calc(4 * var(--px)); }
.times { display: flex; justify-content: space-between; margin-top: calc(2 * var(--px)); font-size: calc(9 * var(--px)); }
.npctl { display: flex; justify-content: center; gap: calc(10 * var(--px)); margin: calc(6 * var(--px)) 0 calc(8 * var(--px)); }
.np + .npseek + .npctl + .pnote { padding: 0 0 calc(6 * var(--px)); }

/* ---- Admin ---------------------------------------------------------------------------------------------- */

.batchhead { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--px)); margin: calc(6 * var(--px)) 0; font-size: calc(10 * var(--px)); }
.drive { margin-bottom: calc(12 * var(--px)); }
.drive.offline { color: var(--dim); }
.dhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(8 * var(--px)); margin-bottom: calc(3 * var(--px)); font-size: calc(10 * var(--px)); }
.dhead b { font-family: var(--chicago); font-size: calc(12 * var(--px)); font-weight: normal; }
.upnow { display: flex; flex-direction: column; gap: calc(2 * var(--px)); margin-bottom: calc(10 * var(--px)); font-size: calc(10 * var(--px)); overflow-wrap: anywhere; }
.upkinds { margin-top: calc(3 * var(--px)); font-size: calc(9 * var(--px)); color: var(--dim); }

/* ---- Faces ---------------------------------------------------------------------------------------------- */

.egrid { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); margin-bottom: calc(8 * var(--px)); }
.etile {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--px));
  font-size: calc(9 * var(--px)); text-align: center; color: #000;
}
.etile figcaption { max-width: calc(100 * var(--px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the Mac set is drawn in Mac pixels, so a 96 px face is 2x on a laptop, 3x on a phone */
.e96 { width: calc(96 * var(--px)); height: calc(96 * var(--px)); object-fit: contain; }
.e32 { width: calc(32 * var(--px)); height: calc(32 * var(--px)); object-fit: contain; }
.ptile img, .ptile video { width: calc(96 * var(--px)); height: calc(96 * var(--px)); object-fit: contain; image-rendering: auto; }

/* ---- GIFs ----------------------------------------------------------------------------------------------- */

.ggrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(140 * var(--px)), 1fr)); gap: calc(10 * var(--px)); }
.gtile { min-width: 0; padding: calc(4 * var(--px)); border: var(--px) solid #000; }
.gtile .tt { margin-top: calc(3 * var(--px)); padding: 0; text-align: left; font-size: calc(10 * var(--px)); }
.gtile .ts { text-align: left; }
.gmedia {
  display: grid; place-items: center; height: calc(90 * var(--px)); overflow: hidden;
  background: #000; color: #fff; font-size: calc(9 * var(--px));
}
.gmedia video, .gmedia img { display: block; max-width: 100%; max-height: 100%; image-rendering: auto; }
.gmedia video { cursor: pointer; }
.gattr { font-size: calc(9 * var(--px)); color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.glinks { display: flex; flex-wrap: wrap; gap: calc(3 * var(--px)) calc(8 * var(--px)); margin-top: calc(3 * var(--px)); }
.glinks .cui-link { margin: 0; font-size: calc(9 * var(--px)); }
.pickbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--px));
  margin-bottom: calc(8 * var(--px)); padding: calc(4 * var(--px)) calc(6 * var(--px));
  border: var(--px) dotted #000; font-size: calc(10 * var(--px));
}
.qrow { cursor: default; }
.qrow:active { background: #fff; color: #000; }
.qrow .cui-btn { flex: 0 0 auto; }

/* ---- Alerts, About -------------------------------------------------------------------------------------- */

.sharebox { display: grid; gap: calc(6 * var(--px)); margin-top: calc(8 * var(--px)); }
.sharefield { width: 100%; }

.about { display: flex; gap: calc(12 * var(--px)); }
.bigicon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); flex: 0 0 auto; }
.about h1 { margin: 0 0 calc(6 * var(--px)); font-family: var(--chicago); font-size: calc(12 * var(--px)); font-weight: normal; }

/* ---- Phones: one window fills the screen, the Window menu switches ----------------------------------- */

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .win { resize: none; }
  body.hasmin .win:not(.sz-s):not(.sz-m) { bottom: var(--minbar-space, 0px); }   /* above the Minimise bar (#391) */
  /* Large (and a window not sized) fills the screen; Small and Medium keep the size box's share and their frame */
  .win:not(.sz-s):not(.sz-m) {
    left: 0 !important; top: 0 !important; right: 0; bottom: 0;
    width: auto !important; height: auto !important;
    border-width: 0; box-shadow: none;
  }
  .sizebox::after { content: ""; position: absolute; inset: -10px; }
  .win:not(.front) { display: none; }
  .closebox::after { content: ""; position: absolute; inset: -10px; }
  .minbox { left: calc(32 * var(--px)); }
  .minbox::after { content: ""; position: absolute; inset: -10px -10px -10px -4px; }
  #menus { padding-left: calc(4 * var(--px)); }
  .mtitle { padding: 0 calc(5 * var(--px)); }
  .sitem.opt { display: none; }
  .actitem .actc:not(:empty) + .actw { display: none; }   /* a phone: the watch, the count and the percentage */
  #strip:not(:has(.sitem:not(.opt))) { display: none; }   /* only hidden items: no empty box at the right */
  .vctl .vol { display: none; }                              /* phones have their own volume keys */
  .grid { justify-content: space-between; }                  /* the columns fill the width, no gap at the right */
  /* iOS zooms into any field under 16 CSS px */

}

/* Admin > Drives: one bar per drive (library share per kind, other, free) with the fill line */
.dlegend { display: flex; flex-wrap: wrap; gap: calc(12 * var(--px)); margin-bottom: calc(8 * var(--px)); font-size: calc(10 * var(--px)); }
.dkey { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); }
.dkey .sw { display: inline-block; width: calc(12 * var(--px)); height: calc(8 * var(--px)); border: var(--px) solid #000; }
.dbar { position: relative; display: flex; height: calc(16 * var(--px)); border: var(--px) solid #000; background: #fff; }
.dbar.over { box-shadow: 0 0 0 var(--px) #000; }
.dbar.offline { opacity: .4; }
.dbar .dseg { height: 100%; flex: none; }
.cui-stack.dbar { overflow: visible; }
.dbar .mark { position: absolute; top: calc(-3 * var(--px)); bottom: calc(-3 * var(--px)); width: var(--px); background: #c00; }
.dseg.k-movies, .sw.k-movies { background: #000; }
.dseg.k-shows, .sw.k-shows { background: repeating-linear-gradient(45deg, #000 0 var(--px), #fff var(--px) calc(3 * var(--px))); }
.dseg.k-music, .sw.k-music { background: repeating-linear-gradient(0deg, #000 0 var(--px), #fff var(--px) calc(2 * var(--px))); }
.dseg.k-gifs, .dseg.k-incoming { background: #555; }
.dseg.k-other, .sw.k-other { background: #aaa; }
.sw.k-free { background: #fff; }
/* System > Memory: the bar with its keys under it, on the row itself */
.srow.smem .shd { align-items: start; }
.mstack { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: calc(3 * var(--px)); padding: calc(3 * var(--px)) 0; }
.mstack .cui-stack.smembar { width: 100%; height: calc(10 * var(--px)); }
.mstack.near .cui-seg.cui-pat-0 { background: #c80; }
.mstack.full .cui-seg.cui-pat-0 { background: #c00; }
/* Join window and Share dialog (req-portal-share-magic) */
.joinbox { display: grid; grid-template-columns: auto 1fr; column-gap: calc(12 * var(--px)); row-gap: calc(6 * var(--px)); align-items: start; }
.joinbox .bigicon { grid-row: 1 / span 3; }
.joinbox .lab { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.joinbox .cui-field, .joinbox .cui-field { width: 100%; box-sizing: border-box; }
.jstatus { grid-column: 2; }
.jstatus:empty { display: none; }
.sharegrid { display: grid; grid-template-columns: auto 1fr; gap: calc(6 * var(--px)) calc(10 * var(--px)); align-items: center; justify-items: start; }
.sharegrid > span { font-size: calc(10 * var(--px)); }
.sharegrid .cui-field { width: 100%; box-sizing: border-box; }
/* Admin > Configuration (#51) and the tabs of Admin's grouped windows (#48) */
.cfghead { font-size: calc(11 * var(--px)); font-weight: bold; margin: calc(8 * var(--px)) 0 calc(2 * var(--px)); }
.cfggrid .cfgset { font-weight: bold; }
.cfgctl { display: flex; align-items: center; gap: calc(6 * var(--px)); flex-wrap: wrap; }
.cfgmark { font-size: calc(9 * var(--px)); color: var(--dim, #555); }
.admtabs { margin: 0 0 calc(6 * var(--px)); }
.admgroup { display: flex; gap: calc(8 * var(--px)); align-items: flex-start; min-height: 100%; }
.cui-seg.admside { display: flex; flex-direction: column; gap: calc(2 * var(--px)); flex: none; margin: 0;
  position: sticky; top: 0; }
.cui-seg.admside .cui-segb { display: block; text-align: left; min-width: calc(96 * var(--px)); border-radius: 0;
  padding: calc(4 * var(--px)) calc(8 * var(--px)); }
.admpane { flex: 1; min-width: 0; }
@media (max-width: 700px) {
  .admgroup { flex-direction: column; }
  .cui-seg.admside { flex-direction: row; flex-wrap: wrap; position: static; }
  .cui-seg.admside .cui-segb { min-width: 0; }
}
/* a TV's bigger type leaves the pane too narrow beside the list (People's columns went): across the top there too */
html.dev-tv .admgroup { flex-direction: column; }
html.dev-tv .cui-seg.admside { flex-direction: row; flex-wrap: wrap; position: static; }
html.dev-tv .cui-seg.admside .cui-segb { min-width: 0; }
/* People (SPEC-desktop 5.8): the feature groups as ticks with their glyphs, two across where there is room */
.groupticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150 * var(--px)), 1fr)); gap: calc(4 * var(--px)) calc(10 * var(--px)); margin: calc(4 * var(--px)) 0 calc(8 * var(--px)); }
.groupticks .cui-check { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.groupticks .gicon { width: calc(16 * var(--px)); height: calc(16 * var(--px)); image-rendering: pixelated; order: 1; }
.groupticks .cui-check > span { order: 2; }
.peopletools { margin-bottom: calc(4 * var(--px)); }
.permgrid .listhead { margin-top: calc(6 * var(--px)); }
.rolewin .formrow.wrap { gap: calc(12 * var(--px)); margin: calc(4 * var(--px)) 0; }
.personwin .cui-seg { margin-bottom: calc(4 * var(--px)); }
.personacts { margin-top: calc(8 * var(--px)); }
.sharebox .formrow { flex-wrap: wrap; }
/* a list's column of buttons (Share, Account, People, Find Subtitles): a little room between them */
.sortlist .cui-lvtext > .cui-btn + .cui-btn { margin-left: calc(4 * var(--px)); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; opacity: 0; }
/* the + tile's pop-up menu and Import from Link (req-portal-import-link) */
.tilemenu { position: fixed; font-family: var(--chicago); font-size: calc(12 * var(--px)); }
.qstat:has(.cui-btn) { display: flex; align-items: center; justify-content: space-between; }
.qrow .cui-btn.cui-small { height: calc(20 * var(--px)); font-size: calc(10 * var(--px)); }
/* the Join window's paste box: a whole magic link, wrapped anywhere, in a fixed-width face */
.cui-field.linkbox { min-height: 0; resize: none; font-family: var(--monaco);
  font-size: calc(9 * var(--px)); line-height: 1.3; word-break: break-all; overflow-wrap: anywhere; white-space: pre-wrap; }
/* Faces and GIFs (req-portal-emoji-gif): photo previews, a section per person, Mac-filtered pictures stay crisp */
.facethumbs { display: flex; gap: calc(4 * var(--px)); flex-wrap: wrap; }
.facethumbs:empty { display: none; }
.facethumbs img { width: calc(48 * var(--px)); height: calc(48 * var(--px)); object-fit: cover; border: var(--px) solid #000; }
.person { border-top: var(--px) solid #000; padding: calc(6 * var(--px)) 0; }
.phead { display: flex; align-items: baseline; gap: calc(8 * var(--px)); margin-bottom: calc(4 * var(--px)); }
.pname { font-family: var(--chicago); font-size: calc(12 * var(--px)); }
.pstate { font-size: calc(10 * var(--px)); color: #333; }
.pbusy { display: flex; align-items: center; gap: calc(8 * var(--px)); }
.pbar { flex: 1 1 auto; display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
img.pix, .etile img, .gmedia img { image-rendering: pixelated; }
.gmedia img.pix { width: 100%; height: auto; }
.phead .pdel { margin-left: auto; height: calc(20 * var(--px)); font-size: calc(10 * var(--px)); }
/* audiobooks: the player in a book's window */
.bookpanel { display: flex; flex-direction: column; gap: calc(6 * var(--px)); margin-top: calc(8 * var(--px)); }
.btimes { display: flex; justify-content: space-between; }
.bctl { display: flex; align-items: center; gap: calc(6 * var(--px)); flex-wrap: wrap; }
.joinurl { flex: 1 1 auto; cursor: pointer; }
/* Invite (SPEC-desktop 5.9): the link, the big Copy, the QR code beside the code, Send's To */
.invitebox .invitelink { width: 100%; }
.invitebox .invitecopy { min-width: calc(120 * var(--px)); }
.inviterow { display: flex; gap: calc(12 * var(--px)); align-items: center; flex-wrap: wrap; margin: calc(6 * var(--px)) 0; }
.inviteqrbox { flex: 0 0 auto; }
.inviteqr { display: block; width: calc(132 * var(--px)); height: calc(132 * var(--px)); }
.invitecode { font-family: var(--chicago); letter-spacing: calc(1 * var(--px)); }
.invitebox .inviteto { flex: 1 1 auto; min-width: 0; }
.invitehint { min-height: calc(4 * var(--px)); }
.cui-field.linkbox.msgbox { word-break: normal; overflow-wrap: break-word; }   /* words whole; the block stays monospace */

.tsearch { margin-top: calc(6 * var(--px)); }
.tssrc { flex: 1 1 auto; min-width: 0; }
.tsurl { flex: 1 1 auto; }
.itemedit .eyear, .itemedit .eseason { width: calc(64 * var(--px)); flex: 0 0 auto; }
.iback { margin-bottom: calc(4 * var(--px)); }

/* Quality pop-up with pictures (req-mac-quality-dropdown) */

/* Generating: m:ss under the loader, and the Mac picture never smoothed */
.vbufbox { text-align: center; }
.vbuf .cui-spool { display: block; }
.vgen { display: none; margin-top: calc(6 * var(--px)); font-family: var(--chicago); font-size: calc(12 * var(--px));
  line-height: calc(15 * var(--px)); color: #000; white-space: normal; text-align: center; }
.vwrap.gen .vgen { display: block; }
/* req-generating-timer: on the black picture, the words are white inside a white outline, the loader coral (no white
   patch); the line height is its own so the box fits the text exactly */
.vwrap.gen .vbufbox { background: #000; border-color: #fff; line-height: calc(15 * var(--px)); padding: calc(6 * var(--px)) calc(10 * var(--px)); }
.vwrap.gen .vgen { color: #fff; font-variant-numeric: tabular-nums; }
.vwrap.gen { background: #000; }
.vwrap.macpix { align-items: center; justify-content: center; background: #000; }
.vwrap.macpix .video { flex: 0 0 auto; image-rendering: pixelated; image-rendering: crisp-edges; }
/* Sleep timer (req-sleep-timer) */
.sleeprow { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--px)); margin: calc(6 * var(--px)) 0; }
.sleepleft { font-family: var(--chicago); font-size: calc(12 * var(--px)); min-width: calc(40 * var(--px)); }
.vbox.idle .vctl { display: none; }
.vbox.idle, .vbox.idle * { cursor: none; }
/* the player hides the pointer while a film plays: that wins over the watch cursor, in full screen too */
body.waitcur .vbox.idle, body.waitcur .vbox.idle *, .vbox.idle:fullscreen, .vbox.idle:fullscreen * { cursor: none !important; }
.grid { align-items: start; }        /* every tile's picture at the top of its row, labels on one line */
/* Playlists (req-portal-playlists): a track row with Up, Down and Remove at its end; the name dialog's field */
.plrow { display: flex; align-items: stretch; background: #fff; border-bottom: var(--px) solid #000; }
.plrow:last-child { border-bottom: 0; }
.plrow .lrow { flex: 1 1 auto; min-width: 0; border-bottom: 0; }
.plrow .plposter { flex: 0 0 auto; width: calc(20 * var(--px)); height: calc(30 * var(--px)); object-fit: cover; margin: calc(2 * var(--px)) calc(4 * var(--px)) calc(2 * var(--px)) 0; border: var(--px) solid #000; image-rendering: pixelated; }
.plrow > .cui-btn { flex: 0 0 auto; align-self: center; margin-right: calc(3 * var(--px)); }
/* a song only on the Tab5's card (T302 slice 3): its place in the list, the Tab5's mark, nothing to play */
.lcard { cursor: default; color: #555; }
.lcard .lcheck { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }   /* #536: the tick at its own 16 */
.askrow { margin-top: calc(8 * var(--px)); }
.askrow .cui-field { width: 100%; box-sizing: border-box; }

.sublang { flex: 1 1 auto; min-width: 0; }
.sublang .cui-popup { width: 100%; min-width: 0; }

/* Mac quality from the Tab5's own .t5v (t5v.js, req-tab5-quality-same-copy): the canvas holds the picture, k whole
   device pixels per Tab5 pixel; the <video> element (the file's MP3: clock, clicks, events) lies unseen over it */
.t5vpic { display: none; position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.vwrap.t5v .t5vpic { display: block; }
.vwrap.t5v .video { position: absolute; left: 0; top: 0; width: 100% !important; height: 100% !important; opacity: 0; }
.vsub { display: none; position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; pointer-events: none;
  font-family: var(--geneva); font-size: calc(12 * 1px * var(--subk, 2)); line-height: 1.25; color: #fff;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 2px #000; }
.vwrap.t5v .vsub { display: flex; flex-direction: column; align-items: center; }
.vsub span { padding: 0 calc(4 * 1px); }
/* two subtitle tracks at once (#40): drawn by the page, the second under the first and a little smaller */
.vwrap.dualsub .vsub { display: flex; flex-direction: column; align-items: center; z-index: 1; }
.vwrap.dualsub:not(.t5v) .vsub { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: var(--dualpx, 20px); }
.vsub .vsub2 { font-size: 0.85em; }
/* full screen where the browser has none for an element (iPhone): the player fills the window */
.vbox.pfull { position: fixed; inset: 0; width: 100vw; height: 100vh; width: 100dvw; height: 100dvh; z-index: 10000;
  background: #000; display: flex; flex-direction: column; }
.vbox.pfull .vwrap { flex: 1 1 auto; min-height: 0; }
html.pfullpage, html.pfullpage body { overflow: hidden; }
html.pfullpage #menubar { display: none; }      /* above every window otherwise */

/* E-book reader (req-server-ebooks): the page fills the window, the controls in a bar under it */
.readerwin .wbody { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.reader { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.rframe { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #fff; }
.reader.comic { background: #000; }
.rpage { flex: 1 1 auto; min-height: 0; width: 100%; object-fit: contain; cursor: pointer; }
.rbar { display: flex; align-items: center; gap: calc(6 * var(--px)); padding: calc(4 * var(--px)); border-top: var(--px) solid #000;
  background: #ddd; flex-wrap: wrap; }
.rbar .cui-popup { flex: 1 1 auto; min-width: 0; max-width: 100%; }
.rcount { font-family: var(--geneva); font-size: calc(10 * var(--px)); white-space: nowrap; }

/* Upload (req-media-upload): the drop area, a file's line, the window lit up while files are dragged over it */
.updrop { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--px)); margin: calc(8 * var(--px)) 0;
  padding: calc(12 * var(--px)); border: var(--px) dashed #000; text-align: center; }
.updrop p { margin: 0; font-family: var(--geneva); font-size: calc(11 * var(--px)); }
.win.dropping .updrop { background: #000; color: #fff; }
.buttons.end { justify-content: flex-end; }
#upstrip { cursor: pointer; }

/* the library's quick filter (the tiles already shown) */
.libfilter { display: flex; gap: calc(4 * var(--px)); align-items: center; margin-bottom: calc(6 * var(--px)); }
.libfilter .cui-field, .libfilter .cui-field { flex: 1 1 auto; min-width: 0; }
.tile[hidden] { display: none; }
.libfilter .cui-field::-webkit-search-cancel-button, .libfilter .cui-field::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
/* Folder and zip uploads: the batch in the Upload window, and the Review window (the user, 18 Oct) */
.uphint { margin: 0; font-size: calc(10 * var(--px)); text-align: center; max-width: calc(320 * var(--px)); }
/* no folder helper on this PC: one folder at a time, and how to install it */
.uphelper { display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--px)); }
.helperhow { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.helperhow p { margin: 0; }
.helpercmd { margin: 0; padding: calc(4 * var(--px)); border: var(--px) solid #000; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--monaco, monospace); font-size: calc(10 * var(--px)); user-select: all; }
.bfiles { display: flex; flex-direction: column; gap: calc(4 * var(--px)); max-height: calc(120 * var(--px)); overflow-y: auto; padding-left: calc(8 * var(--px)); }
.bfiles .bfile { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.bfname { font-size: calc(10 * var(--px)); overflow-wrap: anywhere; }
.bfrow { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.bfrow .bfname { flex: 1 1 auto; min-width: 0; }
/* several folders in one upload (req-upload-multi): the list of those chosen, each with its remove button */
.upchosen { display: flex; flex-direction: column; gap: calc(4 * var(--px)); margin-bottom: calc(8 * var(--px));
  padding: calc(6 * var(--px)); border: var(--px) solid #000; }
.upchoice { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.upchoice .upcname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; font-family: var(--chicago); font-size: calc(11 * var(--px)); }
.upchoice .upstat { flex: 0 0 auto; }
.uprow.upall { margin-bottom: calc(6 * var(--px)); }
.breview { display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.bsum { margin: 0; font-family: var(--chicago); font-size: calc(12 * var(--px)); }
.bhead { margin: calc(4 * var(--px)) 0; font-family: var(--chicago); font-size: calc(11 * var(--px)); }
.bgroup { border: var(--px) solid #000; padding: calc(6 * var(--px)); display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.bghead { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--px)); padding-bottom: calc(4 * var(--px)); border-bottom: var(--px) dotted #000; }
.bghead .btitle { flex: 1 1 calc(140 * var(--px)); min-width: 0; font-family: var(--chicago); font-size: calc(11 * var(--px)); }
.bghead .byear { width: calc(44 * var(--px)); flex: 0 0 auto; }
.bmatch { font-size: calc(10 * var(--px)); }
.breview .bfile { display: flex; align-items: flex-start; gap: calc(6 * var(--px)); }
.bnames { flex: 1 1 auto; min-width: 0; }
.borig { font-size: calc(10 * var(--px)); color: #000; opacity: .7; overflow-wrap: anywhere; }
.bnew { font-size: calc(11 * var(--px)); overflow-wrap: anywhere; }
.bse { display: flex; align-items: center; gap: calc(2 * var(--px)); font-size: calc(10 * var(--px)); flex: 0 0 auto; }
.bnum { width: calc(28 * var(--px)); }
.bgroup.off .bghead ~ *, .bfile.off .bnames { opacity: .5; }
.bpassed { margin: 0; font-size: calc(10 * var(--px)); }
.bchk { display: flex; align-items: center; gap: calc(4 * var(--px)); font-size: calc(11 * var(--px)); }
.bconfirm { font-size: calc(10 * var(--px)); align-self: center; }
.bdupes { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.bdupes .bfile, .breview .bfile .buttons { align-items: center; }
.qtrail { font-size: calc(10 * var(--px)); overflow-wrap: anywhere; }
.qrow.failed .qtrail { opacity: .7; }
/* a pack's episodes, opened under its row (req-activity-series-overall) */
.qeps { display: flex; flex-direction: column; max-height: calc(220 * var(--px)); overflow-y: auto; border: var(--px) solid #000; }
.qep { display: flex; gap: calc(8 * var(--px)); padding: calc(2 * var(--px)) calc(4 * var(--px)); border-bottom: var(--px) dotted #000; font-size: calc(10 * var(--px)); }
.qep:last-child { border-bottom: 0; }
.qep .qepname { flex: 0 0 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qep.ready .qtrail { opacity: .7; }
/* lists that load more as they scroll (infinite.js): the end marker, the watch while a page comes, and why one failed */
.scrollmark { height: 1px; }
.scrollload { display: flex; justify-content: center; align-items: center; height: calc(28 * var(--px)); }
.scrollerr { margin-top: calc(6 * var(--px)); }
/* Admin > System (user, 24 Oct: "icons over messages and good formatting over to much information"): one row a thing,
   a triangle, an icon, a name, one bar or value and a status glyph; its details under it when opened. On a phone the
   bar takes a line of its own under the name. */
.sysv .shead { margin: calc(10 * var(--px)) 0 calc(2 * var(--px)); }
.sysv > .shead:first-child { margin-top: 0; }
.srow { --tri: calc(14 * var(--px)); border-bottom: var(--px) dotted #000; }
.srow:last-child, .sdet .srow { border-bottom: 0; }
.srow .shd {
  display: grid; align-items: center; gap: 0 calc(6 * var(--px)); min-height: calc(22 * var(--px)); padding: calc(2 * var(--px)) 0;
  grid-template-columns: var(--tri) calc(16 * var(--px)) minmax(calc(70 * var(--px)), calc(118 * var(--px))) minmax(0, 1fr) minmax(calc(96 * var(--px)), auto) calc(12 * var(--px));
  grid-template-areas: "t i n b v s"; font-size: calc(10 * var(--px));
}
.srow .shd.can { cursor: pointer; }
.stri { grid-area: t; display: flex; align-items: center; justify-content: center; width: var(--tri); height: var(--tri); padding: 0; border: 0; background: none; cursor: pointer; }
.stri img { width: var(--cui-icon); height: var(--cui-icon); margin: calc(-3 * var(--px)); }
.sico { grid-area: i; display: block; width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.sname { grid-area: n; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--chicago); font-size: calc(11 * var(--px)); }
.sname .sw { display: inline-block; width: calc(10 * var(--px)); height: calc(7 * var(--px)); margin-right: calc(4 * var(--px)); border: var(--px) solid #000; vertical-align: baseline; }
.sbarc { grid-area: b; min-width: 0; display: flex; align-items: center; }
.sbarc .sbar, .sbarc .dbar { flex: 1 1 auto; height: calc(10 * var(--px)); }
.sbarc .cui-field { max-width: 100%; }
.sval { grid-area: v; display: flex; align-items: center; justify-content: flex-end; gap: calc(6 * var(--px)); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sst { grid-area: s; display: block; width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); }
.stemp { display: inline-flex; align-items: center; gap: var(--px); }
.stemp img { width: var(--cui-icon); height: var(--cui-icon); margin: calc(-3 * var(--px)); }
.skvbar { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.skvbar .sbar { flex: 1 1 auto; max-width: calc(120 * var(--px)); }
.sdoes { display: inline-flex; gap: calc(10 * var(--px)); }
.srow.dim .sname, .srow.dim .sval { color: var(--dim); }
.srow.dim .snote { color: var(--dim); font-size: calc(9 * var(--px)); }.sdet { display: flex; flex-direction: column; gap: calc(2 * var(--px)); margin: 0 0 calc(4 * var(--px)) calc(var(--tri) + 22 * var(--px));
  padding: calc(2 * var(--px)) 0 calc(2 * var(--px)) calc(6 * var(--px)); border-left: var(--px) solid #000; font-size: calc(9 * var(--px)); }
.sdet .srow .shd { min-height: calc(18 * var(--px)); font-size: calc(9 * var(--px));
  grid-template-columns: var(--tri) calc(16 * var(--px)) minmax(0, 1fr) 0 auto calc(12 * var(--px)); }
.sdet .sname { font-family: var(--geneva); font-size: calc(9 * var(--px)); }
.skv { display: grid; grid-template-columns: calc(84 * var(--px)) minmax(0, 1fr); gap: calc(8 * var(--px)); align-items: center; }
.skv > span:first-child { color: #555; }
.spath { display: flex; flex-wrap: wrap; gap: 0 calc(8 * var(--px)); }
.spath code { overflow-wrap: anywhere; font-size: calc(9 * var(--px)); color: #333; }
.sbusy { display: grid; grid-template-columns: calc(60 * var(--px)) auto; gap: calc(6 * var(--px)); align-items: center; }
.sbusy .sbar { height: calc(8 * var(--px)); }
/* a drive's choice (#358): the preview's steps, its button under them */
.spoolch { display: flex; flex-direction: column; align-items: flex-start; gap: calc(4 * var(--px)); }
.sdet .buttons { margin-top: calc(2 * var(--px)); }
.sdet .cores { display: flex; gap: calc(2 * var(--px)); height: calc(24 * var(--px)); align-items: flex-end; }
.sdet .core { flex: 1 1 0; height: 100%; border: var(--px) solid #000; position: relative; background: #fff; }
.sdet .core i { position: absolute; left: 0; right: 0; bottom: 0; background: #000; }
.sdet .aplist, .sdet .wlog { list-style: none; margin: 0; padding: 0; }
.sdet .aplist li, .sdet .wlog li { display: flex; align-items: center; gap: calc(8 * var(--px)); }
.sdet .aplist li.cur { font-weight: bold; }
.sdet .wlog li.undone { font-weight: bold; }
.sdet .wlog .wlat { white-space: nowrap; }
.sval .cui-btn.cui-small { flex: 0 0 auto; }
/* System > Processes: processor, memory and time running in fixed columns, so every row lines up */
.pnums { display: inline-grid; grid-template-columns: calc(38 * var(--px)) calc(52 * var(--px)) calc(80 * var(--px)); text-align: right; }
.pnums > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .sval .pst { width: var(--cui-icon); height: var(--cui-icon); margin: calc(-3 * var(--px)); }
.pacts { display: flex; gap: calc(4 * var(--px)); }
.proclv .pstl { width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); display: inline-block; vertical-align: middle; }
.proclv .pdet { margin: calc(2 * var(--px)) 0 calc(4 * var(--px)) calc(22 * var(--px)); }
/* a service's parts, a step in for each level (req-processes-breakdown); held-back work says so beside its name */
.proclv tr.pd1 > td:first-child .cui-lvcell { padding-left: calc(14 * var(--px)); }
.proclv tr.pd2 > td:first-child .cui-lvcell { padding-left: calc(26 * var(--px)); }
.proclv tr.pd3 > td:first-child .cui-lvcell { padding-left: calc(38 * var(--px)); }
.prow.pd1 .sname, .prow.pd2 .sname, .prow.pd3 .sname { padding-left: calc(12 * var(--px)); }
.proclv .psay { margin-left: calc(6 * var(--px)); opacity: .65; font-size: calc(9 * var(--px)); }
.cui-alert .asub { margin-top: calc(6 * var(--px)); font-size: calc(10 * var(--px)); }
@media (max-width: 560px) { .pnums { grid-template-columns: calc(36 * var(--px)) calc(50 * var(--px)); } .pnums .pup { display: none; } }
body.tv .stri:focus { background: #000; outline: none !important; }
body.tv .stri:focus img { filter: invert(1); }
html.dev-phone .srow, html.dev-tablet .srow { --tri: calc(26 * var(--px)); }
html.dev-phone .srow .shd { min-height: calc(36 * var(--px)); }
@media (max-width: 560px) {
  .srow .shd { grid-template-columns: var(--tri) calc(16 * var(--px)) minmax(0, 1fr) auto calc(12 * var(--px));
    grid-template-areas: "t i n v s" ". . b b b"; row-gap: calc(3 * var(--px)); }
  .sbarc:empty { display: none; }
  .sdet .srow .shd { grid-template-columns: var(--tri) calc(16 * var(--px)) minmax(0, 1fr) auto calc(12 * var(--px)); grid-template-areas: "t i n v s"; }
  .sdet .sbarc { display: none; }
  .sdet { margin-left: calc(var(--tri) / 2); }
}
html.dev-phone .srow .shd { grid-template-columns: var(--tri) calc(16 * var(--px)) minmax(0, 1fr) auto calc(12 * var(--px));
  grid-template-areas: "t i n v s" ". . b b b"; row-gap: calc(3 * var(--px)); }
html.dev-phone .sbarc:empty { display: none; }
html.dev-phone .sdet .srow .shd { grid-template-areas: "t i n v s"; }
html.dev-phone .sdet .sbarc { display: none; }
html.dev-phone .sdet { margin-left: calc(var(--tri) / 2); }
/* Settings > Languages (user, 18 Oct) */
.langs { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.langs .lang { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--px)); border-bottom: var(--px) dotted #000; padding-bottom: calc(4 * var(--px)); }
.langs .lname { display: flex; flex-direction: column; min-width: 0; }
.langs .lname span, .langs .lhint { font-size: calc(10 * var(--px)); margin: 0; }
/* Settings > Privacy, Groups and New People (T93, T94) */
.privacy .privgroup { display: flex; align-items: center; gap: calc(6 * var(--px)); border-bottom: var(--px) dotted #000; padding: calc(2 * var(--px)) 0; }
.privacy .privname { font-weight: bold; }
.privacy .privgroup .lhint { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: calc(10 * var(--px)); margin: 0; }
.privacy > .formrow, .privadmin .privmig { margin: calc(6 * var(--px)) 0 calc(10 * var(--px)); }
.privadmin .privmig .formrow .lhint { margin: 0 0 0 calc(6 * var(--px)); font-size: calc(10 * var(--px)); }
.langs .lbtns { flex-wrap: nowrap; flex: 0 0 auto; gap: calc(3 * var(--px)); }
.choices select.cui-popup { max-width: 100%; }

/* Skip Intro (req-skip-intro): bottom right of the picture, above the controller. 20 Oct (user): like Next Episode it
   sits on the player box a bar's height up, never moves when the controls come and go, stays while they are hidden
   and takes the first click itself */
.vbox .skipintro { position: absolute; right: calc(12 * var(--px)); bottom: calc(var(--vctlh, calc(26 * var(--px))) + 12 * var(--px));
  z-index: 4; }
.vbox .skipintro[hidden] { display: none; }
.vbox.idle .skipintro { cursor: default !important; }

/* Admin > Outside Services (req-outside-services-window): orange near a limit, red at one; dark text on both so it
   reads the same in the light and the dark look */
.cui-lv.outside tr.lvl-near:not(.cui-on) td { background: #ffc864; color: #000; }
.cui-lv.outside tr.lvl-full:not(.cui-on) td { background: #ff6b5e; color: #000; }

/* Firefox (macbars.js): its own bar hidden, the same System 7 bar drawn beside each scrolling element */
html.macbars * { scrollbar-width: none; }
.mbar { position: absolute; z-index: 5; box-sizing: border-box; background-color: #ccc;
  background-image: conic-gradient(#aaa 25%, #ddd 0 50%, #aaa 0 75%, #ddd 0);
  background-size: calc(2 * var(--px)) calc(2 * var(--px)); }
.mbar[hidden] { display: none; }
.mbar-v { border-left: var(--px) solid #000; }
.mbar-h { border-top: var(--px) solid #000; }
.mthumb { position: absolute; box-sizing: border-box; background: #fff; border: var(--px) solid #000; }
.mbar-v .mthumb { left: 0; right: 0; }
.mbar-h .mthumb { top: 0; bottom: 0; }

/* Offline mode and Downloads (offline.js): the offline line along the bottom, and the Downloads window's rows */
.offlinebar { position: fixed; left: 50%; bottom: calc(8 * var(--px)); transform: translateX(-50%); z-index: 9000;
  background: #fff; border: var(--px) solid #000; box-shadow: var(--px) var(--px) 0 #000; padding: calc(4 * var(--px)) calc(8 * var(--px));
  max-width: calc(100vw - 32px); cursor: default; }
.dlwin { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.dlspace, .dlfold { font-size: calc(10 * var(--px)); margin: 0; }
.dlrow { flex-direction: row; align-items: flex-start; gap: calc(6 * var(--px)); }
.dlq { display: flex; flex-direction: column; gap: calc(4 * var(--px)); margin-top: calc(8 * var(--px)); }
.dlqsize { font-size: calc(10 * var(--px)); }
.dlmini { width: calc(32 * var(--px)); height: auto; flex: 0 0 auto; image-rendering: pixelated; border: var(--px) solid #000; }
.dlbody { display: flex; flex-direction: column; gap: calc(3 * var(--px)); flex: 1 1 auto; min-width: 0; }

/* Upload window: links, one per line (req-upload-popup-links) */
.uplinkbox { margin: calc(6 * var(--px)) 0; display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.uplinkbox .lab { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.uplinks { width: 100%; min-height: calc(44 * var(--px)); resize: vertical; font-family: var(--monaco); white-space: pre; }
.uplinkres { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.uplinkrow { display: flex; gap: calc(8 * var(--px)); justify-content: space-between; }
.uplinkrow .uplink { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.uplinkrow .uplinkwhat { flex: none; }
.uplinkrow.bad .uplinkwhat { font-weight: bold; }
.uplinkbox .uphint { text-align: left; margin: 0; }
/* Next Episode (req-next-episode-button): bottom right of the picture like Skip Intro; it stays while it counts down
   or the picture is paused, otherwise it goes with the controls */
/* 20 Oct (user): on the player box, a bar's height (--vctlh, kept while the bar is hidden) above its bottom, so it
   never moves when the controls come and go; it stays while the controls are hidden and takes the click itself */
.vbox { position: relative; }
.vbox .nextep { position: absolute; right: calc(12 * var(--px)); bottom: calc(var(--vctlh, calc(26 * var(--px))) + 12 * var(--px));
  z-index: 4; display: flex; align-items: center; gap: calc(6 * var(--px)); }
.vbox .nextep[hidden] { display: none; }
.vbox.idle .nextep, .vbox.idle .nextep * { cursor: default !important; }
/* a queued link: its name opens its Activity row (req-upload-links-live-status) */
.uplinkrow.live .uplinkwhat { flex: 0 1 auto; max-width: 60%; white-space: normal; text-align: right; }
.qrow.flash { outline: calc(2 * var(--px)) solid currentColor; }

/* req-offline-sad-mac: the Sad Mac in place of "Can't reach the server" and the like, whole pixels only */
img.sadmac { display: block; width: calc(64 * var(--px)); height: calc(76 * var(--px)); image-rendering: pixelated; }
img.sadmac.big { width: calc(96 * var(--px)); height: calc(114 * var(--px)); }
img.sadmac.tiny { display: inline-block; width: calc(13 * var(--px)); height: calc(16 * var(--px)); vertical-align: middle; }
.notice.sadnote { justify-content: center; width: auto; border: 0; box-shadow: none; background: none; padding: 0; }
.offlinebar.notice.sadnote { background: #fff; border: var(--px) solid #000; box-shadow: var(--px) var(--px) 0 #000;
  padding: calc(4 * var(--px)); }
.cui-alert.sadalert { grid-template-columns: 1fr; justify-items: center; }
.cui-alert.sadalert .cui-abuttons { justify-self: stretch; }
.offlinebar img.sadmac { width: calc(32 * var(--px)); height: calc(38 * var(--px)); }

/* Play on (req-cast-to-devices): where the film plays now, with Stop, under the controls */
.castnote { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--px)); padding: 0 calc(8 * var(--px)); }
.castnote .notice { margin: calc(4 * var(--px)) 0; }

/* Games (req-games-library, games.js) */
.gtabs .cui-seg { flex-wrap: wrap; max-width: 100%; }
.gstatus:empty { display: none; }
.gstatus .notice { margin: 0 0 calc(6 * var(--px)); }
.grematch .libfilter { max-width: calc(360 * var(--px)); }
.gjobs { margin-bottom: calc(8 * var(--px)); }
/* files dragged over the Games window: its tiles are outlined where they will land */
.win.dropping .grid { outline: calc(2 * var(--px)) dashed #000; outline-offset: calc(-2 * var(--px)); }
.gres { display: flex; flex-direction: column; gap: calc(3 * var(--px)); padding: calc(4 * var(--px)) 0; border-bottom: var(--px) solid #000; }
.gres .gfiles { display: flex; flex-direction: column; gap: calc(4 * var(--px)); padding-left: calc(10 * var(--px)); }
.gfile { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--px)); font-size: calc(10 * var(--px)); }
.gfile .qname { flex: 1 1 auto; }
/* Search Sites (req-game-install-button): the sites as labels with a count or a mark, the results by game */
.gsites { display: flex; flex-wrap: wrap; gap: calc(4 * var(--px)); font-size: calc(9 * var(--px)); margin: 0 0 calc(6 * var(--px)); }
.gsites:empty { display: none; }
.gsite { display: inline-flex; align-items: center; gap: calc(4 * var(--px)); padding: var(--px) calc(5 * var(--px));
  border: var(--px) solid #000; border-radius: calc(3 * var(--px)); background: #fff; white-space: nowrap; }
.gsite .gn { font-weight: bold; }
.gsite-down, .gsite-off { color: #555; }
.gsite .gmark { width: calc(11 * var(--px)); height: calc(11 * var(--px)); }
.gresults { display: flex; flex-direction: column; }
.ghead { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.ghead .gtitle { flex: 1 1 auto; min-width: 0; }
.gact { display: flex; align-items: center; gap: calc(6 * var(--px)); flex: 0 0 auto; }
.gprog { display: flex; flex-direction: column; gap: calc(2 * var(--px)); width: calc(120 * var(--px)); }
.gerr { color: #000; font-weight: bold; }
.gsrc { display: flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--px)); font-size: calc(10 * var(--px)); }
.gsrc .gsname { min-width: calc(110 * var(--px)); }
.gsrc .gtname { flex: 1 1 100%; order: 9; overflow-wrap: anywhere; }
.glic { display: inline-block; padding: 0 calc(4 * var(--px)); border: var(--px) solid #000; border-radius: calc(2 * var(--px));
  font-size: calc(9 * var(--px)); line-height: 1.5; white-space: nowrap; background: #eee; }
.gres .gchoices:empty { display: none; }
.gdrop { display: flex; align-items: center; justify-content: center; min-height: calc(90 * var(--px));
  border: calc(2 * var(--px)) dashed #000; margin-bottom: calc(8 * var(--px)); }
.gdrop.on { background: #ddd; }
@media (max-width: 600px) { .ghead { flex-wrap: wrap; } .gsrc .gsname { min-width: 0; } }

/* Pictures in the Edit window (app.js itemPictureParts) */
.artbuttons { flex-wrap: wrap; }
.artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin: 4px 0 8px; }
.artgrid.wide { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.artpick { padding: 2px; border: 2px solid transparent; background: #fff; cursor: pointer; line-height: 0; }
.artpick img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; image-rendering: pixelated; background: #ddd; }
.artgrid.wide .artpick img { aspect-ratio: 16 / 9; }
.artpick.on { border-color: #000; }
.artpick:focus-visible { outline: 2px dotted #000; }
/* Play (gameplay.js): the game on a canvas, the touch pad on phones */
.gplay { display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); align-items: center; margin-top: calc(6 * var(--px)); }
.gstat { font-size: 0.9em; color: #444; }
.gbar { display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); align-items: center; margin-bottom: calc(6 * var(--px)); }
.gstage { position: relative; background: #000; display: flex; justify-content: center; align-items: center; }
.gstage:fullscreen { width: 100vw; height: 100vh; }
/* game-stream: the picture's own shape (--ar, set from the stream); pixelated when enlarged 2x or more, else smooth */
.gcanvas { --ar: 1.3333; display: block; width: min(100%, calc((100vh - 190px) * var(--ar))); height: auto;
  aspect-ratio: var(--ar); image-rendering: pixelated; outline: none; touch-action: none; }
.gcanvas.smooth { image-rendering: auto; }
/* game-mouse: one pointer over a game that draws its own (Mac, DOS); pointer lock hides it anyway */
.gcanvas.ownptr { cursor: none; }
.gstage:fullscreen .gcanvas { width: min(100vw, calc(100vh * var(--ar))); }
.gstat { cursor: pointer; }
.ginfo { position: absolute; top: calc(4 * var(--px)); left: calc(4 * var(--px)); padding: calc(3 * var(--px)) calc(5 * var(--px));
  background: rgba(0,0,0,0.6); color: #fff; font: 11px/1.35 monospace; white-space: pre; pointer-events: none; }
.gpad { position: absolute; inset: 0; pointer-events: none; user-select: none; -webkit-user-select: none; }
.gpb { position: absolute; pointer-events: auto; touch-action: none; display: flex; align-items: center; justify-content: center;
  width: 13vmin; height: 13vmin; background: rgba(255,255,255,0.35); border: 2px solid rgba(0,0,0,0.5);
  color: #fff; font: bold 4vmin sans-serif; }
.gpb.on { background: rgba(255,255,255,0.65); }
.gpd .gpb, .gpf .gpb { bottom: 0; }
.gpd .up { left: 13vmin; bottom: 26vmin; } .gpd .down { left: 13vmin; bottom: 0; }
.gpd .left { left: 0; bottom: 13vmin; } .gpd .right { left: 26vmin; bottom: 13vmin; }
.gpf .gpb { border-radius: 50%; }
.gpf .fx { right: 13vmin; bottom: 26vmin; } .gpf .fb { right: 13vmin; bottom: 0; }
.gpf .fy { right: 26vmin; bottom: 13vmin; } .gpf .fa { right: 0; bottom: 13vmin; }
.gpm .gpb { width: 18vmin; height: 7vmin; font-size: 3vmin; bottom: 0; }
.gpm .sel { left: calc(50% - 19vmin); } .gpm .start { left: calc(50% + 1vmin); }
@media (orientation: portrait) {                /* a phone held upright: the pad below the picture, not on it */
  .gstage { flex-direction: column; }
  .gpad { position: relative; inset: auto; width: 100%; height: 42vmin; margin-top: 4vmin; }
}
/* Merge or Split in a season's Edit window: one ticked episode per line */
.checkrow { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.itemedit .matchlist { max-height: 40vh; overflow-y: auto; }

/* The desktop's app icons (bug-ms-desktop-not-reference-menu, SPEC-desktop.md 3): 32 x 32 one-bit icons, the
   name under each in Geneva 9 on white; selected = inverted. A column on the right; a grid on a phone. */
#deskicons { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dicon {
  position: absolute; display: flex; flex-direction: column; align-items: center; width: calc(64 * var(--px));
  pointer-events: auto; touch-action: none; padding: 0; border: 0; background: none; color: #000; cursor: default;
  font-family: var(--geneva); font-size: calc(9 * var(--px)); -webkit-tap-highlight-color: transparent;
}
.dicon img { width: calc(32 * var(--px)); height: calc(32 * var(--px)); image-rendering: pixelated; pointer-events: none; }
/* #311 (the user, 30 Oct: "app icons should not be in square boxes"): an app icon is drawn bare wherever it is shown,
   on the desktop, in a menu, Get Info or a list: never a tile, fill, frame, shadow or rounding round it. The pictures
   themselves are bare too, and a test checks it; this keeps any container from adding one. */
img[src*="/icons/"], .dicon img, .micon, .infoicon { background: none !important; border: 0 !important;
  box-shadow: none !important; border-radius: 0 !important; padding: 0; }
.dname { margin-top: calc(2 * var(--px)); padding: 0 calc(2 * var(--px)); background: #fff; white-space: nowrap; line-height: 1.3; }
.dicon.sel img { filter: invert(1); }
.dicon.sel .dname { background: #000; color: #fff; }
.dicon:focus-visible { outline: none; }
.dicon:focus-visible .dname { outline: var(--px) dotted #000; }
body.showdesk .win { display: none !important; }
.dicon.ghost { opacity: .6; pointer-events: none; }
.dicon.ghost img { filter: invert(1); }
/* #460: a shortcut to a System app is named in italics, as an alias is on a Mac; the System folder's window shows its
   apps as icons in rows, read only; a drag out of it carries a ghost over the page */
.dshort .dname { font-style: italic; }
.sysgrid { display: flex; flex-wrap: wrap; align-content: flex-start; gap: calc(6 * var(--px)) calc(4 * var(--px));
  padding: calc(8 * var(--px)); }
.sysapp { display: flex; flex-direction: column; align-items: center; width: calc(72 * var(--px)); padding: 0; border: 0;
  background: none; color: #000; cursor: default; touch-action: none; font-family: var(--geneva); font-size: calc(9 * var(--px));
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sysapp img { width: calc(32 * var(--px)); height: calc(32 * var(--px)); image-rendering: pixelated; pointer-events: none; }
.sysapp .dname { white-space: normal; text-align: center; max-width: 100%; overflow-wrap: anywhere; }
.sysapp.sel img { filter: invert(1); }
.sysapp.sel .dname { background: #000; color: #fff; }
.sysapp:focus-visible { outline: none; }
.sysapp:focus-visible .dname { outline: var(--px) dotted #000; }
.sysghost { position: fixed; z-index: 100000; opacity: .6; pointer-events: none; }
.sysghost img { filter: invert(1); }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .sysapp { font-size: calc(11 * var(--px)); width: calc(80 * var(--px)); }
}
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .dicon { font-size: calc(11 * var(--px)); }
}

/* Magic cast (req-ms-magic-cast): the phone's code, big; the TV's eight boxes (ui.css .cui-code); a focus ring seen
   from the sofa */
.magic { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.magiccode { font-family: var(--chicago); font-size: calc(28 * var(--px)); letter-spacing: calc(3 * var(--px)); line-height: 1.1; }
.magicleft { color: var(--dim); }
.magicform { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--px)); padding: calc(6 * var(--px)); }
.magicnote { min-height: 1.4em; }
body.tv .dicon:focus .dname { background: #000; color: #fff; }

/* Play on menu (bug-ms-magic-cast-menu): opens at once; Magic Cast first; "not found" is a line by Chromecast and AirPlay */
.castmenu { display: flex; flex-direction: column; gap: calc(6 * var(--px)); min-width: min(calc(220 * var(--px)), 70vw); }
.castdevs { display: flex; flex-direction: column; gap: calc(6 * var(--px)); border-top: var(--px) solid #000; padding-top: calc(6 * var(--px)); }
.castnone { color: var(--dim); margin: 0; font-size: calc(10 * var(--px)); line-height: 1.35; }
.magichead, .magicnow { margin: 0; }

/* The player as the TV's remote (bug-ms-cast-phone-keeps-playing, bug-ms-cast-no-casting-state): the poster where
   the picture was, a banner saying where it plays with Stop Casting, the normal bar driving the TV */
.vwrap.casting { background: #000; align-items: center; justify-content: center; }
.vwrap.casting .video, .vwrap.casting .t5vpic, .vwrap.casting .vsub { visibility: hidden; }
.vbox.casting > .skipintro, .vbox.casting > .nextep { display: none !important; }
.castposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.castposter.none { background: #000; }
.castbanner { position: absolute; left: 50%; top: calc(8 * var(--px)); transform: translateX(-50%); z-index: 2;
  max-width: calc(100% - 16 * var(--px)); box-sizing: border-box; background: #fff; color: #000; border: var(--px) solid #000;
  box-shadow: var(--px) var(--px) 0 #000; padding: calc(6 * var(--px)) calc(10 * var(--px)); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--px)); }
.casthead { margin: 0; font-family: var(--chicago); font-size: calc(13 * var(--px)); }
.casttitle { margin: 0; overflow-wrap: anywhere; }
.castbanner .buttons { justify-content: center; }
.vwrap.casting .vbuf { z-index: 3; }
.casttv { display: flex; gap: calc(6 * var(--px)); align-items: center; }
.casttv .castpick { flex: 1 1 auto; }
.magictvs { display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.magictv { display: flex; flex-direction: column; gap: calc(3 * var(--px)); border-bottom: var(--px) solid #000; padding-bottom: calc(6 * var(--px)); }

/* ---- Device profiles (req-ms-device-adaptive, req-ms-tv-feature-parity): device.js puts dev-tv, dev-phone,
   dev-tablet or dev-pc on the page; app.js adds body.tv for a TV and scales a Mac pixel to 2 to 4 CSS px. ---- */

/* A TV: margins inside the screen's edge for sets that overscan, the menu bar and desktop within them */
body.tv { --safe-x: 2.5vw; --safe-y: 2.5vh; }
body.tv #menubar { top: var(--safe-y); left: var(--safe-x); right: var(--safe-x); border: var(--px) solid #000; }
body.tv #desktop { top: calc(var(--safe-y) + var(--menubar-h)); left: var(--safe-x); right: var(--safe-x); bottom: var(--safe-y);
  border: var(--px) solid #000; border-top: 0; }
/* the focus ring: thick black in a white halo on every control, seen from across the room */
body.tv .mtitle:focus, body.tv #nowbtn:focus, body.tv #strip button:focus { background: #000; color: #fff; outline: none !important; box-shadow: none; }
body.tv .mtitle:focus .micon { filter: invert(1); }
body.tv .mitem:focus { background: #000; color: #fff; outline: none !important; box-shadow: none; }
body.tv .mitem:focus .mcheck { filter: invert(1); }
body.tv .tile:focus, body.tv .etile:focus, body.tv .gtile:focus { position: relative; z-index: 1; }

body.tv .dicon:focus { outline: none !important; box-shadow: none; }
body.tv .dicon:focus img { filter: invert(1); }
body.tv .dicon:focus .dname { outline: calc(2 * var(--px)) solid #000; }
/* no pointer to wait on: the watch cursor is never shown */
body.tv.waitcur, body.tv.waitcur * { cursor: default; }

/* The TV player: the picture fills the screen; the bar sits over it, inside the overscan margins, and goes with the
   pointer after 3 s of no key while the film plays */
.vbox.tvplayer.pfull .vwrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.vbox.tvplayer .tvbar { position: absolute; left: var(--safe-x, 0); right: var(--safe-x, 0); bottom: var(--safe-y, 0); z-index: 3;
  /* a System 7 control strip in platinum: a black frame, white light top and left, grey shade bottom and right */
  background: #ccc; border: var(--px) solid #000; box-shadow: var(--px) var(--px) 0 #000,
    inset var(--px) var(--px) 0 #fff, inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 #888;
  font-family: var(--chicago); }
.vbox.tvplayer .tvbar .vctl { background: transparent; padding: calc(3 * var(--px)) calc(4 * var(--px)) calc(2 * var(--px)); }
.vbox.tvplayer .tvbar .vctl { border-top: 0; }
.vbox.tvplayer.idle .tvbar { display: none; }
.vbox.tvplayer .tvrow { display: flex; flex-wrap: nowrap; align-items: center; gap: calc(4 * var(--px)) calc(6 * var(--px));
  padding: calc(2 * var(--px)) calc(4 * var(--px)) calc(3 * var(--px)); border-top: var(--px) solid #888;
  box-shadow: inset 0 var(--px) 0 #fff; }
.vbox.tvplayer .tvrow .pctl { flex: 0 1 auto; flex-wrap: wrap; padding: 0; border-top: 0; gap: calc(6 * var(--px)); min-width: 0; }
.vbox.tvplayer .tvrow .lab { font-size: calc(10 * var(--px)); white-space: nowrap; }
.vbox.tvplayer .tvrow .cui-popup { max-width: calc(150 * var(--px)); }
.vbox.tvplayer .tvhide { display: none !important; }
.vbox.tvplayer .tvrow .pctl > .cui-btn { max-width: calc(170 * var(--px)); }
.vbox.tvplayer .tvbar .vctl .cui-btn { flex: 0 0 auto; }
.vbox.tvplayer .seek:focus { outline-offset: calc(3 * var(--px)); }
.vbox.tvplayer .nextep, .vbox.tvplayer .skipintro { right: calc(var(--safe-x, 0px) + 12 * var(--px));
  bottom: calc(var(--safe-y, 0px) + var(--tvbarh, calc(80 * var(--px))) + 8 * var(--px)); }
/* one row under the position: the film's choices, its title, Episodes and Close; a second only when it must */
.vbox.tvplayer.idle .nextep, .vbox.tvplayer.idle .skipintro { bottom: calc(var(--safe-y, 0px) + 12 * var(--px)); }
.vbox.tvplayer .tveps { position: absolute; z-index: 4; top: var(--safe-y, 0); bottom: var(--safe-y, 0); right: var(--safe-x, 0);
  width: min(60%, calc(300 * var(--px))); display: flex; flex-direction: column; background: #fff; border: var(--px) solid #000;
  box-shadow: var(--px) var(--px) 0 #000; }
.vbox.tvplayer .tveps[hidden] { display: none; }
.tvephead { flex: 0 0 auto; padding: calc(3 * var(--px)) calc(8 * var(--px)); border-bottom: var(--px) solid #000;
  font-family: var(--chicago); font-size: calc(12 * var(--px)); text-align: center; }
.tveplist { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tveplist .tvepnow .cui-rowtitle { font-weight: bold; }

/* A phone: touch-first, every control at least a finger's width, upright or on its side */

html.dev-phone .mitem { height: calc(34 * var(--px)); }

html.dev-phone .vctl .seek { height: calc(24 * var(--px)); }
/* a tablet: the desktop, with touch-sized controls */

html.dev-tablet .mitem { height: calc(24 * var(--px)); }

.vbox.tvplayer .tvname { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
  font-family: var(--chicago); font-size: calc(12 * var(--px)); }
body.tv .mdrop { max-height: calc(100vh - 2 * var(--safe-y) - 30 * var(--px)); }
/* Blurred sides beside a narrower picture (playerSides): the film drawn small behind it, stretched to the box */
.vsides { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; image-rendering: auto; pointer-events: none; }
.vwrap.blursides { background: #000; }
.vwrap.blursides .vsides { display: block; }
.vwrap.blursides .video { position: relative; z-index: 1; background: transparent; }
.vwrap.blursides .vbuf, .vwrap.blursides .vsub, .vwrap.blursides .castposter { z-index: 2; }

/* site-verify, 23 Oct: on a phone the position bar was 139 px wide, too short to tap either side of the knob. On a
   phone it has a row of its own, the full width, with the buttons and the time below it. req-player-one-line (27 Oct:
   "only for landscape, not when the device is portrait"): upright, on every device, it is still so; on its side the
   bar and the buttons are one line (playerFold), unless even Play, the bar and the time would not fit (foldwrap). */
@media (orientation: portrait) {
  .vbox:not(.tvplayer) .vctl { flex-wrap: wrap; row-gap: calc(4 * var(--px)); }
  .vbox:not(.tvplayer) .vctl .seek:not(.vol) { order: -1; flex: 1 1 100%; }
  .vbox:not(.tvplayer) .vctl .vtime { margin-right: auto; }
}
html.dev-phone .vbox:not(.tvplayer):not(.oneline) .vctl, .vbox.oneline.foldwrap .vctl { flex-wrap: wrap; row-gap: calc(4 * var(--px)); }
html.dev-phone .vbox:not(.tvplayer):not(.oneline) .vctl .seek:not(.vol),
.vbox.oneline.foldwrap .vctl .seek:not(.vol) { order: -1; flex: 1 1 100%; min-width: 0; }
html.dev-phone .vbox:not(.tvplayer):not(.oneline) .vctl .vtime, .vbox.oneline.foldwrap .vctl .vtime { margin-right: auto; }
/* the one line: the film's choices are the row's own items, their pop-ups without the words beside them (each keeps
   its name on hover and for screen readers), buttons as their icons; what does not fit is in More */
:root { --seekmin: 370px; }
.vbox.oneline .vctl { flex-wrap: nowrap; }
.vbox.oneline .vctl > .pctl { display: contents; }
.vbox.oneline .vctl .seek:not(.vol) { flex: 1 1 auto; min-width: var(--seekmin); }
.vbox.oneline .vctl .lab { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; gap: 0; }
.vbox.oneline .vctl .lab > span:first-child { display: none; }
.vbox.oneline .vctl .lab:empty { display: none; }
.vbox.oneline .vctl .cui-popup { max-width: calc(120 * var(--px)); }
.vbox.oneline .vctl .cui-btn { flex: 0 0 auto; }
.vbox.oneline .vctl .cui-btn .cui-icon ~ .cui-label { display: none; }
.vbox.oneline .tvrow { display: none; }
.vbox.oneline .vctl .tvname { flex: 0 1 auto; max-width: calc(160 * var(--px)); text-align: left; }
.vbox .vctl .cui-folded { display: none !important; }
.vbox .vctl.measuring > *, .vbox .vctl.measuring > .pctl > * { flex-shrink: 0 !important; }
.vbox.oneline .vctl.measuring .tvname { max-width: calc(160 * var(--px)); }
/* while casting, Mute, the volume and Full screen have nothing here to work on */
.vbox.casting .vctl .vmute, .vbox.casting .vctl .vol, .vbox.casting .vctl .vfull { display: none; }
.oldtvs { display: flex; align-items: center; gap: calc(8 * var(--px)); margin-top: calc(6 * var(--px)); }

/* Offline mode (sync.js, 24 Oct): the line under each window's title bar while offline, when it last synced; the
   menu bar's Offline; and Not available offline, a plain panel with the unplugged icon, in the middle of the window */
.wofl { display: none; flex: 0 0 auto; padding: calc(2 * var(--px)) calc(10 * var(--px));
  border-bottom: var(--px) solid #000; font-size: calc(10 * var(--px)); background: #fff; color: #000;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.isoffline .win:not(.playerwin) .wofl { display: block; }
body.isoffline .offwin .wofl { display: none; }
.offitem { font-weight: bold; }
.offstate { display: flex; align-items: center; gap: calc(10 * var(--px)); margin: calc(16 * var(--px)) auto;
  max-width: calc(320 * var(--px)); padding: calc(10 * var(--px)) calc(12 * var(--px));
  border: var(--px) solid #000; box-shadow: var(--px) var(--px) 0 #000; background: #fff; }
.offstate .officon { flex: 0 0 auto; width: calc(32 * var(--px)); height: calc(32 * var(--px)); image-rendering: pixelated; }
.offstate .offhead { font-family: var(--chicago); font-size: calc(12 * var(--px)); margin-bottom: calc(4 * var(--px)); }
.offstate .offtext, .offtext { margin: 0 0 calc(4 * var(--px)); }
.cui-alert .offstate { margin: 0; border: 0; box-shadow: none; padding: 0; }
.offsync { margin: calc(4 * var(--px)) 0; }
.offlist { margin: 0 0 calc(8 * var(--px)); }
.refkeep { display: flex; align-items: center; gap: calc(6 * var(--px)); flex-wrap: wrap;
  margin-top: calc(6 * var(--px)); font-size: calc(10 * var(--px)); }
.refkeep .seek { flex: 1 1 calc(80 * var(--px)); }

/* Spell check in every typing area (spell.js, spellcheck 24 Oct 2026): the dotted underline is drawn by a copy of
   the field's text laid exactly over it, transparent but for the marks; the list is a System 7 menu */
.cdan-spellmirror { position: absolute; left: 0; top: 0; margin: 0; overflow: hidden; pointer-events: none; color: transparent;
  background: transparent; border-style: solid; border-color: transparent; z-index: 1; user-select: none; }
.cdan-sp { text-decoration: underline dotted #d00000; text-decoration-thickness: max(2px, calc(1.5 * var(--px, 1px)));
  text-underline-offset: 0.18em; text-decoration-skip-ink: none; }
::highlight(cdan-spell) { text-decoration: underline dotted #d00000; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
/* Grammar (#483): wavy blue, apart from spelling's dotted red and a secret's dashed orange (ui.css .cui-smatch) */
.cdan-sp.cdan-gr { text-decoration: underline wavy #0b57d0; text-decoration-thickness: max(1.5px, calc(1 * var(--px, 1px)));
  text-underline-offset: 0.2em; text-decoration-skip-ink: none; }
::highlight(cdan-grammar) { text-decoration: underline wavy #0b57d0; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
/* Possible mistakes (#559): a double green line, apart from spelling's red dots, grammar's blue wave and a secret's
   orange dash-dot band in colour and in shape, so a 1-bit screen still tells them apart */
.cdan-sp.cdan-lk { text-decoration: underline double #0a8a32; text-decoration-thickness: max(1px, calc(1 * var(--px, 1px)));
  text-underline-offset: 0.16em; text-decoration-skip-ink: none; }
::highlight(cdan-likely) { text-decoration: underline double #0a8a32; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
@media (monochrome), print {
  .cdan-sp, .cdan-sp.cdan-gr, .cdan-sp.cdan-lk { text-decoration-color: #000; }
  ::highlight(cdan-spell), ::highlight(cdan-grammar), ::highlight(cdan-likely) { text-decoration-color: #000; }
}
@media (forced-colors: active) {
  .cdan-sp, .cdan-sp.cdan-gr, .cdan-sp.cdan-lk { forced-color-adjust: none; text-decoration-color: CanvasText; }
  ::highlight(cdan-spell), ::highlight(cdan-grammar), ::highlight(cdan-likely) { text-decoration-color: CanvasText; }
}
.spmenu .cui-menuhead { white-space: normal; font-weight: normal; }
.spmenu { min-width: calc(150 * var(--px)); max-width: min(90vw, calc(320 * var(--px))); }
.spmenu .spsug { font-weight: bold; }
.spmenu .cui-menuitem[disabled] { color: #888; background: #fff; }

.spsugs { display: flex; flex-direction: column; }

/* Fill (playerSides): the picture zoomed to cover the box, its top and bottom cut; never stretched */
.vwrap.fillsides { background: #000; }
.vwrap.fillsides .video { object-fit: cover; }

/* The position bar, a classic progress bar (user, 24 Oct: "the buffer line showing under the progress nob", then
   "the buffer bar for mobile still doesn't take up the whole bar"): over the dithered track, what is buffered fills
   the track's full height in white, the part played is dark grey over it from the start, and the scroll box sits
   on top of both, the track's full height. Every band starts and ends inside the track's frame. */
.vctl .seek .buf { top: 0; bottom: 0; height: auto; background: #fff; }
.vctl .seek .fill { display: block; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #666; pointer-events: none; }
.vctl .seek .thumb { top: calc(-1 * var(--px)); bottom: calc(-1 * var(--px)); height: auto; z-index: 1; }
html.dev-phone .vctl .seek .thumb { width: calc(22 * var(--px)); left: calc(var(--at, 0) * (100% - 20 * var(--px)) - var(--px)); }

/* A phone's player: the film's choices as tidy pairs, the name on the left and its pop-up beside it; upright, one
   pair a line with the pop-ups lined up on the right; on its side, the pairs in one row, so the picture keeps the room */
html.dev-phone .pctl .lab { display: flex; align-items: center; gap: calc(8 * var(--px)); min-width: 0; }
html.dev-phone .pctl .lab:empty { display: none; }
html.dev-phone .pctl .lab > span:first-child { flex: 0 0 auto; }
html.dev-phone .pctl > .cui-btn { max-width: 100%; }
@media (orientation: portrait) {
  html.dev-phone .pctl { display: flex; flex-direction: column; align-items: stretch; gap: calc(6 * var(--px)); }
  html.dev-phone .pctl .lab { justify-content: space-between; }
  html.dev-phone .pctl .lab .lab { flex: 1 1 auto; }
  html.dev-phone .pctl .cui-popup { flex: 0 0 62%; width: 62%; min-width: 0; }
  html.dev-phone .pctl > .cui-btn { align-self: flex-start; }
}
@media (orientation: landscape) {
  html.dev-phone .pctl { flex-wrap: nowrap; overflow-x: auto; padding-top: calc(4 * var(--px)); padding-bottom: calc(4 * var(--px)); }
  html.dev-phone .pctl .cui-popup { max-width: calc(150 * var(--px)); }
  html.dev-phone .pctl > .cui-btn { flex: 0 1 auto; min-width: 0; }
}
/* upright: the picture at the top at its own shape, the controls straight under it, nothing black around it */
@media (orientation: portrait) {
  html.dev-phone .playerwin .vbox:not(.pfull):not(.tvplayer) { flex: 0 0 auto; }
  html.dev-phone .playerwin .vbox:not(.pfull):not(.tvplayer) .vwrap { flex: 0 0 auto; align-items: flex-start; }
  html.dev-phone .playerwin .vbox:not(.pfull):not(.tvplayer) .video { flex: 1 1 auto; height: auto; max-height: 60vh; }
  html.dev-phone .playerwin .wbody { overflow-y: auto; }
}

/* Notifications (SPEC-desktop 5a): the bell in the menu bar and the list window */
/* the bell keeps its place at the right on a narrow phone: the menus shrink and slide under it, never the bell */
#menus { min-width: 0; }
.notebtn { display: flex; align-items: center; gap: 0; background: #fff; border: 0; padding: 0 calc(4 * var(--px));
  height: 100%; cursor: pointer; font: inherit; color: #000; margin-left: auto; flex-shrink: 0; position: relative; z-index: 1; }
#nowbtn:not([hidden]) ~ .notebtn { margin-left: 0; }
#nowctl:not([hidden]) ~ .notebtn { margin-left: 0; }
.notebtn + #strip { margin-left: 0; }
/* the bell (user, 24 Oct: "The notification bell icon always look fat"; 25 Oct: "the bell is still too wide"; 26 Oct: "the bell has become very squished";
   27 Oct: "the bell is horizontally squised now"; 29 Oct, #315: "still keeps getting streched"): a one-pixel outline
   bell with a knob and a small clapper, 11 by 12 at the screen's own pixel scale, as wide as the watch beside it, with
   4 a side like the strip's other items. The page makes it at the screen's own pixels and sets its exact size and
   place (30 Oct): scaled by the browser, as an SVG or a picture, one row or column came out a screen pixel thinner
   or thicker at most zooms. The size here is the picture's own, for the moment before; no rule elsewhere may size
   it, and it never shrinks. The unread count is a small
   badge at its shoulder */
.notebtn .bellpx { display: block; width: calc(11 * var(--px)); height: calc(12 * var(--px)); min-width: 0 !important;
  min-height: 0 !important; max-width: none !important; max-height: none !important; flex: none !important;
  align-self: center; image-rendering: pixelated; }
.notebtn .notecount { align-self: flex-start; margin: calc(2 * var(--px)) 0 0 0; min-width: calc(7 * var(--px));
  height: calc(7 * var(--px)); padding: 0 var(--px); box-sizing: border-box; background: #000; color: #fff; position: relative;
  font-family: var(--geneva); font-size: calc(7 * var(--px)); font-weight: bold; line-height: calc(7 * var(--px)); text-align: center; }
.notebtn:focus-visible { outline: var(--px) dotted #000; }
/* an unread reminder (user, 29 Oct: "Could the bell go red when theres an unread reminder"): the bell and its count red */
.notebtn.remind .bellpx { filter: brightness(0) saturate(100%) invert(16%) sepia(98%) saturate(7000%) hue-rotate(357deg) brightness(95%); }
.notebtn.remind .notecount { background: #d00000; }
/* Search (T115, apps/search.js): the magnifier in the menu bar, beside the bell, and the window: the field across the
   top, then the top hit and a group for each kind, each with its count */
.findbtn { display: flex; align-items: center; background: #fff; border: 0; padding: 0 calc(4 * var(--px)); height: 100%;
  cursor: pointer; margin-left: auto; flex-shrink: 0; position: relative; z-index: 1; }
.findbtn img { height: var(--cui-icon); width: var(--cui-icon); margin: var(--cui-icon-sm-inset); image-rendering: pixelated; flex: none; }
.findbtn:focus-visible { outline: var(--px) dotted #000; }
.findbtn ~ .notebtn, #nowbtn:not([hidden]) ~ .findbtn, #nowctl:not([hidden]) ~ .findbtn, #nowctl:not([hidden]) ~ .notebtn { margin-left: 0; }
.findbtn + #strip { margin-left: 0; }
.srch { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.srch-bar { flex: none; gap: calc(4 * var(--px)); }
.srch-field { flex: 1 1 auto; min-width: 0; }
.srch-where { flex: none; max-width: 40%; }
.srch-out { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: calc(2 * var(--px)) 0; }
.srch-group { margin: 0 0 calc(6 * var(--px)); }
.srch-head { display: flex; justify-content: space-between; align-items: baseline; gap: calc(6 * var(--px));
  font-weight: bold; padding: calc(2 * var(--px)) calc(4 * var(--px)); border-bottom: var(--px) solid #000; }
.srch-count { font-weight: normal; }
.srch-list { border: 0; }
.srch-row { align-items: center; gap: calc(6 * var(--px)); }
.srch-row .cui-rowmain { min-width: 0; }
.srch-icon { width: calc(16 * var(--px)); height: calc(16 * var(--px)); flex: none; image-rendering: pixelated; object-fit: contain; }
.srch-mini { width: calc(16 * var(--px)); height: calc(24 * var(--px)); flex: none; object-fit: cover; border: var(--px) solid #000; }
.srch-top .srch-icon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.srch-top .srch-mini { width: calc(32 * var(--px)); height: calc(48 * var(--px)); }
.srch-top .cui-rowtitle { font-weight: bold; }
.srch-snip { display: block; font-size: calc(10 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.srch-hit { background: #000; color: #fff; }
.cui-on .srch-hit, .srch-row:focus .srch-hit { background: #fff; color: #000; }
.srch-more { margin: calc(2 * var(--px)) calc(4 * var(--px)); }
.notelist { display: flex; flex-direction: column; gap: calc(4 * var(--px)); margin-bottom: calc(8 * var(--px)); }
.noteitem { border: var(--px) solid #000; padding: calc(4 * var(--px)) calc(6 * var(--px)); }
.noteitem.unread { box-shadow: calc(2 * var(--px)) calc(2 * var(--px)) 0 #000; }
.notehead { display: flex; justify-content: space-between; gap: calc(8 * var(--px)); }
.notettl { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.notettl .cui-pie { flex: none; }
.notetime, .notebody { font-size: calc(10 * var(--px)); margin: calc(2 * var(--px)) 0; }

/* Drive (SPEC-desktop 5b): a Finder window, a sidebar of places, a list or icons, the space used; every control is
   the UI kit's (web/ui), these place them */
.drv { display: flex; flex-direction: column; gap: calc(6 * var(--px)); height: 100%; min-height: 0; }
.drvtop { display: flex; align-items: center; gap: calc(6 * var(--px)); min-height: calc(22 * var(--px)); }
.drvpath { flex: 1 1 auto; display: flex; align-items: center; gap: calc(3 * var(--px)); flex-wrap: wrap; min-width: 0; }
.drvcrumb { line-height: calc(18 * var(--px)); }
.drvsep { font-size: calc(10 * var(--px)); }
.drvsearch { flex: 0 1 calc(130 * var(--px)); width: calc(130 * var(--px)); }
.drvbody { flex: 1 1 auto; display: flex; min-height: 0; border: var(--px) solid #000; }
.drvside { flex: 0 0 calc(124 * var(--px)); border-right: var(--px) solid #000; padding: calc(4 * var(--px)) 0; overflow-y: auto; }
.drvside .cui-row { min-height: calc(20 * var(--px)); border-bottom: 0; gap: calc(4 * var(--px)); padding: calc(2 * var(--px)) calc(4 * var(--px)); }
.drvside .cui-rowtitle { font-size: calc(11 * var(--px)); }
.drvmain { flex: 1 1 auto; overflow: auto; min-width: 0; }
.drvmain > .notice { margin: calc(8 * var(--px)); }
.drvicon { width: calc(14 * var(--px)); height: calc(13 * var(--px)); image-rendering: pixelated; flex-shrink: 0; }
.drvgrid { display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); padding: calc(6 * var(--px)); }
.drvtile { position: static; width: calc(72 * var(--px)); }
.drvtile .drvicon { width: calc(32 * var(--px)); height: calc(28 * var(--px)); }
/* #424: a folder's icon in its colour */
.drvlook { display: inline-block; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
.drvtile .dname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* #22: Oscar's mark beside what he made, a clock beside a temporary one */
.drvmarks { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); margin-left: calc(4 * var(--px)); flex-shrink: 0; vertical-align: middle; }
.drvmark { width: var(--cui-icon); height: var(--cui-icon); margin: calc(-3 * var(--px)); opacity: .75; }
.drvtile .drvmarks { margin-left: 0; }
.drvtemp { display: inline-flex; align-items: center; gap: calc(6 * var(--px)); flex-wrap: wrap; }
.drvspace { display: flex; align-items: center; gap: calc(8 * var(--px)); font-size: calc(10 * var(--px)); }
.drvspace .drvbar, .drvup .drvbar { flex: 0 0 calc(120 * var(--px)); width: calc(120 * var(--px)); }
.drvuploads { display: flex; flex-direction: column; gap: calc(3 * var(--px)); }
.drvuploads:empty { display: none; }
.drvup { display: flex; align-items: center; gap: calc(6 * var(--px)); font-size: calc(10 * var(--px)); }
.drvupname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drvupstat { flex: 0 0 auto; }
.drivewin.dropping .drvbody { outline: calc(2 * var(--px)) dashed #000; outline-offset: calc(-4 * var(--px)); }
.drvinto { margin: 0 0 calc(4 * var(--px)); font-size: calc(10 * var(--px)); }
.drvpick { max-height: calc(160 * var(--px)); overflow: auto; border: var(--px) solid #000; }
.drvpick > .notice { margin: calc(6 * var(--px)); }
.drvpreview { display: flex; flex-direction: column; gap: calc(6 * var(--px)); height: 100%; min-height: 0; }
.drvprev { flex: 1; min-height: 0; max-width: 100%; object-fit: contain; background: #fff; }
.drvpdf { border: var(--px) solid #000; width: 100%; }
.drvaudio { width: 100%; }
.drvtext { flex: 1; overflow: auto; margin: 0; padding: calc(6 * var(--px)); border: var(--px) solid #000; font-family: var(--monaco);
  font-size: calc(10 * var(--px)); white-space: pre-wrap; word-break: break-word; }
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .drvbody { flex-direction: column; }
  .drvside { flex: 0 0 auto; border-right: 0; border-bottom: var(--px) solid #000; padding: 0; }
  .drvside .cui-list { flex-direction: row; overflow-x: auto; }
  .drvside .cui-row { width: auto; flex: 0 0 auto; }
  .drvsearch { flex-basis: calc(100 * var(--px)); width: calc(100 * var(--px)); }
}

/* ---- Right-click menus and the desktop background (SPEC-desktop 3.1, 3.2; ctxmenu.js, desk.js) ---------------- */

/* a long press opens our menu, not the phone's own callout, on the things that have one of ours */
#desktop, .dicon, .tile, .lrow, .drvtile, .drvtbl tr { -webkit-touch-callout: none; }
.dicon, .tile, .drvtile { -webkit-user-select: none; user-select: none; }
/* the desktop's icon names stay readable over any picture: the label on white, as the Finder draws it */
#desktop.hasbg .dicon .dname { background: #fff; color: #000; }
#desktop.hasbg .dicon.sel .dname { background: #000; color: #fff; }

.bgwin .wbody { display: flex; flex-direction: column; }
.bg { display: flex; flex-direction: column; gap: calc(8 * var(--px)); min-height: 100%; }
.bgtop { display: flex; gap: calc(10 * var(--px)); align-items: flex-start; }
.bgscreen { flex: none; border: var(--px) solid #000; padding: calc(3 * var(--px)); background: #fff;
  box-shadow: var(--px) var(--px) 0 #000; }
.bgshot { display: block; width: calc(160 * var(--px)); height: auto; image-rendering: auto; }
.bgside { display: flex; flex-direction: column; gap: calc(8 * var(--px)); min-width: 0; }
.bgpane { flex: 1; min-height: 0; overflow: auto; }
.bgpatterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(64 * var(--px)), 1fr)); gap: calc(6 * var(--px)); }
.bgpat { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--px)); padding: calc(3 * var(--px));
  border: var(--px) solid transparent; background: none; cursor: default; }
.bgpat.sel { border-color: #000; }
.bgpat.sel .bgname { background: #000; color: #fff; }
.bgswatch { display: block; width: calc(48 * var(--px)); height: calc(32 * var(--px)); border: var(--px) solid #000;
  background-repeat: repeat; background-size: calc(8 * var(--px)) calc(8 * var(--px)); image-rendering: pixelated; }
.bgname { font-size: calc(9 * var(--px)); padding: 0 calc(2 * var(--px)); white-space: nowrap; }
.bgedit { display: flex; gap: calc(10 * var(--px)); align-items: flex-start; margin-top: calc(6 * var(--px)); }
.bgstage { position: relative; flex: none; align-self: flex-start; border: var(--px) solid #000;
  touch-action: none; cursor: move; line-height: 0; }
/* desk.js sizes the picture to its own shape, so the frame's percentages are the picture's */
.bgstage img { display: block; image-rendering: auto; pointer-events: none; }
.bgframe { position: absolute; box-sizing: border-box; border: var(--px) dashed #fff; outline: var(--px) dashed #000;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); pointer-events: none; }
.bgstage { overflow: hidden; }
.bgopts { display: flex; flex-direction: column; gap: calc(6 * var(--px)); flex: none; }
.bgempty { margin-top: calc(10 * var(--px)); }
.bgstatus:empty { display: none; }
@media (max-width: 700px) {
  .bgtop, .bgedit { flex-direction: column; }
  .bgshot { width: calc(200 * var(--px)); }
}

/* Get Info, System 7's: the icon and name, then the facts in two columns */
.info { padding: calc(6 * var(--px)); }
.infohead { display: flex; align-items: center; gap: calc(10 * var(--px)); padding-bottom: calc(8 * var(--px));
  border-bottom: var(--px) solid #000; margin-bottom: calc(8 * var(--px)); }
.infoicon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); image-rendering: pixelated; }
/* Get Info's icon, a popup of every icon (#202) */
.cui-popup.infowell { padding: calc(2 * var(--px)); min-width: 0; }
.cui-popup.infowell .cui-icon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.infoname { font-family: var(--chicago); font-size: calc(12 * var(--px)); }
.inforows { display: grid; grid-template-columns: max-content 1fr; gap: calc(4 * var(--px)) calc(8 * var(--px)); }
.inforow { display: contents; }
.infok { font-weight: bold; text-align: right; }
/* Search and Download (mediaget): the kind's fields, the buttons, the results list */
.getbox { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.getgrid .getctl { width: 100%; }
.getgrid .gettxt.cui-field { width: 100%; box-sizing: border-box; }
.getgrid .getnum.cui-field { width: calc(56 * var(--px)); }
.getgrid [hidden] { display: none; }
.getres { min-height: 0; }
.updrop .buttons { flex-wrap: wrap; justify-content: center; }
.tskinds { display: flex; flex-wrap: wrap; gap: calc(4 * var(--px)) calc(10 * var(--px)); }
.tsform .cui-field { width: 100%; box-sizing: border-box; }
/* Requests: bugs, features and questions (T101, req-combine-support-requests) */
.reppics { display: flex; flex-wrap: wrap; gap: calc(4 * var(--px)); align-items: center; }
.reppic { position: relative; display: inline-flex; }
.reppic > img, .reppics > img, .reqattachrow > img { max-width: calc(96 * var(--px)); max-height: calc(72 * var(--px)); border: var(--px) solid #000; }
.reppic .cui-btn { position: absolute; top: 0; right: 0; }
.repsnap > img { border-style: dashed; }
.reqreply { border-left: calc(2 * var(--px)) solid #000; padding-left: calc(4 * var(--px)); white-space: pre-wrap; }
.repstatus, .reqsent { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.reqkinds { flex-wrap: wrap; }
.reqitem { border: var(--px) solid #000; padding: calc(4 * var(--px)) calc(6 * var(--px)); }
/* #530 (Lloyd, 31 Oct: "the title length alters the layout"): each request in the list is a fixed grid. The kind's
   glyph; the title on one line, cut short with an ellipsis (the full title is on the request when opened); the app,
   tags and counts on one line under it; and four cells of fixed width, state, priority, assignee and date, which never
   move whatever the title. A narrow list, a phone, puts the four cells on a row of their own under the title; a list
   at least 46em wide puts them at the right. #417's title one letter a line cannot come back: the title never wraps
   in the list and the cells take no room from it but their own. */
.reqlist { display: flex; flex-direction: column; gap: calc(4 * var(--px)); container-type: inline-size; --rq-state: calc(116 * var(--px)); --rq-pri: calc(70 * var(--px));
  --rq-who: calc(92 * var(--px)); --rq-when: calc(46 * var(--px)); --rq-gap: calc(6 * var(--px)); }
.reqhead { display: grid; grid-template-columns: calc(16 * var(--px)) minmax(0, 1fr);
  grid-template-areas: "kind title" "kind sub" "cells cells"; column-gap: var(--rq-gap); row-gap: calc(2 * var(--px));
  align-items: center; cursor: pointer; min-width: 0; }
.reqkind { grid-area: kind; align-self: start; width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.reqtitlecell { grid-area: title; display: flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; }
.reqtitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reqsub { grid-area: sub; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9em; }
.reqsub > * { margin-right: calc(6 * var(--px)); vertical-align: middle; }
.reqsub .tagchips, .reqsub .reqstate { display: inline-flex; }
.reqcells { grid-area: cells; display: grid; grid-template-columns: var(--rq-state) var(--rq-pri) minmax(0, 1fr) var(--rq-when);
  column-gap: var(--rq-gap); align-items: center; min-width: 0; }
.reqcell { min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: calc(1 * var(--px)); }
.reqcell-when { align-items: flex-end; }
.reqwhoname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.reqcell .reqassignee { max-width: 100%; min-width: 0; }
@container (min-width: 46em) {
  .reqhead { grid-template-columns: calc(16 * var(--px)) minmax(0, 1fr) max-content;
    grid-template-areas: "kind title cells" "kind sub cells"; }
  .reqcells { grid-template-columns: var(--rq-state) var(--rq-pri) var(--rq-who) var(--rq-when); }
}
.reqapp, .reqwhen { white-space: nowrap; }
/* opened: the full title wraps by words, and the facts are a grid of labels and values */
.reqfull { font-size: calc(12 * var(--px)); margin: calc(4 * var(--px)) 0; overflow-wrap: break-word; word-break: normal; white-space: normal; }
.reqfacts { display: grid; grid-template-columns: calc(64 * var(--px)) minmax(0, 1fr); gap: calc(3 * var(--px)) calc(8 * var(--px));
  align-items: center; margin: 0 0 calc(6 * var(--px)); }
.reqfactlab { font-weight: bold; white-space: nowrap; }
.reqfactval { display: flex; flex-wrap: wrap; align-items: center; gap: calc(3 * var(--px)) calc(6 * var(--px)); min-width: 0; overflow-wrap: anywhere; }
/* #530: Work, the notes timeline and the tasks */
.reqwork { display: flex; flex-direction: column; gap: calc(4 * var(--px)); border-top: var(--px) solid #000; padding-top: calc(4 * var(--px)); margin: calc(6 * var(--px)) 0; }
.reqworkhead { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.reqworkhead .reqnotebtn { margin-left: auto; }
.reqtasks { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.reqtasks:empty { display: none; }
.reqtask { display: flex; align-items: center; gap: calc(6 * var(--px)); min-width: 0; }
.reqtask .cui-check, .reqtask label { min-width: 0; overflow-wrap: anywhere; }
.reqtaskby { font-size: 0.9em; font-style: italic; white-space: nowrap; }
.reqdone .reqtaskby { text-decoration: none; }
.reqnotes { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.reqnote { border-left: calc(2 * var(--px)) solid #000; padding-left: calc(6 * var(--px)); min-width: 0; }
.reqnote[data-by="worker"] { border-left-style: double; border-left-width: calc(3 * var(--px)); }
.reqnote[data-by="oscar"] { border-left-style: dashed; }
.reqnotehead { display: flex; flex-wrap: wrap; align-items: center; gap: calc(2 * var(--px)) calc(6 * var(--px)); }
.reqnotekind { font-style: italic; }
.reqnotewhen { margin-left: auto; white-space: nowrap; font-size: 0.9em; }
.reqnotetext { white-space: pre-wrap; overflow-wrap: anywhere; margin: calc(2 * var(--px)) 0; }
.reqnotetasks { margin: calc(2 * var(--px)) 0; padding-left: calc(16 * var(--px)); }
.reqnotelinks { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)) calc(8 * var(--px)); margin: calc(2 * var(--px)) 0; }
.reqnotelink { overflow-wrap: anywhere; }
.reqnonotes { margin: 0; font-style: italic; }
.requests > .formrow { flex-wrap: wrap; }
.reqpri { white-space: nowrap; }
.reqpri-critical, .reqpri-high, .reqpri-urgent { font-weight: bold; }
.repfile { align-items: center; gap: calc(2 * var(--px)); border: var(--px) solid #000; padding: 0 0 0 calc(4 * var(--px)); }
.repfile .cui-btn { position: static; }
.repfname, .reqfile { overflow-wrap: anywhere; }
.reqadded { border-left: calc(2 * var(--px)) dotted #000; padding-left: calc(4 * var(--px)); white-space: pre-wrap; margin: calc(4 * var(--px)) 0; }
.reqlinks { display: flex; flex-direction: column; gap: calc(2 * var(--px)); margin: calc(4 * var(--px)) 0; }
.reqlinkrow { display: inline-flex; align-items: center; gap: calc(4 * var(--px)); }
.reqtools { flex-wrap: wrap; align-items: center; }
.reqattachrow { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); max-width: 100%; }
.reqremovedlist { display: flex; flex-direction: column; gap: calc(4 * var(--px)); margin: calc(4 * var(--px)) 0; }
.reqremoved { border-left: calc(2 * var(--px)) solid #888; padding-left: calc(5 * var(--px)); overflow-wrap: anywhere; }
.reqblock { width: var(--cui-icon); height: var(--cui-icon); margin: calc(-1 * var(--px)); flex: none; }
.reqraised { white-space: nowrap; font-style: italic; }
.reqsuperseded .reqtitle { text-decoration: line-through; }
.reqsuper { white-space: nowrap; font-weight: bold; }
.reqcounts { white-space: nowrap; font-size: 0.9em; }
.reqassignee { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; font-weight: bold; }
/* request #367: the written-out request beside the person's words, its requirements, its linked work */
.reqwritten { display: flex; flex-direction: column; gap: calc(3 * var(--px)); border: var(--px) solid #000; padding: calc(4 * var(--px)); }
.reqdesc, .reqwords { white-space: pre-wrap; overflow-wrap: anywhere; }
.reqreqs { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.reqdone span { text-decoration: line-through; }
/* #543: a ticked requirement shows its proof under it */
.reqreqrow { display: flex; flex-direction: column; min-width: 0; }
.reqproof { display: flex; flex-wrap: wrap; gap: 0 calc(6 * var(--px)); padding-left: calc(22 * var(--px)); font-size: 0.9em; min-width: 0; }
.reqprooftext { white-space: pre-wrap; overflow-wrap: anywhere; }
.reqproofby { font-style: italic; white-space: nowrap; }
.reqwordshead { font-weight: bold; margin-bottom: 0; }
.reqrefs { display: flex; flex-wrap: wrap; gap: calc(4 * var(--px)) calc(8 * var(--px)); margin: calc(4 * var(--px)) 0; }
/* request #368: a status, state or priority with its glyph and its colour key */
.reqstate { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
.reqglyph { width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); flex: none; }
.reqcard .cui-rowextra, .reqcard .reqstate { margin-left: calc(4 * var(--px)); }
.reqform { display: flex; flex-direction: column; gap: calc(4 * var(--px)); border-top: var(--px) solid #000; padding-top: calc(4 * var(--px)); }
.reqform .cui-field, .reqform .cui-area { width: 100%; box-sizing: border-box; }
.reqlinkto.cui-field { width: calc(80 * var(--px)); }
.reqsort { display: inline-flex; flex-wrap: wrap; align-items: center; gap: calc(6 * var(--px)); margin-left: auto; }
.reqwords { white-space: pre-wrap; overflow-wrap: anywhere; }
/* #371: the project, the stage of the cycle and Oscar's discovery with the person's questions */
.reqproj { white-space: nowrap; font-style: italic; }
.reqdiscovery { display: flex; flex-direction: column; gap: calc(3 * var(--px)); border: var(--px) dotted #000; padding: calc(4 * var(--px)); margin: calc(4 * var(--px)) 0; }
.reqdischead { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.reqdisc { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.reqdischead2 { font-weight: bold; margin: calc(2 * var(--px)) 0 0; }
.reqdisclist { margin: 0; padding-left: calc(16 * var(--px)); }
.reqq { border-top: var(--px) solid #000; padding-top: calc(3 * var(--px)); }
.reqqopts { flex-wrap: wrap; }
.reqqanswer, .reqqrec { margin: calc(2 * var(--px)) 0 0; overflow-wrap: anywhere; }
.reqqdone .reqqtext { font-weight: normal; }
/* Settings > Time and Place, Settings > Oscar */
.timeplace .tp-zone { max-width: 100%; }
.tp-places { display: flex; flex-wrap: wrap; gap: calc(3 * var(--px)); margin: calc(2 * var(--px)) 0 calc(4 * var(--px)); }
.tp-offer { align-items: center; gap: calc(4 * var(--px)); }
.oscsign-logorow { align-items: center; gap: calc(6 * var(--px)); }
.oscsign-logo { width: calc(48 * var(--px)); height: calc(48 * var(--px)); image-rendering: pixelated; object-fit: contain; }
.oscsign-block { width: 100%; min-height: calc(40 * var(--px)); }
.aboutme > .shead, .timeplace > .shead, .tp-defaults > .shead, .oscsign > .shead, .tp-offer, .tp-defaults, .tp-places,
.oscsign > .cui-check, .oscsign-logorow, .oscsign > .jstatus, .tp-defaults > .jstatus { grid-column: 1 / -1; }
.tp-placebox { display: contents; }
.tp-defaults { width: 100%; margin: 0; }
.oscsign .oscsign-block { min-width: calc(160 * var(--px)); }
.oscallowlist { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.oscallow .oscallowname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.osctrig .osctrigname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.osctrig .osctrigwhen { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
/* Tags (request #359): the one set of tags, and a thing's tags as chips */
.tagchips { display: inline-flex; flex-wrap: wrap; gap: calc(3 * var(--px)); align-items: center; }
.tagchip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
.taglist { display: flex; flex-direction: column; gap: var(--cui-space-under); }   /* #326 */
.tagrow { display: flex; align-items: center; gap: calc(6 * var(--px)); flex-wrap: wrap; }
.tagrow .tagname.cui-field { width: calc(140 * var(--px)); }
.tagcounts { white-space: nowrap; }

/* #990: the sign-in window's head and foot */
.signin .signbrand { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 2px 0 8px; }
.signin .signlogo { width: 48px; height: 48px; }
.signin .signname { font-weight: bold; font-size: 1.15em; }
.signin .signfoot { justify-content: center; margin-top: 10px; }

/* #1119 (the user, 2 Nov: "no top bar, no minimise, maximise, close") and #990 (centred both ways, in theme): signed
   out, Sign In, Register and Recover Account are the page itself: no menu bar, no title bar; the form is a framed
   panel centred on the desktop's checker, scrolling when it is taller than the screen */
html.authpage #menubar, html.authpage #minbar { display: none; }
html.authpage #desktop { top: 0; }
html.authpage .win.authwin {
  position: fixed !important; inset: 0 !important; width: auto !important; height: auto !important; max-width: none;
  border: 0; box-shadow: none; background: transparent; resize: none; transform: none !important;
}
html.authpage .authwin .titlebar, html.authpage .authwin .wofl { display: none; }
html.authpage .authwin .wbody {
  display: flex; flex-direction: column; align-items: center; justify-content: safe center; height: 100%;
  overflow: auto; padding: calc(16 * var(--px)); box-sizing: border-box; background: transparent;
}
html.authpage .authwin .form.signin {
  width: 100%; max-width: calc(420 * var(--px)); margin: auto; box-sizing: border-box; flex: 0 0 auto;
  background: #fff; border: var(--px) solid #000; box-shadow: var(--cui-shadow); padding: calc(16 * var(--px));
}
.signin .authtitle { margin: 0 0 calc(4 * var(--px)); text-align: center; font-family: var(--chicago); font-weight: normal;
  font-size: calc(16 * var(--px)); }
.signin .authlinks { justify-content: center; }
.signin .cui-code { margin: calc(4 * var(--px)) 0; }