/* SiteScale shared foundation, version 1.4 (2026-09-26: the P55 boards L, M, S, T and U, P56 lane M), in the app.

   The source is design/system/sitescale.css (docs/design/FOUNDATION.md). This copy is that file plus three
   additions, each marked below: the 2026-09-11 brand names aliased for one release (docs/design/FOUNDATION.md,
   "Old token names"), the live-text lockup the app header and account screens use, and a reduced-motion rule that keeps
   transitionend firing (0.01ms rather than 0s, so code that waits for the end of a transition is never left waiting).

   One typeface: IBM Plex Sans 400/500/600, self-hosted WOFF2, version 3.005 from IBM's official package. SIL Open
   Font License (fonts/LICENSE.txt). Numbers use Plex Sans with even-width (tabular) figures; there is no monospaced
   font (Peter, D-058).

   Appearance follows the system by default. The app forces a mode with data-theme="light" or data-theme="dark" on
   <html> (theme.js resolves System to one of them). */

@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(fonts/IBMPlexSans-SemiBold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Type families */
  --ss-font:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* Brand constants (never change with appearance) */
  --ss-deep:#17314c;          /* deep blue: primary actions, strong fields */
  --ss-deep-hover:#254764;
  --ss-deep-active:#11283f;
  --ss-logo-blue:#1267e5;     /* the logo's origin square on light grounds */
  --ss-logo-blue-on-ink:#79acff;

  /* Light appearance. Every surface white, parted by hairlines; a fill only for hover, the open folder and selection (board S;
     D-069). The inks are board M's (D-068): each passes on every ground in the app. */
  --ss-page:#ffffff;          /* page and work surface */
  --ss-surface:#ffffff;       /* sidebars, panes, column headers: white since 1.4 (was #f5f7fa) */
  --ss-surface-2:#eef2f6;     /* pressed, placeholder */
  --ss-raised:#ffffff;        /* cards, menus, popovers */
  /* The visual pass (Peter, 2026-09-28, "lets move forward"; design/p56r-visual-pass/, D-082): the frame is a neutral ground,
     panels are white lifted cards on it, and the drawing sits on a recessed well. Content stays white. */
  --ss-frame:#eef0f3;         /* the frame: the ground behind the header and between the panels */
  --ss-panel:#ffffff;         /* a panel on the frame: the sheets, the budget */
  --ss-well:#e3e6ea;          /* a recessed well: the canvas */
  --ss-card-well:#f4f5f7;     /* the lightest gray: the File Browser's folder panel, the Library's tile wells */
  --ss-side-card:#f1f3f5;     /* the File Browser's folder list, its own quiet card inside the white window (Peter, 2026-09-29) */
  --ss-side-sel:rgba(20,45,70,.09); /* the selected folder on that card: a soft grey fill, not a box */
  --ss-soon:#a5530b;          /* a bid due inside a week (the Projects board, VP6) */
  --ss-ink:#142d46;           /* text, logo corners and wordmark on a page */
  --ss-ink-2:#435366;         /* secondary text: notes, descriptions, headers, empty states: 7.9:1 on white */
  --ss-ink-3:#5c6979;         /* tertiary text, units, icons at rest; placeholders only in a field with no visible label: 5.6:1 */
  --ss-ink-disabled:#8996a4;  /* an unavailable control's text, in place of fading it; never the only carrier of meaning */
  --ss-rule:#dce3ea;          /* dividers and hairlines (too light for a field edge) */
  --ss-rule-strong:#c3cdd8;
  --ss-field-line:#8996a4;    /* input and select borders: 3:1 on white, as form controls need */
  --ss-field-edge:#7f8c9b;    /* a field with no visible label (search, filters, the Pad's): 3:1 on white and on the quiet grounds */
  --ss-accent:#1267e5;        /* measurement, selection, the traced line */
  --ss-accent-text:#0a4fb0;   /* links and small blue text: 7.6:1 on white */
  --ss-accent-soft:#1267e51a; /* selected row, shape fill */
  --ss-action:var(--ss-deep); /* primary button background */
  --ss-action-hover:var(--ss-deep-hover);
  --ss-action-active:var(--ss-deep-active);
  --ss-on-action:#ffffff;
  --ss-positive:#1e7a46;      /* status only, never decoration */
  --ss-caution:#a15c00;
  --ss-critical:#c42b2b;
  --ss-focus:#1267e5;
  --ss-shadow-1:0 1px 2px #0f22380f,0 1px 1px #0f22380a;
  --ss-shadow-2:0 8px 24px #0f22381a,0 2px 6px #0f22380f;
  --ss-shadow-3:0 14px 30px #0a1a2b30;
  color-scheme:light;

  /* Type roles. Marketing uses the display roles (the site and the entry pages only); the app uses the product roles. */
  --ss-display:600 clamp(2.5rem,1.3rem + 3.6vw,4rem)/1.04 var(--ss-font);
  --ss-display-tracking:-.04em;
  --ss-title:500 clamp(2rem,1.4rem + 1.9vw,3rem)/1.12 var(--ss-font);
  --ss-title-tracking:-.025em;
  --ss-lede:400 1.1875rem/1.55 var(--ss-font);
  --ss-body-lg:400 1.0625rem/1.55 var(--ss-font);
  /* Product roles: five sizes and the card heading (15 / 20) with their line heights and nothing under 12 (board M; D-068). Three weights: 400 to read, 500 to
     name (labels, headers, chips, tabs), 600 for the point (titles, totals, primary buttons); no 700. */
  --ss-text-xs:.75rem;   --ss-leading-xs:1rem;      /* 12 / 16: meta, units, chips, column heads: the floor */
  --ss-text-sm:.8125rem; --ss-leading-sm:1.125rem;  /* 13 / 18: table cells, dense lists, notes */
  --ss-text-md:.875rem;  --ss-leading-md:1.25rem;   /* 14 / 20: the default: menus, buttons, fields; panel titles at 600 */
  --ss-text-head:.9375rem; --ss-leading-head:1.25rem; /* 15 / 20: a heading inside a card at 600: a Settings section, a project card's name (the pages board, version 4) */
  --ss-text-base:1rem;   --ss-leading-base:1.5rem;  /* 16 / 24: dialog text and Help; dialog titles at 600 */
  --ss-text-lg:1.25rem;  --ss-leading-lg:1.625rem;  /* 20 / 26: page titles at 600 */
  --ss-weight-regular:400;--ss-weight-medium:500;--ss-weight-semibold:600;

  /* One proportion scale (board U; D-072; FOUNDATION "Shape and size"). src/app/proportion.static.test.js fails on a new value off it.
     Control heights, one height per row of controls: */
  --ss-control-cap:1.25rem;   /* 20: key caps and tags */
  --ss-control-sm:1.75rem;    /* 28: dense: panel header keys, grids, Find, tooltips */
  --ss-control-bar:2rem;      /* 32: keys in the bottom bars, menu and list rows, a segmented piece, the toast's action */
  --ss-control:2.25rem;       /* 36: buttons, fields, the tool keys, a segmented control */
  --ss-control-touch:2.75rem; /* 44: under a finger (iPad, P58) */
  --ss-control-lg:3rem;       /* 48: the site and the entry pages only */
  /* Radii: a quarter of the control's height; a container adds its inset, so corners run parallel; paper and cells are square */
  --ss-radius-cap:.3125rem;     /* 5 on 20 */
  --ss-radius-sm:.4375rem;      /* 7 on 28 */
  --ss-radius-bar:.5rem;        /* 8 on 32 */
  --ss-radius:.5rem;            /* 8: the same; the site's buttons */
  --ss-radius-control:.5625rem; /* 9 on 36 */
  --ss-radius-touch:.6875rem;   /* 11 on 44 */
  --ss-radius-seg:.625rem;      /* 10: a segmented control, its 8 px pieces 2 in */
  --ss-radius-lg:.75rem;        /* 12: cards, panels, popovers; a menu, its 8 px rows 4 in */
  --ss-radius-tray:.875rem;     /* 14: a bottom bar, the instrument tray, the toast: 32 px keys 6 in */
  --ss-radius-xl:1rem;          /* 16: dialogs */
  /* Spacing: a 4 px base; 2 and 6 only inside controls */
  --ss-space-in:.125rem;        /* 2: inside a control (a tray's inset) */
  --ss-space-1:.25rem;          /* 4: tight */
  --ss-space-key:.375rem;       /* 6: key to key, an icon to its label */
  --ss-space-2:.5rem;           /* 8: a key to a divider */
  --ss-space-3:.75rem;          /* 12: a panel's inset */
  --ss-space-4:1rem;            /* 16: between groups */
  --ss-space-5:1.5rem;          /* 24: a dialog's padding, the card grid */
  --ss-space-6:2rem;            /* 32: page gutters */
  --ss-space-7:3rem;            /* 48: between sections */
  --ss-space-8:4.5rem;          /* 72: the site only */
  /* Icons: about 1.3 times the text beside them, 0.55 of a key they sit alone in (docs/design/ICONS.md, "Sizes") */
  --ss-icon-xs:.875rem;         /* 14: simple glyphs (chevrons, ticks, x, plus); beside 12 px text */
  --ss-icon-sm:1rem;            /* 16: in a 28 key; beside 13 and 14 px text */
  --ss-icon-bar:1.125rem;       /* 18: in a 32 key */
  --ss-icon:1.25rem;            /* 20: in a 36 key; beside 16 px text */
  --ss-icon-touch:1.5rem;       /* 24: in a 44 key; beside 20 px text */
  /* The frame: a band is its control plus 10 above and below; a bar is its keys plus 6 */
  --ss-bar-app:3rem;            /* 48: the app bar on every screen, the project window included (Peter's header concept, 2026-10-06) */
  --ss-bar-pages:3.5rem;        /* 56: the pages' header (Projects, Contacts, Library, Messages, Settings): the 32 nav pill and 12 above and below (the pages board, version 4); the project window keeps --ss-bar-app */
  --ss-bar-panel:3rem;          /* 48: a panel's header (the sheets rail, the budget, the Pad, the File Browser); a dialog's title band */
  --ss-bar-bottom:2.75rem;      /* 44: the bottom bars, the instrument tray, the toast */
  --ss-row:1.75rem;             /* 28: grid rows, column headers, the budget's tab strip */
  --ss-row-list:2rem;           /* 32: menu and list rows */

  /* Motion. The trace is the brand's one signature movement. Between states (board T; D-071): a segmented control's piece slides
     and a switch eases in 200 ms; switched content crossfades in 180 while its frame holds still; a page change crossfades with a
     6 px rise in 180; a panel slides from its own edge in 180; a dialog fades and grows from 98% in 180; a just-added row's tint
     fades over 1.2 s. src/app/motion.js carries the same values (MOTION); reduced motion turns every one off (below). */
  --ss-ease:cubic-bezier(.2,0,0,1);
  --ss-ease-trace:cubic-bezier(.3,0,.15,1);
  --ss-dur-fast:120ms;--ss-dur:180ms;--ss-dur-trace:1000ms;
  --ss-dur-seg:200ms;--ss-dur-content:180ms;--ss-dur-page:180ms;--ss-rise-page:6px;--ss-dur-panel:180ms;
  --ss-dur-dialog:180ms;--ss-dialog-from:.98;--ss-dur-flash:1200ms;

  /* Added in the app: the 2026-09-11 names, aliased for one release (FOUNDATION, "Old token names"). Remove after it. */
  --ss-paper:var(--ss-page);
  --ss-muted:var(--ss-ink-3);
  --ss-blue:var(--ss-logo-blue);
  --ss-blue-on-ink:var(--ss-logo-blue-on-ink);
  --ss-blue-text:var(--ss-accent-text);
  --ss-font-mono:var(--ss-font);
}

