@layer core, look, core-phone, look-phone;

@layer core {
/* the hidden attribute always hides (WRITER2's root cause of PAPER_MEDI's MAJOR, MASTER 22-23 Oct): a class's own display
   (.btns, .find-step, .note ...) outranked the browser's [hidden] rule, so a part the page or sos1.js hid stayed on screen.
   Important in the first layer, so no later rule, layered or not, can show a hidden part again */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* SOS design system core (T27, AD-078 exploration). Every component reads only the tokens below; a look file
   (looks/*.css) sets them under .look-X and may move things for its own layout. Nothing here names a colour, a face or
   a size that a look cannot change. The frame is a size container: phone layouts come from its width, not the window's.

   Token contract (every look defines all of these):
   faces      --f-ui --f-display --f-mono
   type       --fs-1 .. --fs-7 (11 to 64 px), --lh-tight --lh-body, --w-text --w-strong --w-display, --track-label
   space      --sp-1 .. --sp-6, --ctl (control height), --row (row height), --pad-win
   controls   --ctl-s --ctl-l (small and large control heights), --hit (the least touch size), --r-ctl (a control's
              corner), --w-ctl (a control's label weight), --c-ctl-edge --c-hover --c-press --c-ctl-shine --sh-ctl (a
              button's edge, hover wash, press shade, primary shine and own shadow)
   corners    --r-s --r-m --r-l --r-pill
   colour     --c-floor --c-ink --c-ink-2 --c-ink-3 --c-line --c-surface --c-surface-2 --c-raised --c-selected
              --c-accent --c-accent-ink --c-accent-soft --c-danger --c-danger-ink --c-good --c-warn --c-focus --c-mark
              --c-g-path --c-g-1 --c-g-2 --c-g-more --c-halo (behind graph labels) --c-g-k-you/person/company/deal/event/email/folder/file (a dot's kind)
   brand      --c-brand --c-brand-2 --c-brand-3 (the logo's red and two tints of it: brand artwork only, such as the
              welcome after a sign-in; never a control, a state or an error)
   vault      --c-vault-ink --c-vault-ink-2 (light text on the welcome's steel vault, the same in either theme)
   depth      --glass (a backdrop-filter value or none) --edge --edge-in --sh-card --sh-win --sh-pop --line
   motion     --dur --dur-slow --ease --bounce (the one spring: the dock's, a window's opening)
   floor      --wall (the floor's background)
   icons      --ic-stroke (stroke width for line icons), --ic-obj (object icon size); on the page root, for the glass
              icons' sprite outside the frame: --c-ic-shade, --c-ic-ink (their night shade and ink) */

.frame { container: frame / inline-size; position: relative; overflow: hidden; isolation: isolate;
  font-family: var(--f-ui); font-size: var(--fs-3); line-height: var(--lh-body); font-weight: var(--w-text);
  color: var(--c-ink); background: var(--c-floor); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(.frame) *, :where(.frame) *::before, :where(.frame) *::after { box-sizing: border-box; }
:where(.frame) :where(h1, h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; }
:where(.frame) :where(ul, ol) { padding: 0; list-style: none; }
:where(.frame) :where(button) { font: inherit; color: inherit; }
:where(.frame) :where(input) { font: inherit; color: inherit; }
:where(.frame) :where(b) { font-weight: var(--w-strong); }
.frame mark { background: var(--c-mark); color: inherit; border-radius: 3px; padding: 0 1px; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.note { color: var(--c-ink-2); font-size: var(--fs-2); line-height: var(--lh-tight); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the whole-screen page (one screen at full size) */
body.screen-page { margin: 0; background: var(--c-screen); }
body.screen-page .frame { width: 100vw; height: 100vh; height: 100dvh; }
/* PB-20 (Pavel 22 Oct ~04:30, on his phone: "the bottom menu must persist at the bottom always"; no rubber-band bounce):
   the screen is the visible height (dvh: Safari's address bar shown or not), and on a phone the page itself never
   scrolls, so the dock's row stays at the bottom and iOS has nothing to bounce; the windows scroll inside. iOS Safari
   16 and later honour overscroll-behavior; older iOS may still bounce at an edge */
html:has(> body.screen-page), body.screen-page { overscroll-behavior: none; }
@media (max-width: 640px) {
  html:has(> body.screen-page), body.screen-page { position: fixed; inset: 0; overflow: hidden; }
}

/* ---- icons ---- */
.ic { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.22em; }
.ic :is(path, line, polyline, circle, rect, polygon) { vector-effect: non-scaling-stroke; }
.ic-heroicons g, .ic-tabler g { stroke-width: var(--ic-stroke); }
.ic-obj:is(.ic-fluent, .ic-glass) { width: var(--ic-obj); height: var(--ic-obj); }

/* ---- marks ---- */
.mock { position: absolute; z-index: var(--z-mock); top: var(--sp-2); left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: var(--r-pill);
  font: var(--w-strong) var(--fs-1)/1.4 var(--f-mono); letter-spacing: .12em; color: var(--c-accent-ink); background: var(--c-accent); opacity: .9; }
.bos-mark { width: 1.6em; height: 1.75em; color: var(--c-ink); overflow: visible; }   /* the red outline's round corners reach past the picture's box by a pixel or two at small sizes: the window title's hexagon showed flat at its top and bottom (Pavel's walk of Chicago 0.9.7, 3 Nov 2026) */
.bos-mark .bos-core { fill: var(--c-accent); }
.ic.bos-mark { width: 1.25em; height: auto; }  /* BOS's icon in an icon's place: the size of the place, the hexagon's shape */
.bos-s { width: 1.1em; height: 1.2em; }
.avatar { display: inline-grid; place-items: center; flex: none; width: 2.25em; height: 2.25em; border-radius: 50%;
  background: var(--c-accent-soft); color: var(--c-ink); font: var(--w-strong) var(--fs-2)/1 var(--f-ui); }
.avatar-s { width: 1.75em; height: 1.75em; font-size: var(--fs-1); }
.avatar-l { width: 3.5em; height: 3.5em; font-size: var(--fs-4); }

/* ---- controls ---- */
/* buttons (controls r0 CT2-CT7): three sizes from the control tokens; plain on a fill with a soft edge and its own small
   shadow, primary on the accent with a top shine, quiet bare until hovered, danger an outline until hovered; hover lays
   --c-hover over the fill and a press --c-press, sinking 1 px; disabled fades and takes no pointer. The focus ring is the frame's one rule */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--ctl); padding: 0 var(--sp-4);
  border: var(--line) solid var(--c-ctl-edge); border-radius: var(--r-ctl); background: var(--c-surface-2); color: var(--c-ink);
  box-shadow: var(--sh-ctl); font-weight: var(--w-ctl); font-size: var(--fs-2); line-height: 1.2; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
  box-shadow var(--dur) var(--ease), filter var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:hover { background-image: linear-gradient(var(--c-hover), var(--c-hover)); }
.btn-primary { background: var(--c-accent); border-color: transparent; color: var(--c-accent-ink); box-shadow: var(--sh-ctl), inset 0 1px 0 var(--c-ctl-shine); }
/* hover mixes the accent toward the ink: darker by day, lighter by night (a brightness filter does little at night; DESIGN_B 06:20) */
.btn-primary:hover { background: color-mix(in srgb, var(--c-accent) 86%, var(--c-ink)); }
.btn-danger { background: transparent; border-color: var(--c-danger); color: var(--c-danger); box-shadow: none; }
.btn-danger:hover { background: var(--c-danger); color: var(--c-danger-ink); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--c-ink-2); box-shadow: none; }
.btn-quiet:hover { color: var(--c-ink); }
.btn:active { background-image: linear-gradient(var(--c-press), var(--c-press)); box-shadow: none; transform: translateY(1px); }
.btn-s { min-height: var(--ctl-s); padding: 0 var(--sp-3); gap: var(--sp-1); border-radius: var(--r-s); font-size: var(--fs-2); }
.btn-l { min-height: var(--ctl-l); padding: 0 var(--sp-5); font-size: var(--fs-3); }
.btn:is(:disabled, [aria-disabled="true"]) { opacity: .45; cursor: default; pointer-events: none; box-shadow: none; filter: none; transform: none; }
/* a quiet button where no pointer can hover to reveal it (a touch screen): a faint fill, so it reads as a button (CT5, DLQ2) */
@media (pointer: coarse) { .btn-quiet { background: var(--c-surface-2); } }
.btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.ibtn { display: inline-grid; place-items: center; width: var(--ctl); height: var(--ctl); flex: none; padding: 0; border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--c-ink-2); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ibtn:hover { background-image: linear-gradient(var(--c-hover), var(--c-hover)); color: var(--c-ink); }
.ibtn:active { background-image: linear-gradient(var(--c-press), var(--c-press)); transform: translateY(1px); }
.ibtn:is(:disabled, [aria-disabled="true"]) { cursor: default; opacity: .4; background: transparent; color: var(--c-ink-2); transform: none; }
/* Files' Up: the back chevron turned to point up (Files explorer r5 EX11) */
.ibtn-up .ic { transform: rotate(90deg); }
.field { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding: 0 var(--sp-3); border: var(--line) solid var(--edge);
  border-radius: var(--r-m); background: var(--c-surface-2); color: var(--c-ink-2); min-width: 0; }
.field input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--c-ink); }
.field input::placeholder { color: var(--c-ink-3); }
/* ---- form parts of the design standard 1.0 (DSX1-DSX5, DSX7, DSX10): one look with .field, tokens only ---- */
.fgrid { display: grid; gap: var(--sp-3); }
.frow { display: grid; grid-template-columns: min(160px, 34%) minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); align-items: start; }
.frow-l { padding-top: calc((var(--ctl) - 1.4em) / 2); color: var(--c-ink-2); font-size: var(--fs-2); }
.frow-c { display: grid; gap: var(--sp-1); min-width: 0; justify-items: start; }
.frow-n { margin: 0; }
/* a choice box with long words (the time zones) took its own width as the column's, 36 px past the Settings pane at 1440 (Alex walk 8b): one column that may shrink, the box's max-width does the rest */
.set-pane .frow-c { grid-template-columns: minmax(0, 1fr); }
/* walk r1 item 8 (SEARCH, 4 Nov): a Settings row's help line wraps at any width (Blur: "How much th...", it was cut at 700 px, where only
   the phone width wrapped it), and a slider row folds its slider under the words when the pane is narrow */
