/* TIMS ui_v2 — the new Arabic-first interface, behind UI_V2_ENABLED.
 *
 * The tokens are the approved mock-up's, verbatim, and the mock-up derived
 * them from the system's existing colour layers: --band is the system's
 * primary #004E43, --gold/--danger/--ok are its accent, alert and success
 * seats re-tuned for the warm paper background, and the type is the same
 * self-hosted TheSans (css/fonts.css), one family for Arabic and English on
 * every page, with IBM Plex Sans Arabic kept behind it for the few codepoints
 * it lacks. No other family, and none without the owner's choice.
 *
 * The NTSC identity palette (README, «الهوية البصرية») sets both themes:
 * Gable Green #19332F, Evening Sea #004E43, Highland #73946A, Anzac gold
 * #DEB83B and Swirl #D5D0C3. Dark mode is the guideline table itself —
 * one green per page: Gable Green ground and bands, its Swirl-lifted step
 * (#243C38) for raised cards, never Evening Sea beside it; Swirl text with
 * its translucent steps (muted .76, line .14, card .06) baked into solids,
 * Swirl for the featured action and Anzac gold for the mark and highlights.
 * Light mode keeps the paper ground and takes the same family: Gable Green
 * ink, Evening Sea action, Swirl rules.
 *
 * Dark mode follows the device (prefers-color-scheme) unless the person
 * forces light or dark: html[data-theme] carries the override, set by
 * js/v2-theme.js and kept in localStorage.
 */

:root {
  --bg: #F4F2EC; --surface: #FFFFFF; --surface2: #F1EEE7;
  --ink: #19332F; --muted: #3F5250; --line: #D5D0C3;
  --band: #004E43; --hero: #004E43; --heroink: #FFFFFF; --onband: #FFFFFF; --onband2: #D5D0C3;
  --accent: #004E43; --onaccent: #FFFFFF; --link: #004E43;
  --gold: #8A6516; --goldsoft: #F6EBD2;
  --danger: #B42318; --dangersoft: #FDECEA;
  --ok: #157F3D; --oksoft: #E3F2E8;
  --focus: #B5892A; --tile: #E9EEE7; --art: #E9EEE7; --art2: #FFFFFF;
  --side: #FBFAF7;
  /* The green the owner chose for an approval (the command room's «اعتمد»): the
     centre's own Evening Sea on the light reading, the bright green on the dark. */
  --approve: #004E43; --onok: #FBFAF7;
  /* The dim over the page behind a card that asks (the equation's «نفّذ»), on both readings. */
  --scrim: rgba(0, 0, 0, 0.55);
  /* The centre's logo comes in a colour and a white cut; the theme picks. */
  --logo-light: block; --logo-dark: none;
  /* The Salmani style under every page (body.v2): the Najdi screen's triangle, a hairline
     lattice of 15 px sides (rows of 13 px, a hair off equilateral so the 60 x 104 tile meets
     itself on whole pixels at every common screen density) with every fourth cell each way
     cut deeper, a small solid triangle. Faint gold on the paper here, the identity's gold
     on the dark ground below; the same lattice as the Kingdom on the room's map. */
  --salmani: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M0 6.5H60M0 19.5H60M0 32.5H60M0 45.5H60M0 58.5H60M0 71.5H60M0 84.5H60M0 97.5H60M-56.25 -13L18.75 117M-41.25 -13L33.75 117M-26.25 -13L48.75 117M-11.25 -13L63.75 117M11.25 -13L-63.75 117M3.75 -13L78.75 117M26.25 -13L-48.75 117M18.75 -13L93.75 117M41.25 -13L-33.75 117M33.75 -13L108.75 117M56.25 -13L-18.75 117M48.75 -13L123.75 117M71.25 -13L-3.75 117M86.25 -13L11.25 117M101.25 -13L26.25 117M116.25 -13L41.25 117' fill='none' stroke='%23A9822A' stroke-opacity='0.1' stroke-width='0.75'/%3E%3Cpath d='M2.85 8.15L12.15 8.15L7.5 16.21ZM0 35.79L-4.65 43.85L4.65 43.85ZM60 35.79L55.35 43.85L64.65 43.85ZM32.85 60.15L42.15 60.15L37.5 68.21ZM30 87.79L25.35 95.85L34.65 95.85Z' fill='%23A9822A' fill-opacity='0.16'/%3E%3C/svg%3E");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #19332F; --surface: #243C38; --surface2: #2C433E;
    --ink: #D5D0C3; --muted: #C2C5B8; --line: #334944;
    --band: #19332F; --hero: #243C38; --heroink: #DEB83B; --onband: #D5D0C3; --onband2: #B7BEB1;
    --accent: #D5D0C3; --onaccent: #19332F; --link: #DEB83B;
    --gold: #DEB83B; --goldsoft: #354631;
    --danger: #F28B82; --dangersoft: #3A2422;
    --ok: #6FCF97; --oksoft: #1D3D2C;
    --focus: #DEB83B; --tile: #2D483C; --art: #213935; --art2: #28403B;
    --side: #142A27; --approve: #6FCF97; --onok: #12302B;
    --logo-light: none; --logo-dark: block;
    --salmani: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M0 6.5H60M0 19.5H60M0 32.5H60M0 45.5H60M0 58.5H60M0 71.5H60M0 84.5H60M0 97.5H60M-56.25 -13L18.75 117M-41.25 -13L33.75 117M-26.25 -13L48.75 117M-11.25 -13L63.75 117M11.25 -13L-63.75 117M3.75 -13L78.75 117M26.25 -13L-48.75 117M18.75 -13L93.75 117M41.25 -13L-33.75 117M33.75 -13L108.75 117M56.25 -13L-18.75 117M48.75 -13L123.75 117M71.25 -13L-3.75 117M86.25 -13L11.25 117M101.25 -13L26.25 117M116.25 -13L41.25 117' fill='none' stroke='%23DEB83B' stroke-opacity='0.06' stroke-width='0.75'/%3E%3Cpath d='M2.85 8.15L12.15 8.15L7.5 16.21ZM0 35.79L-4.65 43.85L4.65 43.85ZM60 35.79L55.35 43.85L64.65 43.85ZM32.85 60.15L42.15 60.15L37.5 68.21ZM30 87.79L25.35 95.85L34.65 95.85Z' fill='%23DEB83B' fill-opacity='0.12'/%3E%3C/svg%3E");
    color-scheme: dark;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  }
}

/* After sign-in the working pages open dark: the guideline table is their
   default, whatever the device says; only an explicit light choice wins. */
:root[data-theme="dark"],
:root.v2-dark-default:not([data-theme="light"]) {
  --bg: #19332F; --surface: #243C38; --surface2: #2C433E;
  --ink: #D5D0C3; --muted: #C2C5B8; --line: #334944;
  --band: #19332F; --hero: #243C38; --heroink: #DEB83B; --onband: #D5D0C3; --onband2: #B7BEB1;
  --accent: #D5D0C3; --onaccent: #19332F; --link: #DEB83B;
  --gold: #DEB83B; --goldsoft: #354631;
  --danger: #F28B82; --dangersoft: #3A2422;
  --ok: #6FCF97; --oksoft: #1D3D2C;
  --focus: #DEB83B; --tile: #2D483C; --art: #213935; --art2: #28403B;
  --side: #142A27; --approve: #6FCF97; --onok: #12302B;
  --logo-light: none; --logo-dark: block;
  --salmani: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M0 6.5H60M0 19.5H60M0 32.5H60M0 45.5H60M0 58.5H60M0 71.5H60M0 84.5H60M0 97.5H60M-56.25 -13L18.75 117M-41.25 -13L33.75 117M-26.25 -13L48.75 117M-11.25 -13L63.75 117M11.25 -13L-63.75 117M3.75 -13L78.75 117M26.25 -13L-48.75 117M18.75 -13L93.75 117M41.25 -13L-33.75 117M33.75 -13L108.75 117M56.25 -13L-18.75 117M48.75 -13L123.75 117M71.25 -13L-3.75 117M86.25 -13L11.25 117M101.25 -13L26.25 117M116.25 -13L41.25 117' fill='none' stroke='%23DEB83B' stroke-opacity='0.06' stroke-width='0.75'/%3E%3Cpath d='M2.85 8.15L12.15 8.15L7.5 16.21ZM0 35.79L-4.65 43.85L4.65 43.85ZM60 35.79L55.35 43.85L64.65 43.85ZM32.85 60.15L42.15 60.15L37.5 68.21ZM30 87.79L25.35 95.85L34.65 95.85Z' fill='%23DEB83B' fill-opacity='0.12'/%3E%3C/svg%3E");
  color-scheme: dark;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

html, body { margin: 0; }
body.v2 {
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg) var(--salmani) 0 0 / 60px 104px repeat; color: var(--ink);
  --page-font: "TheSans", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  font-family: var(--page-font);
  /* The orders' frame: the page's own ink at the edge of sight. */
  --card-line: color-mix(in srgb, var(--ink) 7%, transparent);
  font-size: 15px; line-height: 1.7;
  font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility;
}
/* The briefing's paper copy keeps a plain sheet, and no page prints the lattice. */
body.v2.v2-briefing-print { background-image: none; }
@media print { body.v2 { background-image: none; } }
.v2 * { box-sizing: border-box; }
/* The type scale: nothing under 13px but the letters of the TIMS mark; small
   text and captions read at the medium weight, since the regular is too thin
   under 14px in Arabic. A later rule with its own weight still wins. */
.v2 :is(.hint, .meta, .sub, .when, .k-label, .k-note, .leg-days, .brand-sub,
  .field-label, .kicker, .counter, .pager, .path-labels, .lbl, .note, .stage-row, .inc-meta) { font-weight: 500; }
.v2 :is(dt, th, label) { font-weight: 500; }
.v2 h1, .v2 h2, .v2 h3 { line-height: 1.5; text-wrap: balance; }
.v2 p, .v2 li, .v2 dd, .v2 td { line-height: 1.7; }
.v2 a { color: var(--link); }
/* Not the button links: a tap leaves them hovered, and the ink would then
   sit on the button's own ink-coloured ground and vanish. */
.v2 a:not(.btn):hover { color: var(--ink); }
.v2 input, .v2 button, .v2 select, .v2 textarea { font-family: inherit; }
.v2 :is(input, button, select, textarea, a):focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.v2 .sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* The unbreakable identifiers: case numbers, e-mail addresses, keys. */
.v2 .code { font-family: "TheSans", "IBM Plex Sans Arabic", Tahoma, sans-serif; direction: ltr;
  unicode-bidi: isolate; font-size: 13px; font-weight: 600; white-space: nowrap; }

/* --- shared controls (44px touch targets throughout) ----------------------- */

.v2 .btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 14px;
  background: var(--accent); color: var(--onaccent);
  font-size: 17px; font-weight: 600; cursor: pointer; text-decoration: none; }
.v2 .btn-secondary { background: transparent; color: var(--ink);
  border: 1px solid var(--line); }
.v2 .btn-danger { background: transparent; color: var(--danger);
  border: 1px solid var(--line); }
/* The green of an approval, the one the owner chose for the command room's «اعتمد»:
   approving a person, copying their password, saving one's own. */
.v2 .btn-ok { background: var(--approve); color: var(--onok); }
.v2 .field { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface2); color: var(--ink);
  font-size: 17px; }
.v2 .field.ltr { direction: ltr; text-align: left; }
.v2 .field[aria-invalid="true"] { border: 1.5px solid var(--danger); }
.v2 .field-label { font-size: 15px; font-weight: 600; }
.v2 .error { margin: 0; display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--danger); }
.v2 .hint { margin: 0; font-size: 13px; line-height: 1.8; color: var(--muted); }
/* A field's guidance lives inside it, faint, and goes at the first letter typed: no line of
   help under or over any field (the owner's rule of 21 October 2026, CLAUDE.md). */
.v2 :is(input, textarea)::placeholder { color: var(--muted); opacity: 0.72; font-weight: 400; }
.v2 input.field { text-overflow: ellipsis; }
/* What a card says when it has nothing to show: a state, never a detail. */
.v2 .nothing { margin: 0; font-size: 14px; line-height: 1.7; color: var(--muted); }
/* A screen that is itself a message (closed, sent, waiting) says it in one line under its title;
   a live state a control reports (a switch on or off) reads the same. */
.v2 .state-text { margin: 0; font-size: 14.5px; line-height: 1.8; color: var(--muted); }
.v2 .chip { flex: none; font-size: 13px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; }
/* A thin gold tint under the deep amber, so the pending chip reads 4.5:1 on the light theme. */
.v2 .chip-gold { background: color-mix(in srgb, var(--gold) 12%, transparent); color: var(--gold); }
.v2 .chip-red { background: var(--dangersoft); color: var(--danger); }
.v2 .chip-green { background: var(--oksoft); color: var(--ok); }
.v2 .card { background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; }

/* The six one-time-code boxes. The real input sits invisibly over them. */
.v2 .otp { position: relative; direction: ltr; }
.v2 .otp-boxes { display: flex; gap: 8px; justify-content: space-between; }
.v2 .otp-box { width: 46px; height: 56px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface2); color: var(--ink);
  font-size: 24px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; }
.v2 .otp-box.active { border: 2px solid var(--accent); }
.v2 .otp.bad .otp-box { border: 2px solid var(--danger); }
.v2 .otp input { position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; font-size: 16px; border: 0; background: transparent;
  color: transparent; caret-color: transparent; }

/* The 30-second ring beside "يتجدد الرمز...". */
.v2 .otp-ring { display: flex; align-items: center; justify-content: center;
  gap: 10px; font-size: 14px; color: var(--muted); }

/* The theme switch (follow the device / force light / force dark): one small
   round button in the corner that unfolds the three choices, so it never
   sits over a screen's own controls. */
.v2 .theme-switch { position: fixed; inset-block-end: 12px; inset-inline-end: 12px;
  z-index: 50; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.v2 .theme-switch .theme-options { display: none; flex-direction: column; gap: 2px;
  padding: 4px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.v2 .theme-switch.open .theme-options { display: flex; }
.v2 .theme-switch .theme-options button { min-width: 72px; min-height: 44px;
  border: 0; border-radius: 12px; background: transparent; color: var(--muted);
  font-size: 13px; cursor: pointer; }
.v2 .theme-switch .theme-options button[aria-pressed="true"] {
  background: var(--tile); color: var(--accent); font-weight: 700; }
.v2 .theme-switch .theme-toggle { width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  opacity: 0.85; }
.v2 .theme-switch.open .theme-toggle, .v2 .theme-switch .theme-toggle:hover,
.v2 .theme-switch .theme-toggle:focus-visible { opacity: 1; }
/* The language switch sits with the theme corner: same pill, always visible. */
.v2 .theme-switch .lang-switch, .v2-command .bar-lang { min-width: 44px; min-height: 44px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); font-size: 13px; font-weight: 600; text-decoration: none;
  display: flex; align-items: center; justify-content: center; opacity: 0.85; }
.v2 .theme-switch .lang-switch:hover, .v2 .theme-switch .lang-switch:focus-visible,
.v2-command .bar-lang:hover, .v2-command .bar-lang:focus-visible {
  opacity: 1; color: var(--accent); }
/* The directional arrows are drawn for RTL; the English (LTR) reading mirrors them. */
[dir="ltr"] .v2 .back svg, [dir="ltr"] .v2 .cta svg, [dir="ltr"] .v2 #ob-next svg {
  transform: scaleX(-1); }
/* On the desk the switches sit in the top corner on one row, the theme
   toggle at the outer edge and the language pill beside it; the theme's
   choices unfold under them. A page's header keeps its icons clear of them. */
@media (min-width: 900px) {
  .v2 .theme-switch { inset-block-end: auto; inset-block-start: 16px; inset-inline-end: 16px;
    display: grid; grid-template-columns: auto auto; column-gap: 8px; row-gap: 6px;
    align-items: center; justify-items: start; }
  .v2 .theme-switch .theme-toggle { grid-column: 2; grid-row: 1; }
  .v2 .theme-switch .lang-switch { grid-column: 1; grid-row: 1; }
  .v2 .theme-switch .theme-options { grid-column: 1 / -1; grid-row: 2; justify-self: end; }
  .v2 header.bar > div:last-child { margin-inline-end: 150px; }
  /* On the command room's pages the corner stays with the header and leaves with it as
     the page scrolls, never over the clock, the figures or the map. */
  body.v2.ceo-viewer > .theme-switch { position: absolute; }
}

/* --- the band treatment ------------------------------------------------------ */
/* Green bands are flat: no glow, no watermark behind the copy. */
.v2 .band-art { position: relative; overflow: hidden; }
.v2 .band-art > * { position: relative; }
.v2-login .topbar-logo { display: none; }
/* Phone: the switches sit on a row of their own above the page, never over content. */
@media (max-width: 899px) {
  .v2 .theme-switch { position: relative; inset: auto; flex-direction: row;
    align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 12px 0; }
  .v2 .theme-switch .theme-options { position: absolute; inset-block-start: 100%;
    inset-inline-end: 12px; margin-top: 6px; }
  /* Sign-in: the crest sits in the corner of the same row as the controls. */
  .v2-login .topbar-logo { display: block; height: 32px; width: auto; align-self: center;
    margin-inline-end: auto; }
  /* Sign-in: smaller, quieter switches beside the crest. */
  .v2-login .theme-switch .theme-toggle { width: 26px; height: 26px; }
  .v2-login .theme-switch .theme-toggle svg { width: 14px; height: 14px; }
  .v2-login .theme-switch .lang-switch { min-width: 26px; min-height: 26px; padding: 0 9px;
    font-size: 13px; }
  .v2-login .theme-switch { padding: 10px 20px 0; gap: 6px; }
  /* Quiet header: ghost switches on the band, and the system's name as a caption under
     the crest rather than a second outlined box. */
  .v2-login .theme-switch .theme-toggle, .v2-login .theme-switch .lang-switch {
    background: rgba(255, 255, 255, 0.10); border: 0; color: var(--onband); opacity: 1; }
  .v2-login .intro .brand-pill { border: 0; padding: 0; font-weight: 500;
    color: var(--onband2); letter-spacing: 0.01em; }
}

/* --- the step progress bars (sign-in: 3 dashes; signup: one bar) ----------- */
/* The path (templates/v2/_path.html): the one indicator for "where does this
   stand" — the case's road, the sign-in steps, the join-request steps. Filled
   nodes behind, the gold ringed node now, outlined nodes ahead; solid line over
   the ground covered, dashed over what is left. The drawing is the desktop
   sign-in panel's, in the accent on a page and in Swirl on a green band. */
