/* SOS v0.1 on top of the Glass design system (core.css, glass.css from design/, AD-078 option A).
   1. The glass is the person's: blur and tint come from Settings in fixed steps (classes on the frame, because style
      attributes are not allowed). Defaults are the SOS Glass demo's (Pavel, 19 Oct 2026 03:47): blur 22 px, tint 34 %,
      frost grain, ribbons. Widgets take the tint as set; windows, which hold more text, never drop below 72 %; menus
      below 88 %. No colour boost: the glass never saturates what is behind it (IP review R26, Apple US 10,175,871,
      19 Oct 2026), and its tint is a fixed neutral colour, never taken from the content.
   2. Wallpapers, all drawn by mix sos1.walls as SVG, light and dark: the demo's ribbons (the purple one by night, the
      default on every install: Pavel, 21 Oct 2026, AD-106 decision 7), the dunes (SOS02's default from 19 Oct until
      then), and Tide, Horizon and Slate (AD-106: "3 more wallpaper options"); a person picks one in Settings >
      Appearance (the frame's wall-* class). The streaks (two CSS gradients) are retired.
   3. What a real app needs on top of the mock screens: links drawn as buttons, forms that sit inline, the menu
      scrim, sliders and checkboxes, the sign-in wordmark. */

/* the person's own settings come last, after every look and phone rule: a layer of their own */
@layer person {
.look-a {
  /* Light (design standard 1.2): the glass is Semurg mist, at least 80 % on a window (--g-min), never white */
  --g-rgb: 228 226 234; --g-min: .80; --g-blur: 22px; --g-tint: .34; --tint-solid: .8; --tint-grain: .76; --tinted: var(--tint-solid);
  --glass: blur(var(--g-blur));
  --c-surface: rgb(var(--g-rgb) / max(var(--g-tint), var(--g-min)));
  --c-surface-2: rgb(var(--g-rgb) / max(calc(var(--g-tint) * .8), .5));
  --c-raised: rgb(var(--g-rgb) / max(calc(var(--g-tint) + .2), .88));
  --wall-ribbons: url("../wall/ribbons-light.svg") center / cover no-repeat, #a9c6ff; --wall: var(--wall-ribbons);
  --wall-dunes: url("../wall/dunes-light.svg") center / cover no-repeat, #ffd6a0;
  --wall-tide: url("../wall/tide-light.svg") center / cover no-repeat, #c4e1e1;
  --wall-horizon: url("../wall/horizon-light.svg") center / cover no-repeat, #b9c9e6;
  --wall-slate: url("../wall/slate-light.svg") center / cover no-repeat, #c3c9d1;
}
.look-a .card, .look-a .dock, .look-a .places { --c-surface: rgb(var(--g-rgb) / var(--g-tint)); }
.look-a .menu { --c-surface: rgb(var(--g-rgb) / max(var(--g-tint), .88)); }
.look-a .win-menu-list { --c-surface: rgb(var(--g-rgb) / .97); }  /* over a window's own text, not the wallpaper */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="bright"]) .look-a {
  --g-rgb: 22 26 34; --tint-solid: .86; --tint-grain: .82; --wall-ribbons: url("../wall/ribbons-dark.svg") center / cover no-repeat, #1f2a5b;
  --wall-dunes: url("../wall/dunes-dark.svg") center / cover no-repeat, #3a130c;
  --wall-tide: url("../wall/tide-dark.svg") center / cover no-repeat, #0f252b;
  --wall-horizon: url("../wall/horizon-dark.svg") center / cover no-repeat, #0f1a2e;
  --wall-slate: url("../wall/slate-dark.svg") center / cover no-repeat, #121417;
} }
:root[data-theme="dark"] .look-a { --g-rgb: 22 26 34; --tint-solid: .86; --tint-grain: .82; --wall-ribbons: url("../wall/ribbons-dark.svg") center / cover no-repeat, #1f2a5b;
  --wall-dunes: url("../wall/dunes-dark.svg") center / cover no-repeat, #3a130c;
  --wall-tide: url("../wall/tide-dark.svg") center / cover no-repeat, #0f252b;
  --wall-horizon: url("../wall/horizon-dark.svg") center / cover no-repeat, #0f1a2e;
  --wall-slate: url("../wall/slate-dark.svg") center / cover no-repeat, #121417; }
/* The page's own ground, painted from the first frame of every page until the wallpaper's picture is drawn (its blurred SVG is
   drawn again on each page load): the wallpaper's middle tone, not glass.css's black screen (Pavel 19:23, Chicago: "flickering after
   every click ... and it's black"; DESIGN_LEAD). Medians of Ribbons, the default wallpaper: light #c1ccfa, dark #1f2a5b */
body.screen-page { background: #c1ccfa; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="bright"]) body.screen-page { background: #1f2a5b; } }
:root[data-theme="dark"] body.screen-page { background: #1f2a5b; }
/* Bright (1.2): today's white glass at today's 72 %, only when chosen; Dark keeps 80 % from the base */
:root[data-theme="bright"] .look-a { --g-rgb: 255 255 255; --g-min: .72; }
/* the wallpaper a person picked (the Ribbons need no rule: they are --wall already) */
.look-a.wall-dunes { --wall: var(--wall-dunes); }
.look-a.wall-tide { --wall: var(--wall-tide); }
.look-a.wall-horizon { --wall: var(--wall-horizon); }
.look-a.wall-slate { --wall: var(--wall-slate); }
.look-a.wall-streaks {
  --wall: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0) 0 14px, rgba(255, 255, 255, .18) 14px 16px, rgba(0, 0, 0, .10) 16px 30px),
          linear-gradient(100deg, #19234f 0%, #2b6be0 34%, #8fd3ff 50%, #ffb46b 66%, #ff6a1f 100%);
}

/* Without blur, two looks (Pavel, 19 Oct 2026, AD-080: "lively and tint", then "lets put tint and grain frost as
   options"), chosen in Settings > Appearance > Without blur:
   - Tinted (the default): a thicker tint (80 % white in light, 86 % of the dark panel colour in dark), a bright 1 px
     inner top edge, a soft shadow; no grain.
   - Grain frost: the same with a little less tint (76 %, 82 %) and the still frost grain on top.
   Used when No blur is on, when blur is set to 0 px, when the computer asks for reduced transparency, and when the
   browser has no backdrop blur. High contrast keeps its own solid look: its rules come after these. */
.look-a.nb-grain { --tinted: var(--tint-grain); }
.look-a:is(.solid, .blur-0) { --glass: none; --c-surface: rgb(var(--g-rgb) / var(--tinted)); --edge-in: rgba(255, 255, 255, .7);
  --sh-card: 0 12px 28px rgba(20, 24, 40, .18); --sh-win: 0 12px 28px rgba(20, 24, 40, .18); }
.look-a:is(.solid, .blur-0) :is(.card, .dock, .places, .first-run-card) { --c-surface: rgb(var(--g-rgb) / var(--tinted)); }

/* Frost grain: a still tile drawn by mix sos1.walls (frost.png: grey noise, no browser filter), with plain blending
   (no overlay, which would add contrast: IP review R26). On the blurred glass it follows the Frost grain switch;
   without blur only Grain frost has it, a little stronger */
.look-a:is(.grain, .nb-grain) :is(.card, .win, .dock, .places):not(.start, .quick, .picker, .keys, .switcher, .props) { position: relative; }
/* the grain lies on the panel under its words and icons: the panel is its own stacking context, the grain at -1 */
.look-a:is(.grain, .nb-grain) :is(.card, .win, .dock, .places) { isolation: isolate; }
.look-a.grain :is(.card, .win, .dock, .places)::after,
.look-a.nb-grain:is(.solid, .blur-0) :is(.card, .win, .dock, .places)::after {
  content: ""; position: absolute; inset: 0; z-index: var(--z-under); border-radius: inherit; pointer-events: none; opacity: .1; background: url("../wall/frost.png"); }
.look-a.nb-grain:is(.solid, .blur-0) :is(.card, .win, .dock, .places)::after { opacity: .3; }
.look-a:is(.solid, .blur-0):not(.nb-grain) :is(.card, .win, .dock, .places)::after { content: none; }

/* the computer asks for reduced transparency, or the browser cannot blur: the look chosen for "without blur" */
@media (prefers-reduced-transparency: reduce) {
  .look-a { --glass: none; --c-surface: rgb(var(--g-rgb) / var(--tinted)); --edge-in: rgba(255, 255, 255, .7);
    --sh-card: 0 12px 28px rgba(20, 24, 40, .18); --sh-win: 0 12px 28px rgba(20, 24, 40, .18); }
  .look-a :is(.card, .dock, .places, .first-run-card) { --c-surface: rgb(var(--g-rgb) / var(--tinted)); }
  .look-a.nb-grain :is(.card, .win, .dock, .places)::after {
    content: ""; position: absolute; inset: 0; z-index: var(--z-under); border-radius: inherit; pointer-events: none; opacity: .3; background: url("../wall/frost.png"); }
  .look-a:not(.nb-grain) :is(.card, .win, .dock, .places)::after { content: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .look-a { --glass: none; --c-surface: rgb(var(--g-rgb) / var(--tinted)); --edge-in: rgba(255, 255, 255, .7);
    --sh-card: 0 12px 28px rgba(20, 24, 40, .18); --sh-win: 0 12px 28px rgba(20, 24, 40, .18); }
  .look-a :is(.card, .dock, .places, .first-run-card) { --c-surface: rgb(var(--g-rgb) / var(--tinted)); }
  .look-a.nb-grain :is(.card, .win, .dock, .places)::after {
    content: ""; position: absolute; inset: 0; z-index: var(--z-under); border-radius: inherit; pointer-events: none; opacity: .3; background: url("../wall/frost.png"); }
  .look-a:not(.nb-grain) :is(.card, .win, .dock, .places)::after { content: none; }
}

/* High contrast (F-210): solid panels, borders in the text colour, no shadows, a thicker focus ring */
.look-a.contrast { --glass: none; --edge: var(--c-ink); --line: 2px; --sh-card: none; --sh-win: none; --sh-pop: none; }
.look-a.contrast :is(.card, .dock, .places, .win, .menu, .start, .quick, .toast) { --c-surface: rgb(var(--g-rgb) / .98); border: 2px solid var(--c-ink); }
.look-a.contrast :is(.note, .row-note, .w-date) { color: var(--c-ink); }
/* the lock screen on a phone (ladder U3): the password box and Unlock 48 px, by the viewport (it is no window) */
@media (max-width: 640px) { .gate-form :is(.field, .btn) { min-height: 48px; } }
/* plain links inside a window, a link with no class of its own (design standard 1.0, DSQ3; PAPER_MAP's audit AQ1,
   MASTER 21 Oct 03:18): the accent, underlined on hover and on focus; High contrast underlines them always, and the
   named link too (.link, DSX8: design-gate's, in the DS28 list) */
.win a:not([class]) { color: var(--c-accent); text-decoration: none; }
.win a:not([class]):is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 2px; }
/* the window's content region as a keyboard place (the skip link's target, where the desktop's layer gives the focus back): its ring drawn inside, so the window's edge does not cut it (DESIGN_LEAD S-1, 3 Nov) */
.win .win-body:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.look-a.contrast :is(.win a:not([class]), .link) { text-decoration: underline; text-underline-offset: 2px; }
.look-a.contrast :is(.card, .win, .dock, .places)::after { display: none !important; }
.look-a.contrast :focus-visible { outline-width: 3px; }
/* High contrast, FN-159's rest (WRITER2's F8): panels fully solid, the quieter words in the text colour, and quiet
   buttons and icon buttons show an edge (an inset ring, so nothing moves) */
.look-a.contrast { --c-ink-2: var(--c-ink); --c-ink-3: var(--c-ink); }
.look-a.contrast :is(.card, .dock, .places, .win, .menu, .start, .quick, .toast, .switcher, .keys, .picker, .props) { --c-surface: rgb(var(--g-rgb)); }
.look-a.contrast :is(.btn-quiet, .ibtn):not(:disabled, .is-dim) { box-shadow: inset 0 0 0 2px currentColor; }
/* Bold text (F-217) */
.look-a.bold { --w-text: 600; --w-strong: 750; }

/* Motion (Pavel, 19 Oct: "I want some nice animation for various elements like 3 dots"): small, quick, and only
   where something is happening: dots in a wave while SOS waits, BOS's hexagon breathing while it thinks, a shimmer
   on the step that runs, a new message rising into place, menus opening. No script; Reduce motion (below) and the
   computer's own setting keep everything still. */
.dots { display: inline-flex; gap: .28em; align-items: center; height: 1em; vertical-align: -.1em; }
.dots i { width: .42em; height: .42em; border-radius: 50%; background: currentColor; opacity: .3; animation: dot-wave 1.25s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .16s; }
.dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dot-wave { 0%, 64%, 100% { translate: 0 0; opacity: .3; } 30% { translate: 0 -.38em; opacity: 1; } }
.msg-thinking .dots { font-size: var(--fs-4); color: var(--c-ink-2); padding-block: .35em; }
/* BEAM row 2: an answer's place in the model gate's line, beside the dots */
.msg-thinking .msg-place { margin-inline-start: .5em; font-size: var(--fs-1); color: var(--c-ink-2); }
.msg-bos.is-thinking .bos-s { animation: bos-breathe 2.2s ease-in-out infinite; }
@keyframes bos-breathe { 0%, 100% { scale: 1; filter: none; } 50% { scale: 1.12; filter: drop-shadow(0 0 6px rgb(238 51 43 / .55)); } }
/* the newest question and answer rise into place; an answer arriving fades in where BOS was thinking */
.bos-msgs > .msg:nth-last-child(-n+2), .bos-msgs > .msg-changed:last-child, .msg-bos.is-done:last-child .msg-body > :first-child { animation: rise-in .3s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes rise-in { from { opacity: 0; translate: 0 6px; } }
/* menus, the Properties panel and memory's popovers open with a short fade and scale (scale, not transform: each
   keeps its own placing) */
.look-a :is(.menu, .props, .mem-pop:popover-open, .start, .quick, .switcher) { animation: pop-in .16s ease-out both; }
@keyframes pop-in { from { opacity: 0; scale: .97; } }
/* an answer as it is written (contract v43), its lines kept as the model writes them (the finished answer too), and a
   soft caret where the next words come */
.msg-bos .msg-body > p:not(.msg-thinking, .msg-failed) { white-space: pre-line; }
.caret { display: inline-block; width: .45em; height: 1.05em; margin-left: 2px; vertical-align: -.16em; border-radius: 1px; background: currentColor; opacity: .5;
  animation: caret-blink 1.1s steps(2, start) infinite; }
@keyframes caret-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .caret { animation: none; } }
/* BOS acts: the draft card under BOS's one line (slice 2; WRITER2's words): the values in the app's own words, the button, then what was done */
.frame .act-card { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-raised); }
.frame .act-card.is-done { border-color: var(--c-accent); }
.frame .act-card.is-failed { border-color: var(--c-danger); }
.frame .act-rows { display: grid; gap: var(--sp-1); margin: 0; }
.frame .act-rows > div { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.frame .act-rows dt { color: var(--c-ink-2); min-width: 6rem; }
.frame .act-rows dd { margin: 0; overflow-wrap: anywhere; }
.frame .act-quote { padding-top: var(--sp-2); border-top: var(--line) solid var(--c-line); }
/* the amounts are one column, right-aligned, so the points line up (DEPUTY_TESTER 05:03: the labels differ in width) */
.frame .act-quote > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--sp-2); }
.frame .act-quote dt { min-width: 0; }
.frame .act-quote dd { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.frame .act-quote .is-total dt, .frame .act-quote .is-total dd { color: var(--c-ink); font-weight: 700; }
.frame .act-card p { margin: 0; }
.frame .act-card .btn { min-height: 44px; }
@media (prefers-reduced-motion: reduce) {
  .dots i, .msg-bos.is-thinking .bos-s, .bos-msgs > *, .msg-body > *, .look-a :is(.menu, .props, .mem-pop, .start, .quick, .switcher) { animation: none !important; }
}
.look-a.still .dots i { opacity: .7; }
@media (prefers-reduced-motion: reduce) { .dots i { opacity: .7; } }

/* Reduce motion */
.look-a.still, .look-a.still * { transition: none !important; animation: none !important; }
/* DESIGN_A 4 Nov, 390 Excel bar edge fade: a state, not movement; the blanket above is in this layer, so the one rule that keeps it is too (see the bar's phone rule) */
@supports (animation-timeline: scroll()) { @media (max-width: 600px) { .look-a.still .fusion-bar-xl { animation: fusion-bar-edge linear both !important; animation-timeline: scroll(self inline) !important; } } }
/* PB-06: Reduce motion keeps the 1.5 s fallback that shows a first-time window (a step, not motion; UI's review M1) */
.look-a.still .os-desk[data-new] > .win.is-active { animation: win-placed 0s 1.5s forwards !important; }
/* blur in 2 px steps, tint in 2 % steps */
.look-a.blur-0 { --g-blur: 0px; }
.look-a.blur-2 { --g-blur: 2px; }
.look-a.blur-4 { --g-blur: 4px; }
.look-a.blur-6 { --g-blur: 6px; }
.look-a.blur-8 { --g-blur: 8px; }
.look-a.blur-10 { --g-blur: 10px; }
.look-a.blur-12 { --g-blur: 12px; }
.look-a.blur-14 { --g-blur: 14px; }
.look-a.blur-16 { --g-blur: 16px; }
.look-a.blur-18 { --g-blur: 18px; }
.look-a.blur-20 { --g-blur: 20px; }
.look-a.blur-22 { --g-blur: 22px; }
.look-a.blur-24 { --g-blur: 24px; }
.look-a.blur-26 { --g-blur: 26px; }
.look-a.blur-28 { --g-blur: 28px; }
.look-a.blur-30 { --g-blur: 30px; }
.look-a.blur-32 { --g-blur: 32px; }
.look-a.blur-34 { --g-blur: 34px; }
.look-a.blur-36 { --g-blur: 36px; }
.look-a.blur-38 { --g-blur: 38px; }
.look-a.blur-40 { --g-blur: 40px; }
.look-a.tint-0 { --g-tint: 0.00; }
.look-a.tint-2 { --g-tint: 0.02; }
.look-a.tint-4 { --g-tint: 0.04; }
.look-a.tint-6 { --g-tint: 0.06; }
.look-a.tint-8 { --g-tint: 0.08; }
.look-a.tint-10 { --g-tint: 0.10; }
.look-a.tint-12 { --g-tint: 0.12; }
.look-a.tint-14 { --g-tint: 0.14; }
.look-a.tint-16 { --g-tint: 0.16; }
.look-a.tint-18 { --g-tint: 0.18; }
.look-a.tint-20 { --g-tint: 0.20; }
.look-a.tint-22 { --g-tint: 0.22; }
.look-a.tint-24 { --g-tint: 0.24; }
.look-a.tint-26 { --g-tint: 0.26; }
.look-a.tint-28 { --g-tint: 0.28; }
.look-a.tint-30 { --g-tint: 0.30; }
.look-a.tint-32 { --g-tint: 0.32; }
.look-a.tint-34 { --g-tint: 0.34; }
.look-a.tint-36 { --g-tint: 0.36; }
.look-a.tint-38 { --g-tint: 0.38; }
.look-a.tint-40 { --g-tint: 0.40; }
.look-a.tint-42 { --g-tint: 0.42; }
.look-a.tint-44 { --g-tint: 0.44; }
.look-a.tint-46 { --g-tint: 0.46; }
.look-a.tint-48 { --g-tint: 0.48; }
.look-a.tint-50 { --g-tint: 0.50; }
.look-a.tint-52 { --g-tint: 0.52; }
.look-a.tint-54 { --g-tint: 0.54; }
.look-a.tint-56 { --g-tint: 0.56; }
.look-a.tint-58 { --g-tint: 0.58; }
.look-a.tint-60 { --g-tint: 0.60; }
.look-a.tint-62 { --g-tint: 0.62; }
.look-a.tint-64 { --g-tint: 0.64; }
.look-a.tint-66 { --g-tint: 0.66; }
.look-a.tint-68 { --g-tint: 0.68; }
.look-a.tint-70 { --g-tint: 0.70; }
.look-a.tint-72 { --g-tint: 0.72; }
.look-a.tint-74 { --g-tint: 0.74; }
.look-a.tint-76 { --g-tint: 0.76; }
.look-a.tint-78 { --g-tint: 0.78; }
.look-a.tint-80 { --g-tint: 0.80; }
.look-a.tint-82 { --g-tint: 0.82; }
.look-a.tint-84 { --g-tint: 0.84; }
.look-a.tint-86 { --g-tint: 0.86; }
.look-a.tint-88 { --g-tint: 0.88; }
.look-a.tint-90 { --g-tint: 0.90; }
/* text size: the type scale itself grows, so nothing overflows (Glass's scale: 12 14 15 18 24 32 64 px) */
.look-a.text-80 { --fs-1: 9.6px; --fs-2: 11.2px; --fs-3: 12.0px; --fs-4: 14.4px; --fs-5: 19.2px; --fs-6: 25.6px; --fs-7: 51.2px; }
.look-a.text-90 { --fs-1: 10.8px; --fs-2: 12.6px; --fs-3: 13.5px; --fs-4: 16.2px; --fs-5: 21.6px; --fs-6: 28.8px; --fs-7: 57.6px; }
.look-a.text-100 { --fs-1: 12.0px; --fs-2: 14.0px; --fs-3: 15.0px; --fs-4: 18.0px; --fs-5: 24.0px; --fs-6: 32.0px; --fs-7: 64.0px; }
.look-a.text-110 { --fs-1: 13.2px; --fs-2: 15.4px; --fs-3: 16.5px; --fs-4: 19.8px; --fs-5: 26.4px; --fs-6: 35.2px; --fs-7: 70.4px; }
.look-a.text-125 { --fs-1: 15.0px; --fs-2: 17.5px; --fs-3: 18.8px; --fs-4: 22.5px; --fs-5: 30.0px; --fs-6: 40.0px; --fs-7: 80.0px; }
.look-a.text-150 { --fs-1: 18.0px; --fs-2: 21.0px; --fs-3: 22.5px; --fs-4: 27.0px; --fs-5: 36.0px; --fs-6: 48.0px; --fs-7: 96.0px; }
.look-a.text-175 { --fs-1: 21.0px; --fs-2: 24.5px; --fs-3: 26.3px; --fs-4: 31.5px; --fs-5: 42.0px; --fs-6: 56.0px; --fs-7: 112.0px; }
.look-a.text-200 { --fs-1: 24.0px; --fs-2: 28.0px; --fs-3: 30.0px; --fs-4: 36.0px; --fs-5: 48.0px; --fs-6: 64.0px; --fs-7: 128.0px; }
}

/* Glass in v0.1, as the demo lays it out: the places sit in a glass panel at the top of the desk (white names straight
   on the pale ribbons were unreadable), and banners rise beside the dock, nearest Quick settings and you (F-095). */
@layer look {
.look-a .places { grid-area: main; justify-self: center; align-self: start; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-1);
  width: min(100%, 420px); padding: var(--sp-3) var(--sp-4) var(--sp-4); border-radius: var(--r-l); background: var(--c-surface);
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border: var(--line) solid var(--edge); box-shadow: var(--sh-card); }
.look-a .places-h { grid-column: 1 / -1; margin: 0 0 var(--sp-1); font: var(--w-strong) var(--fs-3)/1.2 var(--f-ui); color: var(--c-ink); }
.look-a .place { width: auto; color: var(--c-ink); text-shadow: none; }
.look-a .os .toast { top: auto; bottom: var(--toast-b, 96px); right: 16px; }
/* a standing line (the recovery reminder, the live-down note) keeps its place above the dock: the toast stands over it, not on it
   (DEPUTY_TESTER's walk, s17-undo: "Your desk is back" covered the recovery line's Confirm it); two lines, two rows */
.look-a .os:is(:has(> .os-notes > .key-note:not(.live-down)), :has(.phx-server-error)) .toast { bottom: calc(var(--toast-b, 96px) + var(--note-h) + var(--sp-2)); }
.look-a .os:has(.phx-server-error):has(> .os-notes > .key-note:not(.live-down)) .toast { bottom: calc(var(--toast-b, 96px) + var(--note-h) * 2 + var(--sp-3)); }
/* a refusal is a stop (DEPUTY 22:11): its mark and edge in the warning colour, never a done act's check */
.toast[data-stop] { border-color: var(--c-warn); }
.toast[data-stop] > .ic { color: var(--c-warn); }
}

/* ---- Word bar (PAPER_WORD, 2 Nov 2026; DESIGN_A's LOOK-SPEC parts 1 to 3: the Format row, its buttons and pickers; PAPER_SHEET's Excel bar takes these classes) ---- */
.fusion-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-3); min-height: 44px; margin: 0 0 var(--sp-2); position: sticky; top: 0; z-index: var(--z-pin);
  /* opaque like the Fusion title (glass over the floor colour), so words under the sticky bar do not show through; no overflow and no mask on the bar: a scrolling row clipped its own pickers (DEPUTY_TESTER, DESIGN_A L-1, 2 Nov 14:12), so the row wraps instead */
  background: var(--c-face-solid); }
/* DESIGN_A F2 (3 Nov 2026): in a short window the window body shrank the wrapped Excel bar below its own rows, so its second row (Number) drew over the grid's column letters; the bar keeps its height and pushes the grid down */
.fusion-bar-g { flex: none; display: flex; align-items: center; gap: var(--sp-1); }
.fusion-bar-g + .fusion-bar-g { padding-left: var(--sp-3); border-left: 1px solid var(--c-line); }
/* the bar's buttons are the shared <.btn> (the design gate wants one); the bar's own look wins over its box, shadow and press sink, and an icon button hides its words (the label stays for readers) and draws its glyph */
.fusion-bar .btn { box-shadow: none; transform: none; background-image: none; border: 0; font-size: inherit; font-weight: inherit; color: var(--c-ink); gap: var(--sp-1); }
.fusion-bar .btn:hover { background-image: none; }
.fusion-bar .btn:active { transform: none; box-shadow: none; }
.fusion-bar .fusion-bar-row { white-space: nowrap; justify-content: flex-start; min-height: 44px; padding: 0 var(--sp-3); }
.fusion-bar .fusion-bar-b, .fusion-bar .fusion-bar-sw { min-height: 44px; }
.fusion-bar-x > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fusion-bar-b > b, .fusion-bar-b > i, .fusion-bar-b > u { font-size: var(--fs-3, 1.0625rem); }
.fusion-bar-b, .fusion-bar-pick { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-1); padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-s); background: transparent; color: var(--c-ink); font: inherit; cursor: pointer; list-style: none; }
.fusion-bar-pick::-webkit-details-marker { display: none; }
.fusion-bar-pick::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }
.fusion-bar-b:hover, .fusion-bar-pick:hover { background: var(--c-surface-2); }
.fusion-bar-b:active, .fusion-bar-pick:active { background: var(--c-accent-soft); }
.fusion-bar-b:focus-visible, .fusion-bar-pick:focus-visible, .fusion-bar-row:focus-visible, .fusion-bar-sw:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.fusion-bar-b[aria-pressed="true"] { background: var(--c-chosen); box-shadow: inset 0 -2px 0 var(--c-accent); font-weight: var(--w-strong); }
.fusion-bar-b[aria-pressed="mixed"] { outline: 1px dashed var(--c-ink-2); outline-offset: -3px; }
.fusion-bar-b[disabled], .fusion-bar-pick[aria-disabled="true"] { opacity: .45; cursor: default; }
.fusion-bar-seg { display: inline-flex; border: 1px solid var(--c-line); border-radius: var(--r-s); overflow: hidden; }
.fusion-bar-seg .fusion-bar-b { border-radius: 0; }
.fusion-bar-seg .fusion-bar-b + .fusion-bar-b { border-left: 1px solid var(--c-line); }
.fusion-bar-d { position: relative; }
.fusion-bar-d[open] > .fusion-bar-pick { background: var(--c-accent-soft); }
.fusion-bar-pop { position: absolute; top: 100%; left: 0; z-index: var(--z-pin-pop); min-width: 12rem; width: max-content; max-width: min(26rem, 90vw); max-height: min(60vh, 24rem); overflow-y: auto; padding: var(--sp-1); display: flex; flex-direction: column;
  background: var(--c-face-solid-raised); border: 1px solid var(--c-line); border-radius: var(--r-m); box-shadow: var(--sh-pop); }
.fusion-bar-row { min-height: 44px; display: flex; align-items: center; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-s); background: transparent; color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; }
.fusion-bar-row:hover { background: var(--c-surface-2); }
.fusion-bar-pop > .note { margin: var(--sp-1) var(--sp-3); font-size: var(--fs-1); color: var(--c-ink-2); }
.fusion-bar-colours { display: grid; grid-template-columns: repeat(6, 44px); gap: var(--sp-1); }
.fusion-bar-colours > .fusion-bar-row { grid-column: 1 / -1; }
.fusion-bar-sw { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--r-s); background: transparent; cursor: pointer; }
.fusion-bar-sw:hover { background: var(--c-surface-2); }
.fusion-bar-chip { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--c-ink-3); }
.fusion-bar-ic { width: 16px; height: 12px; display: block; background: linear-gradient(currentColor, currentColor) 0 0 / 16px 2px no-repeat, linear-gradient(currentColor, currentColor) 0 5px / 10px 2px no-repeat, linear-gradient(currentColor, currentColor) 0 10px / 16px 2px no-repeat; }
.fusion-bar-ic-center { background-position: 0 0, 3px 5px, 0 10px; }
.fusion-bar-ic-right { background-position: 0 0, 6px 5px, 0 10px; }
.fusion-bar-line { margin: 0 0 var(--sp-2); font-size: var(--fs-1); color: var(--c-ink-2); }
/* narrow (DESIGN_A N-1): the bar scrolls with the paragraphs (not sticky: three rows would take a third of a phone window) and an open picker sits in the flow under its button across the bar's width, pushing the form down inside the window's own scroll instead of running under its edge */
@media (max-width: 640px) { .fusion-bar { row-gap: var(--sp-1); } .fusion-bar-g + .fusion-bar-g { padding-left: 0; border-left: 0; } .fusion-bar { position: static; } .fusion-bar-g:has(> .fusion-bar-d[open]) { flex: 1 0 100%; flex-wrap: wrap; } .fusion-bar-d[open] { flex: 1 0 100%; } .fusion-bar-pop { position: static; width: auto; max-height: min(50vh, 22rem); margin-top: var(--sp-1); } .fusion-bar-colours { grid-template-columns: repeat(4, 44px); justify-content: center; } }
@media print { .fusion-bar, .fusion-bar-line { display: none; } }
.fusion-bar-ch-C00000 { background: #C00000; }
.fusion-bar-ch-ED7D31 { background: #ED7D31; }
.fusion-bar-ch-BF9000 { background: #BF9000; }
.fusion-bar-ch-2E7D32 { background: #2E7D32; }
.fusion-bar-ch-0097A7 { background: #0097A7; }
.fusion-bar-ch-1A4FD0 { background: #1A4FD0; }
.fusion-bar-ch-7030A0 { background: #7030A0; }
.fusion-bar-ch-000000 { background: #000000; }
.fusion-bar-ch-404040 { background: #404040; }
.fusion-bar-ch-808080 { background: #808080; }
.fusion-bar-ch-FFFFFF { background: #FFFFFF; }
/* ---- end of Word bar ---- */

/* ---- Word files' own look (generated by tools/word_css.exs; the file's values, not the design's) ---- */
/* The article is .fusion-word beside .fusion-page. Every length is a count of --wz (1pt unless the page sets a zoom). */
.fusion-word { --wz: calc(1pt * var(--wzoom, 1) * var(--tp, 1)); }
.look-a.text-90 { --tp: 0.9; }
.look-a.text-100 { --tp: 1.0; }
.look-a.text-110 { --tp: 1.1; }
.look-a.text-125 { --tp: 1.25; }
.look-a.text-150 { --tp: 1.5; }
.look-a.text-175 { --tp: 1.75; }
.look-a.text-200 { --tp: 2.0; }
.fusion-word.fusion-read { max-width: none; min-width: 0; line-height: normal; overflow-wrap: break-word; }
.fusion-word.fusion-read > * { margin: 0; }
.fusion-word .fusion-h { font: inherit; margin: 0; }
.fusion-word p, .fusion-word li { margin: 0; }
.fusion-word .fusion-list { padding-left: calc(36 * var(--wz, 1pt)); margin: 0; }
.fusion-word .fusion-list .fusion-l1 { margin-left: calc(18 * var(--wz, 1pt)); }
.fusion-word .fusion-list .fusion-l2 { margin-left: calc(36 * var(--wz, 1pt)); }
.fusion-word .fusion-list .fusion-l3 { margin-left: calc(54 * var(--wz, 1pt)); }
.fusion-word .fusion-list .fusion-l4 { margin-left: calc(72 * var(--wz, 1pt)); }
.fusion-word .fusion-img { max-width: 100%; height: auto; }
.fusion-word :is(p, .fusion-h, li, .fusion-table th, .fusion-table td) { white-space: pre-wrap; tab-size: calc(36 * var(--wz, 1pt)); }
.fusion-f-times { font-family: "Times New Roman", "Liberation Serif", Tinos, Times, "Noto Serif", serif; }
.fusion-f-arial { font-family: Arial, "Liberation Sans", Arimo, Helvetica, "Noto Sans", sans-serif; }
.fusion-f-helvetica { font-family: Helvetica, Arial, "Liberation Sans", Arimo, "Noto Sans", sans-serif; }
.fusion-f-courier { font-family: "Courier New", "Liberation Mono", Cousine, Courier, "Geist Mono", monospace; }
.fusion-f-calibri { font-family: Calibri, Carlito, "Noto Sans", sans-serif; }
.fusion-f-cambria { font-family: Cambria, Caladea, "Noto Serif", serif; }
.fusion-f-georgia { font-family: Georgia, Gelasio, "Noto Serif", serif; }
.fusion-f-verdana { font-family: Verdana, "DejaVu Sans", "Noto Sans", sans-serif; }
.fusion-f-tahoma { font-family: Tahoma, "DejaVu Sans", "Noto Sans", sans-serif; }
.fusion-f-trebuchet { font-family: "Trebuchet MS", "Noto Sans", sans-serif; }
.fusion-f-segoe { font-family: "Segoe UI", "Noto Sans", sans-serif; }
.fusion-f-aptos { font-family: Aptos, "Segoe UI", "Noto Sans", sans-serif; }
.fusion-f-garamond { font-family: Garamond, "EB Garamond", "Noto Serif", serif; }
.fusion-f-palatino { font-family: Palatino, "Palatino Linotype", "Book Antiqua", "Noto Serif", serif; }
.fusion-f-century { font-family: "Century Gothic", "Noto Sans", sans-serif; }
.fusion-f-consolas { font-family: Consolas, "Liberation Mono", "Geist Mono", monospace; }
.fusion-f-carlito { font-family: Carlito, Calibri, "Noto Sans", sans-serif; }
.fusion-f-caladea { font-family: Caladea, Cambria, "Noto Serif", serif; }
.fusion-f-gelasio { font-family: Gelasio, Georgia, "Noto Serif", serif; }
.fusion-f-libsans { font-family: "Liberation Sans", Arial, "Noto Sans", sans-serif; }
.fusion-f-libserif { font-family: "Liberation Serif", "Times New Roman", "Noto Serif", serif; }
.fusion-f-geistmono { font-family: "Geist Mono", "Liberation Mono", monospace; }
.fusion-f-serif { font-family: "Noto Serif", serif; }
.fusion-f-sans { font-family: "Noto Sans", sans-serif; }
.fusion-f-mono { font-family: "Liberation Mono", "Geist Mono", monospace; }
.fusion-pt-6 { font-size: calc(3.0 * var(--wz, 1pt)); }
.fusion-pt-7 { font-size: calc(3.5 * var(--wz, 1pt)); }
.fusion-pt-8 { font-size: calc(4.0 * var(--wz, 1pt)); }
.fusion-pt-9 { font-size: calc(4.5 * var(--wz, 1pt)); }
.fusion-pt-10 { font-size: calc(5.0 * var(--wz, 1pt)); }
.fusion-pt-11 { font-size: calc(5.5 * var(--wz, 1pt)); }
.fusion-pt-12 { font-size: calc(6.0 * var(--wz, 1pt)); }
.fusion-pt-13 { font-size: calc(6.5 * var(--wz, 1pt)); }
.fusion-pt-14 { font-size: calc(7.0 * var(--wz, 1pt)); }
.fusion-pt-15 { font-size: calc(7.5 * var(--wz, 1pt)); }
.fusion-pt-16 { font-size: calc(8.0 * var(--wz, 1pt)); }
.fusion-pt-17 { font-size: calc(8.5 * var(--wz, 1pt)); }
.fusion-pt-18 { font-size: calc(9.0 * var(--wz, 1pt)); }
.fusion-pt-19 { font-size: calc(9.5 * var(--wz, 1pt)); }
.fusion-pt-20 { font-size: calc(10.0 * var(--wz, 1pt)); }
.fusion-pt-21 { font-size: calc(10.5 * var(--wz, 1pt)); }
.fusion-pt-22 { font-size: calc(11.0 * var(--wz, 1pt)); }
.fusion-pt-23 { font-size: calc(11.5 * var(--wz, 1pt)); }
.fusion-pt-24 { font-size: calc(12.0 * var(--wz, 1pt)); }
.fusion-pt-25 { font-size: calc(12.5 * var(--wz, 1pt)); }
.fusion-pt-26 { font-size: calc(13.0 * var(--wz, 1pt)); }
.fusion-pt-27 { font-size: calc(13.5 * var(--wz, 1pt)); }
.fusion-pt-28 { font-size: calc(14.0 * var(--wz, 1pt)); }
.fusion-pt-29 { font-size: calc(14.5 * var(--wz, 1pt)); }
.fusion-pt-30 { font-size: calc(15.0 * var(--wz, 1pt)); }
.fusion-pt-31 { font-size: calc(15.5 * var(--wz, 1pt)); }
.fusion-pt-32 { font-size: calc(16.0 * var(--wz, 1pt)); }
.fusion-pt-33 { font-size: calc(16.5 * var(--wz, 1pt)); }
.fusion-pt-34 { font-size: calc(17.0 * var(--wz, 1pt)); }
.fusion-pt-35 { font-size: calc(17.5 * var(--wz, 1pt)); }
.fusion-pt-36 { font-size: calc(18.0 * var(--wz, 1pt)); }
.fusion-pt-37 { font-size: calc(18.5 * var(--wz, 1pt)); }
.fusion-pt-38 { font-size: calc(19.0 * var(--wz, 1pt)); }
.fusion-pt-39 { font-size: calc(19.5 * var(--wz, 1pt)); }
.fusion-pt-40 { font-size: calc(20.0 * var(--wz, 1pt)); }
.fusion-pt-41 { font-size: calc(20.5 * var(--wz, 1pt)); }
.fusion-pt-42 { font-size: calc(21.0 * var(--wz, 1pt)); }
.fusion-pt-43 { font-size: calc(21.5 * var(--wz, 1pt)); }
.fusion-pt-44 { font-size: calc(22.0 * var(--wz, 1pt)); }
.fusion-pt-45 { font-size: calc(22.5 * var(--wz, 1pt)); }
.fusion-pt-46 { font-size: calc(23.0 * var(--wz, 1pt)); }
.fusion-pt-47 { font-size: calc(23.5 * var(--wz, 1pt)); }
.fusion-pt-48 { font-size: calc(24.0 * var(--wz, 1pt)); }
.fusion-pt-49 { font-size: calc(24.5 * var(--wz, 1pt)); }
.fusion-pt-50 { font-size: calc(25.0 * var(--wz, 1pt)); }
.fusion-pt-51 { font-size: calc(25.5 * var(--wz, 1pt)); }
.fusion-pt-52 { font-size: calc(26.0 * var(--wz, 1pt)); }
.fusion-pt-53 { font-size: calc(26.5 * var(--wz, 1pt)); }
.fusion-pt-54 { font-size: calc(27.0 * var(--wz, 1pt)); }
.fusion-pt-55 { font-size: calc(27.5 * var(--wz, 1pt)); }
.fusion-pt-56 { font-size: calc(28.0 * var(--wz, 1pt)); }
.fusion-pt-57 { font-size: calc(28.5 * var(--wz, 1pt)); }
.fusion-pt-58 { font-size: calc(29.0 * var(--wz, 1pt)); }
.fusion-pt-59 { font-size: calc(29.5 * var(--wz, 1pt)); }
.fusion-pt-60 { font-size: calc(30.0 * var(--wz, 1pt)); }
.fusion-pt-61 { font-size: calc(30.5 * var(--wz, 1pt)); }
.fusion-pt-62 { font-size: calc(31.0 * var(--wz, 1pt)); }
.fusion-pt-63 { font-size: calc(31.5 * var(--wz, 1pt)); }
.fusion-pt-64 { font-size: calc(32.0 * var(--wz, 1pt)); }
.fusion-pt-65 { font-size: calc(32.5 * var(--wz, 1pt)); }
.fusion-pt-66 { font-size: calc(33.0 * var(--wz, 1pt)); }
.fusion-pt-67 { font-size: calc(33.5 * var(--wz, 1pt)); }
.fusion-pt-68 { font-size: calc(34.0 * var(--wz, 1pt)); }
.fusion-pt-69 { font-size: calc(34.5 * var(--wz, 1pt)); }
.fusion-pt-70 { font-size: calc(35.0 * var(--wz, 1pt)); }
.fusion-pt-71 { font-size: calc(35.5 * var(--wz, 1pt)); }
.fusion-pt-72 { font-size: calc(36.0 * var(--wz, 1pt)); }
.fusion-pt-73 { font-size: calc(36.5 * var(--wz, 1pt)); }
.fusion-pt-74 { font-size: calc(37.0 * var(--wz, 1pt)); }
.fusion-pt-75 { font-size: calc(37.5 * var(--wz, 1pt)); }
.fusion-pt-76 { font-size: calc(38.0 * var(--wz, 1pt)); }
.fusion-pt-77 { font-size: calc(38.5 * var(--wz, 1pt)); }
.fusion-pt-78 { font-size: calc(39.0 * var(--wz, 1pt)); }
.fusion-pt-79 { font-size: calc(39.5 * var(--wz, 1pt)); }
.fusion-pt-80 { font-size: calc(40.0 * var(--wz, 1pt)); }
.fusion-pt-81 { font-size: calc(40.5 * var(--wz, 1pt)); }
.fusion-pt-82 { font-size: calc(41.0 * var(--wz, 1pt)); }
.fusion-pt-83 { font-size: calc(41.5 * var(--wz, 1pt)); }
.fusion-pt-84 { font-size: calc(42.0 * var(--wz, 1pt)); }
.fusion-pt-85 { font-size: calc(42.5 * var(--wz, 1pt)); }
.fusion-pt-86 { font-size: calc(43.0 * var(--wz, 1pt)); }
.fusion-pt-87 { font-size: calc(43.5 * var(--wz, 1pt)); }
.fusion-pt-88 { font-size: calc(44.0 * var(--wz, 1pt)); }
.fusion-pt-89 { font-size: calc(44.5 * var(--wz, 1pt)); }
.fusion-pt-90 { font-size: calc(45.0 * var(--wz, 1pt)); }
.fusion-pt-91 { font-size: calc(45.5 * var(--wz, 1pt)); }
.fusion-pt-92 { font-size: calc(46.0 * var(--wz, 1pt)); }
.fusion-pt-93 { font-size: calc(46.5 * var(--wz, 1pt)); }
.fusion-pt-94 { font-size: calc(47.0 * var(--wz, 1pt)); }
.fusion-pt-95 { font-size: calc(47.5 * var(--wz, 1pt)); }
.fusion-pt-96 { font-size: calc(48.0 * var(--wz, 1pt)); }
.fusion-pt-97 { font-size: calc(48.5 * var(--wz, 1pt)); }
.fusion-pt-98 { font-size: calc(49.0 * var(--wz, 1pt)); }
.fusion-pt-99 { font-size: calc(49.5 * var(--wz, 1pt)); }
.fusion-pt-100 { font-size: calc(50.0 * var(--wz, 1pt)); }
.fusion-pt-101 { font-size: calc(50.5 * var(--wz, 1pt)); }
.fusion-pt-102 { font-size: calc(51.0 * var(--wz, 1pt)); }
.fusion-pt-103 { font-size: calc(51.5 * var(--wz, 1pt)); }
.fusion-pt-104 { font-size: calc(52.0 * var(--wz, 1pt)); }
.fusion-pt-105 { font-size: calc(52.5 * var(--wz, 1pt)); }
.fusion-pt-106 { font-size: calc(53.0 * var(--wz, 1pt)); }
.fusion-pt-107 { font-size: calc(53.5 * var(--wz, 1pt)); }
.fusion-pt-108 { font-size: calc(54.0 * var(--wz, 1pt)); }
.fusion-pt-109 { font-size: calc(54.5 * var(--wz, 1pt)); }
.fusion-pt-110 { font-size: calc(55.0 * var(--wz, 1pt)); }
.fusion-pt-111 { font-size: calc(55.5 * var(--wz, 1pt)); }
.fusion-pt-112 { font-size: calc(56.0 * var(--wz, 1pt)); }
.fusion-pt-113 { font-size: calc(56.5 * var(--wz, 1pt)); }
.fusion-pt-114 { font-size: calc(57.0 * var(--wz, 1pt)); }
.fusion-pt-115 { font-size: calc(57.5 * var(--wz, 1pt)); }
.fusion-pt-116 { font-size: calc(58.0 * var(--wz, 1pt)); }
.fusion-pt-117 { font-size: calc(58.5 * var(--wz, 1pt)); }
.fusion-pt-118 { font-size: calc(59.0 * var(--wz, 1pt)); }
.fusion-pt-119 { font-size: calc(59.5 * var(--wz, 1pt)); }
.fusion-pt-120 { font-size: calc(60.0 * var(--wz, 1pt)); }
.fusion-pt-121 { font-size: calc(60.5 * var(--wz, 1pt)); }
.fusion-pt-122 { font-size: calc(61.0 * var(--wz, 1pt)); }
.fusion-pt-123 { font-size: calc(61.5 * var(--wz, 1pt)); }
.fusion-pt-124 { font-size: calc(62.0 * var(--wz, 1pt)); }
.fusion-pt-125 { font-size: calc(62.5 * var(--wz, 1pt)); }
.fusion-pt-126 { font-size: calc(63.0 * var(--wz, 1pt)); }
.fusion-pt-127 { font-size: calc(63.5 * var(--wz, 1pt)); }
.fusion-pt-128 { font-size: calc(64.0 * var(--wz, 1pt)); }
.fusion-pt-129 { font-size: calc(64.5 * var(--wz, 1pt)); }
.fusion-pt-130 { font-size: calc(65.0 * var(--wz, 1pt)); }
.fusion-pt-131 { font-size: calc(65.5 * var(--wz, 1pt)); }
.fusion-pt-132 { font-size: calc(66.0 * var(--wz, 1pt)); }
.fusion-pt-133 { font-size: calc(66.5 * var(--wz, 1pt)); }
.fusion-pt-134 { font-size: calc(67.0 * var(--wz, 1pt)); }
.fusion-pt-135 { font-size: calc(67.5 * var(--wz, 1pt)); }
.fusion-pt-136 { font-size: calc(68.0 * var(--wz, 1pt)); }
.fusion-pt-137 { font-size: calc(68.5 * var(--wz, 1pt)); }
.fusion-pt-138 { font-size: calc(69.0 * var(--wz, 1pt)); }
.fusion-pt-139 { font-size: calc(69.5 * var(--wz, 1pt)); }
.fusion-pt-140 { font-size: calc(70.0 * var(--wz, 1pt)); }
.fusion-pt-141 { font-size: calc(70.5 * var(--wz, 1pt)); }
.fusion-pt-142 { font-size: calc(71.0 * var(--wz, 1pt)); }
.fusion-pt-143 { font-size: calc(71.5 * var(--wz, 1pt)); }
.fusion-pt-144 { font-size: calc(72.0 * var(--wz, 1pt)); }
.fusion-pt-145 { font-size: calc(72.5 * var(--wz, 1pt)); }
.fusion-pt-146 { font-size: calc(73.0 * var(--wz, 1pt)); }
.fusion-pt-147 { font-size: calc(73.5 * var(--wz, 1pt)); }
.fusion-pt-148 { font-size: calc(74.0 * var(--wz, 1pt)); }
.fusion-pt-149 { font-size: calc(74.5 * var(--wz, 1pt)); }
.fusion-pt-150 { font-size: calc(75.0 * var(--wz, 1pt)); }
.fusion-pt-151 { font-size: calc(75.5 * var(--wz, 1pt)); }
.fusion-pt-152 { font-size: calc(76.0 * var(--wz, 1pt)); }
.fusion-pt-153 { font-size: calc(76.5 * var(--wz, 1pt)); }
.fusion-pt-154 { font-size: calc(77.0 * var(--wz, 1pt)); }
.fusion-pt-155 { font-size: calc(77.5 * var(--wz, 1pt)); }
.fusion-pt-156 { font-size: calc(78.0 * var(--wz, 1pt)); }
.fusion-pt-157 { font-size: calc(78.5 * var(--wz, 1pt)); }
.fusion-pt-158 { font-size: calc(79.0 * var(--wz, 1pt)); }
.fusion-pt-159 { font-size: calc(79.5 * var(--wz, 1pt)); }
.fusion-pt-160 { font-size: calc(80.0 * var(--wz, 1pt)); }
.fusion-pt-161 { font-size: calc(80.5 * var(--wz, 1pt)); }
.fusion-pt-162 { font-size: calc(81.0 * var(--wz, 1pt)); }
.fusion-pt-163 { font-size: calc(81.5 * var(--wz, 1pt)); }
.fusion-pt-164 { font-size: calc(82.0 * var(--wz, 1pt)); }
.fusion-pt-165 { font-size: calc(82.5 * var(--wz, 1pt)); }
.fusion-pt-166 { font-size: calc(83.0 * var(--wz, 1pt)); }
.fusion-pt-167 { font-size: calc(83.5 * var(--wz, 1pt)); }
.fusion-pt-168 { font-size: calc(84.0 * var(--wz, 1pt)); }
.fusion-pt-169 { font-size: calc(84.5 * var(--wz, 1pt)); }
.fusion-pt-170 { font-size: calc(85.0 * var(--wz, 1pt)); }
.fusion-pt-171 { font-size: calc(85.5 * var(--wz, 1pt)); }
.fusion-pt-172 { font-size: calc(86.0 * var(--wz, 1pt)); }
.fusion-pt-173 { font-size: calc(86.5 * var(--wz, 1pt)); }
.fusion-pt-174 { font-size: calc(87.0 * var(--wz, 1pt)); }
.fusion-pt-175 { font-size: calc(87.5 * var(--wz, 1pt)); }
.fusion-pt-176 { font-size: calc(88.0 * var(--wz, 1pt)); }
.fusion-pt-177 { font-size: calc(88.5 * var(--wz, 1pt)); }
.fusion-pt-178 { font-size: calc(89.0 * var(--wz, 1pt)); }
.fusion-pt-179 { font-size: calc(89.5 * var(--wz, 1pt)); }
.fusion-pt-180 { font-size: calc(90.0 * var(--wz, 1pt)); }
.fusion-pt-181 { font-size: calc(90.5 * var(--wz, 1pt)); }
.fusion-pt-182 { font-size: calc(91.0 * var(--wz, 1pt)); }
.fusion-pt-183 { font-size: calc(91.5 * var(--wz, 1pt)); }
.fusion-pt-184 { font-size: calc(92.0 * var(--wz, 1pt)); }
.fusion-pt-185 { font-size: calc(92.5 * var(--wz, 1pt)); }
.fusion-pt-186 { font-size: calc(93.0 * var(--wz, 1pt)); }
.fusion-pt-187 { font-size: calc(93.5 * var(--wz, 1pt)); }
.fusion-pt-188 { font-size: calc(94.0 * var(--wz, 1pt)); }
.fusion-pt-189 { font-size: calc(94.5 * var(--wz, 1pt)); }
.fusion-pt-190 { font-size: calc(95.0 * var(--wz, 1pt)); }
.fusion-pt-191 { font-size: calc(95.5 * var(--wz, 1pt)); }
.fusion-pt-192 { font-size: calc(96.0 * var(--wz, 1pt)); }
.fusion-pt-193 { font-size: calc(96.5 * var(--wz, 1pt)); }
.fusion-pt-194 { font-size: calc(97.0 * var(--wz, 1pt)); }
.fusion-pt-195 { font-size: calc(97.5 * var(--wz, 1pt)); }
.fusion-pt-196 { font-size: calc(98.0 * var(--wz, 1pt)); }
.fusion-pt-197 { font-size: calc(98.5 * var(--wz, 1pt)); }
.fusion-pt-198 { font-size: calc(99.0 * var(--wz, 1pt)); }
.fusion-pt-199 { font-size: calc(99.5 * var(--wz, 1pt)); }
.fusion-pt-200 { font-size: calc(100.0 * var(--wz, 1pt)); }
.fusion-caps { text-transform: uppercase; } .fusion-scaps { font-variant: small-caps; }
.fusion-al-c { text-align: center; } .fusion-al-r { text-align: right; } .fusion-al-j { text-align: justify; }
.fusion-sb-1 { padding-top: calc(1 * var(--wz, 1pt)); } .fusion-sa-1 { padding-bottom: calc(1 * var(--wz, 1pt)); }
.fusion-sb-2 { padding-top: calc(2 * var(--wz, 1pt)); } .fusion-sa-2 { padding-bottom: calc(2 * var(--wz, 1pt)); }
.fusion-sb-3 { padding-top: calc(3 * var(--wz, 1pt)); } .fusion-sa-3 { padding-bottom: calc(3 * var(--wz, 1pt)); }
.fusion-sb-4 { padding-top: calc(4 * var(--wz, 1pt)); } .fusion-sa-4 { padding-bottom: calc(4 * var(--wz, 1pt)); }
.fusion-sb-5 { padding-top: calc(5 * var(--wz, 1pt)); } .fusion-sa-5 { padding-bottom: calc(5 * var(--wz, 1pt)); }
.fusion-sb-6 { padding-top: calc(6 * var(--wz, 1pt)); } .fusion-sa-6 { padding-bottom: calc(6 * var(--wz, 1pt)); }
.fusion-sb-7 { padding-top: calc(7 * var(--wz, 1pt)); } .fusion-sa-7 { padding-bottom: calc(7 * var(--wz, 1pt)); }
.fusion-sb-8 { padding-top: calc(8 * var(--wz, 1pt)); } .fusion-sa-8 { padding-bottom: calc(8 * var(--wz, 1pt)); }
.fusion-sb-9 { padding-top: calc(9 * var(--wz, 1pt)); } .fusion-sa-9 { padding-bottom: calc(9 * var(--wz, 1pt)); }
.fusion-sb-10 { padding-top: calc(10 * var(--wz, 1pt)); } .fusion-sa-10 { padding-bottom: calc(10 * var(--wz, 1pt)); }
.fusion-sb-11 { padding-top: calc(11 * var(--wz, 1pt)); } .fusion-sa-11 { padding-bottom: calc(11 * var(--wz, 1pt)); }
.fusion-sb-12 { padding-top: calc(12 * var(--wz, 1pt)); } .fusion-sa-12 { padding-bottom: calc(12 * var(--wz, 1pt)); }
.fusion-sb-13 { padding-top: calc(13 * var(--wz, 1pt)); } .fusion-sa-13 { padding-bottom: calc(13 * var(--wz, 1pt)); }
.fusion-sb-14 { padding-top: calc(14 * var(--wz, 1pt)); } .fusion-sa-14 { padding-bottom: calc(14 * var(--wz, 1pt)); }
.fusion-sb-15 { padding-top: calc(15 * var(--wz, 1pt)); } .fusion-sa-15 { padding-bottom: calc(15 * var(--wz, 1pt)); }
.fusion-sb-16 { padding-top: calc(16 * var(--wz, 1pt)); } .fusion-sa-16 { padding-bottom: calc(16 * var(--wz, 1pt)); }
.fusion-sb-17 { padding-top: calc(17 * var(--wz, 1pt)); } .fusion-sa-17 { padding-bottom: calc(17 * var(--wz, 1pt)); }
.fusion-sb-18 { padding-top: calc(18 * var(--wz, 1pt)); } .fusion-sa-18 { padding-bottom: calc(18 * var(--wz, 1pt)); }
.fusion-sb-19 { padding-top: calc(19 * var(--wz, 1pt)); } .fusion-sa-19 { padding-bottom: calc(19 * var(--wz, 1pt)); }
.fusion-sb-20 { padding-top: calc(20 * var(--wz, 1pt)); } .fusion-sa-20 { padding-bottom: calc(20 * var(--wz, 1pt)); }
.fusion-sb-21 { padding-top: calc(21 * var(--wz, 1pt)); } .fusion-sa-21 { padding-bottom: calc(21 * var(--wz, 1pt)); }
.fusion-sb-22 { padding-top: calc(22 * var(--wz, 1pt)); } .fusion-sa-22 { padding-bottom: calc(22 * var(--wz, 1pt)); }
.fusion-sb-23 { padding-top: calc(23 * var(--wz, 1pt)); } .fusion-sa-23 { padding-bottom: calc(23 * var(--wz, 1pt)); }
.fusion-sb-24 { padding-top: calc(24 * var(--wz, 1pt)); } .fusion-sa-24 { padding-bottom: calc(24 * var(--wz, 1pt)); }
.fusion-sb-25 { padding-top: calc(25 * var(--wz, 1pt)); } .fusion-sa-25 { padding-bottom: calc(25 * var(--wz, 1pt)); }
.fusion-sb-26 { padding-top: calc(26 * var(--wz, 1pt)); } .fusion-sa-26 { padding-bottom: calc(26 * var(--wz, 1pt)); }
.fusion-sb-27 { padding-top: calc(27 * var(--wz, 1pt)); } .fusion-sa-27 { padding-bottom: calc(27 * var(--wz, 1pt)); }
.fusion-sb-28 { padding-top: calc(28 * var(--wz, 1pt)); } .fusion-sa-28 { padding-bottom: calc(28 * var(--wz, 1pt)); }
.fusion-sb-29 { padding-top: calc(29 * var(--wz, 1pt)); } .fusion-sa-29 { padding-bottom: calc(29 * var(--wz, 1pt)); }
.fusion-sb-30 { padding-top: calc(30 * var(--wz, 1pt)); } .fusion-sa-30 { padding-bottom: calc(30 * var(--wz, 1pt)); }
.fusion-sb-31 { padding-top: calc(31 * var(--wz, 1pt)); } .fusion-sa-31 { padding-bottom: calc(31 * var(--wz, 1pt)); }
.fusion-sb-32 { padding-top: calc(32 * var(--wz, 1pt)); } .fusion-sa-32 { padding-bottom: calc(32 * var(--wz, 1pt)); }
.fusion-sb-33 { padding-top: calc(33 * var(--wz, 1pt)); } .fusion-sa-33 { padding-bottom: calc(33 * var(--wz, 1pt)); }
.fusion-sb-34 { padding-top: calc(34 * var(--wz, 1pt)); } .fusion-sa-34 { padding-bottom: calc(34 * var(--wz, 1pt)); }
.fusion-sb-35 { padding-top: calc(35 * var(--wz, 1pt)); } .fusion-sa-35 { padding-bottom: calc(35 * var(--wz, 1pt)); }
.fusion-sb-36 { padding-top: calc(36 * var(--wz, 1pt)); } .fusion-sa-36 { padding-bottom: calc(36 * var(--wz, 1pt)); }
.fusion-sb-37 { padding-top: calc(37 * var(--wz, 1pt)); } .fusion-sa-37 { padding-bottom: calc(37 * var(--wz, 1pt)); }
.fusion-sb-38 { padding-top: calc(38 * var(--wz, 1pt)); } .fusion-sa-38 { padding-bottom: calc(38 * var(--wz, 1pt)); }
.fusion-sb-39 { padding-top: calc(39 * var(--wz, 1pt)); } .fusion-sa-39 { padding-bottom: calc(39 * var(--wz, 1pt)); }
.fusion-sb-40 { padding-top: calc(40 * var(--wz, 1pt)); } .fusion-sa-40 { padding-bottom: calc(40 * var(--wz, 1pt)); }
.fusion-sb-41 { padding-top: calc(41 * var(--wz, 1pt)); } .fusion-sa-41 { padding-bottom: calc(41 * var(--wz, 1pt)); }
.fusion-sb-42 { padding-top: calc(42 * var(--wz, 1pt)); } .fusion-sa-42 { padding-bottom: calc(42 * var(--wz, 1pt)); }
.fusion-sb-43 { padding-top: calc(43 * var(--wz, 1pt)); } .fusion-sa-43 { padding-bottom: calc(43 * var(--wz, 1pt)); }
.fusion-sb-44 { padding-top: calc(44 * var(--wz, 1pt)); } .fusion-sa-44 { padding-bottom: calc(44 * var(--wz, 1pt)); }
.fusion-sb-45 { padding-top: calc(45 * var(--wz, 1pt)); } .fusion-sa-45 { padding-bottom: calc(45 * var(--wz, 1pt)); }
.fusion-sb-46 { padding-top: calc(46 * var(--wz, 1pt)); } .fusion-sa-46 { padding-bottom: calc(46 * var(--wz, 1pt)); }
.fusion-sb-47 { padding-top: calc(47 * var(--wz, 1pt)); } .fusion-sa-47 { padding-bottom: calc(47 * var(--wz, 1pt)); }
.fusion-sb-48 { padding-top: calc(48 * var(--wz, 1pt)); } .fusion-sa-48 { padding-bottom: calc(48 * var(--wz, 1pt)); }
.fusion-sb-49 { padding-top: calc(49 * var(--wz, 1pt)); } .fusion-sa-49 { padding-bottom: calc(49 * var(--wz, 1pt)); }
.fusion-sb-50 { padding-top: calc(50 * var(--wz, 1pt)); } .fusion-sa-50 { padding-bottom: calc(50 * var(--wz, 1pt)); }
.fusion-sb-51 { padding-top: calc(51 * var(--wz, 1pt)); } .fusion-sa-51 { padding-bottom: calc(51 * var(--wz, 1pt)); }
.fusion-sb-52 { padding-top: calc(52 * var(--wz, 1pt)); } .fusion-sa-52 { padding-bottom: calc(52 * var(--wz, 1pt)); }
.fusion-sb-53 { padding-top: calc(53 * var(--wz, 1pt)); } .fusion-sa-53 { padding-bottom: calc(53 * var(--wz, 1pt)); }
.fusion-sb-54 { padding-top: calc(54 * var(--wz, 1pt)); } .fusion-sa-54 { padding-bottom: calc(54 * var(--wz, 1pt)); }
.fusion-sb-55 { padding-top: calc(55 * var(--wz, 1pt)); } .fusion-sa-55 { padding-bottom: calc(55 * var(--wz, 1pt)); }
.fusion-sb-56 { padding-top: calc(56 * var(--wz, 1pt)); } .fusion-sa-56 { padding-bottom: calc(56 * var(--wz, 1pt)); }
.fusion-sb-57 { padding-top: calc(57 * var(--wz, 1pt)); } .fusion-sa-57 { padding-bottom: calc(57 * var(--wz, 1pt)); }
.fusion-sb-58 { padding-top: calc(58 * var(--wz, 1pt)); } .fusion-sa-58 { padding-bottom: calc(58 * var(--wz, 1pt)); }
.fusion-sb-59 { padding-top: calc(59 * var(--wz, 1pt)); } .fusion-sa-59 { padding-bottom: calc(59 * var(--wz, 1pt)); }
.fusion-sb-60 { padding-top: calc(60 * var(--wz, 1pt)); } .fusion-sa-60 { padding-bottom: calc(60 * var(--wz, 1pt)); }
.fusion-sb-61 { padding-top: calc(61 * var(--wz, 1pt)); } .fusion-sa-61 { padding-bottom: calc(61 * var(--wz, 1pt)); }
.fusion-sb-62 { padding-top: calc(62 * var(--wz, 1pt)); } .fusion-sa-62 { padding-bottom: calc(62 * var(--wz, 1pt)); }
.fusion-sb-63 { padding-top: calc(63 * var(--wz, 1pt)); } .fusion-sa-63 { padding-bottom: calc(63 * var(--wz, 1pt)); }
.fusion-sb-64 { padding-top: calc(64 * var(--wz, 1pt)); } .fusion-sa-64 { padding-bottom: calc(64 * var(--wz, 1pt)); }
.fusion-sb-65 { padding-top: calc(65 * var(--wz, 1pt)); } .fusion-sa-65 { padding-bottom: calc(65 * var(--wz, 1pt)); }
.fusion-sb-66 { padding-top: calc(66 * var(--wz, 1pt)); } .fusion-sa-66 { padding-bottom: calc(66 * var(--wz, 1pt)); }
.fusion-sb-67 { padding-top: calc(67 * var(--wz, 1pt)); } .fusion-sa-67 { padding-bottom: calc(67 * var(--wz, 1pt)); }
.fusion-sb-68 { padding-top: calc(68 * var(--wz, 1pt)); } .fusion-sa-68 { padding-bottom: calc(68 * var(--wz, 1pt)); }
.fusion-sb-69 { padding-top: calc(69 * var(--wz, 1pt)); } .fusion-sa-69 { padding-bottom: calc(69 * var(--wz, 1pt)); }
.fusion-sb-70 { padding-top: calc(70 * var(--wz, 1pt)); } .fusion-sa-70 { padding-bottom: calc(70 * var(--wz, 1pt)); }
.fusion-sb-71 { padding-top: calc(71 * var(--wz, 1pt)); } .fusion-sa-71 { padding-bottom: calc(71 * var(--wz, 1pt)); }
.fusion-sb-72 { padding-top: calc(72 * var(--wz, 1pt)); } .fusion-sa-72 { padding-bottom: calc(72 * var(--wz, 1pt)); }
.fusion-sb-73 { padding-top: calc(73 * var(--wz, 1pt)); } .fusion-sa-73 { padding-bottom: calc(73 * var(--wz, 1pt)); }
.fusion-sb-74 { padding-top: calc(74 * var(--wz, 1pt)); } .fusion-sa-74 { padding-bottom: calc(74 * var(--wz, 1pt)); }
.fusion-sb-75 { padding-top: calc(75 * var(--wz, 1pt)); } .fusion-sa-75 { padding-bottom: calc(75 * var(--wz, 1pt)); }
.fusion-sb-76 { padding-top: calc(76 * var(--wz, 1pt)); } .fusion-sa-76 { padding-bottom: calc(76 * var(--wz, 1pt)); }
.fusion-sb-77 { padding-top: calc(77 * var(--wz, 1pt)); } .fusion-sa-77 { padding-bottom: calc(77 * var(--wz, 1pt)); }
.fusion-sb-78 { padding-top: calc(78 * var(--wz, 1pt)); } .fusion-sa-78 { padding-bottom: calc(78 * var(--wz, 1pt)); }
.fusion-sb-79 { padding-top: calc(79 * var(--wz, 1pt)); } .fusion-sa-79 { padding-bottom: calc(79 * var(--wz, 1pt)); }
.fusion-sb-80 { padding-top: calc(80 * var(--wz, 1pt)); } .fusion-sa-80 { padding-bottom: calc(80 * var(--wz, 1pt)); }
.fusion-sb-81 { padding-top: calc(81 * var(--wz, 1pt)); } .fusion-sa-81 { padding-bottom: calc(81 * var(--wz, 1pt)); }
.fusion-sb-82 { padding-top: calc(82 * var(--wz, 1pt)); } .fusion-sa-82 { padding-bottom: calc(82 * var(--wz, 1pt)); }
.fusion-sb-83 { padding-top: calc(83 * var(--wz, 1pt)); } .fusion-sa-83 { padding-bottom: calc(83 * var(--wz, 1pt)); }
.fusion-sb-84 { padding-top: calc(84 * var(--wz, 1pt)); } .fusion-sa-84 { padding-bottom: calc(84 * var(--wz, 1pt)); }
.fusion-sb-85 { padding-top: calc(85 * var(--wz, 1pt)); } .fusion-sa-85 { padding-bottom: calc(85 * var(--wz, 1pt)); }
.fusion-sb-86 { padding-top: calc(86 * var(--wz, 1pt)); } .fusion-sa-86 { padding-bottom: calc(86 * var(--wz, 1pt)); }
.fusion-sb-87 { padding-top: calc(87 * var(--wz, 1pt)); } .fusion-sa-87 { padding-bottom: calc(87 * var(--wz, 1pt)); }
.fusion-sb-88 { padding-top: calc(88 * var(--wz, 1pt)); } .fusion-sa-88 { padding-bottom: calc(88 * var(--wz, 1pt)); }
.fusion-sb-89 { padding-top: calc(89 * var(--wz, 1pt)); } .fusion-sa-89 { padding-bottom: calc(89 * var(--wz, 1pt)); }
.fusion-sb-90 { padding-top: calc(90 * var(--wz, 1pt)); } .fusion-sa-90 { padding-bottom: calc(90 * var(--wz, 1pt)); }
.fusion-sb-91 { padding-top: calc(91 * var(--wz, 1pt)); } .fusion-sa-91 { padding-bottom: calc(91 * var(--wz, 1pt)); }
.fusion-sb-92 { padding-top: calc(92 * var(--wz, 1pt)); } .fusion-sa-92 { padding-bottom: calc(92 * var(--wz, 1pt)); }
.fusion-sb-93 { padding-top: calc(93 * var(--wz, 1pt)); } .fusion-sa-93 { padding-bottom: calc(93 * var(--wz, 1pt)); }
.fusion-sb-94 { padding-top: calc(94 * var(--wz, 1pt)); } .fusion-sa-94 { padding-bottom: calc(94 * var(--wz, 1pt)); }
.fusion-sb-95 { padding-top: calc(95 * var(--wz, 1pt)); } .fusion-sa-95 { padding-bottom: calc(95 * var(--wz, 1pt)); }
.fusion-sb-96 { padding-top: calc(96 * var(--wz, 1pt)); } .fusion-sa-96 { padding-bottom: calc(96 * var(--wz, 1pt)); }
.fusion-sb-97 { padding-top: calc(97 * var(--wz, 1pt)); } .fusion-sa-97 { padding-bottom: calc(97 * var(--wz, 1pt)); }
.fusion-sb-98 { padding-top: calc(98 * var(--wz, 1pt)); } .fusion-sa-98 { padding-bottom: calc(98 * var(--wz, 1pt)); }
.fusion-sb-99 { padding-top: calc(99 * var(--wz, 1pt)); } .fusion-sa-99 { padding-bottom: calc(99 * var(--wz, 1pt)); }
.fusion-sb-100 { padding-top: calc(100 * var(--wz, 1pt)); } .fusion-sa-100 { padding-bottom: calc(100 * var(--wz, 1pt)); }
.fusion-sb-101 { padding-top: calc(101 * var(--wz, 1pt)); } .fusion-sa-101 { padding-bottom: calc(101 * var(--wz, 1pt)); }
.fusion-sb-102 { padding-top: calc(102 * var(--wz, 1pt)); } .fusion-sa-102 { padding-bottom: calc(102 * var(--wz, 1pt)); }
.fusion-sb-103 { padding-top: calc(103 * var(--wz, 1pt)); } .fusion-sa-103 { padding-bottom: calc(103 * var(--wz, 1pt)); }
.fusion-sb-104 { padding-top: calc(104 * var(--wz, 1pt)); } .fusion-sa-104 { padding-bottom: calc(104 * var(--wz, 1pt)); }
.fusion-sb-105 { padding-top: calc(105 * var(--wz, 1pt)); } .fusion-sa-105 { padding-bottom: calc(105 * var(--wz, 1pt)); }
.fusion-sb-106 { padding-top: calc(106 * var(--wz, 1pt)); } .fusion-sa-106 { padding-bottom: calc(106 * var(--wz, 1pt)); }
.fusion-sb-107 { padding-top: calc(107 * var(--wz, 1pt)); } .fusion-sa-107 { padding-bottom: calc(107 * var(--wz, 1pt)); }
.fusion-sb-108 { padding-top: calc(108 * var(--wz, 1pt)); } .fusion-sa-108 { padding-bottom: calc(108 * var(--wz, 1pt)); }
.fusion-sb-109 { padding-top: calc(109 * var(--wz, 1pt)); } .fusion-sa-109 { padding-bottom: calc(109 * var(--wz, 1pt)); }
.fusion-sb-110 { padding-top: calc(110 * var(--wz, 1pt)); } .fusion-sa-110 { padding-bottom: calc(110 * var(--wz, 1pt)); }
.fusion-sb-111 { padding-top: calc(111 * var(--wz, 1pt)); } .fusion-sa-111 { padding-bottom: calc(111 * var(--wz, 1pt)); }
.fusion-sb-112 { padding-top: calc(112 * var(--wz, 1pt)); } .fusion-sa-112 { padding-bottom: calc(112 * var(--wz, 1pt)); }
.fusion-sb-113 { padding-top: calc(113 * var(--wz, 1pt)); } .fusion-sa-113 { padding-bottom: calc(113 * var(--wz, 1pt)); }
.fusion-sb-114 { padding-top: calc(114 * var(--wz, 1pt)); } .fusion-sa-114 { padding-bottom: calc(114 * var(--wz, 1pt)); }
.fusion-sb-115 { padding-top: calc(115 * var(--wz, 1pt)); } .fusion-sa-115 { padding-bottom: calc(115 * var(--wz, 1pt)); }
.fusion-sb-116 { padding-top: calc(116 * var(--wz, 1pt)); } .fusion-sa-116 { padding-bottom: calc(116 * var(--wz, 1pt)); }
.fusion-sb-117 { padding-top: calc(117 * var(--wz, 1pt)); } .fusion-sa-117 { padding-bottom: calc(117 * var(--wz, 1pt)); }
.fusion-sb-118 { padding-top: calc(118 * var(--wz, 1pt)); } .fusion-sa-118 { padding-bottom: calc(118 * var(--wz, 1pt)); }
.fusion-sb-119 { padding-top: calc(119 * var(--wz, 1pt)); } .fusion-sa-119 { padding-bottom: calc(119 * var(--wz, 1pt)); }
.fusion-sb-120 { padding-top: calc(120 * var(--wz, 1pt)); } .fusion-sa-120 { padding-bottom: calc(120 * var(--wz, 1pt)); }
.fusion-sb-121 { padding-top: calc(121 * var(--wz, 1pt)); } .fusion-sa-121 { padding-bottom: calc(121 * var(--wz, 1pt)); }
.fusion-sb-122 { padding-top: calc(122 * var(--wz, 1pt)); } .fusion-sa-122 { padding-bottom: calc(122 * var(--wz, 1pt)); }
.fusion-sb-123 { padding-top: calc(123 * var(--wz, 1pt)); } .fusion-sa-123 { padding-bottom: calc(123 * var(--wz, 1pt)); }
.fusion-sb-124 { padding-top: calc(124 * var(--wz, 1pt)); } .fusion-sa-124 { padding-bottom: calc(124 * var(--wz, 1pt)); }
.fusion-sb-125 { padding-top: calc(125 * var(--wz, 1pt)); } .fusion-sa-125 { padding-bottom: calc(125 * var(--wz, 1pt)); }
.fusion-sb-126 { padding-top: calc(126 * var(--wz, 1pt)); } .fusion-sa-126 { padding-bottom: calc(126 * var(--wz, 1pt)); }
.fusion-sb-127 { padding-top: calc(127 * var(--wz, 1pt)); } .fusion-sa-127 { padding-bottom: calc(127 * var(--wz, 1pt)); }
.fusion-sb-128 { padding-top: calc(128 * var(--wz, 1pt)); } .fusion-sa-128 { padding-bottom: calc(128 * var(--wz, 1pt)); }
.fusion-sb-129 { padding-top: calc(129 * var(--wz, 1pt)); } .fusion-sa-129 { padding-bottom: calc(129 * var(--wz, 1pt)); }
.fusion-sb-130 { padding-top: calc(130 * var(--wz, 1pt)); } .fusion-sa-130 { padding-bottom: calc(130 * var(--wz, 1pt)); }
.fusion-sb-131 { padding-top: calc(131 * var(--wz, 1pt)); } .fusion-sa-131 { padding-bottom: calc(131 * var(--wz, 1pt)); }
.fusion-sb-132 { padding-top: calc(132 * var(--wz, 1pt)); } .fusion-sa-132 { padding-bottom: calc(132 * var(--wz, 1pt)); }
.fusion-sb-133 { padding-top: calc(133 * var(--wz, 1pt)); } .fusion-sa-133 { padding-bottom: calc(133 * var(--wz, 1pt)); }
.fusion-sb-134 { padding-top: calc(134 * var(--wz, 1pt)); } .fusion-sa-134 { padding-bottom: calc(134 * var(--wz, 1pt)); }
.fusion-sb-135 { padding-top: calc(135 * var(--wz, 1pt)); } .fusion-sa-135 { padding-bottom: calc(135 * var(--wz, 1pt)); }
.fusion-sb-136 { padding-top: calc(136 * var(--wz, 1pt)); } .fusion-sa-136 { padding-bottom: calc(136 * var(--wz, 1pt)); }
.fusion-sb-137 { padding-top: calc(137 * var(--wz, 1pt)); } .fusion-sa-137 { padding-bottom: calc(137 * var(--wz, 1pt)); }
.fusion-sb-138 { padding-top: calc(138 * var(--wz, 1pt)); } .fusion-sa-138 { padding-bottom: calc(138 * var(--wz, 1pt)); }
.fusion-sb-139 { padding-top: calc(139 * var(--wz, 1pt)); } .fusion-sa-139 { padding-bottom: calc(139 * var(--wz, 1pt)); }
.fusion-sb-140 { padding-top: calc(140 * var(--wz, 1pt)); } .fusion-sa-140 { padding-bottom: calc(140 * var(--wz, 1pt)); }
.fusion-sb-141 { padding-top: calc(141 * var(--wz, 1pt)); } .fusion-sa-141 { padding-bottom: calc(141 * var(--wz, 1pt)); }
.fusion-sb-142 { padding-top: calc(142 * var(--wz, 1pt)); } .fusion-sa-142 { padding-bottom: calc(142 * var(--wz, 1pt)); }
.fusion-sb-143 { padding-top: calc(143 * var(--wz, 1pt)); } .fusion-sa-143 { padding-bottom: calc(143 * var(--wz, 1pt)); }
.fusion-sb-144 { padding-top: calc(144 * var(--wz, 1pt)); } .fusion-sa-144 { padding-bottom: calc(144 * var(--wz, 1pt)); }
.fusion-lh-80 { line-height: normal; }
.fusion-lh-81 { line-height: normal; }
.fusion-lh-82 { line-height: normal; }
.fusion-lh-83 { line-height: normal; }
.fusion-lh-84 { line-height: normal; }
.fusion-lh-85 { line-height: normal; }
.fusion-lh-86 { line-height: normal; }
.fusion-lh-87 { line-height: normal; }
.fusion-lh-88 { line-height: normal; }
.fusion-lh-89 { line-height: normal; }
.fusion-lh-90 { line-height: normal; }
.fusion-lh-91 { line-height: normal; }
.fusion-lh-92 { line-height: normal; }
.fusion-lh-93 { line-height: normal; }
.fusion-lh-94 { line-height: normal; }
.fusion-lh-95 { line-height: normal; }
.fusion-lh-96 { line-height: normal; }
.fusion-lh-97 { line-height: normal; }
.fusion-lh-98 { line-height: normal; }
.fusion-lh-99 { line-height: normal; }
.fusion-lh-100 { line-height: normal; }
.fusion-lh-101 { line-height: 1.212; }
.fusion-lh-102 { line-height: 1.224; }
.fusion-lh-103 { line-height: 1.236; }
.fusion-lh-104 { line-height: 1.248; }
.fusion-lh-105 { line-height: 1.26; }
.fusion-lh-106 { line-height: 1.272; }
.fusion-lh-107 { line-height: 1.284; }
.fusion-lh-108 { line-height: 1.296; }
.fusion-lh-109 { line-height: 1.308; }
.fusion-lh-110 { line-height: 1.32; }
.fusion-lh-111 { line-height: 1.332; }
.fusion-lh-112 { line-height: 1.344; }
.fusion-lh-113 { line-height: 1.356; }
.fusion-lh-114 { line-height: 1.368; }
.fusion-lh-115 { line-height: 1.38; }
.fusion-lh-116 { line-height: 1.392; }
.fusion-lh-117 { line-height: 1.404; }
.fusion-lh-118 { line-height: 1.416; }
.fusion-lh-119 { line-height: 1.428; }
.fusion-lh-120 { line-height: 1.44; }
.fusion-lh-121 { line-height: 1.452; }
.fusion-lh-122 { line-height: 1.464; }
.fusion-lh-123 { line-height: 1.476; }
.fusion-lh-124 { line-height: 1.488; }
.fusion-lh-125 { line-height: 1.5; }
.fusion-lh-126 { line-height: 1.512; }
.fusion-lh-127 { line-height: 1.524; }
.fusion-lh-128 { line-height: 1.536; }
.fusion-lh-129 { line-height: 1.548; }
.fusion-lh-130 { line-height: 1.56; }
.fusion-lh-131 { line-height: 1.572; }
.fusion-lh-132 { line-height: 1.584; }
.fusion-lh-133 { line-height: 1.596; }
.fusion-lh-134 { line-height: 1.608; }
.fusion-lh-135 { line-height: 1.62; }
.fusion-lh-136 { line-height: 1.632; }
.fusion-lh-137 { line-height: 1.644; }
.fusion-lh-138 { line-height: 1.656; }
.fusion-lh-139 { line-height: 1.668; }
.fusion-lh-140 { line-height: 1.68; }
.fusion-lh-141 { line-height: 1.692; }
.fusion-lh-142 { line-height: 1.704; }
.fusion-lh-143 { line-height: 1.716; }
.fusion-lh-144 { line-height: 1.728; }
.fusion-lh-145 { line-height: 1.74; }
.fusion-lh-146 { line-height: 1.752; }
.fusion-lh-147 { line-height: 1.764; }
.fusion-lh-148 { line-height: 1.776; }
.fusion-lh-149 { line-height: 1.788; }
.fusion-lh-150 { line-height: 1.8; }
.fusion-lh-151 { line-height: 1.812; }
.fusion-lh-152 { line-height: 1.824; }
.fusion-lh-153 { line-height: 1.836; }
.fusion-lh-154 { line-height: 1.848; }
.fusion-lh-155 { line-height: 1.86; }
.fusion-lh-156 { line-height: 1.872; }
.fusion-lh-157 { line-height: 1.884; }
.fusion-lh-158 { line-height: 1.896; }
.fusion-lh-159 { line-height: 1.908; }
.fusion-lh-160 { line-height: 1.92; }
.fusion-lh-161 { line-height: 1.932; }
.fusion-lh-162 { line-height: 1.944; }
.fusion-lh-163 { line-height: 1.956; }
.fusion-lh-164 { line-height: 1.968; }
.fusion-lh-165 { line-height: 1.98; }
.fusion-lh-166 { line-height: 1.992; }
.fusion-lh-167 { line-height: 2.004; }
.fusion-lh-168 { line-height: 2.016; }
.fusion-lh-169 { line-height: 2.028; }
.fusion-lh-170 { line-height: 2.04; }
.fusion-lh-171 { line-height: 2.052; }
.fusion-lh-172 { line-height: 2.064; }
.fusion-lh-173 { line-height: 2.076; }
.fusion-lh-174 { line-height: 2.088; }
.fusion-lh-175 { line-height: 2.1; }
.fusion-lh-176 { line-height: 2.112; }
.fusion-lh-177 { line-height: 2.124; }
.fusion-lh-178 { line-height: 2.136; }
.fusion-lh-179 { line-height: 2.148; }
.fusion-lh-180 { line-height: 2.16; }
.fusion-lh-181 { line-height: 2.172; }
.fusion-lh-182 { line-height: 2.184; }
.fusion-lh-183 { line-height: 2.196; }
.fusion-lh-184 { line-height: 2.208; }
.fusion-lh-185 { line-height: 2.22; }
.fusion-lh-186 { line-height: 2.232; }
.fusion-lh-187 { line-height: 2.244; }
.fusion-lh-188 { line-height: 2.256; }
.fusion-lh-189 { line-height: 2.268; }
.fusion-lh-190 { line-height: 2.28; }
.fusion-lh-191 { line-height: 2.292; }
.fusion-lh-192 { line-height: 2.304; }
.fusion-lh-193 { line-height: 2.316; }
.fusion-lh-194 { line-height: 2.328; }
.fusion-lh-195 { line-height: 2.34; }
.fusion-lh-196 { line-height: 2.352; }
.fusion-lh-197 { line-height: 2.364; }
.fusion-lh-198 { line-height: 2.376; }
.fusion-lh-199 { line-height: 2.388; }
.fusion-lh-200 { line-height: 2.4; }
.fusion-lh-201 { line-height: 2.412; }
.fusion-lh-202 { line-height: 2.424; }
.fusion-lh-203 { line-height: 2.436; }
.fusion-lh-204 { line-height: 2.448; }
.fusion-lh-205 { line-height: 2.46; }
.fusion-lh-206 { line-height: 2.472; }
.fusion-lh-207 { line-height: 2.484; }
.fusion-lh-208 { line-height: 2.496; }
.fusion-lh-209 { line-height: 2.508; }
.fusion-lh-210 { line-height: 2.52; }
.fusion-lh-211 { line-height: 2.532; }
.fusion-lh-212 { line-height: 2.544; }
.fusion-lh-213 { line-height: 2.556; }
.fusion-lh-214 { line-height: 2.568; }
.fusion-lh-215 { line-height: 2.58; }
.fusion-lh-216 { line-height: 2.592; }
.fusion-lh-217 { line-height: 2.604; }
.fusion-lh-218 { line-height: 2.616; }
.fusion-lh-219 { line-height: 2.628; }
.fusion-lh-220 { line-height: 2.64; }
.fusion-lh-221 { line-height: 2.652; }
.fusion-lh-222 { line-height: 2.664; }
.fusion-lh-223 { line-height: 2.676; }
.fusion-lh-224 { line-height: 2.688; }
.fusion-lh-225 { line-height: 2.7; }
.fusion-lh-226 { line-height: 2.712; }
.fusion-lh-227 { line-height: 2.724; }
.fusion-lh-228 { line-height: 2.736; }
.fusion-lh-229 { line-height: 2.748; }
.fusion-lh-230 { line-height: 2.76; }
.fusion-lh-231 { line-height: 2.772; }
.fusion-lh-232 { line-height: 2.784; }
.fusion-lh-233 { line-height: 2.796; }
.fusion-lh-234 { line-height: 2.808; }
.fusion-lh-235 { line-height: 2.82; }
.fusion-lh-236 { line-height: 2.832; }
.fusion-lh-237 { line-height: 2.844; }
.fusion-lh-238 { line-height: 2.856; }
.fusion-lh-239 { line-height: 2.868; }
.fusion-lh-240 { line-height: 2.88; }
.fusion-lh-241 { line-height: 2.892; }
.fusion-lh-242 { line-height: 2.904; }
.fusion-lh-243 { line-height: 2.916; }
.fusion-lh-244 { line-height: 2.928; }
.fusion-lh-245 { line-height: 2.94; }
.fusion-lh-246 { line-height: 2.952; }
.fusion-lh-247 { line-height: 2.964; }
.fusion-lh-248 { line-height: 2.976; }
.fusion-lh-249 { line-height: 2.988; }
.fusion-lh-250 { line-height: 3.0; }
.fusion-lh-251 { line-height: 3.012; }
.fusion-lh-252 { line-height: 3.024; }
.fusion-lh-253 { line-height: 3.036; }
.fusion-lh-254 { line-height: 3.048; }
.fusion-lh-255 { line-height: 3.06; }
.fusion-lh-256 { line-height: 3.072; }
.fusion-lh-257 { line-height: 3.084; }
.fusion-lh-258 { line-height: 3.096; }
.fusion-lh-259 { line-height: 3.108; }
.fusion-lh-260 { line-height: 3.12; }
.fusion-lh-261 { line-height: 3.132; }
.fusion-lh-262 { line-height: 3.144; }
.fusion-lh-263 { line-height: 3.156; }
.fusion-lh-264 { line-height: 3.168; }
.fusion-lh-265 { line-height: 3.18; }
.fusion-lh-266 { line-height: 3.192; }
.fusion-lh-267 { line-height: 3.204; }
.fusion-lh-268 { line-height: 3.216; }
.fusion-lh-269 { line-height: 3.228; }
.fusion-lh-270 { line-height: 3.24; }
.fusion-lh-271 { line-height: 3.252; }
.fusion-lh-272 { line-height: 3.264; }
.fusion-lh-273 { line-height: 3.276; }
.fusion-lh-274 { line-height: 3.288; }
.fusion-lh-275 { line-height: 3.3; }
.fusion-lh-276 { line-height: 3.312; }
.fusion-lh-277 { line-height: 3.324; }
.fusion-lh-278 { line-height: 3.336; }
.fusion-lh-279 { line-height: 3.348; }
.fusion-lh-280 { line-height: 3.36; }
.fusion-lh-281 { line-height: 3.372; }
.fusion-lh-282 { line-height: 3.384; }
.fusion-lh-283 { line-height: 3.396; }
.fusion-lh-284 { line-height: 3.408; }
.fusion-lh-285 { line-height: 3.42; }
.fusion-lh-286 { line-height: 3.432; }
.fusion-lh-287 { line-height: 3.444; }
.fusion-lh-288 { line-height: 3.456; }
.fusion-lh-289 { line-height: 3.468; }
.fusion-lh-290 { line-height: 3.48; }
.fusion-lh-291 { line-height: 3.492; }
.fusion-lh-292 { line-height: 3.504; }
.fusion-lh-293 { line-height: 3.516; }
.fusion-lh-294 { line-height: 3.528; }
.fusion-lh-295 { line-height: 3.54; }
.fusion-lh-296 { line-height: 3.552; }
.fusion-lh-297 { line-height: 3.564; }
.fusion-lh-298 { line-height: 3.576; }
.fusion-lh-299 { line-height: 3.588; }
.fusion-lh-300 { line-height: 3.6; }
.fusion-ll-4 { line-height: calc(4 * var(--wz, 1pt)); }
.fusion-ll-5 { line-height: calc(5 * var(--wz, 1pt)); }
.fusion-ll-6 { line-height: calc(6 * var(--wz, 1pt)); }
.fusion-ll-7 { line-height: calc(7 * var(--wz, 1pt)); }
.fusion-ll-8 { line-height: calc(8 * var(--wz, 1pt)); }
.fusion-ll-9 { line-height: calc(9 * var(--wz, 1pt)); }
.fusion-ll-10 { line-height: calc(10 * var(--wz, 1pt)); }
.fusion-ll-11 { line-height: calc(11 * var(--wz, 1pt)); }
.fusion-ll-12 { line-height: calc(12 * var(--wz, 1pt)); }
.fusion-ll-13 { line-height: calc(13 * var(--wz, 1pt)); }
.fusion-ll-14 { line-height: calc(14 * var(--wz, 1pt)); }
.fusion-ll-15 { line-height: calc(15 * var(--wz, 1pt)); }
.fusion-ll-16 { line-height: calc(16 * var(--wz, 1pt)); }
.fusion-ll-17 { line-height: calc(17 * var(--wz, 1pt)); }
.fusion-ll-18 { line-height: calc(18 * var(--wz, 1pt)); }
.fusion-ll-19 { line-height: calc(19 * var(--wz, 1pt)); }
.fusion-ll-20 { line-height: calc(20 * var(--wz, 1pt)); }
.fusion-ll-21 { line-height: calc(21 * var(--wz, 1pt)); }
.fusion-ll-22 { line-height: calc(22 * var(--wz, 1pt)); }
.fusion-ll-23 { line-height: calc(23 * var(--wz, 1pt)); }
.fusion-ll-24 { line-height: calc(24 * var(--wz, 1pt)); }
.fusion-ll-25 { line-height: calc(25 * var(--wz, 1pt)); }
.fusion-ll-26 { line-height: calc(26 * var(--wz, 1pt)); }
.fusion-ll-27 { line-height: calc(27 * var(--wz, 1pt)); }
.fusion-ll-28 { line-height: calc(28 * var(--wz, 1pt)); }
.fusion-ll-29 { line-height: calc(29 * var(--wz, 1pt)); }
.fusion-ll-30 { line-height: calc(30 * var(--wz, 1pt)); }
.fusion-ll-31 { line-height: calc(31 * var(--wz, 1pt)); }
.fusion-ll-32 { line-height: calc(32 * var(--wz, 1pt)); }
.fusion-ll-33 { line-height: calc(33 * var(--wz, 1pt)); }
.fusion-ll-34 { line-height: calc(34 * var(--wz, 1pt)); }
.fusion-ll-35 { line-height: calc(35 * var(--wz, 1pt)); }
.fusion-ll-36 { line-height: calc(36 * var(--wz, 1pt)); }
.fusion-ll-37 { line-height: calc(37 * var(--wz, 1pt)); }
.fusion-ll-38 { line-height: calc(38 * var(--wz, 1pt)); }
.fusion-ll-39 { line-height: calc(39 * var(--wz, 1pt)); }
.fusion-ll-40 { line-height: calc(40 * var(--wz, 1pt)); }
.fusion-ll-41 { line-height: calc(41 * var(--wz, 1pt)); }
.fusion-ll-42 { line-height: calc(42 * var(--wz, 1pt)); }
.fusion-ll-43 { line-height: calc(43 * var(--wz, 1pt)); }
.fusion-ll-44 { line-height: calc(44 * var(--wz, 1pt)); }
.fusion-ll-45 { line-height: calc(45 * var(--wz, 1pt)); }
.fusion-ll-46 { line-height: calc(46 * var(--wz, 1pt)); }
.fusion-ll-47 { line-height: calc(47 * var(--wz, 1pt)); }
.fusion-ll-48 { line-height: calc(48 * var(--wz, 1pt)); }
.fusion-ll-49 { line-height: calc(49 * var(--wz, 1pt)); }
.fusion-ll-50 { line-height: calc(50 * var(--wz, 1pt)); }
.fusion-ll-51 { line-height: calc(51 * var(--wz, 1pt)); }
.fusion-ll-52 { line-height: calc(52 * var(--wz, 1pt)); }
.fusion-ll-53 { line-height: calc(53 * var(--wz, 1pt)); }
.fusion-ll-54 { line-height: calc(54 * var(--wz, 1pt)); }
.fusion-ll-55 { line-height: calc(55 * var(--wz, 1pt)); }
.fusion-ll-56 { line-height: calc(56 * var(--wz, 1pt)); }
.fusion-ll-57 { line-height: calc(57 * var(--wz, 1pt)); }
.fusion-ll-58 { line-height: calc(58 * var(--wz, 1pt)); }
.fusion-ll-59 { line-height: calc(59 * var(--wz, 1pt)); }
.fusion-ll-60 { line-height: calc(60 * var(--wz, 1pt)); }
.fusion-ll-61 { line-height: calc(61 * var(--wz, 1pt)); }
.fusion-ll-62 { line-height: calc(62 * var(--wz, 1pt)); }
.fusion-ll-63 { line-height: calc(63 * var(--wz, 1pt)); }
.fusion-ll-64 { line-height: calc(64 * var(--wz, 1pt)); }
.fusion-ll-65 { line-height: calc(65 * var(--wz, 1pt)); }
.fusion-ll-66 { line-height: calc(66 * var(--wz, 1pt)); }
.fusion-ll-67 { line-height: calc(67 * var(--wz, 1pt)); }
.fusion-ll-68 { line-height: calc(68 * var(--wz, 1pt)); }
.fusion-ll-69 { line-height: calc(69 * var(--wz, 1pt)); }
.fusion-ll-70 { line-height: calc(70 * var(--wz, 1pt)); }
.fusion-ll-71 { line-height: calc(71 * var(--wz, 1pt)); }
.fusion-ll-72 { line-height: calc(72 * var(--wz, 1pt)); }
.fusion-ll-73 { line-height: calc(73 * var(--wz, 1pt)); }
.fusion-ll-74 { line-height: calc(74 * var(--wz, 1pt)); }
.fusion-ll-75 { line-height: calc(75 * var(--wz, 1pt)); }
.fusion-ll-76 { line-height: calc(76 * var(--wz, 1pt)); }
.fusion-ll-77 { line-height: calc(77 * var(--wz, 1pt)); }
.fusion-ll-78 { line-height: calc(78 * var(--wz, 1pt)); }
.fusion-ll-79 { line-height: calc(79 * var(--wz, 1pt)); }
.fusion-ll-80 { line-height: calc(80 * var(--wz, 1pt)); }
.fusion-ll-81 { line-height: calc(81 * var(--wz, 1pt)); }
.fusion-ll-82 { line-height: calc(82 * var(--wz, 1pt)); }
.fusion-ll-83 { line-height: calc(83 * var(--wz, 1pt)); }
.fusion-ll-84 { line-height: calc(84 * var(--wz, 1pt)); }
.fusion-ll-85 { line-height: calc(85 * var(--wz, 1pt)); }
.fusion-ll-86 { line-height: calc(86 * var(--wz, 1pt)); }
.fusion-ll-87 { line-height: calc(87 * var(--wz, 1pt)); }
.fusion-ll-88 { line-height: calc(88 * var(--wz, 1pt)); }
.fusion-ll-89 { line-height: calc(89 * var(--wz, 1pt)); }
.fusion-ll-90 { line-height: calc(90 * var(--wz, 1pt)); }
.fusion-ll-91 { line-height: calc(91 * var(--wz, 1pt)); }
.fusion-ll-92 { line-height: calc(92 * var(--wz, 1pt)); }
.fusion-ll-93 { line-height: calc(93 * var(--wz, 1pt)); }
.fusion-ll-94 { line-height: calc(94 * var(--wz, 1pt)); }
.fusion-ll-95 { line-height: calc(95 * var(--wz, 1pt)); }
.fusion-ll-96 { line-height: calc(96 * var(--wz, 1pt)); }
.fusion-ll-97 { line-height: calc(97 * var(--wz, 1pt)); }
.fusion-ll-98 { line-height: calc(98 * var(--wz, 1pt)); }
.fusion-ll-99 { line-height: calc(99 * var(--wz, 1pt)); }
.fusion-ll-100 { line-height: calc(100 * var(--wz, 1pt)); }
.fusion-ll-101 { line-height: calc(101 * var(--wz, 1pt)); }
.fusion-ll-102 { line-height: calc(102 * var(--wz, 1pt)); }
.fusion-ll-103 { line-height: calc(103 * var(--wz, 1pt)); }
.fusion-ll-104 { line-height: calc(104 * var(--wz, 1pt)); }
.fusion-ll-105 { line-height: calc(105 * var(--wz, 1pt)); }
.fusion-ll-106 { line-height: calc(106 * var(--wz, 1pt)); }
.fusion-ll-107 { line-height: calc(107 * var(--wz, 1pt)); }
.fusion-ll-108 { line-height: calc(108 * var(--wz, 1pt)); }
.fusion-ll-109 { line-height: calc(109 * var(--wz, 1pt)); }
.fusion-ll-110 { line-height: calc(110 * var(--wz, 1pt)); }
.fusion-ll-111 { line-height: calc(111 * var(--wz, 1pt)); }
.fusion-ll-112 { line-height: calc(112 * var(--wz, 1pt)); }
.fusion-ll-113 { line-height: calc(113 * var(--wz, 1pt)); }
.fusion-ll-114 { line-height: calc(114 * var(--wz, 1pt)); }
.fusion-ll-115 { line-height: calc(115 * var(--wz, 1pt)); }
.fusion-ll-116 { line-height: calc(116 * var(--wz, 1pt)); }
.fusion-ll-117 { line-height: calc(117 * var(--wz, 1pt)); }
.fusion-ll-118 { line-height: calc(118 * var(--wz, 1pt)); }
.fusion-ll-119 { line-height: calc(119 * var(--wz, 1pt)); }
.fusion-ll-120 { line-height: calc(120 * var(--wz, 1pt)); }
.fusion-ll-121 { line-height: calc(121 * var(--wz, 1pt)); }
.fusion-ll-122 { line-height: calc(122 * var(--wz, 1pt)); }
.fusion-ll-123 { line-height: calc(123 * var(--wz, 1pt)); }
.fusion-ll-124 { line-height: calc(124 * var(--wz, 1pt)); }
.fusion-ll-125 { line-height: calc(125 * var(--wz, 1pt)); }
.fusion-ll-126 { line-height: calc(126 * var(--wz, 1pt)); }
.fusion-ll-127 { line-height: calc(127 * var(--wz, 1pt)); }
.fusion-ll-128 { line-height: calc(128 * var(--wz, 1pt)); }
.fusion-ll-129 { line-height: calc(129 * var(--wz, 1pt)); }
.fusion-ll-130 { line-height: calc(130 * var(--wz, 1pt)); }
.fusion-ll-131 { line-height: calc(131 * var(--wz, 1pt)); }
.fusion-ll-132 { line-height: calc(132 * var(--wz, 1pt)); }
.fusion-ll-133 { line-height: calc(133 * var(--wz, 1pt)); }
.fusion-ll-134 { line-height: calc(134 * var(--wz, 1pt)); }
.fusion-ll-135 { line-height: calc(135 * var(--wz, 1pt)); }
.fusion-ll-136 { line-height: calc(136 * var(--wz, 1pt)); }
.fusion-ll-137 { line-height: calc(137 * var(--wz, 1pt)); }
.fusion-ll-138 { line-height: calc(138 * var(--wz, 1pt)); }
.fusion-ll-139 { line-height: calc(139 * var(--wz, 1pt)); }
.fusion-ll-140 { line-height: calc(140 * var(--wz, 1pt)); }
.fusion-ll-141 { line-height: calc(141 * var(--wz, 1pt)); }
.fusion-ll-142 { line-height: calc(142 * var(--wz, 1pt)); }
.fusion-ll-143 { line-height: calc(143 * var(--wz, 1pt)); }
.fusion-ll-144 { line-height: calc(144 * var(--wz, 1pt)); }
.fusion-il-1 { margin-left: calc(2 * var(--wz, 1pt)); } .fusion-ir-1 { margin-right: calc(2 * var(--wz, 1pt)); } .fusion-fi-1 { text-indent: calc(2 * var(--wz, 1pt)); } .fusion-hg-1 { text-indent: calc(-1 * 2 * var(--wz, 1pt)); }
.fusion-il-2 { margin-left: calc(4 * var(--wz, 1pt)); } .fusion-ir-2 { margin-right: calc(4 * var(--wz, 1pt)); } .fusion-fi-2 { text-indent: calc(4 * var(--wz, 1pt)); } .fusion-hg-2 { text-indent: calc(-1 * 4 * var(--wz, 1pt)); }
.fusion-il-3 { margin-left: calc(6 * var(--wz, 1pt)); } .fusion-ir-3 { margin-right: calc(6 * var(--wz, 1pt)); } .fusion-fi-3 { text-indent: calc(6 * var(--wz, 1pt)); } .fusion-hg-3 { text-indent: calc(-1 * 6 * var(--wz, 1pt)); }
.fusion-il-4 { margin-left: calc(8 * var(--wz, 1pt)); } .fusion-ir-4 { margin-right: calc(8 * var(--wz, 1pt)); } .fusion-fi-4 { text-indent: calc(8 * var(--wz, 1pt)); } .fusion-hg-4 { text-indent: calc(-1 * 8 * var(--wz, 1pt)); }
.fusion-il-5 { margin-left: calc(10 * var(--wz, 1pt)); } .fusion-ir-5 { margin-right: calc(10 * var(--wz, 1pt)); } .fusion-fi-5 { text-indent: calc(10 * var(--wz, 1pt)); } .fusion-hg-5 { text-indent: calc(-1 * 10 * var(--wz, 1pt)); }
.fusion-il-6 { margin-left: calc(12 * var(--wz, 1pt)); } .fusion-ir-6 { margin-right: calc(12 * var(--wz, 1pt)); } .fusion-fi-6 { text-indent: calc(12 * var(--wz, 1pt)); } .fusion-hg-6 { text-indent: calc(-1 * 12 * var(--wz, 1pt)); }
.fusion-il-7 { margin-left: calc(14 * var(--wz, 1pt)); } .fusion-ir-7 { margin-right: calc(14 * var(--wz, 1pt)); } .fusion-fi-7 { text-indent: calc(14 * var(--wz, 1pt)); } .fusion-hg-7 { text-indent: calc(-1 * 14 * var(--wz, 1pt)); }
.fusion-il-8 { margin-left: calc(16 * var(--wz, 1pt)); } .fusion-ir-8 { margin-right: calc(16 * var(--wz, 1pt)); } .fusion-fi-8 { text-indent: calc(16 * var(--wz, 1pt)); } .fusion-hg-8 { text-indent: calc(-1 * 16 * var(--wz, 1pt)); }
.fusion-il-9 { margin-left: calc(18 * var(--wz, 1pt)); } .fusion-ir-9 { margin-right: calc(18 * var(--wz, 1pt)); } .fusion-fi-9 { text-indent: calc(18 * var(--wz, 1pt)); } .fusion-hg-9 { text-indent: calc(-1 * 18 * var(--wz, 1pt)); }
.fusion-il-10 { margin-left: calc(20 * var(--wz, 1pt)); } .fusion-ir-10 { margin-right: calc(20 * var(--wz, 1pt)); } .fusion-fi-10 { text-indent: calc(20 * var(--wz, 1pt)); } .fusion-hg-10 { text-indent: calc(-1 * 20 * var(--wz, 1pt)); }
.fusion-il-11 { margin-left: calc(22 * var(--wz, 1pt)); } .fusion-ir-11 { margin-right: calc(22 * var(--wz, 1pt)); } .fusion-fi-11 { text-indent: calc(22 * var(--wz, 1pt)); } .fusion-hg-11 { text-indent: calc(-1 * 22 * var(--wz, 1pt)); }
.fusion-il-12 { margin-left: calc(24 * var(--wz, 1pt)); } .fusion-ir-12 { margin-right: calc(24 * var(--wz, 1pt)); } .fusion-fi-12 { text-indent: calc(24 * var(--wz, 1pt)); } .fusion-hg-12 { text-indent: calc(-1 * 24 * var(--wz, 1pt)); }
.fusion-il-13 { margin-left: calc(26 * var(--wz, 1pt)); } .fusion-ir-13 { margin-right: calc(26 * var(--wz, 1pt)); } .fusion-fi-13 { text-indent: calc(26 * var(--wz, 1pt)); } .fusion-hg-13 { text-indent: calc(-1 * 26 * var(--wz, 1pt)); }
.fusion-il-14 { margin-left: calc(28 * var(--wz, 1pt)); } .fusion-ir-14 { margin-right: calc(28 * var(--wz, 1pt)); } .fusion-fi-14 { text-indent: calc(28 * var(--wz, 1pt)); } .fusion-hg-14 { text-indent: calc(-1 * 28 * var(--wz, 1pt)); }
.fusion-il-15 { margin-left: calc(30 * var(--wz, 1pt)); } .fusion-ir-15 { margin-right: calc(30 * var(--wz, 1pt)); } .fusion-fi-15 { text-indent: calc(30 * var(--wz, 1pt)); } .fusion-hg-15 { text-indent: calc(-1 * 30 * var(--wz, 1pt)); }
.fusion-il-16 { margin-left: calc(32 * var(--wz, 1pt)); } .fusion-ir-16 { margin-right: calc(32 * var(--wz, 1pt)); } .fusion-fi-16 { text-indent: calc(32 * var(--wz, 1pt)); } .fusion-hg-16 { text-indent: calc(-1 * 32 * var(--wz, 1pt)); }
.fusion-il-17 { margin-left: calc(34 * var(--wz, 1pt)); } .fusion-ir-17 { margin-right: calc(34 * var(--wz, 1pt)); } .fusion-fi-17 { text-indent: calc(34 * var(--wz, 1pt)); } .fusion-hg-17 { text-indent: calc(-1 * 34 * var(--wz, 1pt)); }
.fusion-il-18 { margin-left: calc(36 * var(--wz, 1pt)); } .fusion-ir-18 { margin-right: calc(36 * var(--wz, 1pt)); } .fusion-fi-18 { text-indent: calc(36 * var(--wz, 1pt)); } .fusion-hg-18 { text-indent: calc(-1 * 36 * var(--wz, 1pt)); }
.fusion-il-19 { margin-left: calc(38 * var(--wz, 1pt)); } .fusion-ir-19 { margin-right: calc(38 * var(--wz, 1pt)); } .fusion-fi-19 { text-indent: calc(38 * var(--wz, 1pt)); } .fusion-hg-19 { text-indent: calc(-1 * 38 * var(--wz, 1pt)); }
.fusion-il-20 { margin-left: calc(40 * var(--wz, 1pt)); } .fusion-ir-20 { margin-right: calc(40 * var(--wz, 1pt)); } .fusion-fi-20 { text-indent: calc(40 * var(--wz, 1pt)); } .fusion-hg-20 { text-indent: calc(-1 * 40 * var(--wz, 1pt)); }
.fusion-il-21 { margin-left: calc(42 * var(--wz, 1pt)); } .fusion-ir-21 { margin-right: calc(42 * var(--wz, 1pt)); } .fusion-fi-21 { text-indent: calc(42 * var(--wz, 1pt)); } .fusion-hg-21 { text-indent: calc(-1 * 42 * var(--wz, 1pt)); }
.fusion-il-22 { margin-left: calc(44 * var(--wz, 1pt)); } .fusion-ir-22 { margin-right: calc(44 * var(--wz, 1pt)); } .fusion-fi-22 { text-indent: calc(44 * var(--wz, 1pt)); } .fusion-hg-22 { text-indent: calc(-1 * 44 * var(--wz, 1pt)); }
.fusion-il-23 { margin-left: calc(46 * var(--wz, 1pt)); } .fusion-ir-23 { margin-right: calc(46 * var(--wz, 1pt)); } .fusion-fi-23 { text-indent: calc(46 * var(--wz, 1pt)); } .fusion-hg-23 { text-indent: calc(-1 * 46 * var(--wz, 1pt)); }
.fusion-il-24 { margin-left: calc(48 * var(--wz, 1pt)); } .fusion-ir-24 { margin-right: calc(48 * var(--wz, 1pt)); } .fusion-fi-24 { text-indent: calc(48 * var(--wz, 1pt)); } .fusion-hg-24 { text-indent: calc(-1 * 48 * var(--wz, 1pt)); }
.fusion-il-25 { margin-left: calc(50 * var(--wz, 1pt)); } .fusion-ir-25 { margin-right: calc(50 * var(--wz, 1pt)); } .fusion-fi-25 { text-indent: calc(50 * var(--wz, 1pt)); } .fusion-hg-25 { text-indent: calc(-1 * 50 * var(--wz, 1pt)); }
.fusion-il-26 { margin-left: calc(52 * var(--wz, 1pt)); } .fusion-ir-26 { margin-right: calc(52 * var(--wz, 1pt)); } .fusion-fi-26 { text-indent: calc(52 * var(--wz, 1pt)); } .fusion-hg-26 { text-indent: calc(-1 * 52 * var(--wz, 1pt)); }
.fusion-il-27 { margin-left: calc(54 * var(--wz, 1pt)); } .fusion-ir-27 { margin-right: calc(54 * var(--wz, 1pt)); } .fusion-fi-27 { text-indent: calc(54 * var(--wz, 1pt)); } .fusion-hg-27 { text-indent: calc(-1 * 54 * var(--wz, 1pt)); }
.fusion-il-28 { margin-left: calc(56 * var(--wz, 1pt)); } .fusion-ir-28 { margin-right: calc(56 * var(--wz, 1pt)); } .fusion-fi-28 { text-indent: calc(56 * var(--wz, 1pt)); } .fusion-hg-28 { text-indent: calc(-1 * 56 * var(--wz, 1pt)); }
.fusion-il-29 { margin-left: calc(58 * var(--wz, 1pt)); } .fusion-ir-29 { margin-right: calc(58 * var(--wz, 1pt)); } .fusion-fi-29 { text-indent: calc(58 * var(--wz, 1pt)); } .fusion-hg-29 { text-indent: calc(-1 * 58 * var(--wz, 1pt)); }
.fusion-il-30 { margin-left: calc(60 * var(--wz, 1pt)); } .fusion-ir-30 { margin-right: calc(60 * var(--wz, 1pt)); } .fusion-fi-30 { text-indent: calc(60 * var(--wz, 1pt)); } .fusion-hg-30 { text-indent: calc(-1 * 60 * var(--wz, 1pt)); }
.fusion-il-31 { margin-left: calc(62 * var(--wz, 1pt)); } .fusion-ir-31 { margin-right: calc(62 * var(--wz, 1pt)); } .fusion-fi-31 { text-indent: calc(62 * var(--wz, 1pt)); } .fusion-hg-31 { text-indent: calc(-1 * 62 * var(--wz, 1pt)); }
.fusion-il-32 { margin-left: calc(64 * var(--wz, 1pt)); } .fusion-ir-32 { margin-right: calc(64 * var(--wz, 1pt)); } .fusion-fi-32 { text-indent: calc(64 * var(--wz, 1pt)); } .fusion-hg-32 { text-indent: calc(-1 * 64 * var(--wz, 1pt)); }
.fusion-il-33 { margin-left: calc(66 * var(--wz, 1pt)); } .fusion-ir-33 { margin-right: calc(66 * var(--wz, 1pt)); } .fusion-fi-33 { text-indent: calc(66 * var(--wz, 1pt)); } .fusion-hg-33 { text-indent: calc(-1 * 66 * var(--wz, 1pt)); }
.fusion-il-34 { margin-left: calc(68 * var(--wz, 1pt)); } .fusion-ir-34 { margin-right: calc(68 * var(--wz, 1pt)); } .fusion-fi-34 { text-indent: calc(68 * var(--wz, 1pt)); } .fusion-hg-34 { text-indent: calc(-1 * 68 * var(--wz, 1pt)); }
.fusion-il-35 { margin-left: calc(70 * var(--wz, 1pt)); } .fusion-ir-35 { margin-right: calc(70 * var(--wz, 1pt)); } .fusion-fi-35 { text-indent: calc(70 * var(--wz, 1pt)); } .fusion-hg-35 { text-indent: calc(-1 * 70 * var(--wz, 1pt)); }
.fusion-il-36 { margin-left: calc(72 * var(--wz, 1pt)); } .fusion-ir-36 { margin-right: calc(72 * var(--wz, 1pt)); } .fusion-fi-36 { text-indent: calc(72 * var(--wz, 1pt)); } .fusion-hg-36 { text-indent: calc(-1 * 72 * var(--wz, 1pt)); }
.fusion-il-37 { margin-left: calc(74 * var(--wz, 1pt)); } .fusion-ir-37 { margin-right: calc(74 * var(--wz, 1pt)); } .fusion-fi-37 { text-indent: calc(74 * var(--wz, 1pt)); } .fusion-hg-37 { text-indent: calc(-1 * 74 * var(--wz, 1pt)); }
.fusion-il-38 { margin-left: calc(76 * var(--wz, 1pt)); } .fusion-ir-38 { margin-right: calc(76 * var(--wz, 1pt)); } .fusion-fi-38 { text-indent: calc(76 * var(--wz, 1pt)); } .fusion-hg-38 { text-indent: calc(-1 * 76 * var(--wz, 1pt)); }
.fusion-il-39 { margin-left: calc(78 * var(--wz, 1pt)); } .fusion-ir-39 { margin-right: calc(78 * var(--wz, 1pt)); } .fusion-fi-39 { text-indent: calc(78 * var(--wz, 1pt)); } .fusion-hg-39 { text-indent: calc(-1 * 78 * var(--wz, 1pt)); }
.fusion-il-40 { margin-left: calc(80 * var(--wz, 1pt)); } .fusion-ir-40 { margin-right: calc(80 * var(--wz, 1pt)); } .fusion-fi-40 { text-indent: calc(80 * var(--wz, 1pt)); } .fusion-hg-40 { text-indent: calc(-1 * 80 * var(--wz, 1pt)); }
.fusion-il-41 { margin-left: calc(82 * var(--wz, 1pt)); } .fusion-ir-41 { margin-right: calc(82 * var(--wz, 1pt)); } .fusion-fi-41 { text-indent: calc(82 * var(--wz, 1pt)); } .fusion-hg-41 { text-indent: calc(-1 * 82 * var(--wz, 1pt)); }
.fusion-il-42 { margin-left: calc(84 * var(--wz, 1pt)); } .fusion-ir-42 { margin-right: calc(84 * var(--wz, 1pt)); } .fusion-fi-42 { text-indent: calc(84 * var(--wz, 1pt)); } .fusion-hg-42 { text-indent: calc(-1 * 84 * var(--wz, 1pt)); }
.fusion-il-43 { margin-left: calc(86 * var(--wz, 1pt)); } .fusion-ir-43 { margin-right: calc(86 * var(--wz, 1pt)); } .fusion-fi-43 { text-indent: calc(86 * var(--wz, 1pt)); } .fusion-hg-43 { text-indent: calc(-1 * 86 * var(--wz, 1pt)); }
.fusion-il-44 { margin-left: calc(88 * var(--wz, 1pt)); } .fusion-ir-44 { margin-right: calc(88 * var(--wz, 1pt)); } .fusion-fi-44 { text-indent: calc(88 * var(--wz, 1pt)); } .fusion-hg-44 { text-indent: calc(-1 * 88 * var(--wz, 1pt)); }
.fusion-il-45 { margin-left: calc(90 * var(--wz, 1pt)); } .fusion-ir-45 { margin-right: calc(90 * var(--wz, 1pt)); } .fusion-fi-45 { text-indent: calc(90 * var(--wz, 1pt)); } .fusion-hg-45 { text-indent: calc(-1 * 90 * var(--wz, 1pt)); }
.fusion-il-46 { margin-left: calc(92 * var(--wz, 1pt)); } .fusion-ir-46 { margin-right: calc(92 * var(--wz, 1pt)); } .fusion-fi-46 { text-indent: calc(92 * var(--wz, 1pt)); } .fusion-hg-46 { text-indent: calc(-1 * 92 * var(--wz, 1pt)); }
.fusion-il-47 { margin-left: calc(94 * var(--wz, 1pt)); } .fusion-ir-47 { margin-right: calc(94 * var(--wz, 1pt)); } .fusion-fi-47 { text-indent: calc(94 * var(--wz, 1pt)); } .fusion-hg-47 { text-indent: calc(-1 * 94 * var(--wz, 1pt)); }
.fusion-il-48 { margin-left: calc(96 * var(--wz, 1pt)); } .fusion-ir-48 { margin-right: calc(96 * var(--wz, 1pt)); } .fusion-fi-48 { text-indent: calc(96 * var(--wz, 1pt)); } .fusion-hg-48 { text-indent: calc(-1 * 96 * var(--wz, 1pt)); }
.fusion-il-49 { margin-left: calc(98 * var(--wz, 1pt)); } .fusion-ir-49 { margin-right: calc(98 * var(--wz, 1pt)); } .fusion-fi-49 { text-indent: calc(98 * var(--wz, 1pt)); } .fusion-hg-49 { text-indent: calc(-1 * 98 * var(--wz, 1pt)); }
.fusion-il-50 { margin-left: calc(100 * var(--wz, 1pt)); } .fusion-ir-50 { margin-right: calc(100 * var(--wz, 1pt)); } .fusion-fi-50 { text-indent: calc(100 * var(--wz, 1pt)); } .fusion-hg-50 { text-indent: calc(-1 * 100 * var(--wz, 1pt)); }
.fusion-il-51 { margin-left: calc(102 * var(--wz, 1pt)); } .fusion-ir-51 { margin-right: calc(102 * var(--wz, 1pt)); } .fusion-fi-51 { text-indent: calc(102 * var(--wz, 1pt)); } .fusion-hg-51 { text-indent: calc(-1 * 102 * var(--wz, 1pt)); }
.fusion-il-52 { margin-left: calc(104 * var(--wz, 1pt)); } .fusion-ir-52 { margin-right: calc(104 * var(--wz, 1pt)); } .fusion-fi-52 { text-indent: calc(104 * var(--wz, 1pt)); } .fusion-hg-52 { text-indent: calc(-1 * 104 * var(--wz, 1pt)); }
.fusion-il-53 { margin-left: calc(106 * var(--wz, 1pt)); } .fusion-ir-53 { margin-right: calc(106 * var(--wz, 1pt)); } .fusion-fi-53 { text-indent: calc(106 * var(--wz, 1pt)); } .fusion-hg-53 { text-indent: calc(-1 * 106 * var(--wz, 1pt)); }
.fusion-il-54 { margin-left: calc(108 * var(--wz, 1pt)); } .fusion-ir-54 { margin-right: calc(108 * var(--wz, 1pt)); } .fusion-fi-54 { text-indent: calc(108 * var(--wz, 1pt)); } .fusion-hg-54 { text-indent: calc(-1 * 108 * var(--wz, 1pt)); }
.fusion-il-55 { margin-left: calc(110 * var(--wz, 1pt)); } .fusion-ir-55 { margin-right: calc(110 * var(--wz, 1pt)); } .fusion-fi-55 { text-indent: calc(110 * var(--wz, 1pt)); } .fusion-hg-55 { text-indent: calc(-1 * 110 * var(--wz, 1pt)); }
.fusion-il-56 { margin-left: calc(112 * var(--wz, 1pt)); } .fusion-ir-56 { margin-right: calc(112 * var(--wz, 1pt)); } .fusion-fi-56 { text-indent: calc(112 * var(--wz, 1pt)); } .fusion-hg-56 { text-indent: calc(-1 * 112 * var(--wz, 1pt)); }
.fusion-il-57 { margin-left: calc(114 * var(--wz, 1pt)); } .fusion-ir-57 { margin-right: calc(114 * var(--wz, 1pt)); } .fusion-fi-57 { text-indent: calc(114 * var(--wz, 1pt)); } .fusion-hg-57 { text-indent: calc(-1 * 114 * var(--wz, 1pt)); }
.fusion-il-58 { margin-left: calc(116 * var(--wz, 1pt)); } .fusion-ir-58 { margin-right: calc(116 * var(--wz, 1pt)); } .fusion-fi-58 { text-indent: calc(116 * var(--wz, 1pt)); } .fusion-hg-58 { text-indent: calc(-1 * 116 * var(--wz, 1pt)); }
.fusion-il-59 { margin-left: calc(118 * var(--wz, 1pt)); } .fusion-ir-59 { margin-right: calc(118 * var(--wz, 1pt)); } .fusion-fi-59 { text-indent: calc(118 * var(--wz, 1pt)); } .fusion-hg-59 { text-indent: calc(-1 * 118 * var(--wz, 1pt)); }
.fusion-il-60 { margin-left: calc(120 * var(--wz, 1pt)); } .fusion-ir-60 { margin-right: calc(120 * var(--wz, 1pt)); } .fusion-fi-60 { text-indent: calc(120 * var(--wz, 1pt)); } .fusion-hg-60 { text-indent: calc(-1 * 120 * var(--wz, 1pt)); }
.fusion-il-61 { margin-left: calc(122 * var(--wz, 1pt)); } .fusion-ir-61 { margin-right: calc(122 * var(--wz, 1pt)); } .fusion-fi-61 { text-indent: calc(122 * var(--wz, 1pt)); } .fusion-hg-61 { text-indent: calc(-1 * 122 * var(--wz, 1pt)); }
.fusion-il-62 { margin-left: calc(124 * var(--wz, 1pt)); } .fusion-ir-62 { margin-right: calc(124 * var(--wz, 1pt)); } .fusion-fi-62 { text-indent: calc(124 * var(--wz, 1pt)); } .fusion-hg-62 { text-indent: calc(-1 * 124 * var(--wz, 1pt)); }
.fusion-il-63 { margin-left: calc(126 * var(--wz, 1pt)); } .fusion-ir-63 { margin-right: calc(126 * var(--wz, 1pt)); } .fusion-fi-63 { text-indent: calc(126 * var(--wz, 1pt)); } .fusion-hg-63 { text-indent: calc(-1 * 126 * var(--wz, 1pt)); }
.fusion-il-64 { margin-left: calc(128 * var(--wz, 1pt)); } .fusion-ir-64 { margin-right: calc(128 * var(--wz, 1pt)); } .fusion-fi-64 { text-indent: calc(128 * var(--wz, 1pt)); } .fusion-hg-64 { text-indent: calc(-1 * 128 * var(--wz, 1pt)); }
.fusion-il-65 { margin-left: calc(130 * var(--wz, 1pt)); } .fusion-ir-65 { margin-right: calc(130 * var(--wz, 1pt)); } .fusion-fi-65 { text-indent: calc(130 * var(--wz, 1pt)); } .fusion-hg-65 { text-indent: calc(-1 * 130 * var(--wz, 1pt)); }
.fusion-il-66 { margin-left: calc(132 * var(--wz, 1pt)); } .fusion-ir-66 { margin-right: calc(132 * var(--wz, 1pt)); } .fusion-fi-66 { text-indent: calc(132 * var(--wz, 1pt)); } .fusion-hg-66 { text-indent: calc(-1 * 132 * var(--wz, 1pt)); }
.fusion-il-67 { margin-left: calc(134 * var(--wz, 1pt)); } .fusion-ir-67 { margin-right: calc(134 * var(--wz, 1pt)); } .fusion-fi-67 { text-indent: calc(134 * var(--wz, 1pt)); } .fusion-hg-67 { text-indent: calc(-1 * 134 * var(--wz, 1pt)); }
.fusion-il-68 { margin-left: calc(136 * var(--wz, 1pt)); } .fusion-ir-68 { margin-right: calc(136 * var(--wz, 1pt)); } .fusion-fi-68 { text-indent: calc(136 * var(--wz, 1pt)); } .fusion-hg-68 { text-indent: calc(-1 * 136 * var(--wz, 1pt)); }
.fusion-il-69 { margin-left: calc(138 * var(--wz, 1pt)); } .fusion-ir-69 { margin-right: calc(138 * var(--wz, 1pt)); } .fusion-fi-69 { text-indent: calc(138 * var(--wz, 1pt)); } .fusion-hg-69 { text-indent: calc(-1 * 138 * var(--wz, 1pt)); }
.fusion-il-70 { margin-left: calc(140 * var(--wz, 1pt)); } .fusion-ir-70 { margin-right: calc(140 * var(--wz, 1pt)); } .fusion-fi-70 { text-indent: calc(140 * var(--wz, 1pt)); } .fusion-hg-70 { text-indent: calc(-1 * 140 * var(--wz, 1pt)); }
.fusion-il-71 { margin-left: calc(142 * var(--wz, 1pt)); } .fusion-ir-71 { margin-right: calc(142 * var(--wz, 1pt)); } .fusion-fi-71 { text-indent: calc(142 * var(--wz, 1pt)); } .fusion-hg-71 { text-indent: calc(-1 * 142 * var(--wz, 1pt)); }
.fusion-il-72 { margin-left: calc(144 * var(--wz, 1pt)); } .fusion-ir-72 { margin-right: calc(144 * var(--wz, 1pt)); } .fusion-fi-72 { text-indent: calc(144 * var(--wz, 1pt)); } .fusion-hg-72 { text-indent: calc(-1 * 144 * var(--wz, 1pt)); }
.fusion-il-73 { margin-left: calc(146 * var(--wz, 1pt)); } .fusion-ir-73 { margin-right: calc(146 * var(--wz, 1pt)); } .fusion-fi-73 { text-indent: calc(146 * var(--wz, 1pt)); } .fusion-hg-73 { text-indent: calc(-1 * 146 * var(--wz, 1pt)); }
.fusion-il-74 { margin-left: calc(148 * var(--wz, 1pt)); } .fusion-ir-74 { margin-right: calc(148 * var(--wz, 1pt)); } .fusion-fi-74 { text-indent: calc(148 * var(--wz, 1pt)); } .fusion-hg-74 { text-indent: calc(-1 * 148 * var(--wz, 1pt)); }
.fusion-il-75 { margin-left: calc(150 * var(--wz, 1pt)); } .fusion-ir-75 { margin-right: calc(150 * var(--wz, 1pt)); } .fusion-fi-75 { text-indent: calc(150 * var(--wz, 1pt)); } .fusion-hg-75 { text-indent: calc(-1 * 150 * var(--wz, 1pt)); }
.fusion-il-76 { margin-left: calc(152 * var(--wz, 1pt)); } .fusion-ir-76 { margin-right: calc(152 * var(--wz, 1pt)); } .fusion-fi-76 { text-indent: calc(152 * var(--wz, 1pt)); } .fusion-hg-76 { text-indent: calc(-1 * 152 * var(--wz, 1pt)); }
.fusion-il-77 { margin-left: calc(154 * var(--wz, 1pt)); } .fusion-ir-77 { margin-right: calc(154 * var(--wz, 1pt)); } .fusion-fi-77 { text-indent: calc(154 * var(--wz, 1pt)); } .fusion-hg-77 { text-indent: calc(-1 * 154 * var(--wz, 1pt)); }
.fusion-il-78 { margin-left: calc(156 * var(--wz, 1pt)); } .fusion-ir-78 { margin-right: calc(156 * var(--wz, 1pt)); } .fusion-fi-78 { text-indent: calc(156 * var(--wz, 1pt)); } .fusion-hg-78 { text-indent: calc(-1 * 156 * var(--wz, 1pt)); }
.fusion-il-79 { margin-left: calc(158 * var(--wz, 1pt)); } .fusion-ir-79 { margin-right: calc(158 * var(--wz, 1pt)); } .fusion-fi-79 { text-indent: calc(158 * var(--wz, 1pt)); } .fusion-hg-79 { text-indent: calc(-1 * 158 * var(--wz, 1pt)); }
.fusion-il-80 { margin-left: calc(160 * var(--wz, 1pt)); } .fusion-ir-80 { margin-right: calc(160 * var(--wz, 1pt)); } .fusion-fi-80 { text-indent: calc(160 * var(--wz, 1pt)); } .fusion-hg-80 { text-indent: calc(-1 * 160 * var(--wz, 1pt)); }
.fusion-il-81 { margin-left: calc(162 * var(--wz, 1pt)); } .fusion-ir-81 { margin-right: calc(162 * var(--wz, 1pt)); } .fusion-fi-81 { text-indent: calc(162 * var(--wz, 1pt)); } .fusion-hg-81 { text-indent: calc(-1 * 162 * var(--wz, 1pt)); }
.fusion-il-82 { margin-left: calc(164 * var(--wz, 1pt)); } .fusion-ir-82 { margin-right: calc(164 * var(--wz, 1pt)); } .fusion-fi-82 { text-indent: calc(164 * var(--wz, 1pt)); } .fusion-hg-82 { text-indent: calc(-1 * 164 * var(--wz, 1pt)); }
.fusion-il-83 { margin-left: calc(166 * var(--wz, 1pt)); } .fusion-ir-83 { margin-right: calc(166 * var(--wz, 1pt)); } .fusion-fi-83 { text-indent: calc(166 * var(--wz, 1pt)); } .fusion-hg-83 { text-indent: calc(-1 * 166 * var(--wz, 1pt)); }
.fusion-il-84 { margin-left: calc(168 * var(--wz, 1pt)); } .fusion-ir-84 { margin-right: calc(168 * var(--wz, 1pt)); } .fusion-fi-84 { text-indent: calc(168 * var(--wz, 1pt)); } .fusion-hg-84 { text-indent: calc(-1 * 168 * var(--wz, 1pt)); }
.fusion-il-85 { margin-left: calc(170 * var(--wz, 1pt)); } .fusion-ir-85 { margin-right: calc(170 * var(--wz, 1pt)); } .fusion-fi-85 { text-indent: calc(170 * var(--wz, 1pt)); } .fusion-hg-85 { text-indent: calc(-1 * 170 * var(--wz, 1pt)); }
.fusion-il-86 { margin-left: calc(172 * var(--wz, 1pt)); } .fusion-ir-86 { margin-right: calc(172 * var(--wz, 1pt)); } .fusion-fi-86 { text-indent: calc(172 * var(--wz, 1pt)); } .fusion-hg-86 { text-indent: calc(-1 * 172 * var(--wz, 1pt)); }
.fusion-il-87 { margin-left: calc(174 * var(--wz, 1pt)); } .fusion-ir-87 { margin-right: calc(174 * var(--wz, 1pt)); } .fusion-fi-87 { text-indent: calc(174 * var(--wz, 1pt)); } .fusion-hg-87 { text-indent: calc(-1 * 174 * var(--wz, 1pt)); }
.fusion-il-88 { margin-left: calc(176 * var(--wz, 1pt)); } .fusion-ir-88 { margin-right: calc(176 * var(--wz, 1pt)); } .fusion-fi-88 { text-indent: calc(176 * var(--wz, 1pt)); } .fusion-hg-88 { text-indent: calc(-1 * 176 * var(--wz, 1pt)); }
.fusion-il-89 { margin-left: calc(178 * var(--wz, 1pt)); } .fusion-ir-89 { margin-right: calc(178 * var(--wz, 1pt)); } .fusion-fi-89 { text-indent: calc(178 * var(--wz, 1pt)); } .fusion-hg-89 { text-indent: calc(-1 * 178 * var(--wz, 1pt)); }
.fusion-il-90 { margin-left: calc(180 * var(--wz, 1pt)); } .fusion-ir-90 { margin-right: calc(180 * var(--wz, 1pt)); } .fusion-fi-90 { text-indent: calc(180 * var(--wz, 1pt)); } .fusion-hg-90 { text-indent: calc(-1 * 180 * var(--wz, 1pt)); }
.fusion-il-91 { margin-left: calc(182 * var(--wz, 1pt)); } .fusion-ir-91 { margin-right: calc(182 * var(--wz, 1pt)); } .fusion-fi-91 { text-indent: calc(182 * var(--wz, 1pt)); } .fusion-hg-91 { text-indent: calc(-1 * 182 * var(--wz, 1pt)); }
.fusion-il-92 { margin-left: calc(184 * var(--wz, 1pt)); } .fusion-ir-92 { margin-right: calc(184 * var(--wz, 1pt)); } .fusion-fi-92 { text-indent: calc(184 * var(--wz, 1pt)); } .fusion-hg-92 { text-indent: calc(-1 * 184 * var(--wz, 1pt)); }
.fusion-il-93 { margin-left: calc(186 * var(--wz, 1pt)); } .fusion-ir-93 { margin-right: calc(186 * var(--wz, 1pt)); } .fusion-fi-93 { text-indent: calc(186 * var(--wz, 1pt)); } .fusion-hg-93 { text-indent: calc(-1 * 186 * var(--wz, 1pt)); }
.fusion-il-94 { margin-left: calc(188 * var(--wz, 1pt)); } .fusion-ir-94 { margin-right: calc(188 * var(--wz, 1pt)); } .fusion-fi-94 { text-indent: calc(188 * var(--wz, 1pt)); } .fusion-hg-94 { text-indent: calc(-1 * 188 * var(--wz, 1pt)); }
.fusion-il-95 { margin-left: calc(190 * var(--wz, 1pt)); } .fusion-ir-95 { margin-right: calc(190 * var(--wz, 1pt)); } .fusion-fi-95 { text-indent: calc(190 * var(--wz, 1pt)); } .fusion-hg-95 { text-indent: calc(-1 * 190 * var(--wz, 1pt)); }
.fusion-il-96 { margin-left: calc(192 * var(--wz, 1pt)); } .fusion-ir-96 { margin-right: calc(192 * var(--wz, 1pt)); } .fusion-fi-96 { text-indent: calc(192 * var(--wz, 1pt)); } .fusion-hg-96 { text-indent: calc(-1 * 192 * var(--wz, 1pt)); }
.fusion-il-97 { margin-left: calc(194 * var(--wz, 1pt)); } .fusion-ir-97 { margin-right: calc(194 * var(--wz, 1pt)); } .fusion-fi-97 { text-indent: calc(194 * var(--wz, 1pt)); } .fusion-hg-97 { text-indent: calc(-1 * 194 * var(--wz, 1pt)); }
.fusion-il-98 { margin-left: calc(196 * var(--wz, 1pt)); } .fusion-ir-98 { margin-right: calc(196 * var(--wz, 1pt)); } .fusion-fi-98 { text-indent: calc(196 * var(--wz, 1pt)); } .fusion-hg-98 { text-indent: calc(-1 * 196 * var(--wz, 1pt)); }
.fusion-il-99 { margin-left: calc(198 * var(--wz, 1pt)); } .fusion-ir-99 { margin-right: calc(198 * var(--wz, 1pt)); } .fusion-fi-99 { text-indent: calc(198 * var(--wz, 1pt)); } .fusion-hg-99 { text-indent: calc(-1 * 198 * var(--wz, 1pt)); }
.fusion-il-100 { margin-left: calc(200 * var(--wz, 1pt)); } .fusion-ir-100 { margin-right: calc(200 * var(--wz, 1pt)); } .fusion-fi-100 { text-indent: calc(200 * var(--wz, 1pt)); } .fusion-hg-100 { text-indent: calc(-1 * 200 * var(--wz, 1pt)); }
.fusion-il-101 { margin-left: calc(202 * var(--wz, 1pt)); } .fusion-ir-101 { margin-right: calc(202 * var(--wz, 1pt)); } .fusion-fi-101 { text-indent: calc(202 * var(--wz, 1pt)); } .fusion-hg-101 { text-indent: calc(-1 * 202 * var(--wz, 1pt)); }
.fusion-il-102 { margin-left: calc(204 * var(--wz, 1pt)); } .fusion-ir-102 { margin-right: calc(204 * var(--wz, 1pt)); } .fusion-fi-102 { text-indent: calc(204 * var(--wz, 1pt)); } .fusion-hg-102 { text-indent: calc(-1 * 204 * var(--wz, 1pt)); }
.fusion-il-103 { margin-left: calc(206 * var(--wz, 1pt)); } .fusion-ir-103 { margin-right: calc(206 * var(--wz, 1pt)); } .fusion-fi-103 { text-indent: calc(206 * var(--wz, 1pt)); } .fusion-hg-103 { text-indent: calc(-1 * 206 * var(--wz, 1pt)); }
.fusion-il-104 { margin-left: calc(208 * var(--wz, 1pt)); } .fusion-ir-104 { margin-right: calc(208 * var(--wz, 1pt)); } .fusion-fi-104 { text-indent: calc(208 * var(--wz, 1pt)); } .fusion-hg-104 { text-indent: calc(-1 * 208 * var(--wz, 1pt)); }
.fusion-il-105 { margin-left: calc(210 * var(--wz, 1pt)); } .fusion-ir-105 { margin-right: calc(210 * var(--wz, 1pt)); } .fusion-fi-105 { text-indent: calc(210 * var(--wz, 1pt)); } .fusion-hg-105 { text-indent: calc(-1 * 210 * var(--wz, 1pt)); }
.fusion-il-106 { margin-left: calc(212 * var(--wz, 1pt)); } .fusion-ir-106 { margin-right: calc(212 * var(--wz, 1pt)); } .fusion-fi-106 { text-indent: calc(212 * var(--wz, 1pt)); } .fusion-hg-106 { text-indent: calc(-1 * 212 * var(--wz, 1pt)); }
.fusion-il-107 { margin-left: calc(214 * var(--wz, 1pt)); } .fusion-ir-107 { margin-right: calc(214 * var(--wz, 1pt)); } .fusion-fi-107 { text-indent: calc(214 * var(--wz, 1pt)); } .fusion-hg-107 { text-indent: calc(-1 * 214 * var(--wz, 1pt)); }
.fusion-il-108 { margin-left: calc(216 * var(--wz, 1pt)); } .fusion-ir-108 { margin-right: calc(216 * var(--wz, 1pt)); } .fusion-fi-108 { text-indent: calc(216 * var(--wz, 1pt)); } .fusion-hg-108 { text-indent: calc(-1 * 216 * var(--wz, 1pt)); }
.fusion-il-109 { margin-left: calc(218 * var(--wz, 1pt)); } .fusion-ir-109 { margin-right: calc(218 * var(--wz, 1pt)); } .fusion-fi-109 { text-indent: calc(218 * var(--wz, 1pt)); } .fusion-hg-109 { text-indent: calc(-1 * 218 * var(--wz, 1pt)); }
.fusion-il-110 { margin-left: calc(220 * var(--wz, 1pt)); } .fusion-ir-110 { margin-right: calc(220 * var(--wz, 1pt)); } .fusion-fi-110 { text-indent: calc(220 * var(--wz, 1pt)); } .fusion-hg-110 { text-indent: calc(-1 * 220 * var(--wz, 1pt)); }
.fusion-il-111 { margin-left: calc(222 * var(--wz, 1pt)); } .fusion-ir-111 { margin-right: calc(222 * var(--wz, 1pt)); } .fusion-fi-111 { text-indent: calc(222 * var(--wz, 1pt)); } .fusion-hg-111 { text-indent: calc(-1 * 222 * var(--wz, 1pt)); }
.fusion-il-112 { margin-left: calc(224 * var(--wz, 1pt)); } .fusion-ir-112 { margin-right: calc(224 * var(--wz, 1pt)); } .fusion-fi-112 { text-indent: calc(224 * var(--wz, 1pt)); } .fusion-hg-112 { text-indent: calc(-1 * 224 * var(--wz, 1pt)); }
.fusion-il-113 { margin-left: calc(226 * var(--wz, 1pt)); } .fusion-ir-113 { margin-right: calc(226 * var(--wz, 1pt)); } .fusion-fi-113 { text-indent: calc(226 * var(--wz, 1pt)); } .fusion-hg-113 { text-indent: calc(-1 * 226 * var(--wz, 1pt)); }
.fusion-il-114 { margin-left: calc(228 * var(--wz, 1pt)); } .fusion-ir-114 { margin-right: calc(228 * var(--wz, 1pt)); } .fusion-fi-114 { text-indent: calc(228 * var(--wz, 1pt)); } .fusion-hg-114 { text-indent: calc(-1 * 228 * var(--wz, 1pt)); }
.fusion-il-115 { margin-left: calc(230 * var(--wz, 1pt)); } .fusion-ir-115 { margin-right: calc(230 * var(--wz, 1pt)); } .fusion-fi-115 { text-indent: calc(230 * var(--wz, 1pt)); } .fusion-hg-115 { text-indent: calc(-1 * 230 * var(--wz, 1pt)); }
.fusion-il-116 { margin-left: calc(232 * var(--wz, 1pt)); } .fusion-ir-116 { margin-right: calc(232 * var(--wz, 1pt)); } .fusion-fi-116 { text-indent: calc(232 * var(--wz, 1pt)); } .fusion-hg-116 { text-indent: calc(-1 * 232 * var(--wz, 1pt)); }
.fusion-il-117 { margin-left: calc(234 * var(--wz, 1pt)); } .fusion-ir-117 { margin-right: calc(234 * var(--wz, 1pt)); } .fusion-fi-117 { text-indent: calc(234 * var(--wz, 1pt)); } .fusion-hg-117 { text-indent: calc(-1 * 234 * var(--wz, 1pt)); }
.fusion-il-118 { margin-left: calc(236 * var(--wz, 1pt)); } .fusion-ir-118 { margin-right: calc(236 * var(--wz, 1pt)); } .fusion-fi-118 { text-indent: calc(236 * var(--wz, 1pt)); } .fusion-hg-118 { text-indent: calc(-1 * 236 * var(--wz, 1pt)); }
.fusion-il-119 { margin-left: calc(238 * var(--wz, 1pt)); } .fusion-ir-119 { margin-right: calc(238 * var(--wz, 1pt)); } .fusion-fi-119 { text-indent: calc(238 * var(--wz, 1pt)); } .fusion-hg-119 { text-indent: calc(-1 * 238 * var(--wz, 1pt)); }
.fusion-il-120 { margin-left: calc(240 * var(--wz, 1pt)); } .fusion-ir-120 { margin-right: calc(240 * var(--wz, 1pt)); } .fusion-fi-120 { text-indent: calc(240 * var(--wz, 1pt)); } .fusion-hg-120 { text-indent: calc(-1 * 240 * var(--wz, 1pt)); }
.fusion-il-121 { margin-left: calc(242 * var(--wz, 1pt)); } .fusion-ir-121 { margin-right: calc(242 * var(--wz, 1pt)); } .fusion-fi-121 { text-indent: calc(242 * var(--wz, 1pt)); } .fusion-hg-121 { text-indent: calc(-1 * 242 * var(--wz, 1pt)); }
.fusion-il-122 { margin-left: calc(244 * var(--wz, 1pt)); } .fusion-ir-122 { margin-right: calc(244 * var(--wz, 1pt)); } .fusion-fi-122 { text-indent: calc(244 * var(--wz, 1pt)); } .fusion-hg-122 { text-indent: calc(-1 * 244 * var(--wz, 1pt)); }
.fusion-il-123 { margin-left: calc(246 * var(--wz, 1pt)); } .fusion-ir-123 { margin-right: calc(246 * var(--wz, 1pt)); } .fusion-fi-123 { text-indent: calc(246 * var(--wz, 1pt)); } .fusion-hg-123 { text-indent: calc(-1 * 246 * var(--wz, 1pt)); }
.fusion-il-124 { margin-left: calc(248 * var(--wz, 1pt)); } .fusion-ir-124 { margin-right: calc(248 * var(--wz, 1pt)); } .fusion-fi-124 { text-indent: calc(248 * var(--wz, 1pt)); } .fusion-hg-124 { text-indent: calc(-1 * 248 * var(--wz, 1pt)); }
.fusion-il-125 { margin-left: calc(250 * var(--wz, 1pt)); } .fusion-ir-125 { margin-right: calc(250 * var(--wz, 1pt)); } .fusion-fi-125 { text-indent: calc(250 * var(--wz, 1pt)); } .fusion-hg-125 { text-indent: calc(-1 * 250 * var(--wz, 1pt)); }
.fusion-il-126 { margin-left: calc(252 * var(--wz, 1pt)); } .fusion-ir-126 { margin-right: calc(252 * var(--wz, 1pt)); } .fusion-fi-126 { text-indent: calc(252 * var(--wz, 1pt)); } .fusion-hg-126 { text-indent: calc(-1 * 252 * var(--wz, 1pt)); }
.fusion-il-127 { margin-left: calc(254 * var(--wz, 1pt)); } .fusion-ir-127 { margin-right: calc(254 * var(--wz, 1pt)); } .fusion-fi-127 { text-indent: calc(254 * var(--wz, 1pt)); } .fusion-hg-127 { text-indent: calc(-1 * 254 * var(--wz, 1pt)); }
.fusion-il-128 { margin-left: calc(256 * var(--wz, 1pt)); } .fusion-ir-128 { margin-right: calc(256 * var(--wz, 1pt)); } .fusion-fi-128 { text-indent: calc(256 * var(--wz, 1pt)); } .fusion-hg-128 { text-indent: calc(-1 * 256 * var(--wz, 1pt)); }
.fusion-il-129 { margin-left: calc(258 * var(--wz, 1pt)); } .fusion-ir-129 { margin-right: calc(258 * var(--wz, 1pt)); } .fusion-fi-129 { text-indent: calc(258 * var(--wz, 1pt)); } .fusion-hg-129 { text-indent: calc(-1 * 258 * var(--wz, 1pt)); }
.fusion-il-130 { margin-left: calc(260 * var(--wz, 1pt)); } .fusion-ir-130 { margin-right: calc(260 * var(--wz, 1pt)); } .fusion-fi-130 { text-indent: calc(260 * var(--wz, 1pt)); } .fusion-hg-130 { text-indent: calc(-1 * 260 * var(--wz, 1pt)); }
.fusion-il-131 { margin-left: calc(262 * var(--wz, 1pt)); } .fusion-ir-131 { margin-right: calc(262 * var(--wz, 1pt)); } .fusion-fi-131 { text-indent: calc(262 * var(--wz, 1pt)); } .fusion-hg-131 { text-indent: calc(-1 * 262 * var(--wz, 1pt)); }
.fusion-il-132 { margin-left: calc(264 * var(--wz, 1pt)); } .fusion-ir-132 { margin-right: calc(264 * var(--wz, 1pt)); } .fusion-fi-132 { text-indent: calc(264 * var(--wz, 1pt)); } .fusion-hg-132 { text-indent: calc(-1 * 264 * var(--wz, 1pt)); }
.fusion-il-133 { margin-left: calc(266 * var(--wz, 1pt)); } .fusion-ir-133 { margin-right: calc(266 * var(--wz, 1pt)); } .fusion-fi-133 { text-indent: calc(266 * var(--wz, 1pt)); } .fusion-hg-133 { text-indent: calc(-1 * 266 * var(--wz, 1pt)); }
.fusion-il-134 { margin-left: calc(268 * var(--wz, 1pt)); } .fusion-ir-134 { margin-right: calc(268 * var(--wz, 1pt)); } .fusion-fi-134 { text-indent: calc(268 * var(--wz, 1pt)); } .fusion-hg-134 { text-indent: calc(-1 * 268 * var(--wz, 1pt)); }
.fusion-il-135 { margin-left: calc(270 * var(--wz, 1pt)); } .fusion-ir-135 { margin-right: calc(270 * var(--wz, 1pt)); } .fusion-fi-135 { text-indent: calc(270 * var(--wz, 1pt)); } .fusion-hg-135 { text-indent: calc(-1 * 270 * var(--wz, 1pt)); }
.fusion-il-136 { margin-left: calc(272 * var(--wz, 1pt)); } .fusion-ir-136 { margin-right: calc(272 * var(--wz, 1pt)); } .fusion-fi-136 { text-indent: calc(272 * var(--wz, 1pt)); } .fusion-hg-136 { text-indent: calc(-1 * 272 * var(--wz, 1pt)); }
.fusion-il-137 { margin-left: calc(274 * var(--wz, 1pt)); } .fusion-ir-137 { margin-right: calc(274 * var(--wz, 1pt)); } .fusion-fi-137 { text-indent: calc(274 * var(--wz, 1pt)); } .fusion-hg-137 { text-indent: calc(-1 * 274 * var(--wz, 1pt)); }
.fusion-il-138 { margin-left: calc(276 * var(--wz, 1pt)); } .fusion-ir-138 { margin-right: calc(276 * var(--wz, 1pt)); } .fusion-fi-138 { text-indent: calc(276 * var(--wz, 1pt)); } .fusion-hg-138 { text-indent: calc(-1 * 276 * var(--wz, 1pt)); }
.fusion-il-139 { margin-left: calc(278 * var(--wz, 1pt)); } .fusion-ir-139 { margin-right: calc(278 * var(--wz, 1pt)); } .fusion-fi-139 { text-indent: calc(278 * var(--wz, 1pt)); } .fusion-hg-139 { text-indent: calc(-1 * 278 * var(--wz, 1pt)); }
.fusion-il-140 { margin-left: calc(280 * var(--wz, 1pt)); } .fusion-ir-140 { margin-right: calc(280 * var(--wz, 1pt)); } .fusion-fi-140 { text-indent: calc(280 * var(--wz, 1pt)); } .fusion-hg-140 { text-indent: calc(-1 * 280 * var(--wz, 1pt)); }
.fusion-il-141 { margin-left: calc(282 * var(--wz, 1pt)); } .fusion-ir-141 { margin-right: calc(282 * var(--wz, 1pt)); } .fusion-fi-141 { text-indent: calc(282 * var(--wz, 1pt)); } .fusion-hg-141 { text-indent: calc(-1 * 282 * var(--wz, 1pt)); }
.fusion-il-142 { margin-left: calc(284 * var(--wz, 1pt)); } .fusion-ir-142 { margin-right: calc(284 * var(--wz, 1pt)); } .fusion-fi-142 { text-indent: calc(284 * var(--wz, 1pt)); } .fusion-hg-142 { text-indent: calc(-1 * 284 * var(--wz, 1pt)); }
.fusion-il-143 { margin-left: calc(286 * var(--wz, 1pt)); } .fusion-ir-143 { margin-right: calc(286 * var(--wz, 1pt)); } .fusion-fi-143 { text-indent: calc(286 * var(--wz, 1pt)); } .fusion-hg-143 { text-indent: calc(-1 * 286 * var(--wz, 1pt)); }
.fusion-il-144 { margin-left: calc(288 * var(--wz, 1pt)); } .fusion-ir-144 { margin-right: calc(288 * var(--wz, 1pt)); } .fusion-fi-144 { text-indent: calc(288 * var(--wz, 1pt)); } .fusion-hg-144 { text-indent: calc(-1 * 288 * var(--wz, 1pt)); }
.fusion-word .fusion-table-w { max-height: none; width: auto; max-width: 100%; border: 0; border-radius: 0; }
.fusion-word .fusion-table { font-size: inherit; border-collapse: collapse; border-spacing: 0; }
@property --wzl { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --wzr { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes wz-edge { 0% { --wzl: 0px; --wzr: 14px; } 4% { --wzl: 14px; --wzr: 14px; } 96% { --wzl: 14px; --wzr: 14px; } 100% { --wzl: 14px; --wzr: 0px; } }
@supports (animation-timeline: scroll()) { .fusion-word .fusion-table-w { animation: wz-edge linear both; animation-timeline: scroll(self inline); mask-image: linear-gradient(to right, transparent 0, #000 var(--wzl), #000 calc(100% - var(--wzr)), transparent 100%); } .fusion-word .fusion-table-w:focus-visible { mask-image: none; } }
.fusion-word .fusion-table thead th { position: static; background: none; font-weight: inherit; }
.fusion-word .fusion-table tbody tr:nth-child(even) td { background: none; }
.fusion-word .fusion-table :is(th, td) { padding: calc(1 * var(--wz, 1pt)) calc(5.4 * var(--wz, 1pt)); border: 0; vertical-align: top; text-align: left; }
.fusion-word .fusion-table :is(th, td).fusion-ta-r { text-align: right; } .fusion-word .fusion-table :is(th, td).fusion-ta-c { text-align: center; }
.fusion-word .fusion-table.fusion-fixed { table-layout: auto; }
.fusion-word .fusion-table :is(th, td) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.fusion-word .fusion-table.fusion-nc-1 { min-width: calc(48 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-2 { min-width: calc(96 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-3 { min-width: calc(144 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-4 { min-width: calc(192 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-5 { min-width: calc(240 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-6 { min-width: calc(288 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-7 { min-width: calc(336 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-8 { min-width: calc(384 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-9 { min-width: calc(432 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-10 { min-width: calc(480 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-11 { min-width: calc(528 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-12 { min-width: calc(576 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-13 { min-width: calc(624 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-14 { min-width: calc(672 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-15 { min-width: calc(720 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-16 { min-width: calc(768 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-17 { min-width: calc(816 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-18 { min-width: calc(864 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-19 { min-width: calc(912 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-20 { min-width: calc(960 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-21 { min-width: calc(1008 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-22 { min-width: calc(1056 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-23 { min-width: calc(1104 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-24 { min-width: calc(1152 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-25 { min-width: calc(1200 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-26 { min-width: calc(1248 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-27 { min-width: calc(1296 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-28 { min-width: calc(1344 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-29 { min-width: calc(1392 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-30 { min-width: calc(1440 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-31 { min-width: calc(1488 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-32 { min-width: calc(1536 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-33 { min-width: calc(1584 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-34 { min-width: calc(1632 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-35 { min-width: calc(1680 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-36 { min-width: calc(1728 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-37 { min-width: calc(1776 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-38 { min-width: calc(1824 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-39 { min-width: calc(1872 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-40 { min-width: calc(1920 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-41 { min-width: calc(1968 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-42 { min-width: calc(2016 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-43 { min-width: calc(2064 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-44 { min-width: calc(2112 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-45 { min-width: calc(2160 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-46 { min-width: calc(2208 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-47 { min-width: calc(2256 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-48 { min-width: calc(2304 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-49 { min-width: calc(2352 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-50 { min-width: calc(2400 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-51 { min-width: calc(2448 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-52 { min-width: calc(2496 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-53 { min-width: calc(2544 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-54 { min-width: calc(2592 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-55 { min-width: calc(2640 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-56 { min-width: calc(2688 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-57 { min-width: calc(2736 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-58 { min-width: calc(2784 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-59 { min-width: calc(2832 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-60 { min-width: calc(2880 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-61 { min-width: calc(2928 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-62 { min-width: calc(2976 * var(--wz, 1pt)); }
.fusion-word .fusion-table.fusion-nc-63 { min-width: calc(3024 * var(--wz, 1pt)); }
.fusion-tw-1 { width: 1%; } .fusion-cw-1 { width: 1%; }
.fusion-tw-2 { width: 2%; } .fusion-cw-2 { width: 2%; }
.fusion-tw-3 { width: 3%; } .fusion-cw-3 { width: 3%; }
.fusion-tw-4 { width: 4%; } .fusion-cw-4 { width: 4%; }
.fusion-tw-5 { width: 5%; } .fusion-cw-5 { width: 5%; }
.fusion-tw-6 { width: 6%; } .fusion-cw-6 { width: 6%; }
.fusion-tw-7 { width: 7%; } .fusion-cw-7 { width: 7%; }
.fusion-tw-8 { width: 8%; } .fusion-cw-8 { width: 8%; }
.fusion-tw-9 { width: 9%; } .fusion-cw-9 { width: 9%; }
.fusion-tw-10 { width: 10%; } .fusion-cw-10 { width: 10%; }
.fusion-tw-11 { width: 11%; } .fusion-cw-11 { width: 11%; }
.fusion-tw-12 { width: 12%; } .fusion-cw-12 { width: 12%; }
.fusion-tw-13 { width: 13%; } .fusion-cw-13 { width: 13%; }
.fusion-tw-14 { width: 14%; } .fusion-cw-14 { width: 14%; }
.fusion-tw-15 { width: 15%; } .fusion-cw-15 { width: 15%; }
.fusion-tw-16 { width: 16%; } .fusion-cw-16 { width: 16%; }
.fusion-tw-17 { width: 17%; } .fusion-cw-17 { width: 17%; }
.fusion-tw-18 { width: 18%; } .fusion-cw-18 { width: 18%; }
.fusion-tw-19 { width: 19%; } .fusion-cw-19 { width: 19%; }
.fusion-tw-20 { width: 20%; } .fusion-cw-20 { width: 20%; }
.fusion-tw-21 { width: 21%; } .fusion-cw-21 { width: 21%; }
.fusion-tw-22 { width: 22%; } .fusion-cw-22 { width: 22%; }
.fusion-tw-23 { width: 23%; } .fusion-cw-23 { width: 23%; }
.fusion-tw-24 { width: 24%; } .fusion-cw-24 { width: 24%; }
.fusion-tw-25 { width: 25%; } .fusion-cw-25 { width: 25%; }
.fusion-tw-26 { width: 26%; } .fusion-cw-26 { width: 26%; }
.fusion-tw-27 { width: 27%; } .fusion-cw-27 { width: 27%; }
.fusion-tw-28 { width: 28%; } .fusion-cw-28 { width: 28%; }
.fusion-tw-29 { width: 29%; } .fusion-cw-29 { width: 29%; }
.fusion-tw-30 { width: 30%; } .fusion-cw-30 { width: 30%; }
.fusion-tw-31 { width: 31%; } .fusion-cw-31 { width: 31%; }
.fusion-tw-32 { width: 32%; } .fusion-cw-32 { width: 32%; }
.fusion-tw-33 { width: 33%; } .fusion-cw-33 { width: 33%; }
.fusion-tw-34 { width: 34%; } .fusion-cw-34 { width: 34%; }
.fusion-tw-35 { width: 35%; } .fusion-cw-35 { width: 35%; }
.fusion-tw-36 { width: 36%; } .fusion-cw-36 { width: 36%; }
.fusion-tw-37 { width: 37%; } .fusion-cw-37 { width: 37%; }
.fusion-tw-38 { width: 38%; } .fusion-cw-38 { width: 38%; }
.fusion-tw-39 { width: 39%; } .fusion-cw-39 { width: 39%; }
.fusion-tw-40 { width: 40%; } .fusion-cw-40 { width: 40%; }
.fusion-tw-41 { width: 41%; } .fusion-cw-41 { width: 41%; }
.fusion-tw-42 { width: 42%; } .fusion-cw-42 { width: 42%; }
.fusion-tw-43 { width: 43%; } .fusion-cw-43 { width: 43%; }
.fusion-tw-44 { width: 44%; } .fusion-cw-44 { width: 44%; }
.fusion-tw-45 { width: 45%; } .fusion-cw-45 { width: 45%; }
.fusion-tw-46 { width: 46%; } .fusion-cw-46 { width: 46%; }
.fusion-tw-47 { width: 47%; } .fusion-cw-47 { width: 47%; }
.fusion-tw-48 { width: 48%; } .fusion-cw-48 { width: 48%; }
.fusion-tw-49 { width: 49%; } .fusion-cw-49 { width: 49%; }
.fusion-tw-50 { width: 50%; } .fusion-cw-50 { width: 50%; }
.fusion-tw-51 { width: 51%; } .fusion-cw-51 { width: 51%; }
.fusion-tw-52 { width: 52%; } .fusion-cw-52 { width: 52%; }
.fusion-tw-53 { width: 53%; } .fusion-cw-53 { width: 53%; }
.fusion-tw-54 { width: 54%; } .fusion-cw-54 { width: 54%; }
.fusion-tw-55 { width: 55%; } .fusion-cw-55 { width: 55%; }
.fusion-tw-56 { width: 56%; } .fusion-cw-56 { width: 56%; }
.fusion-tw-57 { width: 57%; } .fusion-cw-57 { width: 57%; }
.fusion-tw-58 { width: 58%; } .fusion-cw-58 { width: 58%; }
.fusion-tw-59 { width: 59%; } .fusion-cw-59 { width: 59%; }
.fusion-tw-60 { width: 60%; } .fusion-cw-60 { width: 60%; }
.fusion-tw-61 { width: 61%; } .fusion-cw-61 { width: 61%; }
.fusion-tw-62 { width: 62%; } .fusion-cw-62 { width: 62%; }
.fusion-tw-63 { width: 63%; } .fusion-cw-63 { width: 63%; }
.fusion-tw-64 { width: 64%; } .fusion-cw-64 { width: 64%; }
.fusion-tw-65 { width: 65%; } .fusion-cw-65 { width: 65%; }
.fusion-tw-66 { width: 66%; } .fusion-cw-66 { width: 66%; }
.fusion-tw-67 { width: 67%; } .fusion-cw-67 { width: 67%; }
.fusion-tw-68 { width: 68%; } .fusion-cw-68 { width: 68%; }
.fusion-tw-69 { width: 69%; } .fusion-cw-69 { width: 69%; }
.fusion-tw-70 { width: 70%; } .fusion-cw-70 { width: 70%; }
.fusion-tw-71 { width: 71%; } .fusion-cw-71 { width: 71%; }
.fusion-tw-72 { width: 72%; } .fusion-cw-72 { width: 72%; }
.fusion-tw-73 { width: 73%; } .fusion-cw-73 { width: 73%; }
.fusion-tw-74 { width: 74%; } .fusion-cw-74 { width: 74%; }
.fusion-tw-75 { width: 75%; } .fusion-cw-75 { width: 75%; }
.fusion-tw-76 { width: 76%; } .fusion-cw-76 { width: 76%; }
.fusion-tw-77 { width: 77%; } .fusion-cw-77 { width: 77%; }
.fusion-tw-78 { width: 78%; } .fusion-cw-78 { width: 78%; }
.fusion-tw-79 { width: 79%; } .fusion-cw-79 { width: 79%; }
.fusion-tw-80 { width: 80%; } .fusion-cw-80 { width: 80%; }
.fusion-tw-81 { width: 81%; } .fusion-cw-81 { width: 81%; }
.fusion-tw-82 { width: 82%; } .fusion-cw-82 { width: 82%; }
.fusion-tw-83 { width: 83%; } .fusion-cw-83 { width: 83%; }
.fusion-tw-84 { width: 84%; } .fusion-cw-84 { width: 84%; }
.fusion-tw-85 { width: 85%; } .fusion-cw-85 { width: 85%; }
.fusion-tw-86 { width: 86%; } .fusion-cw-86 { width: 86%; }
.fusion-tw-87 { width: 87%; } .fusion-cw-87 { width: 87%; }
.fusion-tw-88 { width: 88%; } .fusion-cw-88 { width: 88%; }
.fusion-tw-89 { width: 89%; } .fusion-cw-89 { width: 89%; }
.fusion-tw-90 { width: 90%; } .fusion-cw-90 { width: 90%; }
.fusion-tw-91 { width: 91%; } .fusion-cw-91 { width: 91%; }
.fusion-tw-92 { width: 92%; } .fusion-cw-92 { width: 92%; }
.fusion-tw-93 { width: 93%; } .fusion-cw-93 { width: 93%; }
.fusion-tw-94 { width: 94%; } .fusion-cw-94 { width: 94%; }
.fusion-tw-95 { width: 95%; } .fusion-cw-95 { width: 95%; }
.fusion-tw-96 { width: 96%; } .fusion-cw-96 { width: 96%; }
.fusion-tw-97 { width: 97%; } .fusion-cw-97 { width: 97%; }
.fusion-tw-98 { width: 98%; } .fusion-cw-98 { width: 98%; }
.fusion-tw-99 { width: 99%; } .fusion-cw-99 { width: 99%; }
.fusion-tw-100 { width: 100%; } .fusion-cw-100 { width: 100%; }
.fusion-word { --wbc: currentColor; }
.fusion-word .fusion-table.fusion-tbo { border: 1px solid var(--pg-table-line, var(--wbc)); }
.fusion-word .fusion-table.fusion-tbh :is(th, td) { border-top: 1px solid var(--pg-table-line, var(--wbc)); }
.fusion-word .fusion-table.fusion-tbv :is(th, td) { border-left: 1px solid var(--pg-table-line, var(--wbc)); }
.fusion-word .fusion-table.fusion-tbo.fusion-tbv :is(th, td):first-child { border-left: 0; }
.fusion-word .fusion-table.fusion-tbo.fusion-tbh tr:first-child > :is(th, td) { border-top: 0; }
.fusion-word .fusion-table.fusion-tbk { border-width: 2px; }
.fusion-bc-000000 { --wbc: #000000; } .fusion-fl-000000 { --wf: #000000; --wfi: #ffffff; }
.fusion-bc-000033 { --wbc: #000033; } .fusion-fl-000033 { --wf: #000033; --wfi: #ffffff; }
.fusion-bc-000066 { --wbc: #000066; } .fusion-fl-000066 { --wf: #000066; --wfi: #ffffff; }
.fusion-bc-000099 { --wbc: #000099; } .fusion-fl-000099 { --wf: #000099; --wfi: #ffffff; }
.fusion-bc-0000cc { --wbc: #0000cc; } .fusion-fl-0000cc { --wf: #0000cc; --wfi: #ffffff; }
.fusion-bc-0000ff { --wbc: #0000ff; } .fusion-fl-0000ff { --wf: #0000ff; --wfi: #ffffff; }
.fusion-bc-003300 { --wbc: #003300; } .fusion-fl-003300 { --wf: #003300; --wfi: #ffffff; }
.fusion-bc-003333 { --wbc: #003333; } .fusion-fl-003333 { --wf: #003333; --wfi: #ffffff; }
.fusion-bc-003366 { --wbc: #003366; } .fusion-fl-003366 { --wf: #003366; --wfi: #ffffff; }
.fusion-bc-003399 { --wbc: #003399; } .fusion-fl-003399 { --wf: #003399; --wfi: #ffffff; }
.fusion-bc-0033cc { --wbc: #0033cc; } .fusion-fl-0033cc { --wf: #0033cc; --wfi: #ffffff; }
.fusion-bc-0033ff { --wbc: #0033ff; } .fusion-fl-0033ff { --wf: #0033ff; --wfi: #ffffff; }
.fusion-bc-006600 { --wbc: #006600; } .fusion-fl-006600 { --wf: #006600; --wfi: #ffffff; }
.fusion-bc-006633 { --wbc: #006633; } .fusion-fl-006633 { --wf: #006633; --wfi: #ffffff; }
.fusion-bc-006666 { --wbc: #006666; } .fusion-fl-006666 { --wf: #006666; --wfi: #ffffff; }
.fusion-bc-006699 { --wbc: #006699; } .fusion-fl-006699 { --wf: #006699; --wfi: #ffffff; }
.fusion-bc-0066cc { --wbc: #0066cc; } .fusion-fl-0066cc { --wf: #0066cc; --wfi: #ffffff; }
.fusion-bc-0066ff { --wbc: #0066ff; } .fusion-fl-0066ff { --wf: #0066ff; --wfi: #ffffff; }
.fusion-bc-009900 { --wbc: #009900; } .fusion-fl-009900 { --wf: #009900; --wfi: #000000; }
.fusion-bc-009933 { --wbc: #009933; } .fusion-fl-009933 { --wf: #009933; --wfi: #000000; }
.fusion-bc-009966 { --wbc: #009966; } .fusion-fl-009966 { --wf: #009966; --wfi: #000000; }
.fusion-bc-009999 { --wbc: #009999; } .fusion-fl-009999 { --wf: #009999; --wfi: #000000; }
.fusion-bc-0099cc { --wbc: #0099cc; } .fusion-fl-0099cc { --wf: #0099cc; --wfi: #000000; }
.fusion-bc-0099ff { --wbc: #0099ff; } .fusion-fl-0099ff { --wf: #0099ff; --wfi: #000000; }
.fusion-bc-00cc00 { --wbc: #00cc00; } .fusion-fl-00cc00 { --wf: #00cc00; --wfi: #000000; }
.fusion-bc-00cc33 { --wbc: #00cc33; } .fusion-fl-00cc33 { --wf: #00cc33; --wfi: #000000; }
.fusion-bc-00cc66 { --wbc: #00cc66; } .fusion-fl-00cc66 { --wf: #00cc66; --wfi: #000000; }
.fusion-bc-00cc99 { --wbc: #00cc99; } .fusion-fl-00cc99 { --wf: #00cc99; --wfi: #000000; }
.fusion-bc-00cccc { --wbc: #00cccc; } .fusion-fl-00cccc { --wf: #00cccc; --wfi: #000000; }
.fusion-bc-00ccff { --wbc: #00ccff; } .fusion-fl-00ccff { --wf: #00ccff; --wfi: #000000; }
.fusion-bc-00ff00 { --wbc: #00ff00; } .fusion-fl-00ff00 { --wf: #00ff00; --wfi: #000000; }
.fusion-bc-00ff33 { --wbc: #00ff33; } .fusion-fl-00ff33 { --wf: #00ff33; --wfi: #000000; }
.fusion-bc-00ff66 { --wbc: #00ff66; } .fusion-fl-00ff66 { --wf: #00ff66; --wfi: #000000; }
.fusion-bc-00ff99 { --wbc: #00ff99; } .fusion-fl-00ff99 { --wf: #00ff99; --wfi: #000000; }
.fusion-bc-00ffcc { --wbc: #00ffcc; } .fusion-fl-00ffcc { --wf: #00ffcc; --wfi: #000000; }
.fusion-bc-00ffff { --wbc: #00ffff; } .fusion-fl-00ffff { --wf: #00ffff; --wfi: #000000; }
.fusion-bc-330000 { --wbc: #330000; } .fusion-fl-330000 { --wf: #330000; --wfi: #ffffff; }
.fusion-bc-330033 { --wbc: #330033; } .fusion-fl-330033 { --wf: #330033; --wfi: #ffffff; }
.fusion-bc-330066 { --wbc: #330066; } .fusion-fl-330066 { --wf: #330066; --wfi: #ffffff; }
.fusion-bc-330099 { --wbc: #330099; } .fusion-fl-330099 { --wf: #330099; --wfi: #ffffff; }
.fusion-bc-3300cc { --wbc: #3300cc; } .fusion-fl-3300cc { --wf: #3300cc; --wfi: #ffffff; }
.fusion-bc-3300ff { --wbc: #3300ff; } .fusion-fl-3300ff { --wf: #3300ff; --wfi: #ffffff; }
.fusion-bc-333300 { --wbc: #333300; } .fusion-fl-333300 { --wf: #333300; --wfi: #ffffff; }
.fusion-bc-333333 { --wbc: #333333; } .fusion-fl-333333 { --wf: #333333; --wfi: #ffffff; }
.fusion-bc-333366 { --wbc: #333366; } .fusion-fl-333366 { --wf: #333366; --wfi: #ffffff; }
.fusion-bc-333399 { --wbc: #333399; } .fusion-fl-333399 { --wf: #333399; --wfi: #ffffff; }
.fusion-bc-3333cc { --wbc: #3333cc; } .fusion-fl-3333cc { --wf: #3333cc; --wfi: #ffffff; }
.fusion-bc-3333ff { --wbc: #3333ff; } .fusion-fl-3333ff { --wf: #3333ff; --wfi: #ffffff; }
.fusion-bc-336600 { --wbc: #336600; } .fusion-fl-336600 { --wf: #336600; --wfi: #ffffff; }
.fusion-bc-336633 { --wbc: #336633; } .fusion-fl-336633 { --wf: #336633; --wfi: #ffffff; }
.fusion-bc-336666 { --wbc: #336666; } .fusion-fl-336666 { --wf: #336666; --wfi: #ffffff; }
.fusion-bc-336699 { --wbc: #336699; } .fusion-fl-336699 { --wf: #336699; --wfi: #ffffff; }
.fusion-bc-3366cc { --wbc: #3366cc; } .fusion-fl-3366cc { --wf: #3366cc; --wfi: #ffffff; }
.fusion-bc-3366ff { --wbc: #3366ff; } .fusion-fl-3366ff { --wf: #3366ff; --wfi: #ffffff; }
.fusion-bc-339900 { --wbc: #339900; } .fusion-fl-339900 { --wf: #339900; --wfi: #000000; }
.fusion-bc-339933 { --wbc: #339933; } .fusion-fl-339933 { --wf: #339933; --wfi: #000000; }
.fusion-bc-339966 { --wbc: #339966; } .fusion-fl-339966 { --wf: #339966; --wfi: #000000; }
.fusion-bc-339999 { --wbc: #339999; } .fusion-fl-339999 { --wf: #339999; --wfi: #000000; }
.fusion-bc-3399cc { --wbc: #3399cc; } .fusion-fl-3399cc { --wf: #3399cc; --wfi: #000000; }
.fusion-bc-3399ff { --wbc: #3399ff; } .fusion-fl-3399ff { --wf: #3399ff; --wfi: #000000; }
.fusion-bc-33cc00 { --wbc: #33cc00; } .fusion-fl-33cc00 { --wf: #33cc00; --wfi: #000000; }
.fusion-bc-33cc33 { --wbc: #33cc33; } .fusion-fl-33cc33 { --wf: #33cc33; --wfi: #000000; }
.fusion-bc-33cc66 { --wbc: #33cc66; } .fusion-fl-33cc66 { --wf: #33cc66; --wfi: #000000; }
.fusion-bc-33cc99 { --wbc: #33cc99; } .fusion-fl-33cc99 { --wf: #33cc99; --wfi: #000000; }
.fusion-bc-33cccc { --wbc: #33cccc; } .fusion-fl-33cccc { --wf: #33cccc; --wfi: #000000; }
.fusion-bc-33ccff { --wbc: #33ccff; } .fusion-fl-33ccff { --wf: #33ccff; --wfi: #000000; }
.fusion-bc-33ff00 { --wbc: #33ff00; } .fusion-fl-33ff00 { --wf: #33ff00; --wfi: #000000; }
.fusion-bc-33ff33 { --wbc: #33ff33; } .fusion-fl-33ff33 { --wf: #33ff33; --wfi: #000000; }
.fusion-bc-33ff66 { --wbc: #33ff66; } .fusion-fl-33ff66 { --wf: #33ff66; --wfi: #000000; }
.fusion-bc-33ff99 { --wbc: #33ff99; } .fusion-fl-33ff99 { --wf: #33ff99; --wfi: #000000; }
.fusion-bc-33ffcc { --wbc: #33ffcc; } .fusion-fl-33ffcc { --wf: #33ffcc; --wfi: #000000; }
.fusion-bc-33ffff { --wbc: #33ffff; } .fusion-fl-33ffff { --wf: #33ffff; --wfi: #000000; }
.fusion-bc-660000 { --wbc: #660000; } .fusion-fl-660000 { --wf: #660000; --wfi: #ffffff; }
.fusion-bc-660033 { --wbc: #660033; } .fusion-fl-660033 { --wf: #660033; --wfi: #ffffff; }
.fusion-bc-660066 { --wbc: #660066; } .fusion-fl-660066 { --wf: #660066; --wfi: #ffffff; }
.fusion-bc-660099 { --wbc: #660099; } .fusion-fl-660099 { --wf: #660099; --wfi: #ffffff; }
.fusion-bc-6600cc { --wbc: #6600cc; } .fusion-fl-6600cc { --wf: #6600cc; --wfi: #ffffff; }
.fusion-bc-6600ff { --wbc: #6600ff; } .fusion-fl-6600ff { --wf: #6600ff; --wfi: #ffffff; }
.fusion-bc-663300 { --wbc: #663300; } .fusion-fl-663300 { --wf: #663300; --wfi: #ffffff; }
.fusion-bc-663333 { --wbc: #663333; } .fusion-fl-663333 { --wf: #663333; --wfi: #ffffff; }
.fusion-bc-663366 { --wbc: #663366; } .fusion-fl-663366 { --wf: #663366; --wfi: #ffffff; }
.fusion-bc-663399 { --wbc: #663399; } .fusion-fl-663399 { --wf: #663399; --wfi: #ffffff; }
.fusion-bc-6633cc { --wbc: #6633cc; } .fusion-fl-6633cc { --wf: #6633cc; --wfi: #ffffff; }
.fusion-bc-6633ff { --wbc: #6633ff; } .fusion-fl-6633ff { --wf: #6633ff; --wfi: #ffffff; }
.fusion-bc-666600 { --wbc: #666600; } .fusion-fl-666600 { --wf: #666600; --wfi: #ffffff; }
.fusion-bc-666633 { --wbc: #666633; } .fusion-fl-666633 { --wf: #666633; --wfi: #ffffff; }
.fusion-bc-666666 { --wbc: #666666; } .fusion-fl-666666 { --wf: #666666; --wfi: #ffffff; }
.fusion-bc-666699 { --wbc: #666699; } .fusion-fl-666699 { --wf: #666699; --wfi: #ffffff; }
.fusion-bc-6666cc { --wbc: #6666cc; } .fusion-fl-6666cc { --wf: #6666cc; --wfi: #ffffff; }
.fusion-bc-6666ff { --wbc: #6666ff; } .fusion-fl-6666ff { --wf: #6666ff; --wfi: #000000; }
.fusion-bc-669900 { --wbc: #669900; } .fusion-fl-669900 { --wf: #669900; --wfi: #000000; }
.fusion-bc-669933 { --wbc: #669933; } .fusion-fl-669933 { --wf: #669933; --wfi: #000000; }
.fusion-bc-669966 { --wbc: #669966; } .fusion-fl-669966 { --wf: #669966; --wfi: #000000; }
.fusion-bc-669999 { --wbc: #669999; } .fusion-fl-669999 { --wf: #669999; --wfi: #000000; }
.fusion-bc-6699cc { --wbc: #6699cc; } .fusion-fl-6699cc { --wf: #6699cc; --wfi: #000000; }
.fusion-bc-6699ff { --wbc: #6699ff; } .fusion-fl-6699ff { --wf: #6699ff; --wfi: #000000; }
.fusion-bc-66cc00 { --wbc: #66cc00; } .fusion-fl-66cc00 { --wf: #66cc00; --wfi: #000000; }
.fusion-bc-66cc33 { --wbc: #66cc33; } .fusion-fl-66cc33 { --wf: #66cc33; --wfi: #000000; }
.fusion-bc-66cc66 { --wbc: #66cc66; } .fusion-fl-66cc66 { --wf: #66cc66; --wfi: #000000; }
.fusion-bc-66cc99 { --wbc: #66cc99; } .fusion-fl-66cc99 { --wf: #66cc99; --wfi: #000000; }
.fusion-bc-66cccc { --wbc: #66cccc; } .fusion-fl-66cccc { --wf: #66cccc; --wfi: #000000; }
.fusion-bc-66ccff { --wbc: #66ccff; } .fusion-fl-66ccff { --wf: #66ccff; --wfi: #000000; }
.fusion-bc-66ff00 { --wbc: #66ff00; } .fusion-fl-66ff00 { --wf: #66ff00; --wfi: #000000; }
.fusion-bc-66ff33 { --wbc: #66ff33; } .fusion-fl-66ff33 { --wf: #66ff33; --wfi: #000000; }
.fusion-bc-66ff66 { --wbc: #66ff66; } .fusion-fl-66ff66 { --wf: #66ff66; --wfi: #000000; }
.fusion-bc-66ff99 { --wbc: #66ff99; } .fusion-fl-66ff99 { --wf: #66ff99; --wfi: #000000; }
.fusion-bc-66ffcc { --wbc: #66ffcc; } .fusion-fl-66ffcc { --wf: #66ffcc; --wfi: #000000; }
.fusion-bc-66ffff { --wbc: #66ffff; } .fusion-fl-66ffff { --wf: #66ffff; --wfi: #000000; }
.fusion-bc-990000 { --wbc: #990000; } .fusion-fl-990000 { --wf: #990000; --wfi: #ffffff; }
.fusion-bc-990033 { --wbc: #990033; } .fusion-fl-990033 { --wf: #990033; --wfi: #ffffff; }
.fusion-bc-990066 { --wbc: #990066; } .fusion-fl-990066 { --wf: #990066; --wfi: #ffffff; }
.fusion-bc-990099 { --wbc: #990099; } .fusion-fl-990099 { --wf: #990099; --wfi: #ffffff; }
.fusion-bc-9900cc { --wbc: #9900cc; } .fusion-fl-9900cc { --wf: #9900cc; --wfi: #ffffff; }
.fusion-bc-9900ff { --wbc: #9900ff; } .fusion-fl-9900ff { --wf: #9900ff; --wfi: #ffffff; }
.fusion-bc-993300 { --wbc: #993300; } .fusion-fl-993300 { --wf: #993300; --wfi: #ffffff; }
.fusion-bc-993333 { --wbc: #993333; } .fusion-fl-993333 { --wf: #993333; --wfi: #ffffff; }
.fusion-bc-993366 { --wbc: #993366; } .fusion-fl-993366 { --wf: #993366; --wfi: #ffffff; }
.fusion-bc-993399 { --wbc: #993399; } .fusion-fl-993399 { --wf: #993399; --wfi: #ffffff; }
.fusion-bc-9933cc { --wbc: #9933cc; } .fusion-fl-9933cc { --wf: #9933cc; --wfi: #ffffff; }
.fusion-bc-9933ff { --wbc: #9933ff; } .fusion-fl-9933ff { --wf: #9933ff; --wfi: #ffffff; }
.fusion-bc-996600 { --wbc: #996600; } .fusion-fl-996600 { --wf: #996600; --wfi: #ffffff; }
.fusion-bc-996633 { --wbc: #996633; } .fusion-fl-996633 { --wf: #996633; --wfi: #ffffff; }
.fusion-bc-996666 { --wbc: #996666; } .fusion-fl-996666 { --wf: #996666; --wfi: #ffffff; }
.fusion-bc-996699 { --wbc: #996699; } .fusion-fl-996699 { --wf: #996699; --wfi: #000000; }
.fusion-bc-9966cc { --wbc: #9966cc; } .fusion-fl-9966cc { --wf: #9966cc; --wfi: #000000; }
.fusion-bc-9966ff { --wbc: #9966ff; } .fusion-fl-9966ff { --wf: #9966ff; --wfi: #000000; }
.fusion-bc-999900 { --wbc: #999900; } .fusion-fl-999900 { --wf: #999900; --wfi: #000000; }
.fusion-bc-999933 { --wbc: #999933; } .fusion-fl-999933 { --wf: #999933; --wfi: #000000; }
.fusion-bc-999966 { --wbc: #999966; } .fusion-fl-999966 { --wf: #999966; --wfi: #000000; }
.fusion-bc-999999 { --wbc: #999999; } .fusion-fl-999999 { --wf: #999999; --wfi: #000000; }
.fusion-bc-9999cc { --wbc: #9999cc; } .fusion-fl-9999cc { --wf: #9999cc; --wfi: #000000; }
.fusion-bc-9999ff { --wbc: #9999ff; } .fusion-fl-9999ff { --wf: #9999ff; --wfi: #000000; }
.fusion-bc-99cc00 { --wbc: #99cc00; } .fusion-fl-99cc00 { --wf: #99cc00; --wfi: #000000; }
.fusion-bc-99cc33 { --wbc: #99cc33; } .fusion-fl-99cc33 { --wf: #99cc33; --wfi: #000000; }
.fusion-bc-99cc66 { --wbc: #99cc66; } .fusion-fl-99cc66 { --wf: #99cc66; --wfi: #000000; }
.fusion-bc-99cc99 { --wbc: #99cc99; } .fusion-fl-99cc99 { --wf: #99cc99; --wfi: #000000; }
.fusion-bc-99cccc { --wbc: #99cccc; } .fusion-fl-99cccc { --wf: #99cccc; --wfi: #000000; }
.fusion-bc-99ccff { --wbc: #99ccff; } .fusion-fl-99ccff { --wf: #99ccff; --wfi: #000000; }
.fusion-bc-99ff00 { --wbc: #99ff00; } .fusion-fl-99ff00 { --wf: #99ff00; --wfi: #000000; }
.fusion-bc-99ff33 { --wbc: #99ff33; } .fusion-fl-99ff33 { --wf: #99ff33; --wfi: #000000; }
.fusion-bc-99ff66 { --wbc: #99ff66; } .fusion-fl-99ff66 { --wf: #99ff66; --wfi: #000000; }
.fusion-bc-99ff99 { --wbc: #99ff99; } .fusion-fl-99ff99 { --wf: #99ff99; --wfi: #000000; }
.fusion-bc-99ffcc { --wbc: #99ffcc; } .fusion-fl-99ffcc { --wf: #99ffcc; --wfi: #000000; }
.fusion-bc-99ffff { --wbc: #99ffff; } .fusion-fl-99ffff { --wf: #99ffff; --wfi: #000000; }
.fusion-bc-cc0000 { --wbc: #cc0000; } .fusion-fl-cc0000 { --wf: #cc0000; --wfi: #ffffff; }
.fusion-bc-cc0033 { --wbc: #cc0033; } .fusion-fl-cc0033 { --wf: #cc0033; --wfi: #ffffff; }
.fusion-bc-cc0066 { --wbc: #cc0066; } .fusion-fl-cc0066 { --wf: #cc0066; --wfi: #ffffff; }
.fusion-bc-cc0099 { --wbc: #cc0099; } .fusion-fl-cc0099 { --wf: #cc0099; --wfi: #ffffff; }
.fusion-bc-cc00cc { --wbc: #cc00cc; } .fusion-fl-cc00cc { --wf: #cc00cc; --wfi: #ffffff; }
.fusion-bc-cc00ff { --wbc: #cc00ff; } .fusion-fl-cc00ff { --wf: #cc00ff; --wfi: #000000; }
.fusion-bc-cc3300 { --wbc: #cc3300; } .fusion-fl-cc3300 { --wf: #cc3300; --wfi: #ffffff; }
.fusion-bc-cc3333 { --wbc: #cc3333; } .fusion-fl-cc3333 { --wf: #cc3333; --wfi: #ffffff; }
.fusion-bc-cc3366 { --wbc: #cc3366; } .fusion-fl-cc3366 { --wf: #cc3366; --wfi: #ffffff; }
.fusion-bc-cc3399 { --wbc: #cc3399; } .fusion-fl-cc3399 { --wf: #cc3399; --wfi: #ffffff; }
.fusion-bc-cc33cc { --wbc: #cc33cc; } .fusion-fl-cc33cc { --wf: #cc33cc; --wfi: #000000; }
.fusion-bc-cc33ff { --wbc: #cc33ff; } .fusion-fl-cc33ff { --wf: #cc33ff; --wfi: #000000; }
.fusion-bc-cc6600 { --wbc: #cc6600; } .fusion-fl-cc6600 { --wf: #cc6600; --wfi: #000000; }
.fusion-bc-cc6633 { --wbc: #cc6633; } .fusion-fl-cc6633 { --wf: #cc6633; --wfi: #000000; }
.fusion-bc-cc6666 { --wbc: #cc6666; } .fusion-fl-cc6666 { --wf: #cc6666; --wfi: #000000; }
.fusion-bc-cc6699 { --wbc: #cc6699; } .fusion-fl-cc6699 { --wf: #cc6699; --wfi: #000000; }
.fusion-bc-cc66cc { --wbc: #cc66cc; } .fusion-fl-cc66cc { --wf: #cc66cc; --wfi: #000000; }
.fusion-bc-cc66ff { --wbc: #cc66ff; } .fusion-fl-cc66ff { --wf: #cc66ff; --wfi: #000000; }
.fusion-bc-cc9900 { --wbc: #cc9900; } .fusion-fl-cc9900 { --wf: #cc9900; --wfi: #000000; }
.fusion-bc-cc9933 { --wbc: #cc9933; } .fusion-fl-cc9933 { --wf: #cc9933; --wfi: #000000; }
.fusion-bc-cc9966 { --wbc: #cc9966; } .fusion-fl-cc9966 { --wf: #cc9966; --wfi: #000000; }
.fusion-bc-cc9999 { --wbc: #cc9999; } .fusion-fl-cc9999 { --wf: #cc9999; --wfi: #000000; }
.fusion-bc-cc99cc { --wbc: #cc99cc; } .fusion-fl-cc99cc { --wf: #cc99cc; --wfi: #000000; }
.fusion-bc-cc99ff { --wbc: #cc99ff; } .fusion-fl-cc99ff { --wf: #cc99ff; --wfi: #000000; }
.fusion-bc-cccc00 { --wbc: #cccc00; } .fusion-fl-cccc00 { --wf: #cccc00; --wfi: #000000; }
.fusion-bc-cccc33 { --wbc: #cccc33; } .fusion-fl-cccc33 { --wf: #cccc33; --wfi: #000000; }
.fusion-bc-cccc66 { --wbc: #cccc66; } .fusion-fl-cccc66 { --wf: #cccc66; --wfi: #000000; }
.fusion-bc-cccc99 { --wbc: #cccc99; } .fusion-fl-cccc99 { --wf: #cccc99; --wfi: #000000; }
.fusion-bc-cccccc { --wbc: #cccccc; } .fusion-fl-cccccc { --wf: #cccccc; --wfi: #000000; }
.fusion-bc-ccccff { --wbc: #ccccff; } .fusion-fl-ccccff { --wf: #ccccff; --wfi: #000000; }
.fusion-bc-ccff00 { --wbc: #ccff00; } .fusion-fl-ccff00 { --wf: #ccff00; --wfi: #000000; }
.fusion-bc-ccff33 { --wbc: #ccff33; } .fusion-fl-ccff33 { --wf: #ccff33; --wfi: #000000; }
.fusion-bc-ccff66 { --wbc: #ccff66; } .fusion-fl-ccff66 { --wf: #ccff66; --wfi: #000000; }
.fusion-bc-ccff99 { --wbc: #ccff99; } .fusion-fl-ccff99 { --wf: #ccff99; --wfi: #000000; }
.fusion-bc-ccffcc { --wbc: #ccffcc; } .fusion-fl-ccffcc { --wf: #ccffcc; --wfi: #000000; }
.fusion-bc-ccffff { --wbc: #ccffff; } .fusion-fl-ccffff { --wf: #ccffff; --wfi: #000000; }
.fusion-bc-ff0000 { --wbc: #ff0000; } .fusion-fl-ff0000 { --wf: #ff0000; --wfi: #000000; }
.fusion-bc-ff0033 { --wbc: #ff0033; } .fusion-fl-ff0033 { --wf: #ff0033; --wfi: #000000; }
.fusion-bc-ff0066 { --wbc: #ff0066; } .fusion-fl-ff0066 { --wf: #ff0066; --wfi: #000000; }
.fusion-bc-ff0099 { --wbc: #ff0099; } .fusion-fl-ff0099 { --wf: #ff0099; --wfi: #000000; }
.fusion-bc-ff00cc { --wbc: #ff00cc; } .fusion-fl-ff00cc { --wf: #ff00cc; --wfi: #000000; }
.fusion-bc-ff00ff { --wbc: #ff00ff; } .fusion-fl-ff00ff { --wf: #ff00ff; --wfi: #000000; }
.fusion-bc-ff3300 { --wbc: #ff3300; } .fusion-fl-ff3300 { --wf: #ff3300; --wfi: #000000; }
.fusion-bc-ff3333 { --wbc: #ff3333; } .fusion-fl-ff3333 { --wf: #ff3333; --wfi: #000000; }
.fusion-bc-ff3366 { --wbc: #ff3366; } .fusion-fl-ff3366 { --wf: #ff3366; --wfi: #000000; }
.fusion-bc-ff3399 { --wbc: #ff3399; } .fusion-fl-ff3399 { --wf: #ff3399; --wfi: #000000; }
.fusion-bc-ff33cc { --wbc: #ff33cc; } .fusion-fl-ff33cc { --wf: #ff33cc; --wfi: #000000; }
.fusion-bc-ff33ff { --wbc: #ff33ff; } .fusion-fl-ff33ff { --wf: #ff33ff; --wfi: #000000; }
.fusion-bc-ff6600 { --wbc: #ff6600; } .fusion-fl-ff6600 { --wf: #ff6600; --wfi: #000000; }
.fusion-bc-ff6633 { --wbc: #ff6633; } .fusion-fl-ff6633 { --wf: #ff6633; --wfi: #000000; }
.fusion-bc-ff6666 { --wbc: #ff6666; } .fusion-fl-ff6666 { --wf: #ff6666; --wfi: #000000; }
.fusion-bc-ff6699 { --wbc: #ff6699; } .fusion-fl-ff6699 { --wf: #ff6699; --wfi: #000000; }
.fusion-bc-ff66cc { --wbc: #ff66cc; } .fusion-fl-ff66cc { --wf: #ff66cc; --wfi: #000000; }
.fusion-bc-ff66ff { --wbc: #ff66ff; } .fusion-fl-ff66ff { --wf: #ff66ff; --wfi: #000000; }
.fusion-bc-ff9900 { --wbc: #ff9900; } .fusion-fl-ff9900 { --wf: #ff9900; --wfi: #000000; }
.fusion-bc-ff9933 { --wbc: #ff9933; } .fusion-fl-ff9933 { --wf: #ff9933; --wfi: #000000; }
.fusion-bc-ff9966 { --wbc: #ff9966; } .fusion-fl-ff9966 { --wf: #ff9966; --wfi: #000000; }
.fusion-bc-ff9999 { --wbc: #ff9999; } .fusion-fl-ff9999 { --wf: #ff9999; --wfi: #000000; }
.fusion-bc-ff99cc { --wbc: #ff99cc; } .fusion-fl-ff99cc { --wf: #ff99cc; --wfi: #000000; }
.fusion-bc-ff99ff { --wbc: #ff99ff; } .fusion-fl-ff99ff { --wf: #ff99ff; --wfi: #000000; }
.fusion-bc-ffcc00 { --wbc: #ffcc00; } .fusion-fl-ffcc00 { --wf: #ffcc00; --wfi: #000000; }
.fusion-bc-ffcc33 { --wbc: #ffcc33; } .fusion-fl-ffcc33 { --wf: #ffcc33; --wfi: #000000; }
.fusion-bc-ffcc66 { --wbc: #ffcc66; } .fusion-fl-ffcc66 { --wf: #ffcc66; --wfi: #000000; }
.fusion-bc-ffcc99 { --wbc: #ffcc99; } .fusion-fl-ffcc99 { --wf: #ffcc99; --wfi: #000000; }
.fusion-bc-ffcccc { --wbc: #ffcccc; } .fusion-fl-ffcccc { --wf: #ffcccc; --wfi: #000000; }
.fusion-bc-ffccff { --wbc: #ffccff; } .fusion-fl-ffccff { --wf: #ffccff; --wfi: #000000; }
.fusion-bc-ffff00 { --wbc: #ffff00; } .fusion-fl-ffff00 { --wf: #ffff00; --wfi: #000000; }
.fusion-bc-ffff33 { --wbc: #ffff33; } .fusion-fl-ffff33 { --wf: #ffff33; --wfi: #000000; }
.fusion-bc-ffff66 { --wbc: #ffff66; } .fusion-fl-ffff66 { --wf: #ffff66; --wfi: #000000; }
.fusion-bc-ffff99 { --wbc: #ffff99; } .fusion-fl-ffff99 { --wf: #ffff99; --wfi: #000000; }
.fusion-bc-ffffcc { --wbc: #ffffcc; } .fusion-fl-ffffcc { --wf: #ffffcc; --wfi: #000000; }
.fusion-bc-ffffff { --wbc: #ffffff; } .fusion-fl-ffffff { --wf: #ffffff; --wfi: #000000; }
.fusion-word .fusion-table :is(th, td)[class*="fusion-fl-"] { background: var(--wf); color: var(--wfi); }
.fusion-word .fusion-table tbody tr:nth-child(n) :is(td, th)[class*="fusion-fl-"] { background: var(--wf); color: var(--wfi); }
.fusion-word .fusion-table thead tr th[class*="fusion-fl-"] { background: var(--wf); color: var(--wfi); }
@media print { .fusion-word .fusion-table-w { overflow: visible; mask-image: none; animation: none; } }
/* ---- end of Word files' own look ---- */

/* ---- end of the appearance layer: design standard DS1-DS8 ---- */
/* ---- Fusion: a Word page as a sheet on a desk (PAPER_FUSION; DESIGN_A's look spec, MASTER f1a8ad52) ----
   The desk's own colour, the sheet's shadow and the print colours are tokens in glass.css (--pg-desk, --pg-shadow, --pg-print-*); the sheet's colours (--pg-bg, --pg-ink, --pg-edge, ...) are OFFICE's Page colour, with a fallback to
   the window's. Every size from a file is a class (no inline style): width in 40 px steps, margins in 8 px steps, zoom in 7 steps. */
.fusion-desk { background: var(--pg-desk); padding: var(--sp-5); border-radius: var(--r-m); overflow-x: auto; grid-template-columns: minmax(0, 1fr); }
.fusion-pgbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); color: var(--c-ink); }
.fusion-pgbar-l { color: var(--c-ink-2); }
.fusion-zbtn { min-width: 44px; min-height: 44px; justify-content: center; font-size: var(--fs-4, 1.25rem); }
.fusion-zbtn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.fusion-zval { min-width: 3.5em; text-align: center; font-variant-numeric: tabular-nums; }
.fusion-zfit { min-height: 44px; }
.fusion-zfit[aria-pressed="true"] { background: var(--c-chosen, var(--c-surface)); color: var(--c-ink); font-weight: var(--w-strong); box-shadow: var(--sh-card); }
.fusion-read.fusion-sheet { box-sizing: border-box; margin: 0 auto; max-width: 100%; min-width: 0; border: 1px solid var(--pg-edge, var(--c-line)); border-radius: 2px;
  background: var(--pg-bg, var(--c-surface)); color: var(--pg-ink, var(--c-ink));
  box-shadow: var(--pg-shadow, var(--sh-card));
  padding: var(--pg-pt, var(--sp-6)) var(--pg-pr, var(--sp-6)) var(--pg-pt, var(--sp-6)) var(--pg-pl, var(--sp-6)); }
.fusion-read.fusion-sheet:not([class*="fusion-pgw-"]) { width: 794px; }
.fusion-read.fusion-sheet:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.fusion-pgw-320 { width: 320px; }
.fusion-pgw-360 { width: 360px; }
.fusion-pgw-400 { width: 400px; }
.fusion-pgw-440 { width: 440px; }
.fusion-pgw-480 { width: 480px; }
.fusion-pgw-520 { width: 520px; }
.fusion-pgw-560 { width: 560px; }
.fusion-pgw-600 { width: 600px; }
.fusion-pgw-640 { width: 640px; }
.fusion-pgw-680 { width: 680px; }
.fusion-pgw-720 { width: 720px; }
.fusion-pgw-760 { width: 760px; }
.fusion-pgw-800 { width: 800px; }
.fusion-pgw-840 { width: 840px; }
.fusion-pgw-880 { width: 880px; }
.fusion-pgw-920 { width: 920px; }
.fusion-pgw-960 { width: 960px; }
.fusion-pgw-1000 { width: 1000px; }
.fusion-pgw-1040 { width: 1040px; }
.fusion-pgw-1080 { width: 1080px; }
.fusion-pgw-1120 { width: 1120px; }
.fusion-pgw-1160 { width: 1160px; }
.fusion-pgw-1200 { width: 1200px; }
.fusion-pgw-1240 { width: 1240px; }
.fusion-pgw-1280 { width: 1280px; }
.fusion-pgw-1320 { width: 1320px; }
.fusion-pgw-1360 { width: 1360px; }
.fusion-pgw-1400 { width: 1400px; }
.fusion-pgw-1440 { width: 1440px; }
.fusion-pgw-1480 { width: 1480px; }
.fusion-pgw-1520 { width: 1520px; }
.fusion-pgw-1560 { width: 1560px; }
.fusion-pgw-1600 { width: 1600px; }
.fusion-pml-0 { --pg-pl: 0px; } .fusion-pmr-0 { --pg-pr: 0px; } .fusion-pmt-0 { --pg-pt: 0px; }
.fusion-pml-8 { --pg-pl: 8px; } .fusion-pmr-8 { --pg-pr: 8px; } .fusion-pmt-8 { --pg-pt: 8px; }
.fusion-pml-16 { --pg-pl: 16px; } .fusion-pmr-16 { --pg-pr: 16px; } .fusion-pmt-16 { --pg-pt: 16px; }
.fusion-pml-24 { --pg-pl: 24px; } .fusion-pmr-24 { --pg-pr: 24px; } .fusion-pmt-24 { --pg-pt: 24px; }
.fusion-pml-32 { --pg-pl: 32px; } .fusion-pmr-32 { --pg-pr: 32px; } .fusion-pmt-32 { --pg-pt: 32px; }
.fusion-pml-40 { --pg-pl: 40px; } .fusion-pmr-40 { --pg-pr: 40px; } .fusion-pmt-40 { --pg-pt: 40px; }
.fusion-pml-48 { --pg-pl: 48px; } .fusion-pmr-48 { --pg-pr: 48px; } .fusion-pmt-48 { --pg-pt: 48px; }
.fusion-pml-56 { --pg-pl: 56px; } .fusion-pmr-56 { --pg-pr: 56px; } .fusion-pmt-56 { --pg-pt: 56px; }
.fusion-pml-64 { --pg-pl: 64px; } .fusion-pmr-64 { --pg-pr: 64px; } .fusion-pmt-64 { --pg-pt: 64px; }
.fusion-pml-72 { --pg-pl: 72px; } .fusion-pmr-72 { --pg-pr: 72px; } .fusion-pmt-72 { --pg-pt: 72px; }
.fusion-pml-80 { --pg-pl: 80px; } .fusion-pmr-80 { --pg-pr: 80px; } .fusion-pmt-80 { --pg-pt: 80px; }
.fusion-pml-88 { --pg-pl: 88px; } .fusion-pmr-88 { --pg-pr: 88px; } .fusion-pmt-88 { --pg-pt: 88px; }
.fusion-pml-96 { --pg-pl: 96px; } .fusion-pmr-96 { --pg-pr: 96px; } .fusion-pmt-96 { --pg-pt: 96px; }
.fusion-pml-104 { --pg-pl: 104px; } .fusion-pmr-104 { --pg-pr: 104px; } .fusion-pmt-104 { --pg-pt: 104px; }
.fusion-pml-112 { --pg-pl: 112px; } .fusion-pmr-112 { --pg-pr: 112px; } .fusion-pmt-112 { --pg-pt: 112px; }
.fusion-pml-120 { --pg-pl: 120px; } .fusion-pmr-120 { --pg-pr: 120px; } .fusion-pmt-120 { --pg-pt: 120px; }
.fusion-pml-128 { --pg-pl: 128px; } .fusion-pmr-128 { --pg-pr: 128px; } .fusion-pmt-128 { --pg-pt: 128px; }
.fusion-pml-136 { --pg-pl: 136px; } .fusion-pmr-136 { --pg-pr: 136px; } .fusion-pmt-136 { --pg-pt: 136px; }
.fusion-pml-144 { --pg-pl: 144px; } .fusion-pmr-144 { --pg-pr: 144px; } .fusion-pmt-144 { --pg-pt: 144px; }
.fusion-pml-152 { --pg-pl: 152px; } .fusion-pmr-152 { --pg-pr: 152px; } .fusion-pmt-152 { --pg-pt: 152px; }
.fusion-pml-160 { --pg-pl: 160px; } .fusion-pmr-160 { --pg-pr: 160px; } .fusion-pmt-160 { --pg-pt: 160px; }
.fusion-pml-168 { --pg-pl: 168px; } .fusion-pmr-168 { --pg-pr: 168px; } .fusion-pmt-168 { --pg-pt: 168px; }
.fusion-pml-176 { --pg-pl: 176px; } .fusion-pmr-176 { --pg-pr: 176px; } .fusion-pmt-176 { --pg-pt: 176px; }
.fusion-pml-184 { --pg-pl: 184px; } .fusion-pmr-184 { --pg-pr: 184px; } .fusion-pmt-184 { --pg-pt: 184px; }
.fusion-pml-192 { --pg-pl: 192px; } .fusion-pmr-192 { --pg-pr: 192px; } .fusion-pmt-192 { --pg-pt: 192px; }
.fusion-pml-200 { --pg-pl: 200px; } .fusion-pmr-200 { --pg-pr: 200px; } .fusion-pmt-200 { --pg-pt: 200px; }
.fusion-pml-208 { --pg-pl: 208px; } .fusion-pmr-208 { --pg-pr: 208px; } .fusion-pmt-208 { --pg-pt: 208px; }
.fusion-pml-216 { --pg-pl: 216px; } .fusion-pmr-216 { --pg-pr: 216px; } .fusion-pmt-216 { --pg-pt: 216px; }
.fusion-pml-224 { --pg-pl: 224px; } .fusion-pmr-224 { --pg-pr: 224px; } .fusion-pmt-224 { --pg-pt: 224px; }
.fusion-pml-232 { --pg-pl: 232px; } .fusion-pmr-232 { --pg-pr: 232px; } .fusion-pmt-232 { --pg-pt: 232px; }
.fusion-pml-240 { --pg-pl: 240px; } .fusion-pmr-240 { --pg-pr: 240px; } .fusion-pmt-240 { --pg-pt: 240px; }
.fusion-z-50 .fusion-read.fusion-sheet { zoom: 0.5; max-width: none; }
.fusion-z-75 .fusion-read.fusion-sheet { zoom: 0.75; max-width: none; }
.fusion-z-90 .fusion-read.fusion-sheet { zoom: 0.9; max-width: none; }
.fusion-z-100 .fusion-read.fusion-sheet { zoom: 1.0; max-width: none; }
.fusion-z-125 .fusion-read.fusion-sheet { zoom: 1.25; max-width: none; }
.fusion-z-150 .fusion-read.fusion-sheet { zoom: 1.5; max-width: none; }
.fusion-z-200 .fusion-read.fusion-sheet { zoom: 2.0; max-width: none; }
@media (max-width: 600px) {
  .fusion-desk { padding: var(--sp-3); }
  .fusion-read.fusion-sheet { padding: var(--sp-4); }
}
@media print {
  .fusion-desk { background: none; padding: 0; overflow: visible; }
  .fusion-pgbar { display: none; }
  .fusion-read.fusion-sheet { zoom: 1; width: auto; max-width: none; background: var(--pg-print-bg); color: var(--pg-print-ink); border: 0; box-shadow: none; border-radius: 0; }
}
@media (forced-colors: active) {
  .fusion-read.fusion-sheet { border: 1px solid CanvasText; box-shadow: none; }
}
/* the first frames of a page draw without any transition (MASTER 19:38, Pavel's glitch: the desk's Widgets and
   Favourites panels were drawn open and slid shut over half a second): the body comes with no-anim and sos1.js takes it
   off two frames after it runs. Only where script runs, so a page without SOS's script moves as before */
@media (scripting: enabled) { .no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; } }
/* PB-06: a window opened for the first time is placed by sos1.js (clear(): beside the window it would cover); it is
   drawn unseen until then, so it never shows centred and then jumps. Opacity, so its focus still works; 1.5 s at most */
@media (scripting: enabled) { .os-desk[data-new] > .win.is-active { opacity: 0; pointer-events: none; animation: win-placed 0s 1.5s forwards; } }
@keyframes win-placed { to { opacity: 1; pointer-events: auto; } }
/* below: window style; values only through tokens (the design gate, r1-gate-check.md R8, R15) */

@layer core {
/* links that are buttons, rows and places (the design standard DS28's list: the design gate reads it, R1); 1.1 B2 adds
   Start's and the panels' click-away layer (menu-scrim), Start's letters (start-l) and Switch windows' rows (sw-row) */
.frame a.btn, .frame a.ibtn, .frame a.dock-i, .frame a.place, .frame a.menu-i, .frame a.seg-o, .frame a.row-link, .frame a.files-link,
.frame a.link, .frame a.start-row, .frame a.msg-link, .frame a.msg-file, .frame a.bos-row-a,
.frame a.menu-scrim, .frame a.start-l, .frame a.sw-row, .frame a.who-name,
.frame .os-bar a { color: inherit; text-decoration: none; }
/* GF-10 S3: the card of a name beside the document; on a narrow window a sheet from the bottom, at most 70 % of the height
   (the document stays scrolled where it was) */
.fusion.has-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 22rem); column-gap: var(--sp-4); align-items: start; }
.fusion.has-card > * { grid-column: 1; }
.fusion.has-card > .fusion-who { grid-column: 2; grid-row: 1 / span 30; position: sticky; top: 0; max-height: 100%; overflow: auto; }
@container frame (max-width: 640px) {
  .fusion.has-card { display: block; }
  /* a sheet pinned to the bottom of what the person sees: the window is the containing block of a fixed box (backdrop-filter) and it scrolls, so fixed rode up with its scroll (DEPUTY_TESTER 01:29); sticky follows the window's own scroll, at the content's own edges */
  .fusion.has-card > .fusion-who { grid-column: auto; grid-row: auto; position: sticky; top: auto; bottom: 0; margin: 0 calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)); z-index: var(--z-lift-2); max-height: 70vh; overflow: auto; background: var(--c-surface); border-top: var(--line) solid var(--c-line); box-shadow: var(--sh-pop); }
  .fusion-who .who-card { border-left: 0; }
}
.fusion-names-line { flex-basis: 100%; }
/* GF-10 S3: a name BOS found in a file, a link to its card: the text keeps its colour, a dotted underline in --c-ink-3, solid
   on hover and focus (a page full of blue names would be noise); the design standard DS28 lists it (1.2) */
.frame a.who-name { text-decoration: underline dotted var(--c-ink-3); text-underline-offset: 3px; }
.frame a.who-name:hover, .frame a.who-name:focus-visible { text-decoration-style: solid; }
/* FN-143: unread notices, a dot on the bell beside its words (the label says how many; never colour alone) */
.frame .os-bell { position: relative; }
.frame .os-bell-dot { position: absolute; top: 0; right: 0; width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--c-accent); }
.frame a.btn-primary { color: var(--c-accent-ink); }
.frame a.row-link:hover, .frame a.files-link:hover { text-decoration: underline; }
/* DSX8: a link inside a sentence ("Open them", "Models and pipelines"): the accent, underlined on hover and focus (DSQ3) */
.frame a.link { color: var(--c-accent); text-decoration: none; }
.frame a.link:hover, .frame a.link:focus-visible { text-decoration: underline; }
/* every focusable thing shows the ring on the keyboard, never on a mouse click (FN-153; accessibility r3, AG2); the
   two boxes that draw their own frame (a field, BOS's message box) ring the frame, not the bare box inside it */
.frame :is(a, button, input, select, textarea, summary, iframe, [tabindex]):focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.frame :is(.field:has(input:focus-visible), .bos-compose:has(textarea:focus-visible)) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.frame :is(.field input, .bos-compose textarea):focus-visible { outline: 0; }
/* P16-25, P16-91 (22 Oct 2026: on a phone the page heading wore a bright box when the page opened, like a chosen field): a
   heading or a result line the page focuses for screen readers (tabindex -1: never reached with Tab, nothing to press)
   takes the focus without the ring; skip links' landing places (the dock, a window's title) keep it */
.frame :is(h1, h2, h3, h4, p)[tabindex="-1"]:focus-visible { outline: 0; }
.look-a.contrast :is(.field, .bos-compose):has(:is(input, textarea):focus-visible) { outline-width: 3px; }
/* Skip to the dock and Skip to the front window: shown only on keyboard focus; the second only while a window is in
   front (AG1) */
.skip-link:not(:focus-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip-link:focus-visible { position: fixed; z-index: var(--z-tip); top: max(var(--sp-2), env(safe-area-inset-top, 0px)); left: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m); background: var(--c-face-solid); color: var(--c-ink); box-shadow: var(--sh-pop);
  white-space: nowrap; }
/* the dock's own: beside the dock, on its left, clear of the lines above it (the dock's glass makes it the box a fixed
   child is placed in) */
.dock .skip-front:focus-visible { position: absolute; top: 50%; left: auto; right: calc(100% + var(--sp-2)); transform: translateY(-50%); }
/* a phone's dock is the screen's whole width: over its own left end while it has focus */
@container frame (max-width: 640px) { .dock .skip-front:focus-visible { right: auto; left: var(--sp-1); z-index: var(--z-part-2); } } /* desk */
.os:not(:has(.win.is-active)) .skip-front { display: none; }
:where(.form) { display: contents; }
.btns .form, .row-trail .form { display: inline-flex; }
.search-form, .graph-form { display: flex; align-items: center; gap: var(--sp-2); flex: 1; }
/* Graph's toolbar wraps, and its note about the first look is its own line under the row, not a column squeezed inside it
   (DESIGN_LEAD 07:14, DEPUTY_TESTER's CS1 walk: at 1440 beside the side list the note was 7 lines and the depth choice was cut) */
.win-tools:has(.graph-form) { flex-wrap: wrap; }
.graph-wait, .graph-hint { flex: 1 1 100%; order: 3; }
/* ALEX TONIGHT row A: a visible word beside each segmented choice (Graph's depth and source) */
.graph-choice { display: inline-flex; align-items: center; gap: var(--sp-2); flex: none; }
.graph-lab { font-size: var(--fs-1); color: var(--c-ink-2); }
/* the two name boxes stay at the form's left, one beside the other: the toolbar's right-pushing margin (core.css .win-tools .search) spread them across the
   free width when the window is wide and the person has no source choice (ALEX TONIGHT row A: a member at 1440) */
.graph-form .search { max-width: 260px; margin-left: 0; }
.toggle-form { display: inline-flex; }
button.toggle { border: 0; padding: 0; cursor: pointer; }
/* SQ-H01 step 2 (H5): the long help sits behind <.more> (SOS1Web.UI.more/1); a status line (who changed booking, the Day board's count) is its own line, not a note */
.more > summary { cursor: pointer; color: var(--c-ink-2); font-size: var(--fs-1); }
.more-b { margin-top: var(--sp-1); color: var(--c-ink-2); font-size: var(--fs-1); }
/* the summary stays display: list-item, or its disclosure triangle goes (DESIGN_LEAD S-1): the touch height is padding, not flex */
@media (pointer: coarse) { .more > summary { min-height: var(--hit); padding-block: calc((var(--hit) - 1lh) / 2); box-sizing: border-box; } }
/* SQ-H15 (DESIGN_LEAD, gate item 23): a summary set to flex or grid loses the browser's triangle, so a fold that does it draws its own sign:
   a small chevron after its words, turned over while it is open. A new flex or grid summary needs this or a sign of its own (fold_sign_test.exs). */
.fusion-edit-field > summary::after, .frame .round-topics > summary::after, .files-conn > summary::after {
  content: ""; flex: none; width: .45em; height: .45em; margin-left: var(--sp-2); border-right: var(--line) solid currentColor; border-bottom: var(--line) solid currentColor; transform: rotate(45deg); }
.fusion-edit-field[open] > summary::after, .frame .round-topics[open] > summary::after, .files-conn[open] > summary::after { transform: rotate(-135deg); }
.seg button.seg-o { border: 0; background: transparent; font: inherit; color: var(--c-ink-2); cursor: pointer; }
.seg button.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); }
/* Settings' radio groups: native radios (rule book SK3, the arrows choose) drawn as the segments above (DS16; MASTER 05:06) */
.choice { display: grid; gap: var(--sp-2); justify-items: start; }
.choice-set { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--sp-2); justify-items: start; }
.choice-set .seg { flex-wrap: wrap; }
/* Settings' choices are the shared <.seg_pick> (design audit row 10); the chosen one is raised, as every segment (CT11) */
.choice-set .seg-o:hover { background: var(--c-raised); }
.choice-set .seg-o:has(.seg-r:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.choice-set.is-dim { opacity: .5; }
.choice-set:disabled .seg-o { cursor: default; }
/* Settings > AI Assistance (smart-helpers r1 AA-1; OFFICE draws the page): a helper row, its name and two or three
   wrapping lines of what it does with its pills, the switch at the top right; a .row in a .group otherwise */
.aa-row { align-items: start; padding-block: var(--sp-2); }
.aa-row .row-main { gap: var(--sp-1); }
.aa-row .row-title { white-space: normal; font-weight: var(--w-strong); }
.aa-row .row-main .note { margin: 0; }
.aa-row .row-trail { padding-top: var(--sp-1); }
.aa-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
/* the model pill's longest words ("May send your words to an AI model outside this computer", 364 px) are wider than a
   phone's row (DEPUTY_UI2's walk, 24 Oct 01:00-01:11: 105 px past its 259 px box at 402 px, 147 px past 217 px at 360
   px, the words cut), so here a pill wraps inside its row; core.css's .pill keeps one line everywhere else. On one line
   it looks as before (1.6em tall: 1.3em of line and .15em above and below; its ends round, .8em being half of 1.6em);
   on two lines its corners stay clear of the words */
.aa-pills .pill { max-width: 100%; white-space: normal; line-height: var(--lh-tight); padding-block: .15em; border-radius: .8em; }
/* P16-1100 (PAPER_FINE's 200 % pass, 22 Oct 20:09: at 390 px with 150 % text the Smart fields card ran past its own
   edge): the row's one column takes the card's width (minmax(0, 1fr)), so a long choice no longer sets it and the words
   wrap inside; the choices wrap, and on a phone they stand one under another, each its whole width */
.aa-row .row-main { grid-template-columns: minmax(0, 1fr); }
.aa-row .seg { flex-wrap: wrap; max-width: 100%; }
.aa-row .seg-o { white-space: normal; text-align: start; }   /* a choice's words wrap too (.seg-o keeps them on one line) */
@container frame (max-width: 640px) { .aa-row .seg { display: flex; flex-direction: column; align-items: stretch; } }
/* What BOS did in an app (BOS acts; DEPUTY_UI2's walk 24 Oct 02:50: the rows were cut to one line on a phone and the Undo confirm lay over its
   buttons): a row's words wrap (the date, the time, the client's initials and the practitioner are what BOS did, never cut), the question is
   a block of its own, and on a narrow window the buttons go under the words */
.aa-did-row { align-items: start; flex-wrap: wrap; padding-block: var(--sp-2); }
.aa-did-row .row-main { flex: 1 1 16rem; gap: var(--sp-1); grid-template-columns: minmax(0, 1fr); }
.aa-did-row .row-title, .aa-did-row .row-note { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.aa-did-row .row-title { font-weight: var(--w-strong); }
.aa-did-ask { display: block; flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; }
.aa-did-row .row-trail { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; padding-top: var(--sp-1); }
.aa-did-row .row-trail .btns { flex-wrap: wrap; }
@container frame (max-width: 640px) { .aa-did-row .row-trail { flex-basis: 100%; justify-content: flex-start; margin-left: 0; } }
.menu-form { display: block; }
/* Keep on top: the window menu offers Stop keeping on top only on the window kept on top (SOS1Web.Places shows it) */
.menu-form.wm-top-stop { display: none; }
/* while a menu of the window in front is open it rises over the window kept on top, so the menu never opens under it
   (DESIGN_C 02:38); closed, the kept window is over it again */
.os-desk > .win.is-active:has(details[open], :popover-open) { z-index: var(--z-pin-pop); }
/* (an item drawn as a form button is core's :where(button).menu-i, CT18) */
/* (FN-055: a disabled Paste is core's .menu-i:disabled, CT18) */
.menu-scrim { position: absolute; inset: 0; z-index: var(--z-menu-under); }
.avatar-menu { z-index: var(--z-menu); }
.files-n .files-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the picker and BOS chat's attach list at layer 38, over BOS's floating button (34; PAPER_MAP's as-built A3) */
.picker { position: absolute; z-index: var(--z-menu-scrim); left: 50%; top: 22%; transform: translateX(-50%); width: min(420px, calc(100% - 32px)); }
.gate-form { display: grid; gap: var(--sp-3); width: 100%; }
/* a sign-in box's edge reaches 3:1 on the card (WCAG 1.4.11; the glass --edge read about 1.2:1 in light; DESIGN_LEAD 4 Nov 2026) */
.gate .field { border-color: var(--c-ink-3); }
.gate-error { margin: 0; color: var(--c-danger); font-size: var(--fs-2); }
/* a public install's notice at sign-in and the line beside upload and record (BOS DEMO plan r3 N3) */
.gate-notice { display: grid; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--c-accent-soft); font-size: var(--fs-2); text-align: start; }
.gate-notice-h { margin: 0; font-weight: 600; }
.gate-notice-p { margin: 0; }
.public-line { display: block; flex-basis: 100%; margin: 0; font-size: var(--fs-1); }
/* sign-in on a laptop (Pavel, 1 Nov 2026 on Chicago 0.9.5: "not scrolling ... not ok on laptop to have vertical text"): the
   page scrolls when the card is taller than the screen (safe centring keeps the top reachable); the notice is the short
   form with the whole notice folded under it (SOS1.SignInNotice), and on a wide screen it stands beside the form instead of
   under it. A phone keeps its one column. */
/* the wall belongs to the scrolling floor itself, so it stays behind the card when the page scrolls (DESIGN_A note 1) */
.gate-floor { overflow-x: hidden; overflow-y: auto; place-items: safe center; background: var(--wall); }
.gate-fields { display: grid; gap: var(--sp-3); }
.gate-actions { display: grid; gap: var(--sp-3); }
.gate-notice-more .more-b { display: grid; gap: var(--sp-2); color: inherit; font-size: inherit; }
/* SENTINEL S-1 (13:58), DESIGN_LEAD 14:02: the one way to the text the tick agrees to is as plain to see as before: accent, at body size (not the quiet small grey look) */
.gate-notice-more > summary { color: var(--c-accent); font-size: inherit; }
@container frame (min-width: 760px) {
  .gate-card:has(.gate-form > .gate-notice) { width: min(760px, calc(100cqw - 48px)); }
  .gate-form:has(> .gate-notice) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; column-gap: var(--sp-4); align-items: start; }
  .gate-form:has(> .gate-notice) > .gate-fields { grid-column: 1; grid-row: 1; }
  .gate-form:has(> .gate-notice) > .gate-notice { grid-column: 2; grid-row: 1 / span 2; }
  .gate-form:has(> .gate-notice) > .gate-actions { grid-column: 1; grid-row: 2; align-self: start; }
}
/* The public demo's sign-in page (SOS1Web.DemoFront; ALEX-DEMO-PAGE): the sign-in box stays the first screen, the play section is
   under it on the same scrolling wall; tokens only. Without the play section none of this applies. */
.gate-floor.has-play { place-items: start center; align-content: start; grid-template-columns: minmax(0, 1fr); padding-bottom: var(--sp-6); }
.gate-floor.has-play > .gate { min-height: 100dvh; align-content: center; }
.gate-look { font-size: var(--fs-2); }
.gate-join .frow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); text-align: start; }
.gate-join .frow-l { padding-top: 0; }
.gate-join .field { border-color: var(--c-ink-3); }  /* an empty box is the only target here: its edge reaches 3:1 on the card (DESIGN_LEAD S-1, WCAG 1.4.11) */
.demo-shot { display: block; }
.demo-play { display: grid; gap: var(--sp-3); box-sizing: border-box; width: min(760px, calc(100cqw - 32px)); margin: 0 auto; padding: clamp(var(--sp-3), 4cqw, 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); color: var(--c-ink); text-align: start; scroll-margin-top: var(--sp-4); }
.demo-play p, .demo-play ul, .demo-play figure, .demo-play h2, .demo-play h3 { margin: 0; }
.demo-h { font: var(--w-strong) var(--fs-5)/1.2 var(--f-display); }
.demo-h3 { font: var(--w-strong) var(--fs-4)/1.2 var(--f-display); margin-top: var(--sp-3); }
.demo-lede { font-size: var(--fs-3); line-height: 1.5; }
.demo-rows { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.demo-q { border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface-2); }
.demo-q > summary { cursor: pointer; padding: var(--sp-3); font-weight: var(--w-strong); list-style: none; display: flex; gap: var(--sp-2); align-items: baseline; }
.demo-q > summary::-webkit-details-marker { display: none; }
.demo-q > summary::before { content: "\25B8"; flex: none; color: var(--c-ink-2); }
.demo-q[open] > summary::before { content: "\25BE"; }
.demo-q > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-m); }
.demo-a { display: grid; gap: var(--sp-2); padding: 0 var(--sp-3) var(--sp-3); }
.demo-lab { font-size: var(--fs-1); font-weight: var(--w-strong); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--c-ink-2); }
.demo-ans { line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.demo-chips { display: flex; flex-wrap: wrap; gap: var(--sp-1); padding: 0; list-style: none; }
.demo-chips .pill { white-space: normal; overflow-wrap: anywhere; }
.demo-mark { display: flex; align-items: center; gap: var(--sp-2); }
.demo-fig { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.demo-fig img { display: block; width: 100%; height: auto; border-radius: var(--r-m); border: var(--line) solid var(--c-line); }
.demo-facts { display: grid; gap: var(--sp-1); padding-inline-start: 1.2em; line-height: 1.5; }

/* "Start with a clean desk" under the sign-in form (SOS-SAFE r1 part B, SB19) */
/* a desk that could not be drawn (SB20): its words and Reset my desk, on the plain desk */
.desk-broken { position: absolute; left: 50%; top: 30%; transform: translateX(-50%); display: grid; gap: var(--sp-2); justify-items: center; padding: var(--sp-4); border-radius: var(--r-m); background: var(--c-surface); color: var(--c-ink); }
.desk-broken p { margin: 0; }
.gate-logo { color: var(--c-ink); }
.confirm-form { display: grid; gap: var(--sp-3); }
.graph-empty { padding: var(--sp-5); }
.chat-off { align-content: start; grid-template-rows: auto auto auto; }  /* the line, the words and Switch BOS on together at the top (P16-658) */
.preview-text { max-height: 220px; overflow: auto; margin: 0; padding: var(--sp-2); border-radius: var(--r-s); background: var(--c-surface-2); font: var(--fs-1)/1.45 var(--f-mono); white-space: pre-wrap; word-break: break-word; }
/* the text takes the height left after Find and Replace and the notes (T19 put them above it) */
.write-form { display: flex; flex-direction: column; gap: var(--sp-3); height: 100%; padding: var(--sp-4); }
/* T19 Find and Replace all: one wrapping line of boxes in the field look, 44 px on a phone (DS39) */
.write-find { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; border: 0; }
/* the boxes are the shared form row and field (DESIGN_C's audit row 9, item 5): side by side, each label beside its box */
.write-find > .frow { flex: 1 1 18rem; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.write-find > .frow .frow-l { padding-top: 0; }
.write-find > .frow .frow-c { justify-items: stretch; }
.write-form textarea { flex: 1 1 auto; width: 100%; min-height: 8em; resize: none; padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--edge); background: var(--c-surface-2); color: var(--c-ink); font: var(--fs-3)/1.55 var(--f-mono); }
/* P16-505: the Find and replace button is a phone's only (a computer shows the row always) */
.write-find-open { display: none; }
/* P16-506: where a Find found its words, each line with its number and the words marked */
.write-places { margin: 0; padding-left: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-2); color: var(--c-ink-2); }
.write-places mark { background: var(--c-mark); color: var(--c-ink); border-radius: 2px; }
/* P16-506 (PAPER_WORD 14:48): Previous and Next beside which match is the current one, quiet on a computer as Replace
   all; each line of Where it was found a quiet row to tap, the current match's line ringed. The row is UI.find_step,
   Write's and Fusion's alike (UI 22 Oct 2026): under the Find box on a computer, its place in even figures and room for
   "40 of 40, line 999", so the row never moves as the numbers change */
.find-step { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); color: var(--c-ink-2); }
.find-step .find-at { min-width: 16ch; text-align: center; }
/* Fusion's row is the script's (FindStep): without it the marks and the count stay as before, and no empty row */
html:not(.js) .find-step.js-only, html:not(.js) .win-under-tools:has(> .find-step.js-only) { display: none; }
/* Fusion's row is the window's under_tools part: in the page right after the Find box (Tab and a reader meet it there,
   PAPER_SLIDES 21:11), drawn there on a computer as a row of the tools (MASTER Q2); on a phone held at the foot (below) */
.win-fusion > .win-under-tools:has(> .find-step) { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3);
  border-bottom: var(--line) solid var(--c-line); font-size: var(--fs-2); }
/* Fusion's current match ringed as Write's: a shape, not colour alone */
.frame mark.fusion-hit.is-current { background: var(--c-accent-soft); box-shadow: 0 0 0 2px var(--c-accent); }
@media (forced-colors: active) { .frame mark.fusion-hit.is-current { outline: 2px solid ButtonText; } }
/* a match on a PDF page (PD-01): the words' box drawn over the page's picture, an outline as well as a tint, the current one's heavier */
.fusion-words .fusion-hit rect { fill: var(--c-accent-soft); stroke: var(--c-accent); stroke-width: 1; vector-effect: non-scaling-stroke; pointer-events: none; }
.fusion-words .fusion-hit.is-current rect { stroke-width: 3; }
@media (forced-colors: active) { .fusion-words .fusion-hit rect { fill: Highlight; stroke: ButtonText; } }
.write-places .write-place { display: block; width: 100%; min-height: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-s);
  color: inherit; font: inherit; text-align: left; }
.write-places .write-place > span:first-child { color: var(--c-ink-3); margin-right: var(--sp-2); font-variant-numeric: tabular-nums; }
.write-places .write-place[aria-current] { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); }
/* P16-506: the marks in Write's text box (sos1.js WriteFind): a layer under the box holding the same words in the same
   places, its letters unseen, each match marked and the current one ringed; the box lets its own background go to it.
   The layer is out of the flow (the box keeps its place and size exactly); the script puts it on the box's own place,
   size, padding, border and letters, measured from the box (PAPER_WORD's walk 15:57, F1 and F2: never a guess, never
   a box of its own). Nothing here may move a letter (no padding on a mark). The form is where its place is measured
   from, inside the window's body, so the layer scrolls with the box on a phone */
.win-write .write-form { position: relative; }
.write-form .write-marks ~ textarea { position: relative; z-index: var(--z-part); background: transparent; }
.write-form .write-marks { position: absolute; z-index: var(--z-base); box-sizing: border-box; overflow: hidden; margin: 0; padding: var(--sp-3);
  border: var(--line) solid transparent; border-radius: var(--r-m); background: var(--c-surface-2); color: transparent;
  font: var(--fs-3)/1.55 var(--f-mono); white-space: pre-wrap; overflow-wrap: break-word; pointer-events: none; }
.write-form .write-marks mark { padding: 0; margin: 0; border-radius: 2px; background: var(--c-mark); color: transparent; }
.write-form .write-marks mark.is-current { background: var(--c-accent-soft); box-shadow: 0 0 0 2px var(--c-accent); }
/* while the words are being typed the marks wait, so none sits on the wrong letters */
.write-form .write-marks.is-stale mark { background: transparent; box-shadow: none; }
/* Write on a phone (iPhone check P16-504, 505, 506, 507) */
@container frame (max-width: 640px) {
  /* P16-505: the row folds behind one button; it opens when the button is pressed (:target) or after a Find (the box
     carries what was found) */
  .win-write .write-find-open { display: inline-flex; align-self: start; }
  .win-write .write-find:not(:target):not(:has(input[name="find"][value]:not([value=""]))) { display: none; }
  .win-write .write-form:has(.write-find:target, input[name="find"][value]:not([value=""])) .write-find-open { display: none; }
  /* P16-507: each label above its box; Find and Replace all side by side, the same kind of button */
  .win-write .write-find .btn-quiet { border: var(--line) solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink); }
  .win-write .write-find > .frow { flex: 1 1 100%; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
  /* P16-1007: the boxes 44 px; Match case a 44 px row with a 24 px tick */
  .win-write .write-find .field { min-height: 44px; }
  /* Match case, the shared check box: a whole row, 44 px high, its box and words one tap */
  .win-write .write-find > .chk { flex: 1 1 100%; min-height: 44px; }
  /* P16-506: Previous and Next framed as Find, 44 px; each line of Where it was found a 44 px row. MASTER 15:55: on a phone
     the row is at the window's foot, in thumb reach: in Write it comes last but Save (order) and is held just above Save's
     row (its 48 px buttons and their padding, 64 px, and its line), the text scrolling under both; over the text box,
     which sits at 1 above its marks. WriteFind keeps the current mark above the two */
  .frame .find-step .btn { min-height: var(--hit); min-width: var(--hit); border: var(--line) solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink); }
  /* (PAPER_WORD's small one, 17:25: with the form's gap to Save taken back below, the row and Save meet at every scroll) */
  .win-write .write-step { order: 1; position: sticky; bottom: calc(var(--sp-6) * 2 + var(--line)); z-index: var(--z-part-2); padding-block: var(--sp-1); margin-bottom: calc(-1 * var(--sp-3));
    background: var(--c-face-solid-raised); }
  /* Fusion's row at its window's foot (PAPER_WORD G1, 17:25): the window scrolls as one on a phone (P16-419), so the row,
     a part of the window itself, is drawn after the words (order) and held at the foot as they scroll under it, on its own
     ground so no word shows through; each match stops above it. Its place in the page stays after the Find box */
  .win-fusion > .win-under-tools:has(> .find-step) { order: 3; position: sticky; bottom: 0; z-index: var(--z-pin-pop); border-top: var(--line) solid var(--c-line); border-bottom: 0;
    background: var(--c-face-solid-raised); }
  .win-fusion > .win-under-tools > .find-step { flex: 1 1 auto; justify-content: space-between; }
  .win-fusion mark.fusion-hit, .win-fusion g.fusion-hit { scroll-margin-bottom: calc(var(--sp-6) * 2 + var(--sp-5)); }
  .win-write .write-places .write-place { min-height: 44px; }
  /* PAPER_WORD's walk 15:57, F3: the form is as tall as what it holds (at least the window's body), so Previous and
     Next at its top and Save at its foot stay held however far the body scrolls (a box one body tall let them go) */
  /* and no padding at its foot (PAPER_WORD 17:25: at the end of the scroll it showed under Save, which rose 16 px) */
  .win-write .write-form { height: auto; min-height: 100%; padding-bottom: 0; }
  /* P16-504: the words get the window's free height, not six lines over an empty third */
  .win-write .write-form textarea { min-height: max(8em, calc(100dvh - 26rem)); }
  /* with Find and replace open (or after a Find, with where it was found) the row takes its room, so Save stays on screen */
  .win-write .write-form:has(.write-find:target, input[name="find"][value]:not([value=""])) textarea { min-height: max(5em, calc(100dvh - 46rem)); }
  /* PAPER_WORD 14:48 (MAJOR): Write's body scrolls on a phone (core.css keeps it hidden), so Save is always reachable */
  .win-write .win-body { overflow: auto; }
  /* Save and Close stay at the window's foot in every state, the text scrolling under them (IDEAS 14:43: at 360, after a
     Find, Save was cut at the foot) */
  /* DESIGN_C 22:34: the window's own foot, as the Inbox's (PB-11c): its surface, full width to the window's edges, a line
     on top, no corners of its own; before, a darker inset block read as foreign on the glass */
  /* margin-top auto: the form is a column at least one body tall, so with a short text the foot is pushed to its end, the
     window's bottom edge, not left 40 px above it (OFFICE's walk 00:30; DESIGN_C's walk 01:01 found the body's padding
     already 0 and the form already full: the space was inside the form, under the foot) */
  .win-write .write-form > .btns { order: 2; position: sticky; bottom: 0; z-index: var(--z-part); margin: auto calc(-1 * var(--sp-4)) 0; padding: var(--sp-2) var(--sp-4);
    border-radius: 0; background: var(--c-face-solid); border-top: var(--line) solid var(--c-line); }
  /* after a Find, Previous and Next come just before the foot: the free space goes above them, so the two stay together
     at the bottom (OFFICE 01:51) */
  .win-write .write-form > .write-step { margin-top: auto; }
  .win-write .write-form:has(> .write-step) > .btns { margin-top: 0; }
}
/* Write on a computer (TESTER's desktop walk 15:47, via MASTER 16:10): the text box takes the window's free height, not
   the eight lines a text field stops at (.ctl-area's max-height: about 190 px in a 740 px window, empty under Save); it
   is the part that gives way when the window is short, so Save stays in view. The marks layer is measured from it, so
   box and layer are one size (PAPER_WORD's walk 15:57, F2). A phone keeps its own heights (P16-504, above) */
@container frame (width > 640px) {
  .win-write .write-form textarea { max-height: none; }
}
.notes-wait { display: grid; gap: var(--sp-2); }
.notice-ask { border: var(--line) solid color-mix(in srgb, var(--c-accent) 40%, transparent); }
/* FN-143: an unread notice's title in bold (its words say Unread to a reader); Mark all read beside the count */
.notice.is-unread b { font-weight: var(--w-strong); }
.notice.is-read b { font-weight: var(--w-text); }
.notes-unread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0; }
.notice-ask .notice-main { display: grid; gap: var(--sp-1); }
.frame a.msg-link { display: inline-block; margin-left: var(--sp-2); color: var(--c-accent); font-weight: var(--w-strong); }
/* several places by one name (BOS chat navigation step 2): one link a line, under the question; on a touch screen each
   is a 44 px target (GR-5) */
.frame .msg-links { display: grid; justify-items: start; gap: var(--sp-1); }
.frame .msg-links a.msg-link { margin-left: 0; }
@media (pointer: coarse) { .frame .msg-links a.msg-link { display: inline-flex; align-items: center; min-height: 44px; } }

/* the glass form */
.glass-form { display: grid; gap: var(--sp-3); }
.row.slider input[type="range"] { width: 180px; accent-color: var(--c-accent); }
/* the row's title is the slider's visible name; the range part's own label stays for a screen reader */
.row.slider .range-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* a tick that is a row's title (Appearance): the title's height, not a control's, so the row matches its neighbours */
.row-main > .chk { min-height: 0; }
.side-form { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--sp-2); margin-top: var(--sp-3); padding-top: var(--sp-3);
  border-top: var(--line) solid var(--c-line); }
.side-label { font-size: var(--fs-1); color: var(--c-ink-2); }
/* the browser's own file input stays (keyboard, screen readers, the chosen file's name); only its button is drawn as SOS's */
.side-form input[type="file"] { font: inherit; font-size: var(--fs-1); width: 100%; min-width: 0; color: var(--c-ink-2); border-radius: var(--r-m); }
.side-form input[type="file"]::file-selector-button { margin-right: var(--sp-2); min-height: calc(var(--ctl) * .8); 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; font-weight: var(--w-strong); cursor: pointer; }
.side-form input[type="file"]:hover::file-selector-button { background: var(--c-raised); }
.side-form input[type="file"]:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.preview-img { display: block; width: 100%; max-height: min(45vh, 480px); object-fit: contain; border-radius: var(--r-s); background: var(--c-surface-2); }
.event-form { display: grid; gap: var(--sp-2); }
.event-card { top: 18%; }
.gate-first { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--c-accent-soft); font-size: var(--fs-2); }
.gate-first code, .frame code { font-family: var(--f-mono); font-size: .92em; }

/* Start, Quick settings, Search, Maximise (Panels) */
.start, .quick { position: absolute; z-index: var(--z-menu); bottom: 92px; width: min(420px, calc(100% - 24px)); display: grid; gap: var(--sp-3);
  --c-surface: rgb(var(--g-rgb, 255 255 255) / .9); box-shadow: var(--sh-pop); }
.start { left: 50%; transform: translateX(-50%); }
.quick { right: 16px; }
/* never past the top of the screen: at 200 % Quick settings (434 px) began 76 px above it (accessibility r3 AG13); it
   scrolls inside instead */
.quick { max-height: calc(100dvh - 92px - var(--sp-3)); overflow-y: auto; }
/* Start, expanded (AD-082 g): wider, its lists scroll, two columns of apps with what each is for, letters to jump by */
.start { width: min(640px, calc(100% - 24px)); max-height: calc(100% - 120px); overflow: auto; overscroll-behavior: none; }  /* PB-20 F1 (WRITER2): no iOS bounce in Start either */
/* PB-08 (Pavel, 22 Oct): the list scrolls to its last app in every browser: each part keeps its own height (rows are
   never squeezed to fit the panel), and the panel is never taller than the screen above the dock */
.start { grid-auto-rows: max-content; align-content: start; max-height: min(calc(100% - 120px), calc(100dvh - 120px)); }
.start-sec { display: grid; gap: var(--sp-2); }
.start > .search-form, .start > .search-form .field { width: 100%; max-width: none; }
.start-az { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-left: auto; }
.frame a.start-l { min-width: 1.6em; padding: 0 var(--sp-1); border-radius: var(--r-s); text-align: center; color: var(--c-ink-2); text-decoration: none; }
.frame a.start-l:hover { background: var(--c-raised); color: var(--c-ink); }
.start-recent, .start-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-2); }
.start-letter { grid-column: 1 / -1; margin: var(--sp-2) 0 0; font: var(--w-strong) var(--fs-1)/1 var(--f-display); color: var(--c-ink-3);
  letter-spacing: .06em; scroll-margin-top: var(--sp-2); }
.frame a.start-row { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: var(--sp-2); border-radius: var(--r-m);
  color: inherit; text-decoration: none; }
.frame a.start-row:hover { background: var(--c-raised); }
/* the window Start is opened over: "you are here" (aria-current), the look of the current place in Write's list (IDEAS 24 Oct 00:36) */
.frame a.start-row.is-front { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); }
/* Opened lately (FN-104, FN-105): the app's row with its Remove beside it */
.start-lately { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; }
.start-lately > a.start-row { flex: 1; min-width: 0; }
.start-lately > form { flex: none; }
.start-row :is(.ic-fluent, .ic-glass) { width: 36px; height: 36px; flex: none; }
.start-t { display: grid; min-width: 0; }
.start-t b { font-size: var(--fs-2); }
.start-t .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.start-power { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-top: var(--line) solid var(--c-line); padding-top: var(--sp-2); }
.quick-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-2); }
/* Quick settings at larger text on a laptop (DEPUTY_TESTER's pre-walk f-quick-settings, 1 Nov: at 125 % the panel grew wider
   than its 420 px and cut Theme's "Match computer", the switches and "150 %" behind a sideways scroll): the phone's rule for every
   width, a row whose choice is wider than the room puts the choice under its name, so every switch stays inside the panel */
.quick { grid-template-columns: minmax(0, 1fr); }
.quick-row { flex-wrap: wrap; min-width: 0; }
.quick-row > .seg { flex-wrap: wrap; max-width: 100%; }
/* Switch windows (K6, K7, rule book page o): a short list over the page; the chosen row is ringed */
.switcher { position: absolute; z-index: var(--z-menu-top); left: 50%; top: 40%; transform: translate(-50%, -50%); width: min(460px, calc(100% - 24px));
  display: grid; gap: var(--sp-2); --c-surface: rgb(var(--g-rgb, 255 255 255) / .94); box-shadow: var(--sh-pop); }
.switcher[hidden] { display: none; }
.sw-rows { display: grid; gap: var(--sp-1); max-height: calc(8 * (var(--ctl) + var(--sp-2))); overflow: auto; }
.frame a.sw-row { display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--ctl) + 4px); padding: 0 var(--sp-2);
  border-radius: var(--r-s); color: inherit; text-decoration: none; font-size: var(--fs-2); }
.sw-row :is(.ic-fluent, .ic-glass) { width: 24px; height: 24px; }
.sw-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.frame a.sw-row:hover, .frame a.sw-row.is-chosen { background: var(--c-raised); }
/* a row and its Close side by side (P16-210) */
.sw-item { display: flex; align-items: center; gap: var(--sp-1); }
.sw-item > a.sw-row { flex: 1; min-width: 0; }
.sw-close { flex: none; margin: 0; }
.frame a.sw-row.is-chosen { box-shadow: inset 0 0 0 2px var(--c-accent); }
/* Shortcuts (K14, rule book page q): a list over the page; its x comes after the tables and sits in the corner */
.keys { position: absolute; z-index: var(--z-menu); left: 50%; top: calc(50% - 40px); transform: translate(-50%, -50%); width: min(620px, calc(100% - 24px));
  max-height: calc(100% - 200px); overflow: auto; overscroll-behavior: none; display: grid; gap: var(--sp-3); --c-surface: rgb(var(--g-rgb, 255 255 255) / .92);
  box-shadow: var(--sh-pop); }
.keys > .keys-x { position: absolute; top: var(--sp-2); right: var(--sp-2); }
.keys-t { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.keys-t caption { text-align: left; padding-bottom: var(--sp-1); }
.keys-t :is(td, th) { padding: var(--sp-2) 0; border-top: var(--line) solid var(--c-line); vertical-align: top; }
.keys-t th.keys-k { width: 42%; white-space: nowrap; padding-right: var(--sp-3); text-align: left; font-weight: inherit; }
.keys-k > span { margin: 0 var(--sp-1); color: var(--c-ink-3); }
.keys kbd { font: var(--fs-1) var(--f-mono); padding: 0 var(--sp-2); border: var(--line) solid var(--c-line); border-bottom-width: 2px;
  border-radius: var(--r-s); background: var(--c-raised); color: var(--c-ink); }
.keys-later { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sp-2); font-size: var(--fs-2); color: var(--c-ink-2); }
.search-body { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; overflow: auto; }
.search-busy:empty { display: none; }
.search-body[aria-busy="true"] > :not(.search-busy) { opacity: .8; }
.os-desk > .win-search { width: min(100%, 760px); }
/* PB-06: the box takes the window's width, so its hint is read whole */
.win-search .search-form > .field { flex: 1; }
.dock-quick .ic { width: 26px; height: 26px; }
/* Maximise: the switch in the title bar widens the window to the whole desk */
.win:has(> .win-max:checked) { width: 100% !important; height: auto !important; transform: none !important; max-width: none; max-height: 100cqh; justify-self: stretch;
  border-radius: var(--r-m); }
.win-max-btn { cursor: pointer; }
.win-title { touch-action: none; cursor: grab; }
.win.is-moving { transition: none; cursor: grabbing; user-select: none; }
/* Snap to half (K8, K9): the front window takes the left or the right half of the desk */
.os-desk > .win.snap-left, .os-desk > .win.snap-right { width: calc(50% - var(--sp-2)) !important; height: auto !important; max-width: none;
  transform: none !important; }
.os-desk > .win.snap-left { justify-self: start; }
.os-desk > .win.snap-right { justify-self: end; }
/* Dragged to an edge (F-062) or the top (F-060): where the window will go, under the window, made by sos1.js */
.snap-preview { display: none; position: absolute; z-index: var(--z-base); top: var(--sp-5); bottom: var(--sp-3); border-radius: var(--r-l);
  background: var(--c-accent-soft); border: 2px solid var(--c-accent); pointer-events: none; }
.snap-preview.is-left, .snap-preview.is-right { display: block; width: calc((100% - 2 * var(--sp-5)) / 2 - var(--sp-2)); }
.snap-preview.is-left { left: var(--sp-5); }
.snap-preview.is-right { right: var(--sp-5); }
.snap-preview.is-top { display: block; left: var(--sp-5); right: var(--sp-5); }
/* Resize (F-056): eight grab areas just inside the window's edge (windows clip at their rounded corners), added by
   sos1.js; none while maximised, snapped or in a narrow room */
.os-desk > .win { position: relative; }
.win-rz { position: absolute; z-index: var(--z-pin); touch-action: none; }
.win-rz-n, .win-rz-s { left: 10px; right: 10px; height: 5px; cursor: ns-resize; }
.win-rz-e, .win-rz-w { top: 10px; bottom: 10px; width: 5px; cursor: ew-resize; }
.win-rz-n { top: 0; } .win-rz-s { bottom: 0; } .win-rz-e { right: 0; } .win-rz-w { left: 0; }
.win-rz-ne, .win-rz-nw, .win-rz-se, .win-rz-sw { width: 10px; height: 10px; }
.win-rz-ne { top: 0; right: 0; cursor: nesw-resize; } .win-rz-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.win-rz-nw { top: 0; left: 0; cursor: nwse-resize; } .win-rz-se { bottom: 0; right: 0; cursor: nwse-resize; }
.win:has(> .win-max:checked) > .win-rz, .win.snap-left > .win-rz, .win.snap-right > .win-rz { display: none; }
.win.is-sizing { transition: none; user-select: none; }
/* The desktop under the windows (AD-081): its widgets keep their places in the desk's grid; behind a window it is
   inert, and a press on bare desktop (its cover, under every window) goes back to it */
.desk-layer { display: contents; }
/* BOS's conversation: one scrolling log above the note and the box; a graph BOS made keeps its own height in it */
.chat-log { min-height: 0; overflow: auto; overscroll-behavior: none; scroll-padding-bottom: var(--sp-3); padding-bottom: var(--sp-2); display: grid; align-content: start; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.chat-log .gen { height: 340px; }
/* Settings > Privacy and Keys: one card per connection, what SOS sees of it, and its Purge */
.conn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; padding: var(--sp-3); }
.conns > .conn + .conn { border-top: var(--line) solid var(--c-line); }
.conn.is-current { background: var(--c-accent-soft); border-radius: var(--r-s); }
.conn-h { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); }
.conn-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-1) var(--sp-4); margin: 0; font-size: var(--fs-1); }
.conn-kv dt { color: var(--c-ink-3); }
.conn-kv dd { margin: 0; overflow-wrap: anywhere; }
/* audio and video in the Files preview (AD-082 c): the browser's own player */
.preview-media { width: 100%; max-height: 220px; border-radius: var(--r-m); background: var(--c-surface-2); }
.preview-audio { width: 100%; }
/* a Bin that takes a dropped file (sos1.js, DragToBin): ringed while a file is held over it */
[data-bin].is-drop { box-shadow: inset 0 0 0 2px var(--c-accent); background: var(--c-accent-soft); border-radius: var(--r-m); }
/* Lists and panes inside a window scroll on their own (they were cut off when longer than the window), and the
   browser's own end-of-list effect is off there: at the end, the window leans instead (sos1.js, WindowLean, AD-080) */
.files-list, .set-pane, .files-preview { overflow: auto; }
/* F2 (DEPUTY_TESTER, 1 Nov 2026): every row is as tall as what it holds. The list is a grid with a fixed height and its rows were
   `auto`: with no room to spare an auto row stays at its smallest (the row's 40 px minimum), so a row holding a name, a status line and
   a size line (about 110 px on a phone) was drawn 40 px high and its lines ran over the rows below (measured at 390: rows 42 px apart,
   content 127; max-content gives 121-px steps, as the Files preview already does) */
.files-list { grid-auto-rows: max-content; }
/* Team files (DEPUTY_TESTER, 1 Nov 2026: "unstyled in a window: bare heading, text and form flush to the window edge"): the page had no rules of
   its own. The window's padding and gap, the folders and files as rows, each section a card with room inside, and a row's buttons beside its words
   (wrapping under them when the window is narrow) */
.team-files { display: grid; gap: var(--sp-4); padding: var(--pad-win); align-content: start; }
.team-files :is(h2, h3, p, ul) { margin: 0; }
.team-files .sub-h { margin-top: 0; }
.team-list, .team-rows { display: grid; gap: var(--sp-1); list-style: none; padding: 0; }
.team-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-3); min-height: var(--row); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-m); overflow-wrap: anywhere; }
.team-row:hover { background: var(--c-surface-2); }
.team-row .btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.team-files .group { gap: var(--sp-3); padding: var(--sp-4); }
.team-files .group > form { display: grid; gap: var(--sp-3); justify-items: start; }
.team-files .group > form .form-row, .team-files .group > form .field { max-width: 100%; }
.win :is(.files-list, .set-pane, .files-preview, .search-body, .preview-text) { overscroll-behavior: none; }
/* the desk's height comes from the shell's grid, so it can be a size container: a window is never taller than the desk,
   even where the widgets' column runs longer than the desk and stretches its grid */
.os-desk { container-type: size; }
/* and, moved down, never taller than the room left below its top (PB-03; sos1.js sets --fit-h), so its foot stays above the dock */
.os-desk > .win { max-height: min(100cqh, var(--fit-h, 100cqh)); }
.desk-cover { position: absolute; inset: 0; z-index: var(--z-base); }
/* The desktop's icons (AD-081, rule book page s): cells of 96 x 104 px in the free middle of the desk; the c-/r- classes
   place each icon in its cell (pages carry no style attributes). The label sits on a little glass, so it reads on any
   wallpaper */
.desk-icons { grid-area: main; display: grid; grid-template-columns: repeat(auto-fill, 96px); grid-auto-rows: 104px; align-content: start;
  gap: var(--sp-1); min-height: 0; }
.frame a.desk-icon { display: grid; justify-items: center; align-content: start; gap: var(--sp-1); padding: var(--sp-2) var(--sp-1) var(--sp-1); border-radius: var(--r-m);
  color: var(--c-ink); text-decoration: none; font-size: var(--fs-2); text-align: center; touch-action: none; min-width: 0; }
.desk-icon :is(.ic-fluent, .ic-glass) { width: 52px; height: 52px; }
/* a name on two lines, then "..." (Pavel 29 Oct: "Docume...", "Recordin..." on one line of 72 px); a word longer than the line breaks
   inside itself only then; the whole of a longer name shows in place on hover or focus (CutText, sos1.js). Two lines fit the 104 px row */
.desk-icon span { max-width: 100%; padding: 0 var(--sp-1); border-radius: var(--r-s); background: rgb(var(--g-rgb) / .72); overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; line-height: 1.25; overflow-wrap: break-word; }
.frame a.desk-icon:hover { background: rgb(var(--g-rgb) / .28); }
.frame a.desk-icon.is-chosen { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); }
.desk-icon.is-moving { position: relative; z-index: var(--z-lift); opacity: .85; cursor: grabbing; }
.desk-icons > .c-0 { grid-column: 1; } .desk-icons > .c-1 { grid-column: 2; } .desk-icons > .c-2 { grid-column: 3; } .desk-icons > .c-3 { grid-column: 4; }
.desk-icons > .c-4 { grid-column: 5; } .desk-icons > .c-5 { grid-column: 6; } .desk-icons > .c-6 { grid-column: 7; } .desk-icons > .c-7 { grid-column: 8; }
.desk-icons > .c-8 { grid-column: 9; } .desk-icons > .c-9 { grid-column: 10; } .desk-icons > .c-10 { grid-column: 11; } .desk-icons > .c-11 { grid-column: 12; }
.desk-icons > .c-12 { grid-column: 13; } .desk-icons > .c-13 { grid-column: 14; } .desk-icons > .c-14 { grid-column: 15; } .desk-icons > .c-15 { grid-column: 16; }
.desk-icons > .c-16 { grid-column: 17; } .desk-icons > .c-17 { grid-column: 18; } .desk-icons > .c-18 { grid-column: 19; } .desk-icons > .c-19 { grid-column: 20; }
.desk-icons > .c-20 { grid-column: 21; } .desk-icons > .c-21 { grid-column: 22; } .desk-icons > .c-22 { grid-column: 23; } .desk-icons > .c-23 { grid-column: 24; }
.desk-icons > .c-24 { grid-column: 25; } .desk-icons > .c-25 { grid-column: 26; } .desk-icons > .c-26 { grid-column: 27; } .desk-icons > .c-27 { grid-column: 28; }
.desk-icons > .c-28 { grid-column: 29; } .desk-icons > .c-29 { grid-column: 30; } .desk-icons > .c-30 { grid-column: 31; } .desk-icons > .c-31 { grid-column: 32; }
.desk-icons > .c-32 { grid-column: 33; } .desk-icons > .c-33 { grid-column: 34; } .desk-icons > .c-34 { grid-column: 35; } .desk-icons > .c-35 { grid-column: 36; }
.desk-icons > .c-36 { grid-column: 37; } .desk-icons > .c-37 { grid-column: 38; } .desk-icons > .c-38 { grid-column: 39; } .desk-icons > .c-39 { grid-column: 40; }
.desk-icons > .r-0 { grid-row: 1; } .desk-icons > .r-1 { grid-row: 2; } .desk-icons > .r-2 { grid-row: 3; } .desk-icons > .r-3 { grid-row: 4; }
.desk-icons > .r-4 { grid-row: 5; } .desk-icons > .r-5 { grid-row: 6; } .desk-icons > .r-6 { grid-row: 7; } .desk-icons > .r-7 { grid-row: 8; }
.desk-icons > .r-8 { grid-row: 9; } .desk-icons > .r-9 { grid-row: 10; } .desk-icons > .r-10 { grid-row: 11; } .desk-icons > .r-11 { grid-row: 12; }
.desk-icons > .r-12 { grid-row: 13; } .desk-icons > .r-13 { grid-row: 14; } .desk-icons > .r-14 { grid-row: 15; } .desk-icons > .r-15 { grid-row: 16; }
.desk-icons > .r-16 { grid-row: 17; } .desk-icons > .r-17 { grid-row: 18; } .desk-icons > .r-18 { grid-row: 19; } .desk-icons > .r-19 { grid-row: 20; }
.desk-icons > .r-20 { grid-row: 21; } .desk-icons > .r-21 { grid-row: 22; } .desk-icons > .r-22 { grid-row: 23; } .desk-icons > .r-23 { grid-row: 24; }
/* Several windows (F-073): the ones behind the front window are inert, their title bars quieter; a press anywhere on
   one is its cover link, which brings it forward, and so does its dock button. A minimised window's dock dot is hollow
   (F-034) */
.win-cover { position: absolute; inset: 0; z-index: var(--z-cover); border-radius: inherit; }
.os-desk > .win.is-behind { box-shadow: var(--sh-card); }
.os-desk > .win.is-behind > .win-title { opacity: .6; }
.dock-i.is-running.is-min::after { background: transparent; box-shadow: inset 0 0 0 1px var(--c-ink-2); width: 5px; height: 5px; }
/* The window menu (rule book page n, F-057): the app's icon opens it. Snap, Move and Size need sos1.js, so they show
   only while it runs (html.js); in a narrow room they are dimmed, with the reason */
.win-menu { position: relative; display: flex; }
.win-menu > summary { list-style: none; cursor: pointer; }
.win-menu > summary::-webkit-details-marker { display: none; }
.win-menu-list { top: calc(100% + 6px); left: 0; z-index: var(--z-lift-2); min-width: min(330px, calc(100vw - 2 * var(--sp-5))); box-shadow: var(--sh-pop); }
.win-menu-list .menu-i kbd { white-space: nowrap; padding-left: var(--sp-3); }
.win-menu-list .menu-i { width: 100%; border: 0; font: inherit; text-align: left; cursor: pointer; }
.win-menu .js-only, .win-menu .wm-why { display: none; }
.js .win-menu .js-only { display: flex; }
.win-max:focus-visible + .win-title .win-max-btn { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* Narrow mode (rule book page n, F-080): under 840 px every window fills the desk, snapped ones too; its own place and
   size come back when the room grows. In this layer, so it beats the snap rule above (!important: earlier layers win) */
@container frame (max-width: 839px) {
  .os-desk > .win:is(.win, .snap-left, .snap-right) { width: 100% !important; height: auto !important;
    justify-self: center; }
  /* PB-20 (UI 06:00, D2): a narrow room keeps its windows in place, but a window leaning at a list's end (WindowLean,
     AD-080: data-lean while it leans) keeps its inline rotation; paint() writes no translate in a narrow room */
  .os-desk > .win:is(.win, .snap-left, .snap-right):not([data-lean]) { transform: none !important; }
  .win-rz { display: none; }
  .js .win-menu [data-wm] { opacity: .5; }
  .js .win-menu .wm-why { display: block; margin: 0; padding: var(--sp-1) var(--sp-2); }
  /* Keep on top does nothing where every window fills the desk (IDEAS and DESIGN_C 02:38): not offered */
  .win-menu :is(.wm-top-keep, .wm-top-stop) { display: none !important; }
  /* PB-11b (200 % zoom on 1440x900: a 720 px page): the shell's one column never grows past the screen, so the desk and
     its window stay inside it; the dock fits the screen and scrolls sideways when its apps do not fit; the window starts
     below Favourites' tab, never under it */
  .os { grid-template-columns: minmax(0, 1fr); }
  .os-dock { max-width: calc(100% - 2 * var(--sp-2)); min-width: 0; overflow-x: auto; overscroll-behavior-x: none; }
  .os-desk > .win { max-width: 100%; margin-top: var(--sp-6); }
}
}

@layer core-phone {
@container frame (max-width: 640px) {
  .row.slider { flex-wrap: wrap; }
  .row.slider input[type="range"] { width: 100%; order: 3; }
  .graph-form .search { max-width: none; }
}
}

@layer core-phone {
@container frame (max-width: 640px) {
  /* row 9 (EDGES, HARD SWEEP phone.md; DEPUTY_UI2 14:59: --dock-h is EDGES's): ONE number for the phone tab bar's height.
     The sheets below, the toast, the two standing notes and the You menu each stood on their own guess of the bar (62,
     72 and 74 px plus the home bar's room), 4 to 16 px apart, and none followed the bar at another text size or line.
     The bar's row is now the tab's own sum (core.css phone block: 4 px top, the 0.9 x --ctl icon, 2 px, the label's one
     line of 1.5 at its size, -2 px), so --dock-h is the bar's real height: its line, 4 px, the row and the home bar's room.
     Each of them stands 8 px (--sp-2) above it. DEPUTY_UI2's float and toast lines read --dock-h too */
  .os { --dock-row: calc(var(--sp-1) + var(--ctl) * .9 + 2px + 1.5 * min(calc(var(--fs-1) * 5 / 6), 15px) - 2px);
    --dock-h: calc(var(--line, 1px) + var(--sp-1) + var(--dock-row) + max(var(--sp-4), env(safe-area-inset-bottom, 0px))); }
  .os-dock .dock-i { height: var(--dock-row); box-sizing: border-box; }
  .avatar-menu { bottom: calc(var(--dock-h) + var(--sp-2)); }
  .start, .quick { bottom: calc(var(--dock-h) + var(--sp-2)); left: 12px; right: 12px; width: auto; transform: none; }
  /* Quick settings fits the phone: a row whose choice is wider than the room puts the choice under its name, so Theme's
     "Match computer", Text size's last size and the switches stay inside the panel (round-1b 03-quick: cut at 407 of 402;
     IDEAS phone-apps-1) */
  .quick-row { flex-wrap: wrap; min-width: 0; }
  .quick-row > .seg { flex-wrap: wrap; max-width: 100%; }
  /* Start's letters are a thumb's size (round-1b 02-start: 19 x 14 px; P16-85), wrapping under "All apps" */
  .frame a.start-l { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* one column on a phone, so an app's few words show whole (P16-212: two columns cut each to two words, "Semurg BOS's o...") */
  .start-recent, .start-list { grid-template-columns: minmax(0, 1fr); }
  /* while Switch windows is open its words go to the top, never behind the sheet (WRITER1's Minor 1) */
  .look-a .os:has(.switcher:not([hidden])) .toast { top: 56px; bottom: auto; }
  /* P16-418: a full desk opens Switch windows with its reason on its own line, so the toast that repeats it is not drawn
     over the window's title */
  .look-a .os:has(.switcher:not([hidden]) .sw-why) .toast { display: none; }
  /* P16-415: a phone has no keyboard, so Quick settings does not offer Single-key shortcuts (Settings > Keyboard keeps it) */
  .quick-row:has(button[name="single_keys"]) { display: none; }
  /* no keyboard on a phone: the switcher's Ctrl+` line is not shown (WRITER1's Minor 2) */
  .sw-keys { display: none; }
  .keys { top: 12px; bottom: calc(var(--dock-h) + var(--sp-2)); left: 12px; right: 12px; width: auto; max-height: none; transform: none; }
  .switcher { top: auto; bottom: calc(var(--dock-h) + var(--sp-2)); left: 12px; right: 12px; width: auto; transform: none; }
  .desk-icons { display: none; }
  .keys-t th.keys-k { width: 46%; white-space: normal; }
  .dock-quick, .os-dock .dock-i.dock-quick { display: none; }
  .look-a .os .toast { display: flex; top: auto; bottom: var(--toast-b, calc(var(--dock-h) + var(--sp-2))); left: 12px; right: 12px; }
  /* on a phone the standing lines take a row of their own above the dock, as tall as their words wrap at any text size, so the
     toast goes to the top while one shows, as it does for Switch windows below, rather than guess that row's height */
  .look-a .os:is(:has(> .os-notes > .key-note:not(.live-down)), :has(.phx-server-error)) .toast { top: 56px; bottom: auto; }
}
}

/* Files dropped from the person's own computer (AD-084): the place that takes them is ringed while they are held over
   it (a folder row: the row), and each file's progress shows in a panel in the corner until the page loads again */
@layer core {
.drop-live { position: absolute; right: var(--sp-4); bottom: var(--sp-4); z-index: var(--z-drop-live); width: min(400px, calc(100% - 2 * var(--sp-4)));
  pointer-events: none; }
.drop-live > .drop > * { pointer-events: auto; }
.drop-form { display: none; }
/* the selection box (Pavel, 19 Oct, as his own system draws it): see-through orange with a brighter edge; what it
   touches is chosen */
.sel-box { position: fixed; z-index: var(--z-drag); pointer-events: none; background: var(--c-sel-fill); border: 1px solid var(--c-sel-line); border-radius: 2px; }
.files-r.is-chosen { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); border-radius: var(--r-s); }
.files-list, .desk-icons { -webkit-user-select: none; user-select: none; }
/* the person's own picture as the wallpaper (contract v32), over the built-in one */
.os-wall { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Wallpaper: Choose… (from SOS, from this computer) and Default */
.wall-row { flex-wrap: wrap; }
.wall-choose { position: relative; }
.wall-choose > summary { list-style: none; cursor: pointer; }
.wall-choose > summary::-webkit-details-marker { display: none; }
/* the wallpaper's upload box is a hidden Tab stop (Space or Enter opens this computer's chooser): while it has the
   keyboard's focus, Choose… wears the focus ring and "From this computer" shows beside it (WCAG 2.4.7; IDEAS 23:55) */
.wall-pc-hint { display: none; }
.frame:has(#wall-form input:focus-visible) .wall-choose > summary { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.frame:has(#wall-form input:focus-visible) .wall-pc-hint { display: inline; }
.wall-menu { top: calc(100% + 4px); right: 0; --c-surface: rgb(var(--g-rgb, 255 255 255) / .97); }
.wall-menu label.menu-i { cursor: pointer; }
.wall-form { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* the built-in wallpapers to pick from (AD-106), each with a small picture of itself in the look now (light or dark) */
.wall-picks .seg-o { gap: var(--sp-2); }
.wall-sw { display: inline-block; flex: none; width: 40px; height: 25px; border-radius: var(--r-s); border: 1px solid var(--c-line); background: var(--wall-ribbons); }
.wall-sw-dunes { background: var(--wall-dunes); }
.wall-sw-tide { background: var(--wall-tide); }
.wall-sw-horizon { background: var(--wall-horizon); }
.wall-sw-slate { background: var(--wall-slate); }
/* the Web window (AD-091): the address box, the privacy label, a sandboxed frame or a site in its own tab, tiles */
.win-web .win-tools { flex-wrap: wrap; }
.web-go { flex: 1 1 18rem; min-width: 0; }
.web-go .field { flex: 1; min-width: 0; }
.web-label { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); color: var(--c-ink-2); white-space: nowrap; }
.web { display: grid; align-content: start; gap: var(--sp-3); padding: var(--sp-4); min-height: 0; overflow: auto; }
.web.has-frame { grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; padding: var(--sp-2); }
.web-frame { width: 100%; height: 100%; min-height: 360px; border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-page); }
.web-why { font-size: var(--fs-1); }
.web-tab { gap: var(--sp-2); max-width: 560px; }
.web-h { font: var(--w-strong) var(--fs-4)/1.25 var(--f-display); overflow-wrap: anywhere; }
.web-start { display: grid; gap: var(--sp-2); max-width: 640px; }
.web-tile { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m); background: var(--c-surface-2); border: var(--line) solid var(--c-line); }
.web-tile-a { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; color: inherit; text-decoration: none; }
.web-tile-a :is(.ic-fluent, .ic-glass) { width: 28px; height: 28px; flex: none; }
.web-tile-a > span { display: grid; min-width: 0; }
.web-tile-a .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-add { justify-self: start; display: flex; }
/* no model chosen, one ready (TESTER SW-06): BOS names it, with one press for the librarian */
.bos-suggest { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) var(--sp-3) 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m); background: var(--c-accent-soft); font-size: var(--fs-2); }
.bos-suggest > span:first-of-type { flex: 1 1 16rem; min-width: 0; }
/* what a BOS answer took from memory (contract v36): its marks open their item; the shield tells the count */
/* the shared button's own line breaks would show in an answer that keeps its line breaks: one run, no wrap */
.mem-ref-w { white-space: nowrap; }
.frame button.mem-ref { display: inline-block; white-space: nowrap; min-height: 0; padding: 0 var(--sp-1); margin: 0; border: 0; background: none; font: inherit; font-size: .8em; vertical-align: super;
  color: var(--c-accent); cursor: pointer; border-radius: 3px; }
.frame button.mem-ref:hover, .frame button.mem-ref:focus-visible { background: var(--c-accent-soft); }
/* the answer's layout (founder's walk 4 Nov 2026; DESIGN_LEAD): the same-name note leads, rows carry their sources at the end,
   a label line is a sub-heading; a source is its name and place on a quiet chip, on the line, not raised as a footnote code */
.ans { display: grid; gap: var(--sp-2); min-width: 0; justify-items: stretch; }
.ans > p { margin: 0; }
.ans-lead { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--c-accent-soft); font-weight: var(--w-strong); }
.ans > .ans-h { margin-top: var(--sp-2); font-weight: var(--w-strong); }
.ans-list { display: grid; margin: 0; padding: 0; list-style: none; }
.ans-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); padding-block: var(--sp-1); border-bottom: var(--line) solid var(--c-line); }
.ans-row:last-child { border-bottom: 0; }
.ans-t { flex: 1 1 16rem; min-width: 0; }
.ans-row > .ans-src { margin-left: auto; text-align: end; }
.ans-src { display: inline-flex; flex-wrap: wrap; gap: var(--sp-1); }
.ans p > .ans-src { margin-left: var(--sp-1); }
.frame .ans button.mem-ref { vertical-align: baseline; font-size: var(--fs-1); padding: 1px var(--sp-2); color: var(--c-ink-2); background: var(--c-surface-2); border-radius: var(--r-pill); }
.frame .ans button.mem-ref:hover, .frame .ans button.mem-ref:focus-visible { color: var(--c-accent); background: var(--c-accent-soft); }
/* on a touch screen the chip is the control that opens a source: the button's own box is a --hit target (48 px; DR11 asks
   44 and measures the button's box), made of clear top and bottom borders; the pill stays drawn small, on the padding box
   only; rows of chips touch and never overlap (DESIGN_A N-1, 06:00) */
@media (pointer: coarse) {
  .frame .ans .ans-src { column-gap: var(--sp-2); row-gap: 0; }
  .frame .ans button.mem-ref { min-width: var(--hit); padding-block: var(--sp-1); border-block: calc((var(--hit) - 1lh - 2 * var(--sp-1)) / 2) solid transparent; background-clip: padding-box; }
}
.ans-links:empty { display: none; }
.mem-pop { max-width: min(420px, calc(100vw - 32px)); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m); border: var(--line) solid var(--edge);
  background: rgb(var(--g-rgb, 255 255 255) / .97); color: var(--c-ink); box-shadow: var(--sh-pop); display: none; gap: var(--sp-1); }
.mem-pop:popover-open { display: grid; }
.mem-pop .note { font-size: var(--fs-1); }
.msg-mem { font-size: var(--fs-1); }
/* CB-2 without clutter: the answer's sentences with no source, underlined only while the quiet line under it is open */
.msg-own { font-size: var(--fs-1); }
.msg-own-s { cursor: pointer; color: var(--c-ink-2); list-style: none; }
/* r3 (DESIGN_A): no disclosure triangle; "Show it" and "Hide" say the state, as the memory line's summary does */
.msg-own-s::-webkit-details-marker { display: none; }
.msg-own > .note { margin-top: var(--sp-1); }
.own-sr { display: none; }
.own-hide { display: none; }
.msg-own[open] .own-show { display: none; }
.msg-own[open] .own-hide { display: inline; }
/* r3 (DESIGN_A): the space before the span is the gap; a margin on top of it made two */
.own-show, .own-hide { text-decoration: underline; }
/* the preview: keyboard focus anywhere, hover only where a pointer hovers (r3, DESIGN_A: on a phone :hover sticks after a tap) */
.msg:has(.msg-own-s:focus-visible) .own-w { text-decoration: underline dotted var(--c-ink-2); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
@media (hover: hover) { .msg:has(.msg-own-s:hover) .own-w { text-decoration: underline dotted var(--c-ink-2); text-decoration-thickness: 1.5px; text-underline-offset: .2em; } }
.msg:has(.msg-own[open]) .own-w { text-decoration: underline dotted var(--c-ink); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.msg:has(.msg-own[open]) .own-sr { display: inline; }
@media (pointer: coarse) { .msg-own { min-width: 0; } .msg-own-s { min-height: 44px; padding-block: var(--sp-1); } }
.msg-mem-s { display: inline-flex; align-items: center; gap: var(--sp-1); cursor: pointer; color: var(--c-ink-2); list-style: none; }
.msg-mem-s::-webkit-details-marker { display: none; }
/* "Ask for this" under an answer to something BOS cannot do from chat yet (acts paper D) */
.ask-for { margin-top: var(--sp-2); }
.ask-for-form { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); max-width: 40rem; }
.msg-mem-b { display: grid; gap: var(--sp-1); margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--c-surface-2); }
.mem-list, .mem-looked { display: grid; gap: var(--sp-1); margin: 0; padding-left: 1.2em; }
/* Models (Pavel, 19 Oct; contract v34): a dot for how each model is now; the widget is one link to the window */
:root { --mdot-w: 9px; }   /* the dot's one size: .mdot draws it and a phone's model note sits past it (DESIGN_LEAD n-1) */
.mdot { display: inline-block; width: var(--mdot-w); height: var(--mdot-w); border-radius: 50%; flex: none; background: var(--c-ink-3); }
.mdot-good { background: var(--c-good); } .mdot-idle { background: var(--c-warn); } .mdot-bad { background: var(--c-danger); }
.mdot-off { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-ink-3); } .mdot-wait { background: var(--c-line); }
.frame a.w-models-a { display: grid; gap: var(--sp-2); color: inherit; text-decoration: none; }
.frame a.w-models-a:hover .card-h, .frame a.w-models-a:focus-visible .card-h { color: var(--c-ink); text-decoration: underline; }
/* a card that is a row-link: only its heading underlines (design standard DS28) */
.frame a.w-models-a.row-link:hover { text-decoration: none; }
.w-model { display: flex; align-items: baseline; gap: var(--sp-2); min-width: 0; }
.w-model .note { margin-left: auto; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the card while it reads (PB-22): its first line in the quiet ink, and two rows and the load line held unseen */
.w-wait-t { color: var(--c-ink-2); }
.w-wait { visibility: hidden; }
/* Pavel 22 Oct 20:43: the Models list was cut at the window's foot. Its overflow sat inside a wrapper with no height, so
   the window's body (core.css: overflow hidden) cut it; the body scrolls, as Write's, Calendar's and Tasks' do */
.win-models .win-body { overflow: auto; }
/* the same in Settings and Control Panel (MASTER 20:43, "check the other System windows"): their grid's one row took its
   content's height, so a long pane (Machines on a short screen) ran past the window's foot and its own scroll never
   began; the row is the window's height, and the page list beside it scrolls too */
.set { grid-template-rows: minmax(0, 1fr); }
.set-side { min-height: 0; overflow-y: auto; }
.models { display: grid; gap: var(--sp-4); padding: var(--sp-4); }
.models-mh { font: var(--w-strong) var(--fs-5)/1.2 var(--f-display); }
.models-m, .models-k { display: grid; gap: var(--sp-2); }
/* the live line keeps its two lines from the first paint, so the reading arriving half a second later never moves the
   page (PB-05; DEPUTY_UI's walk: a layout shift of 0.15) */
.models-at { min-height: calc(2em * var(--lh-body)); }
.model { display: grid; gap: var(--sp-1); padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2); border: var(--line) solid var(--c-line); }
.model-h { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.model-state { margin-left: auto; font-size: var(--fs-2); }
.model-state.is-good { color: var(--c-good); } .model-state.is-bad { color: var(--c-danger); } .model-state.is-off, .model-state.is-wait { color: var(--c-ink-2); }
.model-job { color: var(--c-ink-2); }
/* the facts side by side where there is room, each label beside its value */
.model-kv { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); column-gap: var(--sp-5); font-size: var(--fs-2); }
.model-kv div { justify-content: flex-start; }
.model-kv dt { flex: none; min-width: 6.5em; }
.model-kv dd { overflow-wrap: anywhere; }
/* Properties: a small panel, its groups rolled up (Pavel, 19 Oct) */
.props { position: absolute; z-index: var(--z-menu); left: 50%; top: calc(50% - 40px); transform: translate(-50%, -50%); width: min(440px, calc(100% - 24px));
  max-height: calc(100% - 160px); overflow: auto; overscroll-behavior: none; display: grid; gap: var(--sp-2); --c-surface: rgb(var(--g-rgb, 255 255 255) / .94); box-shadow: var(--sh-pop); }
.props > .keys-x { position: absolute; top: var(--sp-2); right: var(--sp-2); }
.props-h { display: flex; align-items: center; gap: var(--sp-2); padding-right: calc(var(--ctl) + var(--sp-1)); font: var(--w-strong) var(--fs-4)/1.25 var(--f-display); overflow-wrap: anywhere; }
.props-h :is(.ic-fluent, .ic-glass) { width: 32px; height: 32px; flex: none; }
.props-g { border-top: var(--line) solid var(--c-line); padding-top: var(--sp-2); }
.props-g > summary { cursor: pointer; font-weight: var(--w-strong); padding: var(--sp-1) 0; }
.props-g .kv { margin-top: var(--sp-2); }
.props-g dd { overflow-wrap: anywhere; }
.props-ess { margin: 0; }
.props-ess dd { overflow-wrap: anywhere; }
/* "More details": one fold for everything beyond the essentials (Pavel, 1 Nov: "Looks like too much of properties"); its groups stay rolled up inside */
/* About BOS > Open-source licences: a closed fold, then plain lists (Pavel, 2 Nov 2026) */
.lic-more { border-top: var(--line) solid var(--c-line); padding-top: var(--sp-2); margin-top: var(--sp-3); }
.lic-more .more-b { color: inherit; font-size: inherit; }
.lic-more .more-b > .note, .lic-more .more-b > .lic-group { margin-top: var(--sp-2); }
.lic-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.lic-list li { overflow-wrap: anywhere; min-width: 0; }
.props-more { border-top: var(--line) solid var(--c-line); padding-top: var(--sp-2); }
.props-more > summary { cursor: pointer; font-weight: var(--w-strong); padding: var(--sp-1) 0; }
.props-more > .props-sec, .props-more > .note { margin-top: var(--sp-2); }
.props-sec-h { font-size: var(--fs-1); font-weight: var(--w-strong); color: var(--c-ink-2); margin: var(--sp-2) 0 var(--sp-1); }
.props-sec dd, .props-more dd { overflow-wrap: anywhere; min-width: 0; }
/* a phone's fold is a full-width row of 44 px at least: a space token of padding, never display:flex (a summary that is not a list item loses its marker); 12 px each side and one line make 44 */
@media (pointer: coarse) { .props-more > summary { padding-block: var(--sp-3); } }
/* a panel narrower than about 360 px (the panel's own width, not the window's) puts each value under its label */
.props { container-type: inline-size; }
@container (max-width: 360px) { .props-ess div, .props-sec .kv div { flex-direction: column; gap: 0; } }
/* a label keeps its own width beside a long answer (DEPUTY_TESTER, 2 Nov, 1440 wide: "Who can see it" wrapped to three lines); only the answer wraps */
.props-ess dt, .props-sec .kv dt { flex: none; }
.files-add { display: none; justify-self: start; }
.js .files-add { display: inline-flex; }
.files-drop { display: none; margin: var(--sp-3) 0 0; }
.js .files-drop { display: block; }
.win-files.is-drop { box-shadow: 0 0 0 3px var(--c-accent), var(--sh-win); }
.win-files.is-drop .files-list { background: var(--c-accent-soft); }
/* the preview's way back to its list: only where one pane shows at a time, a phone (P16-120) */
.files-pv-back { display: none; }
.os-desk.is-drop::after { content: ""; position: absolute; inset: var(--sp-3); z-index: var(--z-drop); border: 3px dashed var(--c-accent); border-radius: var(--r-l);
  background: var(--c-accent-soft); pointer-events: none; }
.files-r.is-drop { background: var(--c-accent-soft); box-shadow: inset 0 0 0 2px var(--c-accent); border-radius: var(--r-s); }
.drop-panel { display: grid; gap: var(--sp-2); max-height: min(60vh, 520px); overflow: auto; overscroll-behavior: none; padding: var(--sp-3);
  border-radius: var(--r-l); border: var(--line) solid var(--edge); background: var(--c-surface); box-shadow: var(--sh-pop); }
.drop-h { display: flex; align-items: center; gap: var(--sp-2); }
.drop-h b { flex: 1; min-width: 0; font: var(--w-strong) var(--fs-3)/1.2 var(--f-display); }
.drop-all { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); }
.drop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.drop-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-1) var(--sp-2); font-size: var(--fs-2); }
.drop-n { grid-column: 1 / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink); }
.drop-r progress { width: 100%; height: 6px; accent-color: var(--c-accent); }
.drop-pct { min-width: 4ch; text-align: right; }
.drop-r.is-clash .note, .drop-r.is-clash .btns { grid-column: 1 / -1; }
.drop-r.is-done { grid-template-columns: minmax(0, 1fr) auto; }
.drop-r.is-done .drop-n { grid-column: auto; color: var(--c-ink-2); }
.drop-r.is-bad .note { color: var(--c-danger); }
}

/* People (contract v22): everyone in a list, the chosen person, an invitation or the log beside it */
@layer core {
.os-desk > .win-people { width: min(100%, 1180px); }
/* F3 (DEPUTY_TESTER, 1 Nov 2026): People beside Files at 1440 is a 707 px window, wider than the phone rules' 640 px, and its tools
   ran off the right edge (the switch's words stacked one to a line, the counts cut). The tools wrap at any width; the buttons keep
   their words on one line; the counts take what is left of a line and wrap inside their own box, never past the window. */
/* P1-P4 (people-settings-clean r2, DESIGN_LEAD L1-L4, 3 Nov 2026): ONE row at every width, Invite someone, More and (over 10
   people) the find box; the count is a quiet line above the column names; More shows a pressed look while open (as Fusion's) and
   its list stays inside the window, ending above the floating hex on a phone. */
.win-people .win-tools { flex-wrap: nowrap; }
.win-people .win-tools .btn { white-space: nowrap; }
/* Invite someone keeps its whole width and the find box gives way (at 390 px it was squeezed past its own words, 3 Nov 17:49);
   on a phone it is its plus sign only, its words kept for screen readers and as its title, so the find box has room and More's
   list ends inside the window (18:13: the find box was 37 px and the list ran 26 px past the window) */
.win-people .win-tools > .btn { flex: none; }
@container frame (max-width: 480px) {
  /* at least 44 px wide and tall, a thumb's size (DESIGN_B r3 note 4) */
  .win-people .win-tools > .btn { min-width: var(--ctl-l); min-height: var(--ctl-l); justify-content: center; padding-inline: var(--sp-2); }
  .win-people .win-tools > .btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.people-more { position: relative; flex: none; }
.people-more > summary { list-style: none; cursor: pointer; }
.people-more > summary::-webkit-details-marker { display: none; }
.people-more[open] > summary { background: var(--c-accent-soft); box-shadow: inset 0 0 0 var(--line) var(--c-line); }
/* layer: --z-more (20, the number main had; DESIGN_B M-1, 3 Nov). DESIGN_C's --z-menu is 40, a desk-wide menu layer, not this list's.
   max-height: the 160px leaves room above the list for the window's title bar, People's toolbar and the gap under
   More, so the list's end stays in view above the floating hex (DESIGN_B S-3) */
.people-more-list { position: absolute; left: 0; top: calc(100% + var(--sp-1)); z-index: var(--z-more); min-width: 220px;
  max-width: calc(100cqw - 2 * var(--sp-3)); max-height: calc(100dvh - var(--toast-b, 96px) - 160px); overflow: auto; }
.people-find { flex: 0 1 16rem; min-width: 0; margin-left: auto; }
.people-n { margin: 0 0 var(--sp-1); padding: 0 var(--sp-2); font-size: var(--fs-1); color: var(--c-ink-2); }
.people-unlock { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; padding: var(--sp-2); }
.people-unlock > .ic { flex: none; }
.people-none { padding: var(--sp-5); }
.people { display: grid; grid-template-columns: minmax(0, 1fr); height: 100%; }
.people.has-side { grid-template-columns: minmax(0, 1fr) var(--pane-people-side, 380px); position: relative; }
.people > .split { --split-at: var(--pane-people-side, 380px); }
.people-list { min-width: 0; overflow: auto; overscroll-behavior: none; padding: var(--sp-2) var(--sp-3); align-content: start; display: grid; }
/* L8 (people-settings-clean r2): Name takes the free space; Role one word with the key; status chips and Last sign-in on one line */
.people-head, .people-r { display: grid; grid-template-columns: minmax(min(12rem, 35%), 2.2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-2);
  align-items: center; padding: var(--sp-2) var(--sp-2); }
.people-head { font: var(--w-strong) var(--fs-1)/1 var(--f-ui); color: var(--c-ink-2); letter-spacing: .04em; text-transform: uppercase;
  border-bottom: var(--line) solid var(--c-line); }
.people-r { border-radius: var(--r-s); color: var(--c-ink); text-decoration: none; font-size: var(--fs-2); }
.people-r:hover { background: var(--c-raised); }
.people-r.is-on { background: var(--c-accent-soft); }
.people-r .pill { white-space: normal; max-width: 100%; line-height: var(--lh-tight); padding-block: .15em; border-radius: .8em; }
/* Last sign-in: one line while it fits; in a narrow window it wraps and never runs into Live (DESIGN_B S-1, 3 Nov: the 640 px
   rule below reads the desk's width, so a narrow window on a wide desk keeps all five columns) */
.people-r > span:nth-child(4) { overflow-wrap: anywhere; }
/* its head breaks as LAST over SIGN-IN, never at the hyphen (DESIGN_B and DESIGN_LEAD S-1, 3 Nov) */
.people-keep { white-space: nowrap; }
.people-key { display: inline-flex; vertical-align: middle; margin-left: var(--sp-1); color: var(--c-ink-2); }
/* a person's row is a whole row of the list: the row-link look without its underline (DS28) */
.frame a.row-link.people-r:hover { text-decoration: none; }
.people-who { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.people-who > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-side { min-width: 0; overflow: auto; overscroll-behavior: none; padding: var(--sp-3) var(--sp-4); border-left: var(--line) solid var(--c-line);
  display: grid; gap: var(--sp-3); align-content: start; }
.people-side p { margin: 0; }
/* SX1 (r3 SL1): a new person's first steps; done in the good colour, to do in the warning one, said in words too */
.people-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.people-steps li { display: flex; gap: var(--sp-2); align-items: flex-start; color: var(--c-ink-2); }
.people-steps li.is-done > .ic { color: var(--c-good); }
.people-steps li.is-todo > .ic { color: var(--c-warn); }
.people-h { font: var(--w-strong) var(--fs-3)/1.25 var(--f-display); color: var(--c-ink); margin: 0; }
.people-card { display: flex; align-items: center; gap: var(--sp-3); }
.people-card > span { display: grid; gap: var(--sp-1); min-width: 0; }
.people-code { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-accent-soft);
  border: var(--line) solid var(--c-accent); }
.people-code-v { font: var(--w-strong) var(--fs-3)/1.4 var(--f-mono); letter-spacing: .03em; color: var(--c-ink); user-select: all; }
.people-warn { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-danger); }
.people-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.people-role { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); width: 100%; }
.people-form { display: grid; gap: var(--sp-2); }
.people-roles { display: grid; gap: var(--sp-1); margin: 0; padding: 0; border: 0; font-size: var(--fs-2); }
.people-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-2); }
.people-log li { display: grid; gap: var(--sp-1); }
.people-log li.is-bad span:last-child { color: var(--c-danger); }
.gate-code { display: grid; gap: var(--sp-2); text-align: left; font-size: var(--fs-2); }
.gate-code summary { cursor: pointer; color: var(--c-accent); }
.gate-code[open] summary { margin-bottom: var(--sp-2); }
}

@layer core-phone {
@container frame (max-width: 640px) {
  .people.has-side { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .people-list, .people-side { overflow: visible; }
  .people-side { border-left: 0; border-top: var(--line) solid var(--c-line); }
  .people-head { display: none; }
  .people-r { grid-template-columns: minmax(0, 1fr) auto; }
  .people-r > span:nth-child(2), .people-r > span:nth-child(4) { display: none; }
}
}

/* Your key (AD-086): the steps after a sign-in, and the line on every page while the key is not open */
@layer core {
.key-card { width: min(440px, calc(100vw - 32px)); }
.key-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-1); color: var(--c-ink-3); }
.key-steps .is-on { color: var(--c-ink); font-weight: var(--w-strong); }
.key-steps .is-done { color: var(--c-good); }
.key-making { margin: 0; font-weight: var(--w-strong); color: var(--c-ink); }
.key-card .js-only { display: none; }
.js .key-card .js-only { display: block; }
.js .key-card .no-js-only { display: none; }
.key-code { display: grid; gap: var(--sp-1); width: 100%; padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-accent-soft);
  border: var(--line) solid var(--c-accent); font: var(--w-strong) var(--fs-3)/1.4 var(--f-mono); letter-spacing: .04em; text-align: center;
  color: var(--c-ink); user-select: all; }
.key-code p { margin: 0; white-space: pre; }
.key-company { margin: 0; padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--edge); background: var(--c-surface-2);
  color: var(--c-ink); font-size: var(--fs-2); text-align: left; }
.key-note { position: absolute; z-index: var(--z-menu-scrim); bottom: 88px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: var(--sp-2);
  margin: 0; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill); background: var(--c-surface); border: var(--line) solid var(--c-warn);
  box-shadow: var(--sh-pop); font-size: var(--fs-2); color: var(--c-ink); white-space: nowrap; max-width: calc(100% - 24px); }
.key-note a.link { font-weight: var(--w-strong); }
.key-note-form { display: inline; }
/* the line keeps its own room above the dock: windows end above it (the recovery reminder, which stays until the code
   is typed back, covered a tall window's foot at 1366x768, 19 Oct) */
/* the notes' own heights, not gaps (IDEAS 01:27, item 4): one note line over the dock, and one on a phone, where its
   words wrap to two lines; two notes stacked take twice the first */
:root { --note-h: 48px; --note-h-phone: 96px; }   /* the line wraps to about 85 px on a phone (DESIGN_C 08:23, PB-11c): 76 left it 73 px over a window's foot */
.os-desk:has(~ .key-note) { padding-bottom: calc(var(--sp-3) + var(--note-h)); }
}

@layer core-phone {
@container frame (max-width: 640px) { /* desk */
  .key-note { white-space: normal; flex-wrap: nowrap; justify-content: flex-start; text-align: left; border-radius: var(--r-m); width: calc(100% - 24px); padding: var(--sp-2) var(--sp-3); }
  .key-note-more { display: none; }  /* on a phone the line says what and where, in two lines at most */
  /* F1 (DEPUTY_TESTER, 1 Nov 2026): a bar, not a card: the key, the words and the link share one row (before, each took its own row: 142 px
     of a phone's height for a reminder that stays until the code is typed back); the words wrap inside their own box, the link stays whole */
  .key-note > span { flex: 1 1 0; min-width: 0; }
  .key-note > a.link { flex: none; max-width: 45%; }
  .os-desk:has(~ .key-note) { padding-bottom: calc(var(--sp-3) + var(--note-h-phone)); }
}
}

/* BOS chats (AD-082 i, the functions of Pavel's AIGOS Figma in SOS's own look): the chats beside the conversation */
@layer core {
.os-desk > .win-bos { width: min(100%, 1180px); }
.bos { display: grid; grid-template-columns: var(--pane-bos-chats, 260px) minmax(0, 1fr); height: 100%; min-height: 0; position: relative; }
/* AS-03 V1: a draft beside the chat, as BOS's side pane (DESIGN_LEAD 10:44; the shape of .win-tasks' detail pane) */
.bos:has(> .compose-pane) { grid-template-columns: var(--pane-bos-chats, 260px) minmax(0, 1fr) minmax(320px, 42%); }
.bos > .compose-pane { min-width: 0; min-height: 0; overflow: auto; border-left: var(--line) solid var(--c-line); }
.bos > .split { --split-at: var(--pane-bos-chats, 260px); }
.bos-side { min-width: 0; overflow: auto; overscroll-behavior: none; padding: var(--sp-3); border-right: var(--line) solid var(--c-line);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-content: start; }
.bos-find .field { width: 100%; }
.bos-side > .form .btn { width: 100%; }
/* one column the width of the list: a long title is cut with an ellipsis, its ⋯ menu stays in view (BOS chat paper
   round 1, G1) */
.bos-group { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.bos-group .sub-h { margin: 0 0 var(--sp-1); }
/* v152, BOS chat groups (BG-1): each group folds; a group of one's own has its ⋯ at the right of its heading; the long-
   title rule (G1) holds for a group's name too */
.bos-group { position: relative; }
.bos-fold { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); min-width: 0; }
.bos-fold > summary { display: flex; align-items: center; gap: var(--sp-1); min-width: 0; padding-right: var(--ctl); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bos-fold > summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bos-fold-ic { width: 14px; height: 14px; flex: none; transition: transform var(--dur) var(--ease); }
.bos-fold[open] > summary .bos-fold-ic { transform: rotate(90deg); }
.bos-group-menu { position: absolute; top: 0; right: 0; z-index: var(--z-part); }
.bos-group-menu > summary { list-style: none; cursor: pointer; }
.bos-group-menu > summary::-webkit-details-marker { display: none; }
.bos-group-empty { margin: 0; padding: 0 var(--sp-2); }
.bos-new-group > summary { list-style: none; }
.bos-new-group > summary::-webkit-details-marker { display: none; }
.bos-new-group > .form { margin-top: var(--sp-2); }
.bos-row { position: relative; display: flex; align-items: center; gap: var(--sp-1); border-radius: var(--r-s); }
.bos-row:hover { background: var(--c-raised); }
.bos-row.is-on { background: var(--c-accent-soft); }
.bos-row-a { flex: 1; min-width: 0; padding: var(--sp-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink);
  text-decoration: none; font-size: var(--fs-2); }
.bos-row-a.is-locked, .frame a.bos-row-a.is-locked { color: var(--c-ink-2); display: flex; align-items: center; gap: var(--sp-1); }  /* the sealed row stays grey under the link rule too (WRITER2 G2) */
.bos-row-menu > summary, .bos-model > summary, .bos-attach > summary, .msg-details > summary { list-style: none; cursor: pointer; }
.bos-row-menu > summary::-webkit-details-marker, .bos-model > summary::-webkit-details-marker,
.bos-attach > summary::-webkit-details-marker, .msg-details > summary::-webkit-details-marker { display: none; }
.bos-row-menu > .menu { right: 0; top: calc(100% + 2px); min-width: 220px; box-shadow: var(--sh-pop); }
.bos-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); }
.bos-main > .chat-log { flex: 1; }
.bos-main > .bos-compose { flex: none; }
/* over a window's own text, not the wallpaper: nearly solid, as the window menu */
.look-a .bos-model-menu, .look-a .bos-attach-list, .look-a .bos-row-menu > .menu { --c-surface: rgb(var(--g-rgb)); }
.bos-rename { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.bos-rename .field { flex: 1; min-width: 200px; }
.bos-msgs { display: grid; gap: var(--sp-3); grid-template-columns: minmax(0, 1fr); }
.msg-body { display: grid; gap: var(--sp-1); min-width: 0; justify-items: start; }
.msg-me .msg-body { justify-items: end; }
.msg-thinking { color: var(--c-ink-2); font-style: italic; }
.msg-failed { color: var(--c-danger); }
.msg-files { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
/* the Daily Brief in BOS chat (smart helpers DB5): a section's lines, each with its Open */
.brief { display: grid; gap: var(--sp-2); width: 100%; }
.brief .sub-h { margin: var(--sp-2) 0 0; }
.brief-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.brief-i { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: var(--row); }
.frame a.msg-file { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--c-surface-2);
  border: var(--line) solid var(--edge); color: var(--c-ink); font-size: var(--fs-1); text-decoration: none; }
.msg-file .ic { width: 18px; height: 18px; }
/* search next to memory (GF-13): the files named like the question, then a plain search for each word */
.msg-seek { display: grid; gap: var(--sp-1); margin: var(--sp-1) 0 0; }
.msg-seek .msg-files, .msg-seek-w { align-items: center; }
.msg-seek-w { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); }
/* on a phone each link is a 44 px target (P16 rules; IDEAS 04:45) */
@container frame (max-width: 640px) { .frame .msg-seek a { display: inline-flex; align-items: center; min-height: 44px; } }
.msg-tools { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: flex-start; }
/* under an answer the memory line keeps its words on one line: with the row unable to wrap, an open "Where BOS answered"
   note (60ch) or a narrow window shrank it to a column of single words beside the icons (Pavel's walk of Chicago 0.9.7, 3 Nov 2026) */
.msg-tools > .msg-mem { flex: 0 1 auto; min-width: min(100%, 15em); }
.msg-details[open] > p { margin: var(--sp-1) 0 0; max-width: 60ch; }
/* the path BOS drew, while it draws: "Drawing the path" with the script, the link without it (never both) */
html:not(.js) .gen-wait .js-only, .js .gen-wait .no-js-only { display: none; }
html:not(.js) .graph-wait .js-only, .js .graph-wait .no-js-only { display: none; }
.msg-copy.js-only { display: none; }
.js .msg-copy.js-only { display: inline-flex; }
.bos-compose { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "text text text" "attach note send"; gap: var(--sp-2);
  align-items: center; padding: var(--sp-2); border-radius: var(--r-l); border: var(--line) solid var(--edge); background: var(--c-surface); }
.bos-compose textarea { grid-area: text; width: 100%; min-height: 3.2em; resize: vertical; padding: var(--sp-2); border: 0; outline: 0;
  background: transparent; color: var(--c-ink); font: inherit; font-size: var(--fs-3); }
.bos-compose .bos-attach { grid-area: attach; position: relative; }
.bos-compose .bos-limit { grid-area: note; }
.bos-compose .send { grid-area: send; background: var(--c-accent); color: var(--c-accent-ink); }
.bos-attach-list { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: var(--z-menu-scrim); width: min(360px, 80vw); max-height: 260px; overflow: auto; margin: 0;
  padding: var(--sp-2) var(--sp-3); display: grid; gap: var(--sp-1); border-radius: var(--r-m); border: var(--line) solid var(--edge); background: var(--c-surface);
  box-shadow: var(--sh-pop); font-size: var(--fs-2); }
.bos-attach-list label { display: flex; align-items: center; gap: var(--sp-2); }
.bos-attach-list .ic { width: 20px; height: 20px; }
.bos-pill { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--c-surface-2);
  border: var(--line) solid var(--edge); font-size: var(--fs-2); color: var(--c-ink); }
.bos-pill > span { color: var(--c-ink-2); }
/* External mode (the screen half): one switch for this chat above the log; while it is on its route is said in a line that stays in view */
.bos-ext { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-bottom: var(--line) solid var(--c-line); }
.bos-ext-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); min-height: var(--ctl); }
.bos-ext-name { font-weight: var(--w-strong); }
.bos-ext-line { margin: 0; padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface-2); overflow-wrap: break-word; }
.bos-ext .note { margin: 0; }
/* All external AI off or unreadable: the two lines are one full-width row under the toolbar, in reading width (DESIGN_A L-1) */
.bos-ext-off-rows .note { max-width: 70ch; overflow-wrap: anywhere; }
.bos-model { position: relative; }
.bos-model-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: var(--z-notes); width: 360px; display: grid; gap: var(--sp-2); padding: var(--sp-3);
  border-radius: var(--r-m); border: var(--line) solid var(--edge); background: var(--c-surface); box-shadow: var(--sh-pop); }
.bos-model-menu p { margin: 0; }
.bos-model-form { display: grid; gap: var(--sp-1); justify-items: start; }
.bos-model-o { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: var(--fs-2); }
.bos-model-o > span { display: grid; }
}

@layer core-phone {
@container frame (max-width: 640px) {
  .bos { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  /* the chats list takes a little less of a phone, so the message box keeps all of itself above the dock (P16-28: at
     360x740 with 34vh the box ended 7 px under the window's edge; the chat above it shrinks, as before; IDEAS
     phone-apps-1) */
  .bos-side { border-right: 0; border-bottom: var(--line) solid var(--c-line); max-height: 28vh; }
  .bos-main { padding: var(--sp-2); }
  .bos-model-menu { width: calc(100vw - 48px); }
  /* a phone shows one thing at a time: the draft alone, its Close back to the chat */
  .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 {
.bos-attach-list > legend { float: left; width: 100%; padding: 0; margin: 0 0 var(--sp-1); }
}

/* BOS chat, the Figma's functions done (Pavel, 19 Oct: "get chat fully working with placeholders for safe mode") */
@layer core {
/* the open menu ends inside its window (DESIGN_A L-3): sos1.js's ModelMenuFit says the room from the menu's top to the window's bottom edge
   less a 20 px gap as --model-menu-h; without it the cap is 60vh as before. No fixed pixel stands in for the toolbar, the text size or the
   window's height */
.bos-model-menu { max-height: min(60vh, 520px, var(--model-menu-h, 100vh)); overflow: auto; overscroll-behavior: none; }
.bos-model-form { display: grid; gap: var(--sp-2); justify-items: stretch; }
.bos-model-g { display: grid; gap: var(--sp-1); }
.bos-model-g .sub-h { margin: 0 0 var(--sp-1); }
button.bos-model-o { display: flex; align-items: center; justify-content: flex-start; gap: var(--sp-2); width: 100%; padding: var(--sp-2); border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--c-ink); font: inherit; font-size: var(--fs-2); text-align: left; cursor: pointer; }
/* the highlight follows the mouse and the keys; the chosen one keeps only its tick (Pavel, 19 Oct: "the choosing highligher is stuck") */
button.bos-model-o:hover:not(:disabled), button.bos-model-o:focus-visible { background: var(--c-accent-soft); }
button.bos-model-o:disabled { cursor: default; color: var(--c-ink-2); }
button.bos-model-o.is-on { font-weight: var(--w-strong); }
/* the tick is the part's own icon, shown on the chosen model */
.bos-model-o > .ic { width: 16px; height: 16px; flex: none; visibility: hidden; color: var(--c-accent); }
.bos-model-o.is-on > .ic { visibility: visible; }
/* the which-model card under a choice (AD-170 K2, selector S1a): the words take the whole row under the name */
button.bos-model-o { flex-wrap: wrap; text-align: left; }
button.bos-model-o > .note { flex: 1 1 100%; padding-left: var(--sp-5); font-weight: var(--w-text); }
.msg-me .msg-tools { justify-content: flex-end; }
.msg-safe { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: var(--line) dashed var(--c-ink-3);
  color: var(--c-ink-2); font-size: var(--fs-1); cursor: not-allowed; }
.msg-safe .ic { width: 16px; height: 16px; }
.msg-soon { color: var(--c-ink-3); }
/* Safe mode (the Gateway's approval gate; Slade 7.19): the masked words held for a check, and the chips for each hidden detail */
.safe-card { flex: none; display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-accent); background: var(--c-surface-2); }
.safe-card > * { margin: 0; min-width: 0; }
.safe-body { max-height: 40vh; overflow: auto; padding: var(--sp-2); border-radius: var(--r-s); background: var(--c-surface); border: var(--line) solid var(--c-line); overflow-wrap: anywhere; }
.safe-text { white-space: pre-wrap; }
/* a hidden detail is green text in [ ] brackets (AD-133, Pavel); --c-good is a text token the contrast test holds to AA on the face, a field and a raised part in every look */
.safe-tok-v, .safe-tok-t { color: var(--c-good); font-weight: var(--w-strong); }
.safe-card .js-only { display: none; }
.js .safe-card span.js-only { display: inline; }
.js .safe-card .btn.js-only:not([hidden]) { display: inline-flex; }
.js .safe-card .no-js-only { display: none; }
/* a value the person chose to send as written: marked apart on every check, in the warning text token, dashed under (LOCK 05:38) */
.safe-shown-t { color: var(--c-warn); font-weight: var(--w-strong); text-decoration: underline dashed; text-underline-offset: 3px; }
.safe-shown-note { color: var(--c-warn); }
.safe-aw { font-size: var(--fs-1); font-weight: var(--w-text); }
.safe-to { overflow-wrap: break-word; }
.safe-by { margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.safe-much { color: var(--c-ink); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-warn); background: var(--c-surface-2); }
.safe-anon-short { display: none; }
@container frame (max-width: 640px) { .frame .safe-anon-long { display: none; } .frame .safe-anon-short { display: block; } }
.safe-held .safe-w { border-radius: var(--r-s); }
.js .safe-held .safe-w:not(.has-tok) { cursor: pointer; }
.js .safe-held .safe-w:not(.has-tok):hover { background: var(--c-accent-soft); }
/* an inline-block, one box in the line: Chrome lays a <details> out with a block box inside it even at display: inline, which broke the line after every token (DESIGN_LEAD 10:45) */
details.safe-tok { display: inline-block; vertical-align: baseline; }
.safe-nb { white-space: nowrap; }
details.safe-tok > summary { display: inline; list-style: none; cursor: context-menu; }
details.safe-tok > summary::-webkit-details-marker { display: none; }
details.safe-tok > summary:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-s); }
details.safe-tok[open] > .safe-tok-menu { display: inline-block; margin-left: var(--sp-1); vertical-align: middle; }
.safe-ctx { display: grid; gap: var(--sp-1); justify-items: start; }
.safe-ctx-w, .safe-form { display: grid; gap: var(--sp-2); min-width: 0; }
.safe-form > *, .safe-ctx-w > * { margin: 0; min-width: 0; }
.safe-hint { color: var(--c-ink-2); }
.safe-act { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.safe-edit, .safe-reason { display: grid; gap: var(--sp-2); }
.safe-reason > * { margin: 0; min-width: 0; }
/* the card is narrow: the form row is always one column, the label above the box at its full width (DESIGN_LEAD 09:33) */
.safe-reason .frow { grid-template-columns: minmax(0, 1fr); }
.safe-reason .frow-l { padding-top: 0; }
.safe-reason .field { width: 100%; }
.safe-kinds { display: grid; gap: var(--sp-1); min-width: 0; margin: 0; padding: 0; border: 0; }
.safe-edit textarea { width: 100%; min-height: 8em; }
@container frame (max-width: 640px) { .frame :is(.safe-act, .safe-ctx, .safe-tok-menu) .btn, .frame #safe-hide-sel { min-height: 44px; } .frame .safe-held { line-height: 2.2; } }
@media (pointer: coarse) { .frame :is(.safe-act, .safe-ctx, .safe-tok-menu) .btn, .frame #safe-hide-sel { min-height: 44px; } .frame .safe-held { line-height: 2.2; } }
.msg-changed { justify-self: center; margin: 0; color: var(--c-ink-2); font-size: var(--fs-1); }
.msg-thinking span[aria-hidden] { letter-spacing: .2em; font-size: var(--fs-4); line-height: 1; }
/* while BOS answers: the model's name alone, small plain text in a thin dotted outline the width of its words; no bar
   across the page, no fill, no shine; the moving dots are the only sign BOS is answering (Pavel 28 Oct ~09:38) */
/* the model trial: the chosen model loading (SOS1.Brain.Loading); with no last load time the bar runs without an end */
.bos-loading { display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-1); color: var(--c-ink-2); }
.bos-loading-bar { display: block; height: 4px; border-radius: var(--r-s); background: var(--line); overflow: hidden; }
.bos-loading-bar > span { display: block; height: 100%; width: 0; background: var(--c-ink-2); transition: width 1s linear; }
.bos-loading-bar.is-open > span { width: 30%; animation: bos-load-run 1.6s ease-in-out infinite; }
@keyframes bos-load-run { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .bos-loading-bar.is-open > span { animation: none; width: 100%; opacity: .4; } .bos-loading-bar > span { transition: none; } }
.msg-speed { margin: 0; font-size: var(--fs-1); }
.bos-pipe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); font-size: var(--fs-1); color: var(--c-ink-2); }
.bos-pipe li { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-2); border-radius: var(--r-s); border: var(--line) dotted var(--edge);
  min-width: 0; max-width: 100%; }
.bos-pipe li span { color: var(--c-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bos-pipe li.is-soon { border-style: dashed; }
.bos-compose:not(:has(.bos-chip, .bos-local)) textarea:placeholder-shown ~ .send { visibility: hidden; }
.bos-attach-list { display: grid; gap: var(--sp-2); justify-items: start; }
.bos-attach-list fieldset { display: grid; gap: var(--sp-1); margin: 0; padding: 0; border: 0; }
.bos-attach-list fieldset > legend { padding: 0; margin: 0 0 var(--sp-1); }
.bos-upload { display: grid; gap: var(--sp-1); }
.bos-upload input { font-size: var(--fs-1); max-width: 100%; }
}

@layer core-phone {
@container frame (max-width: 640px) {
  .bos-pipe { flex-direction: column; align-items: flex-start; }
}
}

/* A message strip never stands in the way (Pavel, 19 Oct: "chat selectors cant select"): it sat over a window's Send
   button, bottom right above the dock, until the next page. Presses go through it to what is under it, but its own
   Undo; it fades away after 8 s. */
@layer core {
.toast { pointer-events: none; animation: toast-away .3s ease 8s forwards; }
/* on the page the welcome plays on, a line waits for it (about 6.4 s) before its own 8 s: "Your windows are back" */
body:has(#welcome) .toast { animation-delay: 14.4s; }
.toast :is(a, button, form, input) { pointer-events: auto; }
/* a line with something to press waits while the pointer or the focus is on it (FR22; BOS chat paper G15: the Undo
   of a chat moved to the Bin faded under the pointer) */
.toast:has(:is(a, button, form)) { pointer-events: auto; }
.toast:is(:hover, :focus-within) { animation-play-state: paused; }
@keyframes toast-away { to { opacity: 0; visibility: hidden; } }
/* with less motion the line still goes after 8 s, at once, without its fade (accessibility r3 AG6) */
@media (prefers-reduced-motion: reduce) { .toast { animation-duration: 0s; } }
.still .toast { animation-duration: 0s; }
}

@layer core {
.msg-read { color: var(--c-ink-2); }
/* the files an answer waits for, one line each (R3, AD-138) */
.msg-waits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.msg-wait { overflow-wrap: anywhere; }
/* a file BOS cannot read into memory: the red message and the three choices under the file's line (R2, AD-138) */
.msg-cant { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-danger); border-radius: var(--r-m); overflow-wrap: anywhere; }
.msg-cant p { margin: 0; }
.frame a.msg-file.is-unread { border-style: dashed; }
}

/* The desktop's two panels (Pavel, 19 Oct): the widgets slide in from the left and Favourites slides down from the top;
   each shows only its tongue, with a triangle, until the pointer or the focus is on it, or an app is held over it.
   Each panel's frame clips what is hidden and lets presses through; only the sliding part takes them. The icons now
   have the whole desk. On a phone both stand still, one above the other, as the widgets did. */
@layer core {
.os-desk, .os-desk:has(.w-add) { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "main"; }
.w-side, .favs { position: absolute; z-index: var(--z-win-front); overflow: hidden; pointer-events: none; }
/* the clock where it always was, at the top left on the wallpaper; the icons keep its three cells free */
/* grid-area: auto: core.css names the clock's old grid cell ("clock"), a line the one-cell desk no longer has; for a positioned box that
   named line is the implicit track at the screen's foot, so the clock stood there, under the standing line (DESIGN_LEAD S-1, 3 Nov) */
.desk-layer > .w-clock { position: absolute; top: var(--sp-5); left: var(--sp-5); max-width: 296px; grid-area: auto; }
/* behind a window the desktop is inert: its clock and tongues stay under the window */
.desk-layer.is-behind > :is(.w-side, .favs) { z-index: auto; }
/* the path above a Files list: each part a link to its folder (contract v32), a drop target for a move */
.crumbs > * + *::before { content: "/"; margin-right: var(--sp-1); color: var(--c-ink-3); }
.crumbs a { color: inherit; text-decoration: none; border-radius: var(--r-s); }
.crumbs a:hover { color: var(--c-ink); text-decoration: underline; }
.crumbs a.is-drop { background: var(--c-accent-soft); box-shadow: 0 0 0 2px var(--c-accent); }
/* the widgets panel's width is the person's own, padding in (r5 P4, EXQ7; SOS1Web.Panes "desk.widgets"), never over 70 % of
   the screen; its splitter is its right edge */
.w-side { top: 0; bottom: 0; left: 0; width: calc(min(var(--pane-desk-widgets, calc(320px + var(--sp-4) * 2)), 70vw) + 26px); }
.favs { top: 0; right: var(--sp-5); padding: 0 var(--sp-3) var(--sp-3); }
/* Feedback beside Favourites (SEARCH's Alex walk 4 Nov, item 8c: with no rule it fell to the foot of the desk, half under a window): it
   is a child of .favs, a row with the Favourites box, so it stands to the left of the box whatever the box's width or the text size
   (DESIGN_LEAD 16:26, no fixed offset). .favs lets the pointer through; the button takes it back, as the slide does */
.favs { display: flex; align-items: flex-start; gap: var(--sp-3); }
/* the tongue's own height (26px): a taller tab would run under a window whose top edge is at 25px and its lower part could not be pressed
   (DEPUTY_UI's pictures, 4 Nov 16:47) */
.favs > .feedback-btn { pointer-events: auto; height: 26px; min-height: 0; padding: 0 var(--sp-3); border-top: 0; border-radius: 0 0 var(--r-m) var(--r-m); font-size: var(--fs-1); color: var(--c-ink-2); }
.w-slide, .favs-slide { pointer-events: auto; transition: transform .26s cubic-bezier(.2, .8, .2, 1) .18s; }
.w-slide { position: relative; height: 100%; width: min(var(--pane-desk-widgets, calc(320px + var(--sp-4) * 2)), 70vw); transform: translateX(-100%); }
.w-slide > .split-before { --split-at: 100%; }
/* only while the panel is open: closed, its edge is the screen's and must not take a hover or a drag (WRITER1 02:11) */
.w-slide:not(:hover, :focus-within) > .split { visibility: hidden; }
.w-body { display: grid; align-content: start; gap: var(--sp-3); height: 100%; padding: var(--sp-5) var(--sp-4); overflow-y: auto; overscroll-behavior: none; /* PB-20 F1 */
  border-radius: 0 var(--r-l) var(--r-l) 0; background: var(--c-surface); border: var(--line) solid var(--edge); border-left: 0;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
/* the widgets panel scrolls with no bar beside it: the wheel, a swipe or the keys still scroll it (Pavel, 20 Oct
   2026 23:22: "it ruins the whole look of that panel") */
.w-body { scrollbar-width: none; }
.w-body::-webkit-scrollbar { display: none; }
.w-body > * { grid-area: auto; }
.favs-slide { display: grid; justify-items: center; transform: translateY(calc(-100% + 26px)); }
.favs-body { display: grid; gap: var(--sp-2); min-width: 240px; padding: var(--sp-3) var(--sp-4) var(--sp-4); border-radius: 0 0 var(--r-l) var(--r-l);
  background: var(--c-surface); border: var(--line) solid var(--edge); border-top: 0;
  -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.favs-slide:is(:hover, :focus-within) .favs-body, .favs.is-open .favs-body { box-shadow: var(--sh-card); }
.favs-list { display: grid; grid-template-columns: repeat(4, 92px); gap: var(--sp-1); }
.favs-list:has(> :only-child) { grid-template-columns: 92px; } .favs-list:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, 92px); }
.favs-list:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 92px); }
/* FN-026: where a favourite dragged within the panel will land: a line before the one under the pointer, or after the
   last one (on its own right edge, wherever it sits in the grid; UI 08:34) */
.favs-list .fav.is-land { box-shadow: inset calc(var(--line) * 2) 0 0 var(--c-accent); }
.favs-list .fav.is-land-end { box-shadow: inset calc(var(--line) * -2) 0 0 var(--c-accent); }
/* the widget panel's edit mode (WidgetDrag): a widget held, and the line where it will land */
.w-slot.is-edit { cursor: grab; }
.w-slot.is-held { opacity: 0.55; }
.w-slot.is-land { box-shadow: inset 0 calc(var(--line) * 2) 0 var(--c-accent); }
.w-slot.is-land-end { box-shadow: inset 0 calc(var(--line) * -2) 0 var(--c-accent); }
.favs-empty { max-width: 30ch; }
/* closed, a panel's insides are out of reach of Tab too (TESTER SW-01): only its tongue is, and it opens the panel */
.w-body, .favs-body { visibility: hidden; transition: visibility 0s linear .44s; }
.w-slide:is(:hover, :focus-within) .w-body, .favs-slide:is(:hover, :focus-within) .favs-body, .favs.is-open .favs-body { visibility: visible; transition-delay: 0s; }
.favs-tongue { order: 2; }
.favs .place:hover { background: rgb(var(--g-rgb) / .28); }
/* the tongues: the part that always shows, with its triangle */
.tongue { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); color: var(--c-ink-2); font-size: var(--fs-1); cursor: default;
  background: var(--c-surface); border: var(--line) solid var(--edge); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }
.tongue:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.w-tongue { position: absolute; left: 100%; top: 50%; width: 26px; height: 72px; margin-top: -36px; border-left: 0; border-radius: 0 var(--r-m) var(--r-m) 0; }
.favs-tongue { height: 26px; padding: 0 var(--sp-3); border-top: 0; border-radius: 0 0 var(--r-m) var(--r-m); }
.tongue > [aria-hidden] { font-size: 10px; transition: transform .26s ease .18s; }
/* open: the pointer or the focus on it, or an app held over it (sos1.js, AppDrag) */
.w-slide:hover, .w-slide:focus-within, .favs-slide:hover, .favs-slide:focus-within, .favs.is-open .favs-slide { transform: none; transition-delay: 0s; }
.w-slide:is(:hover, :focus-within) .tongue > [aria-hidden], .favs:is(.is-open, :has(.favs-slide:hover), :focus-within) .tongue > [aria-hidden] {
  transform: rotate(180deg); transition-delay: 0s; }
.favs.is-drop .favs-body { box-shadow: 0 0 0 3px var(--c-accent), var(--sh-card); background: var(--c-accent-soft); }
/* an app held over Start: Favourites and the desktop under its scrim take it */
.frame.is-app-drag .favs { z-index: var(--z-fav-drag); }
.frame.is-app-drag .menu-scrim { pointer-events: none; }
/* a file or folder held over a folder that takes it (sos1.js, ItemDrag, DesktopIcons) */
/* The note under Files' search while files go up (sos1.js SearchAsYouType; DESIGN_A 3 Nov 2026): it is a flex item of the toolbar row, so it takes
   a whole row of its own under the box, and the row wraps only while the note is there (the phone's toolbar wraps already, in its own query) */
.win-files .win-tools:has(> .search-wait) { flex-wrap: wrap; }
.win-files .win-tools > .search-wait { flex: 1 0 100%; margin: 0; }
.files-side [data-folder].is-drop, .frame a.desk-icon.is-drop { background: var(--c-accent-soft); box-shadow: inset 0 0 0 2px var(--c-accent); }
/* the desktop around an open window takes dropped files: its ring, without covering the window */
.os-desk.is-drop:has(> .win)::after { background: none; }
@media (prefers-reduced-motion: reduce) { .w-slide, .favs-slide, .tongue > [aria-hidden] { transition: none; } }
.still :is(.w-slide, .favs-slide, .tongue > [aria-hidden]) { transition: none; }
}

@layer person {
.look-a .w-body { --c-surface: rgb(var(--g-rgb) / calc(var(--g-tint) * .7)); }
.look-a .favs-body, .look-a .tongue { --c-surface: rgb(var(--g-rgb) / max(var(--g-tint), .6)); }
}

@layer core-phone {
@container frame (max-width: 640px) {
  .w-side, .favs, .desk-layer > .w-clock { position: static; overflow: visible; pointer-events: auto; width: auto; padding: 0; }
  /* on a phone the clock takes the next cell in the page flow, as core.css's phone block gives every desk item: the phone desk
     names no "clock" area, so naming that cell made an implicit column beside the one column and squeezed the home cards
     to 34 px (EXPLORER 4 Nov 03:44, phone_rows_r1 rows 5, 5b, 11) */
  .desk-layer > .w-clock { grid-area: auto; }
  .w-slide, .favs-slide { transform: none; transition: none; height: auto; width: auto; }
  /* Feedback on a phone stands in the page flow above the Favourites card, a full-size touch target, covering nothing (DESIGN_LEAD 16:51:
     the foot of the page is right for tonight; after tonight an entry in the More sheet) */
  .favs { display: grid; justify-items: start; gap: var(--sp-3); }
  .favs > .favs-slide { justify-self: stretch; }
  .favs > .feedback-btn { height: auto; min-height: 44px; padding: revert; border-top: revert; border-radius: var(--r-m); font-size: revert; color: revert; }
  /* the panel sits in the page on a phone, as wide as the screen: no splitter to drag (desk-splitter, EXPLORER 07:59) */
  .w-slide > .split { display: none; }
  .w-body { height: auto; padding: 0; overflow: visible; background: none; border: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .favs-body { border-radius: var(--r-l); border-top: var(--line) solid var(--edge); }
  .w-body, .favs-body { visibility: visible; }
  /* a phone shows one window: the one asked for, not the older ones above it (TESTER SW-04) */
  .os-desk:has(> .win.is-active) > .win.is-behind { display: none; }
  /* Graph's From, To and Show wrap onto a phone's width (TESTER SW-03) */
  .win-tools:has(.graph-form) { flex-wrap: wrap; }
  .graph-form { flex-wrap: wrap; min-width: 0; width: 100%; }
  .graph-form > .field { flex: 1 1 9rem; min-width: 0; }
  /* Files on a phone (PB-07): Up, Forward and the path on one line, the path cut with an ellipsis, the search box on its
     own line within the window (it ran past the window's edge, and the path was hidden) */
  .win-files .win-tools { flex-wrap: wrap; }
  .win-files .win-tools .crumbs { display: flex; flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; }
  .win-files .win-tools .crumbs > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* each folder in the path a 44 px target beside Up (P16-78 round: the path's links were 21 px tall) */
  .win-files .win-tools .crumbs > * { line-height: 44px; }
  .win-files .win-tools .search-form { flex: 1 1 100%; min-width: 0; }
  .win-files .win-tools .search-form .field { min-width: 0; width: 100%; }
  /* Files on a phone, EXPLORER's pass at 402 x 874 (iPhone 16 Pro check, P16-120 to P16-125) */
  /* a chosen file shows its preview, with its acts (Open, Rename, Move, Download, Bin), in place of the list */
  .win-files .files:has(> .files-preview) > :is(.files-side, .files-list) { display: none; }
  .win-files .files > .files-preview { display: grid; border-left: 0; }
  .win-files .files-pv-back { display: inline-flex; justify-self: start; }
  /* the places (Desktop, Documents, Recordings, the Bin) and Add files: one row of chips above the list */
  .win-files .files-side { display: flex; gap: var(--sp-2); overflow-x: auto; padding: var(--sp-2) var(--sp-3) 0; border: 0; }
  .win-files .files-side > * { flex: none; }
  .win-files .files-side > .row { position: relative; }
  .win-files .files-side .row-link::after { content: ""; position: absolute; inset: 0; }
  /* each place a whole 44 px target, as Bin and Add files (P16-215, WRITER2 08:11: the places were 40 px tall) */
  .win-files .files-side > .row { min-height: 44px; }
  /* the size under a name at its own width (the columns' share of the list is for a wide list) */
  .win-files .files-r > .is-second { width: auto; }
  /* what a phone cannot use: columns it does not show, and dropping from a computer */
  .win-files :is(.files-cols, .files-drop) { display: none; }
  /* choosing: the window title already says what for; the bar keeps only what to do (P16-126) */
  .win-files .files-choose > p > b { display: none; }
  /* the toolbar: Forward only when there is somewhere to go, the path right after Up (P16-127) */
  .win-files .win-tools > .ibtn:not(.ibtn-up)[disabled] { display: none; }
  .win-files .win-tools { gap: var(--sp-1); }
  /* the places wrap onto a second line rather than run off the edge (P16-81) */
  .win-files .files-side { flex-wrap: wrap; overflow-x: visible; }
  /* the size under its name, not under the icon or the tick (P16-82) */
  .win-files .files-r > .is-second { padding-left: var(--sp-6); }
  .win-files.win-choose .files-r > .is-second { padding-left: calc(var(--sp-6) * 2 + var(--sp-3)); }
  /* a chosen file's first screen: Back, its name, Open, then its main acts; the picture or page after (P16-83) */
  .win-files .files-preview > .files-pv-back { order: -5; }
  .win-files .files-preview > h3 { order: -4; }
  .win-files .files-preview > h3 + .btns { order: -3; }
  .win-files .files-preview > :is(.files-acts, .side-form) { order: -1; }
  .win-files .files-preview > :is(.files-acts + .btns, .btns:has(> a[href*="/download"])) { order: -2; }
  /* Copy, Zip, Unzip and Properties under More, shown when it is pressed (its #files-more); More then goes */
  .win-files .files-acts a.files-more { display: inline-flex; }
  .win-files .files-more-acts:not(:target) { display: none; }
  .win-files .files-acts:has(> .files-more-acts:target) a.files-more { display: none; }
  .favs-list { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .favs .place { width: auto; }
  .tongue { display: none; }
}
}

/* People: the organisation's openings setting, a person's data open to the librarian, and Open their data…
   (Keys paper G13) */
.people-opened { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-warn); }
.people-opened p { margin: 0; }
/* People: a person locked out after wrong passwords, and the Librarian's Lift (hardening spec a) */
.people-lift { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-warn); }
.people-lift p { margin: 0; }
.people-open > summary { list-style: none; cursor: pointer; display: inline-flex; }
.people-open > summary::-webkit-details-marker { display: none; }
.people-open[open] > summary { margin-bottom: var(--sp-2); }

/* the Bin's questions before deleting for good (Files paper G3, G6): a disclosure, so they work without a script */
.files-ask > summary { list-style: none; cursor: pointer; display: inline-flex; }
.files-ask > summary::-webkit-details-marker { display: none; }
.files-ask-b { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-danger); }
.files-ask-b p { margin: 0; }
.files-empty { margin-top: var(--sp-3); }
/* the Bin's columns: From is words (a place), wider than Size (BG7): its .c-from width in core.css */
.files-from { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the one Bin's CRM heading (SOS-FINE Bin and Undo r3, BU2, BG3): its rows open the CRM's Bin */
.files-crm { margin-top: var(--sp-3); }
.files-crm-h { padding: var(--sp-2) var(--sp-3) var(--sp-1); color: var(--c-ink-2); }

/* Files' plain forms in the preview, the menu's actions without a script (Files paper G13) */
.files-acts { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); border-top: var(--line) solid var(--c-line); }
/* More, for a phone only (P16-83): a computer shows every act at once (in core, so the phone's layer shows it) */
@layer core { .files-acts a.files-more { display: none; } }
.files-acts select { min-height: var(--ctl); padding: 0 var(--sp-2); 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%; }
.files-paste { margin-top: var(--sp-2); }

/* Settings > Agents (contract v44): the token shown once, selectable whole, and the form */
.agent-new { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-warn); }
.agent-new p { margin: 0; }
.agent-token { font: var(--w-strong) var(--fs-2)/1.4 var(--f-mono); user-select: all; word-break: break-all; color: var(--c-ink); }
.agent-form { display: grid; gap: var(--sp-3); max-width: 560px; }
.agent-form.is-dim { opacity: .5; }

/* The CRM (the frozen CRM rule book r6, P1 and P2): the header, the views list beside the page, the status line at the
   foot; a table that scrolls inside itself, never the window; narrow: the views above the page, wrapped */
/* an inner margin as Tasks has, so the chosen view's highlight and the search keep a gap from the window's edge (Pavel 28 Oct
   ~09:38: "highlights are close to bezel") */
.win-crm .crm { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--sp-3); min-height: 0; height: 100%; padding: var(--sp-3); }
.crm-head { display: flex; gap: var(--sp-2); align-items: center; }
.crm-head .field { flex: 1; }
/* CRM study r0b change 2 (DESIGN_B; MASTER 3 Nov 12:01): the views are tabs across the top, so the table has the
   window's whole width; the first row is the tabs, the page and a name's card share the second */
.crm-body { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-3); min-height: 0; position: relative; }
.crm-body.has-card { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); }
.crm-views { grid-column: 1 / -1; display: flex; flex-wrap: nowrap; align-items: end; gap: var(--sp-1); min-width: 0; border-bottom: var(--line) solid var(--c-line); }
.crm-v { display: flex; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-s); color: var(--c-ink); text-decoration: none; }
.crm-v:hover { background: var(--c-raised); }
.crm-v.is-on { background: var(--c-accent-soft); font-weight: var(--w-strong); }
/* P16-422: the empty state's "Who can see Relationships" is a phone's (a computer keeps Access in its views column) */
.crm-empty-access { display: none; }
.crm-rule { display: block; height: 1px; margin: var(--sp-1) 0; background: var(--c-line); }
/* one column at the window's width: a wide table (cells that do not wrap) scrolls inside .crm-scroll and never widens the page, so its words are never cut at the window's edge (P16-650, P16-651) */
.crm-page { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--sp-3); min-width: 0; min-height: 0; overflow: auto;
  padding-inline: var(--pad-win); grid-auto-rows: max-content; }  /* DS43 / CT: the page has a gutter at every width (its tables and cards no longer touch the window's right edge) */
/* the page is the scroller, its parts each their full height (grid-auto-rows): a table, itself a sideways scroller,
   was squeezed into the space left in a short window, to nothing on a phone (DEPUTY_TESTER 16:24, shots r2) */
.crm-h { margin: 0; font: var(--w-strong) var(--fs-5)/1.2 var(--f-display); display: flex; align-items: baseline; gap: var(--sp-2); }
.crm-scroll { overflow-x: auto; }
.crm-t { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.crm-t th, .crm-t td { padding: var(--sp-2); text-align: left; border-bottom: var(--line) solid var(--c-line); white-space: nowrap; }
.crm-t th { font-weight: var(--w-strong); color: var(--c-ink-2); }
.crm-t th a { color: inherit; text-decoration: none; }
.crm-t td.num, .crm-t th.num { text-align: right; }
.crm-name { font-weight: var(--w-strong); }
.crm-menu { position: relative; }
.crm-menu > summary { list-style: none; cursor: pointer; }
.crm-menu > summary::-webkit-details-marker { display: none; }
.crm-menu > .menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: var(--z-lift); min-width: 200px; box-shadow: var(--sh-pop); }
/* a CRM menu lies over the window's own words, so its face is solid (DESIGN_LEAD 17:35: .88 let a record's words read
   through); it scrolls itself when cut to its window's body, and opens upward when there is more room above (sos1.js
   CrmMenus) */
/* the face is set as a background, not put into --c-surface: on dc-tokens --c-face-solid is a background shorthand (a
   gradient and a colour, glass.css), and what inside the menu reads --c-surface as a colour must keep getting one
   (DESIGN_LEAD S-1 17:45) */
.look-a .crm-menu > .menu { background: var(--c-face-solid, rgb(var(--g-rgb))); }
.look-a.contrast .crm-menu > .menu { background: var(--c-surface); }
.crm-menu > .menu { overflow-y: auto; overscroll-behavior: none; overflow-anchor: none; }
.crm-menu.crm-menu-up > .menu { top: auto; bottom: calc(100% + 2px); }
.crm-menu > .menu.is-capped { box-shadow: var(--sh-pop), inset 0 -12px 10px -10px var(--c-ink-3); }
.crm-menu > .menu.is-capped.is-end { box-shadow: var(--sh-pop); }
.crm-pages { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-2); }
.crm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
/* a record's Linked list (G5 links): no bullets, each link with its dates and its End and Remove on one line that wraps */
.crm-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.crm-link-i { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
/* a SHA-256 has no place to break: it breaks anywhere rather than push the page sideways (AD-154 P2 F-6) */
.crm-sha { overflow-wrap: anywhere; }
.crm-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-2); border-radius: var(--r-s); background: var(--c-surface-2); }
.crm-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); }
@container frame (max-width: 840px) {
  .crm-body { grid-template-columns: minmax(0, 1fr); }
  .crm-body.has-card { grid-template-columns: minmax(0, 1fr); }
  .crm-body .who-card { border-left: 0; border-top: var(--line) solid var(--c-line); }
  .js .crm-body > .split { display: none; }
  .crm-rule { display: none; }
}
/* the CRM's first size, 1,180 wide as People's (CRM study r0b change 1: at 1,040 the table's last column was cut) */
.os-desk > .win-crm { width: min(100%, 1180px); }

/* ---- CRM study r0b (DESIGN_B 3 Nov; built by PAPER_MAP): Relationships reads as a normal CRM at a glance ---- */
/* change 2: object tabs with the shared tabs' look (core.css .tab: ink-2, the chosen one ink, strong and the accent bar;
   DESIGN_LEAD M2), in the shared .tabs row that scrolls sideways and never wraps (DESIGN_LEAD M1, DESIGN_A 1); More holds the rest */
.crm-views > .crm-vtabs { flex: 0 1 auto; border-bottom: 0; }
.crm-views > .crm-more { flex: none; }
.crm-vtabs > .crm-v { flex: none; white-space: nowrap; }
.crm-views .crm-v, .crm-saved .crm-v, .crm-tabs-more > .crm-v { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s) var(--r-s) 0 0; color: var(--c-ink-2); }
.crm-views .crm-v.is-on, .crm-saved .crm-v.is-on, .crm-tabs-more > .crm-v.is-on { background: none; color: var(--c-ink); font-weight: var(--w-strong); box-shadow: inset 0 -2px 0 var(--c-accent); }
.crm-more > summary, .crm-tabs-more > summary { align-items: center; }
/* a record's parts: the shared tabs, and under 641 px the first three and More (DESIGN_LEAD R3); wider, More is not drawn */
.crm-rec-tabrow { display: flex; flex-wrap: nowrap; align-items: end; gap: var(--sp-1); min-width: 0; border-bottom: var(--line) solid var(--c-line); }
.crm-rec-tabrow > .tabs { flex: 0 1 auto; border-bottom: 0; }
.crm-rec-tabrow > .crm-tabs-more { flex: none; display: none; }
.crm-tabs-more > summary .crm-chev { margin-left: var(--sp-1); }
.crm-tabs-more > .menu { left: auto; right: 0; }
/* the toolbar's phone-only parts (R1) and the sample note's short words (S-1): hidden at 641 px and up */
.crm-tool-narrow, .crm-tools-narrow, .crm-sample-s, .crm-sample-narrow { display: none; }
/* the icon family's chevron: the back one turned down, as the shared select's (.ctl-sel-ic) */
.crm-chev { transform: rotate(-90deg); color: var(--c-ink-2); flex: none; }
.crm-more > summary .crm-chev { margin-left: var(--sp-1); }
.crm-more > .menu { left: 0; right: auto; display: grid; gap: var(--sp-1); }
.crm-more > .menu .crm-v { border-radius: var(--r-s); }
.crm-more > .menu .crm-v.is-on { background: var(--c-accent-soft); box-shadow: none; }
.crm-saved { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); border-bottom: var(--line) solid var(--c-line); }
.crm-saved .crm-v-saved { padding-left: 0; }
/* change 1: the made-up sample data's note is one slim line; cut with an ellipsis where it does not fit, whole on hover */
.crm .crm-sample { flex-wrap: nowrap; }
.crm-sample-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* the saved views' phone picker: hidden at 641 px and up, where the saved views are tabs */
.crm-vpick { display: none; }
.crm-vpick { min-width: 0; max-width: 100%; }
/* the picker is the toolbar's first button: its menu opens from the button's left, inside the window (DEPUTY_TESTER
   14:52: from the right it stood 56 px past the window's left edge at 390) */
.crm-vpick > .menu { left: 0; right: auto; }
.crm-vpick > summary { display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%; }
/* a long saved view's name keeps the picker one line, cut with an ellipsis (DESIGN_A 14:23) */
.crm-vpick > summary > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sample > form { flex: none; }
/* its one step keeps one line beside the cut note (DEPUTY_TESTER 14:52 shot at 1440: it wrapped over three lines) */
.crm-sample .btn { white-space: nowrap; }
/* change 3: the one accent New, top right of the title row; the other tools in the "..." beside Filter, Sort, Columns */
.crm-rec-head > .crm-new { margin-left: auto; align-self: center; }
.crm-tools-more { align-self: center; }
.crm-tools-more > .menu { left: 0; right: auto; }
.crm-tools-more.is-on > summary { background: var(--c-accent-soft); }
/* change 4: a person or a company with initials, a contact's role under the name; an owner with initials */
.crm-namecell > .avatar { float: left; margin-right: var(--sp-2); }
.crm-t .crm-role { display: block; font-size: var(--fs-1); color: var(--c-ink-2); }
.crm-t td.crm-owner > .avatar { vertical-align: middle; margin-right: var(--sp-1); }
/* change 5: a deal card's amount bold, its owner with initials, Add a deal at the foot of each open column */
.crm-card-amt { font-weight: var(--w-strong); }
.crm-card-owner { display: flex; align-items: center; gap: var(--sp-1); }
.crm-col-add { justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-3); }
/* change 6: the record's header: initials, the name with "role at company" under it, the acts together on the right */
.crm-rec-head.crm-rec-top { flex-wrap: nowrap; align-items: center; }
.crm-rec-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); min-width: 0; flex: 1 1 auto; }
/* a long name keeps one line, cut with an ellipsis, whole on hover (title) and in the page's title (DESIGN_LEAD M3) */
.crm-rec-title > .crm-h { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-rec-role { margin: 0; flex-basis: 100%; color: var(--c-ink-2); order: 1; }
.crm-rec-acts { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--sp-2); }
.crm-about { margin: 0; }
@container frame (max-width: 640px) {
  .crm-rec-head.crm-rec-top { flex-wrap: wrap; }
  .crm-rec-acts { margin-left: 0; justify-content: flex-start; flex-basis: 100%; }
  .crm-col-add { min-height: 44px; }
  /* the saved views become one picker in the toolbar row: header at most three rows (DESIGN_LEAD M1, DR35) */
  .crm-saved.has-pick { display: none; }
  .crm-vpick { display: block; flex: 1 1 auto; }
  /* one toolbar row: View (the free width), Filter, and "..." holding Sort and Columns (DESIGN_LEAD and DESIGN_A R1) */
  .crm-tools { flex-wrap: nowrap; }
  .crm-tool-wide { display: none; }
  .crm-tool-narrow { display: flex; }
  .crm-tools-narrow { display: block; }
  /* the made-up note is one line: "Made-up sample data" and Remove; each made-up record has its own chip (S-1, N-1) */
  .crm-sample-t, .crm-sample-wide { display: none; }
  .crm-sample-s { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crm-sample-narrow { display: inline-flex; min-height: 44px; }
  /* the record header: no circle on a phone (the list row has the initials); back and forward start the name's row (R2) */
  .crm-rec-top > .avatar { display: none; }
  /* a record's parts: the first three and More (R3) */
  .crm-rec-tabrow .crm-tab-late:not(.is-on) { display: none; }
  .crm-rec-tabrow > .crm-tabs-more { display: block; }
  /* the menus at the row's right end hang from their right edge, inside the window (DEPUTY_TESTER 16:24: DR30, DR3) */
  .crm-more > .menu, .crm-tools-more > .menu { left: auto; right: 0; }
  .crm-menu > .menu { max-width: calc(100cqw - 2 * var(--sp-3)); max-height: 45svh; }
}

/* Relationships on a phone (AD-118 phone round; P16-650 to P16-655). Outside a layer, like the CRM rules above, so these win */
@container frame (max-width: 640px) {
  /* P16-651: each record is a card, every field on its own line with its column's name; the tick and the menu at its corners */
  .crm-scroll .crm-t, .crm-scroll .crm-t tbody, .crm-scroll .crm-t tr, .crm-scroll .crm-t td { display: block; }
  .crm-scroll .crm-t thead { display: none; }
  .crm-scroll .crm-t tr { position: relative; padding: var(--sp-2) calc(var(--sp-6) + var(--sp-3)) var(--sp-2) var(--sp-2); border-bottom: var(--line) solid var(--c-line); }
  .crm-scroll .crm-t tr:has(.crm-tick) { padding-left: calc(var(--sp-6) + var(--sp-3)); }
  .crm-scroll .crm-t td { padding: var(--sp-1) 0; border-bottom: 0; white-space: normal; overflow-wrap: anywhere; }
  .crm-scroll .crm-t td.num { text-align: left; }
  /* the name wraps only here (wider, a cell is one line): the circle stands in its own column, so a second line of the
     name, its tags or role never runs under it (DESIGN_A 5) */
  .crm-scroll .crm-t td.crm-namecell { position: relative; padding-left: calc(1.75 * var(--fs-1) + var(--sp-2)); }
  .crm-scroll .crm-t td.crm-namecell > .avatar { position: absolute; left: 0; top: var(--sp-1); float: none; margin: 0; }
  .crm-scroll .crm-t td[data-label]::before { content: attr(data-label) ": "; color: var(--c-ink-2); }
  .crm-scroll .crm-t td[data-label]:has(> span:empty) { display: none; }
  .crm-scroll .crm-t td.crm-tick { position: absolute; left: 0; top: var(--sp-1); width: 44px; padding: 0; display: grid; place-items: center; min-height: 44px; }
  /* the corner is the row menu's (PAPER's P2 SC-1, DEPUTY_ENGINE S1): a last cell that holds no menu (an own kind's Owner,
     Import's Goes into) stays a line of the card, and a row with no menu keeps no room for one */
  .crm-scroll .crm-t td:last-child:has(> .crm-menu) { position: absolute; right: 0; top: var(--sp-1); padding: 0; }
  .crm-scroll .crm-t tr:not(:has(.crm-menu)) { padding-right: var(--sp-2); }
  /* the whole card opens its record (OFFICE 11:57: the name link alone was 19 px tall); the tick, the menu and links in the card stay above it */
  .crm-scroll .crm-t a.crm-name::after { content: ""; position: absolute; inset: 0; }
  .crm-scroll .crm-t td a.link, .crm-scroll .crm-t td.crm-tick, .crm-scroll .crm-t td:last-child:has(> .crm-menu) { position: relative; z-index: var(--z-part); }
  .crm-scroll .crm-t td.crm-tick, .crm-scroll .crm-t td:last-child:has(> .crm-menu) { position: absolute; }
  /* AD-154 P2 F-8: a record's Linked list, its names whole targets */
  .crm-link-i > a.link { display: inline-flex; align-items: center; min-height: 44px; }
  /* Add link's choice is named by long words ("is the unit of: ..."): its select is the line's width and cuts its own words,
     never the page's (the walk found it 19 px past the page at 402, 61 at 360); New task's form shares the class */
  .crm-task-new .ctl-sel { display: flex; width: 100%; }
  .crm-task-new .ctl-sel select { width: 100%; min-width: 0; text-overflow: ellipsis; }
  /* P16-654: the body's rows pack at the top, so a short page (Access) does not get the spare height above it */
  .crm-body { align-content: start; }
  /* P16-650: Access's table wraps its words */
  .crm-p21 th, .crm-p21 td { white-space: normal; }
  /* P16-652: every view on view, each 44 px tall; since CRM look r0b the object tabs are one row that scrolls sideways (the shared
     .tabs inside) with More beside it, never wrapped (CT12; DESIGN_LEAD M1, DESIGN_A 1; DEPUTY_TESTER 14:52 shots) */
  .crm-views { display: flex; flex-wrap: nowrap; overflow: visible; }
  .crm-v { min-height: 44px; align-items: center; }
  /* P16-422: Relationships empty, its views are Access alone, a stray word at the top: the views step aside and the
     empty state says what Access is, as a button under its first steps */
  .crm-views:not(:has(.crm-v:not([href="/crm/access"]))):has(~ .crm-page .crm-empty-access) { display: none; }
  .crm-empty-access { display: inline-flex; justify-self: start; width: max-content; margin-top: var(--sp-2); }
  /* P16-655: snap, move and size with keys mean nothing on a phone; the menu stays inside the window */
  .js .win-menu .menu-i[data-wm], .win-menu .wm-why { display: none; }
  /* the open menu hangs from the window, not from its icon, and spans the window's inside, so it can never reach past
     its edge (it did by 7 px: PAPER_SHEET 12:14, k02) */
  .win-menu { position: static; }
  .win-menu-list { left: var(--sp-2); right: var(--sp-2); top: calc(var(--ctl) + var(--sp-2) + 6px); min-width: 0; }
  /* AD-154 P2 (PAPER's p2-phone-check-r1 SC-1; F-3 own stages, F-5 own fields): an edit table is one card a row, each cell
     on a line of its own under its column's name (the fields' own names are for screen readers), every control as wide as
     the card; the record lists' cards above are for rows that open a record, these hold forms */
  .crm-edit-t, .crm-edit-t tbody, .crm-edit-t tr, .crm-edit-t td { display: block; }
  .crm-edit-t thead { display: none; }
  .crm-edit-t tr { padding: var(--sp-2) 0; border-bottom: var(--line) solid var(--c-line); }
  .crm-edit-t td { padding: var(--sp-1) 0; border-bottom: 0; white-space: normal; overflow-wrap: anywhere; }
  .crm-edit-t tr > :first-child { padding-inline-start: 0; }
  .crm-edit-t td:empty { display: none; }
  .crm-edit-t td.num { text-align: left; }
  .crm-edit-t td[data-label]::before { content: attr(data-label); display: block; margin-bottom: var(--sp-1); font-size: var(--fs-2); color: var(--c-ink-2); }
  .crm-edit-t td.num[data-label]::before { display: inline; content: attr(data-label) ": "; }
  .crm-edit-t :is(.field, .ctl-sel, .ctl-sel select) { width: 100%; min-width: 0; }
  /* SC-2: a field or select and its button wrap onto lines of their own, a select as wide as the line (F-5 here; F-2, F-13 too) */
  .crm-inline { flex-wrap: wrap; gap: var(--sp-2); max-width: 100%; }
  .crm-inline > :is(.field, .ctl-sel) { flex: 1 1 100%; min-width: 0; }
  .crm-inline .ctl-sel select { width: 100%; min-width: 0; }
  /* the same for a rule's or a form's field row (Convert's Amount and its currency ran 7 px past the page at 360) */
  .crm-frule { justify-self: stretch; width: 100%; }   /* a form row's control column sizes its parts to their content (.frow-c) */
  .crm-frule > :is(.field, .ctl-sel) { flex: 1 1 100%; min-width: 0; }
  .crm-frule .ctl-sel select { width: 100%; min-width: 0; }
  /* SC-3: a disclosure named by a text link (Export…, Open Service…) and a board's case are whole targets (Export… was 23 px) */
  .crm-page summary.link, .crm-board .crm-notes a.link { display: inline-flex; align-items: center; min-height: 44px; }
}

/* People and a record's parts on a phone (P16-653, P16-656, P16-657) */
@layer core-phone {
@container frame (max-width: 640px) {
  /* P16-653: a record's parts wrap, so History with them is whole */
  /* P16-656: People's tools stacked: the two buttons, then the switch with its words on one line, then the counts */
  /* P16-656 is now P1: one row (Invite someone, More, the find box), the count above the list */
  /* P16-657: the chosen person first, the list under it */
  .people.has-side > .people-side { order: -1; border-top: 0; border-bottom: var(--line) solid var(--c-line); }
  /* each person a full thumb's height (OFFICE 11:57: 38 px) */
  .people-r { min-height: 44px; align-items: center; }
}
}

/* CRM P2 E: the bulk bar shows while a row is ticked, its count from the ticks themselves (CSS, no script) */
.crm-page { counter-reset: crm-chosen; }
.crm-t input[form="crm-bulk"]:checked { counter-increment: crm-chosen; }
.crm-bulk { display: none; align-items: center; flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-accent-soft); }
.crm-page:has(input[form="crm-bulk"]:checked) .crm-bulk, .crm-bulk.is-all { display: flex; }
.crm-bulk-n::after { content: counter(crm-chosen) " chosen"; font-weight: var(--w-strong); }
.crm-tickh, .crm-tick { width: 32px; }
.crm-tick input { width: 18px; height: 18px; }
.crm-tick-all { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--c-ink-2); border-radius: 4px; vertical-align: middle; }
.crm-tick-all.is-on { background: var(--c-accent); border-color: var(--c-accent); }

/* P2 G Change owner: the question as its own page; the new owner first, then what changes, then Save */
.crm-dialog { display: grid; gap: var(--sp-3); max-width: 36rem; }
.crm-owner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.crm-owner .sub-h { flex-basis: 100%; margin: 0; }
.crm-owner select { min-height: var(--ctl); padding: 0 var(--sp-2); border: var(--line) solid var(--edge); border-radius: var(--r-m);
  background: var(--c-surface-2); color: var(--c-ink); font: inherit; min-width: 0; max-width: 100%; flex: 1 1 14rem; }
.crm-effect { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-accent-soft); }
.crm-effect p { margin: 0; }
.crm-effect form, .crm-effect .btn { justify-self: start; }

/* P5 the panel: Filter (n), Sort and Columns open their part of one form under the toolbar; the rules in use show as chips with Drop */
.crm-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.crm-tool.is-on { background: var(--c-accent-soft); }
.crm-panel { display: grid; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-line); }
.crm-part { display: grid; gap: var(--sp-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.crm-part > legend { padding: 0; margin-bottom: var(--sp-2); }
.crm-panel-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.crm-frule { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.crm-frule select, .crm-frule input[type=text], .crm-frule input[type=date] { min-height: var(--ctl); padding: 0 var(--sp-2); border: var(--line) solid var(--edge);
  border-radius: var(--r-m); background: var(--c-surface-2); color: var(--c-ink); font: inherit; min-width: 0; max-width: 100%; }
.crm-frule.is-bad input { border-color: var(--c-danger); }
.crm-frule-err { flex-basis: 100%; margin: 0; color: var(--c-danger); font-size: var(--fs-2); }
.crm-frule-set { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.crm-frule-set label { display: inline-flex; align-items: center; gap: var(--sp-1); }
.crm-choose { margin: 0; padding: 0; border: 0; min-width: 0; }
.crm-choose > legend { float: left; width: 3rem; padding: 0; }
.crm-choose-block > legend { float: none; width: auto; display: block; margin-bottom: var(--sp-1); }
/* P16 Import: its forms' fields at their own width */
.crm-import-form > select, .crm-import-form > label, form.crm-panel > select, form.crm-panel > label { justify-self: start; }
.crm-import-form select, form.crm-panel > select { min-height: var(--ctl); padding: 0 var(--sp-2); 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%; }
.crm-filter-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.crm-in-use { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.crm-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--c-accent-soft); font-size: var(--fs-2); }

/* P5 saved views: under their kind in the views list, each with its menu; the line while one is changed (E) */
.crm-v-saved { display: flex; align-items: center; gap: var(--sp-1); padding-left: var(--sp-3); }
.crm-v-saved > .crm-v { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-link { display: block; max-width: 18rem; padding: 0 var(--sp-2) var(--sp-1); font-size: var(--fs-1); color: var(--c-ink-2); overflow-wrap: anywhere; user-select: all; }
.crm-changed { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-accent-soft); }
.crm-save input[type=text] { min-height: var(--ctl); padding: 0 var(--sp-2); border: var(--line) solid var(--edge); border-radius: var(--r-m);
  background: var(--c-surface-2); color: var(--c-ink); font: inherit; max-width: 24rem; }

/* P6 a record's page: the heading and its menu; fields, contacts and deals beside the tabs; one column when narrow */
.crm-record { display: grid; gap: var(--sp-3); min-width: 0; }
.crm-rec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.crm-why > summary { list-style: none; cursor: pointer; display: inline-flex; }
.crm-why > summary::-webkit-details-marker { display: none; }
.crm-why > p { margin: var(--sp-1) 0 0; max-width: 60ch; }
.crm-rec-body { display: grid; grid-template-columns: var(--pane-crm-record-fields, 18rem) minmax(0, 1fr); gap: var(--sp-4); align-items: start; position: relative; }
.crm-rec-body > .split { --split-at: calc(var(--pane-crm-record-fields, 18rem) + var(--sp-4) / 2); }
@media (max-width: 760px) { .crm-rec-body { grid-template-columns: minmax(0, 1fr); } .js .crm-rec-body > .split { display: none; } }
.crm-rec-side { display: grid; gap: var(--sp-3); min-width: 0; }
.crm-fields { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); margin: 0; }
.crm-fields dt { color: var(--c-ink-2); }
.crm-fields dd { margin: 0; overflow-wrap: anywhere; }
.crm-dd-note { display: block; font-size: var(--fs-1); }
.crm-rec-part { display: grid; gap: var(--sp-1); }
.crm-rec-part .sub-h { margin: 0; }
.crm-rec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.crm-rec-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); }
.crm-rec-act { margin-left: auto; }
.crm-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: var(--line) solid var(--c-line); padding-bottom: var(--sp-1); margin-bottom: var(--sp-2); }
.crm-tab { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-s); color: var(--c-ink); text-decoration: none; }
.crm-tab.is-on { background: var(--c-accent-soft); font-weight: var(--w-strong); }
.crm-rec-tabs { display: grid; gap: var(--sp-2); min-width: 0; }
.crm-note-new { display: grid; gap: var(--sp-2); }
.crm-note-new textarea { min-height: 4rem; padding: var(--sp-2); border: var(--line) solid var(--edge); border-radius: var(--r-m); background: var(--c-surface-2); color: var(--c-ink); font: inherit; resize: vertical; }
.crm-note-new .btn { justify-self: end; }
.crm-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.crm-notes p { margin: 0; }
.crm-note-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.crm-changes { margin: var(--sp-1) 0 0; padding-left: var(--sp-4); font-size: var(--fs-2); }
.crm-ask { display: grid; gap: var(--sp-2); max-width: 32rem; }
.crm-ask input[type=text] { min-height: var(--ctl); padding: 0 var(--sp-2); border: var(--line) solid var(--edge); border-radius: var(--r-m); background: var(--c-surface-2); color: var(--c-ink); font: inherit; }
/* the empty CRM's first steps, P21 Access, the made-up sample data (v146) */
.crm-start { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }
.crm-start .form { display: inline; }
.crm-sample { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-2); border: var(--line) solid var(--c-line); border-radius: var(--r-m); font-size: var(--fs-2); }
.crm-tag { margin-left: var(--sp-1); padding: 0 var(--sp-2); border: var(--line) solid var(--c-line); border-radius: var(--r-m); font-size: var(--fs-1); color: var(--c-ink-2); }
.crm-p21 td.crm-why { white-space: normal; }
/* Relationships R3: New's Who sees it, and Share with Customers... */
.crm-home { display: grid; gap: var(--sp-1); margin: 0; padding: 0; border: 0; }
.crm-home-o { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--ctl); }
.crm-to-space { display: grid; gap: var(--sp-2); }
/* History with them (Relationships R1): one line per item, the date, kind, title and app in columns, Open at the end */
.crm-with { display: grid; gap: var(--sp-2); }
.crm-with-list { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.crm-with-l { display: grid; grid-template-columns: 6.5em 5em minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3);
  min-height: var(--row); padding: 0 var(--sp-2); border-bottom: var(--line) solid var(--c-line); }
.crm-with-d { white-space: nowrap; }
.crm-with-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container frame (max-width: 640px) {
  /* on a phone: the date small above the title, Open beside both; the kind and the app stay in the sentence */
  .crm-with-l { grid-template-columns: minmax(0, 1fr) auto; gap: 0 var(--sp-3); padding-block: var(--sp-1); }
  .crm-with-k, .crm-with-s { display: none; }
  .crm-with-d { grid-column: 1; font-size: var(--fs-1); color: var(--c-ink-2); }
  .crm-with-t { grid-column: 1; white-space: normal; }
  .crm-with-l > .btn { grid-column: 2; grid-row: 1 / span 2; }
}
.crm-ask .btn { justify-self: start; }
.crm-stage-line { margin: 0; font-size: var(--fs-2); color: var(--c-ink-2); }
.crm-move { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.crm-move select, .crm-save input[type=date] { min-height: var(--ctl); padding: 0 var(--sp-2); border: var(--line) solid var(--edge); border-radius: var(--r-m); background: var(--c-surface-2); color: var(--c-ink); font: inherit; }

/* P14 tasks: Show as links; each task a Finished tick, its words, Move to Bin; New task as a small form */
.crm-tasks { display: grid; gap: var(--sp-2); }
.crm-show { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.crm-task-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.crm-task { display: flex; align-items: flex-start; gap: var(--sp-2); }
.crm-task-main { display: grid; gap: var(--sp-1); flex: 1 1 auto; min-width: 0; }
.crm-task-title { overflow-wrap: anywhere; }
.crm-task.is-done .crm-task-title { text-decoration: line-through; color: var(--c-ink-2); }
.crm-tick-btn { width: 20px; height: 20px; margin-top: var(--sp-1); padding: 0; border: 2px solid var(--c-ink-2); border-radius: 50%; background: transparent; cursor: pointer; }
.crm-tick-btn.is-on { background: var(--c-accent); border-color: var(--c-accent); }
.crm-tick-btn.ibtn { width: 20px; height: 20px; color: var(--c-accent-ink); }
.crm-tick-btn .ic { width: 14px; height: 14px; visibility: hidden; }
.crm-tick-btn.is-on .ic { visibility: visible; }
.crm-task-new { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-line); }
.crm-task-new .sub-h { margin: 0 0 var(--sp-1); }
.crm-task-new input[type=text], .crm-task-new input[type=date], .crm-task-new input[type=time], .crm-task-new input[type=number], .crm-task-new input[type=email], .crm-task-new input[type=tel], .crm-task-new select, .crm-task-new textarea { min-height: var(--ctl); padding: 0 var(--sp-2);
  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%; }
.crm-task-new textarea { padding: var(--sp-2); }
/* a .field already draws the box: the input inside it draws none (a second rounded box inside the first, Pavel 21:31, New company) */
:is(.crm-task-new, .crm-save, .crm-ask, .crm-frule) .field input[type] { border: 0; border-radius: 0; padding: 0; min-height: 0; background: transparent; max-width: none; }
.crm-task-new .btn { justify-self: end; margin-top: var(--sp-1); }

/* P9 New and Change: things to fix, each a link to its field; the form's fields one under another */
.crm-form { max-width: 40rem; }
.crm-fix { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-danger); }
.crm-fix .sub-h { margin: 0 0 var(--sp-1); }
.crm-fix ul { margin: 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-1); }
.crm-inline { display: inline-flex; }
.crm-form-fields .crm-panel-acts { margin-top: var(--sp-2); }
.crm-form-fields .crm-panel-acts .btn { justify-self: auto; margin-top: 0; }

/* People: an opening's read-only view (contract v57): its parts as links, each a plain list */
.people-see { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.people-see-l { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-s); color: var(--c-ink); text-decoration: none; }
.people-see-l.is-on { background: var(--c-accent-soft); font-weight: var(--w-strong); }
.people-seen { display: grid; gap: var(--sp-2); max-height: 320px; overflow: auto; }
.people-seen-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-2); }
.people-seen-m { margin: 0; font-size: var(--fs-2); }

/* P13 the deals board: a column per stage, side by side (the board scrolls sideways inside itself, never the page);
   stacked when the room is narrow; CardDrag rings the column under a dragged card */
.crm-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); }
@media (max-width: 840px) { .crm-board { grid-auto-flow: row; grid-auto-columns: auto; } }
.crm-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; }
.crm-col.is-shut { opacity: .85; }
.crm-col.is-target { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.crm-col-h { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1); }
.crm-col-t { flex-basis: 100%; }
.crm-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.crm-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; }
html.js .crm-card[data-stage] { cursor: grab; }
/* a drag must not select the text it passes over (the board only, and only with the script) */
html.js .crm-board { user-select: none; -webkit-user-select: none; }
.crm-card.is-dragging { opacity: .6; cursor: grabbing; }
.crm-card-name { font-weight: var(--w-strong); overflow-wrap: anywhere; }
.crm-card .crm-menu { position: absolute; top: 4px; right: 4px; }
.crm-card .is-late { color: var(--c-danger); }
.crm-card-move { display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center; padding: 0 var(--sp-2); }

/* Twin CRM build 3 (SOS1Web.CRMViews): the deals and tasks as a timeline, a chart, a month and a workload, phone first.
   A bar is a width class (core.css .w0-.w100): the page rules allow no inline style. A chart is its own table, its bar
   cell hidden from the screen reader */
.crm-tl { display: grid; gap: var(--sp-3); }
.crm-tl-g { display: grid; gap: var(--sp-1); }
.crm-tl-h { margin: 0; display: flex; align-items: baseline; gap: var(--sp-2); }
.crm-tl-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.crm-tl-i { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-2); padding: var(--sp-2); border-radius: var(--r-s); background: var(--c-surface); border: var(--line) solid var(--c-line); }
.crm-tl-on { min-width: 4.5em; }
.crm-tl-name { font-weight: var(--w-strong); overflow-wrap: anywhere; min-width: 0; }
.crm-tl-d { overflow-wrap: anywhere; min-width: 0; }
:is(.crm-tl, .crm-chart) .is-late { color: var(--c-danger); }
.crm-chart-scroll { overflow-x: auto; }
.crm-chart { width: 100%; border-collapse: collapse; font-size: var(--fs-2); }
.crm-chart :is(th, td) { padding: var(--sp-2); text-align: left; border-bottom: var(--line) solid var(--c-line); white-space: nowrap; }
.crm-chart thead th { font-weight: var(--w-strong); color: var(--c-ink-2); }
.crm-chart .num { text-align: right; }
.crm-chart caption { text-align: left; margin: 0 0 var(--sp-1); }
.crm-chart th[scope="row"] { font-weight: normal; white-space: normal; overflow-wrap: anywhere; }
.crm-chart-bar { width: 40%; min-width: 4rem; }
.crm-bar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--c-line); overflow: hidden; }
.crm-bar i { display: block; height: 100%; background: var(--c-accent); border-radius: inherit; }
.crm-cal-nav { display: flex; align-items: center; gap: var(--sp-2); }
.crm-cal-m { margin: 0; flex: 1; text-align: center; }
/* a phone: the month's name has its own line above Previous and Next, so a long one (September, November, December, February) never pushes Next month off the page: at 360 px "November 2026" ran 6 px past it */
@container frame (max-width: 480px) {
  .crm-cal-nav { flex-wrap: wrap; row-gap: var(--sp-1); }
  .crm-cal-m { order: -1; flex: 1 0 100%; }
  .crm-cal-nav > :last-child { margin-left: auto; }
}
.crm-cal { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-1); }
.crm-cal th { padding: var(--sp-1); color: var(--c-ink-2); font-weight: var(--w-strong); text-align: left; }
.crm-cal-d { vertical-align: top; padding: var(--sp-1); border: var(--line) solid var(--c-line); height: 5.5rem; overflow: hidden; }
.crm-cal-d.is-other { background: var(--c-surface-2); }
.crm-cal-d.is-other .crm-cal-n { color: var(--c-ink-2); }
.crm-cal-d.is-today .crm-cal-n { background: var(--c-accent-soft); font-weight: var(--w-strong); }
.crm-cal-d.is-on { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.crm-cal-n { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; border-radius: var(--r-s); }
.crm-cal-i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--c-ink-2); }
.crm-cal-i.is-meeting { color: var(--c-ink); }
.crm-cal-c { display: none; }
.crm-cal-day { display: grid; gap: var(--sp-1); }
@container frame (max-width: 640px) {
  .crm-cal-d { height: auto; text-align: center; }
  .crm-cal-i { display: none; }
  .crm-cal-c { display: block; }
  /* AD-154 P2 F-7: seven days fill a phone's width (about 40 px each), so a day's link is as wide as its day and 44 px tall;
     a least width of 44 px ran it out of a day that hides its overflow (all 35 days at 402 and 360) */
  .crm-cal-n { min-width: 0; width: 100%; min-height: 44px; }
  .crm-chart-bar { width: 30%; }
  .crm-chart :is(th, td) { padding: var(--sp-1); }
  /* the workload's numbers fill a phone; its bar (hidden from the screen reader as well) adds nothing there */
  .crm-load .crm-chart-bar { display: none; }
  /* a switch in a Show row takes its own whole row, so its segments sit side by side (the .seg grid above); a .btns row
     too (Tasks' Show, Fusion's picture size): in a flex row the .seg shrank to its words, so 100 % was narrow and the
     grid had one column, Open, Finished and All stacked (SQ-H13) */
  .crm-show .seg, .btns > .seg { flex: 1 1 100%; }
}
@media (forced-colors: active) { .crm-bar i { background: Highlight; } .crm-cal-d.is-on { outline-color: Highlight; } }

/* Hold to delete for good (CRM r6 F27; HoldButton, NX-002): the tick and plain button without the script; with it
   the button fills while held, and a tool that cannot hold gets the tick back (is-plain) */
.crm-hold-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.crm-sure { display: flex; align-items: center; gap: var(--sp-2); }
html.js .crm-hold-form:not(.is-plain) .crm-sure { display: none; }
.hold { position: relative; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.hold > span { position: relative; }
/* under a mouse the hover would paint the button solid and hide the fill: a hold button keeps its outline */
.btn-danger.hold:hover { background: transparent; color: var(--c-danger); }
.hold .hold-fill { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); background: var(--c-danger); opacity: .28; pointer-events: none; }
.hold.is-holding .hold-fill { transform: scaleX(1); transition: transform 800ms linear; }
.hold.is-held .hold-fill { transform: scaleX(1); opacity: .45; }
.is-plain .hold .hold-fill { display: none; }
@media (prefers-reduced-motion: reduce) { .hold.is-holding .hold-fill { transition: none; opacity: .45; } }
.still .hold.is-holding .hold-fill { transition: none; opacity: .45; }

/* SOS waits until Semurg answers (the 503 page, SOS1Web.Unavailable): the sign-in card's look, its words left-aligned */
.wait-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); max-width: 30rem; text-align: left; }
.wait-card p { margin: 0; }
.wait-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* The welcome after a sign-in (SOS1Web.Welcome; shell r9 amendment A1): over everything, then gone; a click, a tap or
   Skip ends it at once (the #welcome target, no script); reduced motion shows the still hexagon and the two lines */
.welcome { position: fixed; inset: 0; z-index: var(--z-welcome); display: grid; place-items: center; color: var(--c-ink);
  /* solid in either theme: the surface tint laid over the floor colour (the surface alone is see-through glass) */
  background: var(--c-face-solid);
  animation: welcome-out .5s ease 5.95s forwards; }
.welcome:target { display: none; }
.welcome-cover { position: absolute; inset: 0; z-index: var(--z-part); }
.welcome-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* the parts, their places and their motion: welcome.css, made by SOS1Web.Welcome.css/0 */
.welcome-still { display: none; }
/* "BOS" after the wordmark (AD-108 addendum): the display font at the wordmark's size, in the logo's box */
.welcome-bos { font: var(--w-display) 150px var(--f-display); }
.welcome-skip { position: absolute; z-index: var(--z-part-2); bottom: max(24px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); }
@keyframes welcome-out { to { opacity: 0; visibility: hidden; } }
/* a modal question (SOS1Web.UI.question, accessibility r3 AG3 b): over the page, whose other parts are inert, on a
   dimmed floor; the card itself solid in either theme */
.question-layer { position: fixed; inset: 0; z-index: var(--z-question); display: grid; place-items: center; padding: max(var(--sp-4), env(safe-area-inset-top, 0px)) var(--sp-4) max(var(--sp-4), env(safe-area-inset-bottom, 0px));
  background: rgb(var(--g-rgb) / .55); }
.question { width: min(560px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: none; display: grid; gap: var(--sp-3); padding: var(--sp-5);
  background: var(--c-face-solid); box-shadow: var(--sh-pop); }
/* a question taller than the screen scrolls, and its choice stays in view at the foot (DESIGN_LEAD 14:06; CS8): the negative bottom and margin cancel the question's own
   padding so the row sits on the box's edge, on the question's own ground so the text scrolls under it */
.question > .question-acts { position: sticky; bottom: calc(-1 * var(--sp-5)); margin-bottom: calc(-1 * var(--sp-5)); padding-block: var(--sp-3) var(--sp-5);
  background: var(--c-face-solid); z-index: var(--z-part); }
@media (prefers-reduced-motion: reduce) {
  .welcome-motion { display: none; }
  .welcome-still { display: grid; }
  .welcome { animation-delay: 1s; animation-duration: .2s; }
}
.still .welcome-motion { display: none; }
.still .welcome-still { display: grid; }
.still .welcome { animation-delay: 1s; animation-duration: .2s; }

/* a folder chosen beside its name (Pavel, 20 Oct): the cells stay the row's own grid cells; the link has no box */
.files-pick { display: block; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
/* a column's right edge (Files explorer r5 EX5): a separator to drag or to move with Left and Right; only with the
   script that moves it (ColumnWidths) */
.files-head > [role=columnheader] { position: relative; }
.col-sep { display: none; position: absolute; top: 0; bottom: 0; right: calc(var(--sp-3) / -2 - 4px); width: 8px; z-index: var(--z-part);
  cursor: col-resize; touch-action: none; border-radius: 4px; }
.js .col-sep { display: block; }
/* the LAST column's handle stays inside its cell: the others hang over the gap beside them, but past the last cell it hung 10 px, 2 past the header row's own padding (CS9, TESTER 15:15) */
.files-head > [role=columnheader]:last-child > .col-sep { right: 0; }
.col-sep:hover, .col-sep:focus-visible, .col-sep.is-held { background: var(--c-accent-soft); box-shadow: inset 0 0 0 1px var(--c-accent); }
/* Columns… (EX3): a small panel under its button, the list's own */
.files-cols { justify-self: end; margin: calc(var(--sp-2) * -1) 0 var(--sp-1); position: relative; }
.files-cols-b { position: absolute; right: 0; top: 100%; z-index: var(--z-pin); min-width: 220px; padding: var(--sp-3); border-radius: var(--r-m);
  background: var(--c-surface); border: var(--line) solid var(--edge); box-shadow: var(--sh-pop); }
.files-cols-b fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
/* AS-03 V1: Our voice's groups, each a fieldset named by its heading (DESIGN_LEAD 10:44), in the page's own spacing */
.voice-set { border: 0; margin: 0 0 var(--sp-3); padding: 0; min-width: 0; display: grid; gap: var(--sp-2); }
.voice-set > legend { padding: 0; margin: 0 0 var(--sp-1); }

/* a live part that keeps failing to start again (LiveView puts phx-server-error on it): the shell's line shows */
/* accessibility r3 AG11 (the reader test; AX6 6 b): while all is well the line stays in the page as an empty status
   region, out of sight (as .sr) and its words not drawn, so a reader hears them when they come; display: none had
   taken the region itself out, and a region that appears with its words is not said */
.os:not(:has(.phx-server-error)) .os-notes > .key-note.live-down { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.os:not(:has(.phx-server-error)) .os-notes > .key-note.live-down > * { display: none; }
.os:has(.phx-server-error) .key-note.live-down { display: flex; }
/* the shell's standing lines (the key's, a live part's, the librarian's) stand one above another over the dock; the
   desk keeps room for them only while one shows */
.os-notes { position: absolute; z-index: var(--z-menu-scrim); bottom: 88px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-2); width: calc(100% - 24px); pointer-events: none; }
.os-notes > .key-note { position: static; transform: none; max-width: 100%; pointer-events: auto; }
.os-desk:has(~ .os-notes > .key-note:not(.live-down)), .os:has(.phx-server-error) .os-desk { padding-bottom: calc(var(--sp-3) + var(--note-h)); }
@container frame (max-width: 640px) { /* desk */
  .os-notes > .key-note { width: 100%; }
  .os-desk:has(~ .os-notes > .key-note:not(.live-down)), .os:has(.phx-server-error) .os-desk { padding-bottom: calc(var(--sp-3) + var(--note-h-phone)); }
}
/* both a live part's line and another showing: room for two */
.os:has(.phx-server-error) .os-desk:has(~ .os-notes > .key-note:not(.live-down)) { padding-bottom: calc(var(--sp-3) + var(--note-h) * 2); }
/* the same two lines on a phone: each wraps (86 and 95 px measured at 390 and 360 px, 22 Oct; WRITER1 08:34), so 96 px
   left them 92 px over a window's foot. A height, not a gap: a named size, as IDEAS ruled for the notes (01:27) */
:root { --notes-two-phone: 190px; }
@container frame (max-width: 640px) { /* desk */
  .os:has(.phx-server-error) .os-desk:has(~ .os-notes > .key-note:not(.live-down)) { padding-bottom: calc(var(--sp-3) + var(--notes-two-phone)); }
}
/* PB-11c (TESTER's 0.3 walk, 22 Oct): while the Inbox panel is open its own buttons (Clear all, Done, Close) stand over
   the standing lines, at every text size and on a phone; the lines show beside it and come back on top when it closes.
   A fixed room would not do: at 150 % and 200 % the recovery line wraps to more lines than any room kept for it */
.os:has(.notes-centre) .os-notes { z-index: var(--z-notes-under); }

/* touch targets on a phone (MASTER 13:44, DEPUTY_TESTER's walk at 390 px): the shell's own controls at least 48 px
   tall, the bar's two icons and the switches 48 px to the touch without changing how they look (a wider hit area);
   words in a line of text keep their size, as a text link may */
@container frame (max-width: 640px) {
  /* a row of segments never ends in one ragged word: equal cells, wrapping into whole rows (DESIGN_LEAD 07:08) */
  .seg, fieldset.seg-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem), 1fr)); }
  /* walk r1 item 9 (SEARCH, 4 Nov): the sheet stops under the top bar, not over "Semurg BOS" and the bell, and a choice (Theme's four,
     Text size's three) takes the row's whole width as equal parts under its name, so "Auto" is not alone on a second line */
  .quick { max-height: calc(100dvh - var(--dock-h) - var(--sp-2) - 44px - env(safe-area-inset-top, 0px) - var(--sp-2)); }
  .quick-row > .seg { flex: 1 1 100%; display: flex; flex-wrap: wrap; }  /* after the equal cells above, which wrapped Theme's fourth */
  .quick-row > .seg .seg-o { flex: 1 1 0; min-width: max-content; padding: 0 var(--sp-1); justify-content: center; }  /* equal while they fit; at a large text size a word never gets cut, the choice wraps under itself instead (LOCK2 Q-1) */  /* four words share 332 px: "Outdoors" and "Auto" stay inside */
  /* walk r1, DESIGN_LEAD 17:11 (DESIGN_A n-1): a Settings choice (Theme, Switch by itself) takes the pane's width, its choices side by side while they fit and
     under one another when not, each with its own padding; .choice-set's justify-items: start had shrunk it to a 6.5rem column that stacked Theme and ran
     "Off" into the next words */
  .set-pane .choice-set { justify-self: stretch; }
  .set-pane :is(.choice-set, form.choice) > .seg { justify-self: stretch; display: flex; flex-wrap: wrap; }
  .set-pane :is(.choice-set, form.choice) > .seg .seg-o { flex: 1 1 auto; min-width: 0; }
  /* DESIGN_A 17:20 S-1 (walk 6): a phone's rows are 44 px at least, so the window list's box holds eight of them, the oldest (the one the one-tap button closes) too */
  .sw-rows { max-height: calc(8 * (var(--hit) + var(--sp-2))); }
  .seg-o { justify-content: center; }
  .frame :is(.ibtn, .menu-i, .seg-o, .tab, .btn, .dock-i, .field) { min-height: var(--hit); }
  .frame .ibtn { min-width: var(--hit); }
  .frame .field input { align-self: stretch; }
  .frame .os-bar :is(.os-quick, .os-bell) { display: inline-grid; place-items: center; min-width: 44px; min-height: 48px; margin: -13px -4px; }
  /* SQ-H18: the touch box starts above the bar's text, at the screen's top edge, so the dot at its corner showed half; it sits on the bell's own corner */
  .frame .os-bar .os-bell-dot { top: var(--sp-3); right: calc(var(--sp-3) - var(--sp-1)); }
  .frame .files-r .files-link { display: inline-flex; align-items: center; min-height: 44px; }
  .frame .toggle::before { content: ""; position: absolute; inset: -12px -6px; }
  .frame input[type="range"] { min-height: 44px; }
  /* the skip link (35 px) and the key note's "Confirm it" (21 px), left by d9f44ed (UI's yes, 23:06) */
  .frame .skip, .frame .key-note a { display: inline-flex; align-items: center; min-height: 48px; }
  /* P16-205 (AD-118): a switch's row is the switch: its own target covers the row, the words too (its name already says
     what it does); a row whose title is a link keeps the link. The switch is static so its target measures the row, and
     its knob moves by a relative offset instead, the same place */
  .frame .row:has(.toggle):not(:has(.row-link)) { position: relative; }
  .frame .row:has(.toggle):not(:has(.row-link)) .toggle { position: static; }
  .frame .row:has(.toggle):not(:has(.row-link)) .toggle i { position: relative; display: block; }
  .frame .row:has(.toggle):not(:has(.row-link)) .toggle::before { inset: 0; z-index: var(--z-part); }
  /* P16-207: the whole day cell opens the day; the cell's entries stay their own targets above it. The month cell only:
     the week view's column headings are cal-num links too, and must stay their own size (IDEAS 11:31, MAJOR) */
  .win-calendar .cal-e { position: relative; z-index: var(--z-part); }
  /* P16-208: every row at least 44 px, and a row whose title is a link is the link's target (its own controls above it,
     as Files' side list); a lone link in a note (Read again, Timers, Services, Containers) 44 px tall */
  .frame .row { min-height: 44px; }
  .frame .row:has(> .row-main > .row-link) { position: relative; }
  .frame .row > .row-main > .row-link::after { content: ""; position: absolute; inset: 0; }
  .frame .row:has(> .row-main > .row-link) > .row-trail, .frame .row > .row-main a:not(.row-link) { position: relative; z-index: var(--z-part); }
  .frame .set .note > a.link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* the window menu is not inside the frame's container on every page (TESTER 04:25: Snap, Move with keys 47 px at
   390 px, after d9f44ed): by the viewport as well */
@media (max-width: 640px) { .menu-i { min-height: 48px; } }
/* the same touch targets on any touch screen, a tablet or a touch laptop wider than 640 px too (accessibility r3 AG8) */
@media (pointer: coarse) {
  .frame :is(.ibtn, .menu-i, .seg-o, .tab, .btn, .dock-i, .field) { min-height: var(--hit); }
  .frame .ibtn { min-width: var(--hit); }
  .frame .files-r .files-link { display: inline-flex; align-items: center; min-height: 44px; }
  .frame .toggle::before { content: ""; position: absolute; inset: -12px -6px; }
  .frame input[type="range"] { min-height: 44px; }
  .frame .skip, .frame .key-note a { display: inline-flex; align-items: center; min-height: 48px; }
  /* what the phone's block gained since and this one never did (P16-205, P16-207, P16-208, the bar's two icons),
     measured missing on a touch screen at 1366 (DESIGN_A, 22 Oct 21:45: Files' Places and Settings' pages 23 px tall,
     the month's day numbers 19 x 18) */
  .frame .field input { align-self: stretch; }
  .frame .os-bar :is(.os-quick, .os-bell) { display: inline-grid; place-items: center; min-width: 44px; min-height: 48px; margin: -13px -4px; }
  /* SQ-H18: the touch box starts above the bar's text, at the screen's top edge, so the dot at its corner showed half; it sits on the bell's own corner */
  .frame .os-bar .os-bell-dot { top: var(--sp-3); right: calc(var(--sp-3) - var(--sp-1)); }
  .frame .row:has(.toggle):not(:has(.row-link)) { position: relative; }
  .frame .row:has(.toggle):not(:has(.row-link)) .toggle { position: static; }
  .frame .row:has(.toggle):not(:has(.row-link)) .toggle i { position: relative; display: block; }
  .frame .row:has(.toggle):not(:has(.row-link)) .toggle::before { inset: 0; z-index: var(--z-part); }
  .win-calendar .cal-e { position: relative; z-index: var(--z-part); display: flex; align-items: center; min-height: 44px; }
  /* a day whose entries fill its cell (today, three entries) leaves its number only its own size: 44 x 44 of its own */
  .win-calendar .cal-day .cal-num { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  /* today's accent stays the small mark it was, drawn inside that box, not a 44 px disc (IDEAS 01:57) */
  .frame .win-calendar .cal-day.is-today .cal-num { background: radial-gradient(circle closest-side, var(--c-accent) 0 calc(.8em + 2px), transparent calc(.8em + 3px)); border-radius: 0; }
  .frame .row { min-height: 44px; }
  .frame .row:has(> .row-main > .row-link) { position: relative; }
  .frame .row > .row-main > .row-link::after { content: ""; position: absolute; inset: 0; }
  .frame .row:has(> .row-main > .row-link) > .row-trail, .frame .row > .row-main a:not(.row-link) { position: relative; z-index: var(--z-part); }
  .frame .set .note > a.link { display: inline-flex; align-items: center; min-height: 44px; }
  /* and what only a wide window shows (a phone lays these out otherwise): choosers and date boxes, the narrow buttons
     (Go, All), the switcher's and Relationships' rows, the sort links and column edges, Start's letters, the tongues,
     and Relationships' table (its names, sort links and ticks) */
  .frame :is(.ctl, .ctl-sel select) { min-height: 48px; }
  .frame .btn { min-width: var(--hit); }
  .frame :is(a.sw-row, .crm-v) { min-height: 44px; align-items: center; }
  .frame :is(a.files-sort, span.files-sort-off, a.start-l, .crm-t th a, .crm-t a.crm-name) { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
  .frame :is(a.start-l, a.files-sort) { min-width: 44px; }
  /* Tasks' side list (Today, Coming up, the lists) and a tick's words, measured short at the first run (31 and 23 px) */
  .frame .tasks-side a.row-link { display: flex; align-items: center; min-height: 44px; }
  /* Files' Connectors heading in Places (from main 209839ef: 40 px) */
  .frame summary.files-conn-h { min-height: 44px; }
  .frame .chk { min-height: 44px; }
  .frame .col-sep { width: 24px; right: calc(var(--sp-3) / -2 - 12px); }
  .frame .tongue { min-width: 44px; min-height: 44px; }
  .frame .crm-t .crm-tick .chk { min-width: 44px; min-height: 44px; justify-content: center; }
  /* the tick-all's press area held above the next column's, 46 px; Quick's rows 48 px, so their switches' widened
     areas no longer overlap (both measured at the third run) */
  .frame a.crm-tick-all { position: relative; z-index: var(--z-part); }
  .frame a.crm-tick-all::after { content: ""; position: absolute; inset: -14px; }
  /* its cell keeps the whole press area inside the table's scrolling edge (it was cut off on the left and above) */
  .frame .crm-t th.crm-tickh { padding: var(--sp-4); }
  /* the tick column clear of the views' 24 px splitter on its left, the heading's tick in line with the rows'; only where
     the splitter is drawn, never on a phone, whose table is cards (IDEAS 08:02) */
  @container frame (min-width: 641px) { .frame .crm-t :is(th.crm-tickh, td.crm-tick) { padding-left: var(--sp-6); } }
  .frame .quick-row { min-height: 48px; }
}

/* D1, D2 (DESIGN_LEAD 16:16, DR3 and DR4 Hard; DESIGN_A's 1440 shots on 70671bb7a): on a touch screen the desk's two
   tongues are 44 px (.frame .tongue above), but their panels were still drawn for 26 px ones. Favourites' slide showed
   only its last 26 px, so the word hung 5 px over the top edge; the widgets' tongue, 44 px wide, covered the first
   letter of the first column's names (the cells start 24 px from the edge). Favourites now shows its whole tongue, and
   the icons start 12 px clear of the widgets' tongue. Moved by a margin, not padding: the icon drag reads the grid's own
   box (sos1.js cellAt). Not on a phone, where both panels stand still and the tongues are not drawn */
@media (pointer: coarse) {
  @container frame (min-width: 641px) {
    .favs-slide { transform: translateY(calc(-100% + 44px)); }
    .favs-slide:is(:hover, :focus-within), .favs.is-open .favs-slide { transform: none; }
    .desk-icons { margin-left: var(--sp-6); }   /* cells from 56 px: 12 px clear of the 44 px tongue */
  }
}

/* SOS's own glass icons (priv/icons/glass; Pavel, 20 Oct 2026: "glassy icons"): light is drawn in the files; in the
   dark the frosted front lets more of the colour through and its edge is fainter */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl-top { stop-opacity: .3; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl-bot { stop-opacity: .1; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl-etop { stop-opacity: .6; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl-ebot { stop-opacity: .14; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl-shadow { fill: var(--c-ic-shade); opacity: .5; }
}
:root[data-theme="dark"] .gl-top { stop-opacity: .3; }
:root[data-theme="dark"] .gl-bot { stop-opacity: .1; }
:root[data-theme="dark"] .gl-etop { stop-opacity: .6; }
:root[data-theme="dark"] .gl-ebot { stop-opacity: .14; }
:root[data-theme="dark"] .gl-shadow { fill: var(--c-ic-shade); opacity: .5; }
/* thick glass icons in the dark (UI at BOS, 21 Oct 2026): each themed element of priv/icons/glass carries its light
   value and one of these classes, for the dark one */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-bevdark-bevbot { stop-color: var(--c-ic-shade); stop-opacity: 0.5; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-bevtop { stop-opacity: 0.5; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-fbot { stop-opacity: 0.05; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-ftop { stop-opacity: 0.22; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-inkf { fill: var(--c-ic-ink); }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-inks { stroke: var(--c-ic-ink); }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-rimbot { stop-opacity: 0.2; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-rimtop { stop-opacity: 0.8; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-sdark-sbot { stop-color: var(--c-ic-shade); stop-opacity: 0.5; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-shadowf { fill: var(--c-ic-shade); }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-shadowf-contacto { fill: var(--c-ic-shade); opacity: 0.55; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-shadowf-shadowo { fill: var(--c-ic-shade); opacity: 0.6; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-sheena { stop-opacity: 0.5; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-sheenb { stop-opacity: 0.15; }
  :root:not([data-theme="light"]):not([data-theme="bright"]) .gl3-stop { stop-opacity: 0.3; }
}
:root[data-theme="dark"] .gl3-bevdark-bevbot { stop-color: var(--c-ic-shade); stop-opacity: 0.5; }
:root[data-theme="dark"] .gl3-bevtop { stop-opacity: 0.5; }
:root[data-theme="dark"] .gl3-fbot { stop-opacity: 0.05; }
:root[data-theme="dark"] .gl3-ftop { stop-opacity: 0.22; }
:root[data-theme="dark"] .gl3-inkf { fill: var(--c-ic-ink); }
:root[data-theme="dark"] .gl3-inks { stroke: var(--c-ic-ink); }
:root[data-theme="dark"] .gl3-rimbot { stop-opacity: 0.2; }
:root[data-theme="dark"] .gl3-rimtop { stop-opacity: 0.8; }
:root[data-theme="dark"] .gl3-sdark-sbot { stop-color: var(--c-ic-shade); stop-opacity: 0.5; }
:root[data-theme="dark"] .gl3-shadowf { fill: var(--c-ic-shade); }
:root[data-theme="dark"] .gl3-shadowf-contacto { fill: var(--c-ic-shade); opacity: 0.55; }
:root[data-theme="dark"] .gl3-shadowf-shadowo { fill: var(--c-ic-shade); opacity: 0.6; }
:root[data-theme="dark"] .gl3-sheena { stop-opacity: 0.5; }
:root[data-theme="dark"] .gl3-sheenb { stop-opacity: 0.15; }
:root[data-theme="dark"] .gl3-stop { stop-opacity: 0.3; }

/* ---- Fusion (DEPUTY_UI, AD-098): one window for every kind of file; classes fusion-* only ------------------------ */
.os-desk > .win-fusion { width: min(100%, 920px); }
.win-fusion .win-body { overflow: auto; }
/* a video (Pavel, 22 Oct 18:45): the picture fills its window, not Files' 220 px preview; sos1.js's FusionVideoFit gives
   the front window the video's shape once the video knows its size, and the window shows from then on (at most 1.5 s) */
.win-fusion .fusion-play > video.fusion-media { display: block; width: 100%; height: auto; max-height: none; margin-inline: auto; }
/* on a phone a tall (portrait) video keeps its controls in view: the picture stops at most of the screen's height */
@container frame (max-width: 640px) { .win-fusion .fusion-play > video.fusion-media { max-height: 60vh; } }
.js .os-desk > .win-fusion.is-active:has(video.fusion-media):not([data-fit]) { opacity: 0; }
.win-fusion .fusion-sw { display: inline-flex; }
/* Fusion's Edit words (S1; MASTER 20:52): each paragraph its number above its box, a kept one's words as they are with
   its reason, the one a save refused marked with more than colour (its reason under it); Save and Close at the foot */
.fusion-edit-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-3); }
.fusion-edit-p { display: grid; gap: var(--sp-1); }
.fusion-edit-kept > .num { color: var(--c-ink-3); font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.fusion-edit-p textarea { width: 100%; resize: vertical; }
.fusion-edit-p.is-kept .fusion-edit-kept { margin: 0; color: var(--c-ink-2); }
.fusion-edit-btns { margin-top: var(--sp-3); }
/* Edit words S2: a paragraph of several parts (a link, more than one look) as one group, its number the group's name, a
   box per part under it */
.fusion-edit-parts { margin: 0; padding: 0; border: 0; display: grid; gap: var(--sp-2); }
/* Edit words S4: each table after the paragraphs, its rows as groups of cell boxes */
.fusion-edit-table { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.fusion-edit-table textarea { width: 100%; resize: vertical; }
/* Edit words S3: a list paragraph's number and its acts in one quiet row under its box */
.fusion-edit-list-row { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.fusion-edit-field { margin: var(--sp-1) 0 var(--sp-2); }
.fusion-edit-field > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--c-ink-3); font-size: var(--fs-1); }
.fusion-edit-field .btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fusion-edit-parts > legend { padding: 0; margin-bottom: var(--sp-1); color: var(--c-ink-3); font-size: var(--fs-1); }
/* a Markdown file's View: its label, the shared segmented choice (<.seg_pick>) and Show, in one line (TESTER 15:47) */
.win-fusion .fusion-sw:has(> .fusion-show) { align-items: center; gap: var(--sp-2); }
.win-fusion .fusion-show-l { color: var(--c-ink-2); font-size: var(--fs-1); }
.win-fusion .fusion-sw button[aria-pressed="true"] { background: var(--c-accent-soft); color: var(--c-ink); }
.fusion { padding: var(--sp-4); }
.fusion-doc { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
/* the Outline (or a PDF's Pages) is a side column for every kind that has one (Pavel 23:35, be38); what stays put while
   the text scrolls has a solid background and an edge, never text showing through (the same rule for the Contents menu).
   Solid: the look's raised surface laid over the opaque floor colour, so it is opaque in glass and dark looks too */
.fusion-doc:has(> .fusion-outline) { grid-template-columns: var(--pane-fusion-outline, 200px) minmax(0, 1fr); position: relative; }
.fusion-doc > .split { --split-at: calc(var(--pane-fusion-outline, 200px) + var(--sp-4) / 2); }
.fusion-outline { position: sticky; top: 0; align-self: start; display: grid; gap: var(--sp-1); font-size: var(--fs-1); max-height: 70vh; overflow: auto;
  background: var(--c-face-solid-raised); border-right: var(--line) solid var(--c-line); padding: var(--sp-1) var(--sp-2); }
.fusion-col { min-width: 0; }
/* TX3: Markdown's faces: Both side by side (each column scrolls in its own place), stacked on a narrow window */
.fusion-faces { display: grid; gap: var(--sp-4); min-width: 0; }
.fusion-faces.is-both { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.fusion-faces.is-both .fusion-src { max-height: 70vh; overflow: auto; }
/* TXG8: line numbers in a gutter, never read aloud nor copied; each line a row, so a wrapped line keeps its number */
.fusion-lr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--sp-3); }
.fusion-ln { min-width: 2.5ch; text-align: right; color: var(--c-ink-3); user-select: none; font-variant-numeric: tabular-nums; }
.fusion-lt { white-space: pre-wrap; overflow-wrap: anywhere; }
.fusion-src { margin: 0; padding: var(--sp-3); white-space: pre-wrap; overflow-wrap: anywhere; font: var(--fs-2)/1.55 var(--f-mono); color: var(--c-ink);
  background: var(--c-surface-2); border: var(--line) solid var(--c-line); border-radius: var(--r-m); }
.fusion-toc { display: none; }
.fusion-o { color: var(--c-ink-2); text-decoration: none; border-radius: var(--r-m); }   /* its padding: below (var(--sp-1)) */
.fusion-o:hover, .fusion-o:focus-visible { color: var(--c-ink); background: var(--c-surface-2); }
/* a row-link (DS28, the frame's link list), its colour and its quiet hover its own */
.fusion-o, .frame a.fusion-o { color: var(--c-ink-2); }
.fusion-o { padding: var(--sp-1); border-radius: var(--r-m); }
.fusion-o:hover, .frame a.fusion-o:hover, .fusion-o:focus-visible, .frame a.fusion-o:focus-visible { color: var(--c-ink); background: var(--c-surface-2); text-decoration: none; }
.fusion-o2 { padding-left: var(--sp-3); }
.fusion-o3 { padding-left: calc(var(--sp-3) * 2); }
.fusion-read { max-width: 72ch; font: var(--fs-3)/1.6 var(--f-ui); color: var(--c-ink); overflow-wrap: anywhere; }
.fusion-read.is-mono { max-width: none; font-family: var(--f-mono); font-size: var(--fs-2); white-space: pre-wrap; }
/* T1 (UI's reading look r0; MASTER 23 Oct ~01:33, a bug, not a look): a plain-text file's lines stay as written in the
   reading font too. The parser keeps each line (TXG9), and without this the browser joined them: a list ran together and
   a step sheet's two-line command read as one. Only its paragraphs, so the space between the blocks stays as it is */
.fusion-read.fusion-plain > p { white-space: pre-wrap; }
/* Markdown reading rung 2 (UI's reading look r0, DESIGN_C 01:51): a report's TL;DR, where the file puts it, as the only
   accent-tinted block in a document: accent-soft over the reading surface, a 3 px accent rule at its left, no shadow (a
   card in a document, not on the desk). Full width of the reading column on a phone too. Printed: the rule only */
.fusion-read .fusion-tldr { margin: 0 0 var(--sp-3); padding: var(--sp-3) var(--sp-4); border-left: 3px solid var(--c-accent); border-radius: var(--r-m);
  background: var(--c-accent-soft); }
.fusion-read .fusion-tldr > * { margin: 0 0 var(--sp-2); }
.fusion-read .fusion-tldr > :last-child { margin-bottom: 0; }
/* in Dark the full tint left ink-2 at 4.28:1 over the darkest wallpaper (contrast_test, 85 % is the most that passes):
   the tint comes down there, never the text (DESIGN_C 01:51) */
:root[data-theme="dark"] .fusion-read .fusion-tldr { background: color-mix(in srgb, var(--c-accent-soft) 80%, transparent); }
@media print { .fusion-read .fusion-tldr { background: none; } }
/* Markdown reading rung 2, callouts and bold leads (PAPER_FUSION's r0 rung 2; DESIGN_C 01:51): a callout is a note on
   surface-2 with its kind's icon, never accent-tinted (the TL;DR card stays the only accent block); GitHub's form has a
   title row, the bold form its icon beside the file's own words; a warning's or caution's icon in the warn tone, the
   words in ink. A bold lead (a short label and a colon) gets a little space before it; its words are unchanged */
.fusion-read .fusion-callout { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-1) var(--sp-2); align-items: start;
  padding: var(--sp-3) var(--sp-4); background: var(--c-surface-2); border: var(--line) solid var(--c-line); border-radius: var(--r-m); }
.fusion-read .fusion-callout-t { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-2); margin: 0; font-weight: var(--w-strong); }
.fusion-read .fusion-callout:has(> .fusion-callout-t) > .fusion-callout-b { grid-column: 1 / -1; }
.fusion-read .fusion-callout-b { min-width: 0; }
.fusion-read .fusion-callout-b > * { margin: 0 0 var(--sp-2); }
.fusion-read .fusion-callout-b > :last-child { margin-bottom: 0; }
/* its first line never opens with a lead's space ("> **Warning:** ..." is a lead too; PAPER_FUSION 11:29) */
.fusion-read .fusion-callout-b > :first-child { margin-top: 0; }
.fusion-read .fusion-callout.is-warning .ic, .fusion-read .fusion-callout.is-caution .ic { color: var(--c-warn); }
.fusion-read p.fusion-lead { margin-top: var(--sp-3); }
/* right under a heading the heading's own space is enough (DESIGN_C 11:54; Fusion draws headings as h3 to h6) */
.fusion-read :is(h3, h4, h5, h6) + p.fusion-lead { margin-top: 0; }
.fusion-read li.fusion-lead:not(:first-child) { margin-top: var(--sp-2); }
@media print { .fusion-read .fusion-callout { background: none; } }
.fusion-read > * { margin: 0 0 var(--sp-3); }
.fusion-page { padding: var(--sp-4) var(--sp-5, 32px); background: var(--c-surface); border: var(--line) solid var(--c-line); border-radius: var(--r-m); }
/* Fusion's paper (DESIGN_A's look, part 2; the colours are glass.css's .pg-* blocks): the page of a Word or spreadsheet view is White, Grey or Black by the
   person's own choice, whatever the theme; the toolbar and the panels around it keep the theme. PAPER_FUSION draws the sheet from the same tokens. */
.fusion .pg { background: var(--pg-bg); color: var(--pg-ink); border: var(--line) solid var(--pg-edge); border-radius: var(--r-m); }
.fusion .pg a { color: var(--pg-link); text-decoration: underline; }
.fusion-frame { color: var(--pg-ink-2, var(--c-ink-3)); font-size: var(--fs-1); }
.fusion-frame p { margin: 0 0 var(--sp-1); }
.fusion-frame-head { border-bottom: var(--line) solid var(--pg-edge, var(--c-line)); padding-bottom: var(--sp-2); margin-bottom: var(--sp-3); }
.fusion-frame-foot { border-top: var(--line) solid var(--pg-edge, var(--c-line)); padding-top: var(--sp-2); margin-top: var(--sp-3); }
.fusion-frame-notes { border-top: var(--line) solid var(--pg-edge, var(--c-line)); padding-top: var(--sp-2); margin-top: var(--sp-3); }
.fusion-frame-h { font-size: var(--fs-1); font-weight: 600; margin: 0 0 var(--sp-1); color: inherit; }
.fusion-frame-list { margin: 0; padding-left: var(--sp-4); }
.fusion-h { scroll-margin-top: var(--sp-3); }
/* What changed (wow r0 idea 5): each change in words first (Added, Removed, Changed), its colour second; words taken
   out struck through, words put in underlined, so colour is never the only sign */
.fusion-compare { display: grid; gap: var(--sp-2); }
.fusion-compare-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.fusion-cmp { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); border-left: 4px solid var(--c-line); background: var(--c-surface-2); overflow-wrap: anywhere; }
.fusion-cmp-k { display: block; font-size: var(--fs-1); color: var(--c-ink-2); }
.fusion-cmp-added { border-left-color: var(--c-good); }
.fusion-cmp-removed { border-left-color: var(--c-danger); }
.fusion-cmp-removed > span { text-decoration: line-through; }
.fusion-cmp-changed { border-left-color: var(--c-warn); }
.fusion-cmp del { text-decoration: line-through; text-decoration-color: var(--c-danger); color: var(--c-ink-2); }
.fusion-cmp ins { text-decoration: underline 2px; text-decoration-color: var(--c-good); background: var(--c-accent-soft); }
.fusion-cmp del + ins { margin-inline-start: .3em; }

/* One document from many (wow r0 idea 6): each part a tick box with its words, 44 px to touch */
.fusion-gather-f .fusion-structure .chk { min-height: 44px; overflow-wrap: anywhere; }
.fusion-code { padding: var(--sp-2); border-radius: var(--r-m); background: var(--c-surface-2); font: var(--fs-1)/1.45 var(--f-mono); white-space: pre-wrap; }
/* rung 3: the language word and Copy above a code block; the bar has no height when it holds neither (no script, no language) */
.fusion-code-w .fusion-code { margin-top: 0; }
.fusion-code-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.fusion-code-lang { font: var(--fs-1)/1.45 var(--f-mono); color: var(--c-ink-2); }
.fusion-code-copy { display: none; margin-left: auto; } .js .fusion-code-copy { display: inline-flex; }
@media (max-width: 840px) { .fusion-code-copy { min-height: 44px; min-width: 44px; } }
@media print { .fusion-code-copy { display: none; } }
/* GF-6b: the part an answer leaned on: a rule and a tint (never colour alone); the line above says what it is */
.fusion-cited { border-left: 3px solid var(--c-accent); background: var(--c-accent-soft); padding-left: var(--sp-2); }
/* a cited PDF page: the tint all round the page picture, not a bar at its left only (DESIGN_A's look hold on R-5) */
.fusion-pages > .fusion-cited { padding: var(--sp-2); }
.fusion-cite-note { margin: 0 0 var(--sp-2); }
.fusion-list { padding-left: 1.4em; }
/* a list's own bullets and numbers (core.css takes them off every list in a window; a document's lists keep them, and
   a numbered list's start shows: Markdown reading rung 1); a task item shows its tick instead */
ul.fusion-list { list-style: disc; } ol.fusion-list { list-style: decimal; }
.fusion-list > li:has(> .fusion-tick) { list-style: none; }
/* an item's level as its indent: level 1 (the first nested level) is one step in (it had none since Fusion v0, so a
   nested item sat under its parent's text: found in md-rung1's walk) */
.fusion-l1 { margin-left: 1.4em; } .fusion-l2 { margin-left: 2.8em; } .fusion-l3 { margin-left: 4.2em; } .fusion-l4 { margin-left: 5.6em; }
/* design standard DS36: a document's tick drawn as a box, the check by its icon (was "[x] " text) */
/* a Markdown task's tick: the check box's own look (chk-b, is-on when done; design standard DS19), beside its words */
.fusion-tick { margin-right: var(--sp-1); vertical-align: -0.15em; }
/* Markdown reading rung 3: a table sits in its own box that scrolls both ways, the header row stays in view while its
   rows scroll under it, and every second row is tinted (row lines kept, so never colour alone). Tokens only */
.fusion-table-w { max-height: 70vh; width: fit-content; max-width: 100%; overflow: auto; border: var(--line) solid var(--c-line); border-radius: var(--r-m); }
.fusion-table-w:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* where focus brings the box into view it stops below the sticky Contents bar, as the document's headings do (found in
   md-rung3's walk: at 360 px the bar covered the header row) */
.fusion-table-w { scroll-margin-top: calc(2.75rem + var(--sp-4)); }
/* on a phone the window's body is little more than the box's full height, so a box of 70vh could never be scrolled clear of
   the Contents bar and its header sat under it (walk, 18:59): half the screen, so the page scrolls past it */
@container frame (max-width: 640px) { .fusion-table-w { max-height: 50vh; } }
@media print { .fusion-table-w { max-height: none; overflow: visible; } }
.fusion-table { border-collapse: separate; border-spacing: 0; font-size: var(--fs-2); }
/* the header is opaque: --c-raised alone is translucent, so the row scrolling under it showed through its words (found in
   md-rung3's walk, 18:56); the tint over the floor colour is as the window title's (.win-fusion > .win-title) */
.fusion-table thead th { position: sticky; top: 0; z-index: var(--z-part); background: var(--c-face-solid-raised); }
.fusion-table tbody tr:nth-child(even) td { background: var(--c-surface-2); }
/* separate borders (the sticky header needs them), so each cell draws its right and bottom line only: one line between
   neighbours, none at the box's own edge, which has its border (DESIGN_C 17:57) */
.fusion-table :is(th, td) { padding: var(--sp-1) var(--sp-2); border: 0; border-right: var(--line) solid var(--c-line); border-bottom: var(--line) solid var(--c-line); text-align: left; vertical-align: top; }
.fusion-table :is(th, td):last-child { border-right: 0; }
.fusion-table tbody tr:last-child :is(th, td) { border-bottom: 0; }
.fusion-table .fusion-ta-r { text-align: right; } .fusion-table .fusion-ta-c { text-align: center; }
/* sheets X2: the read-only grid. Its box scrolls both ways (r5 3.9's one sideways scroll); the column letters, row 1
   and the row numbers stay in view (SP20). Tokens only; a cell's own looks come with the file's stylesheet (SPX24) */
.fusion-grid-w { width: fit-content; max-width: 100%; scroll-margin-top: 8rem; scroll-padding: 4rem 0 0 4rem; margin-top: var(--sp-2); max-height: 70vh; overflow: auto; border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface-2); }
.fusion-grid-w:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.fusion-grid { --fusion-grid-row: calc(var(--fs-2) * var(--lh-body) + var(--sp-1) * 2 + var(--line)); border-collapse: separate; border-spacing: 0; font-size: var(--fs-2); line-height: var(--lh-body); color: var(--c-ink); }
.fusion-grid.is-mono { font-family: var(--f-mono); }
.fusion-grid :is(th, td) { padding: var(--sp-1) var(--sp-2); border-right: var(--line) solid var(--c-line); border-bottom: var(--line) solid var(--c-line); text-align: left; vertical-align: top; white-space: pre-wrap; max-width: 40ch; overflow-wrap: anywhere; font-weight: var(--w-text); }
.fusion-grid .is-num { text-align: right; white-space: nowrap; overflow-wrap: normal; }
.fusion-grid thead :is(th, td) { position: sticky; top: 0; z-index: var(--z-part); background: var(--c-raised); }
.fusion-grid thead tr + tr > * { top: var(--fusion-grid-row); }
.fusion-grid-col { color: var(--c-ink-2); text-align: center; }
.fusion-grid .fusion-grid-head { font-weight: var(--w-strong); }
.fusion-grid .fusion-grid-n { position: sticky; left: 0; z-index: var(--z-part); background: var(--c-raised); color: var(--c-ink-2); text-align: right; white-space: nowrap; overflow-wrap: normal; }
.fusion-grid thead .fusion-grid-n, .fusion-grid .fusion-grid-corner { left: 0; z-index: var(--z-part-2); }
.fusion-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); }
.fusion-pager .note { margin: 0; }
/* sheets X3: Go to cell (SPF7), a small GET form beside the pager; the cell it went to marked */
.fusion-go { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.fusion-go .ctl { width: 12em; max-width: 100%; }
.fusion-grid td.is-at { outline: 2px solid var(--c-focus); outline-offset: -2px; }
/* Excel editing in the grid (sos1.js): the selected cell, its column letter and row number (heavier, never colour alone), the
   cell being typed in, and the cells that changed with an edit (a 400 ms tint, none for reduced motion) */
.fusion-grid-w[data-edit] { cursor: cell; }
.fusion-grid td.is-sel, .fusion-grid th.fusion-grid-head.is-sel { outline: 2px solid var(--c-accent); outline-offset: -2px; background: var(--c-chosen, var(--c-surface)); }
.fusion-grid .is-sel-head { background: var(--c-chosen, var(--c-raised)); color: var(--c-ink); font-weight: var(--w-strong); box-shadow: inset 0 -2px 0 var(--c-accent); }
.fusion-grid .fusion-grid-n.is-sel-head { box-shadow: inset -2px 0 0 var(--c-accent); }
.fusion-grid td.is-editing, .fusion-grid th.is-editing { padding: 0; }
.fusion-grid-edit { box-sizing: border-box; min-width: 100%; margin: 0; padding: var(--sp-1) var(--sp-2); border: 0; outline: 2px solid var(--c-accent); outline-offset: -2px; background: var(--c-surface); color: var(--c-ink); font: inherit; }
.fusion-grid td.is-updated { animation: fusion-grid-updated 400ms ease-out; }
@keyframes fusion-grid-updated { from { background: var(--c-accent-soft); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .fusion-grid td.is-updated { animation: none; } }
.fusion-grid-said { min-height: 1.5em; margin: var(--sp-1) 0 0; }
.fusion-sheets { margin-top: var(--sp-2); }
.fusion-img { max-width: 100%; height: auto; }
/* FQ23 Word's character looks in Fusion (classes: SOS allows no inline style); the hues read in both themes */
.fusion-c-red { color: var(--c-doc-red); } .fusion-c-orange { color: var(--c-doc-orange); } .fusion-c-yellow { color: var(--c-doc-yellow); }
.fusion-c-green { color: var(--c-doc-green); } .fusion-c-cyan { color: var(--c-doc-cyan); } .fusion-c-blue { color: var(--c-doc-blue); }
.fusion-c-purple { color: var(--c-doc-purple); } .fusion-c-grey { color: var(--c-ink-2); }
.fusion-sz-s { font-size: 0.85em; } .fusion-sz-l { font-size: 1.25em; } .fusion-sz-xl { font-size: 1.6em; }
[class*="fusion-hl-"] { color: var(--c-doc-hl-ink); border-radius: 2px; }
.fusion-hl-yellow { background: var(--c-doc-hl-yellow); } .fusion-hl-green { background: var(--c-doc-hl-green); } .fusion-hl-cyan { background: var(--c-doc-hl-cyan); }
.fusion-hl-magenta { background: var(--c-doc-hl-magenta); } .fusion-hl-blue { background: var(--c-doc-hl-blue); } .fusion-hl-red { background: var(--c-doc-hl-red); }
.fusion-hl-darkblue { background: var(--c-doc-hl-darkblue); color: var(--c-doc-hl-ink-dark); } .fusion-hl-darkcyan { background: var(--c-doc-hl-darkcyan); color: var(--c-doc-hl-ink-dark); }
.fusion-hl-darkgreen { background: var(--c-doc-hl-darkgreen); color: var(--c-doc-hl-ink-dark); } .fusion-hl-darkmagenta { background: var(--c-doc-hl-darkmagenta); color: var(--c-doc-hl-ink-dark); }
.fusion-hl-darkred { background: var(--c-doc-hl-darkred); color: var(--c-doc-hl-ink-dark); } .fusion-hl-darkyellow { background: var(--c-doc-hl-darkyellow); }
.fusion-hl-darkgray { background: var(--c-doc-hl-darkgray); color: var(--c-doc-hl-ink-dark); } .fusion-hl-lightgray { background: var(--c-doc-hl-lightgray); }
.fusion-hl-black { background: var(--c-doc-hl-black); color: var(--c-doc-hl-ink-dark); }
.fusion-anchor { text-decoration: underline dotted; }
/* FQ25 Fusion's [...]: its menu under the button; the print view (WD15): the page alone, the how line not printed */
.fusion-more { position: relative; }
.fusion-more > summary { list-style: none; cursor: pointer; }
.fusion-more > summary::-webkit-details-marker { display: none; }
.fusion-more-list { position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: var(--z-more); min-width: 200px; }
.fusion-print { max-width: 820px; margin: 0 auto; padding: var(--sp-4); background: var(--c-surface); color: var(--c-ink); min-height: 100vh; }
.fusion-print-h { font-size: var(--fs-4); margin: var(--sp-3) 0; }
@media print {
  .fusion-print-how { display: none; }
  .fusion-print { max-width: none; padding: 0; background: var(--c-page); color: var(--c-print-ink); min-height: 0; }
  .frame:has(.fusion-print) { background: var(--c-page); overflow: visible; }
}
/* FN-075 the picture view: Fit keeps the whole picture in the window; Actual size scrolls */
.fusion-pic { margin: var(--sp-2) 0; }
.fusion-pic-fit img { display: block; max-width: 100%; max-height: 70vh; width: auto; height: auto; }
.fusion-pic-actual { overflow: auto; max-height: 75vh; }
.fusion-pic-actual img { display: block; max-width: none; }
.fusion-break { border: 0; border-top: var(--line) dashed var(--c-line); }
.fusion-pageno { color: var(--c-ink-3); font-size: var(--fs-1); border-top: var(--line) solid var(--c-line); padding-top: var(--sp-1); }
.fusion-pdf { display: block; width: 100%; height: min(70vh, 900px); border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface); }
/* sweep 13 row 3: the browser's viewer is a Tab stop; its ring sits inside its edge so the reading pane never clips it (DESIGN_LEAD 23:48) */
.fusion-pdf:focus-visible { outline-offset: -2px; }
/* BOS's own drawing of a PDF (AD-112, r1 R1 spike): each page a picture, the width of the window, on white as paper */
.fusion-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.fusion-pages img { display: block; width: 100%; height: auto; border: var(--line) solid var(--c-line); border-radius: var(--r-s); box-shadow: var(--sh-card); }
/* its words layer (pdf-reader amendment 1): see-through text over the picture, the same size, for Find, select and copy */
.fusion-sheet { position: relative; }
.fusion-words { position: absolute; inset: 0; width: 100%; height: 100%; }
.fusion-error { color: var(--c-ink); }
.fusion-structure { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); font-size: var(--fs-2); }
.fusion-structure li { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-m); background: var(--c-surface-2); overflow-wrap: anywhere; }
.fusion-structure .num { color: var(--c-ink-3); margin-right: var(--sp-2); }
.fusion-welcome { display: grid; gap: var(--sp-3); max-width: 760px; }
.fusion-fw-b { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin: 0; }
.fusion-fw-col { padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2); }
.fusion-fw-list { margin: 0; padding-left: 1.2em; color: var(--c-ink-2); }
.fusion-fw-win { border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface); padding: var(--sp-2); display: grid; gap: var(--sp-1); }
.fusion-fw-bar { margin: 0; font-size: var(--fs-1); color: var(--c-ink-2); border-bottom: var(--line) solid var(--c-line); padding-bottom: var(--sp-1); }
.fusion-fw-part { margin: 0; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-m); background: var(--c-accent-soft); color: var(--c-ink); }
/* Fusion's PDF view on a phone (AD-118, P16-700, P16-702, P16-703; PAPER_PDF's pdf-phone-1, shots at 402x874 and 390x844):
   the head's line and the "cannot" words full width, the buttons and [...] on one row; a PDF's pages one row of 44 px
   chips that scrolls sideways, not a column above the page; no ring on the reading pane focused on arrival until a key
   is pressed (sos1.js marks it; IDEAS 11:31: an iPad with a keyboard keeps its ring). By the frame, as other windows' rules */
@container frame (max-width: 600px) {
  .win-fusion .fusion-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); }
  .win-fusion .fusion-tools > p { flex-basis: 100%; margin: 0 0 var(--sp-1); }
  .win-fusion .fusion-tools > .fusion-why { font-size: var(--fs-1); }
}
@container frame (max-width: 840px) {
  .fusion-outline[aria-label="Pages"] { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-1); padding-bottom: var(--sp-1); }
  .fusion-outline[aria-label="Pages"] .fusion-o { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--sp-3); white-space: nowrap; }
}
@media (pointer: coarse) { .frame .fusion-read.is-arrived:focus-visible { outline: 0; } }
@container frame (max-width: 839px) {
  /* P16-419 (AD-118): the window scrolls as one, so the tabs and tools go up with the file instead of staying fixed
     above it (with three files at 360 px the file got no room); the title stays; the tabs are one row that scrolls
     sideways; the tools wrap inside the window, nothing past its right edge. Narrow mode (the frame under 840 px, where
     every window fills the desk), not the browser's width; no iOS bounce (PB-20) */
  .win-fusion { overflow-y: auto; overscroll-behavior: none; }
  .win-fusion > .win-title { position: sticky; top: 0; z-index: var(--z-pin); background: var(--c-face-solid); }
  .win-fusion > .win-title h2 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  /* the slim Contents button pins under the title, not over it */
  .win-fusion .fusion-toc.is-away { top: calc(var(--ctl) + var(--sp-2)); }
  .win-fusion > :is(.win-tools, .win-body) { flex: none; }
  .win-fusion > .win-body { overflow: visible; }
  .win-fusion > .win-tools { flex-wrap: wrap; min-width: 0; }
  .fusion-tabs { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; overscroll-behavior-x: none; }
  .fusion-tab { flex: none; display: inline-flex; align-items: center; white-space: nowrap; }
  .fusion-tab .row-link { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; }
  .fusion-tabs > .fusion-sw { flex: none; white-space: nowrap; }
  .fusion-tools { flex: 1 1 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
  .fusion-tools > * { min-width: 0; max-width: 100%; }
  .fusion-tools > .fusion-line { flex: 1 1 100%; overflow-wrap: anywhere; }
  .win-fusion .fusion-sw { flex-wrap: wrap; max-width: 100%; }
  .win-fusion .fusion-find { flex: 1 1 100%; }
  .win-fusion .fusion-find .field { flex: 1 1 8rem; min-width: 0; }
  .fusion-show { display: flex; flex-wrap: wrap; min-width: 0; }
}
@media (max-width: 840px) {
  .fusion-fw-b { grid-template-columns: minmax(0, 1fr); }
  .fusion { padding: var(--sp-2); }
  .fusion-doc:has(> .fusion-outline) { grid-template-columns: minmax(0, 1fr); }
  .fusion-outline { position: static; max-height: none; border-right: 0; border-bottom: var(--line) solid var(--c-line); padding: 0 0 var(--sp-2); }
  /* Contents: shown by FusionContents once the in-flow Outline is scrolled away. A full-width solid bar at the top of the
     reading pane, so the text scrolls under it and never shows beside it; and the document and its headings stop below
     it when focus or the Outline brings them into view, so no line is hidden under it (P16-500: the window's focus on
     the document scrolled the title under the button) */
  .fusion-toc.is-away { display: block; position: sticky; top: 0; z-index: var(--z-part-2); margin: 0 0 var(--sp-2); padding: var(--sp-1) 0;
    background: var(--c-face-solid-raised); border-bottom: var(--line) solid var(--c-line); }
  .fusion-col .fusion-read, .fusion-col .fusion-h { scroll-margin-top: calc(2.75rem + var(--sp-4)); }
  /* the toolbar row shrinks to the window, not to its widest form, and Find wraps under its box: the two lines above it
     wrap at the window's width and Find stays on the screen (P16-501, P16-502: the row was held at its content's 380 px) */
  .win-fusion .win-tools > .fusion-tools { flex: 1 1 100%; min-width: 0; }
  .win-fusion .fusion-tools > .note { overflow-wrap: anywhere; }
  .win-fusion .fusion-find { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); max-width: 100%; }
  .win-fusion .fusion-find .field { flex: 1 1 100%; min-width: 0; }
  .win-fusion .fusion-find .field input { width: 100%; min-width: 0; }
  .fusion-toc > summary { list-style: none; background: var(--c-face-solid-raised); border: var(--line) solid var(--c-line); }
  .fusion-toc > summary::-webkit-details-marker { display: none; }
  .fusion-toc-menu { position: absolute; top: calc(100% + 4px); left: 0; display: grid; gap: var(--sp-1); min-width: 14rem; max-width: min(24rem, 80vw);
    max-height: 50vh; overflow: auto; padding: var(--sp-2); background: var(--c-face-solid-raised); border: var(--line) solid var(--c-line);
    border-radius: var(--r-m); box-shadow: var(--sh-card); font-size: var(--fs-1); }
  .js .fusion-doc > .split { display: none; }
  .fusion-faces.is-both { grid-template-columns: minmax(0, 1fr); }
  .fusion-page { padding: var(--sp-3); }
}
/* P16-503 (AD-118): on a phone the head and tools take only the room they need, so the document starts high on the
   screen (a Word file's first word sat 38-49 % down): the file's line on one line with "...", the reason it cannot be
   changed still whole; the Find box, Match case and Find on one row; Structure, History, Download and [...] on one row */
@container frame (max-width: 640px) {
  .win-fusion > .win-tools { padding-block: var(--sp-1); }
  .win-fusion .fusion-tools { row-gap: var(--sp-1); }
  .win-fusion .fusion-tools > p { margin: 0; }
  .win-fusion .fusion-tools > .fusion-line { font-size: var(--fs-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .win-fusion .fusion-find { flex-wrap: nowrap; column-gap: var(--sp-1); }
  .win-fusion .fusion-find .field { flex: 1 1 0; min-width: 0; }
  .win-fusion .fusion-tools .btn-s { padding-inline: var(--sp-1); }
}
/* P16-503, the rest (OFFICE 12:29): on a phone a Word or Markdown file's Outline is a closed part, the Contents button,
   so its first words come first (with a title and 6 headings the Outline pushed them 65-74 % down). With the script the
   hidden list counts as scrolled away, so the button pins under the title as it does after a scroll (FusionContents);
   without it the button is a plain <details> that opens in place. A PDF's Pages stay one row of chips. */
@container frame (max-width: 640px) {
  .fusion-doc:has(> .fusion-outline[aria-label="Outline"]) > .fusion-outline { display: none; }
  .fusion-doc:has(> .fusion-outline[aria-label="Outline"]) .fusion-toc { display: block; margin: 0 0 var(--sp-1); }
  .fusion-doc:has(> .fusion-outline[aria-label="Outline"]) .fusion-toc.is-away { padding-block: 0; }
  /* a part chosen in Contents lands below both pinned bars, the window's title and Contents (OFFICE 12:52: under them) */
  .win-fusion .fusion-col :is(.fusion-read, .fusion-h) { scroll-margin-top: calc(var(--ctl) + var(--sp-2) + 3.25rem + var(--sp-3)); }
  .win-fusion .fusion { padding-top: var(--sp-1); }
  /* Edit words on a phone: every box and button 44 px, the 16 px text a phone does not zoom into, Save and Close held at
     the window's foot while the paragraphs scroll (as Write's) */
  .win-fusion :is(.fusion-edit-p, .fusion-edit-table) textarea { min-height: 44px; font-size: max(16px, var(--fs-3)); }
  .win-fusion .fusion-edit-btns { position: sticky; bottom: 0; z-index: var(--z-part); padding-block: var(--sp-2);
    background: var(--c-face-solid-raised); border-top: var(--line) solid var(--c-line); }
  .win-fusion .fusion-edit-btns .btn { min-height: var(--hit); }
  /* what is scrolled or tabbed into view stops above the held Save row, never under it (PAPER_WORD's walk 06:50: a
     paragraph's own buttons, reached by Tab or brought into view, were under Save and Close) */
  .win-fusion:has(.fusion-edit-btns), .win-fusion:has(.fusion-edit-btns) .win-body { scroll-padding-bottom: calc(44px + var(--sp-2) * 2 + var(--sp-3)); }
  .win-fusion .fusion-page { padding: var(--sp-2) var(--sp-3); }
  /* a Markdown file's View on a phone: the label, the segmented choice and Show stay one row; the choice keeps its look */
  .win-fusion .fusion-sw:has(> .fusion-show) { flex-wrap: nowrap; align-items: center; column-gap: var(--sp-1); }
  .win-fusion .fusion-show { flex: 0 1 auto; min-width: 0; }
}

/* ---- Medisense (client app, DEPUTY_UI; AD-099) ---- every rule scoped to its window, theme tokens only ------------ */
/* AD-117 "cool and beefy" (medi-look): a bold page head, the day at a glance, visit cards with an initials chip and a
   status pill, stronger primary acts, a big Record and a live level, the claims table, the Day board as columns.
   Tokens only; every colour also carried by words */
.win-medisense .pane-h { font: var(--w-display) var(--fs-6)/1.1 var(--f-display); letter-spacing: -.01em; margin: 0; }
:is(.win-medisense, .win-site_desk) .ms-glance { display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-2) var(--sp-5); }
:is(.win-medisense, .win-site_desk) .ms-glance p { margin: 0; color: var(--c-ink-2); font-size: var(--fs-2); }
:is(.win-medisense, .win-site_desk) .ms-glance b { display: block; font: var(--w-display) var(--fs-6)/1 var(--f-display); color: var(--c-ink); }
/* P16-805 (PAPER_SHEET 11:13, P16-18): the bar on its own row under the counts, full width, its track visible; not on the words' baseline */
:is(.win-medisense, .win-site_desk) .ms-glance progress { flex: 1 0 100%; height: 8px; border: 0; border-radius: var(--r-pill); background: var(--c-line); accent-color: var(--c-accent); }
:is(.win-medisense, .win-site_desk) .ms-glance progress::-webkit-progress-bar { background: var(--c-line); border-radius: var(--r-pill); }
:is(.win-medisense, .win-site_desk) .ms-glance progress::-webkit-progress-value { background: var(--c-accent); border-radius: var(--r-pill); }
:is(.win-medisense, .win-site_desk) .ms-visits { display: grid; gap: var(--sp-2); }
:is(.win-medisense, .win-site_desk) .ms-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border: var(--line) solid var(--c-line); border-radius: var(--r-l); background: var(--c-surface-2);
  color: var(--c-ink); text-decoration: none; }
:is(.win-medisense, .win-site_desk) .ms-card:hover { background: var(--c-raised); text-decoration: none; }
/* P16-17: the focus ring inside the card's edge, so the next (focused) card never sticks out past the others */
:is(.win-medisense, .win-site_desk) .ms-card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -4px; }
:is(.win-medisense, .win-site_desk) .ms-card.is-next { border-color: var(--c-accent); box-shadow: inset 4px 0 0 var(--c-accent); }
/* P16-302: the chip grows with longer initials (three letters with stops), never narrower than round */
:is(.win-medisense, .win-site_desk) .ms-av { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--sp-2); box-sizing: border-box; white-space: nowrap; border-radius: var(--r-pill); background: var(--c-accent-soft);
  color: var(--c-ink); font-weight: var(--w-strong); font-size: var(--fs-2); }
:is(.win-medisense, .win-site_desk) .ms-card-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); min-width: 0; }
:is(.win-medisense, .win-site_desk) .ms-time { font: var(--w-display) var(--fs-5)/1 var(--f-display); }
:is(.win-medisense, .win-site_desk) .ms-client { font-weight: var(--w-strong); }
:is(.win-medisense, .win-site_desk) .ms-where, :is(.win-medisense, .win-site_desk) .ms-for { color: var(--c-ink-2); font-size: var(--fs-2); }
:is(.win-medisense, .win-site_desk) .ms-pill { justify-self: end; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); border: var(--line) solid var(--c-line);
  background: var(--c-surface); font-size: var(--fs-2); white-space: nowrap; }
/* the Urgent tick's label (Pavel's live build in the demo, 22 Oct 2026): red, outlined, on the visit card, the visit page and the office's Visits */
.ms-urgent { display: inline-flex; align-items: center; padding: 0 var(--sp-2); border: 1.5px solid currentColor; border-radius: var(--r-pill); color: var(--c-danger); font-weight: 650; font-size: .8em; letter-spacing: .03em; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
:is(.win-medisense, .win-site_desk) .ms-card.is-done .ms-pill { border-color: var(--c-good); box-shadow: inset 3px 0 0 var(--c-good); }
:is(.win-medisense, .win-site_desk) .ms-card.is-busy .ms-pill { border-color: var(--c-accent); box-shadow: inset 3px 0 0 var(--c-accent); }
:is(.win-medisense, .win-site_desk) .ms-card.is-off { opacity: .7; }
:is(.win-medisense, .win-site_desk) .ms-next-tag { grid-column: 3; justify-self: end; font-size: var(--fs-1); color: var(--c-ink-2); }
.win-medisense .btn-primary { min-height: 48px; padding: 0 var(--sp-5); font-size: var(--fs-3); }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn-primary { min-height: 64px; min-width: 64px; padding: 0 var(--sp-6); border-radius: var(--r-pill); font-size: var(--fs-4); }
:is(.win-medisense, .win-site_desk) .ms-level meter { height: 24px; border-radius: 12px; }
:is(.win-medisense, .win-site_desk) .ms-level meter::-webkit-meter-bar { border-radius: 12px; }
.win-medisense .ms-rec:has(.ms-rec-time.is-on) .ms-level meter { box-shadow: 0 0 0 3px var(--c-accent-soft); animation: ms-alive 1.6s ease-in-out infinite; }
@keyframes ms-alive { 50% { box-shadow: 0 0 0 6px var(--c-accent-soft); } }
@media (prefers-reduced-motion: reduce) { .win-medisense .ms-rec:has(.ms-rec-time.is-on) .ms-level meter { animation: none; } }
@media (prefers-reduced-motion: reduce) { .win-medisense .ms-rec:has(.ms-rec-time.is-on) .ms-level meter { animation: none; } }
.win-medisense .ms-count { font: var(--w-display) var(--fs-4)/1.2 var(--f-display); }
.win-medisense .ms-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.win-medisense .ms-board > li { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: var(--line) solid var(--c-line); border-radius: var(--r-l); background: var(--c-surface-2); }
.win-medisense .ms-board .ms-who { font-weight: var(--w-strong); font-size: var(--fs-3); }
.win-medisense .ms-board .ms-now { font: var(--w-display) var(--fs-4)/1.2 var(--f-display); }
.win-medisense .ms-board .ms-nx { color: var(--c-ink-2); font-size: var(--fs-2); }
/* staff leaving: a practitioner who cannot sign in, and the visits still to come with them */
.win-medisense .ms-board > li[data-off], :is(.win-medisense, .win-site_desk) .ms-pill[data-off] { border-color: var(--c-warn); box-shadow: inset 3px 0 0 var(--c-warn); }
.win-medisense .ms-off-line { margin: 0; padding: var(--sp-3); border: var(--line) solid var(--c-warn); border-radius: var(--r-m); }
/* AD-117 addendum 2 (Pavel 04:16, "cool record button, pause button, reset button"): the recorder's look, by the class hooks
   DEPUTY_UI's recorder carries (ms-rec-go, ms-rec-pause, ms-rec-stop, ms-rec-reset); without them it looks as before */
:is(.win-medisense, .win-site_desk) .ms-rec-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-4); }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-pause { width: 64px; height: 64px; min-width: 64px; padding: 0; border-radius: 50%; font-size: var(--fs-2); }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-reset { min-height: 44px; }
/* while recording: a red dot beside "Recording" breathes, and the level bar glows; paused, both stand still */
:is(.win-medisense, .win-site_desk) .ms-rec-time.is-on b::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: var(--sp-2); border-radius: 50%;
  background: var(--c-danger); vertical-align: middle; animation: ms-dot 1.2s ease-in-out infinite; }
:is(.win-medisense, .win-site_desk) .ms-rec-time.is-on.is-paused b::before { animation: none; opacity: .5; }
@keyframes ms-dot { 50% { opacity: .35; transform: scale(.8); } }
@media (prefers-reduced-motion: reduce) { :is(.win-medisense, .win-site_desk) .ms-rec-time.is-on b::before { animation: none; } }
:is(.win-medisense, .win-site_desk) .ms-rec-ask { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: var(--line) solid var(--c-danger); border-radius: var(--r-m); }
/* MASTER 04:39: the recorder as one centred column: the state and a large timer, then the big round button in the middle
   (Record, or Stop and keep while recording) with the level as a ring around it (--ms-level, 0 to 1, set by DEPUTY_UI's
   VisitRecorder), Pause/Resume to its left and Reset to its right; the order is set here, whatever the markup's order */
:is(.win-medisense, .win-site_desk) .ms-rec { justify-items: center; text-align: center; }
:is(.win-medisense, .win-site_desk) .ms-rec-time { flex-direction: column; align-items: center; gap: var(--sp-1); }
:is(.win-medisense, .win-site_desk) .ms-rec-time .num { font: var(--w-display) var(--fs-7)/1 var(--f-display); letter-spacing: -.02em; }
:is(.win-medisense, .win-site_desk) .ms-rec .ms-level { width: min(100%, 24rem); }
:is(.win-medisense, .win-site_desk) .ms-rec-btns { flex-wrap: nowrap; gap: var(--sp-5); padding: var(--sp-5) 0; }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-pause { order: 1; }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-go, :is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-stop { order: 2; }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-reset { order: 3; width: 64px; height: 64px; min-width: 64px; padding: 0; border-radius: 50%; font-size: var(--fs-2);
  border: var(--line) solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink); }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-pause { border: var(--line) solid var(--c-line); background: var(--c-surface-2); }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-go, :is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-stop { width: 112px; height: 112px; min-width: 112px; padding: 0;
  border-radius: 50%; background: var(--c-danger); border-color: var(--c-danger); color: var(--c-danger-ink); font-size: var(--fs-3); font-weight: var(--w-strong);
  box-shadow: 0 0 0 6px var(--c-surface-2), 0 0 0 calc(8px + var(--ms-level, 0) * 18px) var(--c-danger); transition: box-shadow .12s linear; }
.win-medisense .ms-rec:has(.ms-rec-time.is-on:not(.is-paused)) .ms-rec-btns .btn.ms-rec-stop { animation: ms-pulse 1.4s ease-in-out infinite; }
@keyframes ms-pulse { 50% { transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .win-medisense .ms-rec:has(.ms-rec-time.is-on) .ms-rec-btns .btn.ms-rec-stop { animation: none; }
  :is(.win-medisense, .win-site_desk) .ms-rec-btns .btn:is(.ms-rec-go, .ms-rec-stop) { transition: none; }
}
/* AD-117 add. 3: "Transcribing..." never looks frozen: a bar that sweeps while the work runs; still (half full) under reduced motion */
.win-medisense .ms-busy { display: block; position: relative; overflow: hidden; height: 6px; border-radius: var(--r-pill); background: var(--c-surface-2); }
.win-medisense .ms-busy > i { position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: var(--r-pill); background: var(--c-accent); animation: ms-sweep 1.4s ease-in-out infinite; }
@keyframes ms-sweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .win-medisense .ms-busy > i { animation: none; width: 50%; } }
.win-medisense .ms-elapsed .num { font-weight: var(--w-strong); color: var(--c-ink); }
/* far past the estimate the bar stops sweeping: the plain line under it says why */
.win-medisense .ms-busy:has(~ .ms-live .is-long) > i { animation: none; width: 100%; opacity: .4; }
.win-medisense .ms-standin { width: 100%; text-align: left; }
.win-medisense .ms-standin > summary { cursor: pointer; min-height: 44px; }
/* WRITER2 07:57: the stand-in opener reads as a button (the quiet variant has no edge of its own), and the people ticks
   read as tick boxes, not round one-of-three choices (an 8 px corner on a 19 px box looked round) */
.win-medisense .ms-standin > summary.btn { border: var(--line) solid var(--c-ink-3); }
.win-medisense .ms-consent .chk-b { border-radius: calc(var(--r-s) / 2); }
/* AD-118 (Pavel 05:42, mobile first; WRITER2's P16 reads): the recorder's round buttons keep their size (never stretched or
   squeezed past a 360 px screen), Stop and keep on two lines inside its circle, Reset quieter than Pause with more room
   between (it asks before it discards), the Reset question's two answers both button-shaped and centred under it */
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn:is(.ms-rec-go, .ms-rec-stop, .ms-rec-pause, .ms-rec-reset) { flex: none; }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn:is(.ms-rec-go, .ms-rec-stop) { padding: var(--sp-3); white-space: normal; line-height: 1.15; text-align: center; }
:is(.win-medisense, .win-site_desk) .ms-rec-btns .btn.ms-rec-reset { background: transparent; color: var(--c-ink-2); margin-left: var(--sp-2); }
:is(.win-medisense, .win-site_desk) .ms-rec-ask { justify-items: center; width: min(100%, 24rem); }
:is(.win-medisense, .win-site_desk) .ms-rec-ask p { margin: 0; }
:is(.win-medisense, .win-site_desk) .ms-rec-ask .btns { justify-content: center; margin-top: 0; }
/* VisitDraft's Show the other version, Keep mine and Undo: hidden until the saved line needs them; .btns' flex and .btn's
   inline-flex otherwise beat the hidden attribute, and all three showed under every "Saved" (PAPER_MEDI's walk 23 Oct 01:50) */
.ms-saved-acts[hidden], .ms-saved-acts .btn[hidden] { display: none; }
/* the state line, the timer and the level as one centred column; nothing in it wider than the window */
:is(.win-medisense, .win-site_desk) .ms-rec > * { max-width: 100%; min-width: 0; }
:is(.win-medisense, .win-site_desk) .ms-rec .ms-rec-time { width: 100%; text-align: center; align-items: center; }
/* a visit card says it opens: a chevron at its end; "next" a small chip */
:is(.win-medisense, .win-site_desk) .ms-card { grid-template-columns: auto minmax(0, 1fr) auto auto; }
:is(.win-medisense, .win-site_desk) .ms-card::after { content: ""; grid-column: -2; grid-row: 1; width: 10px; height: 10px; margin-right: var(--sp-1);
  border: solid var(--c-ink-2); border-width: 2px 2px 0 0; transform: rotate(45deg); }
:is(.win-medisense, .win-site_desk) .ms-next-tag { padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--c-accent-soft); color: var(--c-ink);
  font-weight: var(--w-strong); line-height: 1.6; }

/* AD-117 addendum 2: the practitioner side phone-first (390 and 360 wide): cards big to tap, the visit's acts and the
   recorder's buttons within the thumb's reach at the foot of the window */
@container frame (max-width: 640px) {
  .win-medisense .pane-h { font-size: var(--fs-5); }
  :is(.win-medisense, .win-site_desk) .ms-card { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 72px; padding: var(--sp-3); }
  :is(.win-medisense, .win-site_desk) .ms-card::after { grid-row: 1 / span 2; }
  :is(.win-medisense, .win-site_desk) .ms-card .ms-pill { grid-column: 2; justify-self: start; }
  :is(.win-medisense, .win-site_desk) .ms-card .ms-pill { grid-row: 2; }
  :is(.win-medisense, .win-site_desk) .ms-card .ms-next-tag { grid-column: 2; grid-row: 2; justify-self: end; align-self: center; }
  :is(.win-medisense, .win-site_desk) .ms-glance { gap: var(--sp-4); }
  /* button rows sit straight on the window's glass: no band behind them (MASTER 06:23, PAPER_SHEET r1/01, r1/16) */
  .win-medisense .ms > .btns:not(.ms-tabs) { padding: var(--sp-2) 0 0; }
  .win-medisense .ms > .btns:not(.ms-tabs) .btn, .win-medisense form > .btn { min-height: 52px; }
  .win-medisense :is(.ms > .btns:not(.ms-tabs), form > .btns) .btn-primary { width: 100%; justify-content: center; }
  /* AD-118: the visit's other acts (Write it myself, Cancel this visit, Save notes) look like buttons, full width under
     the primary; the way back at the top a 44 px target */
  .win-medisense .ms > form > .btn, .win-medisense .ms > form > .btns > .btn { width: 100%; justify-content: center; min-height: 48px; }
  .win-medisense .ms > form .btn-quiet { border-color: var(--c-line); background: var(--c-surface-2); color: var(--c-ink); }
  /* P16-68: Cancel this visit, last on the page, quiet and red (it removes the visit; Undo on Today) */
  .win-medisense .ms > form.ms-cancel { margin-top: var(--sp-5); }
  .win-medisense .ms > form.ms-cancel .btn-quiet { border-color: var(--c-danger); color: var(--c-danger); background: transparent; }
  /* the photo pickers (DEPUTY_UI, DEPUTY 07:57): Take a photo and Choose a picture full width, one under the other; the file
     box's own "No file chosen" out of sight until a picture is picked (still in the page for a screen reader and the
     keyboard, its focus drawn on the label), then its name shows with Add */
  /* AD-117 add. 5: Take photo and Upload photo side by side, right under Record */
  .win-medisense .ms-photo-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin-top: 0; }
  .win-medisense .ms-photo-form, .win-medisense .ms-photo-form .fpick, .win-medisense .ms-photo-form .fpick-l { width: 100%; }
  .win-medisense .ms-photo-form .fpick-l { justify-content: center; min-height: 48px; }
  .win-medisense .ms-photo-form .fpick-i:invalid { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* WRITER2's round 2 (08:03): Cancel this visit no bigger than its words (P16-307); Change and a photo's Delete look like
     buttons, 44 px (P16-304, P16-310) */
  .win-medisense .ms > form.ms-cancel > .btn { width: auto; justify-self: start; }
  .win-medisense .ms-me .btn-quiet { min-height: 44px; border-color: var(--c-line); background: var(--c-surface-2); color: var(--c-ink); }
  /* P16-904 (WRITER2): a photo's Delete small and quiet (an icon with the word, no fill), still a 44 px target */
  .win-medisense .ms-photo-rm .btn-quiet { min-height: 44px; padding: 0 var(--sp-2); font-size: var(--fs-1); color: var(--c-ink-2); background: transparent; border-color: transparent; }
  /* P16-906: Change on the who-you-are line, with room around it */
  .win-medisense .ms-me { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); }
  /* P16-903: a little more room between the big round buttons and the recorder's photo row */
  .win-medisense .ms-photo-acts.is-rec { margin-top: var(--sp-3); }
  /* PAPER_SHEET's stage check (11:13, P16-802, 805, 807): the recorder a little tighter, so "No microphone? Use a recording"
     shows whole at 402x874 under the floating BOS strip; the day's bar not drawn on a phone (the counts say it, and empty it
     reads as a stray dark bar); "< Start" at the same indent as every other way back */
  :is(.win-medisense, .win-site_desk) .ms-rec { gap: var(--sp-1); }
  :is(.win-medisense, .win-site_desk) .ms-rec-time .num { font-size: var(--fs-6); }
  :is(.win-medisense, .win-site_desk) .ms-rec-btns { padding: var(--sp-3) 0; }
  :is(.win-medisense, .win-site_desk) .ms-glance progress { display: none; }
  /* the way back (a plain <p> holding one quiet button), not "Change" in the who-you-are line (P16-804/906: text is no child) */
  .win-medisense .ms > p:not([class]) > .btn-quiet:only-child { min-height: 44px; padding-left: 0; font-size: var(--fs-2); }
  /* P16-304 on the office side: Change on a Visits card a quiet button with an edge, as Open beside it */
  .win-medisense .ms-vcard .btn-quiet { border-color: var(--c-line); background: var(--c-surface-2); color: var(--c-ink); min-height: 44px; }
  /* P16-33: Claims' Show line on one row: the list and its button side by side, the button its own width */
  .win-medisense .ms > form.ms-show > .btn { width: auto; min-height: 48px; }
  /* P16-21: New visit's foot on a phone, one act a row, each full width and in its own look (DS22-23): Approve visit
     (primary), Save, not approved yet (plain), Back (quiet); no longer one wide button and two words sharing a row */
  .win-medisense form.ms-book > .btns { display: grid; gap: var(--sp-2); }
  .win-medisense form.ms-book > .btns .btn { width: 100%; justify-content: center; }
}
.os-desk > .win-medisense { width: min(100%, 960px); }
.win-medisense .win-body { overflow: auto; }
.win-medisense .ms { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.win-medisense .ms-pilot { margin: 0; color: var(--c-ink-2); }
/* incidents r3 R1: the 000 line, plain and a little stronger than the pilot line */
.win-medisense .ms-000 { margin: 0; color: var(--c-ink); font-weight: var(--w-strong); }
.win-medisense .ms-said { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-accent-soft); color: var(--c-ink); }
.win-medisense .ms-error { color: var(--c-ink); }
.win-medisense .ms-seed { display: grid; gap: var(--sp-2); max-width: 420px; }
.win-medisense .ms-seed .ctl-date { justify-self: start; }  /* the shared date box's own look (design audit row 1: no Medisense copy of it) */
/* P16-1006 (IDEAS round 5): the window's title on one line, cut with an ellipsis, never broken at a hyphen ("made-/up") */
.win-medisense > .win-title h2 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
:is(.win-medisense, .win-site_desk) .ms-visits [aria-current], :is(.win-medisense, .win-site_desk) .ms-visits [autofocus] { outline-offset: -4px; }
.win-medisense .ms-consent { display: grid; gap: var(--sp-3); padding: var(--sp-4); max-width: 640px; }
.win-medisense .ms-consent fieldset:not(.seg-pick) { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; }
:is(.win-medisense, .win-site_desk) .ms-rec { display: grid; gap: var(--sp-2); }
:is(.win-medisense, .win-site_desk) .ms-rec-time { display: flex; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-4); margin: 0; }
:is(.win-medisense, .win-site_desk) .ms-rec-time.is-on b { color: var(--c-danger); }
:is(.win-medisense, .win-site_desk) .ms-level { display: flex; align-items: center; gap: var(--sp-2); }
/* the loudness, said as Level and filled with the accent, so it is never read as an empty progress bar (Pavel 04:05) */
:is(.win-medisense, .win-site_desk) .ms-level meter { flex: 1; width: 100%; height: 14px; border: var(--line) solid var(--c-line); border-radius: 7px; background: var(--c-surface-2); }
:is(.win-medisense, .win-site_desk) .ms-level meter::-webkit-meter-bar { background: var(--c-surface-2); border: 0; border-radius: 7px; }
:is(.win-medisense, .win-site_desk) .ms-level meter::-webkit-meter-optimum-value, :is(.win-medisense, .win-site_desk) .ms-level meter::-webkit-meter-suboptimum-value { background: var(--c-accent); border-radius: 7px; }
:is(.win-medisense, .win-site_desk) .ms-level meter::-moz-meter-bar { background: var(--c-accent); border-radius: 7px; }
.win-medisense .ms-line { color: var(--c-ink); font-weight: var(--w-strong); }
:is(.win-medisense, .win-site_desk) .ms-rec-btns { display: flex; justify-content: space-between; gap: var(--sp-3); }
.win-medisense .ms-draft { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sp-4); align-items: start; }
.win-medisense .ms-sections { display: grid; gap: var(--sp-3); }
:is(.win-medisense, .win-site_desk) .ms-transcript { position: sticky; top: 0; max-height: 70vh; overflow: auto; padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2); }
:is(.win-medisense, .win-site_desk) .ms-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); font-size: var(--fs-2); }
:is(.win-medisense, .win-site_desk) .ms-lines .num { color: var(--c-ink-3); margin-right: var(--sp-2); }
/* AD-117: the visit's photos as a strip of small pictures, and the clinician's own notes (uplift r0) */
.win-medisense .ms-photos, .win-medisense .ms-notes { display: grid; gap: var(--sp-2); }
.win-medisense .ms-photo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.win-medisense .ms-photo { display: grid; gap: var(--sp-1); justify-items: center; }
.win-medisense .ms-photo img { width: 120px; height: 120px; object-fit: cover; border-radius: var(--r-m); border: var(--line) solid var(--c-line); background: var(--c-surface-2); }
.win-medisense .ms-photo-add { flex-wrap: wrap; }
/* AD-117 add. 5 (Pavel): the photo acts in one group with Record, on the visit page and the recorder; on the recorder they
   stand under the round buttons while it is ready, and step aside once it records or is paused (PAPER_MEDI M1, below) */
.win-medisense .ms-photo-acts { display: grid; gap: var(--sp-1); }
/* DT2, DT3 (DEPUTY 15:14): Running late and Not home, two quiet buttons side by side under the visit's acts; the one
   opened takes the row's whole width for its choices */
.win-medisense .ms-travel { display: grid; gap: var(--sp-2); }
.win-medisense .ms-travel-acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); align-items: start; }
.win-medisense .ms-travel-acts:has(.ms-travel-d[open]) .ms-travel-d { grid-column: 1 / -1; }
.win-medisense .ms-travel-d > summary { list-style: none; width: 100%; min-height: 48px; justify-content: center; border-color: var(--c-line); background: var(--c-surface-2); color: var(--c-ink); }
.win-medisense .ms-travel-d > summary::-webkit-details-marker { display: none; }
.win-medisense .ms-travel-form { display: grid; gap: var(--sp-2); padding-top: var(--sp-2); }
.win-medisense .ms-travel-form .btns { margin-top: 0; }
.win-medisense :is(.ms-late-said, .ms-not-home) { margin: 0; }
.win-medisense .ms-told { margin: 0; }
.win-medisense .ms-told-form .btn { min-height: 44px; border-color: var(--c-line); background: var(--c-surface-2); color: var(--c-ink); }
.win-medisense .ms-photo-acts .ms-photo-small { margin: 0; font-size: var(--fs-1); }
.win-medisense .ms-photo-acts .ms-photo-add { margin-top: 0; }
.win-medisense .ms-photo-acts .fpick-i:invalid { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.win-medisense .ms-photo-acts.is-rec { width: min(100%, 24rem); justify-self: center; }
/* PAPER_MEDI's M1 (b): the recorder's own photo acts (is-live, a LiveView upload, no form that leaves the page) look as the
   visit page's: two buttons of equal width side by side, 48 px, under the round buttons, in every state */
.win-medisense .ms-photo-acts.is-live .ms-photo-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.win-medisense .ms-photo-acts.is-live :is(.fpick, .fpick-l) { width: 100%; }
.win-medisense .ms-photo-acts.is-live .fpick-l { justify-content: center; min-height: 48px; }
.win-medisense .ms-photo-acts.is-live .note { margin: 0; }
/* PAPER_MEDI M1: a photo posted from the page leaves it. The recorder's own photo acts (is-live, MedisenseRecordLive) go
   up through its page instead, so they stay in every state (M1 (b)); any other photo acts step aside once it records */
.win-medisense .ms:has(.ms-rec-time.is-on) .ms-photo-acts:not(.is-live) { display: none; }
.win-medisense .ms-photo-form, .win-medisense .ms-photo-undo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
/* file_pick draws the box as a button; Add shows once a picture is picked (no script) */
.win-medisense .ms-photo-form .ms-photo-send { display: none; }
.win-medisense .ms-photo-form:has(.fpick-i:valid) .ms-photo-send { display: inline-flex; }
.win-medisense .ms-notes-text { white-space: pre-wrap; margin: 0; }
.win-medisense .ms-facts { display: flex; flex-wrap: wrap; column-gap: var(--sp-1); }
.win-medisense .ms-note { padding: var(--sp-3); }
.win-medisense .ms-correction { border-left: var(--line) solid var(--c-line); padding-left: var(--sp-3); }
/* Medisense's office pages (AD-103; build-spec-demo-office.md b.5, c.4): the Show row, a table that scrolls inside
   itself, the checks in words, the run's groups, the text to copy for iinsight, the Mark claimed form */
.win-medisense .ms-show { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
/* its Show is the shared form_row: the label stays beside its list, on a phone too (P16-33's one row; IDEAS 02:16 (a)),
   as Write's find row does */
.win-medisense .ms-show > .frow { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.win-medisense .ms-show > .frow .frow-l { padding-top: 0; }
.win-medisense .ms-count { margin-left: auto; font-weight: var(--w-strong); white-space: pre; }
.win-medisense .ms-sum { white-space: pre-wrap; }
.win-medisense .ms-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.win-medisense .ms-mark { display: inline-block; min-width: 3ch; font: var(--w-strong) var(--fs-2)/1.4 var(--f-mono); }
.win-medisense .ms-group { display: grid; gap: var(--sp-2); }
/* Office rights (DEPUTY 00:55): each holder on a row with its Remove; the give form under the list */
.win-medisense .ms-rights { display: grid; gap: var(--sp-2); }
.win-medisense .ms-rights-held { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.win-medisense .ms-rights-held li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.win-medisense .ms-copy { margin: 0; padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2); color: var(--c-ink); font: var(--fs-2)/1.5 var(--f-mono); tab-size: 16; white-space: pre; overflow-x: auto; user-select: all; }
.win-medisense .ms-mark-form { display: grid; gap: var(--sp-2); max-width: 420px; }
.win-medisense .ms-set { display: flex; gap: var(--sp-3); align-items: center; }
.win-medisense .ms-count { margin: 0; color: var(--c-ink-2); font-size: var(--fs-1); }
.win-medisense .ms-dev { display: grid; gap: var(--sp-3); padding-top: var(--sp-3); border-top: var(--line) solid var(--c-line); }
.win-medisense .ms-narrow { display: none; }
/* on a phone the run is not copied: the line says so and Copy is not offered (E1.4, PAPER_MEDI 05:23; PAPER_PDF O2) */
@container frame (max-width: 640px) { .win-medisense .ms-narrow { display: block; } .win-medisense .ms-copy-btn { display: none; } }
@media (max-width: 840px) {
  .win-medisense .ms { padding: var(--sp-2); }
  .win-medisense .ms-draft { grid-template-columns: minmax(0, 1fr); }
  :is(.win-medisense, .win-site_desk) .ms-transcript { position: static; max-height: none; }
  .win-medisense :is(.btn, button, .row, input[type="radio"] + :not(.chk-b), input[type="checkbox"] + :not(.chk-b)) { min-height: 48px; }
  /* WRITER2 U4 (06:46): the tick box keeps its own square; the label around it is the 48 px target */
  :is(.win-medisense, .win-site_desk) .ms-rec-btns .btn { min-width: 48px; flex: 1; }
  /* consent's labels wrap their box, so the whole label is the 48 px target; the recording's file box too
     (DEPUTY_TESTER's 390 px walk of 2f1c944: 22.5 and 30 px) */
  .win-medisense .ms-consent label:not(.seg-o) { display: flex; align-items: center; gap: var(--sp-2); min-height: 48px; }
  .win-medisense input[type="file"] { min-height: 48px; }
  /* the link inside a row is the control (DEPUTY_TESTER, 13:45: 23 px tall); plain links too */
  .win-medisense :is(.row-link, .ms > p > a, .ms-note a) { display: inline-flex; align-items: center; min-height: 48px; }
  /* the office pages (TESTER 02:27: Claims 19 px, the run 47 px): a row's link, the Show select, every button */
  .win-medisense :is(.tbl td a, .ms-group a, .ms-claim-btns a) { display: inline-flex; align-items: center; min-height: 48px; }
  .win-medisense .btn { box-sizing: border-box; min-height: 48px; min-width: 48px; }
}

/* AD-118 (Pavel 05:42: "lacking allignmetn and buttons and fields were a bit off"): the office side on a phone, 402 and 390
   wide (PAPER_MEDI): every field full width under its label, choices that wrap, 48 px buttons, the Visits list as cards */
.win-medisense .ms-vcards { display: none; list-style: none; margin: 0; padding: 0; gap: var(--sp-2); }
.win-medisense .ms-vcard { display: grid; gap: var(--sp-1); padding: var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface-2); }
/* AD-117 add. 4: the whole Visits card or row opens the visit (a stretched link over it); its buttons stay above it */
.win-medisense :is(.ms-vcard, .ms-row-open) { position: relative; }
.win-medisense .ms-open-all { color: inherit; text-decoration: none; }
.win-medisense .ms-open-all::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.win-medisense :is(.ms-vcard, .ms-row-open) :is(.btns, .ms-pill) { position: relative; z-index: var(--z-part); }
.win-medisense .ms-vcard-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.win-medisense .ms-vcard-when { font-weight: var(--w-strong); font-variant-numeric: tabular-nums; }
.win-medisense .ms-vcard .btns { flex-wrap: wrap; }
.win-medisense .ms-visits-table { overflow-x: auto; }
.win-medisense .ms-audio { width: 100%; max-width: 480px; }
/* P16-803 (PAPER_SHEET 11:13): the browser draws its own player light unless told the page is dark; dark in dark mode */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="bright"]) .win-medisense .ms-audio { color-scheme: dark; } }
:root[data-theme="dark"] .win-medisense .ms-audio { color-scheme: dark; }
/* P16-61: the two sides are the start screen's main choice; the demo data below them, smaller */
.win-medisense .ms-side { min-height: 64px; font-size: var(--fs-4); font-weight: var(--w-strong); border-color: var(--c-accent); }
.win-medisense .ms-demo-data-h { margin-top: var(--sp-4); }
@container frame (max-width: 640px) {
  .win-medisense .ms-visits-table { display: none; }
  .win-medisense .ms-vcards { display: grid; }
  .win-medisense .ms-vcard .btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .win-medisense .ms-vcard .btns :is(.btn, form) { width: 100%; }
  .win-medisense .ms-vcard .btns .btn { justify-content: center; }
  /* forms: the label above, the field the whole width; the office's forms are no longer held at 420 px */
  .win-medisense :is(.ms-mark-form, .ms-book, .ms-find) { max-width: none; width: 100%; }
  .win-medisense .frow { grid-template-columns: minmax(0, 1fr); }
  .win-medisense .frow-l { padding-top: 0; }
  .win-medisense .frow-c { justify-items: stretch; }
  .win-medisense .frow-c > :is(.field, .ctl, .ctl-sel, .seg, textarea), .win-medisense .ctl-sel .ctl { width: 100%; box-sizing: border-box; }
  .win-medisense .seg { display: flex; flex-wrap: wrap; }
  .win-medisense .seg .seg-o { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 48px; }
  /* the 840 px rule makes the words after a radio 48 px tall, which set them at the top of their segment */
  .win-medisense .seg-pick .seg-o > span { min-height: 0; }
  /* small buttons keep a readable size on a phone (OFFICE 06:08: 12 px text) */
  .win-medisense .btn-s { font-size: var(--fs-2); }
  /* UI D1: iOS zooms into a field whose text is under 16 px */
  .win-medisense :is(input, select, textarea, .ctl, .field), .win-medisense .ms-show select { font-size: max(16px, var(--fs-3)); }
  /* the Office pages switch, 39 px wide in OFFICE's shot */
  .win-medisense .ms-set .toggle { position: relative; }
  .win-medisense .ms-set .toggle::after { content: ""; position: absolute; inset: -8px; }  /* a 48 px tap area, the switch drawn as before */
  .win-medisense .ms-tabs.is-demo.is-office .t-pract, .win-medisense .ms-tabs.is-demo.is-pract .t-office { display: none; }
  .win-medisense .ms-tabs.is-demo .t-settings { display: none; }
  .win-medisense .ms-demo-data { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .win-medisense .ms-demo-data .btn { width: auto; }
  /* the practitioner's sticky action row (addendum 2) is not for the start screen's choices: it drew a dark band over its words */
  .win-medisense .ms > .btns:is(.ms-start, .ms-demo-data) { position: static; background: none; padding: 0; z-index: auto; }  /* (0,4,0): the sticky rule is (0,4,0) too */
  /* every select, date and time box 48 px tall (the shots: 38 px; the dev day's date 30 px) */
  .win-medisense :is(.ctl, select, input[type="date"], input[type="time"], input[type="search"]) { min-height: 48px; box-sizing: border-box; }
  .win-medisense :is(.ms-book, .ms-find) .btns { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .win-medisense :is(.ms-book, .ms-find) .btns .btn { width: 100%; justify-content: center; }
  /* the start screen: one side per line, the practitioners' names wrap */
  .win-medisense .ms-start, .win-medisense .ms-who .btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .win-medisense :is(.ms-start, .ms-who .btns) :is(.btn, form, form .btn) { width: 100%; justify-content: center; }
  /* settings: a switch and its words wrap, never cut */
  .win-medisense .ms-set { flex-wrap: wrap; }
  .win-medisense .ms-dev .btns, .win-medisense .ms-group .btns { flex-wrap: wrap; }
  .win-medisense .ms-photo-list .ms-photo img { width: 96px; height: 96px; object-fit: cover; }
}

/* ---- Calendar (DEPUTY_UI; Calendar and Tasks r5) ---- every rule under .win-calendar, theme tokens only ---------- */
.os-desk > .win-calendar { width: min(100%, 960px); }
.win-calendar .win-body { overflow: auto; }
.win-calendar .cal-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); position: relative; }
.win-calendar .cal-period { margin: 0; font-size: var(--fs-3); }
.win-calendar .cal-tools > .cal-period { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.win-calendar .cal-when > summary { font-size: var(--fs-2); font-weight: 600; }
/* the source order is the flat desk's (Tab follows the eye); as folds, the period stands between Previous and Next */
.win-calendar .cal-tools > .cal-prev { order: 1; }
.win-calendar .cal-tools > .cal-when { order: 2; }
.win-calendar .cal-tools > .cal-next { order: 3; }
.win-calendar .cal-tools > .cal-view { order: 4; }
.win-calendar .cal-tools > .cal-new { order: 5; }
.win-calendar .cal-tools > :is(.back-fwd, .cal-back) { order: 6; }
.win-calendar .cal-show { display: flex; align-items: center; gap: var(--sp-2); }
/* Humane r0 H2 (DESIGN_LEAD 4 Nov 05:58; IDEAS2 S-1 06:14: both folds show the arrow, so Today is found): one bar. Two folds (details, closed on load, one open at a time): the period holds Today and
   the date box; the view's name holds the four views, the Calendars and Calendar settings. A fold opens as a panel under the bar */
.win-calendar .cal-tools > .cal-new { margin-left: auto; }
.win-calendar .cal-when { flex: 1 1 auto; min-width: 0; }
.win-calendar .cal-fold > summary { display: flex; align-items: center; justify-content: center; min-height: var(--hit); padding: 0 var(--sp-2); border-radius: var(--r-m); cursor: pointer; list-style: none; white-space: nowrap; }
.win-calendar .cal-fold > summary::-webkit-details-marker { display: none; }
.win-calendar .cal-fold > summary:hover, .win-calendar .cal-fold[open] > summary { background: var(--c-chosen, var(--c-surface-2)); }
.win-calendar .cal-fold > summary::after { content: ""; width: .4em; height: .4em; margin: -.2em 0 0 .5em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.win-calendar .cal-fold[open] > summary::after { margin-top: .2em; transform: rotate(225deg); }
.win-calendar .cal-fold-body { position: absolute; left: 0; right: 0; top: calc(100% + var(--sp-1)); z-index: var(--z-lift); display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-3);
  background: var(--c-face-solid-raised); border: var(--line) solid var(--c-line); border-radius: var(--r-m); box-shadow: var(--sh-pop); }
.win-calendar .cal { padding: var(--sp-3); display: grid; gap: var(--sp-3); }
.win-calendar .cal-said { margin: 0; display: flex; align-items: center; gap: var(--sp-2); }
/* ALEX walk r1 item 1 (SEARCH, 4 Nov 2026: Calendar's and Tasks's told-first line ran against the window's left edge): the line has the window's own side
   padding, like the rest of the window; the line, and More with the whole paragraph in place (IDEAS2 and DESIGN_LEAD 16:52) */
.items-notice { display: grid; gap: var(--sp-1); padding: var(--sp-3) var(--pad-win) 0; justify-items: start; }
.items-notice p { margin: 0; }
.items-notice-more[open] { display: grid; gap: var(--sp-2); }
.items-notice-more > summary { width: fit-content; }
.win-calendar .cal-body.has-entry { display: grid; grid-template-columns: minmax(0, 1fr) var(--pane-calendar-side, 300px); gap: var(--sp-3); align-items: start; position: relative; }
.win-calendar .cal-body > .split { --split-at: calc(var(--pane-calendar-side, 300px) + var(--sp-3) / 2); }
/* WC3: a name in the entry opens its card in a third column */
.win-calendar .cal-body.has-entry.has-card { grid-template-columns: minmax(0, 1fr) var(--pane-calendar-side, 300px) minmax(260px, 320px); }
.win-calendar .cal-body.has-card > .split { display: none; }
.win-calendar .cal-month { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-1); }
.win-calendar .cal-month th { color: var(--c-ink-2); font-weight: var(--w-strong); padding: var(--sp-1); }
.win-calendar .cal-day { vertical-align: top; height: 88px; padding: var(--sp-1); border: var(--line) solid var(--c-line); overflow: hidden; }
.win-calendar .cal-day.is-other { color: var(--c-ink-3); background: var(--c-surface-2); }
/* the day the page is on, no panel open: a grey tint only; the blue outline is the open panel's mark (is-selected) alone (DESIGN_A S-1) */
.win-calendar .cal-day.is-on { background: var(--c-surface-2); }
.win-calendar .cal-num { display: inline-block; min-width: 1.6em; font-weight: var(--w-strong); color: var(--c-ink); text-decoration: none; }
.win-calendar .cal-day.is-today .cal-num { background: var(--c-accent); color: var(--c-accent-ink); border-radius: var(--r-pill); text-align: center; }
.win-calendar .cal-e { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-ink); text-decoration: none; padding: 1px var(--sp-1); border-radius: var(--r-m); }
.win-calendar .cal-e:hover, .win-calendar .cal-e:focus-visible { background: var(--c-accent-soft); }
.win-calendar a.cal-more { display: block; padding: 1px var(--sp-1); color: var(--c-ink-2, var(--c-ink)); }
.win-calendar .cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.win-calendar .cal-list .num { color: var(--c-ink-2); margin-right: var(--sp-2); }
.win-calendar .cal-entry { padding: var(--sp-3); display: grid; gap: var(--sp-1); }
.win-calendar .cal-entry-h { display: flex; justify-content: space-between; align-items: start; margin: 0; }
/* Meeting prep on an entry (smart-helpers H2, MP2) */
.win-calendar .cal-prep { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.win-calendar .cal-prep-c { display: grid; gap: var(--sp-1); }
.win-calendar .cal-prep-c p { margin: 0; }
@media (max-width: 840px) {
  .win-calendar .cal-body.has-entry { grid-template-columns: minmax(0, 1fr); }
  .js .win-calendar .cal-body > .split { display: none; }
  .win-calendar .cal-body.has-entry.has-card { grid-template-columns: minmax(0, 1fr); }
  .win-calendar .cal-body .who-card { border-left: 0; border-top: var(--line) solid var(--c-line); }
  .win-calendar .cal-day { height: 64px; }
  .win-calendar .cal-show { margin-left: 0; }
  .win-calendar :is(.btn, .cal-num, .cal-e) { min-height: var(--hit); }
}
/* P16-73 (IDEAS OF-3): on a phone a month entry was cut to "15:..."; it wraps to two lines, the time and the start of
   its title, cut at the end of the second line; two 22 px lines are its 44 px link, so no third line shows under it. Month only (the week's rules are DESIGN_B's) */
@container frame (max-width: 640px) {
  .win-calendar .cal-month .cal-e { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    white-space: normal; overflow-wrap: anywhere; text-overflow: clip; font-size: var(--fs-1); line-height: 22px; padding: 0; }
}
/* C08 at its smallest (r5 C1 B, CAL-M07): the Calendars group, each calendar's colour mark beside its name (never colour
   alone), and a shared meeting in the grid marked with the same colour */
.win-calendar .cal-cals { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3); margin: 0; }
.win-calendar .cal-cals .sub-h { margin: 0; }
.win-calendar .cal-cal { display: inline-flex; align-items: center; gap: var(--sp-1); }
.win-calendar .cal-mark { width: 10px; height: 10px; border-radius: var(--r-pill); flex: none; background: var(--c-accent); }
.win-calendar .cal-mark.is-space { background: var(--c-brand-2); }
.win-calendar .cal-e.is-space { box-shadow: inset 3px 0 0 var(--c-brand-2); }
.win-calendar .cal-week { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--fs-1); }
/* a change that met another meanwhile (FN-118, FN-125): Now and Yours side by side, marked as needing attention */
.win-calendar .cal-clash { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: var(--line) solid var(--c-warn); border-radius: var(--r-m); }
.win-calendar .cal-clash .kv { margin: 0; }
.win-calendar .cal-clash .btns { margin-top: 0; }
.win-calendar .cal-week :is(th, td) { border: var(--line) solid var(--c-line); padding: var(--sp-1); vertical-align: top; overflow: hidden; }
.win-calendar .cal-week thead th.is-today a { font-weight: var(--w-strong); color: var(--c-accent); }
.win-calendar .cal-week tbody th { width: 4.5em; font-weight: normal; }

/* ---- Tasks (DEPUTY_UI; Calendar and Tasks r5 T1-T3) ---- every rule under .win-tasks, theme tokens only ---------- */
/* Tasks' rows (design standard DQ1, Pavel 03:45): the whole row opens the task, its tick stays its own button above;
   the title in ink, the due line in the quiet grey */
.tasks-row { position: relative; }
.tasks-row .row-link { color: var(--c-ink); text-decoration: none; }
.tasks-row .row-link::after { content: ""; position: absolute; inset: 0; }
.tasks-row .tasks-tick { position: relative; z-index: var(--z-part); }
.tasks-row .note { color: var(--c-ink-2); }
/* Tasks' tick (design standard DS19, until the shared <.check> of DSX5): a box drawn with tokens, the check icon when done */
/* the tick is the shared icon button (its full size is the target); the box is drawn inside it, round its check icon */
.tasks-tick .ibtn.tick { position: relative; }
.tasks-tick .tick::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1.15em; height: 1.15em; transform: translate(-50%, -50%);
  border: var(--line-2, 2px) solid var(--c-ink-3); border-radius: 4px; background: var(--c-raised); }
.tasks-tick .tick.is-on::before { background: var(--c-accent); border-color: var(--c-accent); }
.tasks-tick .tick .ic { position: relative; width: .85em; height: .85em; color: var(--c-accent-ink); visibility: hidden; }
.tasks-tick .tick.is-on .ic { visibility: visible; }
/* the window and its three columns: the lists, the tasks, the open task or form (a side pane, DSX10) */
.os-desk > .win-tasks { width: min(100%, 860px); }
.win-tasks .win-body { overflow: auto; }
.win-tasks .tasks { display: grid; grid-template-columns: var(--pane-tasks-lists, 180px) minmax(0, 1fr) auto; gap: var(--sp-3); padding: var(--sp-3); align-items: start; position: relative; }
.win-tasks .tasks > .split-before { --split-at: calc(var(--pane-tasks-lists, 180px) + var(--sp-3) * 1.5); }
.win-tasks .tasks > .split-after { --split-at: calc(var(--pane-tasks-detail, 300px) + var(--sp-3) * 1.5); }
.win-tasks .tasks:has(> :is(.cal-entry, .tasks-pane)) { grid-template-columns: var(--pane-tasks-lists, 180px) minmax(0, 1fr) var(--pane-tasks-detail, 300px); }
.win-tasks .tasks-side { display: grid; gap: var(--sp-1); }
/* the side list: shared row links (DS28; design standard 1.1 B, IDEAS 07:52), the chosen one is-on */
.win-tasks .tasks-side .row-link { padding: var(--sp-1) var(--sp-2); border-radius: var(--r-m); color: var(--c-ink); }
.win-tasks .tasks-side .row-link.is-on { background: var(--c-accent-soft); font-weight: var(--w-strong); }
.win-tasks .tasks-main { display: grid; gap: var(--sp-2); }
.win-tasks .tasks-add { display: flex; gap: var(--sp-2); }
.win-tasks .tasks-add .field { flex: 1; min-width: 0; }
.win-tasks .tasks-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.win-tasks .tasks-row { display: flex; align-items: center; gap: var(--sp-2); }
.win-tasks .tasks-row.is-done a { color: var(--c-ink-3); text-decoration: line-through; }
.win-tasks .tasks-tick { display: inline-flex; }
.win-tasks .cal-entry { padding: var(--sp-3); display: grid; gap: var(--sp-1); min-width: 240px; }
.win-tasks .tasks-pane { min-width: 240px; }
.win-tasks .cal-entry-h { display: flex; justify-content: space-between; margin: 0; }
@media (max-width: 840px) {
  .win-tasks .tasks, .win-tasks .tasks:has(> :is(.cal-entry, .tasks-pane)) { grid-template-columns: minmax(0, 1fr); }
  .js .win-tasks .tasks > .split { display: none; }
  .win-tasks :is(.btn, .ibtn, .tasks-side .row-link) { min-height: var(--hit); }
}
/* SQ-H21: the New list chip and the field it opens are the phone's; a wide window keeps the side list's own field */
.win-tasks :is(.tasks-newlist-chip, .tasks-main > .tasks-newlist) { display: none; }
/* Tasks on a phone (iPhone check P16-608, 610, 611) */
@container frame (max-width: 640px) {
  /* P16-608: the side list is one row of chips at the top that swipes sideways (the views, the lists, New list,
     Tasks settings), so the tasks come right under it, not a screen further down */
  /* more chips than fit fade at the edge that has more, the shared .tabs fade (core.css; SQ-H13: Given to me was cut
     with no sign the row scrolls) */
  .win-tasks .tasks-side { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-1); overflow-x: auto; overscroll-behavior-x: none;
    scroll-snap-type: x proximity; padding-bottom: var(--sp-1);
    -webkit-mask-image: linear-gradient(to right, transparent, var(--c-ink) var(--tabs-fl), var(--c-ink) calc(100% - var(--tabs-fr)), transparent);
    mask-image: linear-gradient(to right, transparent, var(--c-ink) var(--tabs-fl), var(--c-ink) calc(100% - var(--tabs-fr)), transparent); }
  .win-tasks .tasks-side > * { flex: none; scroll-snap-align: start; }
  .win-tasks .tasks-side .row-link { display: inline-flex; align-items: center; white-space: nowrap; border: var(--line) solid var(--c-line); }
  .win-tasks .tasks-side .sub-h { margin: 0 0 0 var(--sp-2); }
  /* SQ-H21: no text field in the sideways row (its button was cut at the edge): a New list chip opens it above the
     tasks, as the Add a task row, the reason under it */
  .win-tasks .tasks-side .side-form { display: none; }
  .win-tasks .tasks-side .tasks-newlist-chip { display: inline-flex; }
  .win-tasks .tasks-main > .tasks-newlist { display: flex; flex-wrap: wrap; align-items: flex-end; }
  /* S-1 (DESIGN_LEAD): the form's row (its "New list" label above the box, the reason under it) takes the whole line;
     Add and Cancel under it */
  .win-tasks .tasks-newlist > .frow { flex-basis: 100%; }
  /* P16-611: an open task or the task form takes the window, as its own page; its Close goes back to the list */
  .win-tasks .tasks:has(> .tasks-pane) > :is(.tasks-side, .tasks-main) { display: none; }
  /* P16-610: the task form's boxes and choosers are 44 px, as the rest of the shell on a phone */
  .win-tasks .tasks-pane :is(.ctl:not(textarea), select, input:not([type=checkbox], [type=radio], [type=hidden])) { min-height: 44px; }
}
@supports (animation-timeline: scroll(x self)) { .win-tasks .tasks-side { animation: tabs-edge linear both; animation-timeline: scroll(x self); } }
/* Up next: each entry opens in the Calendar window */
.list li > a.up-link { display: grid; color: inherit; text-decoration: none; border-radius: var(--r-m); }
.list li > a.up-link:hover b, .list li > a.up-link:focus-visible b { text-decoration: underline; }
/* the shared row link (design audit row 9; MASTER 20:54) with today's hover kept: the title alone is underlined */
.frame a.row-link.up-link:hover { text-decoration: none; }
/* SOS-FINE FN-015: the drag image for several items is a count; FN-050: cut items wait dimmed until the paste */
.drag-count { position: fixed; left: -100px; top: -100px; min-width: 28px; height: 28px; padding: 0 var(--sp-2); border-radius: var(--r-pill); display: grid; place-items: center; background: var(--c-accent); color: var(--c-accent-ink); font-weight: var(--w-strong); }
.files-r.is-cut { opacity: .7; }
/* ItemDrag's words beside the pointer (Files explorer r5 EX26): what a drop there does, or why it cannot */
.drag-say { position: fixed; z-index: var(--z-drag); pointer-events: none; max-width: 360px; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-m);
  background: var(--c-surface); color: var(--c-ink); border: var(--line) solid var(--c-line); box-shadow: var(--sh-pop); font-size: var(--fs-2); line-height: var(--lh-tight); }
.drag-say.is-no { color: var(--c-ink-2); }
/* a window behind brought forward by a held drag (EX23): above the one that was in front until the drag ends */
.os-desk > .win.is-raised { z-index: var(--z-win-front); }
/* the windows step aside so the desktop takes the drop (EX24); they come back when the drag ends */
.os-desk.is-peek > .win { opacity: .12; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.os-desk.is-peek > .desk-cover { pointer-events: none; }
/* a press on an icon behind a window (sos1.js DesktopIcons, first press): the cover lets the pointer by for that one gesture */
.os-desk.is-grab > .desk-cover { pointer-events: none; }
/* the mouse over a desktop tongue, icon or button behind a window (sos1.js DeskReach): the cover lets it by, and the panels open over the windows */
.os-desk.is-reach > .desk-cover { pointer-events: none; }
.os-desk.is-reach > .desk-layer.is-behind > :is(.w-side, .favs) { z-index: var(--z-win-front); }
.desk-icon.is-moving { pointer-events: none; }

/* ---- Models and pipelines (DEPUTY_UI2; Models and pipelines r3 MP1-MP10) ---- one card per step, theme tokens only -- */
.mp-cloud { margin: 0 0 var(--sp-2); }
.mp-cloud.is-bad { color: var(--c-danger); }
.mp-cloud.is-warn { color: var(--c-warn); }
.mp-app { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mp-app-h { margin: 0; font-size: var(--fs-2); }
.mp-step { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface-2); }
.mp-step p { margin: 0; }
.mp-order { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.mp-model { display: grid; grid-template-columns: 1.5em minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; }
.mp-order.is-one .mp-model { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mp-model.is-off .mp-name { color: var(--c-ink-3); }
.mp-model .mp-takes { grid-column: 2 / -1; }
.mp-n { color: var(--c-ink-2); }
@media (max-width: 480px) {
  .mp-model, .mp-order.is-one .mp-model { grid-template-columns: 1.5em minmax(0, 1fr); }
  .mp-model .mp-where, .mp-model .mp-takes { grid-column: 2; }
  .mp-step-h a { display: inline-block; min-height: 44px; line-height: 44px; }
}
/* a column name that sorts (SOS-FINE FN-083) */
.files-sort:hover, .files-sort:focus-visible { text-decoration: underline; }
[aria-sort="ascending"] .files-sort::after { content: " \2191"; }
[aria-sort="descending"] .files-sort::after { content: " \2193"; }
/* touch targets at phone width: every control at least 44 px (SOS-FINE FN-168; WCAG 2.5.5) */
@media (max-width: 600px) {
  .win-btns .ibtn { width: 44px; height: 44px; }
  .btn-s, .menu-i, .dock-i, .bar .ibtn { min-height: 44px; min-width: 44px; }
}
/* the Search box's chosen result (K17) */
.win-search .row.is-picked { background: var(--c-accent-soft); }
/* a skip link: out of sight until the keyboard reaches it (FN-155) */
.skip { position: absolute; left: var(--sp-2); top: var(--sp-2); z-index: var(--z-skip); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-surface); color: var(--c-ink); transform: translateY(-200%); }
.skip:focus-visible { transform: none; }
/* PB-23 (Pavel 22 Oct, 05:20: "Skip to Medisense · Today's content" stood at the top left after a page loaded): a
   focus SOS or a click puts there is not the keyboard's, so only :focus-visible shows it, as the dock's skip link does;
   otherwise it is clipped away, not only moved up, so no window's edge or touch height lets it show */
.skip:not(:focus-visible) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(50%); }   /* no box either (UI 06:25) */
/* each part of the preview at its own height, and the pane scrolls: when its parts are taller than the pane, its auto
   rows shrank to their least, and the first words (overflow: hidden) to their padding, 16 px (MASTER 19:38) */
.files-preview { grid-auto-rows: max-content; }
/* a matched part reads as one in more than colour (SOS-FINE FN-097) */
.frame mark { font-weight: 600; }
/* onboarding r3 O6: the one first-run question on the key page's Ready step (DEPUTY_UI2) */
.first-run { display: grid; gap: var(--sp-2); }
.first-run-q { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.first-run-q .chk > span:last-child { font-weight: var(--w-strong); }  /* the question stays bold, as its <b> was */
/* on the desktop the first-run note is one card on the glass face, centred above the dock and above a standing line, its buttons their own width,
   clear of the BOS button like the standing lines (DESIGN_LEAD M-1, M-2, 3 Nov) */
.first-run-card { position: absolute; z-index: var(--z-menu-scrim); left: 50%; transform: translateX(-50%); bottom: calc(var(--notes-b, 88px) + var(--sp-3)); box-sizing: border-box;
  width: calc(100% - 24px); max-width: 520px; padding: var(--sp-4); border-radius: var(--r-l); background: var(--c-surface); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); border: var(--line) solid var(--edge, var(--c-line)); box-shadow: var(--sh-card, var(--sh-pop)); }
.first-run-card .first-run { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.first-run-card .first-run > :is(p, .first-run-q) { flex: 1 0 100%; margin: 0; }
.os:has(> .os-notes > .key-note:not(.live-down)) .first-run-card { bottom: calc(var(--notes-b, 88px) + var(--note-h-wrap, 68px) + var(--sp-3)); }
/* from 641 px the card keeps clear of the desktop's icon column at the left (about 120 px with its labels) and, mirrored, of the BOS button's column at the right (88 px) (DESIGN_LEAD S-2) */
@container frame (min-width: 641px) { .first-run-card { max-width: min(520px, calc(100% - 2 * 136px)); } } /* desk */
@container frame (max-width: 640px) { .os:has(> .os-notes > .key-note:not(.live-down)) .first-run-card { bottom: calc(var(--notes-b, 88px) + var(--note-h-phone, 96px) + var(--sp-3)); } } /* desk */
/* Word W0 (WG1): text inserted in tracked changes, underlined with a margin mark, theme tokens only (DEPUTY_UI2) */
.fusion-ins { text-decoration: underline; text-decoration-color: var(--c-accent); background: var(--c-accent-soft); }
/* reduced motion: the toast still leaves after its 8 s, at once, never fading (accessibility AG6) */
@media (prefers-reduced-motion: reduce) { .toast { animation-duration: .01s; } }
.look-a.still .toast { animation-duration: .01s; }
/* CutText (NX-002; Pavel 20 Oct 23:00): the whole of a text cut with "…", shown after 1.5 s of hover or focus */
.cut-tip { position: fixed; z-index: var(--z-tip); max-width: min(420px, calc(100vw - 16px)); padding: var(--sp-1) var(--sp-2);
  border: var(--line) solid var(--edge); border-radius: var(--r-s); background: var(--c-surface-2); color: var(--c-ink);
  font-size: var(--fs-2); line-height: 1.4; overflow-wrap: anywhere; pointer-events: none; box-shadow: var(--sh-tip);
  animation: cut-tip-in 120ms ease-out; }
.cut-tip[hidden] { display: none; }
/* a button's name (ButtonLabels; DESIGN_A look spec 4): one line, a key hint as a second grey word, in at 80 ms and out at once */
.cut-tip.is-name { max-width: none; white-space: nowrap; background: var(--c-surface); border-color: var(--c-line); font-size: var(--fs-1);
  box-shadow: var(--sh-pop); animation-duration: 80ms; }
.cut-tip .tip-key { margin-left: var(--sp-2); color: var(--c-ink-2); }
@keyframes cut-tip-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cut-tip { animation: none; } }
/* the line while the connection to SOS is down (FN-119): above the dock, never covering what is being read */
/* a locked page holding a form (the lock ladder's U0b): an opaque cover over everything, the lock screen's card on it */
.lock-over { position: fixed; inset: 0; z-index: var(--z-lock); display: grid; place-items: center; padding: var(--sp-4); background: var(--c-floor); }
.lock-over-card { display: grid; justify-items: center; gap: var(--sp-3); width: min(360px, 100%); padding: var(--sp-5); border-radius: var(--r-l);
  background: var(--c-surface); border: var(--line) solid var(--edge); box-shadow: var(--sh-win); text-align: center; }
.lock-over-card :is(p, form) { margin: 0; }
.lock-over-card .lock-over-form .field { width: 100%; }
.net-down { position: fixed; z-index: var(--z-net); left: 50%; bottom: 104px; transform: translateX(-50%); margin: 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m); background: var(--c-face-solid); color: var(--c-ink); box-shadow: var(--sh-pop); }
/* Opening (MASTER d9eb0163): the one place a page-wide status stands, over the dock, where Reconnecting stands; never both,
   and while either shows the shell's standing lines (the recovery code's, a live part's) step aside so there is one message */
.net-busy { position: fixed; z-index: var(--z-net); left: 50%; bottom: 104px; transform: translateX(-50%); margin: 0; padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m); background: var(--c-face-solid); color: var(--c-ink); box-shadow: var(--sh-pop);
  font-size: var(--fs-2); }
.net-busy:not([data-on]) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); box-shadow: none; background: none; }
.frame:has(.net-down) .net-busy { display: none; }
html[data-opening] { cursor: progress; }
html[data-opening] a[aria-busy="true"] { opacity: .65; }
.frame:is(:has(.net-down), :has(.net-busy[data-on])) .os-notes > .key-note { visibility: hidden; }
.frame:has(.lock-over) .net-down, .frame:has(.lock-over) .net-busy { display: none; }
@media (prefers-reduced-motion: no-preference) { .net-busy[data-on] { animation: net-in 120ms ease-out; } }
@keyframes net-in { from { opacity: 0; } }
/* the question before closing or signing out with words not sent (FN-133, FN-175) */
.unsent-ask { position: fixed; z-index: var(--z-ask); left: 50%; top: 30%; transform: translateX(-50%); max-width: min(420px, calc(100vw - 32px)); padding: var(--sp-4);
  border-radius: var(--r-l, 12px); background: var(--c-face-solid); color: var(--c-ink); box-shadow: var(--sh-pop); }
.unsent-ask p { margin: 0 0 var(--sp-3); }
/* said under BOS's box only when its Enter sends (FN-151): with no script, Send sends and Enter is a new line */
.bos-enter { display: none; }
.js .bos-enter { display: block; }
/* a row of its own under the box: placed in the grid's first column it widened that column and left "Up to 4000
   characters" one word a line (round r1 45-bos-chat at 360, 390 and 402; IDEAS phone-apps-1) */
.bos-compose .bos-enter { grid-column: 1 / -1; }
/* the same for the told-first memory line (Pavel's walk of Chicago 0.9.7, 3 Nov 2026: "Up to 4000 characters" a column of single
   words at the right edge): its <p> had no place, so the grid put it in the first column and its length widened that column */
.bos-compose > #bos-memory-notice { grid-column: 1 / -1; margin: 0; }
/* P16-84 (IDEAS OF-10): a phone has no Shift+Enter, so the line is not said there; its keyboard's Enter key reads
   "send" (enterkeyhint) and Send is drawn beside the box */
@container frame (max-width: 640px) {
  .js .bos-compose .bos-enter { display: none; }
}

/* ---- Files explorer r5 amendment 1 (EX34-EX38): BOS chat's attach, and Files choosing for it ---- */
/* the chooser: 70 % of a Files window's width (EX35: 826 of 1180 px); a person's own Files width is followed by
   sos1.js (70 % of it, never under 320 px) */
.os-desk > .win-choose { width: min(100%, 826px); }
.files-choose { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-accent-soft); }
.files-choose p { margin: 0; }
.files-choose .btns { margin: 0; }
/* the choosing mode's tick (<.check_box>, DS19): as tall as the row, beside the name */
.files-n .chk { min-height: 0; flex: none; gap: 0; margin-right: var(--sp-1); }
/* on a phone, a tick a thumb can hit: its label is the target (design audit row 13); unlayered, as the rule above */
@container frame (max-width: 640px) { .win-files .files-n .chk { min-width: 44px; min-height: 44px; justify-content: center; } }
/* what is attached, above the box: chips with their own × (EX36) */
.bos-compose:has(> .bos-chips) { grid-template-areas: "chips chips chips" "text text text" "attach note send"; }
.bos-chips { grid-area: chips; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.bos-chips-n { flex-basis: 100%; }
.bos-chip, .bos-local { display: inline-flex; align-items: center; gap: var(--sp-1); max-width: 100%; padding: var(--sp-1) var(--sp-1) var(--sp-1) var(--sp-2); border-radius: var(--r-pill);
  background: var(--c-surface-2); border: var(--line) solid var(--edge); font-size: var(--fs-2); }
.bos-chip .ic { width: 20px; height: 20px; flex: none; }
.bos-chip-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a chip that says where its file stands in memory has two lines, the name first and its words under it, the × staying
   at the top right (DESIGN_LEAD 26 Oct 16:07: beside the name the words squeezed it to an ellipsis) */
.bos-chip:has(.bos-chip-mem) { flex-wrap: wrap; border-radius: var(--r-m); }
.bos-chip:has(.bos-chip-mem) .bos-chip-n { flex: 1 1 0; min-width: 0; }
.bos-chip-mem { order: 9; flex-basis: 100%; padding-left: calc(1.25rem + var(--sp-1)); }
.bos-chip .ibtn, .bos-local .ibtn { width: 28px; height: 28px; }
/* From this computer: the computer's own picker, as a button (with the script; without it the picker shows as it is) */
/* the computer's file picker drawn as a button, still used by CRM Import and Fusion's Open a file (BOS chat's attach
   list takes the shared file_pick now) */
/* Fusion's Open a file is the shared <.file_pick> that sends at once (design audit row 6): the browser's "No file chosen"
   beside it says nothing there, so the empty box is kept for readers only, as Medisense's photo picker does */
.fusion-open .fpick-i:invalid { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* "Who is this?" cards (smart-helpers r1 H1, WC3; SOS1Web.WhoCardView): a panel beside the list, non-modal; tokens only */
.who-card { display: grid; align-content: start; gap: var(--sp-3); min-width: 0; overflow: auto; padding: var(--sp-3) var(--sp-4);
  border-left: var(--line) solid var(--c-line); }
.who-card-esc { display: none; }
.who-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.who-card-t { margin: 0; font: var(--w-strong) var(--fs-4)/var(--lh-tight) var(--f-display); color: var(--c-ink); }
.who-card p { margin: 0; }
.who-card-s { display: grid; gap: var(--sp-2); }
/* GF-10 S1: a file's name wraps to two lines in "In your files", the part that tells files apart (PAPER_PDF 05:56) */
.who-card .who-file .row-title { white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; line-clamp: 2; }
/* the Design page (/design, development copy only; r1-gate-check.md section 4): tokens only, as the gate asks */
.design { display: grid; gap: var(--sp-4); overflow: auto; padding: var(--pad-win); }
.design-cover { position: relative; padding: var(--sp-3); border: var(--line) dashed var(--c-line); border-radius: var(--r-m); }
.design-cover-a { position: absolute; inset: 0; }
.design-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--sp-2); }
.design-swatch, .design-icon { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-1); }
.design-chip { width: var(--sp-6); height: var(--sp-6); flex: none; border-radius: var(--r-s); border: var(--line) solid var(--c-line); }
.design-fill-ink { background: var(--c-ink); } .design-fill-ink-2 { background: var(--c-ink-2); } .design-fill-ink-3 { background: var(--c-ink-3); }
.design-fill-line { background: var(--c-line); } .design-fill-surface { background: var(--c-surface); } .design-fill-surface-2 { background: var(--c-surface-2); }
.design-fill-raised { background: var(--c-raised); } .design-fill-selected { background: var(--c-selected); } .design-fill-accent { background: var(--c-accent); }
.design-fill-accent-ink { background: var(--c-accent-ink); } .design-fill-accent-soft { background: var(--c-accent-soft); }
.design-fill-brand { background: var(--c-brand); } .design-fill-brand-2 { background: var(--c-brand-2); } .design-fill-brand-3 { background: var(--c-brand-3); }
.design-fill-vault-ink { background: var(--c-vault-ink); } .design-fill-vault-ink-2 { background: var(--c-vault-ink-2); }
.design-fill-danger { background: var(--c-danger); } .design-fill-danger-ink { background: var(--c-danger-ink); } .design-fill-good { background: var(--c-good); }
.design-fill-warn { background: var(--c-warn); } .design-fill-focus { background: var(--c-focus); } .design-fill-mark { background: var(--c-mark); }
.design-fill-floor { background: var(--c-floor); }
.design-fill-ic-shade { background: var(--c-ic-shade); } .design-fill-ic-ink { background: var(--c-ic-ink); }
.design-split { position: relative; display: flex; gap: var(--sp-6); --split-at: 64px; }
.design-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--sp-2); }
.design .win.design-inner { position: static; width: auto; max-height: none; box-shadow: var(--sh-card); }
.design .graph { width: 100%; max-height: 320px; }

/* ---- Design audit amendment 1 (L1-L3, L8; DS28, DS29): a list row opens its entry or task, the whole row its target;
   the time stays plain grey text; Tasks' tick stays its own button above it ---- */
.win-calendar .cal-row, .win-tasks .tasks-row { position: relative; border-radius: var(--r-s); padding: var(--sp-1) var(--sp-2); }
.win-calendar .cal-row:hover, .win-tasks .tasks-row:hover { background: var(--c-raised); }
.win-calendar .cal-row > .row-link::after, .win-tasks .tasks-row > .row-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.win-tasks .tasks-row .tasks-tick { position: relative; z-index: var(--z-part); }
.preview-pdf { display: block; width: 100%; height: min(45vh, 480px); border: var(--line) solid var(--edge); border-radius: var(--r-s); background: var(--c-surface-2); }
/* Files' Show page 1 as BOS draws it (pdf-reader rung 5): a picture, its own shape (the drawing paints its own paper) */
img.preview-pdf { height: auto; max-height: min(45vh, 480px); object-fit: contain; }
/* a file's first words in the preview (r5 amendment 2, EX40, EX44): text, never a drawing of the page */
.preview-words { display: grid; gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-s); background: var(--c-surface-2);
  font-size: var(--fs-2); max-height: min(40vh, 400px); overflow: auto; }
.preview-words p { margin: 0; overflow-wrap: anywhere; }
/* Bin suggestions (AD-105; smart helpers r1 H17): the Bin's offer, and the files not opened for a year by folder */
.files-sug-hint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.files-sug { display: grid; gap: var(--sp-3); }
.files-sug-g { display: grid; gap: var(--sp-1); }
.files-sug-gh { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.files-sug-l { display: grid; gap: var(--sp-1); }
.files-sug-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: var(--sp-3); min-height: var(--row);
  padding: 0 var(--sp-2); border-radius: var(--r-s); }
.files-sug-r:hover { background: var(--c-raised); }
@container frame (max-width: 640px) {
  .files-sug-r { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; padding: var(--sp-1) var(--sp-2); }
}
/* smart fields' line after Save (frozen r3 4.3, without script): quiet, the page's own colours */
.sf-line { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2); }
.sf-line .btns { margin: 0; }
.sf-act { display: inline; }

/* BOS's floating button (AD-106 #6; bos-float r1 BF1-BF5, BF15, BF21): 48 px, round, the BOS mark in its accent ring;
   above everything but the lock screen (9700): the windows, menus, panels, questions and dialogs (Pavel 2 Nov 2026: "its
   100% above all"; erratum 2 of BF3, 9650, over the unsent-text ask and the feedback picker, 9600); the person moves it when
   it is in the way. It starts 24 px above
   the dock at the right. Its landmark takes no place in the shell's grid. sos1.js's BosFloat moves it (left and top)
   and keeps its place; with no script it stays here. Never while a Medisense recorder is on the page (BF5) */
.bos-float-l { position: absolute; width: 0; height: 0; overflow: visible; }
.frame a.bos-float { position: fixed; z-index: var(--z-float); right: var(--sp-5); bottom: calc(var(--sp-4) + var(--ctl) * 1.3 * var(--dock-k, 1) + var(--sp-2) + var(--sp-5));
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-pill); background: none; border: 0;
  box-shadow: none; touch-action: none; user-select: none; }
/* the Ruby hexagon ring alone, floating, with no circle round it (Pavel 03:49: "the rubi icon as is without circles,
   just floating hex ring with a hole"); its picture keeps room round the ring for the glow */
.frame a.bos-float .tube { width: 56px; height: 56px; }
.frame a.bos-float:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* the BOS helper in the dock (AD-108 addendum 5): its ring the size of the other dock icons, the glow margin outside the
   slot, so the dock keeps its height */
.dock-i .tube { width: calc(2.25em * var(--dock-k, 1)); height: calc(2.25em * var(--dock-k, 1)); margin: calc(-0.375em * var(--dock-k, 1)); }
.frame a.bos-float:hover { background: none; filter: brightness(1.12); }
.frame a.bos-float.is-dragging { cursor: grabbing; }
/* a press is its own: no iPhone link preview before the 1.5 s hold, no page scroll or text choice under a drag
   (PAPER_MAP A1, PAPER_WORD 18:49) */
.frame a.bos-float { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* BFT8, narrowed for AD-118 (Pavel via MASTER 06:23: on Medisense pages too unless it blocks Record): on the recorder it
   shows while it is ready, and goes while a recording runs or is paused, when a tap on it would leave a live recording */
.frame:has(.ms-rec-time.is-on) .bos-float-l { display: none; }
/* TESTER 15:47 (1280x800): on a computer too the Inbox is a full-height panel at the right, so its foot, Close and Clear
   all, sat under the button's corner and could not be clicked; the button steps aside while the Inbox is open, at any
   width (a phone does the same for every sheet, below); and while BOS's own window is in front, where it only opened
   what is already open and, at 1280x800, overlapped the corner of BOS chat's Send by 14 x 27 px (IDEAS 16:40) */
.os:has(.notes-centre) > .bos-float-l { display: none; }
/* Pavel via MASTER, 3 Nov 2026: "when BOS chat opens, the floating BOS hex must stay on screen". It no longer steps aside
   for BOS's own window (the 14 x 27 px over Send, IDEAS 16:40, is cleared by the rules below, not by hiding it).
   On a computer a full-size window ends 50 px from the screen's edge and the button starts 80 px from it, so Send, 26 px
   inside the window, ended 4 px under the button's corner (measured 1280 x 800): the message box keeps 12 px more
   to the right while the button shows; a phone's desk margin below keeps the window clear of it instead */
@container frame (min-width: 641px) {
  .os:has(> .bos-float-l) .win-bos .bos-compose { margin-right: var(--sp-3); }
  /* a maximised window fills the desk edge to edge, 26 px nearer the screen's edge: the message box, its note and Send
     keep 28 px more (DESIGN_A 3 Nov 2026), so they end 8 px or more left of the button as in the unmaximised window */
  .os:has(> .bos-float-l) .win-bos:has(> .win-max:checked) .bos-compose { margin-right: calc(var(--sp-6) + var(--sp-2)); }
}
/* AD-118 (Pavel 22 Oct ~05:42: "i havent seen floating BOS on the mobile"): on a phone the button keeps clear of the
   home bar (the phone dock takes the same safe area, pb-phone-dock), and the shell's lines, full width there and above it
   (z 38 over 34; UI's read, 05:57), end left of its column while it shows, so the two never meet however many lines
   there are (where the button is hidden, while a visit records or BOS's own window is in front, they keep the whole width) */
@container frame (max-width: 640px) {
  .frame a.bos-float { bottom: calc(var(--sp-4) + var(--ctl) * 1.3 * var(--dock-k, 1) + var(--sp-2) + var(--sp-5) + env(safe-area-inset-bottom, 0px)); }
  .os:not(:has(.ms-rec-time.is-on)):has(> .bos-float-l) > .os-notes { left: 12px; transform: none; width: calc(100% - 12px - var(--sp-5) - 56px - var(--sp-2)); }
  /* P16-65, P16-300, 303, 309, 310 (WRITER2 06:16, 08:03: the ring sat on Start empty, a card, the player, a note), and
     P16-1001 (IDEAS 14:18: on the desk it sat on the Models card's numbers): the desk itself ends above the button's
     strip, 80 px (the 56 px ring and a gap), so neither a window nor the desk's own cards, which scroll inside it, ever
     pass under it. A margin, not padding: padding is inside the desk's scroll, where the cards still went under the
     button; the key line's and the lost link's own room (padding) adds to it */
  :where(.os:not(:has(.ms-rec-time.is-on)):not(:has(.notes-centre, .start.card, .quick.card, .switcher:not([hidden]))):has(> .bos-float-l)) > .os-desk:has(> .win.is-active) { margin-bottom: calc(var(--sp-6) * 2 + var(--sp-4)); }
  /* Pavel 3 Nov 2026, his iPhone (DR34): on the home cards that margin was an empty band above the tab bar, with the last
     card cut at its top edge. The home screen takes the strip as room at the END of its own scroll instead: scrolled to
     the end, the last card shows whole and clear of the button; the desk reaches the tab bar */
  :where(.os:not(:has(.ms-rec-time.is-on)):not(:has(.notes-centre, .start.card, .quick.card, .switcher:not([hidden]))):has(> .bos-float-l)) > .os-desk:not(:has(> .win.is-active)) { padding-bottom: calc(var(--sp-3) + var(--sp-6) * 2 + var(--sp-3)); }
  /* IDEAS 06:19: over BOS's own window it covered the chat box's Send corner, and BOS is already in front there;
     P16-1000 (IDEAS 14:18): over a sheet (the Inbox, Start, Quick settings, Switch windows) it sat on the Inbox's
     Clear all, so it steps aside while one is open, as the sheet fills the phone */
  .os:has(.notes-centre, .start.card, .quick.card, .switcher:not([hidden])) > .bos-float-l { display: none; }
  /* DESIGN_A 3 Nov 2026 (DR5): the Model list opened 15 px under the button's top edge at 390 x 844 (506 px high); it ends 8 px
     above it while the button shows (210 px: the menu's top under the title and the chips) */
  .os:has(> .bos-float-l) .bos-model-menu { max-height: min(60vh, 520px, var(--model-menu-h, 100vh), calc(100vh - 210px - var(--bf-top))); }
  /* where the button steps aside the toast keeps its own place (DESIGN_A S-1) */
  .os.os.os.os:has(.start.card, .quick.card, .switcher:not([hidden])) { --toast-b: initial; }   /* repeated .os: outweighs the rule above */
}
/* erratum 2 E3 (DESIGN_A 2 Nov 2026): the button is the top layer, so the toast (Undo), the upload panel and the notice
   sit clear above its own corner: --bf-top is the button's top edge there plus a gap, the same sum as its `bottom` above
   and 56 px. Where the person drags it onto one, they can drag it off again */
.os { --bf-top: calc(var(--sp-4) + var(--ctl) * 1.3 * var(--dock-k, 1) + var(--sp-2) + var(--sp-5) + 56px + var(--sp-2)); }
@container frame (max-width: 640px) { .os { --bf-top: calc(var(--sp-4) + var(--ctl) * 1.3 * var(--dock-k, 1) + var(--sp-2) + var(--sp-5) + env(safe-area-inset-bottom, 0px) + 56px + var(--sp-2)); } } /* desk */
.os:has(> .bos-float-l):not(:has(.notes-centre)) { --toast-b: var(--bf-top); }   /* ONE variable for the toast's bottom: the recovery-line rules (aa8fd3d6) add to it */
.os:has(> .bos-float-l) .drop-live { bottom: var(--bf-top); }
@media (forced-colors: active) { .frame a.bos-float { outline: 2px solid ButtonText; } }
/* lit while the front window's own BOS helpers are on (AD-107 #5): the accent fills its ring and glows; a shape, not colour
   alone: the ring is thicker */
.frame a.bos-float.is-lit { background: none; box-shadow: none; }  /* Ruby's own lit drawing glows: no circle when lit either */
/* the shared button's label stays for screen readers; the mark is what shows */
.frame a.bos-float > span:not(.tube) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.frame a.bos-float.btn { padding: 0; min-height: 0; gap: 0; }
/* the Design page's two samples of it (off, lit), held in place: the real one floats over the screen */
.frame .design a.bos-float { position: relative; inset: auto; z-index: auto; }
.design-bos-lit { gap: var(--sp-5); }
.design-bos-lit-c { display: inline-grid; justify-items: center; gap: var(--sp-2); }
/* tap BOS to fill this screen (ladder TF3; bos-float BF22-BF26): the form's door, the mark on a filled field, the line
   under the form, and BOS's window looking at a form */
.bos-door { margin: 0 0 var(--sp-2); }
.bos-looking { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m);
  background: var(--c-accent-soft); }
.bos-looking p { margin: 0; }
.bos-looking-h { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.bos-looking-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.bos-looking-form input[name="bos_words"] { flex: 1 1 16em; min-height: 48px; }
/* "Filled by BOS" beside a field BOS filled (tap to fill): a small pill in words. Its own class: it was .bos-mark, the
   hexagon logo's, and its small font shrank every hexagon (the dock's) to a dot (MASTER 19:55) */
.bos-filled { display: inline-flex; align-items: center; margin-left: var(--sp-1); padding: 0 var(--sp-1); border-radius: var(--r-pill);
  font-size: var(--fs-1); color: var(--c-accent); background: var(--c-accent-soft); }
/* the product's logo (AD-108 addendum): BOS's hexagon with the words Semurg BOS beside it, in the text colour; its
   hexagon and the top bar's at the size of the words */
.brand-product { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--w-display) var(--fs-5)/1.2 var(--f-display); color: var(--c-ink); }
.brand-product .bos-mark { width: 1em; height: 1.15em; }
.os-bar-mark .bos-mark { width: 1.1em; height: 1.2em; }
.bos-fill-line { margin: var(--sp-2) 0; padding: var(--sp-2); border: var(--line) solid var(--c-line); border-radius: var(--r-m); }
.bos-fill-line p { margin: 0 0 var(--sp-1); }
/* the "continue?" card before Claude is chosen (Pavel 1 Nov): in the page above the chat, its words in full, two buttons */
.bos-confirm { margin: var(--sp-2); padding: var(--sp-3); border: var(--line) solid var(--c-accent); border-radius: var(--r-m); background: var(--c-surface); overflow-wrap: anywhere; }
.bos-confirm-h { margin: 0 0 var(--sp-2); font-size: var(--fs-3); }
.bos-confirm-p { margin: 0 0 var(--sp-2); max-width: 70ch; }
.bos-confirm-form { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
/* a desktop icon dragged with Ctrl held copies: the plus pointer says so (SOS-FINE FN-019) */
.desk-icons.is-copy, .desk-icons.is-copy * { cursor: copy; }
/* a dimmed menu item's reason, beside its name (SOS-FINE FN-055, FN-063) */
.menu-i .menu-why { margin-left: auto; padding-left: var(--sp-3); font-size: var(--fs-1); }
/* the Semurg tube (AD-108 addendum 3; SOS1Web.Brand.tube/1): WEB's two pictures, one over the other; the lit one comes
   on with a 0.7 s neon flicker and goes out with a 0.25 s fade, opacity only, and at once when the person asks for less
   motion. Each picture holds its own room around the hexagon, so the tube is drawn a little larger than the old mark */
.tube { display: inline-grid; flex: none; width: 1.6em; height: 1.6em; vertical-align: middle; }
.tube > img { grid-area: 1 / 1; width: 100%; height: 100%; display: block; }
.tube-on { opacity: 0; transition: opacity .25s ease-out; }
:is(.tube.is-lit, .bos-float.is-lit .tube) .tube-on { opacity: 1; }
/* the flicker only at the switching on (sos1.js adds flick for it), never when a page opens with it already lit */
.bos-float.is-lit.flick .tube-on { animation: tube-flicker .7s linear; }
@keyframes tube-flicker {
  0% { opacity: 0; } 10% { opacity: .9; } 16% { opacity: .15; } 28% { opacity: 1; } 36% { opacity: .3; }
  48% { opacity: 1; } 56% { opacity: .6; } 70%, 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .tube-on { transition: none; } .bos-float.flick .tube-on { animation: none; } }
.still .tube-on { transition: none; animation: none !important; }
/* Ruby light, the BOS helper's icon (AD-108 addendum 6; WEB's demo): a 0.55 s swell on, a 0.3 s fade off; still for less motion */
.bos-ruby .tube-on { transition: opacity .3s ease; }
.bos-float.is-lit.flick .bos-ruby .tube-on { animation: ruby-on .55s cubic-bezier(.2, .7, .3, 1); }
@keyframes ruby-on { 0% { opacity: 0; transform: scale(.98); } 60% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bos-ruby .tube-on { transition: none; } .bos-float.flick .bos-ruby .tube-on { animation: none; } }
.brand-product .tube { width: 1.5em; height: 1.5em; }
.os-bar-mark .tube { width: 1.5em; height: 1.5em; }
/* Fusion wow panels (Ask, the words in a scan or a recording, Cover): inside the window on a phone (AD-118) */
.fusion-wow { min-width: 0; max-width: 100%; box-sizing: border-box; overflow-wrap: anywhere; }
.fusion-scan-text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.fusion-listen-list { padding-left: 0; list-style: none; }

/* Back and Forward (AD-107 #6; SOS1Web.UI.back_fwd/1): two icon buttons side by side, before a heading or in a toolbar */
.bf { display: inline-flex; align-items: center; gap: var(--sp-1); }
.crm-rec-head > .bf, .cal-settings > .bf { margin-right: var(--sp-2); }

/* PB-11a (Pavel 03:01: everything reachable at 100, 150 and 200 %): in the phone layout on a short screen (1280x720 at
   200 % zoom is 640x360) the window in front is as tall as what it holds and the desk scrolls, so no list or button is
   left below a body too short to show it (Relationships' list, Calendar's agenda) */
@container frame (max-width: 640px) {
  @media (max-height: 520px) {
    .os-desk:has(> .win.is-active) { grid-template-rows: max-content; overflow-y: auto; }
    .os-desk > .win { max-height: none; align-self: start; }
    .os-desk > .win > .win-body { flex: none; overflow: visible; }
    /* P16-1101 (PAPER_FINE's 200 % pass, 22 Oct 20:09: at 640x400 the bar, a band under it and the dock left the window a
       strip): on a short screen no band above the front window (a phone draws no Favourites tab to keep clear of), and
       the dock slims to its icons, 48 px each, every name still read out (as on a computer, core.css .dock-l), the home
       bar's inset kept */
    .os-desk { padding-top: 0; }
    .os-desk > .win { margin-top: 0; }
    .os-dock { padding-block: var(--sp-1) max(var(--sp-1), env(safe-area-inset-bottom, 0px)); }
    .os-dock .dock-i { padding-top: 0; }
    .os-dock .dock-l { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    /* the 80 px strip kept for the floating BOS (P16-1002) stays: it is Pavel's open question 157 (MASTER, 22 Oct 21:41) */
  }
}

/* PB-11c: the Inbox panel scrolls inside itself, so no notice or button is drawn below it, over the dock; Clear all,
   Done and Close keep to its own foot, always in view */
.notes-centre { overflow-y: auto; overscroll-behavior: none; }
.notes-foot { position: sticky; bottom: calc(-1 * var(--sp-4)); margin: auto calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
  padding: var(--sp-2) var(--sp-4) var(--sp-4); display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; gap: var(--sp-2);
  background: var(--c-face-solid); border-top: var(--line) solid var(--c-line); }
/* P16-72 (IDEAS OF-2): on a phone the Inbox wears a window's title bar, its icon, its name and Close, held at the top
   while its list scrolls; its own heading and the foot's Close give way to it. A computer keeps the side panel as it is */
.notes-title { display: none; }
@container frame (max-width: 640px) {
  .notes-centre > .notes-title { display: flex; flex: none; position: sticky; top: calc(-1 * var(--sp-4)); z-index: var(--z-part-2); margin: calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4)) 0;
    background: var(--c-face-solid); }
  .notes-title .win-btns { display: flex; }
  .notes-title .win-close { width: 44px; height: 44px; }
  .notes-centre .notes-h > h2, .notes-foot > .notes-close { display: none; }
  /* SQ-H18 (DESIGN_LEAD's n-1 from SQ-H16): Done's foot holds only Close, hidden just above, so it showed as an empty strip with its top line */
  .notes-foot:not(:has(> :not(.notes-close))) { display: none; }
}

/* On a phone a sheet covers the desk, so it is all but solid: the desk's widgets do not show through Start, Quick
   settings, Switch windows or the Inbox (P16-211, P16-212, P16-71; WRITER1 08:43). The glass stays on a computer. Outside
   any layer and after the card's own glass (app.css's top, `.look-a .card`, itself outside a layer, which beats every
   layered rule): same specificity, later, so it wins; High contrast's solid surface (`.look-a.contrast`, more specific)
   still wins over it */
@container frame (max-width: 640px) { /* desk */
  .look-a :is(.start, .quick, .switcher, .notes-centre) { --c-surface: rgb(var(--g-rgb) / .97); }
}

/* P16-34, P16-35 (PAPER_SHEET round 3): a box and its button in one row fit the phone's window. The text box's own
   width (20 characters, 233 px at 16 px) set the row's smallest width, so Search's button ran 36 px past its window at
   360 (6 px at 390) and Relationships' Find 11 px at 360; the row and its field may now be narrower than that */
@container frame (max-width: 640px) {
  :is(.search-form, .graph-form, .crm-head) { min-width: 0; max-width: 100%; }
  :is(.search-form, .graph-form, .crm-head) > .field { flex: 1 1 0; min-width: 0; }
  :is(.search-form, .graph-form, .crm-head) > .field input { width: 0; }
  :is(.search-form, .graph-form, .crm-head) > .btn { flex: none; }
  /* Graph on a phone (GRAPHVIZ S1b; the walk's shot showed From and To as stubs): From, To and Show each the window's
     width (the shared touch rule makes them 48 px), one above the next, and the depth choice back (core's phone rule hid every window's .seg) */
  .graph-form { flex-direction: column; align-items: stretch; }
  .graph-form > .field { flex: none; width: 100%; }
  .graph-form > .field input { width: 100%; }
  .graph-form > .btn { flex: none; width: 100%; }
  .win-tools:has(.graph-form) .seg { display: inline-flex; }
  /* ALEX TONIGHT row A (DESIGN_B, 4 Nov): the form shared its row with the choices, so From was half the window and a label beside To
     squeezed it more. The form is now the row's whole width: From on its own line, To and Show side by side; each choice (a word and
     its segments) then takes the line below */
  .win-tools:has(.graph-form) > .graph-form { flex: 1 1 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: var(--sp-2); }
  .graph-form > .field:has(input[name="from"]) { grid-column: 1 / -1; }
  .graph-form > .btn { width: auto; }
  /* the two words are of different widths: one width, so both choices' segments start on one line (DESIGN_LEAD n-1) */
  .graph-lab { min-width: 4.5em; }
}
/* PB-11c on a phone, for good (DEPUTY 10:48, DEPUTY_TESTER's demo walk: the recovery line, narrowed beside the floating
   BOS button, wrapped to about 140 px and covered Medisense's consent Continue): while a standing line shows, the lines
   take a row of the shell's own between the desk and the dock, so the desk ends where they begin, at any wrap and any
   text size; no room is guessed. These out-rank the fixed rooms above (48, 96, --notes-two-phone), which a wide screen
   keeps */
@container frame (max-width: 640px) { /* desk */
  .os:has(> .os-notes > .key-note:not(.live-down)), .os:has(.phx-server-error) {
    grid-template-rows: auto minmax(0, 1fr) auto auto auto; grid-template-areas: "bar" "desk" "notes" "dock" "status"; }
  .frame .os:has(> .os-notes > .key-note:not(.live-down)) > .os-notes, .frame .os:has(.phx-server-error) > .os-notes {
    position: static; grid-area: notes; transform: none; justify-self: start; margin: 0 0 var(--sp-2) var(--sp-3); }
  /* the width stays the lines' own: the whole width, or, beside the floating button, left of its column (float-phone) */
  .frame .os:has(.phx-server-error) > .os-desk,
  .frame .os > .os-desk:has(~ .os-notes > .key-note:not(.live-down)),
  .frame .os:has(.phx-server-error) > .os-desk:has(~ .os-notes > .key-note:not(.live-down)) { padding-bottom: var(--sp-3); }
}

/* Pavel 10:13 on his phone: the dock's More highlighted but its list never showed. PB-11b's narrow room gives the dock
   overflow-x: auto, and a box that scrolls one way clips both, so More's list (drawn above the dock) was cut away
   whole. A phone's dock never scrolls sideways (its seven fit, the rest are in More), so it clips nothing there */
@container frame (max-width: 640px) { /* desk */
  .os-dock { overflow: visible; }
  .dock-more-list { --c-surface: rgb(var(--g-rgb, 255 255 255) / .97); }  /* the list behind it does not read through */
  /* Pavel 11:22 on his phone: "more in the dock still opens the list somewhere behind the paperwork". The window in
     front is raised (z-index 12) but the dock sits at 0, and More's list is drawn inside the dock, so the window covered
     it. While More is open the dock stands above the windows, the floating BOS (34) and the standing lines (38: the
     recovery reminder covered Settings and Bin, IDEAS 11:43), under the panels (40) */
  .os-dock:has(> .dock-more[open]) { position: relative; z-index: var(--z-menu-under); }
}
/* P16-76 (IDEAS OF-6; AD-118): in Tasks on a phone, New list (a small quiet button under its box) read as a label. On a
   phone a side form's button wears the shared button look, its edge and surface, at the 44 px every control has there;
   P16-509 (IDEAS 12:05): "Add with details..." under Add a task, the same */
@container frame (max-width: 640px) {
  :is(.tasks-side .side-form, .tasks-main > .tasks-add + p) > .btn-quiet { border-color: var(--edge); background: var(--c-surface-2); color: var(--c-ink); min-height: 44px; justify-self: start; }
}
/* P16-77 (IDEAS OF-7; AD-118): in Fusion on a phone, How Fusion works and From this computer (small quiet buttons) read
   as plain text beside From BOS Files. On a phone they wear the shared button look, its edge and surface, the same
   (From this computer is now the shared <.file_pick>, a plain button already: design audit row 6) */
@container frame (max-width: 640px) {
  .fusion > .btns > .btn-quiet { border-color: var(--edge); background: var(--c-surface-2); color: var(--c-ink); }
}

/* P16-29 (PAPER_SHEET round 1; MASTER 12:09): a phone's dock is the full-width bottom bar. PB-11b's narrow-room cap
   (max-width: 100% less 16 px, for a zoomed computer) left it 344 px at 360 and 16 px short of the right edge, so its
   seven did not fit: You ended past it. On a phone it spans the screen, its items spread across it, and it never
   bounces sideways */
@container frame (max-width: 640px) { /* desk */
  .os-dock { max-width: none; width: 100%; justify-content: space-around; overscroll-behavior-x: none; }
}
/* PAPER_SHEET 12:14 (MASTER 12:40): on a phone the dock's open More list was drawn in front but see-through, the
   desk's and a window's words reading through it ("report", "approve" behind Files, Calendar, Fusion): it is a menu, so
   .look-a .menu's glass (about 88 %, blurred) beat its own 97 %. On a phone it is solid: the look's own surface colour
   with no see-through and no blur, in every look */
@container frame (max-width: 640px) { /* desk */
  .frame .os-dock .dock-more-list { background: rgb(var(--g-rgb, 255 255 255)); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* P16-603 (AD-118): Calendar's week on a phone, three days at a time: the week scrolls sideways inside its window, a day
   at each snap, and the hour column stays put (its words wrap, so "earlier" is never cut); each day a third of what is
   left beside the hours, so an entry reads "11:00 Planning", not "11:..." */
@container frame (max-width: 640px) {
  .win-calendar .cal-week-wrap { container-type: inline-size; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 5em; overscroll-behavior-x: none; }
  .win-calendar .cal-week { width: calc(5em + 7 * (100cqw - 5em) / 3); }
  .win-calendar .cal-week :is(tbody th, thead td:first-child) { width: 5em; position: sticky; left: 0; z-index: var(--z-part); background: var(--c-surface); overflow-wrap: anywhere; }
  .win-calendar .cal-week thead th { scroll-snap-align: start; }
  /* an entry wraps onto as many lines as it needs, its time and its whole title read (the month clamps to two, P16-73) */
  .win-calendar .cal-week .cal-e { white-space: normal; overflow-wrap: anywhere; }
}

/* AD-118 / PB-20 on a phone (UI's review 06:00), unlayered so it beats each box's own unlayered font: inherit (15 px):
   D1, a text box under 16 px makes iOS Safari zoom the page when tapped, and the zoomed page puts the dock off the
   screen; these five are the boxes that named their own font. Pinch zoom stays: no maximum-scale (WCAG 1.4.4).
   M1, the two notes that sit above the dock follow its real height, the home bar's inset included */
@container frame (max-width: 640px) {
  :is(.crm-note-new textarea, .crm-ask input[type=text], .crm-move select, .crm-save input[type=date],
      .win-medisense .ms-show select) { font-size: 16px; }
  .key-note, .os-notes { bottom: calc(var(--dock-h) + var(--sp-2)); }
  /* P16-71, P16-72 (IDEAS 06:17): the Inbox is the phone's whole sheet, so the desk and its widgets are hidden behind it
     (they showed through its foot, "Whisper ... Ready"), and its foot's Clear all and Close are 44 px to the thumb */
  .os-desk:has(> .notes-centre) > :is(.desk-layer, .win), .os-desk:has(> .notes-centre) > .desk-layer :is(.w-body, .favs-body) { visibility: hidden; }
  /* SAFEB2 F1 (12:58): the desk scrolls itself on a phone (PB-20 follow-up), and hidden widgets kept their height, so
     a swipe beside the Inbox, or on one too short to scroll, carried the Inbox off the top. Under the Inbox the desk's
     layer takes no room and the desk does not scroll: its scroll falls back to the top, where the Inbox begins */
  .os-desk:has(> .notes-centre) { overflow: hidden; }
  .os-desk:has(> .notes-centre) > .desk-layer { display: none; }
  /* the same under Start and Quick settings (IDEAS 07:50: Favourites peeked out above the dock, desk text through them) */
  .os:has(:is(.start, .quick)) .os-desk > :is(.desk-layer, .win), .os:has(:is(.start, .quick)) .os-desk > .desk-layer :is(.w-body, .favs-body) { visibility: hidden; }
  .notes-foot :is(.btn, summary.btn) { min-height: var(--hit); min-width: var(--hit); }
  /* P16-86: the narrow room's dock stopped 16 px short of the right edge (PB-11b's cap is for a zoomed desktop); on a
     phone it is the full-width bar, and it never bounces sideways */
  .os-dock { max-width: none; overscroll-behavior-x: none; }
  /* P16-413 (PAPER_AGENTS, PAPER_FINE): only the front app's item reads as current; an app open behind keeps its plain
     label and gets back the small dot it has on a computer (core-phone made every running app bold, so Search and the
     front app looked active together) */
  .dock-i.is-running:not([aria-current="page"]) .dock-l { color: var(--c-ink-2); font-weight: inherit; }
  .dock-i.is-running:not([aria-current="page"])::after { display: block; top: 2px; bottom: auto; }
  /* P16-14 on main (IDEAS' phone-apps-1 gave the Settings list its scroll with contain): no iOS bounce there either */
  .set.is-list .set-side { overscroll-behavior: none; }
  /* P16-85: Start's search sits at its foot, by the dock and the thumb, and stays there while the apps scroll (the
     page order is kept: a keyboard still meets it first); the letters are one row of 44 px keys that scrolls sideways;
     the apps are one column (the second ran off the sheet's right edge, the "desk text" IDEAS saw); the sheet is near
     opaque */
  .start { --c-surface: rgb(var(--g-rgb, 255 255 255) / .97); grid-template-columns: minmax(0, 1fr); }
  .quick { --c-surface: rgb(var(--g-rgb, 255 255 255) / .97); grid-template-columns: minmax(0, 1fr); }
  /* Quick settings fits the phone (IDEAS' phone-apps-1 on main, P16 round-1b 03): a row whose choice is wider than the
     room puts the choice under its name, so Theme's "Match computer" no longer widens the panel and cuts every switch */
  .quick-row { flex-wrap: wrap; min-width: 0; }
  .quick-row > .seg { flex-wrap: wrap; max-width: 100%; }
  .start-recent, .start-list { grid-template-columns: minmax(0, 1fr); }
  .start-sec { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  /* max-width: none: the phone rule above caps every search form at 100% (2889), which kept this footer 32 px short of
     the panel on the right, so the list showed beside it (a lone "⋮" at 402, an "s" at 360: IDEAS 22:43) */
  .start > .search-form { width: auto; order: 1; max-width: none; position: sticky; bottom: calc(-1 * var(--sp-4)); z-index: var(--z-part); margin: 0 calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
    padding: var(--sp-2) var(--sp-4) var(--sp-4); background: var(--c-face-solid); border-top: var(--line) solid var(--c-line); }
  .start-az { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior: none; scrollbar-width: none; max-width: 100%; }
  .frame a.start-l { display: grid; place-items: center; min-width: 44px; min-height: 44px; flex: none; }
  /* P16-1009 (IDEAS 14:18): "All apps" was squeezed onto two lines beside the letters; on a phone the letters take a row
     of their own under the heading, which keeps one line */
  .start-sec > .card-h { flex-wrap: wrap; }
  .start-sec > .card-h > .start-az { flex: 1 0 100%; margin-left: 0; }
  /* P16-203 (WEB, round 1b): an app's description was cut on one line (after about 45 letters once Start had one
     column); on a phone it takes up to two lines, as Calendar's month entries do */
  .start-t > .note { white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}
/* r5 C1 Go to a date (CAL-M06): the date box and its Go side by side in the controls; on a phone a row of its own */
.win-calendar .cal-goto { display: inline-flex; align-items: center; gap: var(--sp-1); margin: 0; }

/* r5 C9 A (CAL-M22): the computer's zone line, shown only by sos1.js; its own [hidden] wins over the note's display */
.win-calendar .cal-zone { display: grid; gap: var(--sp-1); margin: 0; }
.win-calendar .cal-zone[hidden] { display: none; }
.win-calendar .cal-zone p { margin: 0; }
/* Calendar on a phone (MASTER 13:09; rows P16-600, P16-607 in "iPhone 16 Pro check 22 Oct"; P16-207/602 is phone-taps', above) */
@container frame (max-width: 640px) {
  /* P16-600, then Humane r0 H2: ONE bar on a phone (the controls took 40 % of the screen, then three rows, then five with the date box and
     the Calendars): ‹ the period (short words) › the view's name, and New entry as a round plus. Their words stay for a screen reader */
  .win-calendar .cal-tools { gap: var(--sp-1); }
  .win-calendar .cal-tools > .cal-new { margin-left: 0; width: var(--hit); min-width: var(--hit); padding: 0; border-radius: 50%; justify-content: center; }
  .win-calendar .cal-show > .note,
  .win-calendar .cal-tools > :is(.cal-prev, .cal-next, .cal-new) > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .win-calendar .cal-fold-body .cal-show .seg { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .win-calendar .cal-fold-body .cal-cals { width: 100%; }
  /* P16-607: an entry or a new entry opened below the month, half the page scrolled. It is the phone's whole screen
     while it is open: the period's view and the controls step aside, and its own Close goes back to them */
  .win-calendar .cal-body.has-entry > :first-child:not(.cal-pane),
  .win-calendar .cal-body.has-entry > .split, .win-calendar .cal-body.has-entry > .cal-chosen,
  .win-calendar:has(.cal-body.has-entry) .cal-tools { display: none; }
}

/* IDEAS round 5 (AD-118). P16-1004: BOS chat's chats list ends in a fade on a phone, so a row cut by its edge reads as
   "more below", with room after the last row so it scrolls clear of the fade. P16-1008: a Settings row's note wraps on
   a phone (Tint's rule was cut, "windows at le..."), and a row's chooser is 44 px tall */
@container frame (max-width: 640px) {
  .bos-side { padding-bottom: var(--sp-6); -webkit-mask-image: linear-gradient(to bottom, var(--c-ink) calc(100% - var(--sp-6)), transparent); mask-image: linear-gradient(to bottom, var(--c-ink) calc(100% - var(--sp-6)), transparent); }
  .set .row-note { white-space: normal; overflow: visible; text-overflow: clip; }
  .set .row select.ctl { min-height: 44px; }
}
/* P16-1003: on any touch-only screen Enter starts a new line (sos1.js), so the "Enter sends" line is not said there either */
@media (hover: none) and (pointer: coarse) { .js .bos-compose .bos-enter { display: none; } }

/* BOS chat's chats list folds on a phone behind one "Chats (n)" row (IDEAS's option b, MASTER 16:54): a computer never
   shows the row; on a phone with the script it shows, 44 px tall, and the folded list hides all but it, its fade too.
   Opened, the list takes the whole window, as a phone's messages do, and the row (or a chat) goes back to the chat */
.bos-list-sum { display: none; }
@container frame (max-width: 640px) {
  .js .bos-list-sum { display: flex; justify-content: flex-start; width: 100%; min-height: 44px; font-weight: 600; }
  .js .bos-list-sum > .ic { transition: transform var(--dur) var(--ease); }
  .js .bos-list-sum[aria-expanded="true"] > .ic { transform: rotate(90deg); }
  .js .bos:has(> .bos-side > .bos-list-sum[aria-expanded="true"]) { grid-template-rows: minmax(0, 1fr); }
  .js .bos-side:has(> .bos-list-sum[aria-expanded="true"]) { max-height: none; border-bottom: 0; }
  .js .bos:has(> .bos-side > .bos-list-sum[aria-expanded="true"]) > :not(.bos-side) { display: none; }
  .js .bos-side:has(> .bos-list-sum[aria-expanded="false"]) { padding: var(--sp-1) var(--sp-3); -webkit-mask-image: none; mask-image: none; }
  .js .bos-side:has(> .bos-list-sum[aria-expanded="false"]) > :not(.bos-list-sum) { display: none; }
}

/* BOS's drawing: each page small in the Pages list (pdf-reader rung 5; the drawing paints its own paper) */
.fusion-o-pic { display: flex; align-items: center; gap: var(--sp-2); }
.fusion-thumb { width: 36px; height: auto; max-height: 48px; flex: none; border: var(--line) solid var(--c-line); border-radius: var(--r-s); }
@container frame (max-width: 840px) { .fusion-thumb { display: none; } }

/* AD-117 addendum 4 #3 (Pavel on his phone, DEPUTY 10:01): the shared switch and date field look right on a phone.
   The switch is a phone's own size, 51 x 31 with a 27 px knob, never stretched by an app's 48 px button rule (Medisense's
   made it a 39 x 48 pill with its knob in the corner; this selector outweighs its .win-medisense :is(...) one); its tap area is 44 px or more by ::before. A bare date or time
   box (no class of its own) is drawn as every other field: the same height, edge, corner and fill, its text at the start */
@container frame (max-width: 640px) {
  .frame .toggle-form > button.toggle[role="switch"] { width: 51px; height: 31px; min-width: 51px; min-height: 0; max-height: 31px; padding: 0; align-self: center; }
  .frame .toggle-form > button.toggle[role="switch"] i { top: 2px; left: 2px; width: 27px; height: 27px; }
  .frame .toggle-form > button.toggle[role="switch"].is-on i { transform: translateX(20px); }
  .frame .toggle-form { align-items: center; min-height: 44px; }
  .frame input:is([type="date"], [type="time"]):not([class]) { -webkit-appearance: none; appearance: none; box-sizing: border-box;
    min-height: 48px; min-width: 10em; 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; font-size: max(16px, 1em); text-align: start; }
  .frame input:is([type="date"], [type="time"]):not([class])::-webkit-date-and-time-value { text-align: start; }
  /* the same boxes after sos1.js dressed them as text boxes (dd/mm/yyyy, hh:mm): still 16 px, so iOS does not zoom on focus */
  .frame input:is([placeholder="dd/mm/yyyy"], [placeholder="hh:mm"]) { font-size: max(16px, 1em); }
}
/* Medisense's pilot banner in Files (intake G1, IN-M28) */
.win-files .files-pilot { margin: 0 0 var(--sp-2); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2); color: var(--c-ink); }

/* Connectors in Files (Pavel 23 Oct 02:16; connectors/r0.md section 1): a fold under the Bin, its heading a row like a
   place, Connect source, then each connector as a place; the line inside one says it is read only */
.files-conn { display: grid; gap: var(--sp-1); margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: var(--line) solid var(--c-line); }
.files-conn > summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--row); padding: 0 var(--sp-2); cursor: pointer; list-style: none;
  border-radius: var(--r-s); color: var(--c-ink-2); font-weight: var(--w-strong); }
.files-conn > summary::-webkit-details-marker { display: none; }
.files-conn > summary:hover { background: var(--c-raised); }
.files-conn > summary .ic { width: 16px; height: 16px; flex: none; }
.files-conn > summary .note { margin-left: auto; }
.files-conn[open] > summary .pill { display: none; } /* open, the red row says it; the pill is for the closed fold (humane page 6: two red badges at once, H7) */
.files-conn .row.is-bad .row-note { color: var(--c-danger); }
.files-conn > .note { margin: 0; padding: 0 var(--sp-2); }
.files-conn-add { justify-self: start; }
.files-conn-line { display: flex; align-items: center; gap: var(--sp-1); margin: 0 0 var(--sp-2); }
.files-conn-line .ic { width: 14px; height: 14px; flex: none; }
@container frame (max-width: 640px) {
  .win-files .files-conn > :is(summary, .row, .files-conn-add) { min-height: 44px; }
}

/* ---- Ingestion (connectors/r2.md; DESIGN_C): the register, every file through the pipeline with its status in one
   word and what is known under its row; and Sources: its connectors, the tiles to add one, the credential window (the
   shared question frame holding a form), then the folder to read ---- */
.os-desk > .win-ingestion { width: min(100%, 960px); }
.win-ingestion .win-body { overflow: auto; }
.ing-find { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ing { display: grid; gap: var(--sp-3); padding: var(--pad-win); align-content: start; }
.ing-list { display: grid; gap: var(--sp-1); }
.ing-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); }
/* SQ-H10 (H9): the acts are their own line under the name, so the name keeps its column at any width of window; none, no line */
.ing-r > .ibtn { grid-column: 4; grid-row: 1; }
.ing-r > .ing-acts { grid-column: 2 / 4; grid-row: 2; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ing-r > .ing-acts:not(:has(*)) { display: none; }
.ing-r:hover, .ing-r.is-open { background: var(--c-surface-2); }
.ing-r .ic-obj { width: 1.5em; height: 1.5em; }
.ing-n { display: grid; min-width: 0; overflow-wrap: anywhere; }
.ing-n .note, .ing-s .note { font-size: var(--fs-1); color: var(--c-ink-2); }
.ing-s { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.ing-detail { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-2) calc(1.5em + var(--sp-6)); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-m);
  border: var(--line) solid var(--c-line); background: var(--c-surface-2); }
.ing-detail .ing-why { color: var(--c-ink); }
/* Sources: not .conn, which is Settings' connections row (line 587, a three-column grid): the clash put the lead, the
   back button and the list side by side (DESIGN_C's walk, 23 Oct 07:37) */
.ing-src { display: grid; gap: var(--sp-5); padding: var(--pad-win); align-content: start; }

/* the ingestion window's Now part (DESIGN_A's ingestion-window r0): a loading line per file, its stage named inside it in the stage's colour */
.ing-now { display: grid; gap: var(--sp-3); }
.ing-now-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.ing-now-head .sub-h { margin: 0; }
.ing-now-says { margin: 0; flex: 1 1 auto; }
.ing-now-list { display: grid; gap: var(--sp-3); }
.ing-nr { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2); --ing-c: var(--c-raised); --ing-t: var(--c-ink); }
.ing-nr-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); }
.ing-nr .ing-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ing-ask { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); background: var(--c-surface); }
.ing-ask p { margin: 0; }
.ing-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2); }
.ing-bar-name { display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--sp-3); border-radius: 12px; background: var(--ing-c); color: var(--ing-t); font-size: var(--fs-1); font-weight: 600; white-space: nowrap; }
.ing-bar-track { display: block; height: 8px; border-radius: 4px; background: var(--c-surface); overflow: hidden; }
.ing-bar-fill { display: block; height: 100%; border-radius: 4px; background: var(--ing-f, var(--ing-c)); }
.ing-bar-n { font-size: var(--fs-1); color: var(--c-ink-2); white-space: nowrap; }
.ing-bar.is-stripe .ing-bar-track { background: repeating-linear-gradient(135deg, var(--ing-f, var(--ing-c)) 0 6px, transparent 6px 12px); background-size: 17px 17px; animation: ing-stripe 1.4s linear infinite; }
@keyframes ing-stripe { to { background-position: 17px 0; } }
/* sweep 13 row 18: the computer's reduced-motion setting stops the stripes too (SOS's own `still` already did) */
@media (prefers-reduced-motion: reduce) { .ing-bar.is-stripe .ing-bar-track { animation: none; } }
.ing-time { display: grid; gap: var(--sp-1); }
.ing-strip { display: flex; height: 6px; border-radius: 3px; overflow: hidden; }
.ing-strip i + i { border-left: 2px solid var(--c-surface-2); }
.ing-strip i { display: block; height: 100%; background: var(--ing-f, var(--ing-c)); }
.ing-took { margin: 0; }
.ing-why { margin: 0; }
.ing-popup { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ing-now-foot { margin: 0; }
.ing-clear { margin: 0; justify-self: start; }
.ing-st-receiving { --ing-c: var(--ing-receiving); --ing-t: var(--ing-ink); }
.ing-st-reading { --ing-c: var(--ing-reading); --ing-t: var(--ing-ink); }
.ing-st-scanning { --ing-c: var(--ing-scanning); --ing-t: var(--ing-ink); }
.ing-st-listening { --ing-c: var(--ing-listening); --ing-t: var(--ing-ink); }
.ing-st-cutting { --ing-c: var(--ing-splitting); --ing-t: var(--ing-ink); }
.ing-st-finding { --ing-c: var(--ing-finding); --ing-t: var(--ing-ink); }
.ing-st-remembering { --ing-c: var(--ing-remembering); --ing-t: var(--ing-ink); }
.ing-st-done { --ing-c: var(--c-good); --ing-t: var(--ing-ink); }
.ing-st-bad { --ing-c: var(--c-danger); --ing-t: var(--c-danger-ink); }
.ing-st-waiting, .ing-st-quiet { --ing-c: var(--c-raised); --ing-f: var(--c-ink-2); --ing-t: var(--c-ink); }  /* the label block is a quiet surface; what is drawn beside it (fill, stripe, strip) is ink, so it shows on the track (3:1, found in the walk 24 Oct 00:21) */
.ing-st-waiting .ing-bar-name, .ing-st-quiet .ing-bar-name { border: var(--line) solid var(--c-line); }

/* Files' Memory column and side panel (DESIGN_C, ingest-journey/files-r0.md): the Ingestion window's stage word in its colour as a chip, a file in memory a quiet check
   (green stays in the window), a roll-up under a folder; the words are IngestNow's, the colours the .ing-st-* tokens above */
.files-ing-chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; max-width: 100%; color: inherit; text-decoration: none; }
.files-ing-w { flex: none; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-pill); background: var(--ing-c); color: var(--ing-t); font-size: var(--fs-1); font-weight: var(--w-strong); white-space: nowrap; }
.ing-st-waiting .files-ing-w, .ing-st-quiet .files-ing-w { border: var(--line) solid var(--c-line); }
.files-ing-chip small { min-width: 0; color: var(--c-ink-2); font-size: var(--fs-1); overflow-wrap: anywhere; }  /* the why is the instruction: it wraps, it is never cut */
.files-ing-quiet { display: inline-flex; align-items: center; gap: var(--sp-1); color: var(--c-ink-2); font-size: var(--fs-1); }
.files-ing-note { color: var(--c-ink-3); font-size: var(--fs-1); }
/* text a person cannot see when they open the file (SQ-H03, DESIGN_LEAD 4 Nov; SOS1Web.UnseenText): one quiet line with
   Show it, a fold with one row a place; the text wraps at 390 and never scrolls sideways (DR2) */
.unseen { margin: var(--sp-2) 0 0; }
p.unseen { color: var(--c-ink-2); font-size: var(--fs-2); }
.unseen > summary { cursor: pointer; list-style: none; min-height: var(--row); display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--sp-2); color: var(--c-ink-2); font-size: var(--fs-2); }
.unseen > summary::-webkit-details-marker { display: none; }
.unseen > summary .link { color: var(--c-accent); white-space: nowrap; }
.unseen > summary:hover .link, .unseen > summary:focus-visible .link { text-decoration: underline; }
.unseen:not([open]) > summary .unseen-close, .unseen[open] > summary .unseen-act { display: none; }
.unseen-list { display: grid; gap: var(--sp-2); }
.unseen-list > .note { margin: 0; }
.unseen-places { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.unseen-place { padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); min-width: 0; }
.unseen-where { margin: 0 0 var(--sp-1); color: var(--c-ink-2); font-size: var(--fs-2); }
/* a file's stacked or enclosing marks paint above and below their line: clip them to the text's own box so they never
   cover the BOS words over it (LOCK S-1, 06:03) */
.unseen-text { margin: 0; padding-block: var(--sp-1); overflow: clip; white-space: pre-wrap; overflow-wrap: anywhere; }
.files-ing-roll { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.files-ing-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
/* the status beside a name in the Files list: on the right of the name cell, the name giving way; under the name on a phone */
.files-n .files-ing-cell, .files-n .files-ing-quiet { white-space: normal; overflow: visible; text-overflow: clip; }
.files-n .files-ing-cell { flex: none; max-width: 55%; margin-left: auto; }
.files-ing-chip { align-items: flex-start; }
/* F2: the status word keeps its whole word (on a phone "Not read" was cut to "Not re" beside a long line), and in a narrow list the status goes under the name,
   as on a phone, instead of over the Kind and Size columns (People beside Files at 1440 leaves the list about 490 px: "In memory · changed since BOS read it"
   was drawn across them) */
.files-ing-chip > :is(.pill, .files-ing-w) { flex: none; white-space: nowrap; }
@container (max-width: 560px) {
  .files-r .files-n { flex-wrap: wrap; }
  .files-n .files-link { flex: 1 1 0; }  /* the icon and the name share the first line; only the status goes under them */
  .files-n .files-ing-cell { flex-basis: 100%; max-width: 100%; margin-left: 0; }
}
.files-ing-side, .files-ing-stage { display: grid; gap: var(--sp-2); justify-items: start; }
.files-ing-foot { margin: var(--sp-2) 0 0; }
/* R2: a file the pipeline cannot take: a small red exclamation mark on its icon (Pavel 26 Oct 16:50); a 13 px circle in the danger colour, its ink for the "!", a ring in the ink colour, so it reads on any row (a chosen row is not the surface colour) */
.files-ing-ico { position: relative; display: inline-flex; flex: none; }
.files-ing-bang { position: absolute; right: calc(-1 * var(--sp-1)); bottom: calc(-1 * var(--sp-1)); display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--c-danger); color: var(--c-danger-ink); font-size: 10px; font-weight: 700; line-height: 1; box-shadow: 0 0 0 1.5px var(--c-danger-ink); }
/* AD-175 K3 (IDEAS2 19:30): a file that only waits for the AI switch is amber, calmer than the red of a file that cannot be read; the "!" is the shape, the screen-reader text the words */
.files-ing-bang-held { background: var(--c-warn); }
@container frame (max-width: 640px) {
  .files-ing-chip { min-height: 44px; }
  .files-r .files-n { flex-wrap: wrap; }
  .files-n .files-ing-cell { flex-basis: 100%; max-width: 100%; margin-left: 0; }
}
.ing-w0 { width: 0; } .ing-w5 { width: 5%; } .ing-w10 { width: 10%; } .ing-w15 { width: 15%; } .ing-w20 { width: 20%; } .ing-w25 { width: 25%; }
.ing-w30 { width: 30%; } .ing-w35 { width: 35%; } .ing-w40 { width: 40%; } .ing-w45 { width: 45%; } .ing-w50 { width: 50%; } .ing-w55 { width: 55%; }
.ing-w60 { width: 60%; } .ing-w65 { width: 65%; } .ing-w70 { width: 70%; } .ing-w75 { width: 75%; } .ing-w80 { width: 80%; } .ing-w85 { width: 85%; }
.ing-w90 { width: 90%; } .ing-w95 { width: 95%; } .ing-w100 { width: 100%; }
@media (prefers-reduced-motion: reduce) { .ing-bar.is-stripe .ing-bar-track { animation: none; } }
@media (forced-colors: active) { .ing-bar-name { border: 1px solid CanvasText; } .ing-bar-fill, .ing-strip i { background: Highlight; } }
@container frame (max-width: 640px) {
  .ing-nr-top { grid-template-columns: auto minmax(0, 1fr); }
  .ing-nr-top .ing-acts { grid-column: 1 / -1; }
  .ing-nr .ing-acts > * { flex: 1 1 0; }
  .ing-nr .ing-acts .btn { width: 100%; }
  .ing-bar { grid-template-columns: auto minmax(0, 1fr); }
  .ing-bar-n { grid-column: 1 / -1; white-space: normal; }
}
.conn-lead { margin: 0; color: var(--c-ink-2); }
.conn-list { display: grid; gap: var(--sp-1); }
.conn-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m); background: var(--c-surface-2); }
.conn-r b { display: block; }
.conn-r .note { font-size: var(--fs-1); color: var(--c-ink-2); }
.conn-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3); }
.frame a.btn.conn-tile { display: grid; justify-items: start; gap: var(--sp-1); height: auto; padding: var(--sp-4); border-radius: var(--r-l); text-align: left; white-space: normal; }
.frame a.btn.conn-tile .ic { width: 2em; height: 2em; }
.frame a.btn.conn-tile > span:not(.note) { font-weight: var(--w-strong); font-size: var(--fs-3); }
.conn-tile .note { font-size: var(--fs-1); color: var(--c-ink-2); font-weight: var(--w-text); }
.conn-q .frow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.conn-q .who { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-surface-2); font-size: var(--fs-2); color: var(--c-ink-2); }
.conn-q .why { margin: 0; color: var(--c-danger); font-size: var(--fs-2); }
.conn-q .conn-folders { display: grid; gap: var(--sp-1); max-height: 40vh; overflow: auto; }
/* (the connector questions' acts are the shared .question-acts row: its right-hand act and its 48 px on a phone, CT18) */
/* a short screen (UI 03:34, P16-1101 at 640x400): Connect and Cancel stay at the dialog's foot while its fields scroll */
@media (max-height: 520px) {
  .conn-q .conn-form > .question-acts { position: sticky; bottom: calc(-1 * var(--sp-5)); margin-bottom: calc(-1 * var(--sp-5)); padding: var(--sp-2) 0 var(--sp-5);
    background: var(--c-surface); }
}
@container frame (max-width: 640px) {
  .ing-src { padding: var(--sp-3); gap: var(--sp-4); }
  .conn-tiles { grid-template-columns: minmax(0, 1fr); }
  .conn-r { grid-template-columns: auto minmax(0, 1fr) auto; }
  .conn-r > .btns { grid-column: 2 / -1; justify-self: start; }
  /* the folder step's way back up: a phone hides .crumbs in window tools (core.css), not in this dialog, where they are
     the only way up a level (DESIGN_C's walk, 23 Oct 09:40) */
  .conn-q .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-1); }
  .conn-q .crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
  .ing { padding: var(--sp-3); }
  .ing-r { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ing-r > .ing-s { grid-column: 2; grid-row: 2; }
  .ing-r > .ing-acts { grid-column: 2 / -1; grid-row: 3; }
  .ing-r > .ibtn { grid-column: 3; grid-row: 1 / span 2; }
  /* SQ-H10 (H2): Search is the whole first row with Connect source beside it (its words shown, IDEAS2 12:31); the five tabs wrap into
     whole rows of equal cells under it, never a column or a tab cut at the edge; the first row of the register comes up the window */
  .win-ingestion .ing-find { gap: var(--sp-2); }
  .win-ingestion .ing-find .field { flex: 1 1 0; min-width: 0; }
  .win-ingestion .ing-find .ing-connect { order: 2; }
  .win-ingestion .ing-find fieldset.ing-states { order: 3; flex: 1 1 100%; }
  .ing-detail { margin-left: 0; }
}
/* WindowFind (convenience r0 #3): the Find row Ctrl+F opens in Calendar, Tasks, Relationships and BOS chat, between the
   tools and the body; its matches are the browser's own highlights, the current one ringed, as Write's marks are */
.win-find { padding: var(--sp-2) var(--sp-3); border-bottom: var(--line) solid var(--c-line); }
.win-find input { flex: 1 1 12rem; min-width: 0; }
::highlight(win-find) { background-color: var(--c-mark); color: inherit; }
::highlight(win-find-at) { background-color: var(--c-accent-soft); color: inherit; text-decoration: underline 2px var(--c-accent); }
/* the window menu's Find (IDEAS 03:22: a phone has no Ctrl+F): only in the four windows WindowFind serves */
.js .win-menu .win-find-item { display: none; }
.js :is(.win-calendar, .win-tasks, .win-crm, .win-bos) .win-menu .win-find-item { display: flex; }
/* GF-12: what a file proposes, in Files' preview: each row's words, its sentence, Not this */
.files-props-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.files-prop { display: grid; gap: var(--sp-1); }
.files-prop-quote { margin: 0; padding-left: var(--sp-3); border-left: 2px solid var(--c-line); color: var(--c-ink-2); }
.files-prop.is-declined, .files-prop.is-added { opacity: .75; }
/* GF-12 H: the Proposals place, every open proposal grouped by file, the file's name first; on a phone and any touch
   screen the file's link and "and 12 more" are 44 px targets */
.files-props-place { display: grid; gap: var(--sp-4); }
.files-props-group { display: grid; gap: var(--sp-2); padding-top: var(--sp-3); border-top: var(--line) solid var(--c-line); }
.files-props-file { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); margin: 0; font-size: var(--fs-2); }
@container frame (max-width: 640px) { .files-props-group a.link { display: inline-flex; align-items: center; min-height: 44px; } }
@media (pointer: coarse) { .frame .files-props-group a.link { display: inline-flex; align-items: center; min-height: 44px; } }

/* Qaf (agentic-control r5; slice 1: P8 Machines, P9 Where this comes from): words and numbers in a table, a row dims
   while its data is not current (never colour alone: its words say so), a description list for the sources */
.qaf-machines, .qaf-sources { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.qaf-machines > p, .qaf-sources > p, .qaf-sources > h2 { margin: 0; }
.qaf-sources-l { gap: var(--sp-3); }
.qaf-sources-l > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); justify-content: start; gap: var(--sp-3); }
.qaf-sources-l dd { margin: 0; }
/* by the page's own width, never the frame's (IDEAS 24 Oct 02:03): beside the side list a page is about 390 px even on a 1440
   screen, so a rule keyed to the frame never fired there; the container is .qaf-page (one declaration, below), as P4 and P5's */
@container qaf-body (max-width: 480px) {
  /* Qaf's tables are the shared table now (core.css .tbl, controls r0 CS6b): their cards follow each table's own room */
  .qaf-sources-l > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

/* Qaf (agentic control r5 P1 and P14): the Librarian's window: the shell's own `.set` frame, its pages' bodies (P2, P8,
   P9) their own modules' parts. The heading line holds the page, when and from where it was read, the totals and Read
   again; a state line (heartbeat stopped, memory down) comes first on every page; the welcome sits above, once */
.qaf-pane { display: grid; gap: var(--sp-3); align-content: start; }
.qaf-welcome { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface-2); margin: 0; }
.qaf-welcome:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.qaf-welcome p { margin: 0; }
.qaf-state { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-warn, var(--c-ink-2)); background: var(--c-surface-2); }
.qaf-head { display: grid; gap: var(--sp-1); justify-items: start; }
.qaf-head > p { margin: 0; }
.qaf-status { margin: 0; }
@container frame (max-width: 640px) { .win-qaf .btn { min-height: var(--hit); } .win-qaf .set-side .row { min-height: 44px; } }
/* the team link in a Network team heading is a target too (DEPUTY_UI2 03:40: 19 px high): 44 px on a phone, as every Qaf target (AC-M30) */
@container frame (max-width: 640px) { .win-qaf .qaf-team .sub-h a.link { display: inline-flex; align-items: center; min-height: 44px; } }
/* Qaf P12 (r5 3.9, P11, AC-M29, AC-M30): the same app at 390 px and with script off. Classes only, never a page's name:
   the states' words stay (QafStates) and are never dimmed by opacity, which would take their ink under AA; a dimmed
   state is desaturated with a dashed edge, so it is never colour alone. Every control is a link, a button in a form or a
   GET form: nothing needs script; nothing is wider than the room; every target is 44 px */
.qaf-pane, .qaf-page { min-width: 0; overflow-wrap: anywhere; }
.qaf-page { display: grid; gap: var(--sp-3); align-content: start; container: qaf-body / inline-size; }
.qaf-state-line { margin: 0; }
.qaf-state-line.is-down { font-weight: 600; }
.qaf-state-line.is-stopped { font-style: normal; }
.qaf-dim { filter: grayscale(.7); }  /* the stale state is drained of colour (IP review R26: no saturation function in the glass) */
.qaf-dim :is(.qaf-row, .qaf-bar, .qaf-group) { border-style: dashed; }
.qaf-empty, .qaf-note { margin: 0; color: var(--c-ink-2); }
.qaf-status { font-size: var(--fs-1); color: var(--c-ink-2); }
.qaf-group { display: grid; gap: var(--sp-1); min-width: 0; }
.qaf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--sp-2); align-items: center; min-width: 0; }
.qaf-filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.qaf-back { display: none; }
/* Qaf P3 Seats: a seat's block, and a bar drawn without a style attribute: its width is one of eleven classes, bar-0 to bar-10
   (the real value is the `meter` beside it, hidden but spoken; the bar is for the eye) */
.qaf-seat { padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); }
.qaf-seat-h { margin: 0; font-size: var(--fs-2, 1rem); }
.qaf-seat-d { display: grid; gap: var(--sp-1); margin: 0; }
.qaf-seat-d .qaf-win { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: var(--sp-2); align-items: baseline; }
.qaf-seat-d dt { color: var(--c-ink-2); }
.qaf-seat-d dd { margin: 0; min-width: 0; }
.qaf-seat p { margin: 0; }
.qaf-bar { --fill: 0%; display: inline-block; inline-size: min(10rem, 40%); block-size: .6rem; vertical-align: middle; border: var(--line) solid var(--c-line); border-radius: 999px;
  background: linear-gradient(to right, var(--c-ink-2) var(--fill), var(--c-surface-2) var(--fill)); }
.bar-0 { --fill: 0%; } .bar-1 { --fill: 10%; } .bar-2 { --fill: 20%; } .bar-3 { --fill: 30%; } .bar-4 { --fill: 40%; } .bar-5 { --fill: 50%; }
.bar-6 { --fill: 60%; } .bar-7 { --fill: 70%; } .bar-8 { --fill: 80%; } .bar-9 { --fill: 90%; } .bar-10 { --fill: 100%; }
/* Seat use (seat-gauge r0): the head, the alarm, one row per seat with the shared gauge bar, the idle list */
.qaf-use { display: grid; gap: var(--sp-3); }
.qaf-use.is-grey { color: var(--c-ink-2); }
.qaf-use.is-grey .gauge { opacity: .5; }
.qaf-use-down { margin: 0; padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-warn); border-radius: var(--r-m); font-weight: var(--w-strong); }
.qaf-use-head { display: grid; gap: var(--sp-1); }
.qaf-use-big { margin: 0; font-size: var(--fs-5); font-weight: var(--w-strong); }
.qaf-use-big .num { font-size: 1.5em; }
.qaf-use-sum { margin: 0; color: var(--c-ink-2); }
.qaf-use-alarm { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-warn); border-radius: var(--r-m); }
.qaf-use-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.qaf-use-row { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(8rem, 1fr) 5rem minmax(9rem, 17rem); column-gap: var(--sp-3); row-gap: var(--sp-1); align-items: center; min-height: var(--row); }
.qaf-use-row.is-stale { color: var(--c-ink-2); }
.qaf-use-row.is-stale .gauge { opacity: .5; }
.qaf-use-name { display: grid; line-height: 1.2; }
.qaf-use-bar { min-width: 0; }
.qaf-use-used { text-align: end; }
.qaf-use-end { min-width: 0; }
.qaf-use-wait { grid-column: 1 / -1; order: 4; }
.qaf-use-idle-l { margin: 0; padding-inline-start: var(--sp-3); }
.qaf-use-foot { margin: 0; }
@container frame (max-width: 640px) {
  .set.qaf .qaf-back { display: inline-flex; justify-self: start; min-width: 44px; }
  .set.qaf.is-list .set-side .row { min-height: 44px; }
  /* the list alone on a phone (P12): core's rule for it is in a layer, and .qaf-pane's display above is not, so it has to be said here (found in the 390 walk, 23 Oct 19:04) */
  .set.qaf.is-list .qaf-pane { display: none; }
  .qaf-pane { padding: var(--sp-3); gap: var(--sp-2); }
  .qaf-head .btn { min-width: var(--hit); justify-content: center; }
  /* an agent, a seat or a machine is a two-line card: its name, then its state words; the bar after them */
  .qaf-row { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); min-height: 44px; }
  .qaf-bar { max-width: 100%; }
  /* Seat use: a seat is a card: its name and agents, the bar, then the used figure and the week's end words on one line */
  .qaf-use-row { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); }
  .qaf-use-name { grid-column: 1 / -1; }
  .qaf-use-bar { grid-column: 1 / -1; }
  .qaf-use-used { order: 2; text-align: start; }
  .qaf-use-end { order: 3; text-align: end; }
  /* Seats (P3): a window's label above its figure, nothing wider than the room */
  .qaf-seat-d .qaf-win { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  /* the mail table is one card per sending team; its counts are lines ("to DEPUTY 48") */
  .qaf-table, .qaf-table :is(tbody, tr, td, th) { display: block; width: 100%; max-width: 100%; }
  .qaf-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .qaf-table tr { padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); margin-bottom: var(--sp-2); }
  .qaf-filters :is(a, button, select, .btn) { min-height: 44px; min-width: 44px; }
  .qaf-status { padding-bottom: max(var(--sp-1), env(safe-area-inset-bottom, 0px)); }
}
/* Site Desk S6: the preflight list of the made-up firm (DEPUTY_UI2) */
.sd-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

/* Site Desk's look (DESIGN_B, look-r0; PAPER_MEDI 19:00): the thread, and a job's headline. Tokens only; the other
   Site Desk pages draw with shared parts and need no rule of their own. A message of the viewer's own side sits to the
   right in the accent's soft tint, the other side's to the left, so a long thread reads as a conversation on a phone. */
/* DS43: Site Desk's body has the window inset at every width (its first line sat at x=1) */
.win-site_desk .sd { padding: var(--pad-win); }
/* DESIGN_LEAD 5260fc6f M-4: the Site Desk window scrolls its own body (one scroller, DR36), as Calendar and Tasks do */
.win-site_desk .win-body { overflow: auto; scroll-padding: 5.5rem 0 var(--sp-2); }  /* focus and scrollIntoView stop below the sticky refusal line (DESIGN_LEAD N-3, DR22) and with the whole focus ring above the foot (R-1, DR26) */
/* DESIGN_A R-1: the refusal line stays in view at the top of the scrolling body when the focus carries the page down to the empty box; opaque like .fusion-bar */
.win-site_desk .sd-said { position: sticky; top: 0; z-index: var(--z-pin); margin: 0 calc(-1 * var(--pad-win)) var(--sp-2); padding: var(--sp-2) var(--pad-win); background: var(--c-face-solid); }
.win-site_desk .sd-messages { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.win-site_desk .sd-msg { display: grid; gap: var(--sp-1); justify-self: start; max-width: min(100%, 36rem); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-m); border: var(--line) solid var(--c-line); background: var(--c-surface-2); }
.win-site_desk .sd-msg.is-mine { justify-self: end; background: var(--c-accent-soft); }
.win-site_desk .sd-msg-by { font-weight: var(--w-strong); }
.win-site_desk .sd-msg-text { margin: 0; overflow-wrap: anywhere; }
.win-site_desk .sd-msg-mark { margin: 0; text-align: end; }
.win-site_desk .sd-headline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--fs-3); }

/* Who has work (HR-03, PAPER_MEDI 24 Oct; DESIGN_LEAD 06:26): one card per person. Tokens only; the list is one column in a narrow window and more as the window
   widens, with no breakpoint. A card is not a link (no chevron, no pressed state), and a chip says its state in words. */
.win-site_desk .wi-plain { margin: 0 0 var(--sp-3); font-size: var(--fs-3); }
.win-site_desk .wi-day-h { margin: var(--sp-3) 0 var(--sp-2); }
.win-site_desk .wi-list { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.win-site_desk .wi-card { display: grid; gap: var(--sp-1); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-line); background: var(--c-surface); min-width: 0; }
.win-site_desk .wi-name { font-size: var(--fs-3); font-weight: var(--w-strong); overflow-wrap: break-word; }
.win-site_desk .wi-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); }
.win-site_desk .wi-src { font-weight: var(--w-strong); }

/* BOS's floating button flung too fast breaks like glass (Pavel, 23 Oct 2026 ~22:00): its pieces, pictures of itself,
   drift and fade (sos1.js BosFloat); back in its corner after 1.5 s, it fades in. Reduce motion: no break at all */
.bos-shards { position: fixed; z-index: var(--z-shards); pointer-events: none; }
.bos-shards > i { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; }
.frame a.bos-float.is-back { animation: bos-back 420ms ease-out; }
@keyframes bos-back { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .frame a.bos-float.is-back { animation: none; } }

/* Qaf P4 and P5 (DEPUTY_UI2's 24 Oct 01:40 walk): a label is never broken mid-word, and a narrow window does not squeeze it */
.win-qaf .qaf-agent-l div { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--sp-1) var(--sp-3); justify-content: start; }
.win-qaf .qaf-agent-l dt { white-space: nowrap; }
.win-qaf .qaf-agent-l dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.win-qaf :is(.qaf-agent-t, .qaf-team-t) :is(th, td) { overflow-wrap: break-word; }
.win-qaf .qaf-agent-t td[data-label="Message"], .win-qaf .qaf-fullname { overflow-wrap: anywhere; }

/* Qaf P4 and P5 at a narrow PANE: their two tables are the shared .tbl, whose cards follow the table's own room; the pane may shrink */
.win-qaf .qaf-pane { min-width: 0; }
/* ERP E1, the printable invoice (SOS1Web.InvoicePrint): a sheet of paper, black on white whatever the theme (the paper tokens --c-page and --c-print-ink) (paper has no dark mode), A4 on
   print; the how line is not printed; a row never splits across pages and the head repeats */
@page { size: A4; margin: 15mm; }
.invoice-print { max-width: 210mm; margin: 0 auto; padding: var(--sp-4); }
.invoice-sheet { background: var(--c-page); color: var(--c-print-ink); padding: var(--sp-5); border: var(--line) solid var(--c-line); border-radius: var(--r-s); display: grid; gap: var(--sp-4); font-size: var(--fs-2); }
.invoice-sheet :is(h1, h2, p, dl, dd) { margin: 0; }
.invoice-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); align-items: start; }
.invoice-title { font-size: var(--fs-5); }
.invoice-draft { flex-basis: 100%; font-weight: var(--w-strong); border: 2px solid var(--c-print-ink); padding: var(--sp-2); }
.invoice-meta, .invoice-totals { display: grid; gap: var(--sp-1); }
.invoice-meta > div, .invoice-totals > div { display: flex; justify-content: space-between; gap: var(--sp-4); }
.invoice-meta dt, .invoice-totals dt { font-weight: var(--w-strong); }
.invoice-parties { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.invoice-h { font-size: var(--fs-1); text-transform: uppercase; letter-spacing: .04em; }
.invoice-name { font-weight: var(--w-strong); }
.invoice-lines { width: 100%; border-collapse: collapse; }
.invoice-lines th, .invoice-lines td { padding: var(--sp-2); text-align: left; border-bottom: var(--line) solid var(--c-page-line); overflow-wrap: anywhere; vertical-align: top; }
.invoice-lines thead th { border-bottom: 2px solid var(--c-print-ink); }
.invoice-lines .num { text-align: right; }
.invoice-lines tbody th { font-weight: normal; }
.invoice-totals { justify-self: end; min-width: 60%; }
.invoice-total { font-weight: var(--w-strong); border-top: 2px solid var(--c-print-ink); padding-top: var(--sp-1); }
@media (max-width: 560px) { .invoice-parties { grid-template-columns: minmax(0, 1fr); } .invoice-lines { display: block; overflow-x: auto; } }
@media print {
  .invoice-how { display: none; }
  .invoice-print { max-width: none; padding: 0; }
  .invoice-sheet { border: 0; border-radius: 0; padding: 0; font-size: 10.5pt; }
  .invoice-lines thead { display: table-header-group; }
  .invoice-lines tr, .invoice-totals, .invoice-parties { break-inside: avoid; }
  .frame:has(.invoice-print) { background: var(--c-page); overflow: visible; }
}

/* E0's books in Relationships (AD-130; IDEAS' words r0): tables are tables on a wide page and cards on a narrow one, by the
   page's own width (as Qaf's .qaf-t, DESIGN_C); amounts right-aligned in tabular figures, a total labelled Total, tokens only */
.win-crm .books { container: books-body / inline-size; display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.books-sec { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.books-sec > p, .books-sec > h3, .books-sec > h4 { margin: 0; }
.books-show { flex-wrap: wrap; }
.books-say { margin: 0; padding: var(--sp-2) var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface-2); }
.books-h4 { margin: var(--sp-2) 0 0; font-weight: var(--w-strong); }
.books-form { display: grid; gap: var(--sp-3); max-width: 44rem; }
.books-dates { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: end; }
.books-date { display: grid; gap: var(--sp-1); }
.books-check, .books-result { margin: 0; font-weight: var(--w-strong); }
.books-facts { display: grid; gap: var(--sp-1); margin: 0; }
.books-facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--sp-3); }
.books-facts dt { color: var(--c-ink-2); }
.books-facts dd { margin: 0; }
.books-t { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.books-t th, .books-t td { padding: var(--sp-2); text-align: left; vertical-align: top; border-bottom: var(--line) solid var(--c-line); overflow-wrap: anywhere; }
.books-t thead th { font-weight: var(--w-strong); color: var(--c-ink-2); overflow-wrap: normal; }
.books-t tbody th { font-weight: var(--w-strong); }
.books-t th.num, .books-t td.num { text-align: right; white-space: nowrap; }
.books-t tfoot th, .books-t tfoot td { font-weight: var(--w-strong); border-top: var(--line) solid var(--c-ink-2); }
.books-t tr.books-off > * { color: var(--c-ink-3); }
/* the draft's lines never make the form wider than its room (DEPUTY_UI2 24 Oct 03:52: Credit cut off at a page of 490 px): fixed columns, controls fill their cell */
.books-edit { table-layout: fixed; }
.books-edit thead th:first-child, .books-edit tbody th { width: 46%; }
.books-edit :is(th.num, td.num) { width: 27%; }
.books-edit .field, .books-edit .ctl-sel { width: 100%; min-width: 0; box-sizing: border-box; }
.books-edit :is(.field input, select) { width: 100%; min-width: 0; box-sizing: border-box; }
.books-edit td.num input { text-align: right; }
@container books-body (max-width: 480px) {
  .books-t th, .books-t td { overflow-wrap: break-word; }
  .books-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .books-t, .books-t tbody, .books-t tfoot { display: block; }
  .books-t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--line) solid var(--c-line); }
  .books-t :is(th, td) { display: block; padding: 0; border-bottom: 0; }
  .books-t tfoot tr { border-top: var(--line) solid var(--c-ink-2); }
  .books-t tbody th, .books-t tfoot th { grid-column: 1; }
  .books-t td[data-label] { grid-column: 1 / -1; }
  .books-t td[data-label]::before { content: attr(data-label) ": "; color: var(--c-ink-2); }
  .books-t td:empty { display: none; }
  .books-accounts td.num, .books-journal td.num, .books-amounts td.num { grid-column: 2; grid-row: 1; }
  .books-accounts td.num::before, .books-journal td.num::before, .books-amounts td.num::before { content: none; }
  .books-lines td.num, .books-trial td.num { grid-column: 1 / -1; text-align: left; }
  .books-edit td { display: flex; gap: var(--sp-2); align-items: center; }
  .books-facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}
/* the draft's lines stack (account over its Debit and Credit) when the page is narrower than the three columns need, by the
   page's width not the screen's (DEPUTY_UI2 03:52: a page of 490 beside a side list; MASTER 03:55): wider than the card width above */
@container books-body (max-width: 600px) {
  .books-edit thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .books-edit, .books-edit tbody { display: block; }
  .books-edit tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); padding: var(--sp-3) 0; border-bottom: var(--line) solid var(--c-line); }
  .books-edit :is(th, td, th.num, td.num) { display: flex; gap: var(--sp-2); align-items: center; padding: 0; border-bottom: 0; width: auto; }
  .books-edit td[data-label]::before { content: attr(data-label) ": "; color: var(--c-ink-2); }
}

/* E3's reconcile screen and E2's bills inside the Books view (DESIGN_C; AD-130): a bank line beside its suggested match, tables as
   DESIGN_B's .books-t cards by the page's width (container books-body). A skipped line is dashed and quiet, never faded by opacity. */
.bank-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.bank-line { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-3) var(--sp-4); padding: var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface); }
.bank-skipped { border-style: dashed; color: var(--c-ink-2); }
.bank-l, .bank-m { display: grid; gap: var(--sp-1); align-content: start; min-width: 0; }
.bank-l p, .bank-m p { margin: 0; }
.bank-what, .bank-item { overflow-wrap: break-word; }
.bank-amt { font-variant-numeric: tabular-nums; }
.bank-match { display: grid; gap: var(--sp-1); padding-bottom: var(--sp-2); }
.bank-match + .bank-match { border-top: var(--line) solid var(--c-line); padding-top: var(--sp-2); }
.bank-item { font-weight: var(--w-strong); }
.bank-account { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.bank-account .ctl-sel, .bank-account select { min-width: 0; max-width: 100%; }
.bank-account { min-width: 0; max-width: 100%; }
/* a grid item will not shrink below its widest word unless told (DEPUTY_TESTER 24 Oct 05:21: a line was 497 px on a 334 px page and
   the window scrolled sideways); the file's fingerprint is one long word */
.bank-lines > li, .bank-line, .bank-recon, .books-sec > * { min-width: 0; }
.bank-sha { overflow-wrap: anywhere; font-family: var(--f-mono); font-size: var(--fs-1); color: var(--c-ink-2); }
/* the text keeps a margin to the window's own edge (DESIGN_LEAD 05:56, DS43); the container is measured inside it, so the bands hold */
.win-crm .books { padding-inline-end: var(--sp-4); }
.bank-recon { display: grid; gap: var(--sp-2); }
.books-billedit thead th:first-child, .books-billedit tbody th { width: 34%; }
.books-billedit td.num { width: 20%; }
@container books-body (max-width: 640px) {
  .bank-line { grid-template-columns: minmax(0, 1fr); }
  .bank-line .btn, .bank-line .ctl-sel, .bank-line select { min-height: 44px; }
  .bank-account select, .bank-account .ctl-sel { flex: 1 1 100%; width: 100%; box-sizing: border-box; }
}
/* my wider tables turn to cards earlier than DESIGN_B's 480 px, by the page's width: the ageing has seven columns (DEPUTY_TESTER 24 Oct
   05:52: a 906 px table in a 490 px page scrolled the window sideways), the bills, a bill's lines, the statements and the matched lines
   five or four, whose names broke mid-word at 490 */
@container books-body (max-width: 960px) {
  .books-t.books-ageing th, .books-t.books-ageing td { overflow-wrap: break-word; }
  .books-t.books-ageing thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .books-t.books-ageing, .books-t.books-ageing tbody, .books-t.books-ageing tfoot { display: block; }
  .books-t.books-ageing tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--line) solid var(--c-line); }
  .books-t.books-ageing :is(th, td) { display: block; padding: 0; border-bottom: 0; }
  .books-t.books-ageing tfoot tr { border-top: var(--line) solid var(--c-ink-2); }
  .books-t.books-ageing tbody th, .books-t.books-ageing tfoot th { grid-column: 1; }
  .books-t.books-ageing td[data-label] { grid-column: 1 / -1; }
  .books-t.books-ageing td[data-label]::before { content: attr(data-label) ": "; color: var(--c-ink-2); }
  .books-t.books-ageing td:empty { display: none; }
  .books-ageing td.num { grid-column: 1 / -1; text-align: left; }
  .books-t.books-ageing tbody:has(+ tfoot) tr:last-child { border-bottom: 0; }
  .books-t.books-ageing tfoot :is(th, td) { border-top: 0; }
}
@container books-body (max-width: 640px) {
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) th, .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) td { overflow-wrap: break-word; }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements), .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) tbody, .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) tfoot { display: block; }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) 0; border-bottom: var(--line) solid var(--c-line); }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) :is(th, td) { display: block; padding: 0; border-bottom: 0; }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) tfoot tr { border-top: var(--line) solid var(--c-ink-2); }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) tbody th, .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) tfoot th { grid-column: 1; }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) td[data-label] { grid-column: 1 / -1; }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) td[data-label]::before { content: attr(data-label) ": "; color: var(--c-ink-2); }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) td:empty { display: none; }
  .books-t:is(.books-bills, .books-matched) tbody tr > :first-child { grid-column: 1; grid-row: 1; }
  .books-t.books-bills td.num, .books-t.books-matched td.num { grid-column: 2; grid-row: 1; }
  .books-t.books-bills td.num::before, .books-t.books-matched td.num::before { content: attr(data-label) " "; color: var(--c-ink-2); }
  .books-t.books-billlines tbody:has(+ tfoot) tr:last-child { border-bottom: 0; }
  .books-t:is(.books-bills, .books-billlines, .books-matched, .books-statements) tfoot :is(th, td) { border-top: 0; }
  .books-t.books-statements td.num, .books-t.books-billlines td.num { grid-column: 1 / -1; text-align: left; }
}
@container books-body (max-width: 480px) {
  .books-bills td.num, .books-matched td.num { grid-column: 2; grid-row: 1; }
  .books-bills td.num::before, .books-matched td.num::before { content: none; }
  .books-statements td.num, .books-billlines td.num, .books-ageing td.num { grid-column: 1 / -1; text-align: left; }
}

/* Mail (email slice 1): a gap under the title bar; a subject is cut after two lines (a very long one never makes a row tower over the rest);
   on a phone (frame 640 px or less) one card per message, the whole card a 44 px link, and Find is 44 px (DEPUTY_UI2 05:01; IDEAS2 05:04, M-1) */
.frame .mail { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.frame .mail .mail-tabs { margin-bottom: var(--sp-2); }
/* SQ-H11 (H2, H8, H9): the find row holds Search and Write; Check mail sits with the count; the date does not wrap; the address is quiet under the name */
.frame .mail .mail-find { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.frame .mail .mail-find .field { flex: 1 1 0; min-width: 0; }
.frame .mail .mail-write-btn { flex: none; }
.frame .mail .mail-statusrow { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin: 0 0 var(--sp-1); }
.frame .mail .mail-statusrow .mail-status { margin: 0; min-width: 0; }
.frame .mail .mail-statusrow .mail-inline { flex: none; }
.frame .mail .mail-statusrow form, .frame .mail .mail-statusrow .btn { flex: none; white-space: nowrap; }
.frame .mail .fusion-doc .fusion-table-w { margin-bottom: var(--sp-3); }
.frame .mail .mail-table td.mail-at { white-space: nowrap; }
.frame .mail .mail-table td.mail-from { min-width: 15em; }
.frame .mail .mail-name { display: block; font-weight: 600; overflow-wrap: anywhere; }
.frame .mail .mail-addr { display: block; font-size: var(--fs-1); color: var(--c-ink-2); overflow-wrap: anywhere; }
.frame .mail .mail-foot { margin: var(--sp-3) 0 var(--sp-1); }
.frame .mail .mail-foot summary { color: var(--c-ink-2); font-size: var(--fs-1); cursor: pointer; min-height: 32px; }
.frame .mail .mail-disc { margin: 0; font-size: var(--fs-1); }
.frame .mail .mail-lead { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 0; padding-top: var(--sp-2); border-top: var(--line) solid var(--c-line); }
.frame .mail .mail-lead .note { flex: 1 1 100%; margin: 0; }
.mail .mail-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.mail .mail-cards { display: none; list-style: none; margin: var(--sp-1) 0; padding: 0; }
@container frame (max-width: 640px) {
  .frame .mail .mail-table { display: none; }
  .frame .mail .mail-cards { display: block; }
  .frame .mail .mail-card { display: block; min-height: 44px; padding: var(--sp-1) 0; border-bottom: var(--line) solid var(--c-line); color: var(--c-ink); text-decoration: none; }
  .frame .mail .mail-card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
  .frame .mail .mail-card-top { display: flex; gap: var(--sp-2); justify-content: space-between; align-items: baseline; }
  .frame .mail .mail-card-from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
  .frame .mail .mail-card-at { flex: none; font-size: var(--fs-1); color: var(--c-ink-2); }
  .frame .mail .mail-card .mail-addr { overflow-wrap: anywhere; }
  /* an address as the main line is never cut at its end (the domain is the part that matters): it wraps instead (DESIGN_A S-1) */
  .frame .mail .mail-card-from.is-addr { white-space: normal; overflow-wrap: anywhere; }
  .frame .mail .mail-find .btn, .frame .mail .mail-find .field input { min-height: 44px; }
}


/* Qaf's Network page (r5 P2; DESIGN_B 24 Oct): what the shared Qaf rules above do not cover. Its team tables are the shared
   .tbl (cards in a narrow room; a stale row is ink-3 by .is-dim and drained by .qaf-dim, never by opacity); .qaf-note, .qaf-empty and the
   states are P11's and P12's. Tokens only, scoped to the window. */
.win-qaf .qaf-network { display: grid; gap: var(--sp-4); }
.win-qaf .qaf-counts { margin: 0; font-weight: var(--w-strong); }
.win-qaf .qaf-look-list, .win-qaf .qaf-seat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
/* scoped to this page's list: the Seats page (P3) has its own .qaf-seat blocks */
.win-qaf .qaf-seat-list .qaf-seat { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-1) var(--sp-3); }
.win-qaf .qaf-seat-name { font-weight: var(--w-strong); }

/* H-S14's held-file question (DESIGN_C, 24 Oct; DESIGN_LEAD 07:57): modal over the Files window, "Do not download" primary and last on a
   computer (Ask the Librarian, Download anyway, then the primary), the primary on top and every button full width on a phone; never red */
.files-held p { margin: 0; }
.files-held-l { margin: var(--sp-2) 0; padding: 0; list-style: none; display: grid; gap: var(--sp-2); }
.files-held-l li { display: block; }
/* the fold names its noun and opens to the kinds past the first three (IDEAS 13:51); a flex summary loses the browser's triangle, so the chevron is drawn as the BOS fold's is (.bos-fold-ic) */
.files-held-more > summary { cursor: pointer; padding: var(--sp-2) 0; min-height: 44px; display: flex; align-items: center; gap: var(--sp-1); list-style: none; color: var(--c-ink-2); }
.files-held-more > summary::-webkit-details-marker { display: none; }
.files-held-more-ic { width: 14px; height: 14px; flex: none; transition: transform var(--dur) var(--ease); }
.files-held-more[open] > summary .files-held-more-ic { transform: rotate(90deg); }
.files-held-at { display: block; margin-top: var(--sp-1); color: var(--c-ink-2); }
.files-held-in { font-family: var(--f-mono); font-size: var(--fs-1); overflow-wrap: anywhere; }
/* (the held file question's acts are the shared .question-acts row: its phone rules are core's, CT18) */

/* Settings > Gateway > Sources (AD-134): one row an app, a padlock for the four that never go out, a question in the row; tokens only */
@layer core {
.gw-never { display: flex; align-items: center; gap: var(--sp-2); }
.gw-never .ic, .gw-lock .ic { flex: none; color: var(--c-ink-2); }
.gw-lock { display: flex; align-items: center; gap: var(--sp-1); color: var(--c-ink-2); }
.gw-row.is-locked .row-title { color: var(--c-ink-2); }
/* the question is the row's last child and takes its full width under the name, never the text column beside the switch (DESIGN_LEAD 09:04) */
.gw-row { flex-wrap: wrap; }
.gw-ask { flex: 1 1 100%; display: grid; gap: var(--sp-2); margin-top: var(--sp-2); padding: var(--sp-3); border-radius: var(--r-m); border: var(--line) solid var(--c-accent); background: var(--c-surface-2); }
.gw-ask > * { min-width: 0; }
.gw-ask .btns { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.gw-row .toggle-form { flex: none; }
}

/* while a question is open in a Sources row the row is no switch: on a phone the shared rule makes the whole row the switch's touch area (its ::before at inset 0, z-index 1) and a tap on the question's buttons landed on the switch (DEPUTY_TESTER 10:10). Unlayered, as the shared rule is (DESIGN_LEAD 10:10) */
.frame .row.gw-row:has(.gw-ask) .toggle::before { content: none; }

/* Policy (governance S1-8; notes/2026-10-24-gov-s1-screens-contract.md PS-4, DESIGN_LEAD 09:25): the Policy window's own few rules, tokens only, scoped to it.
   The pane is the shell's .set frame (core.css); lists are the shared .group of .row; a rule is a section in the in-window card (border, --r-m, no blur and
   no shadow: controls r0 CT16), not the desktop's glass .card. Touch size is the shared rule's, nothing of its own here. */
.set.policy.pol-solo { grid-template-columns: minmax(0, 1fr); }
.win-policy .pol-pane { min-width: 0; }
.win-policy .pol-head { display: grid; gap: var(--sp-1); justify-items: start; }
.win-policy .pol-page { display: grid; gap: var(--sp-3); min-width: 0; }
.win-policy :is(.pol-checks, .pol-rules, .pol-one, .pol-owners, .pol-form) { display: grid; gap: var(--sp-3); align-content: start; min-width: 0; }
.win-policy :is(.pol-checks, .pol-rules, .pol-owners) > p, .win-policy .pol-owners .sub-h { margin: 0; }
.win-policy .pol-rules-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.win-policy .pol-rule { display: grid; gap: var(--sp-2); padding: var(--sp-3); border: var(--line) solid var(--c-line); border-radius: var(--r-m); min-width: 0; }
.win-policy .pol-rule p, .win-policy .pol-rule .sub-h { margin: 0; }
.win-policy .pol-rule-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2); }
.win-policy .pol-source { overflow-wrap: break-word; }
.win-policy .pol-acts { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.win-policy :is(.pol-checks-l, .pol-owners-l, .pol-facts) .row { align-items: flex-start; }
.win-policy :is(.pol-checks-l, .pol-owners-l, .pol-facts) :is(.row-title, .row-note) { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
.win-policy .pol-inline { display: inline; margin: 0; }
.win-policy .pol-error { margin: 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--c-warn, var(--c-ink-2)); background: var(--c-surface-2); }
.win-policy .pol-form { max-width: 60ch; }
.win-policy .pol-test { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) minmax(0, 1fr); gap: var(--sp-2); align-items: start; }
.win-policy .pol-examples ul { margin: 0 0 var(--sp-2); padding-inline-start: var(--sp-5); list-style: disc; }
@container frame (max-width: 640px) { .win-policy .pol-test { grid-template-columns: minmax(0, 1fr); } }

/* Fusion's open-file tabs take the shared tab look (CT12; <.tabs>): ink-2 text, the chosen file ink and strong with the 2 px accent bar; their Close
   stays beside the name, and the row keeps scrolling (its phone rule above) */
.fusion-tab { flex: none; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--ctl); padding-inline: var(--sp-2) 0; white-space: nowrap; scroll-snap-align: end; scroll-margin-inline: var(--sp-5); }
/* (".frame a.row-link { color: inherit }" is more specific than a bare .fusion-tab .row-link, so these name the frame and the a) */
.frame .fusion-tab a.row-link { color: var(--c-ink-2); font-size: var(--fs-3); text-decoration: none; }
.frame .fusion-tab:hover a.row-link { color: var(--c-ink); }
.fusion-tab.is-on { box-shadow: inset 0 -2px 0 var(--c-accent); }
.frame .fusion-tab.is-on a.row-link { color: var(--c-ink); font-weight: var(--w-strong); }
.frame .fusion-tab a.row-link:focus-visible { outline-offset: -2px; }
/* the open-file tabs take a row of their own above the file's tools at every width, one scrolling line with the edge fade of .tabs (DESIGN_LEAD
   07:52: at 1440 they shared a flex line with the tools, got about 520 px, wrapped and squeezed the tools); a long name is cut with an ellipsis (its
   full name is the link's title); the name has room inside its ring */
/* the window's tool line must wrap for the tabs' 100 % basis to give them a row of their own: that was only in the phone block (DESIGN_LEAD 09:08) */
.win-fusion > .win-tools { flex-wrap: wrap; min-width: 0; }
.fusion-tabs { flex: 1 1 100%; order: -1; min-width: 0; display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; overscroll-behavior-x: none; scrollbar-width: none; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(to right, transparent, var(--c-ink) var(--tabs-fl), var(--c-ink) calc(100% - var(--tabs-fr)), transparent); mask-image: linear-gradient(to right, transparent, var(--c-ink) var(--tabs-fl), var(--c-ink) calc(100% - var(--tabs-fr)), transparent); }
.fusion-tabs::-webkit-scrollbar { display: none; }
@supports (animation-timeline: scroll(x self)) { .fusion-tabs { animation: tabs-edge linear both; animation-timeline: scroll(x self); } }
.fusion-tabs > .fusion-sw { flex: none; white-space: nowrap; }
.fusion-tab .row-link { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* on a phone a name gets less room, so part of the next tab always shows and says there are other files open (DESIGN_LEAD 11:16); the full name is the window's
   title and the link's title */
@container frame (max-width: 640px) { .fusion-tab .row-link { max-width: 16ch; } }
.frame .fusion-tab a.row-link { padding-inline: var(--sp-1); }
/* the frame's own ring rule (.frame :is(a, ...):focus-visible, offset 2px) is as specific as a bare .tab:focus-visible and comes later, so the ring was drawn outward and the scrolling row cut it (DEPUTY_TESTER 07:06) */
.frame .tabs a.tab:focus-visible { outline-offset: -2px; }  /* the scrolling row clips an outward ring (DESIGN_LEAD 06:22) */

/* Feedback (FB frozen r2, F-3; slice FB-2): the window steps aside while the page is taken; the still picture, dimmed, with
   its box, the round button (64 px) and Whole page; the cut picture shown in the form */
.feedback-away { visibility: hidden; }
.feedback-pick { position: fixed; inset: 0; z-index: var(--z-ask); display: grid; grid-template-rows: 1fr auto; place-items: center; gap: var(--sp-3);
  padding: var(--sp-3); background: var(--c-surface); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); }  /* tokens only (design gate r8) */
.feedback-pick-view { touch-action: none; cursor: crosshair; max-width: 100%; }
.feedback-pick-note { margin: 0; color: var(--c-ink); text-align: center; }
.feedback-pick-acts { display: flex; align-items: center; gap: var(--sp-4); padding-bottom: env(safe-area-inset-bottom, 0px); }
.feedback-round { width: 64px; height: 64px; border-radius: 50%; border: 4px solid var(--c-accent); background: color-mix(in srgb, var(--c-accent) 25%, transparent); cursor: pointer; }
.feedback-round:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
.feedback-shot { display: block; max-width: 100%; height: auto; border: var(--line) solid var(--c-line); }

/* a campaign's message as each person gets it (P4-3a, D-1 to D-4): its lines kept as written, the end below */
.crm-msg-preview { border: var(--line) solid var(--c-line); padding: var(--sp-3); }
.crm-msg-body { white-space: pre-wrap; }

/* BOS's walk-through (SOS1Web.Round, slice G1): one small window over the desk, above the windows and the dock, below the
   welcome; a bottom sheet above the dock on a phone. A plain page: no script of its own. */
/* a solid face (DESIGN_LEAD T-1, DR25: alpha at least .88; the desk's own text read through the glass): the card's colour without the
   glass, in every look; DESIGN_C's --c-face-solid replaces it when it lands */
.frame .round-win { position: fixed; z-index: var(--z-round); left: 50%; top: 40%; width: min(400px, calc(100vw - 2 * var(--sp-3))); translate: -50% 0; box-shadow: var(--sh-win);
  --c-surface: rgb(var(--g-rgb, 255 255 255)); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* on a computer the card is 400 px so Back, Next, Open it and Close fit one row (S-1), and it stops above the dock and the standing lines
   (T-2, DR3, DR22): the words scroll and the button row stays in view, at the foot or at the top of what is shown */
/* on the solid face the quiet buttons need their own edge and ground to read as buttons (DESIGN_A S-1, DR25), as the Write window's quiet buttons have */
.frame .round-win .btn-quiet { border: var(--line) solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink); }
@media (min-width: 641px) {
  .frame .round-win { top: 22%; max-height: calc(100dvh - 22dvh - var(--note-h) * 2 - 96px - var(--sp-3)); overflow-y: auto; overscroll-behavior: none; }
  .frame .round-win .round-b { position: sticky; top: 0; bottom: 0; background: var(--c-surface); padding-block: var(--sp-1); }
}
.frame .round-h { display: flex; align-items: center; gap: var(--sp-2); margin: 0; font: var(--w-strong) var(--fs-3)/1.3 var(--f-ui); }
.frame .round-t { margin: 0; }
/* the live walk's wrapper (SOS1Web.RoundLive) draws no box of its own; the Topics fold under the buttons */
.frame .round-live { display: contents; }
/* the live region wraps the step line and the words: they keep the card's own gap (DESIGN_A N1, DR10) */
.frame .round-st { display: grid; gap: var(--sp-2); }
.frame .round-topics { margin: var(--sp-2) 0 0; }
.frame .round-topics > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--c-ink-2); font-size: var(--fs-2); }
.frame .round-tl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.frame .round-tl .btn[aria-current="step"] { font-weight: var(--w-strong); }
.frame .round-n { margin: 0; color: var(--c-ink-2); font-size: var(--fs-2); }
.frame .round-b { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0 0; }
@media (max-width: 640px) { .frame .round-win { top: auto; bottom: calc(var(--sp-4) + 72px + env(safe-area-inset-bottom, 0px)); width: calc(100vw - 2 * var(--sp-3)); } }
/* On a phone the standing lines (the key's, a part's, a lost connection's) take a row of the shell's own above the dock
   (PB-11c, below: no room is guessed), and the walk's sheet, fixed over the same place, covered the buttons (DEPUTY_TESTER
   2 Nov 03:01: every button of every stop at 360, 390 and 430 px while the recovery code was unconfirmed, the state of a
   first sign-in, when the offer shows). While a line shows the sheet stands in the desk's own grid area, on its foot, so
   it clears the lines' real row at any wrap (beside the floating button too), any text size and any number of lines;
   on a short screen it keeps inside that area and scrolls (DESIGN_A c-1, n-1, n-2). Without a line it stays as above. */
@container frame (max-width: 640px) { /* desk */
  .frame .os:is(:has(> .os-notes > .key-note:not(.live-down)), :has(.phx-server-error)) > .round-win {
    position: absolute; grid-area: desk; top: auto; bottom: var(--sp-3); max-height: calc(100% - var(--sp-3)); overflow-y: auto; }
  /* the live walk's card sits in its wrapper (SOS1Web.RoundLive; display: contents), so it is the wrapper that is the .os child: the same rule, its own selector */
  .frame .os:is(:has(> .os-notes > .key-note:not(.live-down)), :has(.phx-server-error)) > .round-live > .round-win {
    position: absolute; grid-area: desk; top: auto; bottom: var(--sp-3); max-height: calc(100% - var(--sp-3)); overflow-y: auto; }
}
/* The walk's spots (DESIGN_B stops-missing4-spec 2): while a stop's guide window is in front, the element it talks about, marked
   data-tour="<that stop's id>" in the page, takes the quiet focus line the shell already uses; where the page has no such element
   nothing is drawn. Matched against this fixed list only, never a value from the address. A plain static ring (no motion to reduce). */
.frame:has(.round-win[data-round="opening"]) [data-tour="opening"],
.frame:has(.round-win[data-round="local"]) [data-tour="local"],
.frame:has(.round-win[data-round="sealed"]) [data-tour="sealed"],
.frame:has(.round-win[data-round="choice"]) [data-tour="choice"],
.frame:has(.round-win[data-round="kill"]) [data-tour="kill"],
.frame:has(.round-win[data-round="build"]) [data-tour="build"],
.frame:has(.round-win[data-round="upload"]) [data-tour="upload"],
.frame:has(.round-win[data-round="fusion"]) [data-tour="fusion"],
.frame:has(.round-win[data-round="answers"]) [data-tour="answers"] { outline: 2px solid var(--c-focus); outline-offset: 3px; }
.round-win a[aria-busy="true"] { opacity: .65; cursor: progress; }   /* a stop being fetched (RoundSwap) */
.frame .round-offer { display: grid; gap: var(--sp-2); }
.frame .round-box { margin: 0; }

/* OFFICE, the Tessmere practice walk (1 Nov 2026, AMD visitors): what a visitor sees first after "Load the made-up practice".
   On a phone the Files places had grown to 362 px (Proposals, Team files, Connectors, the Load button) inside a 274 px
   window body, so the file list was 24 px tall: the places keep at most two rows (the rest scroll inside) and the list
   has a floor. */
@container frame (max-width: 640px) {
  .win-files .files { grid-template-rows: auto minmax(5rem, 1fr); }
  .win-files .files-side { max-height: min(7rem, 22dvh); overflow-y: auto; overscroll-behavior: none; }
  /* a PDF's tools were 378 px (the page started under the window's foot): the Structure, Names and History buttons share
     rows, the Names-as-links hint is left for the screen reader (it stays the button's description) while the button is live; when
     it is off the same line is its reason and stays on the screen (IDEAS2 c-1, SENTINEL n-1); the way of
     showing wraps instead of running 6 px past the edge */
  .win-fusion .fusion-tools > :is(.fusion-sw:not(.fusion-find), .btn) { flex: 0 1 auto; }
  .win-fusion .fusion-tools .btn:not(:disabled) + .fusion-names-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .win-fusion .fusion-tools > .seg { display: flex; flex-wrap: wrap; max-width: 100%; }
}
/* a sheet's or CSV's cells keep whole words: with overflow-wrap: anywhere the table shrank below a word ("Therapis t",
   "FICTI ONAL"); a cell is at least 12 characters, the grid scrolls sideways when the window is narrower */
.fusion-grid :is(th, td) { min-width: 12ch; }
.fusion-grid :is(.fusion-grid-n, .fusion-grid-corner) { min-width: 0; }
/* a Markdown file's Both: the two faces side by side only when each has room, else one above the other (in the half-width
   window it was three narrow panes with broken words) */
.fusion-faces.is-both { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* BOS's honeycomb (AD-187 K3; paper bos-button-honeycomb r3a; look and place from DESIGN_A's page v9): the float grows 1.39 x into the cluster's
   centre and sends out one glass hex per item, edge to edge (52 x 60, 4 px gap, centre distance 56), each after the last (30 ms) on the BOS
   spring. A hex is the shell's own glass (surface, edge, blur, accent when lit); the names are chips outside the hexes. Layers: hexes and
   tip on the menus' (40-41), the grown float on 41 (menus 39-41, banner 35, float 34). Every value is a token from glass.css. */
.bos-hive { position: fixed; inset: 0; z-index: var(--z-menu); pointer-events: none; }
.frame a.bos-float.is-grown { z-index: var(--z-menu-top); transform: translate(var(--hx, 0px), var(--hy, 0px)) scale(1.39); transition: transform var(--dur-slow) var(--bounce); }
.bos-hex { position: absolute; width: 52px; height: 60px; display: block; color: var(--c-ink); pointer-events: auto; opacity: 0; text-decoration: none;
  font: var(--w-ctl) var(--fs-1) / 15px var(--f-ui); transform: translate(var(--ox, 0px), var(--oy, 0px)) scale(.35); -webkit-tap-highlight-color: transparent;
  transition: transform var(--dur-slow) var(--bounce), opacity var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 30ms); }
.bos-hive.is-open .bos-hex { opacity: 1; transform: none; }
.bos-hex .hs { position: absolute; inset: 0; filter: drop-shadow(0 4px 8px var(--c-hex-shade)); clip-path: var(--hex-shadow); }
.bos-hex .hs::before { content: ""; position: absolute; inset: 0; background: var(--c-ink); clip-path: var(--hex-out); }
.bos-hex .hx { position: absolute; inset: 0; display: grid; place-items: center; transition: transform var(--dur) var(--ease); }
.bos-hex .hx::before, .bos-hex .hx::after { content: ""; position: absolute; }
.bos-hex .hx::before { inset: 0; background: var(--edge); clip-path: var(--hex-ring); }
.bos-hex .hx::after { inset: 1px; background: var(--c-surface); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass); clip-path: var(--hex-in); transition: background var(--dur) var(--ease); }
.bos-hex .hx .ic { position: relative; z-index: var(--z-part); width: 26px; height: 26px; display: block; }
.bos-hex.is-hot .hx, .bos-hex:focus-visible .hx { transform: scale(1.08); }
.bos-hex.is-hot .hx::after, .bos-hex:focus-visible .hx::after { background-color: var(--c-accent); background-image: linear-gradient(180deg, var(--c-ctl-shine), transparent 55%); }
.bos-hex.is-hot, .bos-hex:focus-visible { color: var(--c-accent-ink); outline: 0; }
.bos-hex:focus-visible .hx { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.bos-hex .hn { position: absolute; padding: 0 var(--sp-1); border-radius: var(--r-s); background: var(--c-surface); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  color: var(--c-ink); white-space: nowrap; opacity: 0; transition: opacity var(--dur) var(--ease); transition-delay: calc(var(--i, 0) * 30ms + 120ms); }
.bos-hive.is-open .bos-hex .hn { opacity: 1; }
.bos-hex .hn.n, .bos-hex .hn.s { left: 50%; transform: translateX(-50%); }
.bos-hex .hn.n { bottom: calc(100% + 2px); } .bos-hex .hn.s { top: calc(100% + 2px); }
.bos-hex .hn.e { left: calc(100% + 6px); top: 22px; } .bos-hex .hn.w { right: calc(100% + 6px); top: 22px; }
.bos-hive.is-compact .hn { display: none; }
.bos-hive-tip { position: absolute; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--c-surface); -webkit-backdrop-filter: var(--glass); backdrop-filter: var(--glass);
  border: var(--line) solid var(--edge); box-shadow: var(--sh-tip); font-size: var(--fs-1); line-height: 1.35; color: var(--c-ink-2); z-index: var(--z-menu-top); pointer-events: none; opacity: 0; transition: opacity var(--dur) var(--ease); }
.bos-hive.is-open .bos-hive-tip { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .bos-hex, .bos-hex .hx, .bos-hex .hx::after, .bos-hex .hn, .bos-hive-tip, .frame a.bos-float.is-grown { transition: none; transition-delay: 0s; }
  .bos-hex { opacity: 1; transform: none; } .bos-hex .hn, .bos-hive-tip { opacity: 1; }
}
@media (forced-colors: active) {
  .bos-hex .hx::before { background: ButtonText; } .bos-hex .hx::after { background: ButtonFace; } .bos-hex .hn, .bos-hive-tip { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; }
  .bos-hex .hs { display: none; }
}

/* The Excel bar above a workbook's grid (MASTER e1f7a715; the class names are the Word bar's, PAPER_WORD 14:27): the bar wraps
   (no overflow), its pickers drop under it, bar and picker opaque; a selected rectangle of cells is outlined and tinted, never
   by colour alone (the first cell keeps its heavier outline) */
.fusion-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-2); padding: var(--sp-1) var(--sp-2); background: var(--c-raised); border: 1px solid var(--c-line, currentColor); border-radius: var(--r-m); position: relative; z-index: var(--z-part-2); }
.fusion-bar-g { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.fusion-bar-b { min-width: 2rem; min-height: 2rem; padding: 0 var(--sp-2); border: 1px solid var(--c-line, currentColor); border-radius: var(--r-s); background: var(--c-raised); color: var(--c-ink); font: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fusion-bar-b:hover, .fusion-bar-b:focus-visible { background: var(--c-chosen, var(--c-raised)); outline: 2px solid var(--c-accent); outline-offset: 1px; }
.fusion-bar-pick { position: relative; }
.fusion-bar-pick > summary { list-style: none; }
.fusion-bar-pick > summary::-webkit-details-marker { display: none; }
.fusion-bar-pop { position: absolute; top: calc(100% + 2px); left: 0; z-index: var(--z-pin); display: flex; flex-wrap: wrap; gap: var(--sp-1); width: max-content; max-width: 16rem; padding: var(--sp-2); background: var(--c-raised); border: 1px solid var(--c-line, currentColor); border-radius: var(--r-m); box-shadow: var(--sh-pop); }
.fusion-bar-sw { width: 1.75rem; height: 1.75rem; border: 1px solid var(--c-line, currentColor); border-radius: var(--r-s); cursor: pointer; padding: 0; }
/* the bar's fixed colours are painted by sos1.js paintLook from data-look-value (no inline style: style-src 'self'; no colour literal here: design gate r8) */
/* a workbook cell's look (sheet.ex look_of): the flags are classes; the two colours and a column's width are painted by sos1.js */
.fusion-grid .xl-b { font-weight: 700; } .fusion-grid .xl-i { font-style: italic; }
.fusion-grid .xl-u { text-decoration: underline; } .fusion-grid .xl-s { text-decoration: line-through; } .fusion-grid .xl-u.xl-s { text-decoration: underline line-through; }
.fusion-grid .xl-left { text-align: left; } .fusion-grid .xl-center { text-align: center; } .fusion-grid .xl-right { text-align: right; }
.fusion-grid .xl-wrap { white-space: normal; overflow-wrap: anywhere; }
.fusion-bar-sw:hover, .fusion-bar-sw:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }
.fusion-bar-seg { min-height: 2rem; padding: 0 var(--sp-2); border: 1px solid var(--c-line, currentColor); border-radius: var(--r-s); background: var(--c-raised); color: var(--c-ink); font: inherit; cursor: pointer; }
.fusion-bar-seg:hover, .fusion-bar-seg:focus-visible { background: var(--c-chosen, var(--c-raised)); outline: 2px solid var(--c-accent); outline-offset: 1px; }
.fusion-grid td.is-range { background: var(--c-accent-soft); outline: 1px solid var(--c-accent); outline-offset: -1px; }
/* The Excel bar (DESIGN_A look spec 1 and 2; scoped to .fusion-bar-xl so the Word bar's block is not touched): 44 px targets, one row
   that scrolls sideways on a phone, sticky under the file row; pressed = tint + 2 px inset bar + strong weight, mixed = dashed outline;
   hover tint only, focus 2 px --c-focus at offset -2, active --c-accent-soft, disabled ink at 45 %. */
.fusion-bar-w { position: sticky; top: 0; z-index: var(--z-pin-pop); flex: none; margin: 0 0 var(--sp-2); }
.fusion-bar-xl { flex-wrap: wrap; gap: var(--sp-3); margin: 0; min-height: 44px; }
.fusion-bar-xl .fusion-bar-g { flex-wrap: nowrap; flex: none; scroll-snap-align: start; padding-right: var(--sp-3); border-right: 1px solid var(--c-line); }
.fusion-bar-xl .fusion-bar-g:last-child { border-right: 0; padding-right: 0; }
.fusion-bar-xl .fusion-bar-b, .fusion-bar-xl .fusion-bar-seg { min-height: 44px; min-width: 44px; white-space: nowrap; }
.fusion-bar-xl .fusion-bar-sw { width: 44px; height: 44px; background-clip: content-box; padding: var(--sp-2); }
.fusion-bar-xl .fusion-bar-b:hover, .fusion-bar-xl .fusion-bar-seg:hover { background: var(--c-chosen, var(--c-raised)); outline: none; }
.fusion-bar-xl .fusion-bar-b:focus-visible, .fusion-bar-xl .fusion-bar-seg:focus-visible, .fusion-bar-xl .fusion-bar-sw:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.fusion-bar-xl .fusion-bar-sw:hover { outline: none; border-color: var(--c-ink); }
.fusion-bar-xl .fusion-bar-b:active, .fusion-bar-xl .fusion-bar-seg:active { background: var(--c-accent-soft); }
.fusion-bar-xl .fusion-bar-b[aria-pressed="true"] { background: var(--c-chosen, var(--c-raised)); box-shadow: inset 0 -2px 0 var(--c-accent); font-weight: var(--w-strong); }
.fusion-bar-xl .fusion-bar-b[aria-pressed="mixed"] { background: var(--c-raised); outline: 1px dashed var(--c-ink); outline-offset: -3px; }
.fusion-bar-xl .fusion-bar-b:disabled, .fusion-bar-xl .fusion-bar-b[disabled] { color: color-mix(in srgb, var(--c-ink) 45%, transparent); cursor: default; background: var(--c-raised); }
.fusion-bar-xl .fusion-bar-segs { display: flex; border: 1px solid var(--c-line); border-radius: var(--r-s); overflow: hidden; }
.fusion-bar-xl .fusion-bar-segs .fusion-bar-b { border: 0; border-radius: 0; border-right: 1px solid var(--c-line); }
.fusion-bar-xl .fusion-bar-segs .fusion-bar-b:last-child { border-right: 0; }
.fusion-bar-xl .fusion-bar-pop { background: var(--c-face-solid-raised); max-height: 60vh; overflow-y: auto; max-width: min(16rem, calc(100vw - 2 * var(--sp-3))); }
.fusion-bar-why { margin: var(--sp-1) 0 0; font-size: var(--fs-2); color: var(--c-ink-2); }
.fusion-bar-w .fusion-bar-xl::after { content: ""; flex: none; width: 1px; }
/* a phone: one row that scrolls sideways (groups never split, never a second row); its pickers are a sheet over the window's foot, which a scrolling bar cannot clip */
/* DESIGN_A 13:37 (look decision on the 390 Excel bar): where the bar scrolls sideways its buttons fade out toward the edge that has more, 24 px,
   a mask so it sits on the window's glass (no cover colour); no fade at an edge with nothing more that way. A scroll timeline decides: the
   left stop is 0 at rest, 24 px once scrolled; the right stop is 24 px until the end, 0 at the end. The fade is only in the phone rule (600 px and under), where the bar scrolls: a mask clips what hangs outside the bar, which would cut the pickers the
   wider bar opens below itself, so there it is never on; an open picker lifts it here too. Where scroll timelines are not supported there is NO fade at all (a
   permanent right fade would dim the last button for ever; Firefox has no hint). Keyboard focus in the bar lifts the mask, so a focus ring
   at the edge stays whole. Reduce motion (.look-a.still stops every animation) would stop this one too, and it is a state, not movement: the
   one rule in the person layer (next to the Reduce motion blanket, whose !important sits in that layer and beats any unlayered rule) keeps it. */
@property --fusion-bar-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fusion-bar-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes fusion-bar-edge { 0% { --fusion-bar-l: 0px; --fusion-bar-r: 24px; } 4% { --fusion-bar-l: 24px; --fusion-bar-r: 24px; } 96% { --fusion-bar-l: 24px; --fusion-bar-r: 24px; } 100% { --fusion-bar-l: 24px; --fusion-bar-r: 0px; } }
@media (max-width: 600px) { .fusion-bar-xl { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scroll-padding-inline-start: var(--sp-2); } .fusion-bar-xl .fusion-bar-pick { position: static; } .fusion-bar-xl .fusion-bar-pop { position: fixed; left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); top: auto; width: auto; max-width: none; } .fusion-bar-xl .fusion-bar-pop .fusion-bar-seg { flex: 1 0 100%; text-align: left; } @supports (animation-timeline: scroll()) { .fusion-bar-xl { animation: fusion-bar-edge linear both; animation-timeline: scroll(self inline); mask-image: linear-gradient(to right, transparent 0, var(--c-ink) var(--fusion-bar-l), var(--c-ink) calc(100% - var(--fusion-bar-r)), transparent 100%); } .fusion-bar-xl:has(:focus-visible, details[open]) { mask-image: none; } } }
/* in the dark theme a cell with its own text colour and no fill gets a light ground, as Excel's white (DESIGN_A M-8): black or dark blue ink on the dark surface fails 4.5:1 */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="bright"]) .fusion-grid td[data-ink="dark"]:not([data-fill]) { background-color: #ffffff; } :root:not([data-theme="light"]):not([data-theme="bright"]) .fusion-grid td[data-ink="dark"]:not([data-fill]).is-sel { box-shadow: inset 0 0 0 3px #000000; } }
:root[data-theme="dark"] .fusion-grid td[data-ink="dark"]:not([data-fill]) { background-color: #ffffff; } :root[data-theme="dark"] .fusion-grid td[data-ink="dark"]:not([data-fill]).is-sel { box-shadow: inset 0 0 0 3px #000000; }
@media (max-width: 600px) { .fusion-bar { gap: var(--sp-1); } .fusion-bar-pop { max-width: 12rem; } }
/* ---- Fusion: Start a new file (PAPER_FUSION, Fusion editors; DESIGN_A look spec section 6) ----
   cards: 2 columns on a phone, 3 from 840, 4 from 1440; a card is a button of its own form, about 96 px tall, so a thumb and a
   key both hit it; the kind's glass icon at 48 px, its name strong, its extension under it */
.fusion-new { margin-top: var(--sp-4); }
.fusion-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 840px) { .fusion-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .fusion-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fusion-cards .fusion-card-form { display: flex; margin: 0; }
.fusion-cards .fusion-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--sp-1); box-sizing: border-box; width: 100%; height: auto; min-height: 96px; padding: var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-m); background: var(--c-surface); color: var(--c-ink); font-weight: var(--w-strong); text-align: left; cursor: pointer; }
.fusion-cards .fusion-card:hover { background: var(--c-surface-2); }
.fusion-cards .fusion-card:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.fusion-card .fusion-card-ic { order: -1; width: 48px; height: 48px; flex: none; }
.fusion-card .fusion-card-ext { font-size: var(--fs-1); font-weight: normal; color: var(--c-ink-2); }
@media (forced-colors: active) {
  .fusion-cards .fusion-card { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
  .fusion-cards .fusion-card:focus-visible { outline-color: Highlight; }
}

/* ---- Fusion: Save as (PAPER_FUSION, Fusion editors; DESIGN_A look spec section 6) ----
   an in-window panel: Name, Save to as a list of folders (a radio group, so the arrow keys move through it), New folder, the tick, Save and Cancel */
.fusion-saveas-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); max-width: 480px; }
.fusion-saveas-form .note { margin: 0; }
.fusion-saveas-tree { margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-m); min-width: 0; max-height: 240px; overflow: auto; }
.fusion-saveas-tree legend { padding: 0 var(--sp-1); font-weight: var(--w-strong); }
.fusion-saveas-folder, .fusion-saveas-tick { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; }
.fusion-sa-d0 { padding-left: 0; }
.fusion-sa-d1 { padding-left: var(--sp-4); }
.fusion-sa-d2 { padding-left: var(--sp-6); }
.fusion-saveas-done { font-weight: var(--w-strong); }
.fusion-saveas-said { color: var(--c-danger, var(--c-ink)); font-weight: var(--w-strong); }

/* ---- Fusion: the window opens to its document (PAPER_FUSION, Fusion editors; DESIGN_A look spec section 6) ----
   a Word page: the sheet's width plus the desk and window around it (88 px), not under 520 px, not over 90% of the desktop;
   a spreadsheet: 90% across and 70% down. These are the window's first size: a size the person kept (Places, a rule with more
   weight) and a window in a narrow room (it fills the room) both win. A video keeps its own fit (sos1.js FusionVideoFit). */
@container frame (min-width: 840px) {
  .os-desk > .win-fusion:where(:has(.fusion-pgw-320)) { width: min(90%, max(520px, 408px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-360)) { width: min(90%, max(520px, 448px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-400)) { width: min(90%, max(520px, 488px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-440)) { width: min(90%, max(520px, 528px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-480)) { width: min(90%, max(520px, 568px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-520)) { width: min(90%, max(520px, 608px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-560)) { width: min(90%, max(520px, 648px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-600)) { width: min(90%, max(520px, 688px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-640)) { width: min(90%, max(520px, 728px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-680)) { width: min(90%, max(520px, 768px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-720)) { width: min(90%, max(520px, 808px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-760)) { width: min(90%, max(520px, 848px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-800)) { width: min(90%, max(520px, 888px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-840)) { width: min(90%, max(520px, 928px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-880)) { width: min(90%, max(520px, 968px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-920)) { width: min(90%, max(520px, 1008px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-960)) { width: min(90%, max(520px, 1048px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1000)) { width: min(90%, max(520px, 1088px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1040)) { width: min(90%, max(520px, 1128px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1080)) { width: min(90%, max(520px, 1168px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1120)) { width: min(90%, max(520px, 1208px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1160)) { width: min(90%, max(520px, 1248px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1200)) { width: min(90%, max(520px, 1288px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1240)) { width: min(90%, max(520px, 1328px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1280)) { width: min(90%, max(520px, 1368px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1320)) { width: min(90%, max(520px, 1408px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1360)) { width: min(90%, max(520px, 1448px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1400)) { width: min(90%, max(520px, 1488px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1440)) { width: min(90%, max(520px, 1528px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1480)) { width: min(90%, max(520px, 1568px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1520)) { width: min(90%, max(520px, 1608px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1560)) { width: min(90%, max(520px, 1648px)); }
  .os-desk > .win-fusion:where(:has(.fusion-pgw-1600)) { width: min(90%, max(520px, 1688px)); }
  .os-desk > .win-fusion:where(:has(.fusion-grid-w)) { width: 90%; height: min(70cqh, 100%); }
  /* Save as is a small form: a compact window, 560 px, as tall as it needs and not over 70% of the desktop (DESIGN_A S-1) */
  .os-desk > .win-fusion:where(:has(.fusion-saveas)) { width: min(100%, 560px); height: auto; max-height: min(70cqh, 100%); }
}

/* Calendar day cells are targets, and the pressed day opens its panel (Pavel 2 Nov 09:1x: "calendar days clickable and
   highlightable ... the cells themselves"; DESIGN_A look spec 09:14). Month only: the whole cell opens its day on a mouse too (the
   number's link covers the cell, as it did on a touch screen); its entries stay their own targets above it. Hover and keyboard
   focus tint the cell, the selected cell (its panel is open) carries three marks, a tint, a 2 px outline and a bar along its top
   edge, so it never rests on colour alone; today's disc stays on the number, so the two read apart. */
.win-calendar .cal-day { position: relative; cursor: pointer; }
.win-calendar .cal-day .cal-num::after { content: ""; position: absolute; inset: 0; }
.win-calendar .cal-day .cal-e { position: relative; z-index: var(--z-part); }
.win-calendar .cal-day:hover { background: color-mix(in srgb, var(--c-accent-soft) 50%, transparent); }
.win-calendar .cal-day.is-other:hover { background: color-mix(in srgb, var(--c-accent-soft) 35%, var(--c-surface-2)); }
.win-calendar .cal-day:active { background: var(--c-accent-soft); }
.win-calendar .cal-day:has(:focus-visible) { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.win-calendar .cal-day .cal-num:focus-visible { outline: none; }
.win-calendar .cal-day.is-selected,
.win-calendar .cal-day.is-selected.is-other { background: var(--c-accent-soft); outline: 2px solid var(--c-accent); outline-offset: -2px; box-shadow: inset 0 4px 0 var(--c-accent); }
@media (forced-colors: active) {
  .win-calendar .cal-day.is-selected { outline: 2px solid Highlight; box-shadow: none; border-top: 4px solid Highlight; }
}
/* the day panel: the entry panel's own slot (a side column) while there is room; on a narrow window it is a sheet stuck to the
   bottom of the calendar's scroll, so the month and its marked cell stay in view above it (CSS only, no script) */
.win-calendar .cal-body.has-day { display: grid; grid-template-columns: minmax(0, 1fr) var(--pane-calendar-side, 300px); gap: var(--sp-3); align-items: start; position: relative; }
.win-calendar .cal-daypanel .cal-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); }
.win-calendar .cal-daypanel .cal-day-new { min-height: 44px; }
@media (max-width: 840px) {
  .win-calendar .cal-body.has-day { grid-template-columns: minmax(0, 1fr); }
  .win-calendar .cal-body.has-day .cal-daypanel { position: static; z-index: var(--z-part-2); max-height: min(40vh, 15rem); overflow-y: auto;
    background: rgb(var(--g-rgb, 255 255 255)); border-radius: var(--r-m) var(--r-m) 0 0;
    box-shadow: var(--sh-pop); }
  /* the sheet sticks to the bottom only where the desk has room for it and the month both (large text on a phone leaves a window
     of about 400 px: there the sheet is a plain block after the month, a scroll away, and the page still opens at the marked cell) */
  @container (min-height: 520px) {
    .win-calendar .cal-body.has-day .cal-daypanel { position: sticky; bottom: 0; }
  }
  /* the month beside the sheet is compact: a cell is its number, and a dot says the day has entries (the sheet lists the pressed
     day's; the others open by their own press), so six weeks and the sheet fit one phone window with the marked cell in view */
  .win-calendar .cal-body.has-day .cal-day { height: 44px; padding-bottom: 0; }
  /* the page opens scrolled to the marked cell (its number's link ends in #cal-selected), so the sheet never hides it */
  .win-calendar .cal-day.is-selected { scroll-margin-top: var(--sp-2); scroll-margin-bottom: 16rem; }
  .win-calendar .cal-body.has-day .cal-day :is(.cal-e, .cal-more) { display: none; }
  .win-calendar .cal-body.has-day .cal-day:has(.cal-e)::after { content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px;
    margin-left: -3px; border-radius: var(--r-pill); background: var(--c-accent); }
  /* today is a round disc of the number's size at this width too (it was a tall pill: the solid fill drawn into a 44 px box) */
  .win-calendar .cal-day .cal-num { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .frame .win-calendar .cal-day.is-today .cal-num { background: radial-gradient(circle closest-side, var(--c-accent) 0 calc(.8em + 2px), transparent calc(.8em + 3px)); border-radius: 0; }
  /* the controls that change the view step aside while the sheet is open (as an entry's whole-screen pane does), so the month and its
     marked cell sit above the sheet; the arrows, the period and Today stay, and Close brings the rest back */
  .win-calendar:has(.cal-body.has-day) .cal-tools > :is(.cal-new, .cal-view) { display: none; }
}

/* ---- Fusion: Add picture, the form fragment (PAPER_FUSION for PAPER_WORD's Word bar; DESIGN_A look spec 6) ---- */
.fusion-picadd { margin: 0; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--c-line); border-radius: var(--r-m); min-width: 0; display: grid; gap: var(--sp-2); }
.fusion-picadd legend { padding: 0 var(--sp-1); font-weight: var(--w-strong); }
.fusion-pic-from { font-weight: var(--w-strong); }
.fusion-pic-off { display: grid; gap: var(--sp-1); }
.fusion-pic-off .fusion-pic-from { opacity: .45; }
.fusion-pic-list { display: grid; gap: 0; max-height: 240px; overflow: auto; min-width: 0; }
.fusion-pic-item { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); min-height: 44px; }
.fusion-pic-where { margin: 0; }
/* DEPUTY_TESTER 3 Nov 00:19 item 1: two columns from 641 px, so the whole popover (about 270 px) and its button are in the window at rest, not 448 px of it hanging off:
   left the pictures in Files and From this computer, right the description and the note, the button's row across the foot */
/* one column at every width (DESIGN_A 11:31, 1; DEPUTY_TESTER 11:29, 1 to 7): the note, the list, From this computer, Describe, in a body that scrolls inside the popover, and the
   Add picture row as the popover's own foot outside that scroll, so nothing is ever under it (DESIGN_A 14:13 A; DEPUTY_TESTER 14:09 A). The width is set here because the base
   popover caps its own at 26rem; the height leaves room at 1440x900 for the whole form at rest */
.fusion-bar-pic { width: min(26rem, 90vw); max-width: min(26rem, 90vw); max-height: min(70vh, 30rem); padding: 0; overflow: hidden; gap: 0; scroll-margin-bottom: var(--sp-3); }
.fusion-bar-pic-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); }
/* one box, one name (DESIGN_A 2 Nov 18:21 M-2): the fragment's own frame and legend go inside the popover; the summary names the group */
.fusion-bar-pic .fusion-picadd { border: 0; padding: 0; border-radius: 0; }
.fusion-bar-pic .fusion-picadd legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
/* one scroller (DESIGN_LEAD 15:00 W-1, DR36): the body scrolls, the list inside it does not */
.fusion-bar-pic .fusion-pic-list { max-height: none; overflow: visible; }
/* item 3: the radio's whole row is the target, 44 px, not the 38 of its label */
.fusion-bar-pic .fusion-pic-item .chk { min-height: 44px; }
/* the button never scrolls away and never covers anything: its own row below the scrolling body, opaque as the popover is */
.fusion-bar-pic-go { flex: none; padding: var(--sp-2); background: var(--c-face-solid-raised); border-top: 1px solid var(--c-line); }
.fusion-bar-pic-go .btn { background: var(--c-accent); color: var(--c-accent-ink); border: 0; }
/* DEPUTY_TESTER 19:02: touch size (items 2, 3, 4), the refusal inside the popover (6) */
.fusion-bar-pic .btn, .fusion-bar-pic .fpick-l, .fusion-bar-pic .fpick-i { min-height: 44px; }
.fusion-bar-pic-said, .fusion-bar-pic-where { margin: 0; }
.fusion-bar-pic-said { color: var(--c-ink); font-weight: var(--w-strong); }
/* a phone's picker sits in the flow (the bar's own narrow rule), scrolls inside itself at half the screen, and its Add picture row stays at its foot (DESIGN_A 3) */
@media (max-width: 640px) { .fusion-bar-pic { width: auto; max-width: none; max-height: min(50vh, 22rem); } }
/* the refusal stays at the top of the picker whatever its scroll, so it is in view where the person pressed (DESIGN_A 4) */
.fusion-bar-pic-said { position: sticky; top: calc(-1 * var(--sp-2)); z-index: var(--z-part); margin: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-2)) 0; padding: var(--sp-2); background: var(--c-face-solid-raised); }
/* Ask BOS (Pavel 2 Nov 12:3x via MASTER 79e1c5f8; DESIGN_A look 12:50): an outline hex, the bar buttons' own weight and ink, first in the bar and set
   apart from the three window controls by a gap and a hairline; shown only in the front window, never BOS's own, and only while the floating
   button is on the page (BOS on, not hidden); a phone keeps it beside Close */
.win-btns > .win-askbos { display: none; position: relative; margin-right: var(--sp-2); color: var(--c-ink-2); }
.frame:has(#bos-float) .win:not(.is-behind):not([data-app="bos"]) .win-btns > .win-askbos { display: inline-grid; }
.win-askbos::after { content: ""; position: absolute; top: 25%; bottom: 25%; right: calc(var(--sp-2) / -2 - .5px); width: 1px; background: var(--c-line); }
.win-askbos .ask-hex { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.win-askbos:hover { color: var(--c-ink); }
.win-askbos:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.win-askbos:active { background-image: linear-gradient(var(--c-accent-soft), var(--c-accent-soft)); }
@media (max-width: 840px) {
  .win-btns > .win-askbos { width: 44px; height: 44px; }
  /* on a phone the title gives way (an ellipsis) to the buttons, never the buttons to the title (DESIGN_A look 12:50, point 3) */
  .win-title:has(.win-askbos) h2 { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}
/* wait-hex: the calm Semurg hex shown while a person waits (DESIGN_A, 2 Nov 2026; MASTER task MSG-20261102-122836-MASTER-9c8bef1e).
   One inline SVG, CSS only (no script, no video, no inline style: sizes are classes). Decorative: aria-hidden; the words next to it say what is waited for. */
@keyframes wh-morph-o {
  0% { d: path("M60.0,10.0 C74.4,18.3 88.9,26.7 103.3,35.0 C103.3,51.7 103.3,68.3 103.3,85.0 C88.9,93.3 74.4,101.7 60.0,110.0 C45.6,101.7 31.1,93.3 16.7,85.0 C16.7,68.3 16.7,51.7 16.7,35.0 C31.1,26.7 45.6,18.3 60.0,10.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  20% { d: path("M60.0,10.0 C74.7,10.0 96.7,5.0 104.0,20.0 C111.3,35.0 111.3,85.0 104.0,100.0 C96.7,115.0 74.7,110.0 60.0,110.0 C45.3,110.0 23.3,115.0 16.0,100.0 C8.7,85.0 8.7,35.0 16.0,20.0 C23.3,5.0 45.3,10.0 60.0,10.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  40% { d: path("M60.0,13.0 C73.6,13.0 93.9,24.8 100.7,36.5 C107.5,48.2 107.5,71.8 100.7,83.5 C93.9,95.2 73.6,107.0 60.0,107.0 C46.4,107.0 26.1,95.2 19.3,83.5 C12.5,71.8 12.5,48.2 19.3,36.5 C26.1,24.8 46.4,13.0 60.0,13.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  60% { d: path("M60.0,10.0 C67.3,12.0 74.4,35.5 82.0,50.0 C89.7,64.9 107.9,88.8 106.0,98.0 C100.6,104.8 75.3,98.0 60.0,98.0 C44.7,98.0 19.4,104.8 14.0,98.0 C12.1,88.8 30.3,64.9 38.0,50.0 C45.6,35.5 52.7,12.0 60.0,10.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  80% { d: path("M60.0,5.0 C71.3,14.2 82.5,23.3 93.8,32.5 C93.8,50.8 93.8,69.2 93.8,87.5 C82.5,96.7 71.3,105.8 60.0,115.0 C48.7,105.8 37.5,96.7 26.2,87.5 C26.2,69.2 26.2,50.8 26.2,32.5 C37.5,23.3 48.7,14.2 60.0,5.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  100% { d: path("M60.0,10.0 C74.4,18.3 88.9,26.7 103.3,35.0 C103.3,51.7 103.3,68.3 103.3,85.0 C88.9,93.3 74.4,101.7 60.0,110.0 C45.6,101.7 31.1,93.3 16.7,85.0 C16.7,68.3 16.7,51.7 16.7,35.0 C31.1,26.7 45.6,18.3 60.0,10.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
}
@keyframes wh-morph-i {
  0% { d: path("M60.0,20.0 C71.5,26.7 83.1,33.3 94.6,40.0 C94.6,53.3 94.6,66.7 94.6,80.0 C83.1,86.7 71.5,93.3 60.0,100.0 C48.5,93.3 36.9,86.7 25.4,80.0 C25.4,66.7 25.4,53.3 25.4,40.0 C36.9,33.3 48.5,26.7 60.0,20.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  20% { d: path("M60.0,20.0 C71.7,20.0 89.3,16.0 95.2,28.0 C101.1,40.0 101.1,80.0 95.2,92.0 C89.3,104.0 71.7,100.0 60.0,100.0 C48.3,100.0 30.7,104.0 24.8,92.0 C18.9,80.0 18.9,40.0 24.8,28.0 C30.7,16.0 48.3,20.0 60.0,20.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  40% { d: path("M60.0,22.4 C70.9,22.4 87.1,31.8 92.6,41.2 C98.0,50.6 98.0,69.4 92.6,78.8 C87.1,88.2 70.9,97.6 60.0,97.6 C49.1,97.6 32.9,88.2 27.4,78.8 C22.0,69.4 22.0,50.6 27.4,41.2 C32.9,31.8 49.1,22.4 60.0,22.4 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  60% { d: path("M60.0,20.0 C65.9,21.6 71.5,40.4 77.6,52.0 C83.8,63.9 98.3,83.0 96.8,90.4 C92.5,95.8 72.3,90.4 60.0,90.4 C47.7,90.4 27.5,95.8 23.2,90.4 C21.7,83.0 36.2,63.9 42.4,52.0 C48.5,40.4 54.1,21.6 60.0,20.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  80% { d: path("M60.0,16.0 C69.0,23.3 78.0,30.7 87.0,38.0 C87.0,52.7 87.0,67.3 87.0,82.0 C78.0,89.3 69.0,96.7 60.0,104.0 C51.0,96.7 42.0,89.3 33.0,82.0 C33.0,67.3 33.0,52.7 33.0,38.0 C42.0,30.7 51.0,23.3 60.0,16.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
  100% { d: path("M60.0,20.0 C71.5,26.7 83.1,33.3 94.6,40.0 C94.6,53.3 94.6,66.7 94.6,80.0 C83.1,86.7 71.5,93.3 60.0,100.0 C48.5,93.3 36.9,86.7 25.4,80.0 C25.4,66.7 25.4,53.3 25.4,40.0 C36.9,33.3 48.5,26.7 60.0,20.0 Z"); animation-timing-function: cubic-bezier(.45,0,.55,1); }
}
@keyframes wh-bounce {
  0%   { transform: translateY(0) scale(1.045, 0.955); }
  18%  { transform: translateY(-3px) scale(0.99, 1.01); }
  50%  { transform: translateY(-7px) scale(0.985, 1.015); }
  82%  { transform: translateY(-3px) scale(0.995, 1.005); }
  100% { transform: translateY(0) scale(1.045, 0.955); }
}
@keyframes wh-shadow { 0%, 100% { transform: scale(1.04, 1); opacity: .34; } 50% { transform: scale(0.8, 0.9); opacity: .2; } }
@keyframes wh-pulse { 0%, 100% { opacity: .72; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.06); } }
.wait-hex { display: inline-block; width: 120px; height: 120px; flex: none; }
.wait-hex-s { width: 40px; height: 40px; }
.wait-hex-m { width: 72px; height: 72px; }
.wait-hex-l { width: 160px; height: 160px; }
.wait-hex .wh-o { animation: wh-morph-o 20s linear infinite both; d: path("M60.0,10.0 C74.4,18.3 88.9,26.7 103.3,35.0 C103.3,51.7 103.3,68.3 103.3,85.0 C88.9,93.3 74.4,101.7 60.0,110.0 C45.6,101.7 31.1,93.3 16.7,85.0 C16.7,68.3 16.7,51.7 16.7,35.0 C31.1,26.7 45.6,18.3 60.0,10.0 Z"); }
.wait-hex .wh-i { animation: wh-morph-i 20s linear infinite both; d: path("M60.0,20.0 C71.5,26.7 83.1,33.3 94.6,40.0 C94.6,53.3 94.6,66.7 94.6,80.0 C83.1,86.7 71.5,93.3 60.0,100.0 C48.5,93.3 36.9,86.7 25.4,80.0 C25.4,66.7 25.4,53.3 25.4,40.0 C36.9,33.3 48.5,26.7 60.0,20.0 Z"); }
.wait-hex .wh-b { animation: wh-bounce 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.wait-hex .wh-s { animation: wh-shadow 3.6s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
.wait-hex .wh-p { animation: wh-pulse 5.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: reduce) {
  .wait-hex .wh-o, .wait-hex .wh-i, .wait-hex .wh-b, .wait-hex .wh-s, .wait-hex .wh-p { animation: none; }
}
@media print { .wait-hex { display: none; } }

/* where the hex stands (DEPUTY_UI2 wiring of DESIGN_A's spec, 2 Nov 2026). Under a second of waiting nothing shows: .wait-late holds
   the picture back for 1 s (a flash of animation is worse than none). Each size has its slot from the start, so the words never move. */
@keyframes wh-late { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.wait-late { display: inline-block; line-height: 0; animation: wh-late .01s linear 1s both; }
.wait-slot { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; }
.wait-slot-m { width: 72px; height: 72px; }
.wait-slot-l { width: 160px; height: 160px; }
.wait-line { display: flex; align-items: center; gap: var(--sp-2); min-height: 40px; margin: 0; }
.wait-work { display: flex; align-items: center; gap: var(--sp-3); min-height: 72px; margin: 0; }
.wait-gate { display: grid; justify-items: center; gap: var(--sp-2); padding: var(--sp-3); text-align: center; font-style: normal; }
.msg-thinking.wait-gate .msg-place { margin: 0; font-size: var(--fs-2); }
/* the slow-answer note: the card of the recovery notice (surface, 1 px edge, pop shadow), a glyph, the words, a close; it takes itself away
   after 10 s by the stylesheet alone, and that clock waits while the pointer or focus is on it (people read slowly) */
@keyframes wn-gone { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.wait-note { position: sticky; bottom: var(--sp-3); z-index: var(--z-lift); display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) auto 0;
  width: fit-content; max-width: min(100%, 30rem); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); border-radius: var(--r-m);
  background: var(--c-surface); border: var(--line) solid var(--edge); box-shadow: var(--sh-pop); color: var(--c-ink); font-size: var(--fs-2);
  animation: wn-gone .15s ease 10s forwards; }
.wait-note:is(:hover, :focus-within) { animation-play-state: paused; }
.wait-note > p { margin: 0; padding-block: var(--sp-2); min-width: 0; }
.wait-note-x.ibtn { width: 44px; height: 44px; color: var(--c-ink-2); }
.wait-note-x:hover { color: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { .wait-note { animation-duration: .01s; } }
/* the note's 10 s is an animation, and the stylesheet's two blanket rules (the log's children under reduced motion, and the app's own
   Reduce motion setting) switch animations off: the note would never go. This one keeps only the delayed disappearance, a step with no
   movement (DEPUTY_TESTER F2) */
/* both blanket rules sit in @layer person, and an !important rule in an earlier layer beats one outside it, so these are in it too */
@layer person {
  @media (prefers-reduced-motion: reduce) { .bos-msgs > .wait-note { animation: wn-gone .01s linear 10s forwards !important; } }
  .look-a.still .wait-note { animation: wn-gone .01s linear 10s forwards !important; }
  /* the shorthand above resets the play state, so the pause while the pointer or focus is on the note is said again here (LOCK2 S-1, WCAG 2.2.1) */
  .bos-msgs > .wait-note:is(:hover, :focus-within), .look-a.still .wait-note:is(:hover, :focus-within) { animation-play-state: paused !important; }
}
/* in a phone-width window it stays in the flow, after the last line, so it never covers "Stop answering" (DEPUTY_TESTER F3) */
@media (max-width: 840px) { .wait-note { position: static; } }

/* Files, 3 Nov (Pavel on Chicago 0.9.7): a sheet's first rows in the preview as a grid, the first row as its heads; it scrolls across when the pane is narrow */
.preview-grid-box { display: grid; gap: var(--sp-1); min-width: 0; }
.preview-grid { border-collapse: collapse; font-size: var(--fs-1); min-width: 0; }
.preview-grid caption { caption-side: top; text-align: left; padding-bottom: var(--sp-1); color: var(--c-ink-2); font-weight: var(--w-strong); }
.preview-grid :is(th, td) { padding: var(--sp-1) var(--sp-2); border: var(--line) solid var(--c-line); text-align: left; white-space: nowrap; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; }
.preview-grid th { background: var(--c-surface); font-weight: var(--w-strong); }
.preview-words:has(.preview-grid) { overflow: auto; }
/* the grid box scrolls sideways in a narrow pane: a shadow on each cut edge says there is more (DESIGN_A 11:54, point 2); a focus ring for the keyboard */
.preview-words:has(.preview-grid) {
  --pv-cue: color-mix(in srgb, var(--c-ink) 22%, transparent);
  background:
    linear-gradient(to right, var(--c-surface-2) 30%, transparent) left center / 2rem 100% no-repeat local,
    linear-gradient(to left, var(--c-surface-2) 30%, transparent) right center / 2rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--pv-cue), transparent) left center / 0.6rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--pv-cue), transparent) right center / 0.6rem 100% no-repeat scroll,
    var(--c-surface-2);
}
.preview-words:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 1px; }
/* ---- Fusion's one compact header (Build Plan G, 0.9.8; DESIGN_LEAD C1-C9, DESIGN_A CS10) ---------------------------------------
   One row (the main slot, Find, Save as, "..."), then one status line. The window is its own container: "narrow" is the window's
   width, not the screen's (DESIGN_LEAD 12:24). Last in the file so it wins over the wrapping rules above. */
.win-fusion { container: fwin / inline-size; }
.win-fusion .fusion-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-1) var(--sp-2); min-width: 0; }
.win-fusion .fusion-tools > * { min-width: 0; max-width: none; flex: 0 0 auto; }
.win-fusion .fusion-tools > .fusion-find { flex: 1 1 14rem; max-width: 24rem; display: flex; align-items: center; gap: var(--sp-1); }
.win-fusion .fusion-tools > .fusion-find .field { flex: 1 1 auto; min-width: 16ch; }
.win-fusion .fusion-more { margin-left: auto; }
.win-fusion .fusion-find-open, .win-fusion .fusion-find-close, .win-fusion .fusion-pickd { display: none; }
.win-fusion .fusion-status { margin: 0; flex: 1 1 100%; font-size: var(--fs-1); color: var(--c-ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); }
.win-fusion .fusion-status .fusion-case { margin: 0; }
/* the "..." menu: groups split by a rule, scrolling inside itself, never past the tab bar */
.win-fusion .fusion-more-list { min-width: 15rem; max-height: min(60vh, 24rem); overflow-y: auto; }
.win-fusion .fusion-more-list .menu-grp + .menu-grp { border-top: 1px solid var(--c-line); margin-top: var(--sp-1); padding-top: var(--sp-1); }
.win-fusion .fusion-more-list .menu-form { display: block; margin: 0; }
.win-fusion .fusion-more-list .menu-form > .menu-i, .win-fusion .fusion-pick-list .menu-i { width: 100%; }
.win-fusion .menu-check, .win-fusion .fusion-pick-list .menu-i { display: flex; align-items: center; gap: var(--sp-2); }
.win-fusion .menu-check > span:not(.menu-tick):not(:first-child), .win-fusion .fusion-pick-list .menu-i > span:first-child { flex: 1 1 auto; text-align: left; }
.win-fusion .menu-tick { flex: 0 0 1.25rem; margin-left: auto; display: inline-flex; justify-content: flex-end; }
.win-fusion .fusion-more-list .menu-note { margin: 0 var(--sp-3) var(--sp-1); font-size: var(--fs-1); color: var(--c-ink-2); }
.win-fusion .fusion-more-list .menu-h { margin: var(--sp-1) var(--sp-3) 0; font-size: var(--fs-1); color: var(--c-ink-2); }
.win-fusion .fusion-more-list .menu-i, .win-fusion .fusion-pick-list .menu-i { min-height: 44px; }
.win-fusion .fusion-pickd { position: relative; }
.win-fusion .fusion-pickd > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.win-fusion .fusion-pickd > summary::-webkit-details-marker { display: none; }
.win-fusion .fusion-pick-list { position: absolute; left: 0; top: calc(100% + var(--sp-1)); z-index: var(--z-more); min-width: 14rem; max-height: min(60vh, 24rem); overflow-y: auto; }
/* a window under 641 px: the choice is one picker button; Find is an icon that opens the field in place of the row */
@container fwin (max-width: 640px) {
  .win-fusion .fusion-pick-seg { display: none; }
  .win-fusion .fusion-pickd { display: block; }
  .win-fusion .fusion-find-open, .win-fusion .fusion-find-close { display: inline-flex; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; }
  .win-fusion .fusion-tools > .fusion-find { display: none; }
  .win-fusion .fusion-tools:has(.fusion-find:target, #fusion-find[value]:not([value=""])) > :not(.fusion-find) { display: none; }
  .win-fusion .fusion-tools:has(.fusion-find:target, #fusion-find[value]:not([value=""])) > .fusion-find { display: flex; flex: 1 1 100%; max-width: none; }
  /* the menu lives inside the window, which clips it: leave room for the tabs above and the dock below, and scroll the rest */
  .win-fusion .fusion-more-list { position: fixed; left: var(--sp-2); right: var(--sp-2); top: auto; width: auto; max-height: max(10rem, min(24rem, calc(100dvh - 28rem))); }
}
/* a 360 to 400 px window: Save as is its folder icon (its words stay the button's name), never a second line (DESIGN_A, 3 Nov 2026) */
@container fwin (max-width: 400px) {
  .win-fusion .fusion-saveas > span { display: none; }
  .win-fusion .fusion-saveas { min-width: 44px; justify-content: center; }
}
.win-fusion .fusion-tools .btn { white-space: nowrap; }
/* DESIGN_A 13:19, point 1: the Outline (Word, Markdown) and a PDF's Pages fold by the WINDOW's width, not the screen's: a Word file in a
   560 px window on a wide screen had its page squeezed to one word per line beside the Contents column. Under 701 px the list sits in
   the flow and the Contents button replaces it, as on a phone (the same rules as the 840 px and 640 px blocks above). */
@container fwin (max-width: 700px) {
  .fusion-doc:has(> .fusion-outline) { grid-template-columns: minmax(0, 1fr); }
  .fusion-outline { position: static; max-height: none; border-right: 0; border-bottom: var(--line) solid var(--c-line); padding: 0 0 var(--sp-2); }
  .fusion-outline[aria-label="Pages"] { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: var(--sp-1); padding-bottom: var(--sp-1); }
  .fusion-outline[aria-label="Pages"] .fusion-o { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--sp-3); white-space: nowrap; }
  .fusion-doc:has(> .fusion-outline[aria-label="Outline"]) > .fusion-outline { display: none; }
  .fusion-doc:has(> .fusion-outline[aria-label="Outline"]) .fusion-toc { display: block; margin: 0 0 var(--sp-1); }
  .fusion-doc:has(> .fusion-outline[aria-label="Outline"]) .fusion-toc.is-away { padding-block: 0; }
  .fusion-toc.is-away { display: block; position: sticky; top: 0; z-index: var(--z-part-2); margin: 0 0 var(--sp-2); padding: var(--sp-1) 0;
    background: var(--c-face-solid-raised); border-bottom: var(--line) solid var(--c-line); }
  /* the pinned Contents button sits at the top of the scrolling pane; a phone window, whose title scrolls with it, keeps the offset below */
  .fusion-toc > summary { list-style: none; background: var(--c-face-solid-raised); border: var(--line) solid var(--c-line); }
  .fusion-toc > summary::-webkit-details-marker { display: none; }
  .fusion-toc-menu { position: absolute; top: calc(100% + 4px); left: 0; display: grid; gap: var(--sp-1); min-width: 14rem; max-width: min(24rem, 80vw);
    max-height: 50vh; overflow: auto; padding: var(--sp-2); background: var(--c-face-solid-raised); border: var(--line) solid var(--c-line);
    border-radius: var(--r-m); box-shadow: var(--sh-card); font-size: var(--fs-1); }
  .js .fusion-doc > .split { display: none; }
  .fusion-faces.is-both { grid-template-columns: minmax(0, 1fr); }
}
/* DESIGN_A 13:19 (5): where the "..." menu scrolls, its foot fades while more is below and the fade goes at the end (browsers without
   scroll timelines show no fade: the menu is still cut at a row and scrolls) */
@property --fusion-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }
@keyframes fusion-fade-out { from { --fusion-fade: 18px; } to { --fusion-fade: 0px; } }
@supports (animation-timeline: scroll()) {
  .win-fusion .fusion-more-list {
    mask-image: linear-gradient(var(--c-ink) calc(100% - var(--fusion-fade)), transparent);
    animation: fusion-fade-out linear both; animation-timeline: scroll(self block); animation-range: 85% 100%;
  }
}
/* DESIGN_LEAD 13:21 (P1, P2): the narrow picker reads as a control (an edge and the icon family's chevron, as the select's) and "..." and
   the picker show a pressed look while their menu is open (the browser tells a screen reader a summary's open state itself) */
.win-fusion .fusion-pick-btn { border: var(--line) solid var(--c-line); background: var(--c-surface-2); color: var(--c-ink); }
.win-fusion .fusion-pick-chev { width: 1em; height: 1em; transform: rotate(-90deg); color: var(--c-ink-2); flex: none; }
.win-fusion .fusion-pickd[open] > summary, .win-fusion .fusion-more[open] > summary { background: var(--c-accent-soft); box-shadow: inset 0 0 0 var(--line) var(--c-line); }
/* a 360 px window: the picker's name shortens with an ellipsis so the row stays one line (the full name is its menu's label) */
@container fwin (max-width: 380px) {
  .win-fusion .fusion-pickd { min-width: 0; flex: 0 1 auto; max-width: 8.5rem; }
  .win-fusion .fusion-pickd > summary { display: flex; max-width: 100%; }
  .win-fusion .fusion-pickd > summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}

/* DESIGN_LEAD 17:07 rough point 1: the Page colour choices have no icon, so their words start on the line the other items' words start on (an icon's width and the gap) */
.win-fusion .fusion-paper .menu-check > span:first-child { margin-left: calc(1.25em + var(--sp-2)); }

/* Phone rows (EDGES, HARD SWEEP phone.md rows 5-8, 5b, 11, 12; 3 Nov 2026). Unlayered, so they beat core.css's layered
   phone rules. Each is checked at 390x844 and 430x932, light and dark (phone_rows_r1_browser_test.exs) */

/* row 5: a home card's line never runs past its card. A long name with no break points (a file name, a model tag with
   only underscores, dots or colons) could not shrink (only the note could), so the line ran past the desk's edge, which
   clips it. The name ends in "..." on one line; its whole text stays in the row's link and is read out */
.w-model > :is(b, a) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-model > b { flex: 0 1 auto; }
@container frame (max-width: 640px) {
  /* on a phone the note goes under the name rather than squeeze it to "..." */
  .w-model { flex-wrap: wrap; row-gap: 0; }
  .w-model .note { flex: 1 0 100%; margin-left: 0; text-align: left; }
  /* under the name, not under the dot: the dot's own width (--mdot-w, set once beside .mdot) and the row's gap (--sp-2) */
  .w-model:has(> .mdot) .note { padding-left: calc(var(--mdot-w) + var(--sp-2)); }
}

/* row 6: the tab bar's names never run into each other. Each tab was 49.4 px and its name one line, so "Relationships"
   (63 px) ran 14 px over the tab beside it (DEPUTY_UI2's long-name sweep, 3 Nov 12:38). On a phone each tab takes an
   equal share of the bar and its name ends in "..." (its full name is the tab's label, read out) */
@container frame (max-width: 640px) { /* desk */
  .os-dock > :is(.dock-i, .dock-more) { flex: 1 1 0; min-width: 0; }
  .os-dock .dock-i { width: auto; }
  .os-dock .dock-more > summary.dock-i { width: 100%; }
  .os-dock .dock-l { max-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: center; }
}

/* row 7: More's list scrolls inside itself, never cut off the top of the screen (48 px rows, up to 24 apps and the Bin).
   .frame is an inline-size container only, so dvh, not cqh. Its room is the screen less the bar's real height (--dock-h,
   which holds the home bar's room), the 8 px it stands above the bar and 16 px kept at the top: no guessed 140 px */
@container frame (max-width: 640px) { /* desk */
  .os-dock .dock-more-list { max-height: calc(100dvh - var(--dock-h) - var(--sp-2) - var(--sp-4) - env(safe-area-inset-top, 0px));
    overflow-y: auto; overscroll-behavior: none; }
}

/* row 8: the You menu scrolls inside itself on a short screen (Safari's bars, an SE): about 600 px of rows. Its foot is
   where it stands (--dock-h + --sp-2, row 9), not the old guessed 108 px.
   overscroll-behavior none, not contain, in both (PB-20, WRITER2 F1: contain kept iOS's own bounce) */
@container frame (max-width: 640px) { /* desk */
  .avatar-menu { max-height: calc(100dvh - var(--dock-h) - var(--sp-2) - var(--sp-4) - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: none; }
}

/* row 12: no 32 px band above a phone's window: it was kept for Favourites' tab, which a phone has not */
@container frame (max-width: 640px) { /* desk */
  .os-desk > .win { margin-top: 0; }
}

/* row 5b (DEPUTY_UI2's sweep, DR11): Up next's rows on the home cards were 41 px tall, under the 44 px touch size */
@container frame (max-width: 640px) {
  .list li > a.up-link { min-height: 44px; align-content: center; }
}

/* Calendar's one bar on a desk (Humane r0 H2, DESIGN_LEAD 4 Nov 05:58): where the browser can draw a closed details' content
   (::details-content), the two folds open flat in the bar, as the controls stood before: Today and the date box after the period, the four
   views, the Calendars and Calendar settings after Next, New entry last. Where it cannot, they stay folds, as on a phone */
@container frame (min-width: 641px) {
  @supports selector(::details-content) {
    .win-calendar .cal-tools { flex-wrap: wrap; }
    .win-calendar .cal-fold, .win-calendar .cal-fold-body { display: contents; }
    .win-calendar .cal-fold::details-content { display: contents; content-visibility: visible; }
    .win-calendar .cal-view > summary { display: none; }
    .win-calendar .cal-when > summary { display: none; }
    .win-calendar .cal-tools > .cal-period { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
    .win-calendar .cal-when { flex: 0 1 auto; }
    /* the source order is the order drawn: no order at all, so Tab goes where the eye does */
    .win-calendar .cal-tools > :is(.cal-prev, .cal-next, .cal-view, .cal-new, .back-fwd, .cal-back) { order: 0; }
  }
}

/* Settings > Sign-in code: the setup link's QR, dark on its own light square in every theme (a scanner needs that) */
.qr-box { width: min(100%, 15rem); }
.qr-box .qr { display: block; width: 100%; height: auto; border-radius: var(--r-m); }