/* Dark appearance: follows the system unless the page forces light */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ss-page:#101720;--ss-surface:#101720;--ss-surface-2:#1f2a37;--ss-raised:#1b2531;--ss-frame:#0d1217;--ss-panel:#151c24;--ss-well:#090d11;--ss-card-well:#10161d;--ss-side-card:#0e141a;--ss-side-sel:rgba(255,255,255,.08);--ss-soon:#f0a45b;
    --ss-ink:#f3f6fa;--ss-ink-2:#aab9ca;--ss-ink-3:#97a6b7;--ss-ink-disabled:#6f8196;--ss-rule:#2c3a49;--ss-rule-strong:#3b4b5d;--ss-field-line:#66788a;--ss-field-edge:#718396;
    --ss-accent:#79acff;--ss-accent-text:#8fbcff;--ss-accent-soft:#79acff24;
    --ss-action:#e7eef5;--ss-action-hover:#ffffff;--ss-action-active:#d5e1ee;--ss-on-action:#17314c;
    --ss-positive:#4cc27e;--ss-caution:#f0a54a;--ss-critical:#ff7b7b;--ss-focus:#79acff;
    --ss-shadow-1:0 1px 2px #0006;--ss-shadow-2:0 8px 24px #0008;--ss-shadow-3:0 14px 30px #0009;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ss-page:#101720;--ss-surface:#101720;--ss-surface-2:#1f2a37;--ss-raised:#1b2531;--ss-frame:#0d1217;--ss-panel:#151c24;--ss-well:#090d11;--ss-card-well:#10161d;--ss-side-card:#0e141a;--ss-side-sel:rgba(255,255,255,.08);--ss-soon:#f0a45b;
  --ss-ink:#f3f6fa;--ss-ink-2:#aab9ca;--ss-ink-3:#97a6b7;--ss-ink-disabled:#6f8196;--ss-rule:#2c3a49;--ss-rule-strong:#3b4b5d;--ss-field-line:#66788a;--ss-field-edge:#718396;
  --ss-accent:#79acff;--ss-accent-text:#8fbcff;--ss-accent-soft:#79acff24;
  --ss-action:#e7eef5;--ss-action-hover:#ffffff;--ss-action-active:#d5e1ee;--ss-on-action:#17314c;
  --ss-positive:#4cc27e;--ss-caution:#f0a54a;--ss-critical:#ff7b7b;--ss-focus:#79acff;
  --ss-shadow-1:0 1px 2px #0006;--ss-shadow-2:0 8px 24px #0008;--ss-shadow-3:0 14px 30px #0009;
  color-scheme:dark;
}