.v2 .path { --path-ink: var(--accent); --path-label: var(--muted);
  display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.v2 .path-band { --path-ink: #D5D0C3; --path-label: var(--onband2); }
.v2 .path-track { display: flex; align-items: center; }
.v2 .path-node { flex: none; box-sizing: border-box; width: 12px; height: 12px;
  border-radius: 50%; border: 2px solid var(--path-ink); opacity: 0.75; }
.v2 .path-node.done { border: 0; background: var(--path-ink); opacity: 1; }
.v2 .path-node.now { width: 18px; height: 18px; border: 0; opacity: 1;
  background: #DEB83B; box-shadow: 0 0 0 6px rgba(222, 184, 59, 0.22); }
.v2 .path-line { flex: 1; min-width: 12px; height: 2px; opacity: 0.6;
  background: repeating-linear-gradient(90deg, var(--path-ink) 0 7px, transparent 7px 14px); }
.v2 .path-line.done { background: var(--path-ink); }
/* Each label sits under its own node: the track splits into two columns per
   segment, the ends take the outer column flush to their edge, the ones
   between take the two columns around their node, centred. A long label
   wraps inside its own share rather than running into its neighbour. */
.v2 .path-labels { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: 6px; font-size: 13px; line-height: 1.4; color: var(--path-label);
  text-align: center; }
.v2 .path-labels > span:first-child { text-align: start; }
.v2 .path-labels > span:last-child { text-align: end; }
/* A list row's path: the same drawing, smaller, without labels. */
.v2 .path-sm .path-node { width: 8px; height: 8px; }
.v2 .path-sm .path-node.now { width: 12px; height: 12px;
  box-shadow: 0 0 0 4px rgba(222, 184, 59, 0.22); }
.v2 .path-sm .path-line { min-width: 8px; }

/* --- the phone shell (390 first; everything scales up from it) ------------- */
.v2 .shell { max-width: 430px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column; }

/* --- sign-in ---------------------------------------------------------------- */
body.v2.v2-login { background: var(--band); }
.v2-login .intro { color: var(--onband); padding: 28px 20px 0;
  display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; }
.v2-login .intro-sub { color: var(--onband2); }
/* A gold hairline parts the band from the sheet (and, on desktop, the panel
   from the form): the one seam in the page, in the identity's gold. */
.v2-login .sheet { background: var(--surface); border-radius: 28px 28px 0 0;
  margin-top: 32px; flex: 1; padding: 8px 20px 28px;
  border-top: 1px solid rgba(222, 184, 59, 0.55);
  display: flex; flex-direction: column; gap: 16px; }
/* Sign-in controls: one height family (48 primary, 46 secondary), one radius, one gutter. */
.v2-login .field { min-height: 48px; font-size: 16px; border-radius: 12px;
  background: var(--surface); }
.v2-login .field-label { font-size: 14px; }
.v2-login .btn { min-height: 48px; font-size: 16px; border-radius: 12px; }
.v2-login .btn-secondary { min-height: 46px; font-size: 15px; }
.v2-login .grab { width: 44px; height: 5px; border-radius: 999px;
  background: var(--line); align-self: center; }
.v2-login .badge { font-size: 13px; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px;
  padding: 4px 12px; color: var(--onband); }
/* The system's name in the badge's pill: one face, one size for both halves. */
.v2-login .brand-pill { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.v2-login .brand-pill .sep { width: 1px; height: 12px; background: currentColor; opacity: 0.5; }
.v2-login .sso { min-height: 46px; display: flex; align-items: center;
  justify-content: center; gap: 10px; border: 1px dashed var(--line);
  border-radius: 12px; background: transparent; color: var(--muted);
  font-size: 15px; font-weight: 600; cursor: not-allowed; width: 100%; }
.v2-login .pill { align-self: flex-start; display: flex; align-items: center;
  gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface2); color: var(--ink);
  font-size: 15px; cursor: pointer; }
.v2-login .divider { display: flex; align-items: center; gap: 12px;
  color: var(--muted); font-size: 13px; }
.v2-login .divider::before, .v2-login .divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line); }

/* Desktop: the brand panel beside the form, as in the approved mock-up. */
.v2-login .panel { display: none; }
@media (min-width: 880px) {
  .v2-login .shell { max-width: none; display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .v2-login .panel { display: flex; background: var(--band); color: var(--onband);
    padding: 48px 56px; flex-direction: column; justify-content: flex-start;
    gap: 64px; position: relative; overflow: hidden; }
  /* The logo and the system's name sit tight in the top corner, half the
     panel's padding from each edge; the copy below keeps its place. */
  .v2-login .panel-brand { margin-block: -24px 24px; margin-inline-start: -28px; }
  /* The crest as the panel's watermark: large, cut by the panel's own corner
     (it runs off the bottom and the outer edge by close to a third of its
     size), a pale fill with a fine outline so its edge reads clearly on the
     band. It scales with the panel and the screen's height, sits under the
     copy (the copy paints above it), and never pushes the layout. */
  .v2-login .panel > * { position: relative; z-index: 1; }
  .v2-login .panel > .panel-mark { position: absolute; z-index: 0;
    inset-block-end: 0; inset-inline-start: 0; width: min(88%, 56vh, 720px);
    pointer-events: none; }
  .v2-login .panel-mark img { display: block; width: 100%; height: auto;
    transform: translate(28%, 28%); }
  [dir="ltr"] .v2-login .panel-mark img { transform: translate(-28%, 28%); }
  .v2-login .panel-rule { width: 56px; height: 4px; border-radius: 999px;
    background: var(--gold, #DEB83B); }
  /* The case's road on the panel: the path, at the copy's measure. */
  .v2-login .panel .path { max-width: 380px; }
  .v2-login .panel-features { list-style: none; margin: 8px 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 24px; font-size: 15px; }
  .v2-login .panel-features li { display: flex; align-items: center; gap: 10px; }
  .v2-login .intro { display: none; }
  .v2-login .main { display: flex; align-items: center; justify-content: center;
    padding: 40px 24px; background: var(--bg); }
  .v2-login .sheet { max-width: 420px; width: 100%; border-radius: 0;
    background: transparent; margin: 0; padding: 0; flex: initial; border-top: 0; }
  .v2-login .panel { border-inline-end: 1px solid rgba(222, 184, 59, 0.55); }
  .v2-login .grab { display: none; }
  .v2-login .field { background: var(--surface); }
  .v2-login .otp-box { background: var(--surface); width: 56px; height: 64px;
    font-size: 26px; }
}

/* --- onboarding ------------------------------------------------------------- */
.v2-onboarding .art { flex: 1; display: flex; align-items: center;
  justify-content: center; padding: 32px 24px 0; }
.v2-onboarding .art-stage { width: 300px; height: 340px; border-radius: 32px;
  background: var(--art); position: relative; display: flex;
  align-items: center; justify-content: center; }
.v2-onboarding .sheet { margin: 24px 16px 24px; padding: 24px 20px 20px;
  border-radius: 24px; background: var(--surface); border: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 12px; min-height: 250px; }
.v2-onboarding .dots { display: flex; gap: 6px; }
.v2-onboarding .dots span { height: 6px; border-radius: 999px; width: 10px;
  background: var(--line); }
.v2-onboarding .dots span.now { width: 28px; background: var(--accent); }
.v2-onboarding h1 { margin: 4px 0 0; font-size: 21px; font-weight: 700;
  line-height: 1.5; }
.v2-onboarding .body { margin: 0; font-size: 15px; line-height: 1.85;
  color: var(--muted); }
.v2-onboarding .slide[hidden] { display: none; }
@media (min-width: 880px) {
  .v2-onboarding .shell { max-width: 520px; }
}

/* --- signup ------------------------------------------------------------------ */
.v2-signup .top { padding: 20px 20px 14px; display: flex; flex-direction: column;
  gap: 14px; border-bottom: 1px solid var(--line); background: var(--surface); }
.v2-signup { background: var(--surface); }
.v2-signup .back { width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; display: flex;
  align-items: center; justify-content: center; color: var(--ink);
  cursor: pointer; text-decoration: none; flex: none; }
.v2-signup .body { flex: 1; overflow: auto; padding: 22px 20px;
  display: flex; flex-direction: column; gap: 16px; }
.v2-signup .foot { padding: 14px 20px 22px; border-top: 1px solid var(--line);
  background: var(--surface); }
.v2-signup .note { padding: 14px 16px; border-radius: 14px; background: var(--tile);
  font-size: 14px; line-height: 1.8; }
.v2-signup .sector-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-signup .sector-chips button { min-height: 44px; padding: 0 16px;
  border-radius: 999px; font-size: 15px; cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--ink); }
.v2-signup .sector-chips button[aria-pressed="true"] { border-color: var(--accent);
  background: var(--accent); color: var(--onaccent); }
/* The supplied sector artwork is one colour: it turns white on the dark theme and
   on the pressed chip, so it stays visible on every ground. */
.v2-signup .sector-chips .sico { width: 24px; height: 24px; flex: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v2-signup .sector-chips .sico { filter: brightness(0) invert(1); } }
:root[data-theme="dark"] .v2-signup .sector-chips .sico { filter: brightness(0) invert(1); }
.v2-signup .sector-chips button[aria-pressed="true"] .sico { filter: brightness(0) invert(1); }
/* Sector artwork set on a deep band (sign-in, onboarding): one colour, so it goes white. */
.v2 .sico-band { filter: brightness(0) invert(1); flex: none; display: block; }
/* The sector's own artwork beside a page header's title (the case page): brand
   green on the light theme, white on the dark one, so it reads on both grounds. */
.v2 .sico-head { width: 24px; height: 24px; flex: none; display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .v2 .sico-head { filter: brightness(0) invert(1); opacity: .85; } }
:root[data-theme="dark"] .v2 .sico-head,
:root.v2-dark-default:not([data-theme="light"]) .v2 .sico-head { filter: brightness(0) invert(1); opacity: .85; }
.v2-signup .rules { margin: 0; padding: 0; list-style: none; display: flex;
  flex-direction: column; gap: 8px; }
.v2-signup .rules li { display: flex; align-items: center; gap: 10px;
  font-size: 14px; color: var(--muted); }
.v2-signup .rules li .dot { width: 10px; height: 10px; border-radius: 50%;
  flex: none; border: 2px solid var(--line); }
.v2-signup .rules li.ok { color: var(--ok); }
.v2-signup .rules li.ok .dot { border: 0; background: var(--ok); }
.v2-signup .qr-row { display: flex; gap: 14px; align-items: center; }
.v2-signup .qr-row img { width: 132px; height: 132px; flex: none;
  border-radius: 16px; border: 1px solid var(--line); background: #FFFFFF;
  padding: 6px; }
.v2-signup .key { direction: ltr; unicode-bidi: isolate;
  font-family: "TheSans", "IBM Plex Sans Arabic", Tahoma, sans-serif; font-size: 14px;
  color: var(--ink); background: var(--surface2); border-radius: 8px;
  padding: 6px 8px; overflow-wrap: anywhere; }
.v2-signup .done-icon { width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; }
.v2-signup .timeline { margin: 8px 0 0; padding: 16px; list-style: none;
  border: 1px solid var(--line); border-radius: 16px; display: flex;
  flex-direction: column; gap: 14px; }
.v2-signup .timeline li { display: flex; align-items: center; gap: 12px;
  font-size: 15px; }
.v2-signup .timeline .tick { width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex: none;
  font-size: 13px; }
.v2-signup .step[hidden] { display: none; }
@media (min-width: 880px) {
  .v2-signup .shell { max-width: 560px; border-inline: 1px solid var(--line); }
}

/* --- the administrator's join-request queue ---------------------------------- */
/* The queue wears the app's shell (the sidebar on the desk, the tabs bar on the
   phone) and opens with the home's card: who decides, how many wait, the audit
   note, and the tabs. The request cards follow in one column on the phone and
   in a grid on the desk. */
.v2-requests { background: var(--bg); }
.v2-requests main { display: flex; flex-direction: column; gap: 16px; }
.v2-requests .hero .tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.v2-requests .tabs a { min-height: 40px; padding: 0 14px; border-radius: 999px;
  font-size: 14px; font-weight: 500; display: flex; align-items: center; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35); color: var(--onband); }
.v2-requests .tabs a[aria-current="true"] { background: var(--onband);
  color: var(--band); border-color: var(--onband); font-weight: 700; }
.v2-requests .list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.v2-requests article { padding: 16px; display: flex; flex-direction: column;
  gap: 10px; min-width: 0; }
.v2-requests .who-row { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; }
.v2-requests .who { display: flex; gap: 12px; align-items: center; min-width: 0; }
.v2-requests .avatar { width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--surface2); display: flex; align-items: center;
  justify-content: center; font-weight: 700; color: var(--accent); }
.v2-requests .meta { display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: 14px; color: var(--muted); }
.v2-requests .meta b { color: var(--ink); font-weight: 600; }
.v2-requests .meta .sico-head { width: 18px; height: 18px; display: inline-block;
  vertical-align: -4px; margin-inline: 2px; }
.v2-requests .verified { display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ok); }
.v2-requests .decide { display: flex; gap: 8px; }
.v2-requests .decide .btn { flex: 1; min-height: 46px; font-size: 15px;
  border-radius: 12px; }
.v2-requests select.field, .v2-requests textarea.field { font-size: 15px; }
.v2-requests textarea.field { min-height: 0; padding: 10px 12px; resize: none; }
.v2-requests .outcome { margin: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--surface2); font-size: 14px; line-height: 1.7; }
.v2-requests .reason-box { display: flex; flex-direction: column; gap: 6px;
  font-size: 14px; font-weight: 600; }
.v2-requests .empty { margin: 24px 0; text-align: center; font-size: 15px; color: var(--muted); }
/* The public link's card: its state, the two addresses and the switch. */
.v2-requests .linkcard { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v2-requests .linkcard h2 { margin: 0; font-size: 17px; font-weight: 700; }
.v2-requests .linkrow { display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: 12px; background: var(--surface2); min-width: 0; }
.v2-requests .linktext { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.v2-requests .linktext .lbl { font-size: 14px; font-weight: 700; }
.v2-requests .linktext .note { font-weight: 500; color: var(--muted); }
.v2-requests .linktext .url { font-size: 14px; text-align: start; overflow-wrap: anywhere; user-select: all; }
.v2-requests .linkrow .btn { flex: none; min-height: 44px; padding: 0 14px; border-radius: 12px; font-size: 14px; }
.v2-requests .linkswitch .btn { width: 100%; min-height: 48px; border-radius: 12px; font-size: 15px; }
.v2-requests .done { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 12px; background: var(--oksoft); color: var(--ok); font-size: 14px; font-weight: 600; }
.v2 [hidden] { display: none !important; }
@media (min-width: 900px) {
  .v2-requests main { gap: 20px; }
  .v2-requests .list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
    gap: 16px; }
  .v2-requests .linkcard { padding: 20px; }
  .v2-requests .linkswitch .btn { width: auto; min-width: 220px; }
}

/* --- the role-based home ------------------------------------------------------ */
.v2 header.bar { padding: 18px 16px 12px; display: flex;
  align-items: center; justify-content: space-between; gap: 12px; }
/* The back arrow and the page's name share one line on every page; a page that styles
   its own bar (the command room, the users register) overrides these further down. */
.v2 .bar-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v2 .bar-title { font-size: 17px; font-weight: 700; min-width: 0; }
.v2 .bar-end { display: flex; align-items: center; gap: 4px; }
.v2-home .avatar { width: 46px; height: 46px; flex: none; border-radius: 50%;
  background: var(--hero); color: var(--onband); display: flex;
  align-items: center; justify-content: center; }
.v2 .iconbtn { position: relative; width: 44px; height: 44px; border: 0;
  border-radius: 50%; background: transparent; color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  text-decoration: none; }
.v2 .iconbtn .bubble { position: absolute; top: 5px; inset-inline-end: 5px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  background: var(--danger); color: var(--bg); font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center; }
.v2-home main { flex: 1; overflow: auto; padding: 4px 16px 20px;
  display: flex; flex-direction: column; gap: 18px; }
.v2 .hero { border-radius: 22px; background: var(--hero);
  color: var(--onband); padding: 18px; display: flex; flex-direction: column;
  gap: 10px; }
.v2 .hero .kicker { font-size: 13px; color: var(--onband2); }
.v2 .hero .badge { font-size: 13px;
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px;
  padding: 2px 10px; }
/* In dark mode the case and its count read in Anzac gold, never white: the
   same mark the incidents list gives a case number. Light mode keeps white. */
.v2 .hero h1 { margin: 0; font-size: 22px; font-weight: 700;
  line-height: 1.45; color: var(--heroink); }
/* The live counter in the hero's corner: days since the report, in gold. */
.v2 .hero .counter { display: inline-flex; align-items: baseline; gap: 5px;
  font-size: 13px; color: var(--onband2); font-variant-numeric: tabular-nums; }
.v2 .hero .counter b { font-size: 18px; font-weight: 700; color: #DEB83B; line-height: 1; }
/* The stage chip: a dot and the stage's name, the family's colour, with the
   identity's sheen passing over it (still for reduced motion). */
.v2 .stage { position: relative; overflow: hidden; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px; font-size: 13px;
  font-weight: 600; padding: 3px 11px; border-radius: 999px; border: 1px solid;
  white-space: nowrap; }
.v2 .stage::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; flex: none; }
.v2 .stage::after { content: ""; position: absolute; inset: -25% auto -25% 0;
  width: 58%; transform: skewX(-14deg) translateX(-140%); filter: blur(4px);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28) 50%, transparent);
  animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { transform: skewX(-14deg) translateX(-140%); }
  100% { transform: skewX(-14deg) translateX(340%); } }
@media (prefers-reduced-motion: reduce) { .v2 .stage::after { animation: none; } }
/* The review family takes the theme's gold: the deep amber on the light
   ground, the bright gold on the dark; on the hero's green band, always the
   bright gold. */
.v2 .stage-review { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  background: color-mix(in srgb, var(--gold) 10%, transparent); }
.v2 .hero .stage-review { color: #DEB83B; border-color: rgba(222, 184, 59, 0.55); background: rgba(222, 184, 59, 0.10); }
.v2 .stage-work { color: var(--ink); border-color: var(--line); background: var(--surface2); }
.v2 .hero .stage-work { color: #D5D0C3; border-color: rgba(213, 208, 195, 0.45); background: rgba(213, 208, 195, 0.08); }
.v2 .stage-intake { color: var(--muted); border-color: var(--line); background: transparent; }
.v2 .hero .stage-intake { color: var(--onband2); border-color: rgba(213, 208, 195, 0.35); }
.v2 .stage-return { color: var(--danger); border-color: rgba(242, 139, 130, 0.5); background: rgba(242, 139, 130, 0.10); }
.v2 .stage-closed { color: var(--ok); border-color: rgba(111, 207, 151, 0.45); background: rgba(111, 207, 151, 0.08); }
/* The case's road in three legs (registration, investigation, final
   approval): the legs behind are full in Swirl, the one in hand fills in
   gold with the sheen, the ones ahead are empty and quiet. */
.v2 .hero .legs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; margin-top: 2px; }
.v2 .hero .leg { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.v2 .hero .leg-head { display: flex; align-items: baseline; white-space: nowrap; }
.v2 .hero .leg-head b { font-size: 13px; font-weight: 700; color: var(--onband); }
.v2 .hero .leg.now .leg-head b { color: #DEB83B; }
.v2 .hero .leg.next { opacity: 0.55; }
/* The day count: a quiet caption under the bar, at its far end. */
.v2 .hero .leg-days { align-self: flex-end; margin-top: -2px; font-size: 13px;
  color: var(--onband2); opacity: 0.6; font-variant-numeric: tabular-nums; }
.v2 .hero .leg-bar { position: relative; height: 6px; border-radius: 999px;
  background: rgba(213, 208, 195, 0.18); overflow: hidden; }
.v2 .hero .leg-bar i { position: absolute; inset-block: 0; inset-inline-start: 0;
  border-radius: 999px; background: #D5D0C3; }
.v2 .hero .leg.now .leg-bar i { background: #DEB83B; }
.v2 .hero .leg.now .leg-bar::after { content: ""; position: absolute; inset: -25% auto -25% 0;
  width: 50%; transform: skewX(-14deg) translateX(-140%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: sheen 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .v2 .hero .leg.now .leg-bar::after { animation: none; } }
.v2 .hero p { margin: 0; font-size: 14px; line-height: 1.7;
  color: var(--onband2); }
.v2 .hero .cta { align-self: flex-start; margin-top: 4px; display: flex;
  align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 12px; background: var(--onband); color: var(--band);
  text-decoration: none; font-size: 15px; font-weight: 700; }
/* The quick actions: one quiet strip, four cells parted by hairlines, a
   small icon over a small label; no card each. */
.v2-home .tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; padding: 4px 0; margin: 0; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); }
.v2-home .tiles a { display: flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 10px 4px; color: var(--ink); text-decoration: none;
  font-size: 13px; font-weight: 600; text-align: center; line-height: 1.3;
  border-inline-start: 1px solid var(--line); }
.v2-home .tiles a:first-child { border-inline-start: 0; }
/* The icon: bare and line-drawn, as the sidebar's route icons are. */
.v2-home .tiles .tile-icon { width: 22px; height: 22px; color: var(--ink); display: flex;
  align-items: center; justify-content: center; margin-bottom: 2px; }
.v2-home .tiles .tile-icon svg { width: 20px; height: 20px; }
.v2-home .section-head { display: flex; align-items: baseline;
  justify-content: space-between; }
.v2-home .section-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.v2-home .section-head a { font-size: 14px; font-weight: 600;
  text-decoration: none; min-height: 44px; display: flex; align-items: center; }
.v2 .item { display: flex; flex-direction: column; gap: 8px; padding: 14px;
  border-radius: 18px; background: var(--surface); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none; }
.v2 .item .row { display: flex; align-items: center;
  justify-content: space-between; gap: 8px; }
.v2 .item .row .code { color: var(--link); font-weight: 600; }
/* A case description may be in either language; plaintext bidi lets each
   row read in its own direction inside the RTL page. */
.v2 .item .text { font-size: 14.5px; line-height: 1.6; unicode-bidi: plaintext; }
.v2 .item .meta { display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: var(--muted); }
/* The deadline beside a waiting case keeps the SLA's colour. */
.v2 .item .meta .path { max-width: 260px; }
.v2 .item .when-red { color: var(--danger); font-weight: 600; }
.v2 .item .when-gold { color: var(--gold); font-weight: 600; }
/* The administrator's waiting list: a person, their address, why they wait. */
.v2 .item.person .pname { font-size: 16px; min-width: 0; overflow-wrap: anywhere; }
.v2 .item.person > .code { align-self: flex-start; font-size: 13px; color: var(--muted);
  overflow-wrap: anywhere; }
/* A long "works until" takes its own line rather than squeezing the roles beside it. */
.v2 .item.person .meta { flex-wrap: wrap; row-gap: 4px; }
/* The day's brief (use_cases/day_brief): one sentence over three phrase cards, each card its
   name and its figure, its lines in its bubble, one to a line. */
.v2-home .brief { display: flex; flex-direction: column; gap: 10px; }
.v2-home .brief-line { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink); }
.v2 .tip .brief-row { display: block; }
.v2-home .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px; }
.v2-home .kpi { padding: 12px; border-radius: 16px; background: var(--surface);
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.v2-home .kpi .k-label { font-size: 13px; color: var(--muted); }
/* The figure is the card: the same tabular numerals as every card's figure, at a size that
   reads across a room. */
.v2-home .kpi b { font-size: 26px; line-height: 1.15; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; }
.v2-home .kpi .k-note { font-size: 13px; color: var(--muted); }
/* "Nothing waiting" takes the place of the list it stands for: a quiet row as wide as a case,
   said on its start edge, under the section's title. */
.v2-home .empty { margin: 0; padding: 14px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: start; }
.v2 nav.tabsbar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line); background: var(--surface);
  padding: 0 4px calc(10px + env(safe-area-inset-bottom, 0px)); }
.v2 nav.tabsbar a { position: relative; display: flex;
  flex-direction: column; align-items: center; gap: 4px; min-height: 60px;
  padding-top: 10px; font-size: 13px; font-weight: 500; color: var(--muted);
  text-decoration: none; }
.v2 nav.tabsbar a[aria-current="page"] { color: var(--accent);
  font-weight: 700; }
.v2 nav.tabsbar a[aria-current="page"]::before { content: "";
  position: absolute; top: 0; inset-inline: 22%; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--accent); }

/* On phones and narrow tablets the bar stays on screen while the page scrolls; it used to sit
   at the end of each page, five screens down in the room. */
@media (max-width: 899px) {
  .v2 nav.tabsbar { position: sticky; bottom: 0; z-index: 3; }
}

/* Desktop home: the sidebar appears, the bottom bar goes. */
.v2-home .side { display: none; }
@media (min-width: 900px) {
  .v2-home .shell { max-width: none; display: grid;
    grid-template-columns: 248px minmax(0, 1fr); }
  .v2-home nav.tabsbar { display: none; }
  .v2-home .side { display: flex; background: var(--side);
    border-inline-end: 1px solid var(--line); padding: 24px 16px;
    flex-direction: column; gap: 24px; position: sticky; top: 0;
    height: 100vh; }
  .v2-home .side nav { display: flex; flex-direction: column; gap: 4px; }
  .v2-home .side nav a { display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 15px;
    color: var(--ink); text-decoration: none; }
  .v2-home .side nav a[aria-current="page"] { background: var(--tile);
    color: var(--accent); font-weight: 700; }
  .v2-home .side .me { margin-top: auto; display: flex; flex-direction: column;
    gap: 12px; }
  .v2-home .side .me-card { display: flex; align-items: center; gap: 10px;
    padding: 12px; border-radius: 14px; background: var(--surface);
    border: 1px solid var(--line); }
  .v2-home .content { padding: 24px 32px 40px; display: flex;
    flex-direction: column; gap: 24px; min-width: 0; }
  .v2-home main { padding: 0; overflow: visible; gap: 24px; }
  .v2 header.bar { padding: 0; }
  .v2 .hero { padding: 24px 28px; }
  .v2 .hero h1 { font-size: 26px; }
  /* The three ninety-day tiles share the row between them, edge to edge, as the cases above do. */
  .v2-home .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  /* On the desk the strip stays quiet (no fill), its four cells across the column's full width,
     so it lines up with the hero above it and the list below it. */
  .v2-home .tiles { background: transparent; }
  .v2-home .tiles a { font-size: 13px; }
  /* The brand, centred: the centre's own logo (colour or white by theme),
     and under it the system's name with TIMS as a small digital mark. */
  .v2 .side .brand { display: flex; flex-direction: column; align-items: center;
    gap: 10px; padding: 2px 0 6px; text-align: center; }
  .v2 .side .brand .logo-light { display: var(--logo-light); }
  .v2 .side .brand .logo-dark { display: var(--logo-dark); }
  .v2 .side .brand img { height: 56px; width: auto; max-width: 100%; }
  .v2 .side .brand-sub { display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--muted); white-space: nowrap; }
  /* The English name of the system is longer than the sidebar: it wraps, centred, the mark under it. */
  [dir="ltr"] .v2 .side .brand-sub { white-space: normal; flex-wrap: wrap; justify-content: center;
    text-align: center; line-height: 1.5; max-width: 100%; }
  .v2 .side .tims-mark { font-family: "TheSans", "IBM Plex Sans Arabic", Tahoma, sans-serif;
    direction: ltr; unicode-bidi: isolate; display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 7px 2px 8px; border-radius: 6px; border: 1.5px solid var(--ink);
    color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
    line-height: 1.3; }
  .v2 .side .tims-mark::before { content: ""; width: 5px; height: 5px; border-radius: 1px;
    background: var(--gold); margin-inline-end: -0.18em; order: 1; }
}
@media (max-width: 899px) {
  .v2-home .shell { max-width: 430px; }
  .v2-home .desktop-only { display: none !important; }
}

/* Phone case pages: the cards keep the same 16px gutter as the header above them,
   and the main fills the screen so the tabs bar stays at the bottom. */
.v2-incidents main, .v2-detail main, .v2-requests main, .v2-command main, .v2-users main { padding: 8px 16px 20px; flex: 1; }