.set-pane .row-note { white-space: normal; overflow: visible; text-overflow: clip; }
.set-pane .row.slider { flex-wrap: wrap; }
.set-pane .row.slider .row-main { flex: 1 1 11rem; }
.frow-e { margin: 0; color: var(--c-danger); font-size: var(--fs-1); }
.frow.has-error .ctl { border-color: var(--c-danger); }
/* a box marked invalid (aria-invalid, sweep 13 row 5) shows it to the eye too, in a form row or not (a sign-in box, the recovery code): the line under it says it in words */
.field:has(> input[aria-invalid="true"]), .ctl[aria-invalid="true"] { border-color: var(--c-danger); }
.ctl { min-height: var(--ctl); padding: 0 var(--sp-3); border: var(--line) solid var(--edge); border-radius: var(--r-m); background: var(--c-surface-2);
  color: var(--c-ink); font: inherit; max-width: 100%; }
.ctl::placeholder { color: var(--c-ink-3); }  /* the dd/mm/yyyy and hh:mm hints: the same token as .field's, not the browser's own grey (3.6:1) */
.ctl:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
/* DSX2: grows with its words to 8 lines (where the browser can size a field to its content), then scrolls */
.ctl-area { width: 100%; min-height: calc(var(--ctl) * 2); padding: var(--sp-2) var(--sp-3); resize: vertical; line-height: 1.45;
  field-sizing: content; max-height: calc(1.45em * 8 + var(--sp-2) * 2); overflow: auto; }
.ctl-date { min-width: 10rem; }
.cal-when > .ctl-date { box-sizing: border-box; width: 15.75rem; max-width: 100%; }  /* the day box and the time box are one width (DESIGN_LEAD M-3, DESIGN_A L-3) */
.cal-when { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }  /* a date box and its time box: the same gap as every pair, side by side or stacked (DESIGN_A 4a, DR10) */
.ctl-sel { position: relative; display: inline-flex; max-width: 100%; }
.ctl-sel select { appearance: none; -webkit-appearance: none; padding-right: calc(var(--sp-3) * 2 + var(--sp-2)); min-width: 10rem; }
/* the shared chevron (the back one, turned down), placed by tokens (gate R15) */
.ctl-sel-ic { position: absolute; right: var(--sp-3); top: 50%; transform: translateY(-50%) rotate(-90deg); pointer-events: none; color: var(--c-ink-2); }
.chk { position: relative; display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); cursor: pointer; }
.chk-i { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk-b { display: inline-grid; place-items: center; width: 1.2em; height: 1.2em; border: 2px solid var(--c-ink-3); border-radius: var(--r-s); background: var(--c-raised); color: var(--c-accent-ink); }
.chk-b .ic { width: .85em; height: .85em; visibility: hidden; }
.chk-i[type="radio"] + .chk-b { border-radius: 50%; }  /* one of a set (Files choosing one file): round, as a radio is */
.chk-i:checked + .chk-b { background: var(--c-accent); border-color: var(--c-accent); }
.chk-i:checked + .chk-b .ic { visibility: visible; }
/* a switch that is a link (role=checkbox, no input): the box drawn on by its class (DEPUTY_UI2, the CRM) */
.chk-b.is-on { background: var(--c-accent); border-color: var(--c-accent); }
.chk-b.is-on .ic { visibility: visible; }
.chk-i:focus-visible + .chk-b { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* DSX6 file_pick: the label is the button; the browser's own input stays beside it, its own button hidden, so it
   names the chosen file without any script */
.fpick { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); max-width: 100%; }
.fpick-i { font: inherit; font-size: var(--fs-1); color: var(--c-ink-2); max-width: 100%; min-width: 0; }
.fpick-i::file-selector-button { display: none; }
.fpick:focus-within .fpick-l { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* DSX9 empty: the icon, one sentence, the act */
.empty { display: grid; justify-items: start; gap: var(--sp-2); padding: var(--sp-4) 0; }
.empty-ic { width: 2.4em; height: 2.4em; }
/* range: the name, the slider in the accent, the value now */
.range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.range-l { color: var(--c-ink-2); font-size: var(--fs-2); }
.range input[type="range"] { width: 180px; accent-color: var(--c-accent); }
.range-v { min-width: 4ch; color: var(--c-ink-2); font-size: var(--fs-2); }
.pane { display: grid; gap: var(--sp-3); align-content: start; padding: var(--sp-3) var(--sp-4); border: var(--line) solid var(--c-line); border-radius: var(--r-m);
  background: var(--c-face-solid-raised); min-width: 0; }
.pane-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.pane-t { margin: 0; font: var(--w-strong) var(--fs-3)/1.25 var(--f-ui); color: var(--c-ink); }
.pane-body { display: grid; gap: var(--sp-2); min-width: 0; }
.pane-foot { margin: 0; }
/* the browser's own autofill colour (Pavel, 20 Oct: "i dislike these yello highlights"): a field it fills keeps SOS's
   field look, in either theme (the theme's own colours). Two rules: a browser that does not know one selector drops
   only its rule; the long transition keeps Chrome's own background from showing through */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--c-ink); caret-color: var(--c-ink); -webkit-box-shadow: 0 0 0 100vmax var(--c-surface-2) inset;
  box-shadow: 0 0 0 100vmax var(--c-surface-2) inset; transition: background-color 600000s 0s, color 600000s 0s; }
input:autofill, textarea:autofill, select:autofill { color: var(--c-ink); caret-color: var(--c-ink); box-shadow: 0 0 0 100vmax var(--c-surface-2) inset; }
.seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: var(--r-m); background: var(--c-surface-2); border: var(--line) solid var(--edge); }
.seg-o { padding: 0 var(--sp-3); min-height: calc(var(--ctl) - 6px); display: inline-flex; align-items: center; border-radius: calc(var(--r-m) - 2px);
  font-size: var(--fs-2); color: var(--c-ink-2); white-space: nowrap; }
.seg-o.is-on { background: var(--c-chosen, var(--c-surface)); color: var(--c-ink); font-weight: var(--w-strong); box-shadow: var(--sh-card); }
/* a choice inside a larger form (<.seg_pick>): real radios, drawn as the segments */
fieldset.seg-pick { margin: 0; min-width: 0; flex-wrap: wrap; }
.seg-pick .seg-o { position: relative; cursor: pointer; }  /* the hidden radio, and the browser's "required" bubble, sit on their segment */
.seg-r { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg-o:has(.seg-r:checked) { background: var(--c-chosen, var(--c-surface)); color: var(--c-ink); font-weight: var(--w-strong); box-shadow: var(--sh-card); }
/* The views of one window (<.tabs>; CT12, DESIGN_LEAD 24 Oct 06:01): text tabs on one line, a rule under the row; the chosen tab is ink, strong, with a
   2 px accent bar (the bar is the shape: never colour alone); more than fit and the row scrolls sideways with a fade at the edge that has more, never
   wraps. Inside the clipping row the focus ring is drawn inward. A choice of 2 to 4 settings is the .seg above, not this */
@property --tabs-fl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tabs-fr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes tabs-edge { from { --tabs-fl: 0px; --tabs-fr: var(--sp-5); } to { --tabs-fl: var(--sp-5); --tabs-fr: 0px; } }
.tabs { display: flex; flex-wrap: nowrap; gap: var(--sp-1); min-width: 0; overflow-x: auto; overscroll-behavior-x: none; scrollbar-width: none; scroll-snap-type: x proximity;
  padding-block: 2px; border-bottom: var(--line) solid var(--c-line); -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fl), #000 calc(100% - var(--tabs-fr)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--tabs-fl), #000 calc(100% - var(--tabs-fr)), transparent); }
.tabs::-webkit-scrollbar { display: none; }
@supports (animation-timeline: scroll(x self)) { .tabs { animation: tabs-edge linear both; animation-timeline: scroll(x self); } }
.tab { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--ctl); padding: 0 var(--sp-3); border-radius: var(--r-s) var(--r-s) 0 0;
  font-size: var(--fs-3); color: var(--c-ink-2); text-decoration: none; white-space: nowrap; scroll-snap-align: end; scroll-margin-inline: var(--sp-5); }
.tab:hover { color: var(--c-ink); background: var(--c-surface-2); }
.tab.is-on, .tab[aria-current] { color: var(--c-ink); font-weight: var(--w-strong); box-shadow: inset 0 -2px 0 var(--c-accent); }
.tab:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.seg-o:has(.seg-r:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.toggle { display: inline-block; flex: none; width: 2.6em; height: 1.5em; border-radius: var(--r-pill); background: var(--c-line); position: relative; }
.toggle i { position: absolute; top: .18em; left: .18em; width: 1.14em; height: 1.14em; border-radius: 50%; background: var(--c-surface); box-shadow: var(--sh-card);
  transition: transform var(--dur) var(--ease); }
.toggle.is-on { background: var(--c-accent); }
.toggle.is-on i { transform: translateX(1.1em); }
.pill { display: inline-flex; align-items: center; min-height: 1.6em; padding: 0 var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-1);
  font-weight: var(--w-strong); white-space: nowrap; background: var(--c-surface-2); color: var(--c-ink-2); border: var(--line) solid var(--edge); }
