/* web/design.css — Empire MAX. The design file (docs/DESIGN_SYSTEM_EMPIRE_MAX.md) translated to CSS:
   tokens (§2 colour ladders, §3 type, §4 shape and space, §6 motion), the background layers (§7),
   and the components (§5). Consumed by the site, the sign-in shell, the interview, the workspace and
   the helper board. Cage: no colour outside the ladder tokens; gold once per screen (class .is-gold on
   exactly one element); state is a dot plus a word, never colour alone; every duration reads a --dur-*
   token so prefers-reduced-motion zeroes them all, and the one reading dwell (--dwell-toast) is a token
   too, so no script carries a time literal. No inline styles anywhere (CSP). */

/* ---------- 1 · constants and the ink ladder (default theme) ---------- */
:root {
  color-scheme: dark;
  --ink: #17171C; --gold: #B89438; --paper: #F5F3EA; --green: #2A7043; --red: #9E2E24; --grey: #6B6B75;
  --gold-dim: #8A6D24; --gold-hi: #C9A24A;
  /* DECISION NEEDED (design §2): amber is named but has no hex in the file; placed between gold and red. */
  --amber: #B26A2C;
  --canvas: #17171C; --card: #1E1E24; --raised: #26262D; --input: #2E2E36;
  --hair: rgba(245, 243, 234, .08); --hair-strong: rgba(245, 243, 234, .16);
  --text: #F5F3EA; --text-2: #9B9BA5; --text-2-on-input: var(--text-2);
  --accent: var(--gold);
  --glass: rgba(30, 30, 36, .78);
  --control: var(--input); --control-text: var(--paper);
  --control-hover: color-mix(in srgb, var(--input) 86%, var(--paper));
  --plate-filter: none;
  --shadow-float: 0 24px 64px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .24);
  --wash-color: var(--green);
  /* §3 type */
  --font-sans: 'IBM Plex Sans Arabic', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-meta: 11px; --lh-meta: 16px;
  --fs-caption: 12px; --lh-caption: 16px;   /* §5 card caption */
  --fs-body: 13px; --lh-body: 20px;
  --fs-row: 14px; --lh-row: 20px;
  --fs-card: 16px; --lh-card: 24px;
  --fs-section: 22px; --lh-section: 28px;
  --fs-page: 28px; --lh-page: 34px;
  --fs-hero: 40px; --lh-hero: 44px;
  --fs-display: 88px; --lh-display: 1;
  --track-display: -.01em; --track-wordmark: .14em;
  /* §4 shape and space */
  --r-input: 8px; --r-card: 12px; --r-pill: 999px; --r-circle: 50%;
  --u: 4px; --pad-card: 12px; --pad-card-lg: 16px; --gap-grid: 8px; --gap-grid-lg: 10px; --gap-section: 14px;
  --row-24: 24px; --row-28: 28px; --row-36: 36px; --row-44: 44px;
  --target: 44px;
  /* §6 motion — every duration is the table's figure times --m, the motion multiplier (1, or 0 under reduced motion) */
  --m: 1;
  --dur-hover: calc(120ms * var(--m)); --ease-hover: ease-out;
  --dur-open: calc(200ms * var(--m)); --ease-open: cubic-bezier(.2, .7, .2, 1);
  --dur-env: calc(400ms * var(--m)); --ease-env: ease-out;
  --dur-window-enter: calc(400ms * var(--m)); --ease-window-enter: cubic-bezier(.2, .7, .2, 1);
  --dur-window-close: calc(260ms * var(--m)); --ease-window-close: ease-in;
  --dur-window-min: calc(340ms * var(--m)); --ease-window-min: cubic-bezier(.4, 0, .8, .4);
  --dur-wash: calc(800ms * var(--m)); --ease-wash: ease-out;
  --dur-stagger: calc(60ms * var(--m)); --dur-gauge: calc(600ms * var(--m)); --dur-bump: calc(300ms * var(--m));
  --dur-pendulum: calc(5s * var(--m)); --dur-scan: calc(1.8s * var(--m)); --dur-field-a: calc(60s * var(--m)); --dur-field-b: calc(74s * var(--m)); --dur-breathe: calc(4s * var(--m)); --dur-sweep: calc(6s * var(--m));
  --dur-spin: calc(900ms * var(--m));
  /* a reading dwell, not a motion: the design file's 3.8 s toast bubble. It is deliberately NOT multiplied
     by --m — reduced motion zeroes movement, it must not make a line vanish before it can be read. */
  --dwell-toast: 3800ms;
}
:root[data-theme="soft"], [data-theme="soft"] {
  color-scheme: light;
  --canvas: #F5F3EA; --card: #FBFAF5; --raised: #FFFFFF; --input: #ECEAE0;
  --hair: rgba(23, 23, 28, .1); --hair-strong: rgba(23, 23, 28, .2);
  --text: #17171C; --text-2: #6B6B75;
  /* secondary on the input step is 4.37:1 in this theme; placeholders and hints mix toward ink to pass 4.5 */
  --text-2-on-input: color-mix(in srgb, var(--text-2) 78%, var(--text));
  --accent: var(--gold-dim);
  --glass: rgba(251, 250, 245, .8);
  --control: var(--ink); --control-text: var(--paper);
  --control-hover: color-mix(in srgb, var(--ink) 86%, var(--paper));
  --plate-filter: invert(1) hue-rotate(180deg);
  --shadow-float: 0 24px 64px rgba(23, 23, 28, .16), 0 2px 8px rgba(23, 23, 28, .08);
}
:root[data-theme="dusk"], [data-theme="dusk"] {
  color-scheme: dark;
  --canvas: #1A1611; --card: #211C16; --raised: #29231C; --input: #312A22;
  --accent: var(--gold-hi);
  --glass: rgba(33, 28, 22, .78);
  --control: var(--input); --control-text: var(--paper);
  --control-hover: color-mix(in srgb, var(--input) 86%, var(--paper));
}