/* The case list: a search field and a filter button on one row; the filters
   open as a sheet from the bottom on the phone, and sit inline on the desk. */
.v2-incidents .toolbar { display: flex; flex-direction: column; gap: 10px; }
.v2-incidents .find { display: flex; gap: 8px; align-items: center; }
.v2-incidents .find input { flex: 1; min-width: 0; height: 44px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: 0 14px; font-size: 14px; font-family: inherit; direction: ltr; }
.v2-incidents .find input:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.v2-incidents .find button, .v2-incidents .fsheet summary { height: 44px; padding: 0 16px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.v2-incidents .fsheet summary { list-style: none; }
.v2-incidents .fsheet summary::-webkit-details-marker { display: none; }
.v2-incidents .fsheet summary .count { min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--accent); color: var(--onaccent); font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; }
.v2-incidents .filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.v2-incidents .fld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 160px; min-width: 0; }
.v2-incidents .fld label { font-size: 13px; color: var(--muted); font-weight: 600; }
.v2-incidents .fld select { height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); padding: 0 12px; font-size: 14px; font-family: inherit; }
.v2-incidents .fld select:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
.v2-incidents .sheet-actions { display: flex; gap: 8px; flex: 1 1 100%; }
.v2-incidents .sheet-actions .btn { flex: 1; min-height: 44px; font-size: 14px; }
.v2-incidents .sheet-actions .btn-secondary { display: none; }
.v2-incidents .notice { padding: 12px 16px; background: var(--dangersoft); color: var(--danger);
  border-radius: 12px; font-size: 14px; }
.v2-incidents .inc-list { display: flex; flex-direction: column; gap: 10px; }
/* "No case matches" takes the place of the list it stands for: a quiet row as wide as a case,
   said on its start edge, as the home page says "nothing waiting". */
.v2-incidents .empty { margin: 0; padding: 14px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); color: var(--muted); font-size: 14px; text-align: start; }
.v2-incidents .pager { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.v2-incidents .pager a { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line);
  text-decoration: none; color: var(--ink); font-size: 13px; font-weight: 600; }
@media (max-width: 899px) {
  .v2-incidents .toolbar { flex-direction: row; align-items: center; }
  .v2-incidents .find { flex: 1; min-width: 0; }
  .v2-incidents .find button span { display: none; }
  .v2-incidents .find button { padding: 0 12px; }
  /* Open, the filters are a sheet from the bottom over a dimmed page. */
  .v2-incidents .fsheet[open]::before { content: ""; position: fixed; inset: 0; z-index: 55;
    background: rgba(0, 0, 0, 0.45); }
  .v2-incidents .fsheet[open] > .filters { position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 14px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 24px 24px 0 0; background: var(--surface); box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25); }
  .v2-incidents .fsheet[open] > .filters .fld { flex: 0 0 auto; }
  .v2-incidents .fsheet[open] > .filters::before { content: ""; width: 40px; height: 4px; border-radius: 2px;
    background: var(--line); align-self: center; margin-bottom: -4px; }
  .v2-incidents .sheet-actions .btn-secondary { display: flex; }
}
@media (min-width: 900px) {
  .v2-incidents .fsheet summary { display: none; }
  .v2-incidents .sheet-actions { flex: 0 0 auto; }
}

/* Desktop case pages: the home sidebar, and a reading column for the list and the case. */
.v2-incidents .side, .v2-detail .side, .v2-requests .side, .v2-command .side, .v2-users .side { display: none; }
@media (min-width: 900px) {
  .v2-incidents .shell, .v2-detail .shell, .v2-requests .shell, .v2-command .shell, .v2-users .shell { max-width: none; display: grid;
    grid-template-columns: 248px minmax(0, 1fr); }
  .v2-incidents .side, .v2-detail .side, .v2-requests .side, .v2-command .side, .v2-users .side { display: flex; background: var(--side);
    border-inline-end: 1px solid var(--line); padding: 24px 16px;
    flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; }
  .v2-incidents .side nav, .v2-detail .side nav, .v2-requests .side nav, .v2-command .side nav, .v2-users .side nav { display: flex; flex-direction: column; gap: 4px; }
  .v2-incidents .side nav a, .v2-detail .side nav a, .v2-requests .side nav a, .v2-command .side nav a, .v2-users .side nav a { display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 15px;
    color: var(--ink); text-decoration: none; }
  .v2-incidents .side nav a[aria-current="page"], .v2-detail .side nav a[aria-current="page"], .v2-requests .side nav a[aria-current="page"], .v2-command .side nav a[aria-current="page"], .v2-users .side nav a[aria-current="page"] {
    background: var(--tile); color: var(--accent); font-weight: 700; }
  .v2-incidents .side .me, .v2-detail .side .me, .v2-requests .side .me, .v2-command .side .me, .v2-users .side .me { margin-top: auto; display: flex;
    flex-direction: column; gap: 12px; }
  .v2-incidents .side .me-card, .v2-detail .side .me-card, .v2-requests .side .me-card, .v2-command .side .me-card, .v2-users .side .me-card { display: flex; align-items: center;
    gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface);
    border: 1px solid var(--line); }
  .v2-incidents .content, .v2-detail .content, .v2-requests .content, .v2-command .content, .v2-users .content { padding: 24px 32px 112px; min-width: 0; }
  .v2-incidents nav.tabsbar, .v2-detail nav.tabsbar, .v2-requests nav.tabsbar, .v2-command nav.tabsbar, .v2-users nav.tabsbar { display: none; }
  .v2-incidents main, .v2-detail main, .v2-requests main, .v2-command main, .v2-users main { padding: 0; }
}
@media (max-width: 899px) {
  .v2-incidents .shell, .v2-detail .shell, .v2-requests .shell, .v2-command .shell, .v2-users .shell { max-width: 430px; }
}

/* The CEO's own pages (map, briefing, reports, notifications, profile) take the
   command room's desk frame: the same side rail and reading column. */
.v2-ceo .side { display: none; }
.v2-ceo main { padding: 8px 16px 20px; flex: 1; }
@media (min-width: 900px) {
  .v2-ceo .shell { max-width: none; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
  .v2-ceo .side { display: flex; background: var(--side); border-inline-end: 1px solid var(--line); padding: 24px 16px;
    flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; }
  .v2-ceo .side nav { display: flex; flex-direction: column; gap: 4px; }
  .v2-ceo .side nav a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px;
    border-radius: 12px; font-size: 15px; color: var(--ink); text-decoration: none; }
  .v2-ceo .side nav a[aria-current="page"] { background: var(--tile); color: var(--accent); font-weight: 700; }
  .v2-ceo .side .me { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
  .v2-ceo .content { padding: 24px 32px 112px; min-width: 0; }
  .v2-ceo nav.tabsbar { display: none; }
  .v2-ceo main { padding: 0; }
}
@media (max-width: 899px) {
  .v2-ceo .shell { max-width: 430px; }
}
/* The rail's parts on every page of this frame (reports, briefing, map, the account pages and
   the decision matrix), as the home and the users' pages wear them: the icon, the label, the
   count as a red chip, and the signed-in card at the foot in a box of its own. */
.v2-ceo .side .nav-icon { width: 22px; height: 22px; flex: none; display: flex;
  align-items: center; justify-content: center; }
.v2-ceo .side .nav-label { flex: 1; min-width: 0; }
.v2-ceo .side .nav-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--danger); color: var(--bg); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.v2-ceo .side .me-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px;
  border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.v2-ceo .side .me-avatar { width: 38px; height: 38px; flex: none; border-radius: 50%;
  background: var(--surface2); color: var(--ink); display: flex; align-items: center;
  justify-content: center; }
.v2-ceo .side .me-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.v2-ceo .side .me-role { font-size: 14px; font-weight: 600; }
.v2-ceo .side .me-text a { font-size: 13px; text-decoration: none; }

/* --- the command room (the CEO's operations screen) --------------------------- */
/* Dark only, by the owner's decision: the theme switch goes, the language stays. */
/* The room's light, after the approved showcase: text in near-white, the second
   voice the same white at 74%, hairlines at 14% white, cards filled with 5% white
   over the green, the showcase's gold, and the Salmani lattice of every page on the ground.
   Sizes stay as they are; only the clarity and the brightness change. */
/* The room's light reading, by the same rules in their own values: deep ink at full
   strength, its second voice the same ink at 74%, hairlines 14%, inner surfaces 5% and
   8% of ink over the ivory, the green band for the opening card and the directives,
   and the deep amber gold that reads on white. It opens dark (v2-dark-default) and
   the switch chooses, like every other page. */