.pill-good { color: var(--c-good); }
.pill-warn { color: var(--c-warn); }
.pill-bad { color: var(--c-danger); }
.pill-accent { color: var(--c-accent); }
.meter { display: grid; gap: 3px; }
.meter-top { display: flex; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-1); color: var(--c-ink-2); }
.meter-top .num { color: var(--c-ink); }
.meter-bar { height: 6px; border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; }
.meter-bar i { display: block; height: 100%; background: var(--c-accent); border-radius: inherit; }
/* the gauge part: a fill, a tall tick (by now), a pale stretch (the end), a fixed mark (the reserve); a picture of numbers in attributes (seat-use r0) */
.gauge { display: block; inline-size: 100%; block-size: 12px; overflow: visible; }
.gauge-track { fill: var(--c-line); }
.gauge-fill { fill: var(--c-accent); }
.gauge-ghost { fill: var(--c-accent); fill-opacity: .35; }
.gauge-mark, .gauge-line { stroke: var(--c-ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.gauge-line { stroke: var(--c-ink-2); }
.w0 { width: 0 } .w5 { width: 5% } .w10 { width: 10% } .w15 { width: 15% } .w20 { width: 20% } .w25 { width: 25% } .w30 { width: 30% }
.w35 { width: 35% } .w40 { width: 40% } .w45 { width: 45% } .w50 { width: 50% } .w55 { width: 55% } .w60 { width: 60% } .w65 { width: 65% }
.w70 { width: 70% } .w75 { width: 75% } .w80 { width: 80% } .w85 { width: 85% } .w90 { width: 90% } .w95 { width: 95% } .w100 { width: 100% }

/* ---- the table (controls r0 CT17, CS6): one look for a list of things with columns. <div class="tbl-w"><table class="tbl">:
   the wrapper is the table's own size container, so a table turns to cards by the room IT has (a narrow pane, a window
   beside a side list, a phone), never by the screen: at 640 px or less, or 960 px for a wide one (.tbl-w.tbl-wide, 6 or more
   columns). As cards each row's first cell is its name, a cell marked .tbl-aside (one figure) sits beside it, and every other
   cell takes a line of its own, said with its data-label (the aside's label, if it has one, without a colon: "Seen 12:04"); every
   link in a card is a 44 px target (IDEAS 24 Oct 02:54, from Qaf's cards). Rules under the header, none between columns; numbers right in
   tabular figures; a total under a stronger rule; words break at word ends, never mid-word (Books' "Accountant-s") ---- */
.tbl-w { container: tbl / inline-size; min-width: 0; max-width: 100%; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
.tbl caption { padding-bottom: var(--sp-1); text-align: left; }
.tbl :is(th, td) { padding: var(--sp-2) var(--sp-3); text-align: left; vertical-align: top; border-bottom: var(--line) solid var(--c-line); overflow-wrap: break-word; }
.tbl tr > :first-child { padding-inline-start: var(--sp-2); }
.tbl tr > :last-child { padding-inline-end: var(--sp-2); }
.tbl thead th { vertical-align: bottom; font-weight: var(--w-strong); color: var(--c-ink-2); overflow-wrap: normal; }  /* a heading breaks only between words ('Syste / m', DEPUTY_UI2 24 Oct 02:34) */
.tbl tbody th { font-weight: var(--w-strong); }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl tfoot :is(th, td) { font-weight: var(--w-strong); border-top: var(--line) solid var(--c-ink-2); border-bottom: 0; }
.tbl tr.is-dim > * { color: var(--c-ink-3); }
.tbl tbody tr:has(a.row-link):hover > * { background: var(--c-surface-2); }
@container tbl (max-width: 640px) {
  .tbl-w > .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tbl-w > .tbl, .tbl-w > .tbl :is(tbody, tfoot) { display: block; }
  .tbl-w > .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-2); border-bottom: var(--line) solid var(--c-line); }  /* the figure on the name's own line, even when the name is a tall touch target (DEPUTY_TESTER 08:47, Medisense Claims) */
  .tbl-w > .tbl tfoot tr { border-top: var(--line) solid var(--c-ink-2); border-bottom: 0; }
  .tbl-w > .tbl tbody:has(+ tfoot) tr:last-child { border-bottom: 0; }  /* one rule above the total, not two (DEPUTY_TESTER 07:05) */
  .tbl-w > .tbl :is(th, td) { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .tbl-w > .tbl tr > :first-child { grid-column: 1; grid-row: 1; font-weight: var(--w-strong); }
  .tbl-w > .tbl tr > .tbl-aside { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
  .tbl-w > .tbl tr > :not(:first-child, .tbl-aside) { grid-column: 1 / -1; }
  .tbl-w > .tbl td[data-label]:not(:first-child, .tbl-aside)::before { content: attr(data-label) ": "; color: var(--c-ink-2); }
  .tbl-w > .tbl td:empty { display: none; }
  .tbl-w > .tbl td.tbl-aside[data-label]::before { content: attr(data-label) " "; color: var(--c-ink-2); }
  .tbl-w > .tbl caption:not(.sr) { display: block; }
  .tbl-w > .tbl :is(th, td) a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .tbl-w > .tbl .tbl-aside a { justify-content: flex-end; }
}
@container tbl (max-width: 960px) {
  .tbl-wide > .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tbl-wide > .tbl, .tbl-wide > .tbl :is(tbody, tfoot) { display: block; }
  .tbl-wide > .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-2); border-bottom: var(--line) solid var(--c-line); }  /* the figure on the name's own line, even when the name is a tall touch target (DEPUTY_TESTER 08:47, Medisense Claims) */
  .tbl-wide > .tbl tfoot tr { border-top: var(--line) solid var(--c-ink-2); border-bottom: 0; }
  .tbl-wide > .tbl tbody:has(+ tfoot) tr:last-child { border-bottom: 0; }  /* one rule above the total, not two (DEPUTY_TESTER 07:05) */
  .tbl-wide > .tbl :is(th, td) { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .tbl-wide > .tbl tr > :first-child { grid-column: 1; grid-row: 1; font-weight: var(--w-strong); }
  .tbl-wide > .tbl tr > .tbl-aside { grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap; }
  .tbl-wide > .tbl tr > :not(:first-child, .tbl-aside) { grid-column: 1 / -1; }
  .tbl-wide > .tbl td[data-label]:not(:first-child, .tbl-aside)::before { content: attr(data-label) ": "; color: var(--c-ink-2); }
  .tbl-wide > .tbl td:empty { display: none; }
  .tbl-wide > .tbl td.tbl-aside[data-label]::before { content: attr(data-label) " "; color: var(--c-ink-2); }
  .tbl-wide > .tbl caption:not(.sr) { display: block; }
  .tbl-wide > .tbl :is(th, td) a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
  .tbl-wide > .tbl .tbl-aside a { justify-content: flex-end; }
}

/* ---- surfaces: card, window, menu (the look decides glass or opaque through --c-surface and --glass) ---- */
.card, .win, .menu, .notes-centre, .toast, .gate-card, .dock, .os-bar, .os-status, .places .place:hover {
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.card { display: grid; align-content: start; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-l); background: var(--c-surface);
  border: var(--line) solid var(--edge); box-shadow: var(--sh-card), inset 0 1px 0 var(--edge-in); min-width: 0; }
.card-h { display: flex; align-items: center; gap: var(--sp-2); font: var(--w-strong) var(--fs-1)/1.2 var(--f-ui); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--c-ink-2); }
.card-h .ic-obj:is(.ic-fluent, .ic-glass) { width: 1.35em; height: 1.35em; }
.list { display: grid; gap: var(--sp-2); }
.list li { display: flex; gap: var(--sp-2); align-items: baseline; }
.list li > span:last-child { display: grid; }
.dot { width: .62em; height: .62em; flex: none; border-radius: 50%; border: 2px solid var(--c-accent); transform: translateY(.05em); }
.needs-from { display: flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-1); color: var(--c-ink-2); }
.needs-t { font: var(--w-strong) var(--fs-4)/var(--lh-tight) var(--f-display); }
.mach { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); }
.mach + .mach { border-top: var(--line) solid var(--c-line); }
.mach-h { display: flex; align-items: center; gap: var(--sp-2); }
.mach-h .pill { margin-left: auto; }

.win { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-radius: var(--r-l); background: var(--c-surface);
  border: var(--line) solid var(--edge); box-shadow: var(--sh-win), inset 0 1px 0 var(--edge-in); overflow: hidden; }
.win-title { display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--ctl) + var(--sp-2)); padding: 0 var(--sp-2) 0 var(--sp-4);
  border-bottom: var(--line) solid var(--c-line); }