/* ---------- 2 · base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%;
  color: var(--text); background: var(--canvas);
}
body { margin: 0; min-height: 100vh; background: var(--canvas); color: var(--text); overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
::selection { background: var(--hair-strong); }
code, kbd, .mono { font-family: var(--font-mono); }
.num { direction: ltr; unicode-bidi: isolate; }

/* ---------- 3 · type ---------- */
.t-meta { font-size: var(--fs-meta); line-height: var(--lh-meta); }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.t-row { font-size: var(--fs-row); line-height: var(--lh-row); }
.t-card { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; }
.t-section { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; }
.t-page { font-size: var(--fs-page); line-height: var(--lh-page); font-weight: 500; }
.t-hero { font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: 500; }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 500; }
.t-section, .t-page, .t-hero, .t-display, .hero-figure { letter-spacing: var(--track-display); }
:lang(ar) .t-section, :lang(ar) .t-page, :lang(ar) .t-hero, :lang(ar) .t-display, :lang(ar) .hero-figure { letter-spacing: 0; }
.w500 { font-weight: 500; }
.text-2 { color: var(--text-2); }
.wordmark { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 500; letter-spacing: var(--track-wordmark); text-transform: uppercase; }
.eyebrow, .label, .caption { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); font-weight: 400; }
.caption { font-size: var(--fs-caption); line-height: var(--lh-caption); }
.is-gold { color: var(--accent); }

/* ---------- 4 · surfaces ---------- */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); }
.card { display: flex; flex-direction: column; gap: var(--u); background: var(--card); border: 1px solid var(--hair); border-radius: var(--r-card); padding: var(--pad-card); min-width: 0; }
.card-lg { padding: var(--pad-card-lg); }
.card.glass { background: var(--glass); }
.card-value { font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; }
.card-value .unit { font-size: var(--fs-caption); font-weight: 400; color: var(--text-2); margin-inline-start: var(--u); }
.hairline { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* hero figure — the only place gold may appear (§5) */
.hero-figure { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-hero); line-height: var(--lh-hero); font-weight: 500; font-variant-numeric: tabular-nums; }
.hero-figure .unit { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; color: var(--text-2); }
.hero-delta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); }

/* rows — fixed heights, hairline top, [dot] [name] [value] */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; block-size: var(--row-36); border-top: 1px solid var(--hair); font-size: var(--fs-body); line-height: var(--lh-body); }
.row:first-child { border-top: 0; }
.row-24 { block-size: var(--row-24); } .row-28 { block-size: var(--row-28); } .row-44 { block-size: var(--row-44); }
.row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title { font-size: var(--fs-row); }
.row-sub { color: var(--text-2); font-size: var(--fs-meta); }
.row-value { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-value .unit, .row-value.text-2 { color: var(--text-2); }
.dot { inline-size: 6px; block-size: 6px; border-radius: var(--r-circle); background: var(--grey); flex: none; display: inline-block; }
.dot-7 { inline-size: 7px; block-size: 7px; }
.dot-green { background: var(--green); } .dot-red { background: var(--red); } .dot-amber { background: var(--amber); } .dot-grey { background: var(--grey); }

/* status line — one clause, dot plus words */
.status-line { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-2); white-space: nowrap; min-width: 0; }
.status-line b { font-weight: 500; color: var(--text); }