.v2-command { --ink: #17302B; --muted: rgba(23, 48, 43, 0.74); --line: rgba(23, 48, 43, 0.14);
  --surface: #FFFFFF; --surface2: color-mix(in srgb, #17302B 5%, #F4F2EC);
  --tile: color-mix(in srgb, #17302B 8%, #F4F2EC); --hero: #004E43;
  --onband: #FBFAF7; --onband2: rgba(251, 250, 247, 0.78); --accent: #004E43;
  --gold: #8A6516; --heroink: #F6DD93; --link: #8A6516; --focus: #B5892A; --side: #FBFAF7;
  --num-a: #2E4A44; --num-b: #17302B; --num-c: #0E1F1C;
  /* The approve button: the centre's green with ivory words in this reading, the live
     dot's green with deep ink in the dark one; the armed gold takes the same ink. */
  --approve: #004E43; --onok: #FBFAF7;
  --pin-cut: brightness(0) opacity(0.82); /* the map pins' sector cut: ink on white here, white on the dark pin */ }
/* The room's dark reading: near-white and the showcase's gold. */
:root[data-theme="dark"] .v2-command, :root.v2-dark-default:not([data-theme="light"]) .v2-command {
  --ink: #FBFAF7; --muted: rgba(251, 250, 247, 0.74); --line: rgba(251, 250, 247, 0.14);
  --surface: color-mix(in srgb, #FBFAF7 5%, #19332F); --surface2: color-mix(in srgb, #FBFAF7 8%, #19332F);
  --tile: color-mix(in srgb, #FBFAF7 9%, #19332F); --hero: color-mix(in srgb, #FBFAF7 6%, #19332F);
  --onband: #FBFAF7; --onband2: rgba(251, 250, 247, 0.74); --accent: #FBFAF7;
  --gold: #E2B75A; --heroink: #E2B75A; --link: #E2B75A; --focus: #E2B75A; --side: #142A27;
  --num-a: #FFFFFF; --num-b: #FBFAF7; --num-c: #D9D5CC;
  --pin-cut: brightness(0) invert(1); --approve: #6FCF97; --onok: #12302B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .v2-command {
    --ink: #FBFAF7; --muted: rgba(251, 250, 247, 0.74); --line: rgba(251, 250, 247, 0.14);
    --surface: color-mix(in srgb, #FBFAF7 5%, #19332F); --surface2: color-mix(in srgb, #FBFAF7 8%, #19332F);
    --tile: color-mix(in srgb, #FBFAF7 9%, #19332F); --hero: color-mix(in srgb, #FBFAF7 6%, #19332F);
    --onband: #FBFAF7; --onband2: rgba(251, 250, 247, 0.74); --accent: #FBFAF7;
    --gold: #E2B75A; --heroink: #E2B75A; --link: #E2B75A; --focus: #E2B75A; --side: #142A27;
    --num-a: #FFFFFF; --num-b: #FBFAF7; --num-c: #D9D5CC;
    --pin-cut: brightness(0) invert(1); --approve: #6FCF97; --onok: #12302B; }
}
.v2-command p, .v2-command li, .v2-command .k-note, .v2-command .hint, .v2-command .text,
.v2-command .measure .k-note { line-height: 1.75; }
.v2-command .k-label, .v2-command .sec-head h2, .v2-command .issued-what, .v2-command .pulse-sector,
.v2-command .map-preview-n { font-weight: 700; }
.v2-command .orders-grid b svg { color: #E2B75A; }
.v2-command main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.v2-command .hero { padding: 22px 20px; }
/* The opening card, one grid. On the phone one column: the greeting, a gold rule, the
   one line that matters, the motto, and the sectors' shields closing the card. On the
   desk and the wall three columns: the words at the start, the art in the middle (the
   Kingdom's line centred on its column, the shields on the motto's row beneath it),
   and at the far side the day, the live clock and the place, each on the row of the
   words beside it, so every line of the card reads level across. Behind it all the
   Salmani lattice of the pages, a step brighter on the card's green, fading away from the
   words. */
.v2-command .hero.open { display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "greet" "rule" "decision" "motto" "marks"; align-items: center; row-gap: 8px; }
.v2-command .hero.open::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cpath d='M0 6.5H60M0 19.5H60M0 32.5H60M0 45.5H60M0 58.5H60M0 71.5H60M0 84.5H60M0 97.5H60M-56.25 -13L18.75 117M-41.25 -13L33.75 117M-26.25 -13L48.75 117M-11.25 -13L63.75 117M11.25 -13L-63.75 117M3.75 -13L78.75 117M26.25 -13L-48.75 117M18.75 -13L93.75 117M41.25 -13L-33.75 117M33.75 -13L108.75 117M56.25 -13L-18.75 117M48.75 -13L123.75 117M71.25 -13L-3.75 117M86.25 -13L11.25 117M101.25 -13L26.25 117M116.25 -13L41.25 117' fill='none' stroke='%23E2B75A' stroke-opacity='0.09' stroke-width='0.75'/%3E%3Cpath d='M2.85 8.15L12.15 8.15L7.5 16.21ZM0 35.79L-4.65 43.85L4.65 43.85ZM60 35.79L55.35 43.85L64.65 43.85ZM32.85 60.15L42.15 60.15L37.5 68.21ZM30 87.79L25.35 95.85L34.65 95.85Z' fill='%23E2B75A' fill-opacity='0.16'/%3E%3C/svg%3E") 0 0 / 60px 104px repeat;
  -webkit-mask-image: radial-gradient(ellipse 70% 120% at 85% 35%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 120% at 85% 35%, #000 10%, transparent 70%); }
[dir="ltr"] .v2-command .hero.open::after { -webkit-mask-image: radial-gradient(ellipse 70% 120% at 15% 35%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 70% 120% at 15% 35%, #000 10%, transparent 70%); }
/* The words and the far side above the art and the grid of gold. */
.v2-command .hero.open > .open-greet, .v2-command .hero.open > .open-rule, .v2-command .hero.open > .open-decision,
.v2-command .hero.open > .open-motto, .v2-command .hero.open > .open-day, .v2-command .hero.open > .open-clock,
.v2-command .hero.open > .open-live { position: relative; z-index: 1; }
.v2-command .open-greet { grid-area: greet; }
.v2-command .open-rule { grid-area: rule; display: block; height: 1px; width: 160px; max-width: 60%;
  background: linear-gradient(to left, var(--gold), transparent); }
[dir="ltr"] .v2-command .open-rule { background: linear-gradient(to right, var(--gold), transparent); }
/* The card's own lines name the card (.hero.open), so the generic hero paragraph (.v2 .hero p) never wins. */
.v2-command .hero.open .open-decision { grid-area: decision; margin: 0; font-size: 19px; line-height: 1.4; font-weight: 700;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, #F6DD93 0%, #E2B75A 58%, #CFA23F 100%); width: fit-content; max-width: 100%; }
/* Gradient-filled words paint only inside their own box, and the dots under the line
   (the ya of a name, the ba of a word) fall past it: room above and below for every
   dot and mark, given back by a negative margin so the rows keep their rhythm. */
.v2-command .hero.open .open-greet, .v2-command .hero.open .open-decision {
  padding-block: 0.12em 0.32em; margin-block: -0.12em -0.32em; }
.v2-command .hero.open .open-motto { grid-area: motto; margin: 0; font-size: 14px; line-height: 1.75; color: var(--onband2); }
/* The far side: the day, the live clock and the place; hidden on the phone (the
   header carries them there), quiet on the desk, the card's second centre on the wall. */
.v2-command .open-day, .v2-command .open-clock, .v2-command .open-live { display: none; justify-self: end;
  text-align: end; white-space: nowrap; }
.v2-command .open-day { grid-area: day; font-size: 13px; color: var(--onband2); }
.v2-command .open-clock { grid-area: clock; align-items: center; gap: 8px; font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--onband); }
.v2-command .open-clock .code { font-size: inherit; font-weight: inherit; }
.v2-command .open-live { grid-area: live; font-size: 13px; color: var(--onband2); }
.v2-command .hero h1 .who { white-space: nowrap; }
/* The card's art (v2/_kingdom.html), under the words and never read aloud: the
   Kingdom's border as the pages' Salmani lattice in gold inside a fine gold edge, a faint
   graticule, a slow scan line crossing it (seven
   seconds, out of view at the edges), its five great cities as diamonds pulsing one
   after another (three seconds each, paused out of view), and the four sectors'
   shields dimmed to a faint gold fill with hairlines between them, in the empty floor
   of the card. The card is green in both readings, so the gold is the same in both. */
.v2-command .hero.open .kingdom { position: absolute; z-index: 0; pointer-events: none; }
.v2-command .kingdom svg { display: block; width: 100%; height: auto; }
.v2-command .k-land { fill: url(#k-salmani); stroke: url(#k-gold); stroke-width: 1.25;
  stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.v2-command .k-grat { fill: none; stroke: #E8C97A; stroke-opacity: 0.16; stroke-dasharray: 2 6;
  vector-effect: non-scaling-stroke; }
.v2-command .k-dot { fill: #F2D68F; }
.v2-command .k-halo { fill: none; stroke: #F2D68F; stroke-width: 1; vector-effect: non-scaling-stroke;
  transform-box: fill-box; transform-origin: center; animation: kbreathe 3s ease-in-out infinite;
  animation-delay: var(--kd, 0s); }
@keyframes kbreathe { 0%, 100% { transform: scale(0.75); opacity: 0.3; } 50% { transform: scale(1.25); opacity: 1; } }
.v2-command .k-scan { animation: kscan 7s linear infinite; }
@keyframes kscan { from { transform: translateY(-64px); } to { transform: translateY(344px); } }
.v2-command .hero.out .k-halo { animation-play-state: paused; }
.v2-command .hero.open .k-marks { grid-area: marks; display: flex; align-items: center; justify-content: center;
  gap: 16px; margin-top: 8px; z-index: 0; pointer-events: none; }
.v2-command .k-mark { display: block; width: 22px; height: 26px; background: rgba(242, 214, 143, 0.13);
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.v2-command .k-aviation { -webkit-mask-image: url("../img/sectors/aviation.svg"); mask-image: url("../img/sectors/aviation.svg"); }
.v2-command .k-maritime { -webkit-mask-image: url("../img/sectors/maritime.svg"); mask-image: url("../img/sectors/maritime.svg"); }
.v2-command .k-rail { -webkit-mask-image: url("../img/sectors/rail.svg"); mask-image: url("../img/sectors/rail.svg"); }
.v2-command .k-road { -webkit-mask-image: url("../img/sectors/road.svg"); mask-image: url("../img/sectors/road.svg"); }
.v2-command .k-sep { display: block; width: 1px; height: 16px; background: rgba(232, 201, 122, 0.22); }
@media (min-width: 900px) {
  /* The words' column is as wide as its longest line (at most 62% of the card, past
     which the greeting wraps), the art takes what is left before the far side: the
     line and the shields never sit under a word, however long a name. */
  .v2-command .hero.open { --open-pt: 28px; padding: var(--open-pt) 32px;
    grid-template-columns: fit-content(62%) minmax(0, 1fr) auto;
    grid-template-areas: "greet . day" "rule . ." "decision . clock" "motto marks live";
    column-gap: 32px; row-gap: 10px; }
  /* The greeting one step above the gold line: 30 over 24 on the desk (24 over 19 on
     the phone, 38 over 30 on the wall). */
  .v2-command .hero.open .open-greet { font-size: 30px; }
  .v2-command .open-day, .v2-command .open-live { display: block; }
  .v2-command .open-clock { display: inline-flex; }
  /* The art's column: the Kingdom's line centred on it, its northern edge just past
     the card's top, and the shields centred under it on the motto's row (taking no
     height of their own, so the rows keep their rhythm). The shields rest on the
     line's southern floor, below the five cities, so no city sits under a shield. */
  .v2-command .hero.open .kingdom { grid-column: 2 / 3; grid-row: 1 / -1; left: 50%;
    top: calc(-1 * var(--open-pt) - 16px); transform: translateX(-50%); width: min(220px, 100%); }
  .v2-command .hero.open .k-marks { grid-area: marks; justify-self: center; width: min(100%, 360px);
    justify-content: space-between; height: 0; margin-top: 0; gap: 0; }
  .v2-command .k-mark { width: 36px; height: 43px; }
  .v2-command .k-sep { height: 26px; }
}
@media (max-width: 899px) {
  /* On the phone the line rests at the far side, behind the name and the gold line,
     and the shields close the card in their own quiet row. */
  .v2-command .hero.open .kingdom { inset-inline-end: -12px; top: 50px; width: 140px; opacity: 0.8;
    -webkit-mask-image: linear-gradient(to right, #000 30%, transparent 92%); mask-image: linear-gradient(to right, #000 30%, transparent 92%); }
  /* The line fades toward the words, so it never runs under them however long they are. */
  [dir="ltr"] .v2-command .hero.open .kingdom { inset-inline-end: -36px;
    -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 92%); mask-image: linear-gradient(to left, #000 30%, transparent 92%); }
  /* The phone breaks the greeting once, before the name, never inside the words. */
  .v2-command .hero.open h1 { font-size: min(24px, 7.2vw); white-space: nowrap; text-wrap: initial; }
  .v2-command .hero.open h1 .who { display: block; }
}
.v2-command .bar-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v2-command .bar-acts { display: flex; align-items: center; gap: 4px; }
.v2-command .bar-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-command .bar-clock { font-size: 13px; color: var(--muted); display: flex; align-items: center;
  gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding-block: 10px; padding-inline-start: 12px; margin-block: -10px; margin-inline-start: -12px; }
.v2-command .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); flex: none;
  animation: halo 1.4s ease-out infinite; }
.v2-command .desk-only { display: none; }
.v2-command .flash { margin: 0; display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border-radius: 14px; font-size: 14px; line-height: 1.6; }
.v2-command .flash-ok { background: var(--oksoft); color: var(--ok); }
.v2-command .flash-bad { background: var(--dangersoft); color: var(--danger); }
.v2-command .flash svg { flex: none; }
/* The figures and the measures are one kind of card: the same surface, edge, radius and
   padding, and the same four parts in the same order (the label, the figure, the status or
   the trend, the note). Each part keeps its height whatever it says, so the lines run level
   across a row, and no card is heavier than another: a status line says which one needs
   attention, not a fill, a glow or a colour of its own. */
.v2-command { --kpi-gap: 8px; --kpi-line: 4px; --kpi-pad-y: 12px; --kpi-pad-x: 14px;
  --kpi-label: 13px; --kpi-value: 30px; --kpi-note: 13px; }
.v2-command .figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kpi-gap); }
.v2-command .fig { display: flex; flex-direction: column; gap: var(--kpi-line); min-width: 0; text-align: start;
  padding: var(--kpi-pad-y) var(--kpi-pad-x); border: 1px solid var(--line); border-radius: 16px;
  background: var(--surface); color: var(--ink); text-decoration: none; }
.v2-command .fig:last-child { grid-column: 1 / -1; }
.v2-command .fig .k-label { font-size: var(--kpi-label); color: var(--muted); line-height: 1.35; min-height: 2.7em; }
.v2-command .fig b { font-size: var(--kpi-value); line-height: 1.1; font-weight: 700; letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums; }
.v2-command .fig-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-height: 28px; }
/* The status pill hangs by its own side padding, so its words sit on the card's text line. */
.v2-command .fig-meta .chip { margin-inline-start: -10px; }
.v2-command .fig .k-note { font-size: var(--kpi-note); color: var(--muted); line-height: 1.4;
  min-height: calc(var(--kpi-note-lines) * 1.4em); }
.v2-command .chip-plain { background: var(--tile); color: var(--ink); }
/* Sections: a card each, headed the home's way. */
.v2-command .sec { padding: 16px; border-radius: 18px; background: var(--surface);
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.v2-command .sec-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.v2-command .sec-body { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.v2-command .sec-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.v2-command .sec-head a { font-size: 14px; font-weight: 600; text-decoration: none; }
.v2-command .sub-h { margin: 4px 0 0; font-size: 14px; font-weight: 700; color: var(--muted); }
.v2-command .count-chip { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700;
  background: color-mix(in srgb, var(--gold) 14%, transparent); color: var(--gold); }
.v2-command .empty { margin: 0; font-size: 14px; color: var(--muted); line-height: 1.7; }
/* The directives: the deep band of the approved screen, an outlined card each,
   its title and what it does; two a row on the phone, four on the desk. */
.v2-command .orders { background: var(--hero); color: var(--onband); border-color: transparent; }
.v2-command .orders .sec-head { border-bottom-color: rgba(255, 255, 255, 0.18); }
.v2-command .orders .empty { color: var(--onband2); }
.v2-command .orders-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v2-command .orders-grid button { display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06); color: var(--onband); font: inherit; text-align: start;
  cursor: pointer; min-width: 0; }
.v2-command .orders-grid button:hover { background: rgba(255, 255, 255, 0.12); }
.v2-command .orders-grid b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; }
.v2-command .orders-grid b svg { color: #DEB83B; flex: none; }
.v2-command .orders .issued li { background: rgba(255, 255, 255, 0.08); }
.v2-command .issued { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v2-command .issued li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 12px; background: var(--tile); }
.v2-command .issued-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.v2-command .issued-what { font-size: 14px; font-weight: 600; }
/* A decision: the home's row, with the three acts under it. */
.v2-command .decision { padding: 14px; }
.v2-command .decision .sector { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--muted); }
.v2-command .acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.v2-command .dec-blocked { margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); color: var(--ink2, inherit); font-size: 14px; line-height: 1.6; }
.v2-command .acts form { display: contents; }
.v2-command .acts .btn { min-height: 42px; padding: 0 14px; border-radius: 12px; font-size: 14px; flex: 1 1 auto; }
/* Approve in green beside the return in the one red: the decision reads by colour
   before the words. The armed second press stays gold. */
.v2-command .acts .btn-approve { background: var(--approve); color: var(--onok); }
.v2-command .acts .btn.armed { background: var(--gold); color: var(--onok); }
.v2-command .ret { flex: 1 1 100%; }
.v2-command .ret summary { list-style: none; cursor: pointer; }
.v2-command .ret summary::-webkit-details-marker { display: none; }
.v2-command .ret-form { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.v2-command .ret-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.v2-command .ret-form textarea.field { min-height: 0; padding: 10px 12px; resize: none; font-size: 15px; }
/* The map: a window on the room, on the desk; the phone gets the card. */
.v2-command .map-card { display: none; }
/* The map's cards (an aircraft, a cluster) on the room's own surface, as on the map page
   (v2-map.css). MapLibre draws them white by default, and the room's ink is light on its
   dark reading: the card's words were white on white. */
.v2-command .maplibregl-popup-content { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.v2-command .maplibregl-popup-anchor-top .maplibregl-popup-tip,
.v2-command .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.v2-command .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.v2-command .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.v2-command .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.v2-command .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
.v2-command .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.v2-command .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.v2-command .dash-map { height: 440px; border-radius: 14px; overflow: hidden; background: var(--tile); }
.v2-command .map-frame { position: relative; }
.v2-command .dash-map__empty { position: absolute; inset-block-end: 12px; inset-inline: 12px; margin: 0;
  padding: 8px 12px; border-radius: 10px; background: var(--surface); font-size: 13px; color: var(--muted); }
.v2-command .map-preview { display: flex; flex-direction: column; gap: 12px; padding: 14px;
  border-radius: 14px; color: var(--ink); text-decoration: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--ink) 7%, transparent) 1px, transparent 1.4px) 0 0 / 14px 14px, var(--tile); }
.v2-command .map-preview-n { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.v2-command .map-preview-n svg { color: var(--gold); flex: none; }
.v2-command .map-preview-sectors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v2-command .map-preview-sectors span { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 4px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.v2-command .map-preview-sectors b { font-size: 18px; line-height: 1.2; color: var(--ink); font-weight: 700; }
.v2-command .map-preview-sectors em { font-style: normal; font-size: 13px; color: var(--muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.v2-command .map-preview .btn { align-self: stretch; min-height: 42px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.v2-command .air-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 10px;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--ink);
  font: inherit; font-size: 13px; cursor: pointer; }
.v2-command .air-toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
/* The pulse: each sector a card. At its head the sector's artwork, an arrow for where today
   stands against the 30 days' average (up in green, down in red, level in grey; the bubble
   says which), and today's share of its open cases within their deadline. Below, the 30
   days as one line on a fixed scale, 0% at the foot and 100% at the top, the same for every
   sector, with a gold wash under it; the reading follows the pointer (v2-command.js). */
.v2-command .pulse { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.v2-command .pulse-card { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 10px 12px 8px; border: 1px solid var(--box-line, var(--line)); border-radius: var(--box-r-in, 12px); }
.v2-command .pulse-now { display: flex; align-items: center; gap: 8px; min-width: 0; width: fit-content;
  border-radius: 8px; outline-offset: 3px; cursor: default; }
.v2-command .pulse-sector { display: inline-flex; align-items: center; font-size: 14px; }
.v2-command .pulse-sector .sico-head { width: 26px; height: 26px; }
.v2-command .pulse-arrow { display: inline-flex; width: 12px; height: 12px; color: var(--muted); }
.v2-command .pulse-arrow svg { display: block; fill: currentColor; }
.v2-command .pulse-card[data-trend="up"] .pulse-arrow { color: var(--ok); }
.v2-command .pulse-card[data-trend="down"] .pulse-arrow { color: var(--danger); }
.v2-command .pulse-now b { font-size: 20px; font-weight: 700; line-height: 1.1; }
.v2-command .pulse-chart { position: relative; height: 60px; touch-action: pan-y; cursor: crosshair;
  border-radius: 6px; outline-offset: 3px; }
.v2-command .pulse-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.v2-command .pulse-axis { position: absolute; left: 0; direction: ltr; font-size: 10.5px; line-height: 1;
  color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.v2-command .pulse-axis-top { top: 7px; transform: translateY(-50%); }
.v2-command .pulse-axis-low { bottom: 7px; transform: translateY(50%); }
.v2-command .pulse-rule { stroke: var(--line); stroke-width: 1; shape-rendering: crispEdges; }
.v2-command .pulse-line { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.v2-command .pulse-end, .v2-command .pulse-dot { fill: var(--gold); stroke: var(--surface); stroke-width: 2; }
.v2-command .pulse-cross { stroke: var(--muted); stroke-width: 1; shape-rendering: crispEdges; }
.v2-command .pulse-chart:not(.is-reading) .pulse-read { display: none; }
.v2-command .pulse-tip { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 0; width: max-content; max-width: 100%; padding: 6px 10px;
  border-radius: 10px; border: 1px solid var(--box-line, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); color: var(--muted); font-size: 12px; line-height: 1.5;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.12s ease, visibility 0.12s; }
.v2-command .pulse-tip b { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.4; }
.v2-command .pulse-chart.is-reading .pulse-tip { opacity: 1; visibility: visible; }
.v2-command .pulse-card:has(.is-reading, .tip-open, :focus-visible) { z-index: 31; }
@media (hover: hover) { .v2-command .pulse-card:hover { z-index: 31; } }
@media (prefers-reduced-motion: reduce) { .v2-command .pulse-tip { transition: none; } }
/* The names are for screen readers only: the artwork is the label. */
.v2-command .pulse .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* The desk has no side rail: its pages run along one bar at the top, with the mark, the
   pages, the name and the actions. The other pages keep their rail. */
.v2-command .top-nav, .v2-command .top-user { display: none; }
@media (min-width: 900px) {
  .v2-command .shell { grid-template-columns: minmax(0, 1fr); }
  .v2-command .side { display: none; }
  .v2-command .bar-main > .iconbtn { display: none; }
  /* Two rows: the mark, the name and the actions; the pages below them, on a rule. */
  .v2-command header.bar { align-items: center; flex-wrap: wrap; column-gap: 16px; row-gap: 10px; }
  .v2-command .top-user { order: 1; margin-inline-start: auto; }
  .v2-command .bar-acts { order: 2; }
  .v2-command .top-nav { order: 3; display: flex; align-items: center; flex: 0 0 100%; flex-wrap: wrap; gap: 4px;
    min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); }
  .v2-command .top-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
    border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
  .v2-command .top-nav a:hover, .v2-command .top-nav a:focus-visible, .v2-command .top-nav a[aria-current="page"] {
    color: var(--ink); background: var(--tile); }
  .v2-command .top-nav a:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
  .v2-command .top-brand { margin-inline-end: 10px; padding: 0; }
  .v2-command .top-brand img { height: 36px; width: auto; display: block; }
  .v2-command .top-brand .logo-light { display: var(--logo-light); }
  .v2-command .top-brand .logo-dark { display: var(--logo-dark); }
  /* The mark shines: a light slides across the logo alone, on the room's 3.6s beat (a rest,
     then the pass), in the gold the room reads on green. Both logo files share one outline,
     so the colour file shapes the light in either reading, at the logo's own 36px (the link
     around it keeps the nav's side padding). */
  .v2-command .top-brand { position: relative; }
  .v2-command .top-brand::after { content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(100deg, transparent 0 40%, var(--heroink) 50%, transparent 60% 100%) 100% 0 / 300% 100% no-repeat;
    -webkit-mask: url("../img/ntsc-logo-color.png") center / auto 36px no-repeat;
    mask: url("../img/ntsc-logo-color.png") center / auto 36px no-repeat;
    animation: logo-light 3.6s ease-in-out infinite; }
  .v2-command .top-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px;
    padding: 0 6px; border-radius: 999px; background: var(--danger); color: var(--bg); font-size: 12px; font-weight: 700; }
  .v2-command .top-user { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
  .v2-command .top-user a { color: var(--accent); }
}
.v2-command .late { color: var(--danger); font-weight: 600; font-size: 13px; white-space: nowrap; }
.v2-command .ok { color: var(--ok); font-weight: 600; font-size: 13px; white-space: nowrap; }
.v2-command .worst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.v2-command .worst li { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--line); }
.v2-command .worst-main { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--muted); }
.v2-command .worst-main .code { font-size: 14px; font-weight: 600; color: var(--link); text-decoration: none; }
/* Performance: on the phone a row a measure (the label and its note at the start,
   the figure at the end, a hairline between rows); on the desk five columns on one
   surface, parted by hairlines. */
.v2-command .measures { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v2-command .measure { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 2px;
  grid-template-areas: "label value" "trend value" "note value"; align-items: center;
  padding: 12px 2px; min-width: 0; border-bottom: 1px solid var(--line); }
.v2-command .measure:last-child { border-bottom: 0; }
.v2-command .measure .k-label { grid-area: label; font-size: 14px; font-weight: 600; color: var(--ink); }
.v2-command .measure b { grid-area: value; font-size: 24px; line-height: 1.2; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.v2-command .measure .trend { grid-area: trend; font-size: 13px; font-weight: 600; }
.v2-command .trend-better { color: var(--ok); }
.v2-command .trend-worse { color: var(--danger); }
.v2-command .trend-same { color: var(--muted); }
.v2-command .measure .k-note { grid-area: note; font-size: 13px; font-weight: 500; color: var(--ink); opacity: 0.82;
  line-height: 1.6; text-wrap: pretty; }
.v2-command .measure .trend-same { color: var(--ink); opacity: 0.7; }
/* The last day: the case page's vertical line. */
.v2-command .vtl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.v2-command .vtl li { position: relative; padding-inline-start: 26px; padding-bottom: 14px; }
.v2-command .vtl li::before { content: ""; position: absolute; inset-inline-start: 0; top: 6px; width: 10px;
  height: 10px; border-radius: 50%; background: var(--accent); }
.v2-command .vtl li::after { content: ""; position: absolute; inset-inline-start: 4px; top: 18px; bottom: -2px;
  width: 2px; background: var(--line); }
.v2-command .vtl li:last-child::after { display: none; }
.v2-command .vtl li.gold::before { background: var(--gold); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 22%, transparent); }
.v2-command .vtl li.new::before { background: var(--ok); }
.v2-command .vtl-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.v2-command .vtl-head .code { font-weight: 600; color: var(--link); text-decoration: none; }
.v2-command .vtl-head .when { font-size: 13px; color: var(--muted); }
.v2-command .vtl-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.v2-command .stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.v2-command .report p { margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.v2-command .report { display: flex; flex-direction: column; gap: 10px; }
.v2-command .report .btn { align-self: flex-start; min-height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14px; }
.v2-command .bodies { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.v2-command .bodies li { display: flex; align-items: center; gap: 8px; }
.v2-command .link-stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v2-command .link-stats div { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--tile); }
.v2-command .link-stats dt { font-size: 13px; color: var(--muted); font-weight: 500; }
.v2-command .link-stats dd { margin: 0; font-size: 16px; font-weight: 700; }
/* The sheet (a directive) and the palette (jump to). */
.v2-command dialog.sheet, .v2-command dialog.pal { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; }
.v2-command dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.v2-command dialog.sheet { width: 100vw; width: 100dvw; margin: auto 0 0; }
.v2-command .sheet-form { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 24px;
  border-radius: 24px 24px 0 0; background: var(--surface); color: var(--ink); max-height: 90dvh; overflow: auto; }
.v2-command .sheet-form::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; }
.v2-command .sheet-form h2 { margin: 0; font-size: 17px; font-weight: 700; }
.v2-command .kinds { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.v2-command .kinds label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border-radius: 12px; border: 1px solid var(--line); font-size: 14px; font-weight: 600; cursor: pointer; }
.v2-command .kinds label:has(input:checked) { border-color: var(--accent); background: var(--tile); color: var(--accent); }
.v2-command .kinds input { accent-color: var(--accent); }
.v2-command .fld { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; }
.v2-command .fld textarea.field { min-height: 0; padding: 10px 12px; resize: none; }
.v2-command .sheet-act { display: flex; gap: 8px; }
.v2-command .sheet-act .btn { flex: 1; min-height: 46px; border-radius: 12px; font-size: 15px; }
.v2-command dialog.pal { width: min(560px, calc(100vw - 32px)); margin: 10vh auto auto; }
.v2-command dialog.pal .field, .v2-command #pal-list { background: var(--surface); }
.v2-command dialog.pal .field { border-radius: 16px 16px 0 0; }
.v2-command #pal-list { list-style: none; margin: 0; padding: 6px; display: flex; flex-direction: column; gap: 2px;
  border-radius: 0 0 16px 16px; }
.v2-command #pal-list li { padding: 10px 12px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.v2-command #pal-list li[aria-selected="true"] { background: var(--tile); color: var(--accent); font-weight: 600; }
/* A group's heading: its name after a small gold diamond, never selectable. */
.v2-command #pal-list li.g { display: flex; align-items: center; gap: 10px; cursor: default; font-size: 13px; font-weight: 700;
  color: var(--muted); }
.v2-command #pal-list li.g::before { content: ""; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; }
/* From 900px (the desk and the wall) the palette is one card in the room's own language (the owner's
   choice of A, 27 October 2026): the start corner cut at 45 degrees, a gold line under the field, the
   groups under their headings, equal rows, the chosen row marked by a gold edge. The phone keeps its sheet. */
@media (min-width: 900px) {
  .v2-command dialog.pal { width: min(760px, calc(100vw - 48px)); margin: 12vh auto auto; background: var(--surface);
    border: 1px solid var(--line); clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%); }
  [dir="ltr"] .v2-command dialog.pal { clip-path: polygon(30px 0, 100% 0, 100% 100%, 0 100%, 0 30px); }
  .v2-command dialog.pal .field { min-height: 72px; padding: 0 28px; border: 0; border-bottom: 2px solid var(--gold);
    border-radius: 0; background: transparent; font-size: 22px; }
  .v2-command #pal-list { background: transparent; border-radius: 0; padding: 8px 0 12px; gap: 0; }
  .v2-command #pal-list li { height: 56px; padding: 0 28px; border-radius: 0; font-size: 18px; display: flex; align-items: center; }
  .v2-command #pal-list li.g { height: 44px; padding-top: 6px; font-size: 14px; }
  .v2-command #pal-list li .code { font-size: inherit; font-weight: inherit; letter-spacing: 0.02em; }
  .v2-command #pal-list li[aria-selected="true"] { box-shadow: inset -4px 0 0 var(--gold); }
  [dir="ltr"] .v2-command #pal-list li[aria-selected="true"] { box-shadow: inset 4px 0 0 var(--gold); }
}
.v2-command .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* The command room on the wall: COMMAND ROOM F (the owner's order of 26 October 2026), the
   full wall screen of sample B on the room's own modules and data. One screen, no scrolling:
   a bar (the centre's mark, the room's name and the live Riyadh clock; the language, the
   reading, the way out and the one «أمر»); the greeting beside what the system did since the
   previous sign-in; the five figures; then the sectors' pulse and the centre's performance,
   the live map between, the decisions and the last day; along the foot the lifecycle, the
   executive report and the connected bodies. The desk and the phone keep their own rooms:
   nothing here reaches a screen out of wall mode. */
body.v2-command:not(.wall) .wall-only { display: none !important; }
.v2-command #cmd-wall { display: none; }
@media (min-width: 900px) and (min-height: 561px) { .v2-command #cmd-wall { display: inline-flex; } }
body.v2-command.wall { --w-gap: 12px; --w-start: 340px; --w-end: 380px; --w-tile: 230px;
  --fig-size: 40px; --fig-size-2: 34px; overflow: hidden; }
body.v2-command.wall :is(.side, header.bar, .theme-switch, nav.tabsbar, .hero.area-hero, .area-vitals,
  #orders, #decisions, #timeline, #report-bodies, .area-flash, .map-preview, .zone, .plate, .foot, .fig-you,
  #map > .sec-head) { display: none !important; }
/* The board: F is drawn once, on a 1920 × 1080 board (the room's 65 to 75 inch screen), and
   the whole board grows or shrinks by one measure to the screen it meets, centred on it
   (v2-command.js sets --f-scale): the same picture on every screen, nothing cut, nothing
   moved (the owner's order of 26 October 2026). */
body.v2-command.wall .shell { height: 100dvh; max-width: none; grid-template-columns: minmax(0, 1fr);
  place-content: center; place-items: center; overflow: hidden; }
body.v2-command.wall .content { width: 1920px; height: 1080px; min-height: 0 !important; zoom: var(--f-scale, 1);
  overflow: hidden; box-sizing: border-box; padding: 12px 20px 14px; }
/* The sheets sit outside the board, so they take its measure by their own rule: the same
   560 px card, grown or shrunk by --f-scale. Under zoom vw and dvh scale too, so the
   height cap is the board's own pixels (90% of 1080). */
body.v2-command.wall dialog.sheet { width: 560px; zoom: var(--f-scale, 1); }
body.v2-command.wall dialog.sheet .sheet-form { max-height: 972px; }
/* The jump-to palette (Ctrl+K) is the same kind of card: its 760 px and its top gap (the desk's
   12vh scales under zoom too, so 150 px of the board's 1080 stand in). */
body.v2-command.wall dialog.pal { width: 760px; margin: 150px auto auto; zoom: var(--f-scale, 1); }
body.v2-command.wall main { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--w-gap);
  grid-template-columns: var(--w-start) minmax(0, 1fr) var(--w-end);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "bar bar bar" "hero hero hero" "figs figs figs" "start map end" "foot foot foot"; }
body.v2-command.wall .w-bar { grid-area: bar; }
body.v2-command.wall .w-hero { grid-area: hero; }
body.v2-command.wall .area-figs { grid-area: figs; }
body.v2-command.wall .w-start { grid-area: start; }
body.v2-command.wall .area-map { grid-area: map; }
body.v2-command.wall .w-end { grid-area: end; }
body.v2-command.wall .w-foot { grid-area: foot; }

/* 1 · the bar */
body.v2-command.wall .w-bar { display: flex; align-items: center; gap: 16px; min-height: 44px; }
body.v2-command.wall .w-brand { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700;
  white-space: nowrap; }
body.v2-command.wall .w-brand .top-brand { display: block; }
body.v2-command.wall .w-brand .top-brand img { height: 36px; width: auto; }
body.v2-command.wall .w-sep { width: 1px; height: 22px; background: var(--line); }
body.v2-command.wall .w-live { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px;
  white-space: nowrap; }
body.v2-command.wall .w-clock { color: var(--ink); font-weight: 700; direction: ltr; }
body.v2-command.wall .w-utc { color: var(--muted); font-size: 13px; }
body.v2-command.wall .w-grow { flex: 1; }
body.v2-command.wall .w-chip { min-height: 44px; min-width: 44px; padding: 0 14px; border-radius: 12px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center;
  justify-content: center; gap: 8px; font: inherit; font-size: 14px; white-space: nowrap; text-decoration: none; cursor: pointer; }
body.v2-command.wall .w-chip.w-exit { padding: 0; }
body.v2-command.wall .w-chip.w-exit[hidden] { display: none; }
/* The reading the chip turns to: the light one in the dark, the dark one in the light. */
.v2-command .w-to-dark { display: none; }
:root[data-theme="light"] .v2-command .w-to-light, :root:not(.v2-dark-default):not([data-theme]) .v2-command .w-to-light { display: none; }
:root[data-theme="light"] .v2-command .w-to-dark, :root:not(.v2-dark-default):not([data-theme]) .v2-command .w-to-dark { display: inline; }
body.v2-command.wall .w-order { min-height: 48px; padding: 0 22px; border-radius: 12px; border: 0; background: var(--gold);
  color: var(--onok); font: inherit; font-size: 16px; font-weight: 700; display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap; cursor: pointer; }
/* The arrow points the way the line reads: to the left in Arabic, to the right in English. */
[dir="ltr"] body.v2-command.wall .w-order svg { transform: scaleX(-1); }

/* 2 · the greeting and what the system did */
body.v2-command.wall .w-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: stretch;
  padding: 14px 20px; background: var(--hero); color: var(--onband); position: relative; overflow: hidden; }
body.v2-command.wall .w-greet { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; }
body.v2-command.wall .w-greet h1 { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; white-space: nowrap; }
body.v2-command.wall .w-greet p { margin: 0; color: var(--heroink); font-size: 18px; line-height: 1.4; font-weight: 700;
  white-space: nowrap; }
/* The greeting takes the mark's light: a band of light crosses the words on the room's 3.6s
   beat, as it crosses the logo. Where the browser cannot clip a background to text, the words
   stay plain in --onband; still for whoever asked their device for less motion. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  body.v2-command.wall .w-greet h1 { background: linear-gradient(100deg, var(--onband) 0 40%, var(--heroink) 50%, var(--onband) 60% 100%) 100% 0 / 300% 100% no-repeat;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: logo-light 3.6s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) {
  body.v2-command.wall .w-greet h1 { background: none; color: var(--onband); -webkit-text-fill-color: var(--onband); animation: none; } }
body.v2-command.wall .w-auto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch;
  padding-inline-start: 20px; border-inline-start: 1px solid color-mix(in srgb, var(--heroink) 35%, transparent); }
body.v2-command.wall .w-auto-i { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0;
  padding: 0 14px; border-inline-end: 1px solid color-mix(in srgb, var(--onband) 14%, transparent); }
body.v2-command.wall .w-auto-i:last-child { border-inline-end: 0; }
body.v2-command.wall .w-auto-i b { font-size: 26px; line-height: 1; font-weight: 700; }
body.v2-command.wall .w-auto-i span { font-size: 13px; line-height: 1.5; opacity: 0.85; white-space: nowrap; }
body.v2-command.wall .w-auto-i em { font-style: normal; color: var(--heroink); }

/* 3 · the five figures, design H */
body.v2-command.wall .figures { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
body.v2-command.wall .figures .fig { padding: 14px 18px; gap: 10px; }

/* 4 · the pulse and the performance | the map | the decisions and the last day */
body.v2-command.wall .w-col { display: flex; flex-direction: column; gap: var(--w-gap); min-width: 0; min-height: 0; }
body.v2-command.wall .w-panel { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow: hidden;
  padding: 12px 14px; background: var(--surface); }
body.v2-command.wall .w-ph { display: flex; align-items: center; gap: 10px; padding-bottom: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line)); }
body.v2-command.wall .w-ph h2 { margin: 0; display: inline-flex; align-items: center; gap: 10px; font-size: 16px;
  font-weight: 700; white-space: nowrap; }
body.v2-command.wall .w-ph h2::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--gold);
  transform: rotate(45deg); }
body.v2-command.wall .w-aside { margin-inline-start: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
body.v2-command.wall .w-pulse { flex: 1 1 auto; }
body.v2-command.wall .w-perf { flex: none; }
body.v2-command.wall .w-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
body.v2-command.wall .w-legend i { display: inline-block; width: 14px; height: 2px; margin-inline-end: 6px; vertical-align: middle; }
body.v2-command.wall .w-legend i.in { background: var(--gold); }
body.v2-command.wall .w-legend i.out { background: var(--muted); }
body.v2-command.wall .w-sec { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 4px 0; border-bottom: 1px solid var(--line); }
body.v2-command.wall .w-sec:last-child { border-bottom: 0; }
body.v2-command.wall .w-sec img { width: 24px; height: 24px; }
body.v2-command.wall .w-sec .nm { display: flex; flex-direction: column; min-width: 0; }
body.v2-command.wall .w-sec .nm b { font-size: 14px; line-height: 1.4; white-space: nowrap; }
body.v2-command.wall .w-spark { display: block; width: 100%; height: 26px; overflow: visible; }
body.v2-command.wall .w-spark .in { fill: none; stroke: var(--gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
body.v2-command.wall .w-spark .out { fill: none; stroke: var(--muted); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
body.v2-command.wall .w-sec .net { text-align: end; white-space: nowrap; }
body.v2-command.wall .w-sec .net b { display: block; font-size: 20px; line-height: 1; }
body.v2-command.wall .w-sec .net.up b { color: var(--danger); }
body.v2-command.wall .w-sec .net.down b { color: var(--ok); }
/* The centre's five measures, one a row: each name whole, in either reading. */
body.v2-command.wall .w-measures { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
body.v2-command.wall .w-m { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0;
  padding: 4px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
body.v2-command.wall .w-m:last-child { border-bottom: 0; }
body.v2-command.wall .w-m span { color: var(--muted); font-size: 13px; white-space: nowrap; }
body.v2-command.wall .w-m b { font-size: 18px; white-space: nowrap; }

/* the stage: the live map with its layers over it, the alarm at its foot, the source under that */
body.v2-command.wall #map { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 0; gap: 0;
  overflow: hidden; border: 0; border-radius: 0; background: none; }
body.v2-command.wall #map .map-card, body.v2-command.wall #map .map-frame { position: relative; display: flex;
  flex-direction: column; flex: 1 1 auto; min-height: 0; }
body.v2-command.wall #map .dash-map { flex: 1 1 0; height: auto; min-height: 0; border-radius: 0; }
body.v2-command.wall .w-layers { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 3; display: flex;
  flex-wrap: wrap; gap: 8px; max-width: calc(100% - 24px); }
body.v2-command.wall .w-layer { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(6px); color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; }
body.v2-command.wall .w-layer[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
body.v2-command.wall .w-layer[aria-pressed="true"]::before, body.v2-command.wall .w-layer.locked::before {
  content: ""; width: 6px; height: 6px; background: currentColor; transform: rotate(45deg); }
body.v2-command.wall .w-layer.locked { border-color: var(--danger); color: var(--danger); cursor: default; }
body.v2-command.wall #dash-map.no-pins :is(.map-pin, .map-cluster) { visibility: hidden; }
/* The layers keep the stage's start corner (F). The map's own buttons, «+», «−» and the full
   screen, stand at the foot of the other side, where the credit (i) stood, and the credit takes
   their place at its top (the owner's order of 26 October 2026): 12 px from the side as the
   layers, 10 px from the foot as the live line, 12 px from the top as the layers. */
body.v2-command.wall #map .maplibregl-ctrl-top-right { top: auto; bottom: 10px; display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px; }
body.v2-command.wall #map .maplibregl-ctrl-bottom-right { bottom: auto; top: 12px; }
body.v2-command.wall #map :is(.maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-right) { right: 12px; }
[dir="rtl"] body.v2-command.wall #map :is(.maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-right) { right: auto; left: 12px; }
[dir="rtl"] body.v2-command.wall #map .maplibregl-ctrl-top-right { align-items: flex-start; }
body.v2-command.wall #map :is(.maplibregl-ctrl-top-right, .maplibregl-ctrl-bottom-right) > .maplibregl-ctrl { float: none; margin: 0; }
body.v2-command.wall #map .air-alerts { position: absolute; bottom: 38px; inset-inline-start: 12px; z-index: 3; margin: 0;
  width: min(660px, calc(100% - 24px)); }
body.v2-command.wall #map .air-status { position: absolute; bottom: 10px; inset-inline-start: 12px; z-index: 2; margin: 0;
  padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: 12px; color: var(--muted); pointer-events: none; }

body.v2-command.wall .w-dec { flex: 0 1 auto; max-height: 55%; }
body.v2-command.wall .w-list { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
body.v2-command.wall .w-d { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  min-height: 48px; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
body.v2-command.wall .w-d:last-child { border-bottom: 0; }
body.v2-command.wall .w-d img { width: 22px; height: 22px; }
body.v2-command.wall .w-d .t { display: flex; flex-direction: column; min-width: 0; }
body.v2-command.wall .w-d .t b { font-size: 14px; direction: ltr; text-align: end; white-space: nowrap; }
[dir="ltr"] body.v2-command.wall .w-d .t b { text-align: start; }
body.v2-command.wall .w-d .t span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; }
body.v2-command.wall .w-d .w-side { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
body.v2-command.wall .w-d .tag { font-size: 12px; font-weight: 700; line-height: 20px; padding: 0 8px; border-radius: 999px;
  border: 1px solid; white-space: nowrap; }
body.v2-command.wall .w-d .tag.approve { color: var(--approve); border-color: color-mix(in srgb, var(--approve) 55%, transparent); }
body.v2-command.wall .w-d .tag.direct { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
body.v2-command.wall .w-d .age { font-size: 13px; font-weight: 700; color: var(--gold); white-space: nowrap; }
body.v2-command.wall .w-d .age.late { color: var(--danger); }
body.v2-command.wall .w-tl { flex: 1 1 0; }
body.v2-command.wall .w-tlist { list-style: none; margin: 0; padding: 0; position: relative; flex: 1; min-height: 0; overflow: hidden; }
body.v2-command.wall .w-tlist::before { content: ""; position: absolute; top: 6px; bottom: 6px; inset-inline-start: 5px;
  width: 1px; background: var(--line); }
body.v2-command.wall .w-tlist li { position: relative; display: flex; flex-direction: column; padding-block: 5px;
  padding-inline-start: 20px; }
body.v2-command.wall .w-tlist li::before { content: ""; position: absolute; top: 12px; inset-inline-start: 3px; width: 5px;
  height: 5px; border-radius: 50%; background: var(--muted); }
body.v2-command.wall .w-tlist li.gold::before { background: var(--gold); }
body.v2-command.wall .w-tlist .w { display: flex; gap: 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
body.v2-command.wall .w-tlist .w b { color: var(--gold); direction: ltr; }
body.v2-command.wall .w-tlist .w a { color: var(--muted); direction: ltr; text-decoration: none; }
body.v2-command.wall .w-tlist .x { font-size: 14px; line-height: 1.5; }
body.v2-command.wall .w-panel .empty { margin: 0; color: var(--muted); font-size: 14px; }
body.v2-command.wall .w-more { margin: 0; padding-top: 6px; font-size: 12px; color: var(--muted); }

/* 5 · the foot: the lifecycle along it (ق-27 to ق-36), the executive report, the connected bodies */
body.v2-command.wall .w-foot { display: grid; grid-template-columns: minmax(0, 1fr) var(--w-tile) var(--w-tile); gap: var(--w-gap); }
body.v2-command.wall .w-strip { display: grid; min-width: 0; padding: 8px 14px 2px; background: var(--surface);
  grid-template-columns: 150px repeat(6, minmax(0, 1fr)); grid-template-rows: auto repeat(3, 27px); }
body.v2-command.wall .w-strip > .rowh, body.v2-command.wall .w-strip > .phase { grid-row: 1 / span 4; display: grid;
  grid-template-rows: subgrid; min-width: 0; }
body.v2-command.wall .w-strip .ttl { display: flex; align-items: center; gap: 10px; align-self: start; font-size: 16px;
  font-weight: 700; white-space: nowrap; }
body.v2-command.wall .w-strip .ttl::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--gold);
  transform: rotate(45deg); }
body.v2-command.wall .w-strip .ln { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted);
  white-space: nowrap; }
body.v2-command.wall .w-strip .ln svg { width: 18px; height: 18px; flex: none; color: var(--gold); }
body.v2-command.wall .w-strip .ln + .ln, body.v2-command.wall .w-strip .phase .c + .c { border-top: 1px solid var(--line); }
body.v2-command.wall .w-strip .phase { position: relative; padding: 0; border: 0; border-radius: 0; background: none;
  color: var(--ink); font: inherit; text-align: start; cursor: pointer; }
body.v2-command.wall .w-strip .phase .hd { position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 0 14px 12px; border-bottom: 2px solid color-mix(in srgb, var(--gold) 40%, var(--line)); }
body.v2-command.wall .w-strip .phase .nm { font-size: 13px; color: var(--muted); white-space: nowrap; }
body.v2-command.wall .w-strip .phase .ct { display: flex; align-items: baseline; gap: 8px; min-height: 28px; }
body.v2-command.wall .w-strip .phase .ct b { font-size: 26px; line-height: 1; font-weight: 700; }
body.v2-command.wall .w-strip .phase .ct em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--danger);
  white-space: nowrap; }
body.v2-command.wall .w-strip .phase .ct .qr { font-size: 12px; color: var(--muted); white-space: nowrap; }
body.v2-command.wall .w-strip .phase .node { position: absolute; bottom: -7px; inset-inline-start: -6px; z-index: 1;
  width: 12px; height: 12px; transform: rotate(45deg); background: var(--surface); border: 2px solid var(--gold); }
body.v2-command.wall .w-strip .phase.late .node { border-color: var(--danger); }
body.v2-command.wall .w-strip .phase.choke .hd { border-bottom-color: var(--danger); }
body.v2-command.wall .w-strip .phase.gate { background: color-mix(in srgb, var(--gold) 8%, transparent); }
body.v2-command.wall .w-strip .phase.gate .nm { color: var(--gold); font-weight: 700; }
body.v2-command.wall .w-strip .phase.gate .node { background: var(--gold); }
body.v2-command.wall .w-strip .phase.end .node { background: var(--muted); border-color: var(--muted); }
body.v2-command.wall .w-strip .phase .c { display: flex; align-items: center; padding: 0 14px; overflow: hidden;
  font-size: 13px; color: var(--muted); white-space: nowrap; }
body.v2-command.wall .w-strip .phase .c.gold { color: var(--gold); font-weight: 700; }
body.v2-command.wall .w-strip .phase .c.red { color: var(--danger); font-weight: 700; }
body.v2-command.wall .w-strip .phase .c.ink { color: var(--ink); font-weight: 700; }
body.v2-command.wall .w-strip .phase:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* The phases read as an engineer's rule: a ruler of ticks under each heading, a gold diamond before each
   name, a late count in a chamfered tag (the corner where reading starts is cut at 45 degrees), a late node
   that glows, and figures of a fixed width so a moving count does not shift its neighbours. */
body.v2-command.wall .w-strip .hd { background: repeating-linear-gradient(to left, transparent 0 15px,
  color-mix(in srgb, var(--gold) 28%, transparent) 15px 16px) bottom / 100% 6px no-repeat; }
body.v2-command.wall .w-strip .phase .nm::before { content: ""; display: inline-block; width: 6px; height: 6px;
  margin-inline-end: 8px; vertical-align: 3px; background: var(--gold); transform: rotate(45deg); }
body.v2-command.wall .w-strip .phase .ct b { font-variant-numeric: tabular-nums; }
body.v2-command.wall .w-strip .phase .ct em { padding: 2px 9px; background: color-mix(in srgb, var(--danger) 16%, transparent);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 0 100%); }
[dir="ltr"] body.v2-command.wall .w-strip .phase .ct em { clip-path: polygon(9px 0, 100% 0, 100% 100%, 0 100%, 0 9px); }
body.v2-command.wall .w-strip .phase.late .node { box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 18%, transparent),
  0 0 12px var(--danger); }
body.v2-command.wall .w-tile { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px;
  background: var(--surface); }
body.v2-command.wall .w-tile .k { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  white-space: nowrap; }
body.v2-command.wall .w-tile .k::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--gold);
  transform: rotate(45deg); }
body.v2-command.wall .w-tile .v { position: relative; font-size: 13px; color: var(--muted); }
body.v2-command.wall .w-tile .v .vt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.v2-command.wall .w-tile .row { display: flex; gap: 6px; margin-top: auto; }
body.v2-command.wall .w-tile .row .btn { flex: 1; min-height: 40px; font-size: 13px; }
body.v2-command.wall .w-tile .empty { margin: 0; font-size: 13px; color: var(--muted); }
body.v2-command.wall .w-bodies .bodies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px;
  font-size: 13px; }
body.v2-command.wall .w-bodies .bodies > span { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
body.v2-command.wall .w-bodies .bodies i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
body.v2-command.wall .w-bodies .bodies i.off { background: var(--danger); }

/* 6 · motion (the owner's approval, 27 October 2026): the room moves only for what has changed
   (v2-command.js). Its one standing light is the one across the greeting and the mark; the live dot,
   the map's frame and the blocks' reveal rest here as they do for a reader who asked for stillness.
   A count runs in tabular figures, held to its widest by unseen zeros, so nothing beside it moves;
   a case that goes on to the next phase sends a point of light along the rail and its new phase
   answers once; a case new at the approval gives the gate one gold pulse; a sector's lines draw
   from under a veil in the panel's own colour. Transforms and opacity only: no row moves. */
body.v2-command.wall .live-dot { animation: none; }
body.v2-command.wall #map .map-frame::before { background: color-mix(in srgb, var(--gold) 60%, transparent); animation: none; }
body.v2-command.wall #map .map-frame::after { animation: none; opacity: 0.7; }
body.v2-command.wall .reveal { opacity: 1; animation: none !important; }
body.v2-command.wall :is(.w-auto-i, .w-sec .net, .w-m) b { font-variant-numeric: tabular-nums; }
body.v2-command.wall .w-pad { visibility: hidden; }
body.v2-command.wall .w-wait { opacity: 0; }
body.v2-command.wall .w-strip { position: relative; }
body.v2-command.wall .w-strip .w-run, body.v2-command.wall .w-strip .w-ring { position: absolute; left: 0; top: 0; z-index: 2;
  pointer-events: none; opacity: 0; }
body.v2-command.wall .w-strip .w-run { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--gold);
  box-shadow: 0 0 10px var(--gold), 0 0 3px var(--gold); }
body.v2-command.wall .w-strip .w-ring { width: 14px; height: 14px; margin: -7px 0 0 -7px; border: 2px solid var(--gold); }
body.v2-command.wall .w-strip .w-gate { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--gold) 24%, transparent); }
body.v2-command.wall .w-spark .w-veil { fill: var(--surface); transform-box: fill-box; transform-origin: 100% 50%; }

@media (max-width: 899px) {
  /* The header in two rows: the search and the bell at the top start corner with
     the language pill at the far end, then the way back, the name and the clock. */
  .v2-command .theme-switch { display: none; }
  .v2-command header.bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px 12px 16px; }
  .v2-command .bar-acts { order: -1; }
  /* The pill carries the other language's direction, so its own inline-end is the
     side away from the icons in both readings: an auto margin there sends it to the
     row's far end. */
  .v2-command .bar-lang { margin-inline-end: auto; }
  /* The rail: a dot a module at the side, the one in view stretched and lit in gold;
     its name shows beside it on a touch. */
  .v2-command .zone { position: fixed; inset-inline-end: 1px; top: 50%; transform: translateY(-50%); z-index: 40;
    display: flex; flex-direction: column; gap: 2px; }
  /* Each dot answers a tap across a fingertip: the link is taller than the dot it draws,
     and reaches a little either side of it. */
  .v2-command .zone a { position: relative; width: 14px; height: 32px; display: flex; align-items: center;
    justify-content: center; text-decoration: none; }
  .v2-command .zone a::after { content: ""; position: absolute; inset: 0 -8px; }
  .v2-command .zone a::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--ink);
    opacity: 0.42; transition: height 0.3s, background 0.3s, opacity 0.3s, box-shadow 0.3s; }
  .v2-command .zone a[aria-current="true"]::before { height: 18px; background: var(--gold); opacity: 1;
    box-shadow: 0 0 10px color-mix(in srgb, var(--gold) 60%, transparent); }
  .v2-command .zone a span { position: absolute; inset-inline-end: 100%; top: 50%; transform: translateY(-50%);
    margin-inline-end: 4px; padding: 3px 9px; border-radius: 8px; background: var(--surface);
    border: 1px solid var(--line); color: var(--ink); font-size: 13px; white-space: nowrap; opacity: 0;
    pointer-events: none; transition: opacity 0.25s; }
  .v2-command .zone a:hover span, .v2-command .zone a:focus-visible span, .v2-command .zone a.touch span { opacity: 1; }
  /* The plate: the module's name, under the top edge, for a moment on entering it. */
  .v2-command .plate { position: fixed; top: 10px; left: 50%; transform: translate(-50%, -8px); z-index: 60;
    display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 92%, transparent); border: 1px solid var(--line);
    backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; color: var(--ink); opacity: 0;
    pointer-events: none; transition: opacity 0.3s, transform 0.3s; }
  .v2-command .plate.show { opacity: 1; transform: translate(-50%, 0); }
  .v2-command .plate i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
    box-shadow: 0 0 10px var(--gold); flex: none; }
}
/* The phone's room (the owner's package of 25 October 2026): the lifecycle strip under the
   figures, a phase opened as a sheet, the directives one a row, a decision's two halves
   equal, every touch target 44 px, and the desk's aircraft switch kept off the phone. The
   desk and the wall are untouched: nothing here reaches 900 px. */