.win-title h2 { font: var(--w-strong) var(--fs-3)/1 var(--f-display); flex: 1; }
.win-icon { width: 1.25em; height: 1.25em; }
.win-icon:is(.ic-fluent, .ic-glass) { width: 1.5em; height: 1.5em; }
.win-btns { display: flex; gap: 2px; }
.win-btns .ibtn { width: calc(var(--ctl) * .85); height: calc(var(--ctl) * .85); }
.win-close:hover { background: var(--c-danger); color: var(--c-danger-ink); }
.win-tools { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-bottom: var(--line) solid var(--c-line); }
.win-tools .search { flex: 1; max-width: 420px; margin-left: auto; }
.win-body { flex: 1; min-height: 0; overflow: hidden; }
/* a window's status line (SOS1Web.Line, BU3): its last act, with Undo or Redo, at its foot until the next act */
.win-status { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-top: var(--line) solid var(--c-line); font-size: var(--fs-2); }
.win-line { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.crumbs { display: flex; gap: var(--sp-1); color: var(--c-ink-2); font-size: var(--fs-2); }
.crumbs span + span::before { content: "/"; margin-right: var(--sp-1); color: var(--c-ink-3); }

.menu { position: absolute; z-index: var(--z-menu); min-width: 240px; padding: var(--sp-1); border-radius: var(--r-m); background: var(--c-face-solid);   /* near-solid: words behind a menu never show between its items (DESIGN_LEAD 3 Nov 17:09, header-final3 shots) */
  border: var(--line) solid var(--edge); box-shadow: var(--sh-pop); }
.menu-head { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-3); }
.menu-head span { display: grid; }
/* an item drawn as a <button> (a form's, the window menu's): the button's own look cleared at zero weight, so .menu-i's and its :hover and :active always win (CT18, TESTER 14:38) */
:where(button).menu-i { background: transparent; border: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.menu-i { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); padding: 0 var(--sp-2); border-radius: var(--r-s); color: var(--c-ink); }
.menu-i:hover { background: var(--c-hover, var(--c-raised)); }
.menu-i:active { background: var(--c-press, var(--c-raised)); }
.menu-i:disabled, .menu-i[aria-disabled="true"] { opacity: .45; cursor: default; background: transparent; }  /* a disabled item, as a disabled button (CT7, CT18) */
.menu-i kbd { margin-left: auto; font: var(--fs-1) var(--f-mono); color: var(--c-ink-3); }
.menu-i.is-danger { color: var(--c-danger); }
/* The acts of a question (CT18, DESIGN_LEAD's controls r0 CS8; every <.question>): the PRIMARY button is LAST in the markup (on the right beside a mouse, on top on a phone) and
   the others come before it, quiet. Usually the primary is the act and Cancel or Keep is the quiet one; in the Files held-file question the safe answer is the primary and
   stays last (the risky one must never be on top under the thumb). On a phone the row is drawn reversed (column-reverse, every button the full width): the markup order
   is the Tab order, so focus starts on the first, quiet button. A form holding one button is transparent to the row, so its button is the row's item. */
.question-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
.question-acts > :is(form, .form) { display: contents; }
.menu-sep { border: 0; border-top: var(--line) solid var(--c-line); margin: var(--sp-1) 0; }
.menu-h { margin: var(--sp-1) 0 0; padding: 0 var(--sp-3); font: var(--w-strong) var(--fs-1)/1.6 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--c-muted, inherit); opacity: .75; }

.row { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--row); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-s); min-width: 0; }
.row.is-on { background: var(--c-selected); }
.row-ic { width: 1.25em; height: 1.25em; color: var(--c-ink-2); }
.row-ic:is(.ic-fluent, .ic-glass) { width: 1.6em; height: 1.6em; }
.row-main { flex: 1; display: grid; min-width: 0; }
.row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-note { font-size: var(--fs-1); color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: var(--fs-1); color: var(--c-ink-2); }
.row-trail { display: flex; align-items: center; gap: var(--sp-2); }
.group { display: grid; border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface-2); padding: 2px; }
.group > .row + .row { border-top: var(--line) solid var(--c-line); border-radius: 0; }
.kv { display: grid; gap: var(--sp-1); }
.kv div { display: flex; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-2); }
.kv dt { color: var(--c-ink-2); }

/* ---- the dock ---- */
.dock { display: flex; align-items: center; gap: var(--sp-1); padding: var(--sp-1); border-radius: var(--r-l); background: var(--c-surface);
  border: var(--line) solid var(--edge); box-shadow: var(--sh-win), inset 0 1px 0 var(--edge-in); }
.dock-i { position: relative; display: grid; place-items: center; width: calc(var(--ctl) * 1.3 * var(--dock-k, 1)); height: calc(var(--ctl) * 1.3 * var(--dock-k, 1));
  border-radius: var(--r-m); transition: transform .55s var(--bounce), background var(--dur) var(--ease); transform-origin: 50% 100%; }
.dock-i:hover { background: var(--c-raised); transform: translateY(-12px) scale(1.16); }
.dock-more { display: none; }  /* a phone's More (core-phone); a computer's dock shows every app */
.dock-i .ic { width: calc(1.5em * var(--dock-k, 1)); height: calc(1.5em * var(--dock-k, 1)); color: var(--c-ink); }
.dock-i :is(.ic-fluent, .ic-glass) { width: calc(var(--ctl) * .9 * var(--dock-k, 1)); height: calc(var(--ctl) * .9 * var(--dock-k, 1)); }
.dock-i .bos-mark { width: calc(1.5em * var(--dock-k, 1)); height: calc(1.65em * var(--dock-k, 1)); }

/* Lean (Pavel, 19 Oct, option 3 of his dock studies; sos1.js, DockLean): the icon under the pointer or the focus
   rises and grows 16 %, the two on each side lean towards it, rising a little, and all spring back */
.dock-i.lean-up { transform: translateY(-12px) scale(1.16); }
.dock-i.lean-l1 { transform: rotate(9deg) translateY(-4px); }
.dock-i.lean-l2 { transform: rotate(4deg) translateY(-1px); }
.dock-i.lean-r1 { transform: rotate(-9deg) translateY(-4px); }
.dock-i.lean-r2 { transform: rotate(-4deg) translateY(-1px); }
/* the hop when an app opens: its icon, on the page that opened it (translate, so it adds to a lean) */
.dock-i.is-opening { animation: dock-hop .7s var(--bounce); }
@keyframes dock-hop { 0% { translate: 0 0; } 30% { translate: 0 -22px; } 55% { translate: 0 0; } 72% { translate: 0 -8px; } 100% { translate: 0 0; } }
/* no motion with reduce motion, SOS's own setting or the system's */
.frame.still .dock-i { transition: none; transform: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .dock-i { transition: none; animation: none !important; } .dock-i:hover, .dock-i[class*="lean-"] { transform: none; } }

/* Dock size (Settings > Appearance): 44 px is today's dock; a larger size scales it, its icons too */
.frame.dock-48 { --dock-k: 1.0909; } .frame.dock-52 { --dock-k: 1.1818; } .frame.dock-56 { --dock-k: 1.2727; } .frame.dock-60 { --dock-k: 1.3636; }
.frame.dock-64 { --dock-k: 1.4545; } .frame.dock-68 { --dock-k: 1.5455; } .frame.dock-72 { --dock-k: 1.6364; }
/* the dock's name: read on a computer too, with its badge and dot (accessibility r3 AG9), shown under the icon on a phone */
.dock-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dock-i.is-running::after { content: ""; position: absolute; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--c-ink-2); }
.dock-sep { width: var(--line); align-self: stretch; margin: var(--sp-2) var(--sp-1); background: var(--c-line); }
.badge { position: absolute; top: 1px; right: 1px; min-width: 1.35em; height: 1.35em; padding: 0 4px; border-radius: var(--r-pill); display: grid; place-items: center;
  font: var(--w-strong) var(--fs-1)/1 var(--f-ui); background: var(--c-accent); color: var(--c-accent-ink); }
/* the rule book's one unread dot (L174) on an app's dock button: a filled shape, never a count, never colour alone (FN-160;
   the button's reader name says "needs you"); Medisense's first (Calendar r5 amendment 3, MASTER 14:03) */
.dock-dot { position: absolute; top: 4px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-surface); }

/* ---- the shell (A's arrangement is the default; looks move parts) ---- */
.os { position: relative; height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "bar" "desk" "dock" "status"; }
.os-floor { position: absolute; inset: 0; z-index: var(--z-under); background: var(--wall); }
.os-bar { grid-area: bar; display: none; align-items: center; gap: var(--sp-3); min-height: var(--ctl); padding: 0 var(--sp-3); background: var(--c-surface);
  border-bottom: var(--line) solid var(--c-line); font-size: var(--fs-2); }
.os-bar-mark { display: flex; align-items: center; gap: var(--sp-1); font-weight: var(--w-strong); }
.os-bar-mark .bos-mark { width: 1.1em; height: 1.2em; }
.os-bar-app { font-weight: var(--w-strong); }
.os-bar-menus { display: flex; gap: var(--sp-3); color: var(--c-ink-2); }
.os-bar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); color: var(--c-ink-2); }
.os-status { grid-area: status; display: none; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-3); min-height: calc(var(--ctl) * .8);
  border-top: var(--line) solid var(--c-line); background: var(--c-surface); font: var(--fs-1) var(--f-mono); color: var(--c-ink-2); }
.os-status-r { margin-left: auto; }
.os-dock { grid-area: dock; justify-self: center; margin-bottom: var(--sp-4); }
.os-desk { grid-area: desk; position: relative; min-height: 0; display: grid; gap: var(--sp-3); padding: var(--sp-5) var(--sp-5) var(--sp-3);
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) auto; grid-template-rows: auto auto auto minmax(0, 1fr);
  grid-template-areas: "clock main places" "up main places" "needs main places" "machines main places"; }
.os-desk:has(.w-add) { grid-template-rows: auto auto auto auto minmax(0, 1fr);
  grid-template-areas: "clock main places" "up main places" "needs main places" "machines main places" "add main places"; }
.w-add { grid-area: add; justify-self: start; align-self: start; }
.w-clock { grid-area: clock; display: grid; color: var(--c-ink); }
.w-time { font: var(--w-display) var(--fs-7)/1 var(--f-display); letter-spacing: -.02em; }
.w-date { font-size: var(--fs-3); color: var(--c-ink-2); }
.w-up { grid-area: up; } .w-needs { grid-area: needs; } .w-machines { grid-area: machines; align-self: start; }
.places { grid-area: places; display: grid; align-content: start; gap: var(--sp-2); }
.place { display: grid; justify-items: center; gap: 4px; width: 92px; padding: var(--sp-2) var(--sp-1); border-radius: var(--r-m); font-size: var(--fs-2);
  text-align: center; color: var(--c-ink); }
.place .ic { width: 2.6em; height: 2.6em; color: var(--c-ink); }
.place :is(.ic-fluent, .ic-glass) { width: 56px; height: 56px; }
.os-desk > .win { grid-area: 1 / 1 / -1 / -1; justify-self: center; align-self: stretch; width: min(100%, 1180px); }
.os-desk > .win-settings, .os-desk > .win-bos { width: min(100%, 1040px); }