/* message line — state → reason → limit, text in full colour, the dot carries the state */
.line { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-body); line-height: var(--lh-body); min-block-size: var(--lh-body); color: var(--text); }
.line .dot { margin-block-start: 7px; }
.line[data-state="error"] .dot { background: var(--red); }
.line[data-state="ok"] .dot { background: var(--green); }
.line[data-state="wait"] .dot { background: var(--amber); }
.line[data-state="idle"] .dot, .line:not([data-state]) .dot { background: var(--grey); }
.line:empty, .line[data-state="none"] { visibility: hidden; }

/* ---------- 5 · controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; block-size: var(--row-36); padding-inline: 14px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-body); font-weight: 500; line-height: 1; white-space: nowrap; color: var(--text); position: relative; transition: background-color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.btn-sm { block-size: 32px; padding-inline: 12px; }
.btn-lg { block-size: 38px; padding-inline: 16px; }
.btn-block { inline-size: 100%; }
.btn-primary { background: var(--control); color: var(--control-text); }
.btn-primary:hover, .btn-primary.is-hover { background: var(--control-hover); }
.btn-secondary { border-color: var(--hair-strong); }
.btn-secondary:hover, .btn-secondary.is-hover { border-color: var(--text-2); }
.btn-tertiary { color: var(--text-2); padding-inline: 8px; }
.btn-tertiary:hover, .btn-tertiary.is-hover { color: var(--text); }
.btn.is-focus, .btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { cursor: not-allowed; color: var(--text-2); background: transparent; border-color: var(--hair); }
.btn-primary:disabled, .btn-primary[aria-disabled="true"] { background: var(--raised); border-color: transparent; }
.btn-tertiary:disabled, .btn-tertiary[aria-disabled="true"] { border-color: transparent; }
.btn .kbd { font-family: var(--font-mono); font-size: var(--fs-meta); color: inherit; opacity: 1; }
.btn.is-busy { pointer-events: none; }
.btn.is-busy::after { content: ""; inline-size: 12px; block-size: 12px; border-radius: 50%; border: 1.5px solid currentColor; border-inline-end-color: transparent; animation: spin var(--dur-spin) linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.toggle { --toggle-w: 34px; --toggle-h: 20px; position: relative; display: inline-block; inline-size: var(--toggle-w); block-size: var(--toggle-h); border-radius: var(--r-pill); background: var(--input); flex: none; transition: background-color var(--dur-hover) var(--ease-hover); vertical-align: middle; }
.toggle::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px; border-radius: var(--r-circle); background: var(--text); transition: inset-inline-start var(--dur-open) var(--ease-open), background-color var(--dur-hover) var(--ease-hover); }
.toggle[aria-checked="true"] { background: var(--green); }
.toggle[aria-checked="true"]::after { inset-inline-start: 16px; background: var(--paper); }
.toggle-sm { --toggle-w: 26px; --toggle-h: 16px; }
.toggle-sm::after { inline-size: 12px; block-size: 12px; }
.toggle-sm[aria-checked="true"]::after { inset-inline-start: 12px; }
.toggle:disabled, .toggle[aria-disabled="true"] { cursor: not-allowed; background: var(--raised); }
.toggle:disabled::after { background: var(--text-2); }
.toggle-row { display: flex; align-items: center; gap: 10px; block-size: var(--row-36); }
.toggle-row .toggle-word { color: var(--text-2); font-size: var(--fs-caption); margin-inline-start: auto; }

.chip { --chip-h: 28px; display: inline-flex; align-items: center; gap: 6px; block-size: var(--chip-h); padding-inline: 12px; border-radius: var(--r-pill); border: 1px solid var(--hair-strong); font-size: var(--fs-caption); line-height: 1; color: var(--text); position: relative; white-space: nowrap; transition: background-color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
.chip:hover, .chip.is-hover { border-color: var(--text-2); }
.chip[aria-pressed="true"], .chip.is-active { background: var(--control); color: var(--control-text); border-color: transparent; }
.chip:disabled, .chip[aria-disabled="true"] { color: var(--text-2); border-color: var(--hair); cursor: not-allowed; }
.chips { display: flex; flex-wrap: wrap; gap: var(--gap-grid); }

.input { display: block; inline-size: 100%; block-size: var(--row-36); padding-inline: 10px; border-radius: var(--r-input); background: var(--input); border: 1px solid transparent; font-size: var(--fs-row); color: var(--text); transition: border-color var(--dur-hover) var(--ease-hover); }
.input::placeholder { color: var(--text-2-on-input); opacity: 1; }
.input:hover { border-color: var(--hair-strong); }
.input:focus, .input.is-focus { border-color: var(--text-2); }
.input:focus-visible, .input.is-focus { outline: 2px solid var(--text); outline-offset: 1px; }
.input:disabled { color: var(--text-2); background: var(--card); border-color: var(--hair); cursor: not-allowed; }
.input-lg { block-size: var(--row-44); font-size: var(--fs-card); }
.field { display: flex; flex-direction: column; gap: 6px; }

/* six-box one-time code (§8) — digits run left to right in both directions */
.code-boxes { display: flex; gap: 8px; direction: ltr; justify-content: center; }
.code-box { inline-size: 44px; block-size: 54px; border-radius: var(--r-input); background: var(--input); border: 1px solid transparent; text-align: center; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; padding: 0; caret-color: var(--text); transition: border-color var(--dur-hover) var(--ease-hover); }
.code-box:focus, .code-box.is-focus { border-color: var(--text); outline: none; }
.code-box:disabled { color: var(--text-2); background: var(--card); border-color: var(--hair); }