@media (max-width: 899px) {
  /* The strip: a rail of nodes at the start, a row a phase, the rows equal; the worst-late
     phase's rail runs red, the approval sits on a gold tint, the closure's node is quiet. */
  .v2-command #life .life-v { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .v2-command #life .ph { border-top: 1px solid var(--line); }
  .v2-command #life .ph:first-child { border-top-color: transparent; }
  .v2-command #life .ph.gate { background: color-mix(in srgb, var(--gold) 8%, transparent); border-radius: 10px; }
  .v2-command #life .ph button { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr);
    column-gap: 10px; align-items: center; width: 100%; min-height: 64px; padding: 8px; border: 0; border-radius: 10px;
    background: none; color: var(--ink); text-align: start; font: inherit; cursor: pointer; }
  .v2-command #life .ph button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset); }
  .v2-command #life .rail { position: relative; align-self: stretch; }
  .v2-command #life .rail::before { content: ""; position: absolute; inset-block: -9px; inset-inline-start: 10px; width: 2px;
    background: color-mix(in srgb, var(--gold) 40%, var(--line)); }
  .v2-command #life .ph:first-child .rail::before { top: 50%; }
  .v2-command #life .ph:last-child .rail::before { bottom: 50%; }
  .v2-command #life .ph.choke .rail::before { background: var(--danger); }
  .v2-command #life .node { position: absolute; top: 50%; inset-inline-start: 5px; width: 12px; height: 12px; margin-top: -6px;
    transform: rotate(45deg); background: var(--surface); border: 2px solid var(--gold); z-index: 1; }
  .v2-command #life .ph.late .node { border-color: var(--danger); }
  .v2-command #life .ph.gate .node { background: var(--gold); }
  .v2-command #life .ph.end .node { background: var(--muted); border-color: var(--muted); }
  .v2-command #life .body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .v2-command #life .top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .v2-command #life .nm { font-size: 14px; color: var(--muted); white-space: nowrap; }
  .v2-command #life .ph.gate .nm { color: var(--gold); font-weight: 700; }
  .v2-command #life .ct { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
  .v2-command #life .ct b { font-size: 22px; line-height: 1; font-weight: 700; }
  .v2-command #life .ct em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--danger); }
  .v2-command #life .ct .qr { font-size: 12px; color: var(--muted); }
  .v2-command #life .lanes { display: flex; flex-wrap: wrap; gap: 4px 12px; min-height: 18px; font-size: 12.5px;
    color: var(--muted); }
  .v2-command #life .lanes .l { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
  .v2-command #life .lanes svg { width: 15px; height: 15px; flex: none; }
  .v2-command #life .l.gold { color: var(--gold); font-weight: 700; }
  .v2-command #life .l.red { color: var(--danger); font-weight: 700; }
  .v2-command #life .l.ink { color: var(--ink); font-weight: 700; }
  /* A phase opened: the stages as equal cells, the cases as equal rows, one term a cell. */
  .v2-command .life-sheet .sheet-form { max-height: 82dvh; }
  .v2-command .pd-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
  .v2-command .pd-h .pd-n { font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }
  .v2-command .pd-sts { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .v2-command .pd-sts .st { display: flex; flex-direction: column; justify-content: space-between; gap: 2px; min-width: 0;
    padding: 6px 10px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .v2-command .pd-sts .nm { font-size: 12.5px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere; }
  .v2-command .pd-sts .ct { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
  .v2-command .pd-sts .ct b { font-size: 18px; line-height: 1.1; }
  .v2-command .pd-sts .ct em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--danger); }
  .v2-command .pd-rows { list-style: none; margin: 0; padding: 0; }
  .v2-command .pd-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "u a" "w t";
    gap: 4px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
  .v2-command .pd-rows li:last-child { border-bottom-color: transparent; }
  /* The number is the way into the case: a fingertip tall, without widening its row. */
  .v2-command .pd-rows .uid { grid-area: u; display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px;
    justify-self: start; direction: ltr; font-weight: 700; white-space: nowrap; color: var(--link); text-decoration: none; }
  /* The place and the stage keep two lines, so every row stands the same height whether the place wraps or not. */
  .v2-command .pd-rows .wh { grid-area: w; min-width: 0; min-height: 2.5em; line-height: 1.25; overflow-wrap: anywhere; color: var(--ink); }
  .v2-command .pd-rows .wh .stg { color: var(--muted); font-size: 12px; }
  .v2-command .pd-rows .tg { grid-area: t; justify-self: end; font-size: 12px; font-weight: 700; padding: 0 8px; line-height: 20px;
    border-radius: 999px; border: 1px solid; white-space: nowrap; }
  .v2-command .pd-rows .tg.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
  .v2-command .pd-rows .tg.red { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
  .v2-command .pd-rows .tg.ink { color: var(--muted); border-color: var(--line); font-weight: 400; }
  .v2-command .pd-rows .ag { grid-area: a; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
    white-space: nowrap; }
  .v2-command .pd-rows .ag.red { color: var(--danger); font-weight: 700; }
  .v2-command .pd-rows .ag.gold { color: var(--gold); font-weight: 700; }
  /* The age bar: the time in the stage over its allowance, the mark at the warning point. */
  .v2-command .agebar { position: relative; width: 48px; height: 6px; background: var(--line); flex: none; }
  .v2-command .agebar i { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--muted); }
  .v2-command .agebar i.gold { background: var(--gold); }
  .v2-command .agebar i.red { background: var(--danger); }
  .v2-command .agebar u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); opacity: 0.5;
    text-decoration: none; }
  .v2-command .pd-more { margin: 0; font-size: 13px; color: var(--muted); }
  /* The directives one a row, the icon then the name on one line. */
  .v2-command .orders-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .v2-command .orders-grid button { flex-direction: row; align-items: center; min-height: 52px; padding: 0 14px; }
  .v2-command .orders-grid b { white-space: nowrap; }
  /* A decision: read and approve as two equal halves, the return under them, each 44 px. */
  .v2-command .acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .v2-command .acts .btn { min-height: 44px; width: 100%; justify-content: center; }
  .v2-command .acts .ret { grid-column: 1 / -1; }
  .v2-command .ret-form .btn { min-height: 44px; }
  /* Every link a fingertip tall, with the look it has. */
  .v2-command .decision .row { min-height: 44px; align-items: center; }
  .v2-command .decision .row a.code { display: inline-flex; align-items: center; min-height: 44px; }
  /* The report and its place keep two lines, so every decision stands the same height. */
  .v2-command .decision .text { min-height: 3.5em; }
  .v2-command .sec-head a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
  /* The desk's aircraft switch and its lines stay off the phone: no map under them here. */
  .v2-command .air-toggle.desk-only, .v2-command .air-status.desk-only, .v2-command .air-alerts.desk-only { display: none; }
  /* One way to the full map on the phone: the card's button, not a second link in the head
     (the owner's choice, 26 October 2026). */
  .v2-command #map .map-head-link { display: none; }
  /* The sector's name fits its card in both readings. */
  .v2-command .map-preview-sectors em { font-size: 12.5px; }
}
@media (min-width: 900px) {
  .v2-command { --kpi-gap: 12px; --kpi-pad-y: 10px; --kpi-pad-x: 12px; --kpi-value: 28px; --kpi-note: 13px;
    --kpi-note-lines: 2; }
  .v2-command .desk-only { display: inline-flex; }
  .v2-command .map-card { display: block; }
  .v2-command .phone-only { display: none !important; }
  .v2-command .figures { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .v2-command .fig:last-child { grid-column: auto; }
  .v2-command .hero { padding: 24px 28px; }
  .v2-command .hero h1 { font-size: 30px; }
  .v2-command .hero.open .open-decision { font-size: 24px; }
  /* The measures are cards too, five a row like the figures: the same parts, the same heights. */
  .v2-command #performance { padding: 0; border: 0; background: none; }
  .v2-command .measures { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--kpi-gap); }
  .v2-command .fig-meta { flex-wrap: nowrap; }
  .v2-command .measure { display: flex; flex-direction: column; align-items: stretch; gap: var(--kpi-line); min-width: 0; text-align: start;
    padding: var(--kpi-pad-y) var(--kpi-pad-x); border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); }
  .v2-command .measure .k-label { font-size: var(--kpi-label); font-weight: 600; color: var(--ink); line-height: 1.35; min-height: 2.7em; }
  .v2-command .measure b { font-size: var(--kpi-value); line-height: 1.1; }
  .v2-command .measure .trend { display: flex; align-items: center; min-height: 28px; font-size: 13px; line-height: 1.35; }
  .v2-command .measure .k-note { font-size: var(--kpi-note); line-height: 1.4; min-height: calc(var(--kpi-note-lines) * 1.4em);
    color: var(--ink); opacity: 0.82; }
  .v2-command .orders-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .v2-command dialog.sheet { width: min(560px, calc(100vw - 32px)); margin: auto; }
  .v2-command .sheet-form { border-radius: 20px; padding: 20px 20px 24px; }
  .v2-command .sheet-form::before { display: none; }
}
@media (min-width: 1100px) {
  /* The module grid: every module has its cell, the cells of a row share a height,
     and nothing is left alone beside a gap. */
  /* The live map takes the full width under the figures; the performance takes the full
     width under the orders, so its five tiles sit in the figures' five columns. */
  .v2-command main { grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch;
    grid-template-areas:
      "flash"
      "hero"
      "figs"
      "map"
      "orders"
      "vitals"; }
  .v2-command .area-flash { grid-area: flash; }
  .v2-command main:not(:has(.area-flash)) { grid-template-areas:
      "hero"
      "figs"
      "map"
      "orders"
      "vitals"; }
  .v2-command .area-hero { grid-area: hero; }
  .v2-command .area-figs { grid-area: figs; }
  .v2-command .area-vitals { grid-area: vitals; }
  .v2-command .area-orders { grid-area: orders; }
  .v2-command .area-map { grid-area: map; }
  .v2-command .area-decisions { grid-area: decisions; }
  .v2-command .area-timeline { grid-area: map; }
  .v2-command .area-report { grid-area: report; }
  /* The decisions keep to the map's height and scroll inside their module. */
  .v2-command .area-decisions .sec-body { overflow: auto; max-height: 640px; padding-inline-end: 4px; }
  .v2-command .area-report .sec:last-child { flex: 1; }
  /* The desk keeps the figures, orders, performance, pulse, map and the last 24 hours; the
     decisions and the report stay out of its grid. The wall keeps its own layout. */
  .v2-command:not(.wall) .area-decisions, .v2-command:not(.wall) .area-report { display: none; }
  /* The desk's cards agree: one gutter between every card and one header height. */
  .v2-command .sec-head { align-items: center; min-height: 44px; }
  .v2-command .figures, .v2-command .measures, .v2-command .orders-grid { gap: 12px; }
  .v2-command .fig-meta, .v2-command .measure .trend { min-height: 22px; }
  /* One tile for every figure on the desk: the same height, frame, label and note, so the
     five figures, the five measures, the four orders and the four sectors read as one set. */
  .v2-command { --kpi-value: 26px; --kpi-pad-y: 9px; --kpi-pad-x: 12px; --kpi-note-lines: 1; --tile-h: 128px; }
  .v2-command .fig, .v2-command .measure, .v2-command .orders-grid button { min-height: var(--tile-h); }
  .v2-command .fig .k-label, .v2-command .measure .k-label { min-height: 0; font-weight: 400; color: var(--muted); }
  /* The figures and the measures stand on the page without frames; the sectors' seals sit
     in the shared frame with the performance. */
  .v2-command .fig, .v2-command .measure { border: 0; background: none; }
  .v2-command .measure .k-note { color: var(--muted); opacity: 1; min-height: 0; }
  /* The performance and the sectors' pulse share one frame, one below the other. */
  .v2-command .area-vitals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px;
    border: 1px solid var(--line); border-radius: 18px; background: var(--surface); min-width: 0; }
  .v2-command .area-vitals > .sec { padding: 0; border: 0; background: none; border-radius: 0; }
  /* The four sectors side by side, each line a little taller. */
  .v2-command .area-vitals .pulse { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .v2-command .area-vitals .pulse-chart { height: 72px; }
  .v2-command .area-vitals .pulse-now b { font-size: var(--kpi-value); }
  /* The live map is the room's centre: full width, its four corners framed in gold, with
     the sectors' pulse floating over its top corner and the last 24 hours over its bottom
     corner, as two quiet panels. */
  .v2-command .area-map { min-height: 560px; background-repeat: no-repeat;
    background-image: linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
      linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
      linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold)),
      linear-gradient(var(--gold), var(--gold)), linear-gradient(var(--gold), var(--gold));
    background-size: 20px 1px, 1px 20px, 20px 1px, 1px 20px, 20px 1px, 1px 20px, 20px 1px, 1px 20px;
    background-position: left 8px top 8px, left 8px top 8px, right 8px top 8px, right 8px top 8px,
      left 8px bottom 8px, left 8px bottom 8px, right 8px bottom 8px, right 8px bottom 8px; }
  .v2-command #map .dash-map { min-height: 520px; }
  .v2-command .area-timeline { z-index: 2; width: min(360px, 32%); align-self: end; justify-self: start;
    margin: 0 20px 76px; background: var(--hero); color: var(--onband); border-color: transparent; }
  .v2-command .area-timeline .sec-head { border-bottom-color: rgba(255, 255, 255, 0.18); }
  .v2-command .area-timeline .sec-head h2 { color: var(--onband); }
  .v2-command .area-timeline .empty { color: var(--onband2); }
  /* Each entry on the band reads in the band's own words, in the light reading as in the
     dark: the page's ink, its amber and its green dot would vanish into the green. */
  .v2-command .area-timeline :is(.vtl-head .when, .vtl-meta) { color: var(--onband2); }
  .v2-command .area-timeline .vtl-head .code { color: var(--heroink); }
  .v2-command .area-timeline .vtl li:not(.gold, .new)::before { background: var(--onband); }
  .v2-command .area-timeline .vtl li::after { background: color-mix(in srgb, var(--onband) 18%, transparent); }
  /* An aircraft's alarm and the live air's state read clear of the last 24 hours laid
     over the map's side. */
  .v2-command #map .air-alerts { margin-inline-start: calc(min(360px, 32%) + 24px); }
  .v2-command #map .air-status { margin-inline-start: calc(min(360px, 32%) + 24px); }
}
/* The alarm's words keep their contrast on the room's red, light or dark. */
.v2-command .air-alert { color: var(--bg); font-weight: 600; }
.v2-command .air-alert::before { background: var(--bg); color: var(--danger); }
/* The old map's tokens, spoken in the room's own: its markers, clusters and
   popups keep their shape on the new ground. */