/* notifications: a centre on the right and a toast */
.notes-centre { position: absolute; z-index: var(--z-notes); top: var(--sp-4); right: var(--sp-4); bottom: var(--sp-4); width: 380px; display: flex; flex-direction: column;
  gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-l); background: var(--c-surface); border: var(--line) solid var(--edge); box-shadow: var(--sh-pop); }
.notes-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.notes-h h2 { font: var(--w-strong) var(--fs-4)/1.2 var(--f-display); }
.notes-dnd { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--c-ink-2); }
.notice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2);
  border: var(--line) solid var(--c-line); }
.notice.is-warn { border-color: var(--c-warn); }
.notice-ic { width: 1.4em; height: 1.4em; color: var(--c-ink-2); }
.notice-ic:is(.ic-fluent, .ic-glass) { width: 2em; height: 2em; }
.notice-main { flex: 1; display: grid; gap: 2px; min-width: 0; }
.notice-app { font-size: var(--fs-1); color: var(--c-ink-2); }
.notes-centre > .btn { align-self: flex-end; margin-top: auto; }
.toast { position: absolute; z-index: var(--z-toast); top: var(--sp-4); right: calc(380px + var(--sp-6)); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-l); background: var(--c-surface); border: var(--line) solid var(--edge); box-shadow: var(--sh-pop); }
.toast > span { display: grid; }
.toast :is(.ic-fluent, .ic-glass) { width: 2em; height: 2em; }

/* ---- Files ---- */
.files { display: grid; grid-template-columns: var(--pane-files-places, 200px) minmax(0, 1fr) auto; height: 100%; position: relative; }
/* the preview's own track, so a kept width shrinks in proportion (a share of an auto track would not) */
.files:has(> .files-preview) { grid-template-columns: var(--pane-files-places, 200px) minmax(0, 1fr) var(--pane-files-preview, 260px); }
.files > .split-before { --split-at: var(--pane-files-places, 200px); }
.files > .split-after { --split-at: var(--pane-files-preview, 260px); }
.files-side { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; align-content: start; gap: 2px; padding: var(--sp-3) var(--sp-2);
  border-right: var(--line) solid var(--c-line); }
.files-list { min-width: 0; padding: var(--sp-3); display: grid; align-content: start; gap: 2px; overflow: hidden; container: files / inline-size; }
/* what a row's shares do not count: its own padding and four gaps (CS9: the shares alone made a row 23 px wider than the list at 708 px) */
.files-list, .files-head, .files-r { --files-fix: calc(var(--sp-4) + 4 * var(--sp-3)); }
.files-q { font-size: var(--fs-2); color: var(--c-ink-2); padding: 0 var(--sp-2) var(--sp-2); }
/* Name takes the rest unless the person sized it; each other column its own width, the person's or its default
   (Files explorer r5 EX3, EX5: ColumnWidths sets --w-<column> from what is kept) */
.files-head, .files-r { display: grid; grid-template-columns: minmax(min(calc((100cqw - var(--files-fix)) * .36), 220px), var(--w-name, 1fr)); grid-auto-flow: column; grid-auto-columns: auto;
  gap: var(--sp-3); align-items: center; padding: 0 var(--sp-2); }
.files-head > *, .files-r > * { min-width: 0; }
/* Name keeps room (PB-02: in a 700 px window the names were cut to a few letters): the other columns keep their
   width but never more than their share of the list's room (its width less the row's padding and gaps: --files-fix), and Name never less than 36 % of that room (or 220 px); the columns of any list add up to 100 % or less: Kind .2 + Size .16 + Modified .27 = .63 (Bin: Kind .2 + From .2 + Binned .22), and with Where on, Where's .2 comes out of the others (rule below: .14 + .12 + .18 + .2 = .64) */
.files-list .c-kind { width: min(var(--w-kind, 110px), calc((100cqw - var(--files-fix)) * .2)); }
.files-list .c-size { width: min(var(--w-size, 90px), calc((100cqw - var(--files-fix)) * .16)); }
.files-list .c-modified { width: min(var(--w-modified, 150px), calc((100cqw - var(--files-fix)) * .27)); }
.files-list .c-binned { width: min(var(--w-binned, 140px), calc((100cqw - var(--files-fix)) * .22)); }
.files-list .c-where { width: min(var(--w-where, 180px), calc((100cqw - var(--files-fix)) * .2)); }
/* Where on beside Kind, Size and Modified: the five would add to 1.19 of the room and the row would scroll sideways, so each gives a little (humane page 6, DESIGN_LEAD S-1) */
.files-list:has(.c-where) .c-kind { width: min(var(--w-kind, 110px), calc((100cqw - var(--files-fix)) * .14)); }
.files-list:has(.c-where) .c-size { width: min(var(--w-size, 90px), calc((100cqw - var(--files-fix)) * .12)); }
.files-list:has(.c-where) .c-modified { width: min(var(--w-modified, 150px), calc((100cqw - var(--files-fix)) * .18)); }
.files-list .c-from { width: min(var(--w-from, 180px), calc((100cqw - var(--files-fix)) * .2)); }
.files-r > [role=cell]:not(.files-n) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Alex walk item 4 (SEARCH 15:51): a list narrower than 420 px (a window about 700 px wide with the file's panel open gives the list under 250) read
   "430...", "6...", "To...": every column took its share. Measured by the list's own width, not the screen's, it reads as the phone's list: the name,
   and the size under it; the other columns and their heads leave (Name's head stays, to sort by it; the Columns button stays). */
@container (max-width: 420px) {
  .files-head { grid-template-columns: minmax(0, 1fr); }
  .files-head > [role=columnheader]:not(:first-child) { display: none; }
  .files-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 0; padding: var(--sp-1) var(--sp-2); }
  .files-r > [role=cell]:not(.files-n, .is-second) { display: none; }
  .files-r > .is-second { width: auto; padding-left: var(--sp-6); }
  .win-choose .files-r > .is-second { padding-left: calc(var(--sp-6) * 2 + var(--sp-3)); }
  /* a row whose memory status is the pill alone (In memory, Not read, Stopped: Chicago's rows) is two lines, not three (DESIGN_LEAD 16:05): the name cell
     spans both lines, the pill goes under the name as in app.css, and the size sits at the end of the pill's line, the pill keeping clear of it, only where the list has room for both (300 px: at 190, beside the preview, the pill ran over the size, DESIGN_LEAD 17:09 M-1; there it is the three lines above). A status with
     words after it (a file being read, "changed since BOS read it") keeps its own lines and the size under them */
  @container files (min-width: 300px) {
    .files-r:has(.files-ing-cell):not(:has(.files-ing-cell :is(small, .files-ing-w))) > .files-n { grid-column: 1; grid-row: 1 / span 2; }
    .files-r:has(.files-ing-cell):not(:has(.files-ing-cell :is(small, .files-ing-w))) > .is-second,
    .win-choose .files-r:has(.files-ing-cell):not(:has(.files-ing-cell :is(small, .files-ing-w))) > .is-second { grid-column: 1; grid-row: 2; justify-self: end; padding-left: 0; }
    .files-r:has(.files-ing-cell):not(:has(.files-ing-cell :is(small, .files-ing-w))) .files-ing-cell { box-sizing: border-box; padding-right: 6em; }
  }
}
.files-head { min-height: calc(var(--row) * .8); font-size: var(--fs-1); color: var(--c-ink-2); border-bottom: var(--line) solid var(--c-line); }
.files-r { min-height: var(--row); border-radius: var(--r-s); font-size: var(--fs-2); }
.files-r > span:not(.files-n) { color: var(--c-ink-2); }
/* a faded row (cut, or a filter miss or a file a chooser cannot take) is one even grey of the full ink: ink-2 at .7 fell under 4.5:1 in light and bright (DESIGN_LEAD 01:56) */
.files-r:is(.is-cut, .is-dim) > span:not(.files-n) { color: var(--c-ink); }
.files-r.is-on { background: var(--c-selected); box-shadow: inset 0 0 0 1px var(--c-accent); border-radius: var(--r-s); } /* FN-001: a mark beside the colour */
.files-r.is-dim { opacity: .7; } /* sweep 13 row 7: half faded text fell under 4.5:1; the why is a word in the row (.files-tag, .sr), never the fade alone */
.files-n { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: var(--c-ink); }
.files-n span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files-n .ic { width: 1.3em; height: 1.3em; color: var(--c-ink-2); }
.files-tag { flex: none; padding: 0 var(--sp-2); border: var(--line) solid var(--c-line); border-radius: var(--r-pill); font-size: var(--fs-1); color: var(--c-ink); white-space: nowrap; }
.files-n :is(.ic-fluent, .ic-glass) { width: 1.6em; height: 1.6em; }
.files-preview { min-width: 0; display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-4); border-left: var(--line) solid var(--c-line); }
.files-preview h3 { font: var(--w-strong) var(--fs-3)/1.3 var(--f-display); overflow-wrap: anywhere; }