/* passcode keypad (§8) */
.pin-dots { display: flex; gap: 10px; justify-content: center; block-size: 24px; align-items: center; }
.pin-dots i { inline-size: 10px; block-size: 10px; border-radius: var(--r-circle); border: 1px solid var(--hair-strong); transition: background-color var(--dur-hover) var(--ease-hover); }
.pin-dots i.on { background: var(--text); border-color: var(--text); }
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; justify-content: center; }
.key { block-size: 56px; border-radius: var(--r-card); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); border: 1px solid var(--hair); font-size: var(--fs-section); font-weight: 400; display: grid; place-items: center; transition: background-color var(--dur-hover) var(--ease-hover); }
.key:hover, .key.is-hover { background: var(--input); }
.key-mono { font-family: var(--font-mono); font-size: var(--fs-card); }

/* biometric frame (§6 · §8) */
.bio { inline-size: 96px; block-size: 96px; border-radius: var(--r-circle); border: 1px solid var(--hair-strong); position: relative; overflow: hidden; display: grid; place-items: center; background: var(--glass); transition: background-color var(--dur-env) var(--ease-env); }
.bio::after { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; background: var(--text); animation: scan var(--dur-scan) linear infinite; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(96px); } }
.bio.is-idle::after { animation-play-state: paused; }
.bio.is-ok { background: color-mix(in srgb, var(--green) 45%, transparent); border-color: var(--green); }
.bio.is-ok::after { display: none; }
.bio .bio-glyph { inline-size: 36px; block-size: 36px; fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bio .bio-check { display: none; inline-size: 36px; block-size: 36px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bio.is-ok .bio-glyph { display: none; }
.bio.is-ok .bio-check { display: block; }

/* profile card (§8 sign in) */
.profile { display: flex; align-items: center; gap: 10px; inline-size: 100%; min-block-size: 56px; padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-card); background: var(--card); text-align: start; transition: border-color var(--dur-hover) var(--ease-hover); }
.profile:hover, .profile.is-hover { border-color: var(--hair-strong); }
.profile-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.profile-name { font-size: var(--fs-row); line-height: var(--lh-row); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { --avatar: 32px; inline-size: var(--avatar); block-size: var(--avatar); border-radius: var(--r-circle); background: var(--input); border: 1px solid var(--hair); display: grid; place-items: center; font-size: var(--fs-caption); font-weight: 500; flex: none; color: var(--text); }
.avatar-sm { --avatar: 22px; font-size: 10px; }

/* ---------- 6 · charts and instruments ---------- */
.sparkline { display: block; inline-size: 100%; block-size: 48px; direction: ltr; overflow: visible; }
.sparkline polyline, .sparkline path { fill: none; stroke: var(--text); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sparkline .s2 { stroke: var(--hair-strong); }
.chart-range { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); }
.figure { font-variant-numeric: tabular-nums; }
.figure .unit { color: var(--text-2); font-weight: 400; font-size: var(--fs-caption); margin-inline-start: var(--u); }

.gauge { position: relative; inline-size: 96px; block-size: 96px; display: grid; place-items: center; flex: none; }
.gauge svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 6; }
.gauge .track { stroke: var(--input); }
.gauge .value { stroke: var(--text); transition: stroke-dasharray var(--dur-gauge) var(--ease-env); } /* dasharray is a presentation attribute: "<value> 251.33" (2π·40), set by script so it draws in */
.gauge-figure { position: relative; font-size: var(--fs-card); line-height: var(--lh-card); font-weight: 500; font-variant-numeric: tabular-nums; text-align: center; }
.gauge-figure .unit { display: block; font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: 400; color: var(--text-2); }

/* ---------- 7 · popover, window, icon, mark ---------- */
.popover { display: inline-flex; flex-direction: column; min-inline-size: 208px; padding: 6px; border-radius: var(--r-card); border: 1px solid var(--hair-strong); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); box-shadow: var(--shadow-float); animation: pop-in var(--dur-open) var(--ease-open); }
@keyframes pop-in { from { opacity: 0; transform: translateY(6px) scale(.985); } }
.popover-row { display: flex; align-items: center; gap: 8px; block-size: 32px; padding-inline: 8px; border-radius: var(--r-input); font-size: var(--fs-body); inline-size: 100%; white-space: nowrap; transition: background-color var(--dur-hover) var(--ease-hover); }
.popover-row:hover, .popover-row.is-hover, .popover-row:focus-visible { background: var(--input); outline: none; }
.popover-row kbd { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-meta); color: var(--text-2-on-input); }
.popover-row .dot { flex: none; }
.popover-sep { block-size: 1px; background: var(--hair); margin: 4px 0; }
.popover-head { font-size: var(--fs-meta); color: var(--text-2); padding: 4px 8px; }