.v2-command { --color-primary: var(--accent); --color-on-primary: var(--onband); --color-card: var(--surface);
  --color-danger: var(--danger); --color-warning: var(--gold); --color-success: var(--ok);
  --color-text: var(--ink); --color-text-muted: var(--muted); --color-border: var(--line);
  --color-border-input: var(--line); --color-swirl: var(--tile);
  --tint-row: var(--tile); --tint-primary: color-mix(in srgb, var(--accent) 14%, transparent);
  --tint-accent: color-mix(in srgb, var(--gold) 14%, transparent);
  --tint-danger: color-mix(in srgb, var(--danger) 14%, transparent); --state-hover-tint: var(--tile);
  --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px;
  --space-24: 24px; --space-32: 32px; --radius-sm: 8px; --radius-md: 12px; --radius-full: 999px;
  --text-xs: 13px; --text-sm: 13px; --text-label: 13px; --text-lg: 17px; --weight-semibold: 600;
  --weight-bold: 700; --leading-relaxed: 1.7; --tap-min: 44px; --border-w: 1px; --border-w-accent: 2px;
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.35); --shadow-marker: 0 2px 8px rgba(0, 0, 0, 0.35);
  --focus-ring-width: 2px; --focus-ring-offset: 2px; --focus-ring-color: var(--gold); }
/* The phone's header keeps the clock; the date is the desk's. */
.v2-command .bar-date { display: none; }
@media (min-width: 900px) {
  .v2-command .bar-date { display: inline; }
  /* The map fills its card beside the decisions, however tall they run. */
  .v2-command #map .map-card { flex: 1; display: flex; flex-direction: column; }
  .v2-command #map .map-frame { flex: 1; display: flex; flex-direction: column; min-height: 440px; }
  .v2-command #map .dash-map { flex: 1; height: auto; min-height: 440px; }
}
/* The live map's frame: one thin gold sweep round its edge over a soft gold
   glow. Gold is a token, so the glow follows the theme; with reduced motion the
   edge stays gold and the glow stays still. */
@property --map-sweep {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes map-sweep { to { --map-sweep: 360deg; } }
@keyframes map-glow { from { opacity: 0.4; } to { opacity: 1; } }
/* Its own stacking context, so the glow (behind the frame) is not hidden by the card. */
.v2-command #map .map-frame { isolation: isolate; }
.v2-command #map .map-frame::before,
.v2-command #map .map-frame::after { content: ""; position: absolute; pointer-events: none; }
.v2-command #map .map-frame::before {
  inset: 0;
  z-index: 1;
  padding: 1.5px;
  border-radius: 14px;
  background: conic-gradient(from var(--map-sweep), transparent 0 80%, var(--gold) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: map-sweep 9s linear infinite;
}
.v2-command #map .map-frame::after {
  inset: -6px;
  z-index: -1;
  border-radius: 20px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 30%, transparent);
  animation: map-glow 5s ease-in-out infinite alternate;
}
.v2-command #map .map-frame:fullscreen::before, .v2-command #map .map-frame:fullscreen::after,
.v2-command #map .map-frame.maplibregl-pseudo-fullscreen::before,
.v2-command #map .map-frame.maplibregl-pseudo-fullscreen::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  .v2-command #map .map-frame::before { background: color-mix(in srgb, var(--gold) 60%, transparent); animation: none; }
  .v2-command #map .map-frame::after { animation: none; opacity: 0.7; }
}
/* The map's pins and clusters (intake.css on the old pages), in the room's tokens. */
.v2-command .map-pin { display: flex; width: 32px; height: 32px; border-radius: 50%; background: var(--surface);
  border: 2px solid var(--accent); align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  box-sizing: border-box; cursor: pointer; padding: 0; }
.v2-command .map-pin img { width: 16px; height: 16px; filter: var(--pin-cut); }
.v2-command .map-pin--closed { border-color: var(--muted); opacity: 0.85; }
.v2-command .map-cluster { display: flex; width: 44px; height: 44px; border-radius: 50%; align-items: center;
  justify-content: center; background: var(--accent); color: var(--onaccent); font: inherit; font-weight: 700;
  font-size: 14px; border: 2px solid var(--onband); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); box-sizing: border-box;
  cursor: pointer; padding: 0; }
.v2-command .map-popup { font-family: "TheSans", "IBM Plex Sans Arabic", Tahoma, sans-serif; font-size: 13px; color: #1f2a28; line-height: 1.6; }
.v2-command .map-popup a { color: #004E43; font-weight: 700; text-decoration: none; }
/* The foot of the page, the desk's alone (the phone ends with its tabs bar): a band
   across the page's whole width under a hairline, as on the old pages, the centre's
   logo in the corner and the owner's line beside it. */
.v2-command .foot { display: none; align-items: center; gap: 18px; justify-content: flex-start;
  direction: ltr; padding: 16px 24px 18px; border-top: 1px solid var(--line); font-size: 13px;
  color: var(--muted); background: var(--bg); }
.v2-command .foot-logo { height: 40px; width: auto; opacity: 0.95; }
.v2-command .foot .logo-light { display: var(--logo-light); }
.v2-command .foot .logo-dark { display: var(--logo-dark); }
.v2-command .foot-line { font-weight: 500; letter-spacing: 0.02em; }
@media (min-width: 900px) {
  .v2-command .content { padding-bottom: 32px; }
  .v2-command .foot { display: flex; }
}

/* The foot of every other page: the centre's logo (its colour cut on the light theme,
   its white cut on the dark) and «الطريق إلى نظام NTSC» / «The Road to NTSC System»
   beside it, in the page's own direction. On the desk a band across the whole page
   under it, as the room's foot; on the phone the page's last line, above the tabs
   bar; on a sign-in sheet, the sheet's last line on every screen. */
.v2 .road-foot { align-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.v2 .road-foot .logo-light { display: var(--logo-light); }
.v2 .road-foot .logo-dark { display: var(--logo-dark); }
.v2 .road-logo { height: 34px; width: auto; opacity: 0.95; flex: none; }
.v2 .road-line { font-weight: 500; letter-spacing: 0.01em; }
.v2 .road-foot--page { display: none; padding: 16px 24px 18px; border-top: 1px solid var(--line);
  background: var(--bg); }
.v2 .road-foot--main { display: flex; justify-content: center; padding: 10px 0 2px; }
.v2 .road-foot--main .road-logo { height: 26px; }
.v2 .road-foot--sheet { display: flex; justify-content: center; margin-top: auto; padding-top: 18px; }
.v2 .road-foot--sheet .road-logo { height: 28px; }
/* On a working page the logo and the motto are one link home: a fingertip tall
   without moving the line itself (the padding is given back as a margin), quiet
   until pressed, and lit under a pointer only where there is one. */
.v2 .road-home { display: inline-flex; align-items: center; gap: 14px; padding: 9px 10px; margin: -9px -10px;
  border-radius: 12px; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, opacity 0.18s ease; }
.v2 .road-home:active { opacity: 0.72; }
@media (hover: hover) {
  .v2 .road-home:hover { background: var(--surface2); }
}
@media (min-width: 900px) {
  .v2 .road-foot--page { display: flex; }
  .v2 .road-foot--main { display: none; }
}

/* --- motion: the identity's light on the working pages ----------------------- */
/* A beam of gold travelling a card's edge, the sheen passing over a button, the
   shimmer in the room's title, the pulse of the live dot, the progress line under
   the top edge, and each module revealing itself as it comes into view. Still for
   whoever asked their device for less motion; paused out of view; the figures and
   their neighbours never share a phase. */
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes orbit { to { --angle: 360deg; } }
@keyframes glint { 0%, 65% { background-position: 0 0; } 100% { background-position: 100% 0; } }
/* The command room reads in the same face as every page now: TheSans (fonts.css), Arabic
   and Latin, its Latin figures (0-9) for every number. The aircraft card, which names its
   own face elsewhere, follows the page here. */
body.v2.ceo-viewer { --page-font: "TheSans", "IBM Plex Sans Arabic", Tahoma, sans-serif;
  font-family: var(--page-font); }
body.v2.ceo-viewer .map-popup { font-family: inherit; }
/* The aircraft alarm on the CEO's pages, in the colour the owner chose: a soft rose card
   with deep red words and a red edge at its start, calm to read and still plainly an
   alarm. The bell's count sits on the bell's corner, ringed off it, not over it. */
body.v2.ceo-viewer {
  --alarm-bg: #F8E6E3; --alarm-ink: #8A2219; --alarm-edge: #B23A2E; --alarm-mark-ink: #FFFFFF; }
:root[data-theme="dark"] body.v2.ceo-viewer, :root.v2-dark-default:not([data-theme="light"]) body.v2.ceo-viewer {
  --alarm-bg: #3B2826; --alarm-ink: #F4B4AC; --alarm-edge: #E07A70; --alarm-mark-ink: #3B2826; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.v2.ceo-viewer {
    --alarm-bg: #3B2826; --alarm-ink: #F4B4AC; --alarm-edge: #E07A70; --alarm-mark-ink: #3B2826; }
}
body.v2.ceo-viewer .air-alert { background: var(--alarm-bg); color: var(--alarm-ink); font-weight: 600;
  border-inline-start: 4px solid var(--alarm-edge); }
body.v2.ceo-viewer .air-alert::before { background: var(--alarm-edge); color: var(--alarm-mark-ink); }
body.v2.ceo-viewer .iconbtn .bubble { top: -3px; inset-inline-end: -5px; box-shadow: 0 0 0 2px var(--bg); }
/* The CEO's pages carry only what he decides on: a page's name once, in its bold title
   (the bar keeps its way back), with no line of explanation under it; and the profile is
   the name card at the foot of the rail, not a second entry above it. */
body.v2.ceo-viewer:not(.v2-command):has(main h1) header.bar .bar-title { display: none; }
body.v2.ceo-viewer .acc-head > .hint { display: none; }
body.v2.ceo-viewer .acc-head > .page-title { font-size: 26px; font-weight: 700; }
body.v2.ceo-viewer .side nav a[href="/ui/v2/profile"],
body.v2.ceo-viewer .top-nav a[href="/ui/v2/profile"] { display: none; }
/* Nor are the notifications an entry of their own: the bell at the top is the way in, and its
   press opens them in a panel under it (js/v2-bell.js). The phone's bar closes up. */
body.v2.ceo-viewer .side nav a[href="/ui/v2/notifications"],
body.v2.ceo-viewer .top-nav a[href="/ui/v2/notifications"],
body.v2.ceo-viewer nav.tabsbar a[href="/ui/v2/notifications"] { display: none; }
body.v2.ceo-viewer nav.tabsbar { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* The bell's panel: the newest notifications as quiet cards, a dot for the unread, the time
   in a lighter voice, and the way to the full list at its foot. */
.bell-panel { position: fixed; z-index: 80; display: flex; flex-direction: column; max-height: min(70vh, 560px);
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34); color: var(--ink); overflow: hidden; }
.bell-panel[hidden] { display: none; }
.bell-head { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; font-size: 16px; }
.bell-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--gold); color: var(--bg);
  font-size: 12px; font-weight: 700; text-align: center; }
.bell-list { list-style: none; margin: 0; padding: 0 10px; display: flex; flex-direction: column; gap: 6px;
  overflow-y: auto; overscroll-behavior: contain; }
.bell-panel .bell-card { display: grid; grid-template-columns: 8px minmax(0, 1fr); grid-template-areas: "dot text" ". when";
  column-gap: 10px; row-gap: 2px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); color: inherit; text-decoration: none; }
.bell-panel a.bell-card:hover, .bell-panel a.bell-card:focus-visible { border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--ink) 4%, transparent); }
.bell-dot { grid-area: dot; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; }
.bell-card.is-unread .bell-dot { background: var(--gold); }
.bell-text { grid-area: text; font-size: 14px; font-weight: 600; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bell-card:not(.is-unread) .bell-text { color: var(--muted); font-weight: 500; }
.bell-when { grid-area: when; font-size: 12px; color: var(--muted); }
.bell-when .code { font-size: 12px; }
.bell-empty { margin: 0; padding: 6px 16px 14px; color: var(--muted); font-size: 14px; }
.bell-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px 14px;
  font-size: 13px; }
.bell-foot a { color: var(--link); font-weight: 600; text-decoration: none; }
.bell-read { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; }
.bell-read:hover { color: var(--ink); }
/* The profile inside the CEO's name card (js/v2-me.js): the bell panel's glass, opened from
   «سعادة الرئيس التنفيذي» at the foot of the rail (above the card) or at the end of the room's
   top bar (under the box). The name and the role head it; the facts read as the profile page
   reads them, the label at the start and the value at the end; the contact details stay folded
   until asked for; the password and the second factor are one row away; signing out closes it. */