/* ---- Settings ---- */
.set { display: grid; grid-template-columns: var(--pane-settings-pages, 240px) minmax(0, 1fr); height: 100%; position: relative; }
.set > .split { --split-at: var(--pane-settings-pages, 240px); }
.set-side { display: grid; align-content: start; gap: 2px; padding: var(--sp-3) var(--sp-2); border-right: var(--line) solid var(--c-line);
  /* a list taller than the window scrolls inside it, never cut off below it (44 px rows on a touch screen, 200 %: AG8) */
  min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.set-search { margin-bottom: var(--sp-2); }
.set-pane { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6); overflow: auto; max-width: 760px; }  /* auto: at 200 % nothing is cut off (accessibility r3 AG12) */
.set .set-back { display: none; }  /* a computer has the list beside the page; a phone shows it (G4 = PG8) */
.pane-h { font: var(--w-display) var(--fs-5)/1.15 var(--f-display); }
.sub-h { font: var(--w-strong) var(--fs-2)/1.2 var(--f-ui); color: var(--c-ink-2); margin-top: var(--sp-2); }
.profile { display: flex; align-items: center; gap: var(--sp-3); }
.profile > span:not(.avatar) { display: grid; flex: 1; }
.swatches { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.sw { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); font-size: var(--fs-1); font-weight: var(--w-strong); border: var(--line) solid var(--c-line); }
.sw-accent { background: var(--c-accent); color: var(--c-accent-ink); } .sw-surface { background: var(--c-surface-2); }
.sw-ink { background: var(--c-ink); color: var(--c-floor); } .sw-danger { background: var(--c-danger); color: var(--c-danger-ink); }
.mach-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.mach-card { padding: var(--sp-4); gap: var(--sp-2); }
.keystep { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-m); background: var(--c-surface-2); border: var(--line) solid var(--c-line); }
.steps { display: flex; gap: var(--sp-3); font-size: var(--fs-1); color: var(--c-ink-3); }
.steps .is-done { color: var(--c-good); } .steps .is-on { color: var(--c-ink); font-weight: var(--w-strong); }
.code { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); font: var(--w-strong) var(--fs-3)/1 var(--f-mono); }
.code li { display: grid; place-items: center; min-height: var(--ctl); border-radius: var(--r-s); background: var(--c-surface); border: var(--line) solid var(--c-line); }
.avatar-menu { bottom: 84px; right: calc(50% - 300px); top: auto; }

/* ---- BOS ---- */
.chat { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto; gap: var(--sp-3); height: 100%; padding: var(--sp-4) var(--sp-5); }
.msg { display: flex; gap: var(--sp-2); align-items: flex-start; max-width: 72ch; }
.msg p { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); font-size: var(--fs-3); }
.msg-me { justify-self: end; } .msg-me p { background: var(--c-accent-soft); white-space: pre-line; }
.msg-bos .bos-s { margin-top: .5em; flex: none; }
.gen { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: var(--r-m); border: var(--line) solid var(--c-line); background: var(--c-surface-2); overflow: hidden; }
.gen figcaption { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-3); font-size: var(--fs-2); color: var(--c-ink-2);
  border-bottom: var(--line) solid var(--c-line); }
.gen figcaption span { flex: 1; }
.composer { display: flex; gap: var(--sp-2); align-items: center; }
.composer .field { flex: 1; min-width: 0; }
.composer .send { background: var(--c-accent); color: var(--c-accent-ink); }

/* ---- the graph ---- */
.graph { width: 100%; height: 100%; display: block; }
.g-e { stroke: var(--c-line); stroke-width: 1.5; }
.g-e-far { stroke-dasharray: 4 4; }
.g-e-more { stroke-dasharray: 2 3; }
.g-e-hint { stroke-dasharray: 1 5; stroke-linecap: round; }
.g-el { font: 12px var(--f-ui); fill: var(--c-ink-2); paint-order: stroke; stroke: var(--c-halo); stroke-width: 3px; stroke-linejoin: round; }
.g-e-path { stroke: var(--c-g-path); stroke-width: 4; stroke-linecap: round; }
.g-dot { fill: var(--c-surface); stroke: var(--c-g-1); stroke-width: 2; }
.g-path .g-dot { fill: var(--c-g-path); stroke: var(--c-surface); stroke-width: 3; }
.g-hop2 .g-dot { stroke: var(--c-g-2); }
.g-ic { color: var(--c-g-1); }
.g-path .g-ic { color: var(--c-accent-ink); }
.g-hop2 .g-ic { color: var(--c-g-2); }
/* a dot's colour is its kind (GRAPHVIZ polish, AMD demo): the ring is the kind's colour, the fill a tint of it, the icon the kind's colour
   (a middle dot is filled solid with the icon in the page's ink); the kind is in the icon and the legend's words too, never colour alone */
.g-kc-you { --gk: var(--c-g-k-you); } .lg-kc-you { --gk: var(--c-g-k-you); }
.g-kc-person { --gk: var(--c-g-k-person); } .lg-kc-person { --gk: var(--c-g-k-person); }
.g-kc-company { --gk: var(--c-g-k-company); } .lg-kc-company { --gk: var(--c-g-k-company); }
.g-kc-deal { --gk: var(--c-g-k-deal); } .lg-kc-deal { --gk: var(--c-g-k-deal); }
.g-kc-event { --gk: var(--c-g-k-event); } .lg-kc-event { --gk: var(--c-g-k-event); }
.g-kc-email { --gk: var(--c-g-k-email); } .lg-kc-email { --gk: var(--c-g-k-email); }
.g-kc-folder { --gk: var(--c-g-k-folder); } .lg-kc-folder { --gk: var(--c-g-k-folder); }
.g-kc-file { --gk: var(--c-g-k-file); } .lg-kc-file { --gk: var(--c-g-k-file); }
.g-n[class*="g-kc-"] .g-dot { stroke: var(--gk); fill: color-mix(in srgb, var(--gk) 14%, var(--c-surface)); }
.g-n[class*="g-kc-"] .g-ic { color: var(--gk); }
.g-n.g-path[class*="g-kc-"] .g-dot { fill: var(--gk); stroke: var(--c-surface); }
.g-n.g-path[class*="g-kc-"] .g-ic { color: var(--c-accent-ink); }
.g-n.g-hop2[class*="g-kc-"] .g-dot { stroke-width: 1.5; }
.g-t { font: var(--w-strong) 14px var(--f-ui); fill: var(--c-ink); paint-order: stroke; stroke: var(--c-halo); stroke-width: 7px; stroke-linejoin: round; }
.g-path .g-t { font-size: 16px; }
/* a name two steps away is quieter than the near ones (DESIGN_A L-3): regular weight, the second ink */
.g-hop2 .g-t { font-weight: var(--w-text, 400); fill: var(--c-ink-2); }
.g-s { font: 12px var(--f-ui); fill: var(--c-ink-2); paint-order: stroke; stroke: var(--c-halo); stroke-width: 6px; stroke-linejoin: round; }
.g-more { fill: var(--c-surface-2); stroke: var(--c-g-more); stroke-dasharray: 3 3; }
.g-busy .g-dot { stroke-dasharray: 5 3; }
.g-more-t { font: var(--w-strong) 12px var(--f-ui); fill: var(--c-ink-2); }
/* a node that is a link (GRAPHVIZ S1a): a 44 px hit area nobody sees, a 3 px ring only where the keyboard is, the bead outlined where a pointer rests (DESIGN_LEAD) */
.g-link { cursor: pointer; outline: none; }
.g-hit { fill: transparent; }
.g-focus { fill: none; stroke: var(--c-focus); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--dur) var(--ease); }
.g-link:focus-visible .g-focus { opacity: 1; }
.g-link:hover .g-dot { stroke: var(--c-accent); }
/* the Graph window draws the same nodes twice: wide (1000 units), and tall (400 units, a pixel a unit on a phone) once its
   picture is under 640 px; the tall one scrolls inside the window (GRAPHVIZ S1b) */
.g-pic { container: gpic / inline-size; min-width: 0; height: 100%; overflow: auto; overscroll-behavior: contain; }
path.g-e { fill: none; }
.g-tall { display: none; height: auto; }
/* Your graph, live (graph-own-files O-2): the island fills the window; a dot that just arrived draws its ring thick once, then settles */
.graph-start-live { display: block; height: 100%; }
@keyframes g-new { from { stroke-width: 8px; } }
.g-new .g-dot { animation: g-new 3s ease-out 1; }
/* a new dot grows in where it stands (its place is chosen once and the dots already drawn never move: GraphLayout.settle/2), with its words; the line
   to it fades in a moment later. Not under reduced motion or the "still" frame (the dot is simply there) */
@keyframes g-grow { from { opacity: 0; transform: scale(.35); } to { opacity: 1; transform: none; } }
@keyframes g-edge-in { from { opacity: 0; } to { opacity: 1; } }
.g-grow { transform-box: fill-box; transform-origin: center; }
.g-new .g-grow { animation: g-grow var(--dur-slow, 400ms) var(--ease, ease-out) 1 both; }
.g-e-new { animation: g-edge-in var(--dur-slow, 400ms) var(--ease, ease-out) 1 both; }
@media (prefers-reduced-motion: reduce) { .g-new .g-dot, .g-new .g-grow, .g-e-new { animation: none; } }
.frame.still .g-new .g-dot, .frame.still .g-new .g-grow, .frame.still .g-e-new { animation: none; }
@container gpic (max-width: 640px) { .g-wide { display: none; } .g-tall { display: block; } }
.graphwin { display: grid; grid-template-columns: minmax(0, 1fr) var(--pane-graph-side, 260px); height: 100%; position: relative; }
.graphwin > .split { --split-at: var(--pane-graph-side, 260px); }
.graphwin .graph { padding: var(--sp-3); }
.g-side { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-4); border-left: var(--line) solid var(--c-line); }
.g-side h3 { font: var(--w-strong) var(--fs-4)/1.2 var(--f-display); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); font-size: var(--fs-1); list-style: none; margin: 0; padding: 0; }
.lg { display: inline-flex; align-items: center; gap: 6px; color: var(--c-ink-2); }
.lg::before { content: ""; width: 18px; height: 4px; border-radius: 2px; background: var(--c-line); }
.lg-dot::before { width: 12px; height: 12px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--gk, var(--c-g-1)); background: color-mix(in srgb, var(--gk, var(--c-g-1)) 14%, var(--c-surface)); }
.lg-dot.lg-kc-you::before { background: var(--gk); }
.lg-far::before { height: 0; background: none; border-top: 2px dashed var(--c-g-2); border-radius: 0; }
.lg-more::before { background: transparent; border: 1px dashed var(--c-g-more); height: 8px; }