.window { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--r-card); border: 1px solid var(--hair); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); overflow: hidden; animation: window-enter var(--dur-window-enter) var(--ease-window-enter) backwards; transition: border-color var(--dur-hover) var(--ease-hover), box-shadow var(--dur-hover) var(--ease-hover); }
.window.is-focused { border-color: var(--hair-strong); box-shadow: var(--shadow-float); }
.window:focus-visible { outline: none; } /* a window's focus is its brighter hairline and shadow; controls inside keep their rings */
@keyframes window-enter { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
.window.is-closing { animation: window-close var(--dur-window-close) var(--ease-window-close) forwards; }
@keyframes window-close { to { opacity: 0; transform: scale(.96); filter: blur(6px); } }
.window.is-minimising { animation: window-min var(--dur-window-min) var(--ease-window-min) forwards; }
@keyframes window-min { to { opacity: 0; transform: translateY(48vh) scale(.24); } }
.window-bar { display: flex; align-items: center; gap: 8px; block-size: var(--row-36); padding-inline: 10px; border-bottom: 1px solid var(--hair); flex: none; user-select: none; -webkit-user-select: none; cursor: default; touch-action: none; }
.window-lights { display: flex; gap: 6px; flex: none; }
.window-light { inline-size: 11px; block-size: 11px; border-radius: var(--r-circle); background: var(--input); border: 1px solid var(--hair-strong); padding: 0; position: relative; transition: background-color var(--dur-hover) var(--ease-hover), border-color var(--dur-hover) var(--ease-hover); }
.window-bar:hover .window-light:nth-child(1), .window-bar.is-hover .window-light:nth-child(1) { background: var(--red); border-color: var(--red); }
.window-bar:hover .window-light:nth-child(2), .window-bar.is-hover .window-light:nth-child(2) { background: var(--amber); border-color: var(--amber); }
.window-bar:hover .window-light:nth-child(3), .window-bar.is-hover .window-light:nth-child(3) { background: var(--green); border-color: var(--green); }
.window-title { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; }
.window-name { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; white-space: nowrap; }
.window-sub { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.window-body { display: flex; flex-direction: column; gap: var(--gap-grid-lg); padding: var(--pad-card); min-height: 0; overflow: auto; }
.window-resize { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 18px; block-size: 18px; cursor: nwse-resize; }
html[dir="rtl"] .window-resize { cursor: nesw-resize; }
.window-resize::after { content: ""; position: absolute; inset-inline-end: 5px; inset-block-end: 5px; inline-size: 6px; block-size: 6px; border-inline-end: 1px solid var(--hair-strong); border-block-end: 1px solid var(--hair-strong); }
.snap-ghost { position: absolute; border: 1px dashed var(--hair-strong); border-radius: var(--r-card); pointer-events: none; }

/* HUD layouts inside a window (§8 window archetype) */
.metric-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-grid); }
.panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid-lg); }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; block-size: var(--row-24); }
@media (max-width: 720px) { .metric-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .panels { grid-template-columns: minmax(0, 1fr); } }