/* Reduced motion: every movement token is nothing, so a transition or an animation drawn with them does not move */
@media (prefers-reduced-motion:reduce){:root{--ss-dur-fast:0ms;--ss-dur:0ms;--ss-dur-trace:0ms;--ss-dur-seg:0ms;--ss-dur-content:0ms;--ss-dur-page:0ms;--ss-rise-page:0px;--ss-dur-panel:0ms;--ss-dur-dialog:0ms;--ss-dialog-from:1;--ss-dur-flash:0ms;--ss-dur-press:0ms;--ss-dur-hover:0ms;--ss-dur-menu:0ms;--ss-dur-ring:0ms}}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ss-page);color:var(--ss-ink);font-family:var(--ss-font);font-size:1rem;line-height:1.5;font-synthesis:none}
/* Text is thinned on a Mac in dark only; light keeps the system's own rendering (board M; D-068) */
:root[data-theme="dark"] body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}
h1,h2,h3,h4,p{overflow-wrap:break-word}
h1,h2{text-wrap:balance}
p{text-wrap:pretty}
strong,b{font-weight:500}
a{color:var(--ss-accent-text);text-underline-offset:.2em}
/* The pointer (POINTER_RULE, P54): the arrow on every control, whose hover shows it can be clicked; the hand only on a text link */
button{font:inherit;color:inherit;cursor:default}
a[href]{cursor:pointer}
img,video,svg{max-width:100%}
::selection{background:#1267e533}
:focus-visible{outline:3px solid var(--ss-focus);outline-offset:3px}

/* Figures: money and quantities in tables and budgets. Always tabular. */
.ss-figure{font-family:var(--ss-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;text-align:right;white-space:nowrap}
.ss-tabular{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Buttons, in the material (1.3, below). Primary: the navy outline (P57 polish P9, Peter 2026-09-29), the raised key with a
   1 px navy edge and a navy label. Brand: navy, raised, only on the entry cards (sign in, the free trial). Secondary: raised. Quiet: no edge until hover. Icon: a raised
   square. Unavailable: dimmed, the arrow, its tooltip still reachable. One shape everywhere; size by context, each size's radius a
   quarter of its height. No arrows or icons for decoration. Hover lifts the shadow; a press sinks 1 px. */
.ss-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--ss-space-2);min-height:var(--ss-control);padding:0 var(--ss-space-4);border:1px solid var(--ss-primary-line);border-radius:var(--ss-radius-control);background:var(--ss-primary-fill);color:var(--ss-primary-ink);box-shadow:var(--ss-primary-shadow);font:600 var(--ss-text-md)/1.4 var(--ss-font);text-decoration:none;white-space:nowrap;transition:box-shadow var(--ss-dur-hover) ease,transform var(--ss-dur-press) ease}
.ss-button:hover{box-shadow:var(--ss-primary-shadow-hover)}
.ss-button:active{transform:translateY(1px);box-shadow:var(--ss-primary-shadow-press)}
.ss-button:focus-visible{outline:3px solid var(--ss-halo);outline-offset:2px}
.ss-button--lg{min-height:var(--ss-control-lg);padding:0 var(--ss-space-4);border-radius:12px;font-size:var(--ss-text-base)}
.ss-button--sm{min-height:var(--ss-control-sm);padding:0 var(--ss-space-3);border-radius:var(--ss-radius-sm);font-size:var(--ss-text-sm)}
.ss-button--brand{background:var(--ss-brand-fill);border-color:var(--ss-brand-line);color:var(--ss-brand-ink);box-shadow:var(--ss-brand-shadow)}
.ss-button--brand:hover{box-shadow:var(--ss-brand-shadow-hover)}
.ss-button--brand:active{box-shadow:var(--ss-brand-shadow)}
.ss-button--secondary{background:var(--ss-raised-fill);border-color:var(--ss-raised-line);color:var(--ss-ink);box-shadow:var(--ss-raised-shadow)}
.ss-button--secondary:hover{box-shadow:var(--ss-raised-shadow-hover)}
.ss-button--secondary:active{box-shadow:var(--ss-raised-shadow-press)}
.ss-button--quiet{background:transparent;border-color:transparent;color:var(--ss-ink-2);box-shadow:none}
.ss-button--quiet:hover{background:var(--ss-hover);color:var(--ss-ink);box-shadow:none}
.ss-button--quiet:active{box-shadow:none}
.ss-button--icon{width:var(--ss-control);padding:0;background:var(--ss-raised-fill);border-color:var(--ss-raised-line);color:var(--ss-ink-2);box-shadow:var(--ss-raised-shadow)}
.ss-button--icon:hover{color:var(--ss-ink);box-shadow:var(--ss-raised-shadow-hover)}
/* On a deep-blue field in either appearance */
.ss-on-deep .ss-button{background:#f3f6fa;border-color:#f3f6fa;color:var(--ss-deep)}
.ss-on-deep .ss-button:hover{background:#ffffff}
.ss-on-deep .ss-button:active{background:#dde6ef}
.ss-on-deep :focus-visible{outline-color:#ffffff}
/* Unavailable (SIDE polish 2): the button keeps its fill, edge and resting shadow, and only its label and icon take the inactive
   ink; hover and press change nothing. The primary's navy edge takes the inactive ink with its label; a filled brand button, whose
   label could not be gray on navy, becomes the raised neutral with that ink. A busy button (aria-busy, "Signing in…") is working, not
   unavailable, and keeps its look. */
.ss-button[disabled]:not([aria-busy="true"]),.ss-button[aria-disabled="true"]:not([aria-busy="true"]){--ss-primary-line:var(--ss-ink-disabled);--ss-primary-shadow-hover:var(--ss-primary-shadow);--ss-primary-shadow-press:var(--ss-primary-shadow);--ss-raised-shadow-hover:var(--ss-raised-shadow);--ss-raised-shadow-press:var(--ss-raised-shadow);--ss-brand-shadow-hover:var(--ss-brand-shadow);color:var(--ss-ink-disabled);cursor:default;transform:none}
.ss-button--quiet[disabled]:hover,.ss-button--quiet[aria-disabled="true"]:hover{background:transparent}
.ss-button--brand[disabled]:not([aria-busy="true"]),.ss-button--brand[aria-disabled="true"]:not([aria-busy="true"]){--ss-brand-fill:var(--ss-raised-fill);--ss-brand-line:var(--ss-raised-line);--ss-brand-shadow:var(--ss-raised-shadow)}

/* Material, 1.3 (P54, 2026-09-25; docs/product/MATERIAL_AND_TOOLS.md, approved by Peter). The values are the approved design
   canvas's (design/p54-canvas/Material.dc.html .m-light and .m-dark, Toolbar.dc.html .tt-light and .tt-dark), not retyped.
   One light, from above: anything you press is raised (a top light, a soft shadow below); anything you type into or that holds
   things is recessed (a faint inner shadow). One "this one" signal, the ring: a 1.5 px line lit from above, 2 px off the thing,
   settling in over 180 ms from 94% (retired by board L, D-067: P56 lane M takes it off each place). Keyboard focus is a soft halo
   further out, so selected and focused never look alike. Motion only when you act. Precision, not charm: no texture, no tilt,
   nothing ambient. 1.4 adds board S's neutral hover and open folder, board M's row states and board T's segmented piece. */
:root{
  --ss-raised-fill:linear-gradient(180deg,#ffffff 0%,#f5f7fa 100%);
  --ss-raised-line:rgba(20,45,70,.12);
  --ss-raised-shadow:inset 0 1px 0 #ffffff,0 1px 1px rgba(20,45,70,.09),0 2px 6px rgba(20,45,70,.06);
  --ss-raised-shadow-hover:inset 0 1px 0 #ffffff,0 1px 2px rgba(20,45,70,.12),0 5px 12px rgba(20,45,70,.10);
  --ss-raised-shadow-press:inset 0 1px 0 #ffffff,0 0 1px rgba(20,45,70,.14);
  /* The primary key (P57 polish P9, Peter 2026-09-29: "navy outline as recomended approved"; design/p57-polish/primary-board.html,
     "Navy outline"): the raised key every secondary uses, with a 1 px navy edge and a navy label; dark, an #AAB9CA edge and a
     near-white label. The face and the shadows are the raised key's, so they follow the appearance with it. */
  --ss-primary-fill:var(--ss-raised-fill);
  --ss-primary-line:#142d46;
  --ss-primary-ink:#142d46;
  --ss-primary-shadow:var(--ss-raised-shadow);
  --ss-primary-shadow-hover:var(--ss-raised-shadow-hover);
  --ss-primary-shadow-press:var(--ss-raised-shadow-press);
  /* The brand's navy, raised (1.3's primary, the canvas's): only the entry cards keep it (.ss-button--brand) */
  --ss-brand-fill:linear-gradient(180deg,#24405e 0%,#142d46 100%);
  --ss-brand-line:#0e2236;
  --ss-brand-ink:#ffffff;
  --ss-brand-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 1px rgba(20,45,70,.30),0 3px 8px rgba(20,45,70,.14);
  --ss-brand-shadow-hover:inset 0 1px 0 rgba(255,255,255,.16),0 1px 2px rgba(20,45,70,.34),0 5px 12px rgba(20,45,70,.20);
  --ss-well-fill:#ffffff;                     /* a field: recessed */
  --ss-well-line:rgba(20,45,70,.20);
  --ss-well-shadow:inset 0 1px 2px rgba(20,45,70,.08);
  --ss-tray:#e8edf2;                          /* what holds keys: a segmented control, the instrument tray */
  --ss-tray-line:rgba(20,45,70,.07);
  --ss-tray-shadow:inset 0 1px 2px rgba(20,45,70,.08);
  --ss-sunk-fill:linear-gradient(180deg,#dde4ec 0%,#e4eaf1 100%);   /* a key that is switched on: sunk, its icon blue */
  --ss-sunk-line:rgba(20,45,70,.14);
  --ss-sunk-shadow:inset 0 2px 3px rgba(20,45,70,.18),inset 0 -1px 0 rgba(255,255,255,.6);
  --ss-sunk-icon:#1267e5;
  --ss-edge:rgba(20,45,70,.12);               /* a card's and a menu's edge */
  --ss-halo:rgba(18,103,229,.22);             /* keyboard focus on a button or a field */
  --ss-halo-key:rgba(18,103,229,.34);         /* keyboard focus on a toolbar key, offset 5 px */
  --ss-card-shadow:0 1px 2px rgba(20,45,70,.06),0 4px 14px rgba(20,45,70,.06);
  --ss-menu-shadow:0 12px 32px rgba(20,45,70,.14),0 2px 6px rgba(20,45,70,.08);
  --ss-lift-shadow:0 1px 2px rgba(20,45,70,.14),0 6px 16px rgba(20,45,70,.14);
  /* The visual pass's shadows (design/p56r-visual-pass/Main.dc.html and Dashboard.dc.html .t-light and .t-dark; D-082) */
  --ss-panel-shadow:0 0 0 1px rgba(20,45,70,.07),0 1px 2px rgba(20,45,70,.06);   /* a panel lifted off the frame */
  --ss-float-shadow:0 0 0 1px rgba(20,45,70,.08),0 4px 12px rgba(20,45,70,.10);  /* a pill floating over the well */
  --ss-card-lift:0 0 0 1px rgba(20,45,70,.06),0 1px 2px rgba(20,45,70,.05),0 6px 18px rgba(20,45,70,.06);   /* a card on the frame */
  --ss-paper-shadow:0 0 0 1px rgba(20,45,70,.06),0 2px 4px rgba(20,45,70,.06),0 16px 40px rgba(20,45,70,.14);   /* the sheet on the well */
  --ss-well-inset:inset 0 1px 3px rgba(20,45,70,.08);   /* the well's inner shadow */
  --ss-sheet-shadow:0 0 0 1px rgba(20,45,70,.06),0 6px 16px rgba(20,45,70,.14);   /* a sheet's picture on a project card (VP6; Projects, A as ruled) */
  /* The Projects page, A as ruled (Peter, 2026-10-05; design/p57-polish/projects-board.html): the cards on the frame */
  --ss-card-lift-hover:0 0 0 1px rgba(20,45,70,.14),0 1px 2px rgba(20,45,70,.06),0 8px 22px rgba(20,45,70,.09);   /* a project card under the pointer */
  --ss-sheet-paper:#ffffff;                   /* the paper under a sheet's picture, white in both themes as a plan is */
  --ss-sheet-drop:drop-shadow(0 0 .5px rgba(20,45,70,.28)) drop-shadow(0 1px 2px rgba(20,45,70,.10));   /* a sheet's picture on a project card's well: a hairline and a faint drop, as a filter, so it follows the sheet fitted in its well (Peter, 2026-10-06) */
  --ss-new-edge:rgba(20,45,70,.20);           /* the New project card's dashed edge (dark: white at 16%) */
  --ss-hover:rgba(0,0,0,.04);                 /* a quiet hover: a true neutral (board S; design/p55-canvas/Surfaces.dc.html .v-a-l) */
  --ss-hover-open:rgba(0,0,0,.08);            /* an open or pressed quiet key: the hover one step darker, flat (window heads, side-launch rulings 10) */
  --ss-knob:linear-gradient(180deg,#ffffff,#f1f4f8);
  --ss-knob-shadow:0 1px 2px rgba(20,45,70,.3),0 2px 5px rgba(20,45,70,.15);
  --ss-toast:#142d46;
  --ss-toast-ink:#ffffff;
  --ss-toast-ink-2:#c3cfdb;
  --ss-toast-shadow:0 8px 20px rgba(20,45,70,.2);
  /* The one set of row states (board M, design/p55-canvas/Type.dc.html .lt and .dk; D-068; COMPONENTS "Row states") */
  --ss-row-hover:var(--ss-hover);                         /* the pointer is over it: a neutral fill that means nothing else */
  --ss-row-sel:#1267e51a;                                 /* selected: the pale blue tint */
  --ss-row-sel-hover:#1267e524;                           /* the pointer over a selected row deepens it */
  --ss-row-sel-line:inset 0 0 0 1px var(--ss-accent);     /* with a 1 px blue line (round the block in a grid) */
  --ss-row-focus:inset 0 0 0 2px var(--ss-accent);        /* keyboard focus on a row: a 2 px blue line, no fill */
  --ss-row-flash:#1267e51a;                               /* just added: the tint with no line, fading over --ss-dur-flash */
  --ss-row-sel-idle:#eef2f6;                              /* selected while the window is not active: gray */
  --ss-row-sel-idle-line:inset 0 0 0 1px var(--ss-ink-3); /* with an ink 3 line */
  --ss-row-open:rgba(0,0,0,.055);                         /* the open folder: a neutral fill (board S) */
  /* The segmented control's one raised piece (board T, design/p55-canvas/Navigation.dc.html .nl and .nd) */
  --ss-seg-piece-fill:linear-gradient(180deg,#ffffff 0%,#fbfcfd 100%);
  --ss-seg-piece-line:rgba(20,45,70,.16);
  --ss-seg-piece-shadow:0 1px 2px rgba(20,45,70,.12),0 1px 0 rgba(20,45,70,.04);
  /* Motion: press sinks in 90 ms, hover lifts in 140, a menu opens from 98% in 140, the ring settles in 180 */
  --ss-ease-out:cubic-bezier(.2,.8,.2,1);
  --ss-dur-press:90ms;--ss-dur-hover:140ms;--ss-dur-menu:140ms;--ss-dur-ring:180ms;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ss-raised-fill:linear-gradient(180deg,#2a3542 0%,#202a35 100%);--ss-raised-line:rgba(255,255,255,.08);
    --ss-raised-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 1px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.3);
    --ss-raised-shadow-hover:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.40);
    --ss-raised-shadow-press:inset 0 1px 0 rgba(255,255,255,.06),0 0 1px rgba(0,0,0,.6);
    --ss-primary-line:#aab9ca;--ss-primary-ink:#f3f6fa;
    --ss-brand-fill:linear-gradient(180deg,#f3f6fa 0%,#dbe3ec 100%);--ss-brand-line:#c7d2de;--ss-brand-ink:#0c131a;
    --ss-brand-shadow:inset 0 1px 0 #ffffff,0 1px 1px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.35);
    --ss-brand-shadow-hover:inset 0 1px 0 #ffffff,0 1px 2px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.45);
    --ss-well-fill:#0f161d;--ss-well-line:rgba(255,255,255,.14);--ss-well-shadow:inset 0 1px 2px rgba(0,0,0,.5);
    --ss-tray:#0c131a;--ss-tray-line:rgba(255,255,255,.06);--ss-tray-shadow:inset 0 1px 2px rgba(0,0,0,.55);
    --ss-sunk-fill:linear-gradient(180deg,#121a22 0%,#151e27 100%);--ss-sunk-line:rgba(255,255,255,.05);
    --ss-sunk-shadow:inset 0 2px 4px rgba(0,0,0,.65),inset 0 -1px 0 rgba(255,255,255,.03);--ss-sunk-icon:#8fbcff;
    --ss-edge:rgba(255,255,255,.09);--ss-halo:rgba(121,172,255,.30);--ss-halo-key:rgba(121,172,255,.42);
        --ss-card-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
    --ss-menu-shadow:0 12px 32px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
    --ss-lift-shadow:0 1px 2px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.45);--ss-panel-shadow:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.5);--ss-float-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.5);--ss-card-lift:0 0 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.45);--ss-paper-shadow:0 0 0 1px rgba(255,255,255,.05),0 18px 44px rgba(0,0,0,.6);--ss-well-inset:inset 0 1px 3px rgba(0,0,0,.6);--ss-sheet-shadow:0 0 0 1px rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.6);--ss-sheet-paper:#ffffff;--ss-sheet-drop:drop-shadow(0 0 .5px rgba(0,0,0,.7)) drop-shadow(0 1px 3px rgba(0,0,0,.4));--ss-new-edge:rgba(255,255,255,.16);--ss-card-lift-hover:0 0 0 1px rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.5);
    --ss-hover:rgba(255,255,255,.045);
    --ss-hover-open:rgba(255,255,255,.09);
    --ss-toast:#f3f6fa;--ss-toast-ink:#142d46;--ss-toast-ink-2:#435366;--ss-toast-shadow:0 8px 20px rgba(0,0,0,.45);
    --ss-row-sel:#79acff24;--ss-row-sel-hover:#79acff2e;--ss-row-flash:#79acff24;--ss-row-sel-idle:#1f2a37;--ss-row-open:rgba(255,255,255,.07);
    --ss-seg-piece-fill:linear-gradient(180deg,#2c3745 0%,#232d39 100%);--ss-seg-piece-line:rgba(255,255,255,.12);
    --ss-seg-piece-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ss-raised-fill:linear-gradient(180deg,#2a3542 0%,#202a35 100%);--ss-raised-line:rgba(255,255,255,.08);
  --ss-raised-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 1px 1px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.3);
  --ss-raised-shadow-hover:inset 0 1px 0 rgba(255,255,255,.10),0 1px 2px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.40);
  --ss-raised-shadow-press:inset 0 1px 0 rgba(255,255,255,.06),0 0 1px rgba(0,0,0,.6);
  --ss-primary-line:#aab9ca;--ss-primary-ink:#f3f6fa;
  --ss-brand-fill:linear-gradient(180deg,#f3f6fa 0%,#dbe3ec 100%);--ss-brand-line:#c7d2de;--ss-brand-ink:#0c131a;
  --ss-brand-shadow:inset 0 1px 0 #ffffff,0 1px 1px rgba(0,0,0,.5),0 3px 8px rgba(0,0,0,.35);
  --ss-brand-shadow-hover:inset 0 1px 0 #ffffff,0 1px 2px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.45);
  --ss-well-fill:#0f161d;--ss-well-line:rgba(255,255,255,.14);--ss-well-shadow:inset 0 1px 2px rgba(0,0,0,.5);
  --ss-tray:#0c131a;--ss-tray-line:rgba(255,255,255,.06);--ss-tray-shadow:inset 0 1px 2px rgba(0,0,0,.55);
  --ss-sunk-fill:linear-gradient(180deg,#121a22 0%,#151e27 100%);--ss-sunk-line:rgba(255,255,255,.05);
  --ss-sunk-shadow:inset 0 2px 4px rgba(0,0,0,.65),inset 0 -1px 0 rgba(255,255,255,.03);--ss-sunk-icon:#8fbcff;
  --ss-edge:rgba(255,255,255,.09);--ss-halo:rgba(121,172,255,.30);--ss-halo-key:rgba(121,172,255,.42);
    --ss-card-shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --ss-menu-shadow:0 12px 32px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.4);
  --ss-lift-shadow:0 1px 2px rgba(0,0,0,.5),0 6px 16px rgba(0,0,0,.45);--ss-panel-shadow:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.5);--ss-float-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.5);--ss-card-lift:0 0 0 1px rgba(255,255,255,.08),0 8px 24px rgba(0,0,0,.45);--ss-paper-shadow:0 0 0 1px rgba(255,255,255,.05),0 18px 44px rgba(0,0,0,.6);--ss-well-inset:inset 0 1px 3px rgba(0,0,0,.6);--ss-sheet-shadow:0 0 0 1px rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.6);--ss-sheet-paper:#ffffff;--ss-sheet-drop:drop-shadow(0 0 .5px rgba(0,0,0,.7)) drop-shadow(0 1px 3px rgba(0,0,0,.4));--ss-new-edge:rgba(255,255,255,.16);--ss-card-lift-hover:0 0 0 1px rgba(255,255,255,.14),0 8px 24px rgba(0,0,0,.5);
  --ss-hover:rgba(255,255,255,.045);
  --ss-hover-open:rgba(255,255,255,.09);
  --ss-toast:#f3f6fa;--ss-toast-ink:#142d46;--ss-toast-ink-2:#435366;--ss-toast-shadow:0 8px 20px rgba(0,0,0,.45);
  --ss-row-sel:#79acff24;--ss-row-sel-hover:#79acff2e;--ss-row-flash:#79acff24;--ss-row-sel-idle:#1f2a37;--ss-row-open:rgba(255,255,255,.07);
  --ss-seg-piece-fill:linear-gradient(180deg,#2c3745 0%,#232d39 100%);--ss-seg-piece-line:rgba(255,255,255,.12);
  --ss-seg-piece-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5);
}

/* Raised: a button, a key. Hover lifts the shadow; a press sinks 1 px. */
.ss-raised{background:var(--ss-raised-fill);border:1px solid var(--ss-raised-line);box-shadow:var(--ss-raised-shadow);color:var(--ss-ink);transition:box-shadow var(--ss-dur-hover) ease,transform var(--ss-dur-press) ease}
.ss-raised:hover{box-shadow:var(--ss-raised-shadow-hover)}
.ss-raised:active{transform:translateY(1px);box-shadow:var(--ss-raised-shadow-press)}
/* Recessed: a field, or what holds keys */
.ss-well{background:var(--ss-well-fill);border:1px solid var(--ss-well-line);box-shadow:var(--ss-well-shadow);color:var(--ss-ink)}
.ss-well:focus,.ss-well:focus-within{border-color:var(--ss-accent);box-shadow:var(--ss-well-shadow),0 0 0 3px var(--ss-halo);outline:none}
.ss-tray{background:var(--ss-tray);border:1px solid var(--ss-tray-line);box-shadow:var(--ss-tray-shadow)}

/* The segmented control (board T's look at board U's scale; D-070, D-071; COMPONENTS "Segmented control"): a recessed tray 36 high,
   radius 10 (its pieces' 8 plus the 2 px inset); each choice 32 high, radius 8, 500 at 14 px in ink 2; the chosen one's words in
   ink at 600, with no outline, on one raised piece that slides to the new choice in 200 ms (slideSegment in src/app/motion.js; none
   with reduced motion). A choice's words reserve their 600 width (data-label="<the words>" on the button, or on the span that
   holds the words), so choosing never moves the choices beside it. With no piece (no script) the chosen choice draws its own face. */
.ss-seg{position:relative;display:inline-flex;align-items:center;gap:var(--ss-space-in);height:var(--ss-control);padding:var(--ss-space-in);border-radius:var(--ss-radius-seg);background:var(--ss-tray);box-shadow:var(--ss-tray-shadow)}
.ss-seg>button{position:relative;z-index:1;height:var(--ss-control-bar);padding:0 var(--ss-space-3);display:inline-flex;align-items:center;justify-content:center;gap:var(--ss-space-key);border:1px solid transparent;border-radius:var(--ss-radius-bar);background:transparent;font:500 var(--ss-text-md)/1 var(--ss-font);color:var(--ss-ink-2);white-space:nowrap;transition:color var(--ss-dur-seg) var(--ss-ease-out)}
.ss-seg>button:hover{color:var(--ss-ink)}
.ss-seg>button:focus-visible{outline:3px solid var(--ss-halo);outline-offset:0}
.ss-seg>button[aria-pressed="true"],.ss-seg>button[aria-checked="true"],.ss-seg>button[aria-selected="true"],.ss-seg>button.active{color:var(--ss-ink);font-weight:600}
.ss-seg:not(.has-piece)>button[aria-pressed="true"],.ss-seg:not(.has-piece)>button[aria-checked="true"],.ss-seg:not(.has-piece)>button[aria-selected="true"],.ss-seg:not(.has-piece)>button.active{background:var(--ss-seg-piece-fill);border-color:var(--ss-seg-piece-line);box-shadow:var(--ss-seg-piece-shadow)}
.ss-seg>button[data-label],.ss-seg span[data-label]{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:0}
.ss-seg>button[data-label]::after,.ss-seg span[data-label]::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:600;pointer-events:none;user-select:none}
.ss-seg-piece{position:absolute;z-index:0;top:0;left:0;height:var(--ss-control-bar);width:0;border:1px solid var(--ss-seg-piece-line);border-radius:var(--ss-radius-bar);background:var(--ss-seg-piece-fill);box-shadow:var(--ss-seg-piece-shadow);pointer-events:none;opacity:0}
.ss-seg-piece.is-placed{opacity:1}
.ss-seg.is-sliding>.ss-seg-piece{transition:transform var(--ss-dur-seg) var(--ss-ease-out),width var(--ss-dur-seg) var(--ss-ease-out)}
/* The compact segmented control (P56 part 3, M6): for a dense row of 28 px keys (a panel header, the sheets rail, the canvas
   foot): a 28 px tray, 24 px choices 2 in, radius 9 = 7 + 2, 12 px words. The same tray, piece and slide as .ss-seg. */
.ss-seg--sm{height:var(--ss-control-sm);border-radius:var(--ss-radius-control)}
.ss-seg--sm>button,.ss-seg--sm>.ss-seg-piece{height:calc(var(--ss-control-sm) - 2 * var(--ss-space-in));border-radius:var(--ss-radius-sm)}
.ss-seg--sm>button{padding:0 var(--ss-space-3);font-size:var(--ss-text-xs)}
/* The full-width segmented control (rulings 14, P57-Z3): its choices share the tray's width equally (the proposal panel,
   Compare bids). A choice that cannot be taken shows the disabled ink, never faded; the chosen one stays in ink on its piece. */
.ss-seg--fill{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;width:100%;box-sizing:border-box}
.ss-seg--fill>button{min-width:0;padding:0 var(--ss-space-1)}
.ss-seg>button:disabled{color:var(--ss-ink-disabled);cursor:default}
.ss-seg>button:disabled[aria-pressed="true"],.ss-seg>button:disabled[aria-checked="true"]{color:var(--ss-ink)}
/* Hover (Peter, 2026-09-29): an unchosen choice under the pointer takes the quiet hover fill (--ss-hover), lighter than the
   raised piece and never the chosen look; the chosen choice shows none, and the piece moves only on a click. Only where a
   pointer hovers; the fill eases in the hover time (--ss-dur-hover), and reduced motion turns that off (below). */
@media (hover:hover){.ss-seg>button{transition:color var(--ss-dur-seg) var(--ss-ease-out),background-color var(--ss-dur-hover) var(--ss-ease-out)}.ss-seg>button:not([aria-pressed="true"]):not([aria-checked="true"]):not([aria-selected="true"]):not(.active):not(:disabled):hover{background:var(--ss-hover)}}

/* A switch: a sunk track, blue when on, a raised knob; the knob and the track ease as the segmented piece slides */
.ss-switch{position:relative;display:inline-block;flex:none;width:40px;height:24px;border-radius:12px;background:var(--ss-tray);box-shadow:inset 0 1px 2px rgba(0,0,0,.22);transition:background-color var(--ss-dur-seg) var(--ss-ease-out)}
.ss-switch::after{content:"";position:absolute;left:2px;top:2px;width:20px;height:20px;border-radius:50%;background:var(--ss-knob);box-shadow:var(--ss-knob-shadow);transition:transform var(--ss-dur-seg) var(--ss-ease-out)}
.ss-switch[aria-checked="true"],.ss-switch.is-on,input:checked+.ss-switch,input.ss-switch:checked{background:var(--ss-accent)}
input.ss-switch:checked::after,.ss-switch[aria-checked="true"]::after,.ss-switch.is-on::after,input:checked+.ss-switch::after{transform:translateX(16px)}
/* A switch drawn on its own checkbox (<input type="checkbox" class="ss-switch">): the browser's box, margin and edge off */
input.ss-switch{appearance:none;-webkit-appearance:none;margin:0;border:0;cursor:default}
input.ss-switch:focus-visible{outline:3px solid var(--ss-halo);outline-offset:2px}
input.ss-switch:disabled{opacity:.4}

/* The quiet checkbox (<input type="checkbox" class="ss-check">; POLISH_PLAN 47 and 75, item 9's dialogs board): a 16 px raised box,
   radius 4, a 1 px edge at 3:1 (--ss-field-edge), the check drawn in ink and
   never a blue fill; the halo on keyboard focus only; unavailable in the inactive ink. A checkbox is for any number of independent
   options; a setting that takes effect at once is a switch. Every checkbox in a dialog wears it. */
input.ss-check{appearance:none;-webkit-appearance:none;flex:none;display:inline-grid;place-content:center;box-sizing:border-box;width:16px;height:16px;margin:0;border:1px solid var(--ss-field-edge);border-radius:4px;background:var(--ss-raised);color:var(--ss-ink);vertical-align:middle;cursor:default}   /* off the scale on purpose: a 16 px checkbox's radius is a quarter of its height, 4 (FOUNDATION) */
input.ss-check::before{content:"";width:10px;height:10px;background:currentColor;clip-path:polygon(14% 44%,0 59%,39% 98%,100% 21%,85% 7%,38% 69%);transform:scale(0)}
input.ss-check:checked::before{transform:scale(1)}
input.ss-check:indeterminate::before{width:8px;height:2px;clip-path:none;transform:scale(1)}
input.ss-check:focus{outline:none}
input.ss-check:focus-visible{outline:3px solid var(--ss-halo);outline-offset:2px}
input.ss-check:disabled{border-color:var(--ss-ink-disabled);color:var(--ss-ink-disabled)}

/* A card: raised, radius 12 */
.ss-card{position:relative;border-radius:var(--ss-radius-lg);background:var(--ss-raised);border:1px solid var(--ss-edge);box-shadow:var(--ss-card-shadow)}

/* A dialog: the one shell (item 9, design/item9/dialogs-board.html, approved by Peter 2026-10-08; settings.css .st-dlg's values).
   Raised, radius 16, 24 px in (20 at the foot), no min-height; the title 600 16 px clear of the 28 px x in the corner, one line of
   purpose under it in ink 2, the keys at the bottom right. A long body takes --scroll: the head and foot stay, each with a
   hairline, and the body scrolls between. The scrim behind it is the app's --modal-overlay. */
.ss-dialog{position:relative;box-sizing:border-box;display:flex;flex-direction:column;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);padding:24px 24px 20px;border-radius:var(--ss-radius-xl);background:var(--ss-raised);box-shadow:var(--shadow-modal,var(--ss-menu-shadow));color:var(--ss-ink);font-family:var(--ss-font)}
.ss-dialog-title{margin:0 40px 16px 0;font:600 16px/1.3 var(--ss-font);color:var(--ss-ink)}
.ss-dialog-purpose{margin:-8px 0 16px;font:400 14px/1.45 var(--ss-font);color:var(--ss-ink-2)}
.ss-dialog-label{display:block;margin:0 0 6px;font:500 13px/1.3 var(--ss-font);color:var(--ss-ink)}
.ss-dialog-body{flex:1 1 auto;min-height:0}
.ss-dialog-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}
.ss-dialog--scroll{padding:0}
.ss-dialog--scroll>.ss-dialog-head{flex:none;padding:20px 56px 16px 24px;border-bottom:1px solid var(--ss-rule)}
.ss-dialog--scroll>.ss-dialog-head>.ss-dialog-title{margin:0}
.ss-dialog--scroll>.ss-dialog-body{overflow-y:auto;padding:16px 24px 4px}
.ss-dialog--scroll>.ss-dialog-foot{flex:none;margin:0;padding:16px 24px;border-top:1px solid var(--ss-rule)}

/* A window: the one head and foot of every window, panel and dialog (side-launch rulings 10; DESIGN_RULES "The page standard",
   Windows; the values table of design/item9/window-heads-board.html). src/app/window-head.js writes the head; behaviour (focus,
   the trap, Escape, the move by .ss-window-head) stays with each window. The head is 48 with its hairline inside the 48 (an inset
   shadow, so every item still centres 24 down: the name's 20 px line 14 down, each 28 px key 10 down, the x 12 from the right).
   The name sits on the window's own left edge (16 on a panel, 24 on a dialog), Heading 15/20 on one line, cut with "…"; a count
   Body 14/20 in ink 3, 8 after it on its baseline (the two in .ss-window-label); an add key 8 after them centres beside that
   line. The keys are the quiet 28 px keys, --ss-space-key apart, the x last. A foot only for a commit: Cancel and the primary at
   the right, 8 apart, under a 1 px rule. A footless body ends 24 clear, as a body keeps 24 above a foot's rule; a drawing's well
   (--well) runs to the edges. Below 480 a word key folds into the ⋯ (never one inside a window's own .ss-window-group); on a
   coarse pointer each key has a 44 px hit area and the keys sit 16 apart. One key may lead the name (.ss-window-lead: Versions'
   Back), its glyph on the inset edge. A dialog enters with the foundation's dialog motion (a fade and a grow from 98% in 180,
   the Motion tokens above; off for reduced motion); a floating panel opens where the person works, with none. */
.ss-window{--ss-window-inset:16px;position:relative;box-sizing:border-box;display:flex;flex-direction:column;max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);color:var(--ss-ink);font-family:var(--ss-font)}
.ss-window--panel{--ss-window-inset:16px;background:var(--ss-panel);border-radius:var(--ss-radius-lg);box-shadow:var(--ss-float-shadow)}
.ss-window--dialog{--ss-window-inset:24px;background:var(--ss-raised);border-radius:var(--ss-radius-xl);box-shadow:var(--shadow-modal,var(--ss-menu-shadow));animation:ss-window-in var(--ss-dur-dialog) var(--ss-ease)}
@keyframes ss-window-in{from{opacity:0;transform:scale(var(--ss-dialog-from))}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ss-window--dialog{animation:none}}
.ss-window-head{flex:none;box-sizing:border-box;display:flex;align-items:center;gap:var(--ss-space-3);min-width:0;height:var(--ss-bar-panel);padding:0 12px 0 var(--ss-window-inset);cursor:default}
.ss-window--panel>.ss-window-head{box-shadow:inset 0 -1px 0 var(--ss-rule)}
.ss-window--dialog.ss-window--scroll>.ss-window-head{box-shadow:inset 0 -1px 0 var(--ss-rule)}
.ss-window-title{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.ss-window-label{flex:0 1 auto;min-width:0;display:flex;align-items:baseline}
.ss-window-name{flex:0 1 auto;min-width:0;margin:0;font:600 var(--ss-text-head)/var(--ss-leading-head) var(--ss-font);letter-spacing:0;color:var(--ss-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-window-count{flex:none;margin-left:var(--ss-space-2);font:400 var(--ss-text-md)/var(--ss-leading-md) var(--ss-font);color:var(--ss-ink-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.ss-window-count:empty{display:none}
.ss-window-add{flex:none;margin-left:var(--ss-space-2)}
.ss-window-head .ss-window-lead{flex:none;margin:0 var(--ss-space-2) 0 -8px;padding:0 8px 0 4px;gap:2px}
.ss-window-head [hidden]{display:none!important}
.ss-window-keys{flex:none;display:flex;align-items:center;gap:var(--ss-space-key);margin-left:auto}
.ss-window-group{display:flex;align-items:center}
.ss-window-key.pg-btn--quiet:active,.ss-window-key.pg-btn--quiet[aria-expanded="true"]{background:var(--ss-hover-open);color:var(--ss-ink);transform:none}
.ss-window-key.pg-ib:disabled{background:transparent;color:var(--ss-ink-disabled)}
a.ss-window-key{text-decoration:none}
.ss-window-head .ss-window-fold{display:none}
.ss-window-body{flex:1 1 auto;min-height:0;padding:0 var(--ss-window-inset) var(--ss-space-5)}
.ss-window-body--well{padding:0}
.ss-window--scroll>.ss-window-body{overflow-y:auto;-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}
.ss-window-foot{flex:none;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-end;gap:var(--ss-space-2);border-top:1px solid var(--ss-rule)}
.ss-window--dialog>.ss-window-foot{padding:16px 24px}
.ss-window--panel>.ss-window-foot{min-height:var(--ss-bar-bottom);padding:0 12px 0 16px}
.ss-window-foot-start{margin-right:auto}
@media (max-width:480px){.ss-window--panel{min-width:calc(100vw - 16px);max-width:calc(100vw - 16px)}.ss-window--dialog{min-width:calc(100vw - 32px);max-width:calc(100vw - 32px)}.ss-window-keys>.ss-window-key--words{display:none}.ss-window-head .ss-window-fold{display:inline-grid}}
@media (pointer:coarse){.ss-window-keys{gap:var(--ss-space-4)}.ss-window-key,.ss-window-head .ss-close{position:relative}.ss-window-key::before,.ss-window-head .ss-close::before{content:"";position:absolute;inset:-8px}}

/* A menu: raised, radius 12 (its 8 px rows 4 in), rows 32 with a quiet hover; opens from 98% in 140 ms */
.ss-menu{padding:var(--ss-space-1);border-radius:var(--ss-radius-lg);background:var(--ss-raised);border:1px solid var(--ss-edge);box-shadow:var(--ss-menu-shadow);animation:ss-menu-in var(--ss-dur-menu) var(--ss-ease-out) 1}
.ss-menu-item{height:var(--ss-row-list);padding:0 var(--ss-space-3);display:flex;align-items:center;gap:var(--ss-space-key);border-radius:var(--ss-radius-bar);font-size:var(--ss-text-md);color:var(--ss-ink)}
.ss-menu-item:hover{background:var(--ss-row-hover)}
@keyframes ss-menu-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}

/* One set of row states for every list, table and menu (board M with board S's hover; D-068; COMPONENTS "Row states"). A grid
   draws the selected block's line round the block, not round each row (as Excel does). */
.ss-row:hover{background:var(--ss-row-hover)}
.ss-row.is-selected,.ss-row[aria-selected="true"]{background:var(--ss-row-sel);box-shadow:var(--ss-row-sel-line)}
.ss-row.is-selected:hover,.ss-row[aria-selected="true"]:hover{background:var(--ss-row-sel-hover)}
.ss-row:focus-visible{outline:none;box-shadow:var(--ss-row-focus)}
.ss-row.is-new{animation:ss-row-flash var(--ss-dur-flash) var(--ss-ease-out) 1}
.ss-row.is-open{background:var(--ss-row-open)}
.ss-idle .ss-row.is-selected,.ss-idle .ss-row[aria-selected="true"]{background:var(--ss-row-sel-idle);box-shadow:var(--ss-row-sel-idle-line)}
@keyframes ss-row-flash{from{background-color:var(--ss-row-flash)}to{background-color:transparent}}

/* A key's name: a small raised cap, 20 high */
.ss-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:var(--ss-control-cap);height:var(--ss-control-cap);padding:0 var(--ss-space-1);border-radius:var(--ss-radius-cap);border:1px solid var(--ss-raised-line);background:var(--ss-raised-fill);color:var(--ss-ink-2);font:500 var(--ss-text-xs)/1 var(--ss-font)}

/* Moving things (src/app/motion.js): lift, land, settle. The lifted thing rises straight up, a little larger, with a shadow; no tilt. */
.ss-lifted{box-shadow:var(--ss-lift-shadow);transform:translateY(-2px) scale(1.02);transition:transform var(--ss-dur-menu) var(--ss-ease-out),box-shadow var(--ss-dur-menu) var(--ss-ease-out)}
/* The toast: a bar, 44 high, radius 14 (its 32 px action's 8 plus 6) */
.ss-toast{display:flex;align-items:center;gap:var(--ss-space-2);min-height:var(--ss-bar-bottom);padding:0 var(--ss-space-key) 0 var(--ss-space-3);border-radius:var(--ss-radius-tray);background:var(--ss-toast);color:var(--ss-toast-ink);font-size:var(--ss-text-sm);box-shadow:var(--ss-toast-shadow)}
.ss-toast b{font-weight:600}
.ss-toast-action{margin-left:auto;height:var(--ss-control-bar);padding:0 var(--ss-space-3);border:0;border-radius:var(--ss-radius-bar);background:rgba(127,127,127,.22);color:var(--ss-toast-ink);font:600 var(--ss-text-xs)/1 var(--ss-font)}
@media (prefers-reduced-motion:reduce){.ss-menu,.ss-row.is-new{animation:none}.ss-raised:active{transform:none}.ss-lifted{transform:none}.ss-seg>button,.ss-seg.is-sliding>.ss-seg-piece,.ss-switch,.ss-switch::after{transition:none}}

/* Added in the app: the live-text lockup (the app header, account, share and response screens). "SiteScale" in Plex
   Sans SemiBold beside the mark; corners and word take the page's ink, the origin square the logo blue. The minimum
   size for the full lockup is 20px; below that use the mark alone. The name is SiteScale (D-028): a "Pro" span still in
   older markup is not shown. */
.ss-lockup{display:inline-flex;align-items:center;gap:.31em;font-family:var(--ss-font);font-size:38px;font-weight:600;letter-spacing:-.015em;line-height:1;color:var(--ss-ink);text-decoration:none;white-space:nowrap}
.ss-lockup__mark{width:.86em;height:.86em;flex:none;display:block}
.ss-lockup__mark .ss-corners{fill:currentColor}
.ss-lockup__mark .ss-origin{fill:var(--ss-logo-blue)}
:root[data-theme="dark"] .ss-lockup__mark .ss-origin{fill:var(--ss-logo-blue-on-ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ss-lockup__mark .ss-origin{fill:var(--ss-logo-blue-on-ink)}}
.ss-lockup--reverse{color:var(--ss-page)}
.ss-lockup--stacked{flex-direction:column;gap:.29em}
.ss-lockup--header{font-size:20px}
.ss-lockup--sm{font-size:24px}
.ss-lockup--lg{font-size:56px}
.ss-lockup--framed{padding:.287em}

/* Changed in the app: transitions take 0.01ms, not 0s, so a transition still ends and its transitionend still fires. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:0s!important;scroll-behavior:auto!important}}