/* ---- lock and login ---- */
/* lock and login stand on the floor alone: no shell grid, so a look's shell layout never reaches them */
.gate-floor { position: relative; height: 100%; display: grid; place-items: center; }
.gate { display: grid; justify-items: center; gap: var(--sp-2); }
.gate-time { font: var(--w-display) calc(var(--fs-7) * 1.5)/1 var(--f-display); letter-spacing: -.03em; color: var(--c-ink); }
.gate-date { font-size: var(--fs-4); color: var(--c-ink-2); margin-bottom: var(--sp-5); }
.gate-card { display: grid; justify-items: center; gap: var(--sp-3); width: 360px; padding: var(--sp-5); border-radius: var(--r-l); background: var(--c-surface);
  border: var(--line) solid var(--edge); box-shadow: var(--sh-win), inset 0 1px 0 var(--edge-in); text-align: center; }
.gate-card .field, .gate-card .btn-primary { width: 100%; }
.gate-h { font: var(--w-strong) var(--fs-4)/1.2 var(--f-display); }
.gate-mark { width: 2.4em; height: 2.6em; }

/* ---- several phones on one screen (screen 8) ---- */
.phones { height: 100%; display: flex; align-items: center; justify-content: center; gap: 48px; padding: 24px; background: var(--wall); }
.phone { container: frame / inline-size; width: 390px; height: 844px; flex: none; border-radius: 44px; overflow: hidden; position: relative;
  border: 10px solid var(--c-bezel); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); background: var(--c-floor); }

/* ---- splitters (Files explorer r5 EX8-EX10; SOS1Web.UI.splitter/1, sos1.js PaneSplit): one for every window ----
   The element holding both panes is position: relative and sets --split-at, where the line between them is from its
   left edge (.split-before) or its right edge (.split-after). A thin line, an 8 px handle on hover and while held, a
   24 px hit area on touch; only while sos1.js runs. */
.split { display: none; }
.js .split { display: block; position: absolute; z-index: var(--z-lift); top: 0; bottom: 0; width: 8px; left: calc(var(--split-at, 0px) - 4px);
  cursor: col-resize; touch-action: none; outline: none; }
.js .split-after { left: auto; right: calc(var(--split-at, 0px) - 4px); }
.split::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; border-radius: var(--r-pill);
  background: transparent; transition: width var(--dur) var(--ease), margin var(--dur) var(--ease), background var(--dur) var(--ease); }
.split:hover::after, .split.is-held::after, .split:focus-visible::after { width: 8px; margin-left: -4px; background: var(--c-accent-soft); }
.split:focus-visible::after { background: var(--c-focus); }
.split.is-held, .os.is-splitting { cursor: col-resize; user-select: none; }
@media (pointer: coarse) {
  .js .split { width: 24px; left: calc(var(--split-at, 0px) - 12px); }
  .js .split-after { left: auto; right: calc(var(--split-at, 0px) - 12px); }
}

/* ==== phone width: the same parts, one column, the dock as the bottom bar ==== */
}

@layer core-phone {
@container frame (max-width: 640px) {
  /* PG4 (phone r3 PH-M15, MF-042; AD-118): every box people type in or choose from is at least 16 px on a phone, so iOS
     Safari never zooms the page on a tap. !important, as the one shared rule (UI's ios-zoom-fields.md): any app's own
     rule outside a layer (font: inherit, 15 px) beat this layered one; for !important an earlier layer wins over a later
     one and over unlayered rules, and no font size is !important in core or look. max(16px, 1em) keeps a larger text
     size the person chose (at 125 % the words are 18.8 px, and the box must not be smaller than them) */
  .frame :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]), textarea, select, .ctl) { font-size: max(16px, 1em) !important; }
  /* the form parts' rows stack on a phone (design standard 1.0; UI's review 05:33: the frame's width, as every phone rule) */
  .frow { grid-template-columns: minmax(0, 1fr); }
  .frow-l { padding-top: 0; }
  /* a box a row holds on its own fills the row's width on a phone (DESIGN_LEAD c586203e item 4; a day and time pair keeps its own width) */
  .frow-c > :is(.field, .ctl, .ctl-sel) { justify-self: stretch; }
  .frow-c > .ctl-sel select { width: 100%; min-width: 0; }  /* the choice box too (DESIGN_LEAD 1ecbbc4c N-1: How urgent stayed at 10rem) */
  .os { grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar" "desk" "dock"; }
  /* PB-21: the bar (and the window under it, with its Close) clears the status bar and the Dynamic Island: the page
     covers the whole screen (viewport-fit=cover), so the top inset is the bar's own padding */
  .os-bar { display: flex; min-height: calc(44px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--sp-4) 0; background: transparent; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .os-bar-app, .os-bar-menus, .os-bar-right .num:first-of-type, .os-bar .avatar { display: none; }
  .os-status { display: none; }
  .os-desk { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; grid-auto-rows: max-content;
    padding: var(--sp-2) var(--sp-3) var(--sp-3); gap: var(--sp-3); overflow: hidden auto; overscroll-behavior: none; }
  /* PB-20 follow-up (Pavel 11:12 on his phone: "It locked not just menu but the whole screen, I can't scroll down"): the
     page stays fixed so the dock keeps the bottom, but the desk under it scrolls itself (its widgets run past the
     screen), with no bounce; a window in front keeps its own scrolling body */
  .os-desk > *, .os-desk > .desk-layer > * { grid-area: auto; }
  /* a phone shows one thing: the window in front, or the desktop */
  .os-desk:has(> .win.is-active) > :is(.desk-layer, .desk-cover), .os-desk:not(:has(> .win.is-active)) > .win { display: none; }
  .w-time { font-size: calc(var(--fs-7) * .85); }
  .w-machines .mach + .mach { display: none; }
  .w-add { display: none; }
  .places { grid-template-columns: repeat(4, 1fr); justify-items: center; }
  .place { width: auto; }
  .os-dock { justify-self: stretch; margin: 0; border-radius: 0; border-width: var(--line) 0 0; justify-content: space-around; padding: var(--sp-1) var(--sp-2) max(var(--sp-4), env(safe-area-inset-bottom, 0px)); }
  /* PB-20: no bounce inside a window either: window lean (AD-080) is the only end-of-list effect; it watches the scroll
     events of a fling that reaches the end, so it still shows (and no Apple-style bounce or stretch comes back) */
  .os-desk :is(.win-body, .win-body *) { overscroll-behavior: none; }
  /* phone r3 PH2: the seven by name, the rest in More (never "the first four", which dropped Search and the Bin) */
  .os-dock > .dock-i:not(.dock-bos, [data-dock="apps"], [data-dock="inbox"], [data-dock="search"], [aria-current="page"], .dock-me), .dock-sep { display: none; }
  .os-dock .dock-more { display: block; position: relative; }
  .dock-more > summary { list-style: none; cursor: pointer; }
  .dock-more > summary::-webkit-details-marker { display: none; }
  .dock-more-list { position: absolute; bottom: calc(100% + var(--sp-2)); right: 0; min-width: 200px; display: grid; }
  .dock-l { position: static; width: auto; height: auto; overflow: visible; clip-path: none; display: block; font-size: min(calc(var(--fs-1) * 5 / 6), 15px); color: var(--c-ink-2); margin-top: -2px; }
  .dock-i { height: auto; padding-top: var(--sp-1); gap: 2px; }
  /* a phone keeps its bar as it is: no size, no lean */
  /* the .os too: the floating button and the toast sums read --dock-k from the shell, and with a 56 px default (k 1.27) they
     rose 15 px above a phone bar that does not grow (3 Nov 2026) */
  .os, .os-dock { --dock-k: 1; }
  .dock-i:hover, .dock-i[class*="lean-"] { transform: none; }
  .os-desk:has(> .win.is-active) { grid-template-rows: minmax(0, 1fr); grid-auto-rows: auto; }
  .os-desk > .win { width: 100%; border-radius: var(--r-l); align-self: stretch; }
  .win-tools .seg, .crumbs { display: none; }
  /* PB-21 (Pavel 22 Oct 04:47, on his phone: "windows have no Close"): a phone shows the window's Close alone, 44 px
     square (Apple's minimum target), never Minimise or Maximise (one window at a time fills the screen) */
  .win-btns > *, .win-max-btn { display: none; }
  .win-btns > .win-close, .win-btns > form:has(.win-close) { display: flex; }
  .win-btns .win-close { width: 44px; height: 44px; }
  .win-tools .search { max-width: none; margin: 0; }
  .files { grid-template-columns: minmax(0, 1fr); }
  .files-side, .files-preview, .files-head { display: none; }
  .js .split { display: none; }  /* 390 px: one pane at a time, no splitters (EX10) */
  .range { display: grid; width: 100%; }  .range input[type="range"] { width: 100%; min-height: 48px; }
  .files-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 0; padding: var(--sp-1) var(--sp-2); }
  .files-r > [role=cell]:not(.files-n, .is-second) { display: none; }
  .set { grid-template-columns: minmax(0, 1fr); }
  .set-side { display: none; }
  /* /settings on a phone is the list; every page has its way back to it (Settings G4 = phone PG8) */
  /* the list scrolls inside the window, so every page in it can be reached (P16-14: the rows after Watch were cut off,
     the window body does not scroll; IDEAS phone-apps-1) */
  .set.is-list .set-side { display: grid; border-right: 0; padding: var(--sp-3); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .set.is-list .set-pane { display: none; }
  .set .set-back { display: inline-flex; justify-self: start; }
  .set-pane { padding: var(--sp-3); }
  .mach-grid { grid-template-columns: minmax(0, 1fr); }
  .code { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .avatar-menu { top: auto; bottom: calc(74px + max(var(--sp-4), env(safe-area-inset-bottom, 0px))); right: 12px; left: 12px; }
  .graphwin { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .g-side { border-left: 0; border-top: var(--line) solid var(--c-line); padding: var(--sp-3); }
  .g-side .kv:not(.g-counts), .g-side .note { display: none; }
  /* the counts stay on a phone, on one line: on a small screen more is hidden, so the card says how much (DESIGN_LEAD M-1, 3 Nov) */
  .g-side .g-counts { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
  .chat { padding: var(--sp-3); }
  .dock-i.is-running::after { display: none; }
  .dock-i.is-running .dock-l { color: var(--c-ink); font-weight: var(--w-strong); }
  .notes-centre { left: var(--sp-3); right: var(--sp-3); top: var(--sp-2); bottom: var(--sp-2); width: auto; }
  .gate-card { width: calc(100cqw - 32px); }
  .gate-time { font-size: var(--fs-7); }
  .phones { flex-direction: column; gap: 24px; padding: 12px; }
  .phone { width: 100%; height: auto; aspect-ratio: 390 / 844; border-width: 6px; border-radius: 28px; }
}
/* walk r1 item 3 (SEARCH, 4 Nov): BOS in a window under about 900 px wide with Draft with BOS open had three columns, the chat squeezed to
   80 px and both panels scrolling sideways; there the draft takes the whole window as on a phone, its Close back to the chat */
@container frame (max-width: 900px) {
  .bos:has(> .compose-pane) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .bos:has(> .compose-pane) > :not(.compose-pane) { display: none; }
  .bos > .compose-pane { border-left: 0; }
}
}

@layer core {
@media (prefers-reduced-motion: reduce) { .frame * { transition: none !important; } }
}

/* SOS-FINE FN-159: forced colours (Windows contrast themes) drop backgrounds and shadows, so what SOS draws with them
   (a chosen row, a pressed choice, a tick, a focus ring, a control's edge) gets an outline or border in system colours */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight !important; outline-offset: 2px; }
  .files-r.is-chosen, .files-r.is-on, .desk-icon.is-chosen, .sw-row.is-chosen, .start-row:focus-visible,
  .seg-o.is-on, .row-link[aria-current], [aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .btn, .ibtn, .seg-o, .field, .ctl, .menu-i:focus-visible { border: 1px solid ButtonText; }
  .chk-b { border-color: ButtonText; forced-color-adjust: none; background: Canvas; color: Canvas; }
  .chk-i:checked + .chk-b, .chk-b.is-on { background: Highlight; color: HighlightText; border-color: Highlight; }
  .toggle i { border: 1px solid ButtonText; }
  /* today in the month and in the week (aria-current="date"): marked only by colour, which forced colours replace, so it had
     no mark at all (IDEAS 02:08) */
  .win-calendar :is(.cal-day.is-today .cal-num, .cal-week th.is-today) { outline: 2px solid Highlight; outline-offset: -2px; }
  .win, .card, .menu { border: 1px solid CanvasText; }
}

/* (CT18) the phone rules of a question's acts and of a form's foot, after the shared phone rules above */
@container frame (max-width: 640px) {
  .question-acts { flex-direction: column-reverse; align-items: stretch; }
  .question-acts .btn { width: 100%; justify-content: center; }
}
/* The action foot of a long form on a phone (CT18): the form's acts stay at the foot of the window while it scrolls; static beside a mouse. A class for the
   form's own row of buttons (Mail's, a voice form's): put .form-acts on it. */
@container frame (max-width: 640px) {
  .form-acts { position: sticky; bottom: 0; z-index: var(--z-part); padding: var(--sp-2) 0; background: var(--c-surface); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
    border-top: var(--line) solid var(--c-line); }
}

/* Live desk board (DESIGN_B, program U; ui.ex board/1 and board_card/1): the parts' own look, tokens only. A window that
   gives its own classes (crm-board, crm-col, crm-card) keeps its look; these are the defaults for the next board. */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(12rem, 1fr); gap: var(--sp-2); overflow-x: auto; min-width: 0; padding-bottom: var(--sp-2); }
.board-col { display: grid; align-content: start; gap: var(--sp-1); padding: var(--sp-2); border-radius: var(--r-m); background: var(--c-surface-2); min-width: 0; }
.board-col.is-shut { background: var(--c-surface); }
.board-col.is-target { outline: 2px dashed var(--c-accent); outline-offset: 2px; }   /* a drop place, not the keyboard's ring */
.board-card { display: grid; gap: var(--sp-1); padding: var(--sp-2); border-radius: var(--r-s); background: var(--c-surface); border: var(--line) solid var(--c-line); position: relative; list-style: none; }
.board-card.is-dragging { opacity: .6; cursor: grabbing; }
.board-card.is-moving { opacity: .6; }   /* dropped, the server has not answered yet */

/* status line (part 8): always drawn, so the height is the same empty or full; tokens only (DESIGN_B 3 Nov) */
.status-line { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl); padding: 0 var(--sp-3); font-size: var(--fs-2); color: var(--c-ink-2); }
.status-line.is-good { color: var(--c-good); }
.status-line.is-bad { color: var(--c-danger); }
.status-line .status-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a refusal says why in full on a narrow window (DESIGN_LEAD S-2): a bad line wraps; the empty line keeps min-height */
.status-line.is-bad .status-text { white-space: normal; overflow: visible; }
.status-line.is-bad { padding-block: var(--sp-1); }
.status-line .status-undo { min-height: var(--ctl); padding: 0 var(--sp-3); border: 0; background: none; color: var(--c-accent); font: inherit; font-weight: var(--w-strong); cursor: pointer; text-decoration: underline; }