.app-icon { --tint: 184 148 56; position: relative; display: inline-grid; place-items: center; inline-size: 18px; block-size: 18px; border-radius: 5px; flex: none; color: var(--text); background: radial-gradient(120% 90% at 50% 0%, rgb(var(--tint) / .34), transparent 70%), var(--raised); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 1px var(--hair); }
.app-icon svg { inline-size: 62%; block-size: 62%; overflow: visible; }
.app-icon .g-fill { fill: currentColor; opacity: .22; stroke: none; }
.app-icon .g-stroke { fill: none; stroke: currentColor; stroke-width: 1.45; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.app-icon-22 { inline-size: 22px; block-size: 22px; border-radius: 6px; }
.app-icon-28 { inline-size: 28px; block-size: 28px; border-radius: 8px; }
.tint-gold { --tint: 184 148 56; } .tint-green { --tint: 42 112 67; } .tint-grey { --tint: 107 107 117; } .tint-paper { --tint: 245 243 234; } .tint-red { --tint: 158 46 36; } .tint-amber { --tint: 178 106 44; }
.app-icon.is-bump { animation: bump var(--dur-bump) var(--ease-hover); }
@keyframes bump { 30% { transform: scale(.84); } }

/* identity mark — hairline ring, crown of five strokes, one gold point */
.mark { display: inline-block; inline-size: 28px; block-size: 28px; color: var(--text); flex: none; }
.mark svg { inline-size: 100%; block-size: 100%; overflow: visible; }
.mark .ring { fill: none; stroke: var(--hair-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mark .crown { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mark .point { fill: var(--accent); }
.mark-17 { inline-size: 17px; block-size: 17px; }
.mark-96 { inline-size: 96px; block-size: 96px; }
.mark-boot .ring { animation: breathe var(--dur-breathe) ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes breathe { 50% { transform: scale(1.06); stroke: var(--text-2); } }
.mark-boot .sweep { fill: none; stroke: var(--text); stroke-width: 1; stroke-dasharray: 8 86; stroke-linecap: round; opacity: .6; transform-origin: 50% 50%; animation: sweep var(--dur-sweep) linear infinite; vector-effect: non-scaling-stroke; }
@keyframes sweep { to { transform: rotate(360deg); } }
.mark-ambient { animation: pendulum var(--dur-pendulum) ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes pendulum { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }

/* ---------- 8 · shell pieces: menu bar, pills, toast, wash ---------- */
.menubar { display: flex; align-items: center; gap: 8px; block-size: 32px; padding-inline: 10px; border-bottom: 1px solid var(--hair); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); font-size: var(--fs-caption); line-height: var(--lh-caption); position: relative; z-index: 2; }
.menubar .clock { font-variant-numeric: tabular-nums; unicode-bidi: isolate; margin-inline-start: auto; }
.pill { display: inline-flex; align-items: center; gap: 6px; block-size: 22px; padding-inline: 8px; border-radius: var(--r-pill); border: 1px solid var(--hair); white-space: nowrap; font-size: var(--fs-meta); line-height: 1; }
.toast { position: fixed; inset-block-end: 24px; inset-inline-start: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; block-size: var(--row-36); padding-inline: 14px; border-radius: var(--r-pill); border: 1px solid var(--hair-strong); background: var(--glass); -webkit-backdrop-filter: blur(30px) saturate(140%); backdrop-filter: blur(30px) saturate(140%); box-shadow: var(--shadow-float); font-size: var(--fs-body); max-inline-size: calc(100% - 32px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 20; animation: pop-in var(--dur-open) var(--ease-open); }
html[dir="rtl"] .toast { transform: translateX(50%); }
.wash { position: fixed; inset: 0; pointer-events: none; z-index: 30; opacity: 0; background: radial-gradient(circle at 50% 50%, var(--wash-color) 0%, transparent 62%); }
.wash.is-on { animation: wash var(--dur-wash) var(--ease-wash) forwards; }
@keyframes wash { from { opacity: .32; } to { opacity: 0; } }
.wash-green { --wash-color: var(--green); } .wash-red { --wash-color: var(--red); } .wash-amber { --wash-color: var(--amber); } .wash-grey { --wash-color: var(--grey); }
.stagger > * { animation: rise-in var(--dur-open) var(--ease-open) backwards; }
.stagger > :nth-child(2) { animation-delay: calc(var(--dur-stagger) * 1); } .stagger > :nth-child(3) { animation-delay: calc(var(--dur-stagger) * 2); } .stagger > :nth-child(4) { animation-delay: calc(var(--dur-stagger) * 3); } .stagger > :nth-child(5) { animation-delay: calc(var(--dur-stagger) * 4); } .stagger > :nth-child(6) { animation-delay: calc(var(--dur-stagger) * 5); } .stagger > :nth-child(n+7) { animation-delay: calc(var(--dur-stagger) * 6); }
@keyframes rise-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- 9 · background layers (§7) ---------- */
.bg { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; background: var(--canvas); }
.bg > * { position: absolute; inset: 0; }
/* 1 · the plate. Slot for the Higgsfield video (object-fit cover, 92 % opacity, theme filter); in the soft
   theme the filter inverts and hue-rotates the clip. Until the clip lands the plate is the flat canvas
   colour and nothing else: R8.4 forbids a generic gradient, and §7 builds depth in LAYERS — the two light
   fields (.bg-fields), the floor grid (.bg-grid), the grain (.bg-grain) and the particle field
   (.bg-particles) above this element are the depth. A gradient here would paint what they are meant to
   build, and would still be a gradient once the clip is dropped in. */
.bg-plate { background: var(--canvas); }
.bg-plate video { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; opacity: .92; filter: var(--plate-filter); }
/* 2 · two slow light fields in opposite directions */
.bg-fields::before, .bg-fields::after { content: ""; position: absolute; border-radius: var(--r-circle); inline-size: 70vmax; block-size: 70vmax; }
.bg-fields::before { background: var(--gold); opacity: .16; filter: blur(60px); inset-block-start: -30vmax; inset-inline-start: -20vmax; animation: field-a var(--dur-field-a) ease-in-out infinite alternate; }
.bg-fields::after { background: var(--grey); opacity: .14; filter: blur(80px); inset-block-end: -35vmax; inset-inline-end: -25vmax; animation: field-b var(--dur-field-b) ease-in-out infinite alternate; }
@keyframes field-a { to { transform: translate(14vmax, 10vmax); } }
@keyframes field-b { to { transform: translate(-12vmax, -12vmax); } }
/* 3 · perspective floor grid, 80 px hairline cells, masked to the bottom 46 % */
.bg-grid { inset: auto -50% 0; inline-size: 200%; block-size: 46%; background-image: linear-gradient(var(--hair-strong) 1px, transparent 1px), linear-gradient(90deg, var(--hair-strong) 1px, transparent 1px); background-size: 80px 80px; transform: perspective(700px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%); mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%); }
/* 4 · film grain, overlay, 11 % */
.bg-grain { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); opacity: .11; mix-blend-mode: overlay; }
/* 5 · rising particle field: 22 dots of 1–3 px, 28–64 s each, negative delays so it is already moving on load */
.bg-particles i { position: absolute; inset-block-end: -4px; inset-inline-start: var(--x); inline-size: 2px; block-size: 2px; border-radius: var(--r-circle); background: var(--text); opacity: .18; animation: rise calc(var(--d) * var(--m)) linear infinite; animation-delay: var(--l); }
.bg-particles i:nth-child(3n+2) { inline-size: 1px; block-size: 1px; }
.bg-particles i:nth-child(3n) { inline-size: 3px; block-size: 3px; }
@keyframes rise { to { transform: translateY(-115vh); } }
.bg-particles i:nth-child(1) { --x: 3%; --d: 41s; --l: -12s; }
.bg-particles i:nth-child(2) { --x: 8%; --d: 58s; --l: -31s; }
.bg-particles i:nth-child(3) { --x: 13%; --d: 33s; --l: -5s; }
.bg-particles i:nth-child(4) { --x: 19%; --d: 47s; --l: -22s; }
.bg-particles i:nth-child(5) { --x: 24%; --d: 62s; --l: -40s; }
.bg-particles i:nth-child(6) { --x: 29%; --d: 29s; --l: -9s; }
.bg-particles i:nth-child(7) { --x: 34%; --d: 53s; --l: -27s; }
.bg-particles i:nth-child(8) { --x: 38%; --d: 36s; --l: -14s; }
.bg-particles i:nth-child(9) { --x: 43%; --d: 64s; --l: -50s; }
.bg-particles i:nth-child(10) { --x: 47%; --d: 44s; --l: -3s; }
.bg-particles i:nth-child(11) { --x: 52%; --d: 31s; --l: -19s; }
.bg-particles i:nth-child(12) { --x: 56%; --d: 55s; --l: -36s; }
.bg-particles i:nth-child(13) { --x: 61%; --d: 39s; --l: -8s; }
.bg-particles i:nth-child(14) { --x: 65%; --d: 49s; --l: -25s; }
.bg-particles i:nth-child(15) { --x: 70%; --d: 28s; --l: -16s; }
.bg-particles i:nth-child(16) { --x: 74%; --d: 60s; --l: -44s; }
.bg-particles i:nth-child(17) { --x: 79%; --d: 35s; --l: -2s; }
.bg-particles i:nth-child(18) { --x: 83%; --d: 51s; --l: -30s; }
.bg-particles i:nth-child(19) { --x: 88%; --d: 42s; --l: -11s; }
.bg-particles i:nth-child(20) { --x: 92%; --d: 57s; --l: -38s; }
.bg-particles i:nth-child(21) { --x: 96%; --d: 30s; --l: -7s; }
.bg-particles i:nth-child(22) { --x: 99%; --d: 46s; --l: -21s; }
/* 6 · bottom vignette to seat the dock */
.bg-vignette { background: linear-gradient(to top, rgba(0, 0, 0, .42), transparent 32%); }
[data-theme="soft"] .bg-vignette { background: linear-gradient(to top, rgba(23, 23, 28, .12), transparent 32%); }
/* the antigravity set is one switch */
html[data-antigravity="off"] .bg-particles { display: none; }
html[data-antigravity="off"] .bg-fields::before, html[data-antigravity="off"] .bg-fields::after { animation: none; }

/* ---------- 10 · layout helpers (gaps, never margins) ---------- */
.stack { display: flex; flex-direction: column; gap: var(--gap-grid); }
.stack-lg { display: flex; flex-direction: column; gap: var(--gap-section); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap-grid); }
.between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-grid); }
.grow { flex: 1; min-width: 0; }
.center { display: grid; place-items: center; }
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 11 · touch targets (§11): 44 px hit areas without changing the drawn size ---------- */
@media (pointer: coarse) {
  .btn, .input, .profile, .popover-row, .key, .code-box { min-block-size: var(--target); }
  .btn-sm::before { content: ""; position: absolute; inset: -8px; }
  .chip, .toggle, .window-light { position: relative; }
  /* A control drawn smaller than 44 px owes 44 px of hit area, so each pseudo-element's inset is derived
     from the DRAWN size rather than fixed at -8 px: a chip is 28 px in the sheet, 24 px in the app's
     language switch and 22 px in the console's, and a toggle is 20 px or 16 px (R3-9). */
  .chip::before { content: ""; position: absolute; inset: calc((var(--chip-h) - var(--target)) / 2); }
  .toggle::before { content: ""; position: absolute; inset-block: calc((var(--toggle-h) - var(--target)) / 2); inset-inline: calc((var(--toggle-w) - var(--target)) / 2); }
  /* The three window lights are 11 px circles 6 px apart: each cannot own a 44 px square without covering
     its neighbours, and overlapping hit areas close the wrong window. On a touch pointer they are drawn a
     little larger and spaced to a 24 px pitch, and each takes the full 44 px of the title bar's height by
     its own 24 px of width — the largest area available that never overlaps (WCAG 2.5.8 is 24 × 24). */
  .window-lights { gap: 10px; }
  .window-light { inline-size: 14px; block-size: 14px; }
  .window-light::before { content: ""; position: absolute; inset-block: -15px; inset-inline: -5px; }
  /* the profile circle in a 32 px menu bar is a real button at 22 px: the circle stays, the hit area grows */
  button.avatar { position: relative; }
  button.avatar::before { content: ""; position: absolute; inset: calc((var(--avatar) - var(--target)) / 2); }
}

/* ---------- 12 · reduced motion: --m goes to zero, so every duration is 0 and end states show (html[data-motion=reduce] in sheet.css mirrors it for testing) ---------- */
@media (prefers-reduced-motion: reduce) {
  :root { --m: 0; }
  .bg-particles, .bio::after, .mark-boot .sweep, .btn.is-busy::after { display: none; }
}