.me-panel { position: fixed; z-index: 80; display: flex; flex-direction: column; padding: 14px 16px 16px;
  overflow-y: auto; overscroll-behavior: contain;
  border-radius: 16px; border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34); color: var(--ink); }
.me-panel[hidden] { display: none; }
.me-panel:focus { outline: none; }
.me-panel-head { display: flex; align-items: center; gap: 12px; padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); }
.me-panel .avatar, .v2-command .top-user .me-box .avatar { flex: none; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; background: var(--surface2); color: var(--ink); }
.me-panel .avatar { width: 42px; height: 42px; }
.me-panel-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.5; }
.me-panel-who b { font-size: 16px; overflow-wrap: anywhere; }
.me-panel-who span { font-size: 13px; font-weight: 600; color: var(--gold); }
.me-panel-saved { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--ok); }
.me-panel-facts { margin: 0; display: flex; flex-direction: column; }
.me-panel-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.me-panel-fact dt { flex: none; font-size: 13px; color: var(--muted); }
.me-panel-fact dd { margin: 0; min-width: 0; font-size: 14px; font-weight: 600; text-align: end; overflow-wrap: anywhere; }
.me-panel-fact dd.code { font-size: 14px; }
.me-panel .me-panel-edit > summary, .me-panel a.me-panel-link { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0;
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; list-style: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.me-panel .me-panel-edit > summary::-webkit-details-marker { display: none; }
.me-panel .me-panel-edit > summary > span, .me-panel a.me-panel-link > span { flex: 1; }
.me-panel .me-panel-edit > summary::after { content: ""; width: 7px; height: 7px; margin-inline-end: 4px; border: solid currentColor;
  border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); opacity: 0.6; transition: transform 0.2s ease; }