/* tabs with a More menu (DESIGN_B, DESIGN_LEAD contract section 1): the row scrolls, More stays outside it, the list opens under it */
.tabs-bar { display: flex; align-items: flex-end; min-width: 0; gap: var(--sp-1); }
.tabs-bar > .tabs { flex: 1 1 auto; }
.tabs-more { position: relative; flex: none; }
.tabs-more > summary { list-style: none; cursor: pointer; }
.tabs-more > summary::-webkit-details-marker { display: none; }
.tabs-more > summary::after { content: ""; display: inline-block; width: .4em; height: .4em; margin-left: var(--sp-2); border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-.15em) rotate(45deg); }
/* the list never runs past the window (DESIGN_LEAD M-2, DR3): capped, scrolls inside itself, rows snap whole; every item stays reachable by touch and arrows */
.tabs-more > .menu { top: 100%; right: 0; z-index: var(--z-menu); min-width: 200px; max-height: min(60vh, 22rem); overflow-y: auto; overscroll-behavior: none; scroll-snap-type: y proximity; }
.tabs-more > .menu > .menu-i { scroll-snap-align: start; }

/* name cell (part 10) and record header (part 12), DESIGN_B 3 Nov: tokens only; the avatar goes under 641 px, the name keeps one line */
.name-cell { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.name-cell-text { display: grid; min-width: 0; }
.name-cell-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink); font-weight: var(--w-strong); }
.name-cell-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink-3); font-size: var(--fs-1); }
.rec-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.rec-head-text { display: grid; flex: 1 1 auto; min-width: 0; }
.rec-head-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-4); }
.rec-head-role, .rec-head-owner { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-head-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); flex: none; }
/* folds by the .frame container, the house form (DESIGN_LEAD M-1, r18). .frame is the whole desk, not one window: a window container is a desk-wide change for PANES and DESIGN_C, so a narrow window on a wide screen keeps the avatar until then */
@container frame (max-width: 640px) { .rec-head > .avatar { display: none; } .rec-head { flex-wrap: wrap; } }
/* the chosen view in an open More list says so by weight and a bar, not colour alone (EXPLORER S-2, DR28) */
.menu-i.is-on, .menu-i[aria-current] { font-weight: var(--w-strong); box-shadow: inset 3px 0 0 var(--c-accent); }

/* toolbar (part 9): wraps on a narrow window, never full-width chrome (DR12); the search takes the room, the one accent New sits last */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.toolbar-start { flex: 1 1 14rem; min-width: 0; }
.toolbar > .btn { flex: none; }
.toolbar > .btn[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--c-accent); font-weight: var(--w-strong); }

/* ALEX TONIGHT A2 (MASTER 4 Nov 2026 14:31; DESIGN_LEAD): a page load inside BOS morphs instead of flashing white. Both pages
   opt in (every desk page loads this file), so the browser keeps the old page on screen until the new one can draw, then
   cross-fades. CSS only: no script, no change to the page rules (CSP style-src 'self' covers it). Chrome and Edge 126+,
   Safari 18.2+; other browsers load the page as before. The top bar, the dock and BOS's button keep a name of their own, so
   they stand still while the windows change under them. The wallpaper is NOT named: a named part is drawn above the page's
   own picture during the change, and the wallpaper would cover the windows. Quick: a person should not wait on a fade. */
@view-transition { navigation: auto; }
.os-bar { view-transition-name: os-bar; }
.os-dock { view-transition-name: os-dock; }
.bos-float-l { view-transition-name: bos-float; }
::view-transition-group(root) { animation-duration: 120ms; }
::view-transition-old(os-bar), ::view-transition-new(os-bar), ::view-transition-old(os-dock), ::view-transition-new(os-dock),
::view-transition-old(bos-float), ::view-transition-new(bos-float) { animation: none; }
/* BOS's own Reduce motion (Quick settings: the frame's look-a still, desk.ex) turns the fade off too (DESIGN_A, 67cf2810a) */
:root:has(.look-a.still)::view-transition-group(*), :root:has(.look-a.still)::view-transition-old(*),
:root:has(.look-a.still)::view-transition-new(*) { animation: none; }
/* asked the system for less motion: the page changes at once, as before this rule */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}