.me-panel .me-panel-edit[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.me-panel .me-panel-edit > summary:hover, .me-panel a.me-panel-link:hover,
.me-panel .me-panel-edit > summary:focus-visible, .me-panel a.me-panel-link:focus-visible { color: var(--link); }
.me-panel-edit form { display: flex; flex-direction: column; gap: 6px; padding: 10px 0 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.me-panel-edit .field-label { font-size: 13px; }
.me-panel-edit .field { min-height: 44px; border-radius: 12px; font-size: 15px; }
.me-panel-edit .btn { align-self: flex-start; margin-top: 6px; }
.me-panel-edit .error { margin: 0; font-size: 13px; color: var(--danger); }
.me-panel a.me-panel-link > .me-panel-go { flex: none; display: inline-flex; }
[dir="ltr"] .me-panel .me-panel-go svg { transform: scaleX(-1); }
.me-panel-push { display: flex; flex-direction: column; gap: 4px; padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); }
.me-panel-push-row { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; font-weight: 600; }
.me-panel-push-row > span { flex: 1; }
.me-panel-push-btn { flex: none; min-height: 34px; padding: 0 14px; border-radius: 999px; font: inherit; font-size: 13px;
  font-weight: 600; color: var(--ink); background: none; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  cursor: pointer; }
.me-panel-push-btn:hover, .me-panel-push-btn:focus-visible { border-color: var(--gold); color: var(--gold); }
.me-panel-push .state-text { margin: 0 0 6px; font-size: 13px; }
.me-panel-foot { padding-top: 14px; }
.me-panel-out { width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.me-panel-out:hover, .me-panel-out:focus-visible { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
/* In the room's top-bar box the name says it opens: a small chevron after it, once its script is
   there to open it (aria-haspopup is the script's own), turning when the panel is open. The
   rail's card keeps its title on one line with no mark: the card itself is the way in. */
body.v2.ceo-viewer .top-user a.me-role[aria-haspopup] { display: inline-flex; align-items: center; }
body.v2.ceo-viewer .top-user a.me-role[aria-haspopup]::after { content: ""; flex: none; width: 6px; height: 6px;
  margin-inline-start: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; opacity: 0.6;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s ease; }
body.v2.ceo-viewer .top-user a.me-role[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
/* The room's CEO box at the end of its top bar: the rail's card in small, his title above and
   signing out in gold beneath. */
.v2-command .top-user .me-box { display: inline-flex; align-items: center; gap: 10px; padding-block: 5px;
  padding-inline: 6px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.v2-command .top-user .me-box .avatar { width: 30px; height: 30px; }
.v2-command .top-user .me-box-text { display: flex; flex-direction: column; line-height: 1.4; }
body.v2.ceo-viewer .top-user .me-box a.me-role { color: var(--ink); font-size: 13px; font-weight: 600; }
body.v2.ceo-viewer .top-user .me-box a.me-out { color: var(--link); font-size: 12px; text-decoration: none; }
body.v2.ceo-viewer .top-user .me-box a.me-out:hover { text-decoration: underline; }
body.v2.ceo-viewer .side a.me-role, body.v2.ceo-viewer .top-user a.me-role { color: inherit; text-decoration: none; }
body.v2.ceo-viewer .side a.me-role:hover, body.v2.ceo-viewer .side a.me-role:focus-visible,
body.v2.ceo-viewer .side a.me-role[aria-current="page"],
body.v2.ceo-viewer .top-user a.me-role:hover, body.v2.ceo-viewer .top-user a.me-role:focus-visible { color: var(--link); }
/* The command room's pages only (body.ceo-viewer, js/v2-motion.js): a very faint light
   sliding over each sector's icon, in the icon's own shape (its file as the mask), once
   every seven seconds, each icon a beat after the one before (--d). */
@keyframes icon-glint { 0%, 70% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.v2 .icon-glint { position: relative; display: inline-block; flex: none; line-height: 0; vertical-align: middle; }
.v2 .icon-glint::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
  background: linear-gradient(105deg, transparent 38%, color-mix(in srgb, var(--gold) 55%, #fff) 50%, transparent 62%)
    0 0 / 250% 100% no-repeat;
  opacity: 0.55; animation: icon-glint 7s ease-in-out var(--d, 0s) infinite; }
@media (prefers-reduced-motion: reduce) { .v2 .icon-glint::after { animation: none; opacity: 0; } }
@keyframes halo { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); }
  100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes ping { from { transform: translate(-50%, -50%) scale(0.25); opacity: 0.95; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.v2 .beam { position: relative; }
.v2 .beam::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px;
  pointer-events: none;
  background: conic-gradient(from var(--angle), transparent 0 74%, color-mix(in srgb, var(--gold) 85%, #FFFFFF) 88%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: orbit 5s linear var(--beam-delay, 0s) infinite; }
.v2 .beam.out::before { animation-play-state: paused; }
.no-beam .v2 .beam::before { display: none; }
/* The sheen: the primary buttons and the home's call, every 3.6 seconds. */
.v2 .btn:not(.btn-secondary):not(.btn-danger), .v2 .hero .cta { position: relative; overflow: hidden; }
.v2 .btn:not(.btn-secondary):not(.btn-danger)::after, .v2 .hero .cta::after { content: ""; position: absolute;
  inset: -25% auto -25% 0; width: 45%; pointer-events: none; transform: skewX(-14deg) translateX(-140%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32) 50%, transparent);
  animation: sheen 3.6s ease-in-out infinite; }
/* The room's title: one ink and one weight from the greeting to the name. */
.v2-command .hero h1 { align-self: flex-start; width: fit-content; max-width: 100%; font-size: min(24px, 5.6vw); line-height: 1.35;
  text-wrap: balance; color: var(--onband); }
/* The figures and the measures are carved in one ink, the same for every card; the counter
   of the hero keeps its gold. */
.v2-command .fig b, .v2-command .measure b, .v2-command .hero .counter b {
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  background-image: linear-gradient(180deg, var(--num-a) 0%, var(--num-b) 55%, var(--num-c) 100%); }
.v2-command .hero .counter b {
  background-image: linear-gradient(180deg, #F6DD93 0%, #E2B75A 58%, #CFA23F 100%); }
/* The progress line: how far through the page, under the top edge. */
.v2 .scroll-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 95; height: 2px; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--scroll, 0));
  background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 55%, #FFFFFF)); }
[dir="rtl"] .v2 .scroll-progress { transform-origin: 100% 50%; }
/* The reveal: from the bottom up, with a breath of scale, each block in its turn.
   Waiting blocks are only transparent (a clipped block would not count as in view);
   the clip belongs to the animation alone and ends with it. */
.v2 .reveal { opacity: 0; }
.v2 .reveal.in { animation: reveal 0.62s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--ci, 0) * 60ms) both; }
@keyframes reveal { from { clip-path: inset(100% 0 0 0); transform: scale(0.985); opacity: 0; }
  to { clip-path: inset(0 0 0 0); transform: none; opacity: 1; } }
/* The sliding light: through the letters of the crest in the sidebar, every six
   seconds, and over the person's card under it, on a phase of its own. The crest's
   light is masked by the crest itself, so only its letters catch it. */
@keyframes crestlight { 0%, 78% { background-position: 0 0; } 100% { background-position: 100% 0; } }
.v2 .side .brand { position: relative; }
.v2 .side .logo-glint { position: absolute; pointer-events: none;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
  background: linear-gradient(100deg, transparent 36%, color-mix(in srgb, var(--gold) 55%, #FFFFFF) 50%, transparent 64%)
    0 0 / 300% 100% no-repeat;
  animation: crestlight 6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.v2 .side .logo-glint[hidden] { display: none; }
.v2 .side .me-card { position: relative; overflow: hidden; }
.v2 .side .me-card::after { content: ""; position: absolute; inset: -30% auto -30% 0; width: 40%; pointer-events: none;
  transform: skewX(-16deg) translateX(-160%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35) 42%,
    color-mix(in srgb, var(--gold) 42%, transparent) 50%, rgba(255, 255, 255, 0.35) 58%, transparent);
  animation: sheen 5s ease-in-out -2.2s infinite; }
/* The greeting in the home's header: the light crosses the avatar's disc first,
   then runs through the letters of the greeting, every five seconds. */
.v2-home .avatar { position: relative; overflow: hidden; }
.v2-home .avatar::after { content: ""; position: absolute; inset: -30% auto -30% 0; width: 45%; pointer-events: none;
  transform: skewX(-16deg) translateX(-160%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45) 50%, transparent);
  animation: sheen 5s ease-in-out infinite reverse; }
.v2-home .greet-name { width: fit-content; max-width: 100%;
  background-image: linear-gradient(100deg, currentColor 0 40%, color-mix(in srgb, var(--gold) 65%, #FFFFFF) 50%,
    currentColor 60% 100%);
  background-size: 300% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: glint 5s linear infinite; }
/* The room's sheen, in the showcase's corrected structure: a band slanted 14°, 58%
   wide, reaching 25% above and below, five stops from clear to clear, blurred 14px,
   no corner. The room's buttons and the person's card carry it; the directive cards take
   the light every card takes, as their bubble opens (v2/_tip.html). */
@keyframes sheen2 { 0%, 55% { transform: skewX(-14deg) translateX(-170%); } 100% { transform: skewX(-14deg) translateX(300%); } }
.v2-command .btn:not(.btn-secondary):not(.btn-danger)::after, .v2-command .side .me-card::after { inset: -25% auto -25% 0; width: 58%; border-radius: 0; filter: blur(14px);
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.30) 50%,
    rgba(255, 255, 255, 0.05) 75%, transparent 100%);
  transform: skewX(-14deg) translateX(-170%); animation: sheen2 3.6s ease-in-out infinite; }
.v2-command .side .me-card::after { animation-delay: -2.2s; }
@keyframes logo-light { 0%, 55% { background-position: 100% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) { .v2-command .top-brand::after { animation: none; opacity: 0; } }
/* The directive icons sway under the hand. */
@keyframes sway { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.v2-command .orders-grid button:hover b svg, .v2-command .orders-grid button:focus-visible b svg,
.v2-command .orders-grid button:active b svg { animation: sway 1.5s ease-in-out infinite; }
/* The small tracker under an overdue case: three legs, the line filled to the one in hand. */
.v2-command .trk { position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 86px; height: 10px; margin-top: 4px; }
.v2-command .trk::before { content: ""; position: absolute; inset-inline: 4px; top: 4px; height: 2px; background: var(--line); }
.v2-command .trk::after { content: ""; position: absolute; inset-inline-start: 4px; top: 4px; height: 2px;
  width: calc((100% - 8px) * var(--k, 0) / 2); background: var(--gold); }
.v2-command .trk i { position: relative; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.v2-command .trk i:nth-child(1) { background: var(--gold); }
.v2-command .trk[style*="--k: 1"] i:nth-child(2), .v2-command .trk[style*="--k: 2"] i:nth-child(2),
.v2-command .trk[style*="--k: 2"] i:nth-child(3) { background: var(--gold); }
.v2-command .trk[style*="--k: 0"] i:nth-child(1), .v2-command .trk[style*="--k: 1"] i:nth-child(2),
.v2-command .trk[style*="--k: 2"] i:nth-child(3) { animation: halo 1.4s ease-out infinite; }
/* A touch on the room's map answers with a ring of gold, half a second long. */
.v2-command .ping { position: absolute; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold);
  box-shadow: 0 0 18px color-mix(in srgb, var(--gold) 50%, transparent); pointer-events: none; z-index: 5;
  animation: ping 0.5s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  .v2 .beam::before, .v2 .scroll-progress, .v2-command .live-dot, .v2-command .hero h1,
  .v2 .btn::after, .v2 .hero .cta::after, .v2-command .ping, .v2 .side .logo-glint,
  .v2 .side .me-card::after, .v2-home .avatar::after, .v2-home .greet-name { animation: none !important; }
  .v2-home .greet-name { -webkit-text-fill-color: currentColor; background: none; }
  .v2 .side .logo-glint { display: none; }
  .v2 .beam::before { display: none; }
  .v2-command .hero h1 { animation: none; background-position: 0 0, 0 0; }
  .v2 .reveal { opacity: 1; animation: none !important; }
  .v2-command .plate, .v2-command .zone a::before, .v2-command .zone a span { transition: none; }
  .v2-command .trk i, .v2-command .orders-grid b svg, .v2-command .k-halo { animation: none !important; }
.v2-command .k-scan { display: none; }
}

/* --- the user register (the administrator) ----------------------------------- */
/* After the approved drawing: the page's title and its rule over one card — the
   address with the centre's domain fixed beside it, the roles as chips, the
   sectors as tiles in their own artwork, the clearance as one segmented row —
   and the green approval at its foot. A choice that is made wears the gold, as
   everything live does. The frame (sidebar, tabs bar) is the working pages'. */
.v2-users .content { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.v2-users main { display: flex; flex-direction: column; gap: 16px; }
.v2-users .bar-start { display: flex; align-items: center; gap: 12px; min-width: 0; }
.v2-users .bar-title { font-size: 17px; font-weight: 700; }
.v2-users .side .nav-icon { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; }
.v2-users .side .nav-label { flex: 1; }
.v2-users .side .nav-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--danger); color: var(--bg); font-size: 13px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; }
.v2-users .avatar { width: 44px; height: 44px; flex: none; border-radius: 50%;
  background: var(--surface2); color: var(--gold); font-weight: 700; font-size: 17px;
  display: flex; align-items: center; justify-content: center; }
.v2-users .side .me-avatar { width: 38px; height: 38px; color: var(--ink); }
.v2-users .side .me-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.v2-users .side .me-role { font-size: 14px; font-weight: 600; }
.v2-users .side .me-text a { font-size: 13px; text-decoration: none; }
.v2-users .page-head { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }
.v2-users .ph-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 240px; }
.v2-users .ph-text h1 { margin: 0; font-size: 22px; font-weight: 700; }
.v2-users .ph-act { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: 15px; flex: none; }
.v2-users .done { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 12px; background: var(--oksoft); color: var(--ok); font-size: 14px; font-weight: 600; }
.v2-users .error.banner { padding: 10px 14px; border-radius: 12px; background: var(--dangersoft); }
.v2-users .empty { margin: 24px 0; text-align: center; font-size: 15px; color: var(--muted); }
/* A sector's own artwork, drawn in the colour of the text around it: ink at
   rest, gold when chosen, on either theme. */
.v2-users .smask { display: inline-block; width: 18px; height: 18px; flex: none; background: currentColor;
  -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.v2-users .s-aviation { -webkit-mask-image: url("../img/sectors/aviation.svg"); mask-image: url("../img/sectors/aviation.svg"); }
.v2-users .s-maritime { -webkit-mask-image: url("../img/sectors/maritime.svg"); mask-image: url("../img/sectors/maritime.svg"); }
.v2-users .s-rail { -webkit-mask-image: url("../img/sectors/rail.svg"); mask-image: url("../img/sectors/rail.svg"); }
.v2-users .s-road { -webkit-mask-image: url("../img/sectors/road.svg"); mask-image: url("../img/sectors/road.svg"); }

/* The register: a search, three views, and one row per person. */
.v2-users .utools { display: flex; flex-direction: column; gap: 10px; }
.v2-users .ufind { display: flex; gap: 8px; }
.v2-users .ufind input { flex: 1; min-width: 0; height: 44px; border-radius: 12px; padding: 0 14px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 15px; }
.v2-users .ufind button { width: 44px; height: 44px; flex: none; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: flex; align-items: center; justify-content: center; }
.v2-users .useg { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-users .useg a { min-height: 40px; padding: 0 14px; border-radius: 999px; display: flex; align-items: center;
  border: 1px solid var(--line); color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; }
.v2-users .useg a[aria-current="true"] { border-color: var(--gold); background: var(--goldsoft); color: var(--ink); font-weight: 700; }
.v2-users .ulist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v2-users .urow { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.v2-users .urow:hover { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.v2-users .urow-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.v2-users .urow-who b { font-size: 15.5px; font-weight: 700; overflow-wrap: anywhere; }
/* An address reads left to right, but sits under the name at the line's start. */
.v2-users .urow-who .code { color: var(--muted); font-weight: 500; overflow-wrap: anywhere; align-self: flex-start; }
.v2-users .urow-roles { font-size: 13px; color: var(--muted); font-weight: 500; }
.v2-users .urow-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.v2-users .urow-secs { display: flex; gap: 6px; color: var(--muted); }

/* The form. */
.v2-users .uform { padding: 18px; display: flex; flex-direction: column; gap: 20px; }
.v2-users .uform-title { margin: 0; font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.v2-users .uform-title::before { content: ""; width: 4px; height: 20px; border-radius: 2px; background: var(--gold); flex: none; }
.v2-users .ugrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.v2-users .ufld { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.v2-users fieldset.ufld > legend { padding: 0; margin-bottom: 8px; }
.v2-users .req { color: var(--danger); }
.v2-users .field { min-height: 48px; font-size: 16px; border-radius: 12px; }
.v2-users .field.fixed { display: flex; align-items: center; direction: ltr; justify-content: flex-start;
  color: var(--muted); font-size: 15px; font-weight: 500; }
.v2-users .email-group, .v2-signup .email-group { display: flex; direction: ltr; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface2); overflow: hidden; }
.v2-users .email-group:focus-within, .v2-signup .email-group:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.v2-users .email-group:has([aria-invalid="true"]), .v2-signup .email-group:has([aria-invalid="true"]) { border: 1.5px solid var(--danger); }
.v2-users .email-group .field, .v2-signup .email-group .field { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent;
  direction: ltr; text-align: left; }
.v2-users .email-group .field:focus-visible, .v2-signup .email-group .field:focus-visible { outline: none; }
.v2-users .email-suffix, .v2-signup .email-suffix { display: flex; align-items: center; padding: 0 14px; flex: none;
  border-inline-start: 1px solid var(--line); color: var(--muted); font-size: 15px; font-weight: 600; }
/* The external partner keeps its own organisation's address and has two limits of
   its own; both appear only while that role is ticked. */
.v2-users .partner-only { display: none; }
.v2-users .uform:has(input[name="roles"][value="external_partner"]:checked) .partner-only { display: flex; }
.v2-users .uform:has(input[name="roles"][value="external_partner"]:checked) .email-suffix { display: none; }
/* Chips, tiles and segments: a real checkbox or radio under each, kept for the
   keyboard and the screen reader, the face drawn by its label. */
.v2-users :is(.rchip, .stile, .segc, .ucheck) { position: relative; cursor: pointer; }
.v2-users :is(.rchip, .stile, .segc) > input { position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer; }
.v2-users .rchips { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-users .rchip span { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink);
  font-size: 14px; font-weight: 500; }
.v2-users .rchip input:checked + span { border-color: var(--gold); background: var(--goldsoft); font-weight: 700; }
.v2-users .rchip input:checked + span::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); flex: none; }
.v2-users :is(.rchip, .segc) input:focus-visible + span,
.v2-users .stile:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.v2-users .stiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.v2-users .stile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 88px; padding: 10px 4px; border-radius: 14px; border: 1px solid var(--line);
  background: var(--surface2); color: var(--ink); font-size: 14px; font-weight: 600; text-align: center; }
.v2-users .stile .smask { width: 28px; height: 28px; }
.v2-users .stile:has(input:checked) { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold);
  background: var(--goldsoft); color: var(--gold); }
.v2-users .segs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; background: var(--surface2); }
.v2-users .segs-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-users .segc + .segc { border-inline-start: 1px solid var(--line); }
.v2-users .segc span { display: flex; align-items: center; justify-content: center; min-height: 46px;
  padding: 4px 6px; font-size: 14.5px; font-weight: 500; color: var(--muted); text-align: center; line-height: 1.4; }
.v2-users .segc input:checked + span { background: var(--goldsoft); color: var(--gold); font-weight: 700; }
.v2-users .ucheck { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; }
.v2-users .ucheck input { width: 20px; height: 20px; accent-color: var(--gold); margin: 0; }
.v2-users .ufoot { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.v2-users .ufoot .btn { min-height: 48px; font-size: 16px; border-radius: 12px; }

/* A person's page: who, what they hold, where their first sign-in stands, and
   the three things an administrator does to an account, each a full row. */
.v2-users .uperson { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.v2-users .uperson-head { display: flex; align-items: center; gap: 12px; }
.v2-users .uperson-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.v2-users .uperson-who b { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.v2-users .uperson-who .code { color: var(--muted); font-weight: 500; overflow-wrap: anywhere; align-self: flex-start; }
.v2-users .facts { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.v2-users .facts > div { display: flex; flex-direction: column; gap: 6px; }
.v2-users .facts dt { font-size: 13px; color: var(--muted); }
.v2-users .facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.v2-users .tag { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
  border-radius: 999px; background: var(--surface2); border: 1px solid var(--line); font-size: 14px; font-weight: 500; }
.v2-users .unote { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--surface2);
  font-size: 14px; line-height: 1.7; }
.v2-users .unote-gold { background: var(--goldsoft); color: var(--ink); border-inline-start: 3px solid var(--gold); }
.v2-users .unote-red { background: var(--dangersoft); color: var(--danger); font-weight: 600; }
.v2-users .ufact { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.v2-users .uacts { display: flex; flex-direction: column; gap: 8px; }
.v2-users .uacts form { display: contents; }
.v2-users .uacts .btn { min-height: 48px; font-size: 15.5px; border-radius: 12px; }
/* The first press of a button that takes something away arms it: gold, and
   saying what the second press will do. */
.v2-users .btn.armed { background: var(--gold); color: var(--onok); border-color: transparent; }

/* The one-time password, once. */
.v2-users .otp-card { padding: 18px; display: flex; flex-direction: column; gap: 14px;
  border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.v2-users .otp-head { display: flex; align-items: flex-start; gap: 12px; }
.v2-users .ok-dot { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--oksoft);
  color: var(--ok); display: flex; align-items: center; justify-content: center; }
.v2-users .otp-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.v2-users .otp-who h2 { margin: 0; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.v2-users .otp-label { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 14px; font-weight: 600; }
.v2-users .otp-label b { color: var(--gold); font-size: 13px; }
.v2-users .otp-code { direction: ltr; padding: 18px 12px; border-radius: 14px; text-align: center;
  background: var(--bg); border: 1.5px dashed color-mix(in srgb, var(--gold) 45%, var(--line)); }
.v2-users .otp-code output { display: block; font-size: clamp(22px, 6.6vw, 32px); font-weight: 700;
  line-height: 1.5; color: var(--ink); user-select: all; -webkit-user-select: all;
  font-variant-numeric: tabular-nums; }
/* Four characters to a group, a group never broken: on a narrow phone the line
   breaks between groups, not inside one. */
.v2-users .otp-code .g { display: inline-block; white-space: nowrap; letter-spacing: 0.1em; }
.v2-users .otp-code .sep { display: inline-block; margin-inline: 0.3em; color: var(--muted); font-weight: 500; }
.v2-users .otp-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-users .otp-acts .btn { flex: 1 1 130px; min-height: 48px; font-size: 16px; border-radius: 12px; }
/* Copy turns into a tick and "Copied" for a moment (v2-users.js). */
.v2-users .otp-acts [data-copy] :is(.i-copy, .i-done) { display: inline-flex; }
.v2-users .otp-acts [data-copy] .i-done,
.v2-users .otp-acts [data-copy].is-copied .i-copy { display: none; }
.v2-users .otp-acts [data-copy].is-copied .i-done { display: inline-flex; }
.v2-users .share-via { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.v2-users .share-via .btn { flex: 1 1 120px; min-height: 44px; font-size: 15px; border-radius: 12px; }
.v2-users .share-via .otp-via { font-size: 13px; color: var(--muted); font-weight: 500; }
/* The code reads left to right; the rules in its bubble read in the page's own direction. */
[dir="rtl"] .v2-users .otp-code > .tip { direction: rtl; }
[dir="ltr"] .v2-users .otp-code > .tip { direction: ltr; }

@media (min-width: 900px) {
  /* On the desk the page's own title carries the page; the bar keeps its arrow. */
  .v2-users .bar-title { display: none; }
  .v2-users main { gap: 20px; max-width: 1080px; }
  .v2-users .uform, .v2-users .uperson, .v2-users .otp-card { padding: 24px 28px; }
  .v2-users .ugrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .v2-users .ufoot { flex-direction: row; align-items: center; justify-content: space-between; }
  .v2-users .ufoot .btn { flex: none; padding: 0 24px; }
  .v2-users .utools { flex-direction: row; align-items: center; }
  .v2-users .ufind { flex: 1; max-width: 420px; }
  .v2-users .ulist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; }
  .v2-users .uperson, .v2-users .otp-card, .v2-users .done, .v2-users .error.banner,
  .v2-users .ucontact, .v2-users .ucontact-note { max-width: 640px; }
  .v2-users .facts { flex-direction: row; flex-wrap: wrap; gap: 16px 32px; }
  .v2-users .otp-acts .btn { flex: 1 1 0; }
}
@media (max-width: 899px) {
  /* On the phone a row's state and sectors take their own line under the name,
     so the address keeps the width it needs. */
  .v2-users .urow { flex-wrap: wrap; row-gap: 8px; }
  .v2-users .urow-end { order: 3; flex: 1 0 100%; flex-direction: row; align-items: center;
    justify-content: space-between; padding-inline-start: 56px; }
  /* On the phone the bar names the page; its own title stays for the screen reader. */
  .v2-users .ph-text h1 { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; }
  .v2-users .ph-act { min-height: 40px; font-size: 14px; }
}
@media (max-width: 360px) {
  .v2-users .stiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-users .segs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-users .segc:nth-child(3) { border-inline-start: 0; }
  .v2-users .segc:nth-child(n + 3) { border-top: 1px solid var(--line); }
}

/* --- first sign-in: choosing one's own password ----------------------------------- */
.v2-login .fp-head { display: flex; flex-direction: column; gap: 4px; }
.v2-login .fp-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--ink); }
.v2-login .fp-who { align-self: flex-start; }
.v2-login .fp-form { display: flex; flex-direction: column; gap: 10px; }
.v2-login .fp-form .btn { margin-top: 8px; }
.v2-login .pw-wrap { position: relative; }
.v2-login .pw-wrap .field { padding-inline-end: 52px; }
.v2-login .pw-eye { position: absolute; top: 2px; inset-inline-end: 2px; width: 44px; height: 44px; border: 0;
  background: transparent; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
/* Back on the sign-in after choosing one: it was kept. */
.v2-login .done { margin: 0; display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-radius: 12px; background: var(--oksoft); color: var(--ok); font-size: 14px; font-weight: 600; }

/* Phone system bars draw over the page edges once viewport-fit=cover (in
   v2/_base.html) lets the page run under them; the insets step the content
   clear of the notch and the home indicator. Both are 0 on a desktop. */
body.v2 { padding-top: env(safe-area-inset-top, 0px); }

/* On a touch screen a link inside a line of text is a fingertip tall, not a letter tall:
   the area that answers a tap grows past the text without moving anything on the page. */
@media (pointer: coarse) {
  .v2 main a.code, .v2 main p a, .v2 main dd a, .v2 main td a,
  .v2 .section-head a, .v2 .sec-head a { position: relative; }
  .v2 main a.code::after, .v2 main p a::after, .v2 main dd a::after, .v2 main td a::after,
  .v2 .section-head a::after, .v2 .sec-head a::after {
    content: ""; position: absolute; inset: -10px -6px; }
  .v2 main details > summary { min-height: 44px; display: flex; align-items: center; }
}

/* The command room, digital: the desk and the wall (900 px and wider). The figures and the
   measures are figure cards («Every figure card»); the orders keep a faint frame. The phone
   keeps its own room. */
@media (min-width: 900px) {
  /* The decisions leave the desk and the wall: the first figure and the decisions module are
     not drawn there. The phone still draws both. */
  .v2-command .fig-you, .v2-command .area-decisions { display: none !important; }
  .v2-command .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* The orders: a faint frame, the same radius, no corner and no shine. The frame is the
     surface, not the green band, so its words take the room's ink and their icons its gold
     (the band's ivory on the light surface read at 1.06:1); under the hand the frame turns
     solid rather than back to the band's tint, so the ink stays legible. */
  .v2-command .orders-grid button {
    position: relative; border: 1px solid var(--card-line);
    border-radius: 14px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: none;
    color: var(--ink); }
  .v2-command .orders-grid b svg { color: var(--gold); }
  .v2-command .orders-grid button:hover { background: var(--surface); }

  /* Section headers: a gold diamond before the title and a gold hairline under it. */
  .v2-command .sec-head { border-bottom: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line)); }
  .v2-command .sec-head h2 { display: inline-flex; align-items: center; gap: 10px; }
  .v2-command .sec-head h2::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--gold);
    transform: rotate(45deg); }
}


/* The hand-over's signature pad and vehicle diagram (_custody.html) are drawn in dark ink:
   on either theme they keep the paper they were drawn for, framed like a field. */
.v2 :is(.sig-pad, .diagram-pad) { display: block; width: 100%; max-width: 480px; touch-action: none;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; cursor: crosshair; }
.v2 .sig-pad { height: 150px; }
.v2 .diagram-pad { height: 220px; max-width: 420px; }
.v2 .pad-actions { display: flex; gap: 8px; margin-top: 6px; }
/* Both people sign every hand-over (0040): the giver's pad and the receiver's, side by side
   from the desk up, one above the other on the phone; the help and the warning under both. */
.v2 .dyn-field.sig-pair { display: grid; gap: 14px; }
.v2 .sig-pair > :is(.dyn-help, .sig-missing) { grid-column: 1 / -1; }
.v2 .sig-missing { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--dangersoft);
  color: var(--danger); font-size: 14px; font-weight: 600; }
@media (min-width: 761px) { .v2 .dyn-field.sig-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.v2 .diagram-marks { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--muted); }

/* The resumable upload's progress (js/evidence-upload.js), on the case page and the lab's:
   a file, its bar and what is happening to it; one above the other on the phone. */
.v2 .upload-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.v2 .upload-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px minmax(0, 1.2fr); gap: 12px;
  align-items: center; font-size: 14px; }
.v2 .upload-row__name { overflow-wrap: anywhere; font-weight: 600; }
.v2 .upload-row progress { width: 100%; accent-color: var(--gold); }
.v2 .upload-row__status { color: var(--muted); }
.v2 .upload-row__status.good { color: var(--ok); }
.v2 .upload-row__status.bad { color: var(--danger); }
.v2 .upload-row__status.warn { color: var(--gold); }
@media (max-width: 640px) { .v2 .upload-row { grid-template-columns: 1fr; } }

/* --- a page that holds a document is not printed from the browser ----------------
   TIMS prints nothing (the owner's rule, 23 October 2026): a copy is the export panel's
   PDF or Word file, numbered, watermarked with its reader, recorded with its purpose.
   Printed straight from the browser, the page gives the paper one sentence saying so
   (v2/_print_guard.html). */
.print-guard { display: none; }
@media print {
  body.print-guarded { min-height: 0 !important; }  /* one sheet, not a second blank one */
  body.print-guarded > :not(.print-guard) { display: none !important; }
  body.print-guarded > .print-guard { display: block !important; margin: 40mm 20mm; font-size: 16pt; line-height: 1.7;
    color: #000; text-align: center; }
}

/* --- Details on demand: the owner's rule for every card (CLAUDE.md, v2/_tip.html) ---------
   A card shows its name and its figure, and nothing else. Its detail (a state, a note, a
   comparison) waits in a lightly shaded bubble just over it, opened by the mouse, the
   keyboard's focus or a finger's first touch (js/v2-tip.js), and a faint light of gold slides
   once across the card, from its start edge, as the bubble opens. A card too near the top
   of the window opens its bubble under it. */
.v2 .has-tip { position: relative; isolation: isolate; }
.v2 .tip {
  position: absolute; inset-inline: 6px auto; bottom: calc(100% + 8px); z-index: 30;
  width: max-content; max-width: calc(100% - 12px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px;
  border-radius: 12px; border: 1px solid var(--box-line, var(--line));
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28); color: var(--ink); font-size: 13px; font-weight: 500;
  line-height: 1.6; text-align: start; white-space: normal; overflow-wrap: anywhere;
  opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; }
.v2 .tip::after { content: ""; position: absolute; top: 100%; inset-inline-start: 18px;
  border: 7px solid transparent; border-top-color: color-mix(in srgb, var(--surface) 84%, transparent); }
.v2 .has-tip.tip-under > .tip { bottom: auto; top: calc(100% + 8px); transform: translateY(-4px); }
.v2 .has-tip.tip-under > .tip::after { top: auto; bottom: 100%; border-top-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--surface) 84%, transparent); }
/* What the bubble holds reads whole: no reserved heights, no cut status, no faded ink. */
.v2 .tip :is(.k-note, .fig-meta, .trend) { min-height: 0; grid-area: auto; }
.v2 .tip .k-note { color: var(--ink); opacity: 0.88; font-size: 13px; line-height: 1.6; }
.v2 .tip .fig-meta { max-width: 100%; }
.v2 .tip .chip { margin-inline-start: 0; max-width: 100%; white-space: normal; overflow: visible; text-overflow: clip; }
.v2 .has-tip:is(.tip-open, :focus-visible) > .tip { opacity: 1; visibility: visible; transform: none; }
.v2 .has-tip:is(.tip-open, :focus-visible) { z-index: 31; }
@media (hover: hover) {
  .v2 .has-tip:hover > .tip { opacity: 1; visibility: visible; transform: none; }
  .v2 .has-tip:hover { z-index: 31; }
}
/* The light: a faint band of gold under the card's words, sliding once from its start edge. */
.v2 .tip-glow { --tip-from: -190%; --tip-to: 290%; position: absolute; inset: 0; z-index: -1;
  border-radius: inherit; overflow: hidden; pointer-events: none; }
[dir="rtl"] .v2 .tip-glow { --tip-from: 290%; --tip-to: -190%; }
.v2 .tip-glow::before { content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 55%;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 16%, transparent), transparent);
  filter: blur(10px); opacity: 0; transform: skewX(-14deg) translateX(var(--tip-from)); }
.v2 .has-tip:is(.tip-open, :focus-visible) > .tip-glow::before { animation: tip-light 1.1s ease-out both; }
@media (hover: hover) { .v2 .has-tip:hover > .tip-glow::before { animation: tip-light 1.1s ease-out both; } }
@keyframes tip-light {
  from { opacity: 1; transform: skewX(-14deg) translateX(var(--tip-from)); }
  to { opacity: 1; transform: skewX(-14deg) translateX(var(--tip-to)); } }
@media (prefers-reduced-motion: reduce) {
  .v2 .tip { transition: none; transform: none; }
  .v2 .has-tip > .tip-glow::before { animation: none !important; }
}
/* A sector's bubble and light span its card, the head only opens them. */
.v2-command .pulse-now.has-tip { position: static; isolation: auto; }
.v2-command .pulse-now > .tip { inset-inline: 0; width: auto; max-width: none; gap: 2px; }
/* The opening card's motto: inside the card, over its foot (the card clips what leaves it). */
.v2-command .hero.open > .open-motto.tip { position: absolute; inset-inline: 16px auto; top: auto; bottom: 14px;
  margin: 0; max-width: calc(100% - 32px); padding: 0; border: 0; background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--onband); font-size: 13.5px; }
.v2-command .hero.open > .open-motto.tip::after { content: none; }

/* --- Every figure card: design H, the owner's choice of 21 October 2026 (CLAUDE.md) ---------
   The cards that stand for a number, on every page and for every account: the room's
   figures and measures, the home's tiles, the statistics, the equation's result, and the
   custody and import counts. Each is a faint fill with its start corner cut at 45°, a short
   gold edge along its top, its name on one line after a small gold diamond, and its figure
   in TheSans, at its bold, at its end; no frame and no shadow. A card that warns takes its
   edge in its warning colour. On a phone each card is one row: the name, then the figure.
   Its detail waits in its bubble («Details on demand»), which the card does not clip. */
body.v2 :is(.fig, .measure, .pulse-now, .kpi, .stat, .eq-fig) > b,
body.v2 :is(.tiles3, .tiles5) > div > b,
body.v2 .hero .counter > b {
  font-family: var(--page-font); font-weight: 700; letter-spacing: 0;
  font-variant-numeric: tabular-nums; }
body.v2 { --fig-size: 44px; --fig-size-2: 34px; --fig-cut: 16px;
  --fig-fill: color-mix(in srgb, var(--ink) 4.5%, transparent); }
body.v2 :is(.fig, .measure, .kpi, .stat, .eq-fig), body.v2 :is(.tiles3, .tiles5) > div {
  position: relative; display: flex; flex-direction: column; gap: 14px; min-width: 0;
  padding: 16px 18px; border: 0; border-radius: 0; box-shadow: none;
  /* The cut: the fill starts a diagonal away from the start corner, so nothing is clipped. */
  background: linear-gradient(225deg, transparent calc(var(--fig-cut) * 0.7071), var(--fig-fill) 0); }
[dir="ltr"] body.v2 :is(.fig, .measure, .kpi, .stat, .eq-fig),
[dir="ltr"] body.v2 :is(.tiles3, .tiles5) > div {
  background: linear-gradient(135deg, transparent calc(var(--fig-cut) * 0.7071), var(--fig-fill) 0); }
body.v2 :is(.fig, .measure, .kpi, .stat, .eq-fig)::after, body.v2 :is(.tiles3, .tiles5) > div::after {
  content: ""; position: absolute; top: 0; inset-inline-start: calc(var(--fig-cut) + 2px);
  width: 34px; height: 2px; background: var(--gold); pointer-events: none; }
body.v2 :is(.stat--alert, .tiles5 > .bad)::after { background: var(--danger); }
/* The light that crosses a card on demand keeps to its cut. */
body.v2 :is(.fig, .measure, .kpi, .stat, .eq-fig, .tiles5 > div) > .tip-glow {
  clip-path: polygon(0 0, calc(100% - var(--fig-cut)) 0, 100% var(--fig-cut), 100% 100%, 0 100%); }
[dir="ltr"] body.v2 :is(.fig, .measure, .kpi, .stat, .eq-fig, .tiles5 > div) > .tip-glow {
  clip-path: polygon(var(--fig-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fig-cut)); }
body.v2 :is(.fig, .measure, .kpi) > .k-label,
body.v2 :is(.stat, .eq-fig, .tiles3 > div, .tiles5 > div) > span:not(.tip, .tip-glow, .eq-pct) {
  order: 1; display: flex; align-items: center; gap: 8px; min-height: 0; margin: 0;
  font-family: var(--page-font); font-size: 15px; font-weight: 400;
  line-height: 1.4; color: var(--muted); white-space: nowrap; }
body.v2 :is(.fig, .measure, .kpi) > .k-label::before,
body.v2 :is(.stat, .eq-fig, .tiles3 > div, .tiles5 > div) > span:not(.tip, .tip-glow, .eq-pct)::before {
  content: ""; flex: none; width: 6px; height: 6px; border: 1px solid var(--gold); transform: rotate(45deg); }
body.v2 :is(.fig, .measure, .kpi, .stat, .eq-fig) > b, body.v2 :is(.tiles3, .tiles5) > div > b {
  order: 2; align-self: flex-end; margin: auto 0 0; font-size: var(--fig-size); line-height: 1; }
body.v2 :is(.measure, .eq-fig) > b, body.v2 :is(.tiles3, .tiles5) > div > b { font-size: var(--fig-size-2); }
/* The room on a narrower desk keeps every name on its line: the figures two a row, and the
   five measures in two full rows, three then two. */
@media (min-width: 900px) and (max-width: 1199px) {
  body.v2-command .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1279px) {
  body.v2-command .measures { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  body.v2-command .measures .measure { grid-column: span 2; }
  body.v2-command .measures .measure:nth-child(n+4) { grid-column: span 3; }
}
/* The equation's result: four cards in its column, two a row on the wide screen, each name on
   its one line (the owner's word, 24 October 2026); on a narrower screen one a row, as every
   figure card. */
body.v2 .eq-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 899px) {
  body.v2 { --fig-size: 34px; --fig-size-2: 28px; }
  body.v2 :is(.figures, .kpis, .stat-grid, .eq-figs, .tiles3, .tiles5) {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  body.v2 :is(.fig, .measure, .kpi, .stat, .eq-fig), body.v2 :is(.tiles3, .tiles5) > div {
    flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; min-height: 64px; }
  body.v2 :is(.fig, .measure, .kpi, .stat, .eq-fig) > b, body.v2 :is(.tiles3, .tiles5) > div > b {
    align-self: center; margin: 0 auto 0 0; }
  [dir="ltr"] body.v2 :is(.fig, .measure, .kpi, .stat, .eq-fig) > b,
  [dir="ltr"] body.v2 :is(.tiles3, .tiles5) > div > b { margin: 0 0 0 auto; }
  /* The room's measures are rows inside their own card, parted by hairlines. */
  body.v2-command .measures .measure { background: none; padding: 12px 2px; min-height: 0;
    border-bottom: 1px solid var(--line); }
  /* The last keeps the height of its line (the owner's equal rows, 25 October 2026). */
  body.v2-command .measures .measure:last-child { border-bottom-color: transparent; }
  body.v2-command .measures .measure::after { content: none; }
}

/* --- The CEO's pages, tidied (body.ceo-viewer) ------------------------------------------
   One quiet frame for every box he reads: a hairline in the page's own ink at a tenth of
   its strength, a small radius, and less air inside and between, so a screen holds more
   and asks less of the eye. His figure cards are every page's («Every figure card»). No
   other account's pages change. */
body.v2.ceo-viewer { --box-line: color-mix(in srgb, var(--ink) 10%, transparent); --box-r: 12px; --box-r-in: 10px; }
body.v2.ceo-viewer :is(.card, .acc-card, .sec, .uform, .map-panel, .bcard, .brief-card, .brief-metric,
  .brief-sectors-card, .xr-find-card, .xr-conf) {
  border: 1px solid var(--box-line); border-radius: var(--box-r); box-shadow: none; }
body.v2.ceo-viewer :is(.item, .decision, .eq-rule, .brief-sector, .eq-result) {
  border: 1px solid var(--box-line); border-radius: var(--box-r-in); box-shadow: none; }
body.v2.ceo-viewer :is(.card, .acc-card, .uform, .brief-card, .xr-find-card, .xr-conf) { padding: 14px 16px; }
body.v2.ceo-viewer .acc-card { gap: 10px; }
body.v2.ceo-viewer :is(.item, .decision) { padding: 10px 12px; gap: 6px; }
body.v2.ceo-viewer .eq-rule { padding: 12px; }
body.v2.ceo-viewer .v2-command main, body.v2.ceo-viewer.v2-command main { gap: 12px; }
body.v2.ceo-viewer.v2-command .sec { padding: 12px 14px; gap: 10px; border-radius: var(--box-r); }
body.v2.ceo-viewer.v2-command .hero { border-radius: 14px; padding: 16px 18px; }
/* The figures: tighter tiles, one line for the label, the number a size down. */
body.v2.ceo-viewer.v2-command { --kpi-gap: 8px; --kpi-line: 2px; --kpi-pad-y: 9px; --kpi-pad-x: 12px;
  --kpi-label: 13px; --kpi-value: 24px; --kpi-note: 12.5px; --kpi-note-lines: 1; }
body.v2.ceo-viewer.v2-command .orders-grid button {
  border: 1px solid var(--card-line); border-radius: var(--box-r-in); box-shadow: none; }
body.v2.ceo-viewer.v2-command .fig .k-label { min-height: 0; }
body.v2.ceo-viewer.v2-command .orders-grid button { padding: 10px 12px; }
/* His copy panels save as PDF or Word and print nothing (the Print button is not his), so
   from 560px their two buttons share the row rather than leave a third of it empty. */
@media (min-width: 560px) {
  body.v2.ceo-viewer .ir-export-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  /* The map's four corners: a short, faint touch of gold. */
  body.v2.ceo-viewer.v2-command .area-map {
    --corner: color-mix(in srgb, var(--gold) 55%, transparent);
    background-image: linear-gradient(var(--corner), var(--corner)), linear-gradient(var(--corner), var(--corner)),
      linear-gradient(var(--corner), var(--corner)), linear-gradient(var(--corner), var(--corner)),
      linear-gradient(var(--corner), var(--corner)), linear-gradient(var(--corner), var(--corner)),
      linear-gradient(var(--corner), var(--corner)), linear-gradient(var(--corner), var(--corner));
    background-size: 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px, 12px 1px, 1px 12px; }
  body.v2.ceo-viewer.v2-command { --kpi-value: 24px; --tile-h: 0px; }
  body.v2.ceo-viewer.v2-command .hero { padding: 18px 22px; }
  body.v2.ceo-viewer.v2-command :is(.figures, .measures, .orders-grid) { gap: 10px; }
  body.v2.ceo-viewer.v2-command .measure .k-label { min-height: 0; }
  body.v2.ceo-viewer.v2-command .measure .k-note { min-height: 0; }
}