/*!
 * NEX4R SIGNAL. The Nex4r platform design system.
 * Obsidian ground, floating chrome, one signal colour, Geist.
 * Authored in packages/ui/src/design/.
 */
/* ==========================================================================
   L0 · TOKENS
   ========================================================================== */

:root {
  color-scheme: dark light;

  /* --- ground and surfaces (dark) --------------------------------------
     Named by role. Each step is a real level of the hierarchy. */
  --nx-ground: #08090b;
  --nx-ground-2: #0b0d10;
  --nx-chrome: #101216;
  --nx-surface: #121519;
  --nx-surface-2: #171b21;
  --nx-surface-3: #1d2229;
  --nx-elevated: #1a1e25;
  --nx-inset: #0c0e12;
  --nx-hover: #191d23;
  --nx-selected: #1f2530;

  /* The light a surface catches along its top edge. The entire elevation
     model in dark mode: a shadow on near-black carries no information. */
  --nx-edge: rgba(255, 255, 255, 0.055);
  --nx-edge-strong: rgba(255, 255, 255, 0.09);
  /* Hairlines, used inside content only: table rows, list rows, dividers. */
  --nx-line: rgba(255, 255, 255, 0.065);
  --nx-line-2: rgba(255, 255, 255, 0.11);

  /* --- ink ------------------------------------------------------------- */
  --nx-text: #eceff3;
  --nx-text-2: #b3bbc6;
  --nx-text-3: #8c95a2;
  --nx-text-4: #737c89;
  --nx-text-invert: #08090b;

  /* --- the signal ---------------------------------------------------------
     One accent. --nx-signal is the readable-on-this-ground value for text and
     marks; --nx-signal-fill is the value a filled control is painted with and
     is chosen so white on it clears WCAG AA at 14px. */
  --nx-signal: #5b9aff;
  --nx-signal-hover: #7cafff;
  --nx-signal-fill: #2a66e0;
  --nx-signal-fill-hover: #3474ee;
  --nx-signal-soft: rgba(91, 154, 255, 0.13);
  --nx-signal-line: rgba(91, 154, 255, 0.42);
  /* Working right now. Used for nothing else. */
  --nx-live: #43d3e6;
  --nx-live-soft: rgba(67, 211, 230, 0.13);

  /* --- status: hue, a soft ground, and always a word beside it --------- */
  --nx-ok: #3fcf8e;
  --nx-ok-soft: rgba(63, 207, 142, 0.12);
  --nx-warn: #f0b34a;
  --nx-warn-soft: rgba(240, 179, 74, 0.12);
  --nx-danger: #ff7474;
  --nx-danger-soft: rgba(255, 116, 116, 0.12);
  --nx-danger-fill: #c43131;
  --nx-idle: #7d8693;
  --nx-idle-soft: rgba(125, 134, 147, 0.14);

  /* --- data --------------------------------------------------------------- */
  --nx-chart: #5b9aff;
  --nx-chart-2: #43d3e6;
  --nx-chart-grid: rgba(255, 255, 255, 0.06);
  --nx-track: rgba(255, 255, 255, 0.07);

  /* --- the one light in the room ----------------------------------------
     A single soft source above the top-left of the workspace. Not a glow on an
     element: the page itself is lit, very faintly, from where the navigation
     is. */
  --nx-room-light: radial-gradient(1100px 620px at 12% -12%, rgba(91, 154, 255, 0.07), transparent 62%);

  /* --- depth: shadows only for things that genuinely float -------------- */
  --nx-float: 0 18px 40px -22px rgba(0, 0, 0, 0.75), 0 2px 6px -2px rgba(0, 0, 0, 0.5);
  --nx-float-lg: 0 32px 80px -28px rgba(0, 0, 0, 0.85), 0 4px 16px -6px rgba(0, 0, 0, 0.55);
  --nx-panel-shadow: none;
  --nx-focus: 0 0 0 2px var(--nx-ground), 0 0 0 4px var(--nx-signal);

  /* --- shape ------------------------------------------------------------- */
  --nx-r-chrome: 16px;
  --nx-r-panel: 14px;
  --nx-r-tile: 10px;
  --nx-r-control: 8px;
  --nx-r-full: 999px;

  /* --- rhythm: 4px base --------------------------------------------------- */
  --nx-1: 4px;  --nx-2: 8px;  --nx-3: 12px; --nx-4: 16px; --nx-5: 20px;
  --nx-6: 24px; --nx-7: 32px; --nx-8: 40px; --nx-9: 56px; --nx-10: 72px;

  /* --- structure ------------------------------------------------------- */
  --nx-inset-gap: 12px;
  --nx-deck-h: 60px;
  --nx-dock-w: 252px;
  --nx-dock-w-collapsed: 72px;
  --nx-topbar-h: 60px;
  --nx-content-max: 1480px;

  /* --- type ---------------------------------------------------------------
     Geist, self-hosted (see brand.ts). Body text is 14px: Geist's x-height is
     modest, and 13.5px in it reads as a caption. Mono is for identifiers,
     keys and code, never for labels. */
  --nx-font: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif;
  --nx-mono: "Geist Mono", ui-monospace, "Cascadia Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --nx-t-xs: 12px;
  --nx-t-sm: 13px;
  --nx-t-base: 14px;
  --nx-t-md: 15px;
  --nx-t-lg: 17px;
  --nx-t-xl: 20px;
  --nx-t-2xl: 26px;
  --nx-t-3xl: 32px;
  --nx-t-4xl: 44px;

  /* --- motion ------------------------------------------------------------ */
  --nx-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --nx-ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --nx-d-fast: 120ms;
  --nx-d: 200ms;
  --nx-d-slow: 320ms;
  --nx-d-enter: 520ms;
  --nx-d-draw: 900ms;

  /* --- compatibility ------------------------------------------------------
     Names the rest of the platform and its tests already read. Each resolves
     to a role above, so there is still one definition of every colour. */
  --nx-bg: var(--nx-ground);
  --nx-shell: var(--nx-chrome);
  --nx-border: var(--nx-line-2);
  --nx-border-strong: rgba(255, 255, 255, 0.16);
  --nx-seam: var(--nx-line);
  --nx-text-secondary: var(--nx-text-2);
  --nx-text-muted: var(--nx-text-3);
  --nx-text-faint: var(--nx-text-3);
  --nx-accent: var(--nx-signal);
  --nx-accent-soft: var(--nx-signal-soft);
  --nx-blue: var(--nx-signal);
  --nx-cyan: var(--nx-live);
  --nx-success: var(--nx-ok);
  --nx-success-soft: var(--nx-ok-soft);
  --nx-info: var(--nx-signal);
  --nx-info-soft: var(--nx-signal-soft);
  --nx-ring-color: var(--nx-signal);
}

/* ==========================================================================
   L0.1 · LIGHT
   A complete scheme. The ground is a cool pale grey so white panels have
   somewhere to sit; panels carry a hairline ring and a very soft tinted shadow,
   because in daylight a tone step alone is not enough to see an edge.
   ========================================================================== */

/* The scheme is the reader's choice first and the operating system's second.
   An explicit choice stamps data-theme on the root (see theme.ts): "light"
   takes the light values wherever the system stands, "dark" keeps the dark
   defaults above even on a light system, and no attribute follows the system. */
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] {
  color-scheme: light;
  --nx-ground: #eef0f4;
  --nx-ground-2: #e8ebf0;
  --nx-chrome: #ffffff;
  --nx-surface: #ffffff;
  --nx-surface-2: #f5f7fa;
  --nx-surface-3: #edf0f5;
  --nx-elevated: #ffffff;
  --nx-inset: #f3f5f8;
  --nx-hover: #f3f5f9;
  --nx-selected: #e9effb;

  --nx-edge: rgba(255, 255, 255, 0.9);
  --nx-edge-strong: rgba(255, 255, 255, 1);
  --nx-line: rgba(14, 20, 30, 0.07);
  --nx-line-2: rgba(14, 20, 30, 0.11);

  --nx-text: #0e1218;
  --nx-text-2: #384250;
  --nx-text-3: #566070;
  --nx-text-4: #6b7482;
  --nx-text-invert: #ffffff;

  --nx-signal: #1d5bd8;
  --nx-signal-hover: #1649b3;
  --nx-signal-fill: #1d5bd8;
  --nx-signal-fill-hover: #1a50c2;
  --nx-signal-soft: rgba(29, 91, 216, 0.09);
  --nx-signal-line: rgba(29, 91, 216, 0.35);
  --nx-live: #0a7f93;
  --nx-live-soft: rgba(10, 127, 147, 0.1);

  --nx-ok: #086b41;
  --nx-ok-soft: rgba(8, 107, 65, 0.08);
  --nx-warn: #8f5b06;
  --nx-warn-soft: rgba(170, 110, 10, 0.1);
  --nx-danger: #b8272a;
  --nx-danger-soft: rgba(184, 39, 42, 0.08);
  --nx-danger-fill: #bf2d2d;
  --nx-idle: #6b7482;
  --nx-idle-soft: rgba(107, 116, 130, 0.12);

  --nx-chart: #1d5bd8;
  --nx-chart-2: #0a7f93;
  --nx-chart-grid: rgba(14, 20, 30, 0.07);
  --nx-track: rgba(14, 20, 30, 0.07);

  --nx-room-light: radial-gradient(1100px 620px at 12% -12%, rgba(29, 91, 216, 0.05), transparent 62%);

  --nx-float: 0 18px 40px -20px rgba(20, 32, 58, 0.22), 0 2px 6px -2px rgba(20, 32, 58, 0.08);
  --nx-float-lg: 0 32px 80px -28px rgba(20, 32, 58, 0.3), 0 4px 16px -6px rgba(20, 32, 58, 0.1);
  --nx-panel-shadow: 0 0 0 1px rgba(14, 20, 30, 0.06), 0 1px 2px rgba(20, 32, 58, 0.04);
  --nx-border-strong: rgba(14, 20, 30, 0.18);

}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
  --nx-ground: #eef0f4;
  --nx-ground-2: #e8ebf0;
  --nx-chrome: #ffffff;
  --nx-surface: #ffffff;
  --nx-surface-2: #f5f7fa;
  --nx-surface-3: #edf0f5;
  --nx-elevated: #ffffff;
  --nx-inset: #f3f5f8;
  --nx-hover: #f3f5f9;
  --nx-selected: #e9effb;

  --nx-edge: rgba(255, 255, 255, 0.9);
  --nx-edge-strong: rgba(255, 255, 255, 1);
  --nx-line: rgba(14, 20, 30, 0.07);
  --nx-line-2: rgba(14, 20, 30, 0.11);

  --nx-text: #0e1218;
  --nx-text-2: #384250;
  --nx-text-3: #566070;
  --nx-text-4: #6b7482;
  --nx-text-invert: #ffffff;

  --nx-signal: #1d5bd8;
  --nx-signal-hover: #1649b3;
  --nx-signal-fill: #1d5bd8;
  --nx-signal-fill-hover: #1a50c2;
  --nx-signal-soft: rgba(29, 91, 216, 0.09);
  --nx-signal-line: rgba(29, 91, 216, 0.35);
  --nx-live: #0a7f93;
  --nx-live-soft: rgba(10, 127, 147, 0.1);

  --nx-ok: #086b41;
  --nx-ok-soft: rgba(8, 107, 65, 0.08);
  --nx-warn: #8f5b06;
  --nx-warn-soft: rgba(170, 110, 10, 0.1);
  --nx-danger: #b8272a;
  --nx-danger-soft: rgba(184, 39, 42, 0.08);
  --nx-danger-fill: #bf2d2d;
  --nx-idle: #6b7482;
  --nx-idle-soft: rgba(107, 116, 130, 0.12);

  --nx-chart: #1d5bd8;
  --nx-chart-2: #0a7f93;
  --nx-chart-grid: rgba(14, 20, 30, 0.07);
  --nx-track: rgba(14, 20, 30, 0.07);

  --nx-room-light: radial-gradient(1100px 620px at 12% -12%, rgba(29, 91, 216, 0.05), transparent 62%);

  --nx-float: 0 18px 40px -20px rgba(20, 32, 58, 0.22), 0 2px 6px -2px rgba(20, 32, 58, 0.08);
  --nx-float-lg: 0 32px 80px -28px rgba(20, 32, 58, 0.3), 0 4px 16px -6px rgba(20, 32, 58, 0.1);
  --nx-panel-shadow: 0 0 0 1px rgba(14, 20, 30, 0.06), 0 1px 2px rgba(20, 32, 58, 0.04);
  --nx-border-strong: rgba(14, 20, 30, 0.18);

  }
}

/* ==========================================================================
   L1 · MOTION
   ========================================================================== */

/* --- navigation between documents ---------------------------------------- */
@view-transition { navigation: auto; }

.deck { view-transition-name: nx-deck; }
.shell.is-dock .sidebar { view-transition-name: nx-dock; }
.content { view-transition-name: nx-content; }
.nav-item.active { view-transition-name: nx-nav-active; }

::view-transition-group(nx-nav-active) {
  animation-duration: var(--nx-d-slow);
  animation-timing-function: var(--nx-ease-out);
}
::view-transition-old(nx-content) {
  animation: nx-vt-leave 140ms var(--nx-ease-inout) both;
}
::view-transition-new(nx-content) {
  animation: nx-vt-arrive 300ms var(--nx-ease-out) both;
}
@keyframes nx-vt-leave { to { opacity: 0; transform: translateY(-4px); } }
@keyframes nx-vt-arrive { from { opacity: 0; transform: translateY(8px); } }

/* --- the arrival cascade ------------------------------------------------- */
@keyframes nx-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@keyframes nx-fade { from { opacity: 0; } to { opacity: 1; } }

.content > .stack > *,
.content > .console > *,
.console-grid > *,
.content > .mission-surface > .mc > *,
.content > .mission-surface > .stack > *,
.nx-in {
  animation: nx-rise var(--nx-d-enter) var(--nx-ease-out) both;
}
.content > .stack > :nth-child(2), .content > .console > :nth-child(2), .console-grid > :nth-child(2),
.content > .mission-surface > .mc > :nth-child(2), .content > .mission-surface > .stack > :nth-child(2) { animation-delay: 50ms; }
.content > .stack > :nth-child(3), .content > .console > :nth-child(3), .console-grid > :nth-child(3),
.content > .mission-surface > .mc > :nth-child(3), .content > .mission-surface > .stack > :nth-child(3) { animation-delay: 100ms; }
.content > .stack > :nth-child(4), .content > .console > :nth-child(4), .console-grid > :nth-child(4),
.content > .mission-surface > .mc > :nth-child(4), .content > .mission-surface > .stack > :nth-child(4) { animation-delay: 150ms; }
.content > .stack > :nth-child(n + 5), .content > .console > :nth-child(n + 5), .console-grid > :nth-child(n + 5),
.content > .mission-surface > .mc > :nth-child(n + 5), .content > .mission-surface > .stack > :nth-child(n + 5) { animation-delay: 200ms; }

/* A sticky block must never carry a transform: it creates a containing block
   and the stickiness silently stops working. */
.content > .stack > .subnav { animation: nx-fade var(--nx-d-slow) var(--nx-ease) both; }

/* --- data reveals --------------------------------------------------------
   A bar grows from the edge its value is read from; a line draws from its
   origin. Once, on arrival. */
@keyframes nx-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nx-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
/* The dash exists only while the line draws. A finished line carries no dash at
   all, because Chrome rasterises a pathLength-scaled dash as long as the whole
   path unreliably and leaves most of it unpainted. */
@keyframes nx-draw {
  from { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  99.9% { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
  to { stroke-dasharray: none; stroke-dashoffset: 0; }
}

/* --- evidence: the only loops in the system ------------------------------ */
/* A band of light crossing a working specialist's portrait, top to bottom. */
@keyframes nx-holo-scan {
  0% { transform: translateY(-110%); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(260%); opacity: 0; }
}
/* The ring around a working specialist on their own profile. */
@keyframes nx-holo-spin { to { transform: rotate(1turn); } }
/* The live marker's dot: connected, breathing slowly. */
@keyframes nx-live-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
/* A part of the page that live mode just replaced: a single soft light, once. */
@keyframes nx-live-flash {
  0% { opacity: 0.55; }
  100% { opacity: 1; }
}
@keyframes nx-pulse {
  0% { transform: scale(0.8); opacity: 0.8; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
@keyframes nx-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
@keyframes nx-sweep {
  from { transform: translateX(-100%); }
  to { transform: translateX(260%); }
}
@keyframes nx-spin { to { transform: rotate(360deg); } }
@keyframes nx-shimmer {
  from { background-position: 150% 0; }
  to { background-position: -50% 0; }
}

/* --- overlays ------------------------------------------------------------- */
@keyframes nx-overlay {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@keyframes nx-notice {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

/* --- scroll-linked chrome ------------------------------------------------ */
@keyframes nx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes nx-bar-surface {
  from { background-color: transparent; box-shadow: none; }
  to { background-color: color-mix(in srgb, var(--nx-ground) 82%, transparent); box-shadow: 0 1px 0 var(--nx-line); }
}

/* ==========================================================================
   L1.1 · REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .content > .stack > *,
  .content > .console > *,
  .console-grid > *,
  .content > .mission-surface > .mc > *,
  .content > .mission-surface > .stack > *,
  .nx-in,
  [data-nx-loop] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 60ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

@media (forced-colors: active) {
  .card, .console-panel, .pulse-strip, .mc-stage, .crew-station, .deck-bar, .sidebar {
    border: 1px solid CanvasText;
  }
}

/* ==========================================================================
   L2 · BASE
   ========================================================================== */

@font-face {
  font-family: "Geist";
  src: url("/_assets/fonts/geist.woff2?v=a369fcf5") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/_assets/fonts/geist-mono.woff2?v=fba8f577") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--nx-line-2) transparent;
  scrollbar-gutter: stable;
  /* An in-page link ("View what needs you") lands below the sticky bar, not
     under it. */
  scroll-padding-top: 96px;
}
html, body { min-height: 100%; }

body {
  margin: 0;
  background: var(--nx-ground);
  color: var(--nx-text);
  font-family: var(--nx-font);
  font-size: var(--nx-t-base);
  line-height: 1.5;
  font-feature-settings: "ss01" 0, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* The marker every server-composed Nex4r document carries on its <body>. Rules
   that must never leak into markup this platform did not compose (a sanitized
   email body, a content preview) hang from it. */
body.nexar-class {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--nx-ground);
  background-image: var(--nx-room-light);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--nx-text);
  font-family: var(--nx-font);
}

a { color: var(--nx-signal); text-decoration: none; }
a:hover { color: var(--nx-signal-hover); }

/* One focus treatment: a ring the colour of the ground, then the signal ring.
   It survives a filled button, a dark panel and a white one alike. */
:focus-visible {
  outline: 2px solid var(--nx-signal);
  outline-offset: 2px;
  border-radius: 6px;
}
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .palette-trigger:focus-visible {
  outline: none;
  box-shadow: var(--nx-focus);
}
:focus:not(:focus-visible) { outline: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--nx-font);
  font-weight: 600;
  color: var(--nx-text);
  text-wrap: balance;
}
h1 { font-size: var(--nx-t-3xl); line-height: 1.12; letter-spacing: -0.028em; }
h2 { font-size: var(--nx-t-lg); line-height: 1.3; letter-spacing: -0.012em; }
h3 { font-size: var(--nx-t-md); line-height: 1.35; letter-spacing: -0.008em; }
h4 { font-size: var(--nx-t-base); line-height: 1.4; }

p { margin: 0 0 var(--nx-3); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 600; }
code, pre, kbd, samp { font-family: var(--nx-mono); font-size: 0.92em; }
pre { margin: 0; overflow-x: auto; }
hr { border: 0; border-top: 1px solid var(--nx-line); margin: var(--nx-6) 0; }
img, svg, video { max-width: 100%; }
::selection { background: var(--nx-signal-soft); color: var(--nx-text); }

/* Prose lists inside a panel. Scoped, because navigation, the crew grid and the
   attention queue are lists too and have their own layout. */
.card-body ul:not(.plain):not(.plain-list):not(.cpc-skills),
.card-body ol:not(.plain):not(.plain-list) {
  margin: 0 0 var(--nx-3);
  padding-left: var(--nx-5);
}
.card-body li { margin-bottom: var(--nx-1); }
.card-body li::marker { color: var(--nx-text-3); }

/* Figures that are compared: tabular. */
.num, .fl-value, .metric-value, .readout-value, .signal .v, .exec-cell .v, .mission-signal .v,
.station-metric .v, .dc-count, .seg-value, table.data td.num, table.data th.num, .kv.figures dd,
.mail-when, .mail-count, .cal-daynum, .activity-item .when, .ca-when, .pagination .muted, .sp-value,
.score-ring .num, .stat .value, .project-meta b, .topo-node-value, .tenancy-figure {
  font-variant-numeric: tabular-nums;
}

.icon { flex: none; display: block; }

/* The hidden attribute always wins. Components set display (a .btn is
   inline-flex), which would otherwise quietly override it. */
[hidden] { display: none !important; }

/* The brand lockups. Both reverses ship and CSS picks one, so the right
   artwork is correct on first paint with no scripted theme probe. */
.nx-logo { display: inline-flex; align-items: center; min-width: 0; }
.nx-logo img { height: auto; max-width: 100%; }
.nx-logo .nx-logo-light { display: none; }
.nx-logo .nx-logo-dark { display: block; }
:root[data-theme="light"] .nx-logo .nx-logo-light { display: block; }
:root[data-theme="light"] .nx-logo .nx-logo-dark { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .nx-logo .nx-logo-light { display: block; }
  :root:not([data-theme="dark"]) .nx-logo .nx-logo-dark { display: none; }
}
.nx-mark { display: block; height: auto; flex: none; }

/* ==========================================================================
   L2.1 · UTILITIES
   These exist because the CSP forbids a style attribute, so a one-off property
   has nowhere else to live. Not the start of a utility framework.
   ========================================================================== */

.stack { display: flex; flex-direction: column; gap: var(--nx-5); min-width: 0; }
.stack.tight { gap: var(--nx-3); }
.stack.stack-sm { gap: var(--nx-3); }
.stack.loose { gap: var(--nx-7); }
.row { display: flex; gap: var(--nx-3); align-items: center; flex-wrap: wrap; min-width: 0; }
.row.tight { gap: var(--nx-2); }
.row.between { justify-content: space-between; }
.row.top { align-items: flex-start; }
.grow { flex: 1; min-width: 0; }
.flex-2 { flex: 2; min-width: 0; }
.right { margin-left: auto; }
.spacer { flex: 1; }
.center { text-align: center; }
.text-right { text-align: right; }

.gap { gap: var(--nx-3); }
.gap-xs { gap: var(--nx-1); }
.gap-sm { gap: 6px; }
.gap-md { gap: var(--nx-2); }
.gap-lg { gap: var(--nx-3); }
.gap-xl { gap: var(--nx-4); }
.wrap { flex-wrap: wrap; }
.nowrap-flex { flex-wrap: nowrap; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
.inline { display: inline; }
.inline-flex { display: inline-flex; }
.hidden { display: none; }

.m-0 { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: var(--nx-1); }
.mt-2 { margin-top: var(--nx-2); }
.mt-3 { margin-top: var(--nx-3); }
.mt-4 { margin-top: var(--nx-4); }
.mt-5 { margin-top: var(--nx-5); }
.mt-6 { margin-top: var(--nx-6); }
.mb-1 { margin-bottom: var(--nx-1); }
.mb-3 { margin-bottom: var(--nx-3); }
.mr-1 { margin-right: var(--nx-1); }
.ml-1 { margin-left: var(--nx-1); }
.pad-4 { padding: var(--nx-4); }
.section-gap { margin-top: var(--nx-8); }
.divider-top { border-top: 1px solid var(--nx-line); padding-top: var(--nx-4); margin-top: var(--nx-4); }

.w-full { width: 100%; }
.w-auto { width: auto; }
.w-70 { width: 70px; }
.w-80 { width: 80px; }
.w-90 { width: 90px; }
.w-120 { width: 120px; }
.w-140 { width: 140px; }
.w-150 { width: 150px; }
.min-w-120 { min-width: 120px; }
.min-w-130 { min-width: 130px; }
.min-w-160 { min-width: 160px; }
.min-w-170 { min-width: 170px; }
.min-w-180 { min-width: 180px; }
.min-w-200 { min-width: 200px; }
.min-w-220 { min-width: 220px; }
.truncate-min { min-width: 0; }
.icon-lg { width: 48px; height: 48px; }

.muted { color: var(--nx-text-3); }
.faint { color: var(--nx-text-3); }
.ok-mark { color: var(--nx-ok); }
.small { font-size: var(--nx-t-sm); }
.text-2xs { font-size: var(--nx-t-xs); }
.text-xs { font-size: var(--nx-t-xs); }
.text-sm { font-size: var(--nx-t-sm); }
.lede { color: var(--nx-text-2); font-size: var(--nx-t-md); line-height: 1.55; max-width: 68ch; }
.mono { font-family: var(--nx-mono); font-size: 13px; letter-spacing: -0.01em; }
.nowrap { white-space: nowrap; }
.prewrap { white-space: pre-wrap; }
.break-all { word-break: break-all; }
.truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plain, .plain-list { list-style: none; padding: 0; margin: 0; }
.flush { margin: 0; }
.figures { font-variant-numeric: tabular-nums; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
/* A skip link that is never visible is not a skip link. */
.sr-only:focus {
  position: fixed; top: var(--nx-3); left: var(--nx-3);
  width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; clip-path: none;
  padding: 10px var(--nx-4);
  background: var(--nx-elevated); color: var(--nx-text);
  border-radius: var(--nx-r-control);
  box-shadow: var(--nx-float);
  font-weight: 600; z-index: 400;
}

.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 5px;
  background: var(--nx-surface-3);
  box-shadow: inset 0 -1px 0 var(--nx-line-2);
  font-family: var(--nx-font);
  font-size: 11px; font-weight: 500;
  color: var(--nx-text-3);
  flex: none;
}

[data-copy] { cursor: pointer; }
[data-copy].is-copied { color: var(--nx-ok); }

.thumb {
  border-radius: var(--nx-r-control);
  object-fit: cover;
  display: block;
  background: var(--nx-inset);
}

@media print {
  .deck, .sidebar, .topbar, .page-actions, .filters, .pagination, .impersonation-bar, .palette-trigger, dialog { display: none !important; }
  .shell { display: block !important; }
  body, body.nexar-class { background: #fff; color: #000; }
  .content { padding: 0 !important; max-width: none !important; margin: 0 !important; }
  .card, .console-panel { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}

/* ==========================================================================
   L3 · FRAME
   ========================================================================== */

.shell { min-height: 100vh; min-height: 100dvh; }

/* The phone's navigation button and the drawer's close button exist in the
   markup at every width and are only shown where they do something. */
/* Qualified by .shell so the later .btn rule, which sets display, cannot win. */
.shell .nav-toggle, .shell .nav-close, .shell .nav-sheet-head { display: none; }

.nav-toggle {
  align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  padding: 0; border: 0;
  border-radius: var(--nx-r-control);
  background: transparent; color: var(--nx-text-2);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--nx-hover); color: var(--nx-text); }

/* ==========================================================================
   L3.1 · THE DECK (Control Center)
   ========================================================================== */

.deck {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: var(--nx-inset-gap) var(--nx-inset-gap) 0;
}
.deck-bar {
  position: relative;
  display: flex; align-items: center; gap: var(--nx-5);
  height: var(--nx-deck-h);
  padding: 0 var(--nx-3) 0 var(--nx-4);
  border-radius: var(--nx-r-chrome);
  background: color-mix(in srgb, var(--nx-chrome) 86%, transparent);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-float), var(--nx-panel-shadow);
  max-width: calc(var(--nx-content-max) + 64px);
  margin: 0 auto;
}
@supports not (backdrop-filter: blur(2px)) { .deck-bar { background: var(--nx-chrome); } }

/* The reading position through a long page, as a hairline along the deck's
   lower edge. Scroll-driven: no listener, no main-thread work. Absent in a
   browser without scroll timelines or with motion reduced, which is the
   correct fallback: the scrollbar already says where the reader is. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .deck-bar::after {
      content: "";
      position: absolute; left: 18px; right: 18px; bottom: 0;
      height: 2px; border-radius: 2px;
      background: var(--nx-signal);
      opacity: 0.55;
      transform-origin: left center;
      transform: scaleX(0);
      animation: nx-progress linear both;
      animation-timeline: scroll(root);
    }
  }
}

.deck-brand {
  display: inline-flex; align-items: center; gap: 10px;
  flex: none;
  color: var(--nx-text);
  font-weight: 600; font-size: var(--nx-t-base);
  letter-spacing: -0.01em;
  padding-right: var(--nx-4);
  border-right: 1px solid var(--nx-line);
  height: 28px;
}
.deck-brand:hover { color: var(--nx-text); }
.deck-title { white-space: nowrap; }

/* The destinations, as one line. */
.deck .nav {
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 auto; min-width: 0;
  /* Undo every user-agent popover default: this is in flow on a wide screen. */
  position: static; inset: auto; margin: 0; padding: 0; border: 0;
  width: auto; height: auto; overflow: visible;
  background: none; color: inherit;
}
.deck .nav-item {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px;
  border-radius: var(--nx-r-control);
  color: var(--nx-text-2);
  font-size: var(--nx-t-base); font-weight: 500;
  white-space: nowrap;
  transition: color var(--nx-d-fast) var(--nx-ease), background-color var(--nx-d-fast) var(--nx-ease);
}
.deck .nav-item .icon { display: none; }
.deck .nav-item:hover { color: var(--nx-text); background: var(--nx-hover); }
.deck .nav-item.active { color: var(--nx-text); background: var(--nx-selected); }
/* The lit destination: a short signal line under the label. It travels between
   items across a navigation (see motion.ts). */
.deck .nav-item.active::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: -12px;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--nx-signal);
}
.deck .nav-sep { width: 1px; height: 18px; margin: 0 8px; background: var(--nx-line-2); flex: none; }

.deck-tools { display: flex; align-items: center; gap: var(--nx-2); flex: none; margin-left: auto; }

/* ==========================================================================
   L3.2 · THE DOCK (tenant workspaces)
   ========================================================================== */

.shell.is-dock {
  display: grid;
  grid-template-columns: calc(var(--nx-dock-w) + var(--nx-inset-gap)) minmax(0, 1fr);
}
.shell.is-dock.is-collapsed { grid-template-columns: calc(var(--nx-dock-w-collapsed) + var(--nx-inset-gap)) minmax(0, 1fr); }

.shell.is-dock .sidebar {
  /* Undo the user-agent popover defaults: in flow on a wide screen. */
  position: sticky; inset: auto; top: var(--nx-inset-gap);
  margin: var(--nx-inset-gap) 0 var(--nx-inset-gap) var(--nx-inset-gap);
  width: auto; height: calc(100dvh - var(--nx-inset-gap) * 2);
  padding: var(--nx-3);
  border: 0; overflow: hidden;
  display: flex; flex-direction: column;
  border-radius: var(--nx-r-chrome);
  background: var(--nx-chrome);
  color: var(--nx-text);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
  z-index: 20;
}

.brand {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--nx-2);
  min-height: 44px;
  padding: 0 var(--nx-2) var(--nx-2);
}
.brand-home { display: inline-flex; align-items: center; min-width: 0; color: inherit; }
.brand-mark-only { display: none; }
.brand-words { margin: 0 var(--nx-2) var(--nx-3); font-size: var(--nx-t-xs); color: var(--nx-text-3); }

/* The workspace plate: whose data is this. */
.context-card {
  margin: var(--nx-1) 0 var(--nx-3);
  padding: var(--nx-3);
  border-radius: var(--nx-r-tile);
  background: var(--nx-surface-2);
  flex: none;
}
.context-card .label { font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.context-card .value {
  font-size: var(--nx-t-base); font-weight: 600; color: var(--nx-text);
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.context-card .value.secondary { font-weight: 500; color: var(--nx-text-2); }
.context-card .value + .label { margin-top: var(--nx-2); }

.shell.is-dock .nav {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  margin: 0 calc(var(--nx-1) * -1); padding: 0 var(--nx-1);
}
.shell.is-dock .nav::-webkit-scrollbar { display: none; }

.nav-group-label {
  padding: var(--nx-4) var(--nx-2) 6px;
  font-size: var(--nx-t-xs); font-weight: 500;
  color: var(--nx-text-3);
}
.shell.is-dock .nav-item {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  height: 38px; padding: 0 var(--nx-2) 0 10px;
  margin-bottom: 2px;
  border-radius: var(--nx-r-control);
  color: var(--nx-text-2);
  font-size: var(--nx-t-base); font-weight: 500;
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease);
}
.shell.is-dock .nav-item .icon { color: var(--nx-text-3); transition: color var(--nx-d-fast) var(--nx-ease); }
.shell.is-dock .nav-item:hover { background: var(--nx-hover); color: var(--nx-text); }
.shell.is-dock .nav-item:hover .icon { color: var(--nx-text-2); }
.shell.is-dock .nav-item.active { background: var(--nx-selected); color: var(--nx-text); }
.shell.is-dock .nav-item.active .icon { color: var(--nx-signal); }
.shell.is-dock .nav-item.active::before {
  content: "";
  position: absolute; left: -4px; top: 10px; bottom: 10px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--nx-signal);
}
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item .badge { margin-left: auto; }

.rail-footer { padding: var(--nx-3) var(--nx-2) var(--nx-1); font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.sidebar-footer { padding-top: var(--nx-3); margin-top: var(--nx-2); border-top: 1px solid var(--nx-line); flex: none; }

/* --- the collapsed dock -------------------------------------------------- */
.shell.is-collapsed .brand { justify-content: center; padding-inline: 0; }
.shell.is-collapsed .brand .nx-logo,
.shell.is-collapsed .brand-words,
.shell.is-collapsed .context-card,
.shell.is-collapsed .nav-group-label,
.shell.is-collapsed .rail-footer,
.shell.is-collapsed .nav-label,
.shell.is-collapsed .nav-item .badge,
.shell.is-collapsed .sidebar-user .who { display: none; }
.shell.is-collapsed .brand-mark-only { display: flex; }
.shell.is-collapsed .nav-item { justify-content: center; padding: 0; }
.shell.is-collapsed .sidebar-user { flex-direction: column; }
.shell.is-collapsed .nav-item::after {
  content: attr(data-label);
  position: absolute; left: calc(100% + 14px); top: 50%;
  transform: translate(-4px, -50%);
  padding: 6px 10px;
  border-radius: var(--nx-r-control);
  background: var(--nx-elevated); color: var(--nx-text);
  box-shadow: var(--nx-float);
  font-size: var(--nx-t-sm); font-weight: 500; white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 60;
  transition: opacity var(--nx-d-fast) var(--nx-ease), transform var(--nx-d-fast) var(--nx-ease);
}
.shell.is-collapsed .nav-item:hover::after,
.shell.is-collapsed .nav-item:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

/* --- the identity -------------------------------------------------------- */
.sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar-user .who { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.sidebar-user .name {
  font-size: var(--nx-t-sm); font-weight: 600; color: var(--nx-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user .mail {
  font-size: var(--nx-t-xs); color: var(--nx-text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.avatar {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--nx-r-full);
  background: var(--nx-surface-3);
  color: var(--nx-text);
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px var(--nx-line-2);
}
.avatar.lg { width: 40px; height: 40px; font-size: 14px; }

.sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; padding: 0;
  border: 0; border-radius: var(--nx-r-control);
  background: transparent; color: var(--nx-text-3);
  cursor: pointer;
  transition: color var(--nx-d-fast) var(--nx-ease), background-color var(--nx-d-fast) var(--nx-ease);
}
.sidebar-toggle:hover { color: var(--nx-text); background: var(--nx-hover); }

.topbar-identity { position: relative; flex: none; }
.topbar-identity > summary {
  display: flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 10px 0 5px;
  border-radius: var(--nx-r-full);
  cursor: pointer; list-style: none;
  transition: background-color var(--nx-d-fast) var(--nx-ease);
}
.topbar-identity > summary::-webkit-details-marker { display: none; }
.topbar-identity > summary::marker { content: ""; }
.topbar-identity > summary:hover,
.topbar-identity[open] > summary { background: var(--nx-hover); }
.topbar-identity .sidebar-user { max-width: 200px; }
.topbar-identity .ti-caret { color: var(--nx-text-3); transition: transform var(--nx-d) var(--nx-ease-out); }
.topbar-identity[open] .ti-caret { transform: rotate(180deg); }
.topbar-identity .ti-menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  z-index: 80;
  width: 260px;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  border-radius: var(--nx-r-panel);
  background: var(--nx-elevated);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-float-lg), var(--nx-panel-shadow);
  animation: nx-overlay var(--nx-d) var(--nx-ease-out) both;
}
.topbar-identity .ti-head { padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--nx-line); }
.topbar-identity .ti-name { display: block; font-weight: 600; }
.topbar-identity .ti-mail { margin: 2px 0 0; font-size: var(--nx-t-sm); color: var(--nx-text-3); overflow-wrap: anywhere; }
.topbar-identity .ti-menu .btn { justify-content: flex-start; width: 100%; height: 36px; }
.topbar-identity .ti-menu form { display: block; }

/* The theme switch: one segmented control of three. The pressed choice is a
   raised tile, not a colour, so it reads the same in both schemes. */
.theme-switch { display: flex; align-items: center; gap: var(--nx-3); min-width: 0; }
.theme-switch[hidden] { display: none; }
.theme-switch-label { font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.theme-switch-options {
  display: inline-flex; gap: 2px; padding: 3px;
  border-radius: var(--nx-r-control);
  background: var(--nx-inset);
  box-shadow: inset 0 0 0 1px var(--nx-line);
}
.theme-choice {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 9px;
  border: 0; border-radius: 6px;
  background: transparent; color: var(--nx-text-3);
  font: inherit; font-size: var(--nx-t-sm); font-weight: 500;
  cursor: pointer;
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease);
}
.theme-choice:hover { color: var(--nx-text); }
.theme-choice[aria-pressed="true"] {
  background: var(--nx-surface-3); color: var(--nx-text);
  box-shadow: inset 0 1px 0 var(--nx-edge-strong), 0 1px 2px rgba(0, 0, 0, 0.18);
}
.theme-choice:focus-visible { outline: none; box-shadow: var(--nx-focus); }
.topbar-identity .theme-switch { justify-content: space-between; padding: 4px 6px 8px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--nx-line); }
.topbar-identity .theme-choice span { display: none; }
.topbar-identity .theme-choice { width: 34px; padding: 0; justify-content: center; }
.account-topbar .theme-switch-label { display: none; }
.theme-switch-options { flex: none; }
/* On a phone the account bar has room for the way back and the way out, so the
   switch takes its own row beneath them, labelled, rather than squeezing both. */
@media (max-width: 560px) {
  .account-page .account-topbar { flex-wrap: wrap; height: auto; row-gap: var(--nx-2); padding-block: var(--nx-3); }
  .account-topbar .nx-logo { display: none; }
  .account-topbar .theme-switch { order: 3; flex-basis: 100%; justify-content: space-between; padding-inline: var(--nx-3); }
  .account-topbar .theme-switch-label { display: inline; }
}

/* ==========================================================================
   L3.3 · THE MAIN COLUMN
   ========================================================================== */

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 15;
  display: flex; align-items: center; gap: var(--nx-3);
  min-height: calc(var(--nx-topbar-h) + var(--nx-inset-gap));
  padding: var(--nx-inset-gap) var(--nx-6) 0 var(--nx-3);
}
/* The bar has no surface at the top of the page and gains one as content
   scrolls under it. Scroll-driven, so there is no listener. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .topbar {
      animation: nx-bar-surface linear both;
      animation-timeline: scroll(root);
      animation-range: 0 56px;
      backdrop-filter: blur(16px) saturate(1.3);
    }
  }
}
/* With motion reduced the surface is simply there, rather than fading in. */
@media (prefers-reduced-motion: reduce) {
  .topbar {
    background-color: color-mix(in srgb, var(--nx-ground) 92%, transparent);
    box-shadow: 0 1px 0 var(--nx-line);
  }
}

.crumbs {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; flex-wrap: wrap;
  font-size: var(--nx-t-sm); color: var(--nx-text-3);
}
.crumbs a { color: var(--nx-text-3); }
.crumbs a:hover { color: var(--nx-text); }
.crumbs strong { color: var(--nx-text); font-weight: 600; }
.crumbs .sep { color: var(--nx-text-4); display: inline-flex; }

.content {
  width: 100%;
  min-width: 0;
  max-width: var(--nx-content-max);
}
.shell.is-deck .content { margin: 0 auto; padding: var(--nx-7) var(--nx-7) var(--nx-10); }
.shell.is-dock .content { padding: var(--nx-4) var(--nx-6) var(--nx-10) var(--nx-4); }
.page-trail { margin: 0 0 var(--nx-3); }

/* The palette trigger. */
.palette-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  height: 38px; min-width: 220px;
  padding: 0 7px 0 12px;
  border: 0; border-radius: var(--nx-r-control);
  background: var(--nx-surface-2);
  box-shadow: inset 0 0 0 1px var(--nx-line);
  color: var(--nx-text-3);
  font: inherit; font-size: var(--nx-t-sm);
  cursor: pointer; text-align: left;
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease), box-shadow var(--nx-d-fast) var(--nx-ease);
}
.palette-trigger:hover { background: var(--nx-surface-3); color: var(--nx-text-2); box-shadow: inset 0 0 0 1px var(--nx-line-2); }
.palette-trigger .label { flex: 1; }

/* The banner shown while a Nex4r admin is inside a tenant. The loudest bar the
   platform ever draws: the fact it carries is the one thing a tenant must never
   miss. */
.impersonation-bar {
  display: flex; align-items: center; gap: var(--nx-3); flex-wrap: wrap;
  margin: var(--nx-inset-gap) var(--nx-6) 0 var(--nx-3);
  padding: 10px 10px 10px var(--nx-4);
  border-radius: var(--nx-r-panel);
  background: var(--nx-warn-soft);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-warn) 30%, transparent);
  color: var(--nx-text);
  font-size: var(--nx-t-sm);
}
.impersonation-bar > .icon { color: var(--nx-warn); }
.shell.is-deck .impersonation-bar { max-width: var(--nx-content-max); margin: var(--nx-4) auto 0; width: calc(100% - var(--nx-7) * 2); }

/* ==========================================================================
   L3.4 · THE COMMAND PALETTE
   ========================================================================== */

dialog.palette {
  width: min(640px, calc(100% - 32px));
  margin: 12vh auto auto;
  padding: 0; border: 0;
  border-radius: var(--nx-r-chrome);
  background: var(--nx-elevated);
  color: var(--nx-text);
  box-shadow: inset 0 1px 0 var(--nx-edge-strong), var(--nx-float-lg), var(--nx-panel-shadow);
  overflow: hidden;
}
dialog.palette[open] { animation: nx-overlay var(--nx-d) var(--nx-ease-out) both; }
dialog.palette::backdrop { background: rgba(4, 5, 8, 0.55); backdrop-filter: blur(6px); }
.palette-head {
  display: flex; align-items: center; gap: var(--nx-3);
  padding: 0 var(--nx-4);
  height: 60px;
  border-bottom: 1px solid var(--nx-line);
}
.palette-head > .icon { color: var(--nx-text-3); }
.palette-head input {
  flex: 1; min-width: 0;
  height: 100%; padding: 0;
  border: 0; background: transparent; box-shadow: none;
  font: inherit; font-size: var(--nx-t-lg);
  color: var(--nx-text);
}
.palette-head input:focus, .palette-head input:focus-visible { outline: none; box-shadow: none; background: transparent; }
.palette-list { max-height: min(420px, 50vh); overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.palette-item {
  display: flex; align-items: center; gap: var(--nx-3);
  height: 42px; padding: 0 var(--nx-3);
  border-radius: var(--nx-r-control);
  color: var(--nx-text-2);
}
.palette-item:hover { color: var(--nx-text); }
.palette-item.is-active { background: var(--nx-selected); color: var(--nx-text); }
.palette-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.palette-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.palette-group { flex: none; font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.palette-item.is-active .palette-group { color: var(--nx-text-2); }
.palette-empty { margin: 0; padding: var(--nx-7) var(--nx-4); text-align: center; color: var(--nx-text-3); }
.palette-foot {
  display: flex; gap: var(--nx-5); align-items: center;
  padding: 10px var(--nx-4);
  border-top: 1px solid var(--nx-line);
  font-size: var(--nx-t-xs); color: var(--nx-text-3);
}
.palette-foot .k { display: inline-flex; align-items: center; gap: 6px; }

/* ==========================================================================
   L3.5 · DIALOGS
   ========================================================================== */

dialog.confirm {
  width: min(440px, calc(100% - 32px));
  padding: 0; border: 0;
  border-radius: var(--nx-r-chrome);
  background: var(--nx-elevated);
  color: var(--nx-text);
  box-shadow: inset 0 1px 0 var(--nx-edge-strong), var(--nx-float-lg), var(--nx-panel-shadow);
  overflow: hidden;
}
dialog.confirm[open] { animation: nx-overlay var(--nx-d) var(--nx-ease-out) both; }
dialog.confirm::backdrop { background: rgba(4, 5, 8, 0.6); backdrop-filter: blur(4px); }
dialog.confirm .body { padding: var(--nx-6) var(--nx-6) var(--nx-4); }
dialog.confirm h2 { font-size: var(--nx-t-xl); margin-bottom: var(--nx-2); }
dialog.confirm p { color: var(--nx-text-2); margin: 0; }
dialog.confirm .foot { display: flex; justify-content: flex-end; gap: var(--nx-2); padding: var(--nx-4) var(--nx-6) var(--nx-6); }

/* ==========================================================================
   L3.6 · SIGN-IN
   ========================================================================== */

.auth-page {
  min-height: 100vh; min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: var(--nx-inset-gap);
  gap: var(--nx-inset-gap);
}
@media (min-width: 940px) {
  .auth-page { grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr); }
}

/* The office, as the one real image on the first screen anyone sees. Graded
   into obsidian on the left, where the words are, so no sentence is ever read
   against the photograph. Always the dark render: this panel is dark in both
   schemes. */
.auth-brand {
  display: none;
  position: relative; overflow: hidden;
  flex-direction: column; justify-content: space-between;
  padding: var(--nx-8) var(--nx-9);
  border-radius: var(--nx-r-chrome);
  background-color: #0a0c0f;
  background-image:
    linear-gradient(90deg, rgba(8, 9, 11, 0.96) 0%, rgba(8, 9, 11, 0.82) 38%, rgba(8, 9, 11, 0.35) 72%, rgba(8, 9, 11, 0.15) 100%),
    linear-gradient(0deg, rgba(8, 9, 11, 0.85) 0%, rgba(8, 9, 11, 0) 40%),
    var(--nx-office-dark-image);
  background-size: cover, cover, cover;
  background-position: center, center, 70% 30%;
  color: #eceff3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@media (min-width: 940px) { .auth-brand { display: flex; } }
.auth-brand .nx-logo .nx-logo-light { display: none; }
.auth-brand .nx-logo .nx-logo-dark { display: block; }
/* Two lines at most: sized with the column, not against it. */
.auth-brand .pitch { max-width: 600px; }
.auth-brand .pitch h2 {
  color: #ffffff;
  font-size: clamp(28px, 2.7vw, 40px); line-height: 1.1;
  letter-spacing: -0.03em; font-weight: 600;
}
.auth-brand .pitch p { margin: var(--nx-4) 0 0; color: #b3bbc6; font-size: var(--nx-t-lg); max-width: 36ch; }
.auth-brand .tagline { margin: 0; color: #8c95a2; font-size: var(--nx-t-sm); }

.auth-panel {
  display: flex; align-items: center; justify-content: center;
  padding: var(--nx-8) var(--nx-6);
}
.auth-card { width: 100%; max-width: 380px; animation: nx-rise var(--nx-d-enter) var(--nx-ease-out) both; }
.auth-card.wide { max-width: 560px; }
.auth-page > .auth-card { place-self: center; padding: var(--nx-6); }
.auth-card h1 { font-size: var(--nx-t-2xl); letter-spacing: -0.022em; margin-bottom: var(--nx-2); }
.auth-card .lede { font-size: var(--nx-t-base); margin: 0 0 var(--nx-6); }
.auth-card .brand { padding: 0 0 var(--nx-6); }
.auth-card .btn-primary { width: 100%; height: 42px; }
.auth-panel .auth-mark { display: flex; margin-bottom: var(--nx-7); }
@media (min-width: 940px) { .auth-panel .auth-mark { display: none; } }
.auth-foot { margin-top: var(--nx-5); font-size: var(--nx-t-sm); color: var(--nx-text-3); text-align: center; text-wrap: balance; }

/* A company the reader can enter. */
.workspace {
  display: block;
  padding: var(--nx-4) var(--nx-5);
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
  color: var(--nx-text);
  transition: background-color var(--nx-d-fast) var(--nx-ease), transform var(--nx-d) var(--nx-ease-out);
}
a.workspace:hover { background: var(--nx-surface-2); color: var(--nx-text); transform: translateY(-1px); }
.workspace .top { display: flex; align-items: center; gap: var(--nx-3); margin-bottom: 4px; }
.workspace .company { flex: 1; min-width: 0; font-size: var(--nx-t-md); font-weight: 600; letter-spacing: -0.01em; }
.workspace .products { display: flex; gap: var(--nx-2); flex-wrap: wrap; }
.workspace .note { margin: 0; color: var(--nx-text-3); font-size: var(--nx-t-sm); }

/* --- error --------------------------------------------------------------- */
.error-page { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--nx-6); }
.error-card {
  width: 100%; max-width: 480px;
  padding: var(--nx-8) var(--nx-7);
  border-radius: var(--nx-r-chrome);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-float), var(--nx-panel-shadow);
  text-align: center;
  animation: nx-rise var(--nx-d-enter) var(--nx-ease-out) both;
}
.error-code { margin: 0 0 var(--nx-2); font-size: var(--nx-t-4xl); font-weight: 600; letter-spacing: -0.04em; color: var(--nx-text-3); line-height: 1; }
.error-card h1 { font-size: var(--nx-t-xl); margin-bottom: var(--nx-5); }

/* --- account ------------------------------------------------------------- */
.account-page { min-height: 100vh; min-height: 100dvh; padding: var(--nx-inset-gap) var(--nx-6) var(--nx-10); }
.account-topbar {
  display: flex; align-items: center; gap: var(--nx-3);
  max-width: 760px; margin: 0 auto;
  height: var(--nx-deck-h); padding: 0 var(--nx-2);
}
.account-topbar .spacer { flex: 1; }
.account-shell { max-width: 760px; margin: var(--nx-6) auto 0; }

.recovery-codes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--nx-2); margin: var(--nx-4) 0; }
.recovery-codes code {
  display: block; padding: 10px;
  border-radius: var(--nx-r-control);
  background: var(--nx-inset);
  font-size: var(--nx-t-base); text-align: center; letter-spacing: 0.06em;
}
.qr-frame { display: inline-block; padding: var(--nx-3); border-radius: var(--nx-r-tile); background: #ffffff; }
.secret-manual {
  padding: var(--nx-3);
  border-radius: var(--nx-r-control);
  background: var(--nx-inset);
  font-family: var(--nx-mono); font-size: var(--nx-t-md); letter-spacing: 0.1em;
  text-align: center; word-break: break-all;
}

/* ==========================================================================
   L3.7 · RESPONSIVE
   ========================================================================== */

/* 1024-1279: the deck keeps one line by giving up the palette's label. */
@media (max-width: 1279px) {
  .palette-trigger { min-width: 0; }
  .shell.is-deck .content { padding: var(--nx-6) var(--nx-6) var(--nx-10); }
}
@media (max-width: 1180px) {
  .deck .palette-trigger .label, .deck .palette-trigger .kbd { display: none; }
  .deck .palette-trigger { width: 38px; padding: 0; justify-content: center; }
  .deck .topbar-identity .who { display: none; }
  .deck-bar { gap: var(--nx-3); }
}

/* Tablet: the dock collapses to icons and stays a dock. */
@media (max-width: 1023px) and (min-width: 768px) {
  .shell.is-dock { grid-template-columns: calc(var(--nx-dock-w-collapsed) + var(--nx-inset-gap)) minmax(0, 1fr); }
  .shell.is-dock .brand { justify-content: center; padding-inline: 0; }
  .shell.is-dock .brand .nx-logo,
  .shell.is-dock .brand-words,
  .shell.is-dock .context-card,
  .shell.is-dock .nav-group-label,
  .shell.is-dock .rail-footer,
  .shell.is-dock .nav-label,
  .shell.is-dock .nav-item .badge,
  .shell.is-dock .sidebar-footer .who { display: none; }
  .shell.is-dock .brand-mark-only { display: flex; }
  .shell.is-dock .nav-item { justify-content: center; padding: 0; }
  .shell.is-dock .sidebar-user { flex-direction: column; }
  .sidebar-toggle { display: none; }
  .deck .nav-item { padding: 0 9px; }
  .deck-brand .deck-title { display: none; }
  .deck-brand { padding-right: var(--nx-3); }
}
/* A narrow tablet still carries all seven destinations on one line, set a
   step smaller, rather than letting the last one run under the search. */
@media (max-width: 900px) and (min-width: 768px) {
  .deck .nav-item { padding: 0 7px; font-size: var(--nx-t-sm); }
  .deck .nav-item.active::after { left: 7px; right: 7px; }
  .deck .nav-sep { margin: 0 4px; }
}

/* Phone: the navigation becomes a drawer, opened by a native popover button. */
@media (max-width: 767px) {
  .shell .nav-toggle { display: inline-flex; }
  .sidebar-toggle { display: none; }
  .deck { padding: 8px 8px 0; }
  .deck-bar { height: 56px; padding: 0 6px; gap: 4px; }
  .deck-brand { border-right: 0; padding-right: 0; }
  .deck .palette-trigger .label, .deck .palette-trigger .kbd { display: none; }
  .deck .palette-trigger { width: 40px; padding: 0; justify-content: center; background: transparent; box-shadow: none; }
  .deck .topbar-identity .who, .deck .topbar-identity .ti-caret { display: none; }
  .deck-bar::after { display: none; }

  .shell.is-dock { display: block; }
  .topbar { padding: 8px 8px 0; gap: 4px; min-height: 64px; }
  .topbar .crumbs a, .topbar .crumbs .sep { display: none; }
  .topbar .palette-trigger .label, .topbar .palette-trigger .kbd { display: none; }
  .topbar .palette-trigger { width: 40px; min-width: 0; padding: 0; justify-content: center; background: transparent; box-shadow: none; }
  .topbar .topbar-identity .who, .topbar .topbar-identity .ti-caret { display: none; }
  .shell.is-deck .content { padding: var(--nx-5) var(--nx-4) var(--nx-9); }
  .shell.is-dock .content { padding: var(--nx-3) var(--nx-4) var(--nx-9); }
  .impersonation-bar, .shell.is-deck .impersonation-bar { margin: var(--nx-2) var(--nx-2) 0; width: auto; }
  h1 { font-size: var(--nx-t-2xl); }
  .auth-page { padding: 0; }
  .auth-panel { padding: var(--nx-7) var(--nx-5); }
  .account-page { padding: var(--nx-2) var(--nx-4) var(--nx-9); }
  .error-card { padding: var(--nx-7) var(--nx-5); }
}

/* The drawer itself, only where popovers exist. */
@supports selector(:popover-open) {
  @media (max-width: 767px) {
    .deck .nav:not(:popover-open),
    .shell.is-dock .sidebar:not(:popover-open) { display: none; }

    .deck .nav:popover-open,
    .shell.is-dock .sidebar:popover-open {
      position: fixed;
      inset: 8px auto 8px 8px;
      width: min(320px, calc(100vw - 48px));
      height: auto; max-height: none;
      margin: 0; padding: var(--nx-3);
      display: flex; flex-direction: column; gap: 2px;
      border: 0; border-radius: var(--nx-r-chrome);
      background: var(--nx-chrome); color: var(--nx-text);
      box-shadow: inset 0 1px 0 var(--nx-edge-strong), var(--nx-float-lg);
      overflow-y: auto;
      opacity: 1; transform: none;
      transition: opacity var(--nx-d) var(--nx-ease-out), transform var(--nx-d-slow) var(--nx-ease-out), display var(--nx-d-slow) allow-discrete, overlay var(--nx-d-slow) allow-discrete;
    }
    @starting-style {
      .deck .nav:popover-open,
      .shell.is-dock .sidebar:popover-open { opacity: 0; transform: translateX(-16px); }
    }
    .deck .nav::backdrop, .shell.is-dock .sidebar::backdrop { background: rgba(4, 5, 8, 0.55); backdrop-filter: blur(3px); }

    .deck .nav:popover-open .nav-sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0 var(--nx-3) var(--nx-2); margin-bottom: var(--nx-2); border-bottom: 1px solid var(--nx-line); font-weight: 600; }
    .shell.is-dock .sidebar:popover-open .nav-close { display: inline-flex; }

    .deck .nav:popover-open .nav-item {
      display: flex; height: 46px; padding: 0 var(--nx-3); gap: 14px;
      font-size: var(--nx-t-md);
    }
    .deck .nav:popover-open .nav-item .icon { display: block; color: var(--nx-text-3); }
    .deck .nav:popover-open .nav-item.active .icon { color: var(--nx-signal); }
    .deck .nav:popover-open .nav-item.active::after { display: none; }
    .deck .nav:popover-open .nav-sep { width: auto; height: 1px; margin: 6px var(--nx-2); }
    .shell.is-dock .sidebar:popover-open .nav-item { height: 46px; font-size: var(--nx-t-md); }
    .shell.is-dock .sidebar:popover-open .nav { overflow: visible; }
  }
}

/* ==========================================================================
   L4 · SURFACES
   ========================================================================== */

/* --- page header ---------------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-end; gap: var(--nx-5); flex-wrap: wrap;
  margin-bottom: var(--nx-7);
}
.page-head .titles { flex: 1 1 360px; min-width: 0; }
.page-head h1 { letter-spacing: -0.03em; }
.page-head .lede { margin: var(--nx-2) 0 0; }
.page-eyebrow { margin: 0 0 var(--nx-2); font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.page-actions { display: flex; gap: var(--nx-2); flex-wrap: wrap; align-items: center; }
.page-head.flush { margin-bottom: var(--nx-5); }

/* --- the panel -------------------------------------------------------------- */
.card, .nx-panel {
  position: relative;
  min-width: 0;
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.card-head {
  display: flex; align-items: center; gap: var(--nx-3); flex-wrap: wrap;
  min-height: 56px;
  padding: var(--nx-4) var(--nx-5) var(--nx-2);
}
.card-head h2 { flex: 1; min-width: 0; font-size: var(--nx-t-md); font-weight: 600; letter-spacing: -0.01em; }
.card-head .spacer { flex: 1; }
.card-body { padding: var(--nx-3) var(--nx-5) var(--nx-5); }
.card-head + .card-body { padding-top: var(--nx-2); }
.card-body.tight { padding: 0 0 var(--nx-2); }
.card-head + .card-body.tight { padding-top: 0; }
.card-foot {
  display: flex; gap: var(--nx-2); align-items: center; flex-wrap: wrap;
  padding: var(--nx-3) var(--nx-5);
  border-top: 1px solid var(--nx-line);
}

/* A panel that leads a screen. */
.card.is-primary { background: var(--nx-surface-2); }
/* A panel about a problem says so along its top edge, in its own colour. */
.card.tone-danger { box-shadow: inset 0 2px 0 var(--nx-danger), var(--nx-panel-shadow); }
.card.tone-warn { box-shadow: inset 0 2px 0 var(--nx-warn), var(--nx-panel-shadow); }

.nx-well { padding: var(--nx-4); border-radius: var(--nx-r-tile); background: var(--nx-inset); }

/* --- section heading --------------------------------------------------------- */
.section-head {
  display: flex; align-items: baseline; gap: var(--nx-3); flex-wrap: wrap;
  margin: 0 0 var(--nx-3);
  min-width: 0;
}
.section-head h2 { font-size: var(--nx-t-lg); font-weight: 600; letter-spacing: -0.015em; }
.section-head .sub { font-size: var(--nx-t-sm); color: var(--nx-text-3); min-width: 0; }
.section-head .actions, .section-head .right { display: flex; gap: var(--nx-2); align-items: center; margin-left: auto; align-self: center; }

/* --- in-page section nav --------------------------------------------------- */
.subnav {
  position: sticky; top: calc(var(--nx-deck-h) + var(--nx-inset-gap) + 8px); z-index: 8;
  display: flex; gap: 4px; flex-wrap: wrap;
  margin: 0 0 var(--nx-6);
  padding: 6px;
  border-radius: var(--nx-r-panel);
  background: color-mix(in srgb, var(--nx-surface) 88%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.shell.is-dock .subnav { top: calc(var(--nx-topbar-h) + var(--nx-inset-gap) + 4px); }
.subnav a {
  padding: 6px 12px;
  border-radius: var(--nx-r-control);
  font-size: var(--nx-t-sm); font-weight: 500;
  color: var(--nx-text-2);
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease);
}
.subnav a:hover { background: var(--nx-hover); color: var(--nx-text); }
.anchor-target { scroll-margin-top: 140px; }

/* --- grids ----------------------------------------------------------------- */
.grid { display: grid; gap: var(--nx-4); min-width: 0; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); align-items: start; }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: start; }
.grid.stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.grid-cards { display: grid; gap: var(--nx-4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.columns { display: grid; gap: var(--nx-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .columns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.columns > * { min-width: 0; }
.split { display: grid; gap: var(--nx-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1120px) {
  .split { grid-template-columns: minmax(0, 1.8fr) minmax(300px, 1fr); }
  .split.rail-left { grid-template-columns: minmax(300px, 1fr) minmax(0, 1.8fr); }
}
.split > * { min-width: 0; }

/* ==========================================================================
   L4.1 · THE STAGE
   The operational header of a product's overview. One lit surface: a soft
   signal light from its top-left corner, the title, and the figures the
   product is about, set as large numbers rather than as tiles.
   ========================================================================== */

.command-header {
  position: relative; overflow: hidden;
  margin-bottom: var(--nx-6);
  padding: var(--nx-7) var(--nx-7) var(--nx-6);
  border-radius: var(--nx-r-chrome);
  background-color: var(--nx-surface);
  background-image: radial-gradient(760px 260px at 0% 0%, var(--nx-signal-soft), transparent 70%);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.command-top { display: flex; align-items: flex-start; gap: var(--nx-5); flex-wrap: wrap; }
.command-titles { flex: 1 1 360px; min-width: 0; }
.command-eyebrow { margin-bottom: var(--nx-2); font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.command-header h1 { font-size: var(--nx-t-3xl); letter-spacing: -0.03em; }
.command-header .lede { margin: var(--nx-2) 0 0; }
.command-header .page-actions { flex: none; }

.command-signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--nx-5) var(--nx-6);
  margin-top: var(--nx-7);
}
.signal { min-width: 0; }
.signal a { display: block; color: inherit; border-radius: var(--nx-r-control); }
.signal .k { display: block; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.signal .v {
  display: block; margin-top: 2px;
  font-size: var(--nx-t-3xl); font-weight: 600; line-height: 1.1;
  letter-spacing: -0.035em; color: var(--nx-text);
  transition: color var(--nx-d-fast) var(--nx-ease);
}
.signal .n { display: block; margin-top: 2px; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.signal a:hover .v { color: var(--nx-signal); }

/* ==========================================================================
   L4.2 · PRODUCT PLATES
   ========================================================================== */

/* Every plate in a row is the same size, and every plate's parts sit at the
   same height: the name is one line, the description is held to four lines
   (the full text is on the product page), and the figures and actions are
   pinned to the bottom. A long description can no longer push one card out of
   line with its neighbours. */
.project-card {
  display: flex; flex-direction: column; gap: var(--nx-3);
  align-self: stretch; height: 100%;
  padding: var(--nx-5);
  transition: background-color var(--nx-d) var(--nx-ease), transform var(--nx-d) var(--nx-ease-out);
}
.project-card:hover { background: var(--nx-surface-2); }
.project-card .top { display: flex; gap: var(--nx-3); align-items: flex-start; }
.project-card .ident { display: block; flex: 1; min-width: 0; }
.project-card .ident .mono { margin-top: 2px; font-size: 12px; }
.project-icon {
  display: grid; place-items: center;
  width: 40px; height: 40px; flex: none;
  border-radius: var(--nx-r-tile);
  background: var(--nx-surface-3);
  color: var(--nx-signal);
}
.project-card .name { font-size: var(--nx-t-md); font-weight: 600; letter-spacing: -0.012em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-card .desc {
  margin: 0; color: var(--nx-text-2);
  line-height: 1.5; min-height: 6em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;
}
.project-meta { display: flex; gap: var(--nx-4); flex-wrap: wrap; align-items: center; min-height: 26px; margin-top: auto; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.project-meta b { color: var(--nx-text); font-weight: 600; }
.project-card .actions { display: flex; gap: var(--nx-2); padding-top: var(--nx-1); flex-wrap: wrap; }
.company { min-width: 0; }

/* --- quick actions --------------------------------------------------------- */
.quick-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--nx-2); }
.quick-action {
  display: flex; align-items: center; gap: var(--nx-3);
  min-width: 0; height: 48px; padding: 0 var(--nx-4);
  border-radius: var(--nx-r-tile);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
  color: var(--nx-text);
  font-weight: 500;
  transition: background-color var(--nx-d-fast) var(--nx-ease), transform var(--nx-d) var(--nx-ease-out);
}
.quick-action:hover { background: var(--nx-surface-2); color: var(--nx-text); transform: translateY(-1px); }
.quick-action .icon { color: var(--nx-signal); }
.quick-action span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   L4.3 · EMPTY, LOADING
   ========================================================================== */

.empty { padding: var(--nx-9) var(--nx-6); text-align: center; color: var(--nx-text-2); }
.empty-mark {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  margin: 0 auto var(--nx-4);
  border-radius: var(--nx-r-tile);
  background: var(--nx-surface-3);
  color: var(--nx-text-3);
}
.empty h3 { margin-bottom: 6px; font-size: var(--nx-t-lg); }
.empty p { max-width: 48ch; margin: 0 auto var(--nx-5); }
.empty .actions, .empty .row { justify-content: center; }

.skeleton {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(100deg, var(--nx-surface-2) 30%, var(--nx-surface-3) 50%, var(--nx-surface-2) 70%);
  background-size: 250% 100%;
  animation: nx-shimmer 1.6s var(--nx-ease-inout) infinite;
}
.skeleton + .skeleton { margin-top: var(--nx-2); }
.skeleton.w-60 { width: 60%; }
.skeleton.w-40 { width: 40%; }
.skeleton.tall { height: 28px; }

@media (max-width: 767px) {
  .page-head { margin-bottom: var(--nx-5); align-items: flex-start; }
  .page-actions { width: 100%; }
  .command-header { padding: var(--nx-5); border-radius: var(--nx-r-panel); }
  .command-header h1 { font-size: var(--nx-t-2xl); }
  .command-signals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-4); margin-top: var(--nx-5); }
  .signal .v { font-size: var(--nx-t-2xl); }
  .card-head { padding: var(--nx-4) var(--nx-4) var(--nx-2); }
  .card-body { padding: var(--nx-2) var(--nx-4) var(--nx-4); }
  .card-foot { padding: var(--nx-3) var(--nx-4); }
  .empty { padding: var(--nx-7) var(--nx-4); }
  .subnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
}

/* ==========================================================================
   L5 · CONTROLS
   ========================================================================== */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 36px; padding: 0 14px;
  border: 0; border-radius: var(--nx-r-control);
  background: var(--nx-surface-2);
  color: var(--nx-text);
  font: inherit; font-size: var(--nx-t-base); font-weight: 500; line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease),
              box-shadow var(--nx-d-fast) var(--nx-ease), transform var(--nx-d-fast) var(--nx-ease);
}
.btn:active { transform: scale(0.98); }
.btn .icon { flex: none; }

.btn-primary {
  background: var(--nx-signal-fill);
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover { background: var(--nx-signal-fill-hover); color: #ffffff; }

.btn-secondary {
  background: var(--nx-surface-2);
  color: var(--nx-text);
  box-shadow: inset 0 0 0 1px var(--nx-line-2), inset 0 1px 0 var(--nx-edge);
}
.btn-secondary:hover { background: var(--nx-surface-3); color: var(--nx-text); }

.btn-ghost { background: transparent; color: var(--nx-text-2); }
.btn-ghost:hover { background: var(--nx-hover); color: var(--nx-text); }

.btn-danger { background: var(--nx-danger-fill); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.btn-danger:hover { background: color-mix(in srgb, var(--nx-danger-fill) 88%, #ffffff); color: #ffffff; }

.btn-sm { height: 30px; padding: 0 10px; font-size: var(--nx-t-sm); gap: 6px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: var(--nx-t-md); }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 30px; }
.btn[disabled], .btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; box-shadow: none; }

/* In flight: the control says it is working rather than going dead. */
.btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border: 2px solid var(--nx-text-2); border-top-color: transparent;
  border-radius: 50%;
  animation: nx-spin 600ms linear infinite;
}
.btn-primary[aria-busy="true"]::after, .btn-danger[aria-busy="true"]::after { border-color: #ffffff; border-top-color: transparent; }

.btn-group { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--nx-surface-2); }
.btn-group .btn { height: 32px; background: transparent; box-shadow: none; }
.btn-group .btn:hover { background: var(--nx-surface-3); }

/* ==========================================================================
   L5.1 · FORMS
   ========================================================================== */

.field { margin-bottom: var(--nx-5); min-width: 0; }
.field > label { display: block; margin-bottom: 6px; font-size: var(--nx-t-sm); font-weight: 500; color: var(--nx-text); }
.field .help { margin: 6px 0 0; font-size: var(--nx-t-sm); color: var(--nx-text-3); max-width: 70ch; }
.field .req { color: var(--nx-danger); }
.field .error { margin: 6px 0 0; font-size: var(--nx-t-sm); color: var(--nx-danger); font-weight: 500; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="search"], input[type="tel"], input[type="date"],
input[type="datetime-local"], input[type="time"], select, textarea {
  width: 100%;
  height: 40px; padding: 0 12px;
  border: 0; border-radius: var(--nx-r-control);
  background: var(--nx-inset);
  box-shadow: inset 0 0 0 1px var(--nx-line-2);
  color: var(--nx-text);
  font: inherit; font-size: var(--nx-t-base);
  transition: box-shadow var(--nx-d-fast) var(--nx-ease), background-color var(--nx-d-fast) var(--nx-ease);
}
input:hover, select:hover, textarea:hover { box-shadow: inset 0 0 0 1px var(--nx-border-strong); }
input:focus, select:focus, textarea:focus {
  outline: none;
  background: var(--nx-surface);
  box-shadow: inset 0 0 0 1px var(--nx-signal), 0 0 0 3px var(--nx-signal-soft);
}
.field.has-error input, .field.has-error select, .field.has-error textarea { box-shadow: inset 0 0 0 1px var(--nx-danger); }
select {
  appearance: none;
  padding-right: 36px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nx-text-3) 50%),
    linear-gradient(135deg, var(--nx-text-3) 50%, transparent 50%);
  background-position: right 17px center, right 12px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
textarea { height: auto; min-height: 120px; padding: 10px 12px; line-height: 1.55; resize: vertical; }
textarea.code { font-family: var(--nx-mono); font-size: var(--nx-t-sm); min-height: 260px; }
input::placeholder, textarea::placeholder { color: var(--nx-text-4); opacity: 1; }
input[readonly], input[disabled], select[disabled], textarea[disabled] { color: var(--nx-text-3); cursor: not-allowed; background: var(--nx-surface-2); }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; accent-color: var(--nx-signal-fill); flex: none; cursor: pointer; }
.input-sm { height: 32px; padding: 0 10px; font-size: var(--nx-t-sm); }
textarea.input-sm { height: auto; padding: 6px 10px; }

.upload-row { display: flex; gap: var(--nx-3); align-items: flex-end; flex-wrap: wrap; }
.upload-row input[type="file"] {
  width: 100%; padding: 8px;
  border-radius: var(--nx-r-control);
  background: var(--nx-inset);
  box-shadow: inset 0 0 0 1px var(--nx-line-2);
  color: var(--nx-text-2); font: inherit; font-size: var(--nx-t-sm);
}
.upload-row input[type="file"]::file-selector-button {
  margin-right: var(--nx-3); height: 30px; padding: 0 12px;
  border: 0; border-radius: 6px;
  background: var(--nx-surface-3); color: var(--nx-text);
  font: inherit; font-size: var(--nx-t-sm); font-weight: 500; cursor: pointer;
}

.checkline { display: flex; align-items: flex-start; gap: var(--nx-3); margin-bottom: var(--nx-3); max-width: 90ch; }
.checkline input { margin-top: 2px; }
.checkline label { font-weight: 500; }
.checkline .help { margin: 2px 0 0; font-size: var(--nx-t-sm); color: var(--nx-text-3); }

.form-row { display: grid; gap: 0 var(--nx-4); grid-template-columns: repeat(auto-fit, minmax(240px, 360px)); }
.card-body > form > .field > input, .card-body > form > .field > select { max-width: 480px; }
.form-actions { display: flex; gap: var(--nx-2); align-items: center; flex-wrap: wrap; padding-top: var(--nx-2); }
.form-actions.sticky {
  position: sticky; bottom: 0; z-index: 3;
  margin: var(--nx-5) calc(var(--nx-5) * -1) calc(var(--nx-5) * -1);
  padding: var(--nx-3) var(--nx-5);
  border-top: 1px solid var(--nx-line);
  border-radius: 0 0 var(--nx-r-panel) var(--nx-r-panel);
  background: color-mix(in srgb, var(--nx-surface) 92%, transparent);
  backdrop-filter: blur(10px);
}
fieldset { margin: 0 0 var(--nx-5); padding: var(--nx-4) 0 0; border: 0; border-top: 1px solid var(--nx-line); min-width: 0; }
legend { padding: 0 var(--nx-2) 0 0; font-size: var(--nx-t-sm); font-weight: 600; color: var(--nx-text); }

/* The filter bar: controls that change what a list shows, sitting directly on
   top of it. */
.filters {
  display: flex; gap: var(--nx-3); flex-wrap: wrap; align-items: flex-end;
  margin-bottom: var(--nx-4);
  padding: var(--nx-3) var(--nx-4);
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.filters .field { margin: 0; min-width: 170px; }
.filters .field > label { font-size: var(--nx-t-xs); color: var(--nx-text-3); font-weight: 500; }
.filters input, .filters select { height: 36px; }
.filters .grow { flex: 1; min-width: 220px; }

/* A button that finishes a row of 36px controls stands exactly as tall as they
   do, whatever size it was declared at, so the row reads as one instrument. */
.filters .btn, .card-foot form.row > .btn { height: 36px; }

/* A help note that stands on its own, under a panel rather than a field. */
.help { font-size: var(--nx-t-sm); color: var(--nx-text-3); max-width: 80ch; }
.card + .help, .console-panel + .help { margin-top: var(--nx-3); padding-inline: var(--nx-1); }

/* ==========================================================================
   L5.2 · STATUS
   ========================================================================== */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px;
  border-radius: var(--nx-r-full);
  background: var(--nx-surface-3);
  color: var(--nx-text-2);
  font-size: var(--nx-t-xs); font-weight: 500; line-height: 1;
  white-space: nowrap; flex: none;
}
.badge.success { background: var(--nx-ok-soft); color: var(--nx-ok); }
.badge.warn { background: var(--nx-warn-soft); color: var(--nx-warn); }
.badge.danger { background: var(--nx-danger-soft); color: var(--nx-danger); }
.badge.info, .badge.accent { background: var(--nx-signal-soft); color: var(--nx-signal); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge.info .dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; width: 7px; height: 7px; }
.badge.warn .dot { border-radius: 1px; transform: rotate(45deg); }
.badge.danger .dot { border-radius: 1px; }
.badge .icon { margin-left: -2px; }

.pulse { display: flex; flex-direction: column; }
.pulse-item {
  display: flex; align-items: center; gap: var(--nx-3);
  min-height: 48px; padding: 0 var(--nx-5);
  border-top: 1px solid var(--nx-line);
}
.pulse-item:first-child { border-top: 0; }
.pulse-item .label { flex: 1; min-width: 0; font-weight: 500; }
.pulse-item .detail { color: var(--nx-text-3); font-size: var(--nx-t-sm); }

.pulse-dot {
  position: relative;
  display: inline-block;
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: var(--nx-idle);
}
.pulse-dot.ok { background: var(--nx-ok); }
.pulse-dot.warn { background: var(--nx-warn); border-radius: 1px; transform: rotate(45deg); width: 7px; height: 7px; }
.pulse-dot.bad { background: var(--nx-danger); border-radius: 2px; }

.severity-CRITICAL { color: var(--nx-danger); font-weight: 600; }
.severity-HIGH { color: var(--nx-danger); font-weight: 500; }
.severity-MEDIUM { color: var(--nx-warn); font-weight: 500; }
.severity-LOW { color: var(--nx-signal); }
.severity-INFO { color: var(--nx-text-3); }

/* ==========================================================================
   L5.3 · FEEDBACK
   ========================================================================== */

.notice {
  display: flex; gap: var(--nx-3); align-items: flex-start;
  margin-bottom: var(--nx-5);
  padding: 12px var(--nx-4);
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface-2);
  color: var(--nx-text);
  animation: nx-notice var(--nx-d-slow) var(--nx-ease-out) both;
}
.notice .icon { flex: none; margin-top: 1px; }
.notice > div { min-width: 0; }
.notice.success { background: var(--nx-ok-soft); }
.notice.success .icon { color: var(--nx-ok); }
.notice.error { background: var(--nx-danger-soft); }
.notice.error .icon { color: var(--nx-danger); }
.notice.warn { background: var(--nx-warn-soft); }
.notice.warn .icon { color: var(--nx-warn); }
.notice.info { background: var(--nx-signal-soft); }
.notice.info .icon { color: var(--nx-signal); }
.notice a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   L5.4 · TABS
   ========================================================================== */

.tabs {
  display: flex; gap: var(--nx-1); flex-wrap: nowrap;
  margin-bottom: var(--nx-6);
  border-bottom: 1px solid var(--nx-line);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative;
  display: inline-flex; align-items: center;
  height: 44px; padding: 0 var(--nx-3);
  color: var(--nx-text-3);
  font-weight: 500; white-space: nowrap;
  transition: color var(--nx-d-fast) var(--nx-ease);
}
.tab:hover { color: var(--nx-text); }
.tab.active { color: var(--nx-text); }
.tab.active::after {
  content: "";
  position: absolute; left: var(--nx-3); right: var(--nx-3); bottom: -1px;
  height: 2px; border-radius: 2px 2px 0 0;
  background: var(--nx-signal);
  animation: nx-grow-x var(--nx-d-slow) var(--nx-ease-out) both;
}

/* ==========================================================================
   L5.5 · PAGINATION
   ========================================================================== */

.pagination {
  display: flex; gap: var(--nx-2); align-items: center; flex-wrap: wrap;
  padding: var(--nx-3) var(--nx-5);
  border-top: 1px solid var(--nx-line);
  font-size: var(--nx-t-sm);
}
.card-body.tight > .pagination:first-child { border-top: 0; }
.pagination.flush { padding: 0; border-top: 0; width: 100%; }
@media (max-width: 560px) {
  .pagination.flush { flex-direction: column; align-items: stretch; }
  .pagination.flush .right { margin-left: 0; }
  .pagination.flush .right .btn { flex: 1; }
}

/* ==========================================================================
   L5.6 · IDENTIFIER HELP
   Hover and focus reveal the explanation with no script; the client script adds
   tap on touch. The panel stays in the accessibility tree (it is the trigger's
   aria-describedby target), hidden by opacity only.
   ========================================================================== */

.hint { position: relative; display: inline-flex; align-items: center; vertical-align: middle; }
.hint-trigger {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin: 0 0 0 6px; padding: 0;
  border: 0; border-radius: 50%;
  background: var(--nx-surface-3);
  box-shadow: inset 0 0 0 1px var(--nx-line-2);
  color: var(--nx-text-3);
  font: inherit; font-size: 11px; font-weight: 600; line-height: 1;
  cursor: help;
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease);
}
.hint-trigger::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.hint-trigger:hover, .hint-trigger[aria-expanded="true"] { background: var(--nx-signal-soft); color: var(--nx-signal); }
.hint-trigger.copy { cursor: pointer; }
.hint-trigger.copy.is-copied { color: var(--nx-ok); background: var(--nx-ok-soft); }

/* The panel opens below its "?" and runs toward the open side of the page, so it
   never covers the heading it explains or the content above it. It starts at
   the trigger and extends right; the client script flips it to extend left
   near the right edge (.align-end), and to open upward when the window has no
   room below (.align-up). With the script blocked it still opens below and to
   the right, which is the safe default for a "?" beside a heading. */
.hint-panel {
  position: absolute; top: calc(100% + 10px); left: -6px;
  z-index: 60;
  width: max-content; max-width: min(320px, calc(100vw - 32px));
  padding: 10px 12px;
  border-radius: var(--nx-r-tile);
  background: var(--nx-elevated);
  box-shadow: inset 0 1px 0 var(--nx-edge-strong), var(--nx-float), var(--nx-panel-shadow);
  color: var(--nx-text);
  font-size: var(--nx-t-sm); font-weight: 400; line-height: 1.5;
  text-align: left; white-space: normal; letter-spacing: normal; text-transform: none;
  transform: translateY(-4px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--nx-d-fast) var(--nx-ease), transform var(--nx-d) var(--nx-ease-out);
}
.hint.align-end .hint-panel { left: auto; right: -6px; }
.hint.align-up .hint-panel { top: auto; bottom: calc(100% + 10px); transform: translateY(4px); }
.hint:hover .hint-panel, .hint:focus-within .hint-panel, .hint.is-open .hint-panel {
  opacity: 1; transform: none;
}
/* On a phone a tooltip beside a small trigger falls off the screen edge, so
   it becomes a sheet along the bottom of the viewport. */
@media (max-width: 560px) {
  .hint-panel, .hint.align-end .hint-panel, .hint.align-up .hint-panel {
    position: fixed; inset: auto 12px 12px 12px;
    width: auto; max-width: none;
    transform: translateY(6px);
    z-index: 200;
  }
  .hint:hover .hint-panel, .hint:focus-within .hint-panel, .hint.is-open .hint-panel { transform: none; }
}

.ident { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; min-width: 0; }
.ident-value { overflow-wrap: anywhere; }

/* ==========================================================================
   L6 · DATA
   ========================================================================== */

/* --- tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; max-width: 100%; scrollbar-width: thin; }
.table-wrap.scroll-y { max-height: 600px; overflow-y: auto; }

table.data { width: 100%; border-collapse: collapse; font-size: var(--nx-t-base); }
table.data th {
  height: 40px; padding: 0 var(--nx-4);
  text-align: left; white-space: nowrap;
  font-size: var(--nx-t-xs); font-weight: 500;
  color: var(--nx-text-3);
  border-bottom: 1px solid var(--nx-line);
}
.table-wrap.scroll-y table.data th { position: sticky; top: 0; z-index: 2; background: var(--nx-surface); }
table.data td {
  padding: 12px var(--nx-4);
  vertical-align: middle;
  color: var(--nx-text-2);
  border-bottom: 1px solid var(--nx-line);
}
table.data th:first-child, table.data td:first-child { padding-left: var(--nx-5); }
table.data th:last-child, table.data td:last-child { padding-right: var(--nx-5); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background-color var(--nx-d-fast) var(--nx-ease); }
table.data tbody tr:hover { background: var(--nx-hover); }
table.data tbody tr.is-selected { background: var(--nx-selected); }
table.data td.actions { text-align: right; white-space: nowrap; }
table.data td.actions form { display: inline; }
table.data td.num, table.data th.num { text-align: right; }
table.data td.actions .btn { opacity: 0.7; transition: opacity var(--nx-d-fast) var(--nx-ease), background-color var(--nx-d-fast) var(--nx-ease); }
table.data tr:hover td.actions .btn, table.data tr:focus-within td.actions .btn { opacity: 1; }
@media (hover: none) { table.data td.actions .btn { opacity: 1; } }
table.data th.col-narrow { width: 100px; }
table.data th.col-wide { width: 34%; }
table.data.compact td { padding: 8px var(--nx-3); font-size: var(--nx-t-sm); }
table.data.compact th { padding: 0 var(--nx-3); }
table.data td:first-child { min-width: 150px; }
table.data td.mono, table.data td .mono, .kv dd .mono { overflow-wrap: anywhere; }

/* Links in a table are the row's name, not a call to action: they read in the
   text colour and light up under the pointer. A column of blue links is the
   loudest thing on an admin screen and says nothing the row does not. */
table.data td a:not(.btn) { color: var(--nx-text); font-weight: 500; }
table.data td a:not(.btn):hover { color: var(--nx-signal); }
/* In-table actions are the soft variants. A filled red button repeated on every
   row turns a list into an alarm; the confirmation dialog still guards each one. */
table.data .btn-primary { background: var(--nx-signal-soft); color: var(--nx-signal); box-shadow: none; }
table.data .btn-primary:hover { background: var(--nx-signal-fill); color: #ffffff; }
table.data .btn-danger { background: var(--nx-danger-soft); color: var(--nx-danger); box-shadow: none; }
table.data .btn-danger:hover { background: var(--nx-danger-fill); color: #ffffff; }
.cell-main { color: var(--nx-text); font-weight: 500; }
a.cell-main:hover, .cell-main a:hover { color: var(--nx-signal); }
.cell-sub { font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

@media (max-width: 640px) {
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }
  table.data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  table.data tr { padding: var(--nx-3) var(--nx-4); border-bottom: 1px solid var(--nx-line); }
  table.data tbody tr:last-child { border-bottom: 0; }
  table.data td, table.data td:first-child, table.data td:last-child {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--nx-4);
    min-width: 0; padding: 5px 0; border-bottom: 0; text-align: right;
  }
  table.data td::before {
    content: attr(data-label);
    flex: none; text-align: left;
    font-size: var(--nx-t-xs); color: var(--nx-text-3);
  }
  table.data td:first-child { display: block; text-align: left; padding-bottom: var(--nx-2); }
  table.data td:first-child::before { display: none; }
  table.data td[data-label=""]::before { display: none; }
  table.data td.actions { justify-content: flex-start; padding-top: var(--nx-2); }
  table.data td.actions .btn { opacity: 1; }
}

/* --- figures ------------------------------------------------------------- */
.metric-row, .readout-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--nx-5) var(--nx-6);
  padding: var(--nx-5);
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.card .metric-row, .card .readout-row { padding: 0; background: none; box-shadow: none; }
.metric, .readout { min-width: 0; }
.metric .metric-label, .readout-label { font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.metric .metric-value, .readout-value {
  display: flex; align-items: baseline; gap: 6px;
  margin-top: 4px;
  font-size: var(--nx-t-3xl); font-weight: 600; line-height: 1.05;
  letter-spacing: -0.035em; color: var(--nx-text);
}
.metric.is-key .metric-value { color: var(--nx-text); }
.metric .metric-note, .readout-note { margin-top: 4px; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.readout-unit { font-size: var(--nx-t-md); font-weight: 500; letter-spacing: 0; color: var(--nx-text-3); }
.readout-open { display: block; color: inherit; }
.readout-open:hover .readout-value { color: var(--nx-signal); }
.readout-trace { height: 4px; margin-top: var(--nx-3); border-radius: 4px; background: var(--nx-track); overflow: hidden; }
.readout-trace > span { display: block; height: 100%; border-radius: 4px; background: var(--nx-signal); transform-origin: left; animation: nx-grow-x var(--nx-d-draw) var(--nx-ease-out) both; }
.metric .delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--nx-t-sm); font-weight: 500; }
.metric .delta.up { color: var(--nx-ok); }
.metric .delta.down { color: var(--nx-danger); }
.metric .delta.flat { color: var(--nx-text-3); }

.stat { padding: var(--nx-5); }
.stat .label { font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.stat .value { margin-top: 4px; font-size: var(--nx-t-3xl); font-weight: 600; letter-spacing: -0.035em; }
.stat .hint { font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.stat-grid { display: grid; gap: var(--nx-4); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* --- the toolbar --------------------------------------------------------- */
.toolbar {
  display: flex; align-items: center; gap: var(--nx-3); flex-wrap: wrap;
  min-height: 52px; padding: var(--nx-2) var(--nx-4);
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.toolbar-label { font-weight: 600; }
.toolbar-count { font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.toolbar-controls { display: flex; align-items: center; gap: var(--nx-2); flex-wrap: wrap; min-width: 0; }
.toolbar-controls .field { margin: 0; }
.toolbar-controls .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.toolbar-controls input, .toolbar-controls select { height: 34px; }
.toolbar-actions { display: flex; align-items: center; gap: var(--nx-2); margin-left: auto; }

/* --- key / value --------------------------------------------------------- */
.kv { display: grid; grid-template-columns: minmax(120px, 32%) minmax(0, 1fr); margin: 0; }
.kv dt { padding: 10px var(--nx-4) 10px 0; color: var(--nx-text-3); font-size: var(--nx-t-sm); border-bottom: 1px solid var(--nx-line); }
.kv dd { margin: 0; padding: 10px 0; min-width: 0; color: var(--nx-text); overflow-wrap: anywhere; border-bottom: 1px solid var(--nx-line); }
.kv dt:last-of-type, .kv dd:last-of-type { border-bottom: 0; }
.kv.compact dt, .kv.compact dd { padding-top: 6px; padding-bottom: 6px; }
.kv.figures { grid-template-columns: minmax(0, 1fr) auto; }
.kv.figures dd { text-align: right; font-weight: 600; padding-left: var(--nx-4); }

/* --- the activity log ------------------------------------------------------
   A thread read downwards: a mark on a continuous line, what happened, and
   when. The line runs through the marks so the entries read as one record. */
.activity { display: flex; flex-direction: column; padding: var(--nx-2) 0; }
.activity-item { position: relative; display: flex; gap: var(--nx-3); padding: 10px var(--nx-5); }
.activity-item .dot-col { position: relative; flex: none; width: 10px; padding-top: 6px; align-self: stretch; }
.activity-item .dot-col::after {
  content: "";
  position: absolute; left: 4px; top: 18px; bottom: -14px;
  width: 1px; background: var(--nx-line-2);
}
.activity-item:last-child .dot-col::after { display: none; }
.activity-item .dot {
  position: relative; z-index: 1;
  display: block; width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--nx-surface);
  box-shadow: inset 0 0 0 2px var(--nx-text-4);
}
.activity-item .dot.accent { box-shadow: inset 0 0 0 2px var(--nx-signal); }
.activity-item .dot.success { background: var(--nx-ok); box-shadow: none; }
.activity-item .dot.warn { background: var(--nx-warn); box-shadow: none; border-radius: 2px; transform: rotate(45deg) scale(0.85); }
.activity-item .dot.danger { background: var(--nx-danger); box-shadow: none; border-radius: 2px; }
.activity-item .body { flex: 1; min-width: 0; }
.activity-item .what { color: var(--nx-text); }
.activity-item .what b { font-weight: 500; }
.activity-item .meta { display: flex; gap: var(--nx-2); flex-wrap: wrap; margin-top: 1px; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.activity-item .when { flex: none; padding-top: 1px; font-size: var(--nx-t-sm); color: var(--nx-text-3); white-space: nowrap; }

/* --- charts ---------------------------------------------------------------- */
.chart { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid-line { stroke: var(--nx-chart-grid); stroke-width: 1; }
.chart .baseline { stroke: var(--nx-line-2); stroke-width: 1; }
.chart .axis-label { fill: var(--nx-text-3); font-family: var(--nx-font); font-size: 11px; }
.chart .bar-1 { fill: url(#nx-bar-1); }
.chart .bar-grad-from { stop-color: var(--nx-chart); stop-opacity: 1; }
.chart .bar-grad-to { stop-color: var(--nx-chart); stop-opacity: 0.35; }
.chart .bar-2 { fill: var(--nx-chart-2); }
.chart .bar-3 { fill: var(--nx-text-3); }
.chart .series-1 { stroke: var(--nx-chart); }
.chart .series-2 { stroke: var(--nx-chart-2); }
.chart .series-3, .chart .series-4 { stroke: var(--nx-text-3); }
.chart .line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart .point { fill: var(--nx-surface); stroke-width: 2; }
.chart rect[class^="bar-"] { transition: opacity var(--nx-d-fast) var(--nx-ease); }
.chart rect[class^="bar-"]:hover { opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
  .chart rect[class^="bar-"] {
    transform-box: fill-box; transform-origin: bottom;
    animation: nx-grow-y var(--nx-d-enter) var(--nx-ease-out) both;
  }
}
.chart-legend { display: flex; gap: var(--nx-4); flex-wrap: wrap; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.chart-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.chart-legend .sw.s1 { background: var(--nx-chart); }
.chart-legend .sw.s2 { background: var(--nx-chart-2); }
.chart-legend .sw.s3, .chart-legend .sw.s4 { background: var(--nx-text-3); }

.bar { height: 6px; border-radius: 6px; background: var(--nx-track); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 6px; background: var(--nx-signal); transform-origin: left; animation: nx-grow-x var(--nx-d-draw) var(--nx-ease-out) both; }
.bar.ramp > span { background: var(--nx-signal); }
.bar.tone-success > span { background: var(--nx-ok); }
.bar.tone-warn > span { background: var(--nx-warn); }
.bar.tone-danger > span { background: var(--nx-danger); }
.bar.is-indeterminate > span { width: 30%; animation: nx-sweep 1.4s var(--nx-ease-inout) infinite; }

.score-ring { display: flex; align-items: baseline; gap: 6px; }
.score-ring .num { font-size: var(--nx-t-4xl); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.score-ring .den { color: var(--nx-text-3); font-size: var(--nx-t-md); }

@media (max-width: 767px) {
  .metric-row, .readout-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nx-4); padding: var(--nx-4); }
  .metric .metric-value, .readout-value, .stat .value { font-size: var(--nx-t-2xl); }
  .filters { padding: var(--nx-3); }
  .filters .field, .filters .grow { min-width: 100%; }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { padding-bottom: 0; border-bottom: 0; }
  .kv dd { padding-top: 2px; }
  /* A figure list stays a row of label and value: that pairing is its point. */
  .kv.figures dt { padding-bottom: 10px; border-bottom: 1px solid var(--nx-line); }
  .kv.figures dd { padding-top: 10px; align-self: baseline; }
  .kv.figures dt:last-of-type { border-bottom: 0; }
  .form-actions.sticky { margin: var(--nx-4) calc(var(--nx-4) * -1) calc(var(--nx-4) * -1); padding: var(--nx-3) var(--nx-4); }
  .activity-item { padding: 10px var(--nx-4); }
}

/* ==========================================================================
   L7 · CONSOLE
   ========================================================================== */

.console { display: flex; flex-direction: column; gap: var(--nx-5); min-width: 0; }

.console-head { display: flex; align-items: flex-end; gap: var(--nx-5); flex-wrap: wrap; margin-bottom: var(--nx-2); }
.console-titles { flex: 1 1 420px; min-width: 0; }
.console-titles h1 { font-size: var(--nx-t-3xl); letter-spacing: -0.032em; }
.console-titles .lede { margin: var(--nx-2) 0 0; }

.console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  gap: var(--nx-5);
  /* Panels keep their own height. Stretched to match a neighbour, the shorter
     one carried a block of empty surface under its last row. */
  align-items: start;
}
.console-panel {
  display: flex; flex-direction: column;
  min-width: 0;
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.console-panel-head {
  display: flex; align-items: center; gap: var(--nx-3);
  min-height: 60px; padding: var(--nx-4) var(--nx-4) var(--nx-2) var(--nx-5);
}
.console-panel-head h2 { flex: 1; min-width: 0; font-size: var(--nx-t-md); font-weight: 600; letter-spacing: -0.01em; }
.console-feed .activity { padding-top: 0; }

/* ==========================================================================
   L7.1 · THE PULSE STRIP
   ========================================================================== */

.pulse-strip {
  display: grid;
  grid-template-columns: minmax(220px, auto) minmax(0, 1fr);
  align-items: stretch;
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
  overflow: hidden;
}
.ps-verdict {
  display: flex; align-items: center; gap: var(--nx-3);
  padding: var(--nx-4) var(--nx-5);
  background: var(--nx-surface-2);
  font-weight: 600; letter-spacing: -0.01em;
}
.pulse-strip.state-ok .ps-verdict { background: color-mix(in srgb, var(--nx-ok) 9%, var(--nx-surface-2)); }
.pulse-strip.state-warn .ps-verdict { background: color-mix(in srgb, var(--nx-warn) 11%, var(--nx-surface-2)); }
.pulse-strip.state-bad .ps-verdict { background: color-mix(in srgb, var(--nx-danger) 12%, var(--nx-surface-2)); }
.ps-verdict .pulse-dot { width: 10px; height: 10px; }
.ps-verdict .pulse-dot.warn { width: 9px; height: 9px; }

.ps-cells { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.ps-cell {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-width: 0;
  padding: var(--nx-3) var(--nx-5);
  box-shadow: inset 1px 0 0 var(--nx-line);
}
.ps-label { font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.ps-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--nx-text); white-space: nowrap; }
.ps-cell.state-idle .ps-status { color: var(--nx-text-2); }
.ps-cell.state-bad .ps-status { color: var(--nx-danger); }
.ps-cell.state-warn .ps-status { color: var(--nx-warn); }
.ps-detail { font-size: var(--nx-t-xs); color: var(--nx-text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The database and worker checks ran when this page was drawn, so their marks
   pulse twice on arrival, saying "checked just now", and then hold still. A loop
   would keep claiming a live heartbeat long after the reading went stale: this
   page has no live transport, and an indicator must not imply one. */
@media (prefers-reduced-motion: no-preference) {
  .ps-verdict .pulse-dot.ok::after,
  .ps-cell.state-ok .pulse-dot.ok::after {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--nx-ok);
    opacity: 0;
    animation: nx-pulse 1.6s var(--nx-ease-out) 400ms 2 both;
  }
  .ps-cell.state-ok:nth-child(n + 3) .pulse-dot.ok::after { display: none; }
}

/* ==========================================================================
   L7.2 · THE TOPOLOGY
   ========================================================================== */

.topology {
  display: grid;
  grid-template-columns: 188px 80px minmax(0, 1fr);
  align-items: center;
  padding: var(--nx-3) var(--nx-5) var(--nx-5);
}
.topo-hub {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--nx-4);
  border-radius: var(--nx-r-tile);
  background: var(--nx-surface-2);
  box-shadow: inset 0 1px 0 var(--nx-edge), inset 0 0 0 1px var(--nx-signal-line);
}
.topo-hub-mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: var(--nx-2);
  border-radius: var(--nx-r-control);
  background: var(--nx-signal-soft);
  color: var(--nx-signal);
}
.topo-hub-label { font-weight: 600; letter-spacing: -0.01em; }
.topo-hub-sub { font-size: var(--nx-t-sm); color: var(--nx-text-3); }

.topo-links { display: block; overflow: visible; }
.topo-link { fill: none; stroke: var(--nx-signal); stroke-width: 1.5; stroke-opacity: 0.7; stroke-linecap: round; stroke-linejoin: round; }
.topo-link.is-off { stroke: var(--nx-text-4); stroke-opacity: 0.5; stroke-dasharray: 0.02 0.03; }
@media (prefers-reduced-motion: no-preference) {
  .topo-link:not(.is-off) { animation: nx-draw var(--nx-d-draw) var(--nx-ease-out) backwards; }
}

.topo-nodes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.topo-node { min-width: 0; }
.topo-node-open {
  display: grid;
  grid-template-columns: 40px minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center; gap: var(--nx-4);
  height: 72px; padding: 0 var(--nx-4);
  border-radius: var(--nx-r-tile);
  background: var(--nx-inset);
  color: inherit;
  transition: background-color var(--nx-d-fast) var(--nx-ease), transform var(--nx-d) var(--nx-ease-out);
}
a.topo-node-open:hover { background: var(--nx-hover); color: inherit; transform: translateX(2px); }
.topo-node-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--nx-r-control); background: var(--nx-surface-3); color: var(--nx-text-2); }
.topo-node-body { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.topo-node-name { font-weight: 600; letter-spacing: -0.01em; color: var(--nx-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-node-meta { display: flex; align-items: center; gap: var(--nx-2); min-width: 0; font-family: var(--nx-mono); font-size: 12px; color: var(--nx-text-3); white-space: nowrap; }
.topo-node-meta .badge { font-family: var(--nx-font); height: 20px; padding: 0 7px; }
.topo-node-figure { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.topo-node-value { font-size: var(--nx-t-sm); color: var(--nx-text-3); white-space: nowrap; }
.topo-node-value .fl-value { font-size: var(--nx-t-lg); font-weight: 600; color: var(--nx-text); letter-spacing: -0.02em; }
.topo-bar { display: block; height: 4px; border-radius: 4px; background: var(--nx-track); overflow: hidden; }
.topo-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--nx-signal); transform-origin: left; animation: nx-grow-x var(--nx-d-draw) var(--nx-ease-out) both; }
.topo-node-note { font-size: var(--nx-t-xs); color: var(--nx-text-4); }
.topo-node.is-off .topo-node-name, .topo-node.is-off .topo-node-value .fl-value { color: var(--nx-text-3); }
.topo-node.is-off .topo-bar > span { background: var(--nx-text-4); }

/* ==========================================================================
   L7.3 · TENANCY
   ========================================================================== */

.tenancy { display: flex; flex-direction: column; gap: var(--nx-5); padding: var(--nx-1) var(--nx-5) var(--nx-5); }
.tenancy-figure { margin: 0; color: var(--nx-text-3); }
.tenancy-figure .fl-value { font-size: var(--nx-t-4xl); font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--nx-text); }
.tenancy-unit { font-size: var(--nx-t-lg); }

.segbar { display: flex; flex-direction: column; gap: var(--nx-3); }
.segbar-track { display: flex; gap: 3px; height: 10px; }
.seg { display: block; height: 100%; border-radius: 3px; transform-origin: left; animation: nx-grow-x var(--nx-d-draw) var(--nx-ease-out) both; }
.seg.tone-ok { background: var(--nx-ok); }
.seg.tone-warn { background: var(--nx-warn); }
.seg.tone-danger { background: var(--nx-danger); }
.seg.tone-idle { background: var(--nx-text-4); }
.seg.tone-accent { background: var(--nx-signal); }
.segbar-legend { display: flex; gap: var(--nx-5); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: var(--nx-t-sm); }
.segbar-legend li { display: inline-flex; align-items: center; gap: 8px; }
.seg-key { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.seg-key.tone-ok { background: var(--nx-ok); }
.seg-key.tone-warn { background: var(--nx-warn); transform: rotate(45deg); }
.seg-key.tone-danger { background: var(--nx-danger); }
.seg-key.tone-idle { background: var(--nx-text-4); }
.seg-key.tone-accent { background: var(--nx-signal); }
.seg-label { color: var(--nx-text-3); }
.seg-value { font-weight: 600; color: var(--nx-text); }

.figure-list { margin: 0; display: flex; flex-direction: column; }
.fl-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--nx-4); padding: 11px 0; border-top: 1px solid var(--nx-line); }
.fl-row dt { color: var(--nx-text-2); }
.fl-row dt a { color: var(--nx-text-2); }
.fl-row dt a:hover { color: var(--nx-signal); }
.fl-row dd { margin: 0; display: flex; align-items: baseline; gap: var(--nx-2); text-align: right; }
.fl-row .fl-value { font-size: var(--nx-t-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--nx-text); }
.fl-note { font-size: var(--nx-t-xs); color: var(--nx-text-3); }

/* ==========================================================================
   L7.4 · AUDIT CHART
   ========================================================================== */

.console-chart .chart-summary { padding: 0 var(--nx-5) var(--nx-3); }
.chart-summary p { margin: 0; }
.chart-summary .fl-value { font-size: var(--nx-t-2xl); font-weight: 600; letter-spacing: -0.03em; }
.chart-summary-unit { color: var(--nx-text-3); }
.console-chart .chart { padding: 0 var(--nx-5) var(--nx-5); }

/* ==========================================================================
   L7.5 · RESPONSIVE
   ========================================================================== */

/* The five checks never leave an orphan: on six tracks they sit three over
   two, and on a phone two, two and one across the full width. */
@media (max-width: 1279px) {
  .ps-cells { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ps-cell { grid-column: span 2; }
  .ps-cell:nth-child(n + 4) { grid-column: span 3; box-shadow: inset 1px 0 0 var(--nx-line), inset 0 1px 0 var(--nx-line); }
}
/* Between the two-column console and the single one, the products panel is too
   narrow for the hub and its edges beside a readable row, so it is a list. The
   state badge is never the part that gives way: it is the truth of the row. */
@media (max-width: 1365px) and (min-width: 1101px) {
  .topology { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .topo-hub, .topo-links { display: none; }
}
@media (max-width: 1100px) {
  .console-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .pulse-strip { grid-template-columns: minmax(0, 1fr); }
  .ps-cell, .ps-cell:nth-child(n + 4) { box-shadow: inset 0 1px 0 var(--nx-line), inset 1px 0 0 var(--nx-line); }
  .ps-cell:nth-child(1), .ps-cell:nth-child(4) { box-shadow: inset 0 1px 0 var(--nx-line); }
  /* The hub and its edges step aside: on a narrow screen the products are a
     list, which is what can actually be read. */
  .topology { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .topo-hub, .topo-links { display: none; }
}
@media (max-width: 560px) {
  .ps-cell, .ps-cell:nth-child(n + 4) { grid-column: span 3; box-shadow: inset 0 1px 0 var(--nx-line), inset 1px 0 0 var(--nx-line); }
  .ps-cell:nth-child(odd) { box-shadow: inset 0 1px 0 var(--nx-line); }
  .ps-cell:nth-child(5) { grid-column: span 6; }
  .topo-node-open { grid-template-columns: 36px minmax(0, 1fr); height: auto; padding: var(--nx-3); row-gap: var(--nx-2); }
  .topo-node-figure { grid-column: 2; }
  .topo-node-state { grid-column: 2; justify-self: start; }
  .console-titles h1 { font-size: var(--nx-t-2xl); }
  .tenancy-figure .fl-value { font-size: var(--nx-t-3xl); }
}

/* ==========================================================================
   L8 · WEBMAIL
   ========================================================================== */

.mailbox {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
  overflow: hidden;
}
.mail-rail { min-width: 0; min-height: 320px; padding: var(--nx-3) var(--nx-2); background: var(--nx-inset); }
.mail-rail-label { padding: var(--nx-3) var(--nx-3) 6px; font-size: var(--nx-t-xs); font-weight: 500; color: var(--nx-text-3); }
.mail-folder {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  height: 36px; padding: 0 var(--nx-3); margin-bottom: 2px;
  border-radius: var(--nx-r-control);
  color: var(--nx-text-2); font-weight: 500;
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease);
}
.mail-folder .icon { color: var(--nx-text-3); }
.mail-folder:hover { background: var(--nx-hover); color: var(--nx-text); }
.mail-folder span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-folder .mail-count { margin-left: auto; }
.mail-folder.is-active { background: var(--nx-selected); color: var(--nx-text); }
.mail-folder.is-active .icon { color: var(--nx-signal); }

.mail-list { min-width: 0; display: flex; flex-direction: column; }
.mail-toolbar {
  display: flex; align-items: center; gap: var(--nx-3); flex-wrap: wrap;
  padding: var(--nx-3) var(--nx-4);
  border-bottom: 1px solid var(--nx-line);
}
.mail-toolbar .mail-search { display: flex; align-items: center; gap: var(--nx-2); flex: 1; min-width: 220px; }
.mail-toolbar .mail-search input { height: 36px; }
.mail-toolbar .field { margin: 0; }
.mail-toolbar .field > label { display: none; }
.mail-toolbar select { height: 36px; }
.mail-count { font-size: var(--nx-t-sm); color: var(--nx-text-3); white-space: nowrap; }

.mail-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  align-items: center; gap: var(--nx-3);
  min-height: 52px; padding: 6px var(--nx-4);
  border-bottom: 1px solid var(--nx-line);
  transition: background-color var(--nx-d-fast) var(--nx-ease);
}
.mail-row:last-child { border-bottom: 0; }
.mail-row:hover { background: var(--nx-hover); }
.mail-row.is-unread .mail-from, .mail-row.is-unread .mail-subject { color: var(--nx-text); font-weight: 600; }
.mail-mark { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: none; }
.mail-row.is-unread .mail-mark { background: var(--nx-signal); }
.mail-open { display: grid; grid-template-columns: 190px minmax(0, 1fr); align-items: baseline; gap: var(--nx-4); min-width: 0; color: inherit; }
.mail-open:hover { color: inherit; }
.mail-from { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--nx-text-2); font-weight: 500; }
.mail-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-subject { color: var(--nx-text-2); }
.mail-snippet { color: var(--nx-text-3); margin-left: var(--nx-2); }
.mail-open:hover .mail-subject { color: var(--nx-signal); }
.mail-chips { display: flex; align-items: center; gap: var(--nx-1); flex: none; }
.mail-when { flex: none; font-size: var(--nx-t-sm); color: var(--nx-text-3); white-space: nowrap; }
.mail-row.is-unread .mail-when { color: var(--nx-text-2); }
.mail-star { flex: none; }
.mail-star .btn { color: var(--nx-text-4); }
.mail-star .btn:hover, .mail-star.is-on .btn { color: var(--nx-warn); }
.mail-actions { display: flex; gap: 2px; flex: none; opacity: 0; transition: opacity var(--nx-d-fast) var(--nx-ease); }
.mail-row:hover .mail-actions, .mail-actions:focus-within { opacity: 1; }
@media (hover: none) { .mail-actions { opacity: 1; } }
.mail-foot {
  display: flex; align-items: center; gap: var(--nx-3); flex-wrap: wrap;
  padding: var(--nx-3) var(--nx-4);
  border-top: 1px solid var(--nx-line);
  font-size: var(--nx-t-sm); color: var(--nx-text-3);
}
.mail-foot .pagination { padding: 0; border: 0; }

@media (max-width: 767px) {
  .mailbox { grid-template-columns: minmax(0, 1fr); }
  .mail-rail { display: flex; gap: var(--nx-1); min-height: 0; padding: var(--nx-2); overflow-x: auto; scrollbar-width: none; }
  .mail-rail-label { display: none; }
  .mail-folder { flex: none; margin: 0; }
  .mail-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "mark open when" ". open star" ". acts acts";
    row-gap: var(--nx-1); padding: var(--nx-3) var(--nx-4);
  }
  .mail-mark { grid-area: mark; align-self: start; margin-top: 7px; }
  .mail-open { grid-area: open; grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .mail-when { grid-area: when; align-self: start; }
  .mail-star { grid-area: star; justify-self: end; }
  .mail-chips { display: none; }
  .mail-actions { grid-area: acts; opacity: 1; }
  .mail-text { white-space: normal; }
  .mail-snippet { margin-left: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}

/* ==========================================================================
   L8.1 · THE SOCIAL CALENDAR
   ========================================================================== */

.cal {
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
  overflow: hidden;
}
.cal-head { display: flex; align-items: center; gap: var(--nx-3); flex-wrap: wrap; padding: var(--nx-4) var(--nx-5); }
.cal-month { font-size: var(--nx-t-lg); font-weight: 600; letter-spacing: -0.015em; }
.cal-nav { display: flex; gap: var(--nx-1); align-items: center; }
.cal-legend { display: flex; gap: var(--nx-4); flex-wrap: wrap; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.cal-legend .k { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.cal-legend .sw.bar-scheduled { background: var(--nx-signal); }
.cal-legend .sw.bar-published { background: var(--nx-ok); }
.cal-legend .sw.bar-failed { background: var(--nx-danger); }

.cal-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 var(--nx-3); }
.cal-weekdays span { padding: 0 var(--nx-2) var(--nx-2); font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 0 var(--nx-3) var(--nx-3); }
.cal-day {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; min-height: 112px; padding: var(--nx-2);
  border-radius: var(--nx-r-tile);
  background: var(--nx-inset);
}
.cal-day.is-outside { background: transparent; }
.cal-day.is-outside .cal-daynum { color: var(--nx-text-4); }
.cal-daynum { font-size: var(--nx-t-sm); font-weight: 500; color: var(--nx-text-3); }
.cal-day.is-today { background: var(--nx-signal-soft); box-shadow: inset 0 0 0 1px var(--nx-signal-line); }
.cal-day.is-today .cal-daynum { color: var(--nx-signal); font-weight: 600; }
.cal-chip {
  display: flex; align-items: center; gap: 6px;
  min-width: 0; height: 24px; padding: 0 6px 0 8px;
  border-radius: 6px;
  background: var(--nx-surface-2);
  box-shadow: inset 2px 0 0 var(--nx-text-4);
  color: var(--nx-text-2); font-size: var(--nx-t-xs);
  transition: background-color var(--nx-d-fast) var(--nx-ease);
}
.cal-chip:hover { background: var(--nx-surface-3); color: var(--nx-text); }
.cal-chip .icon { width: 11px; height: 11px; flex: none; opacity: 0.8; }
.cal-chip .t { flex: none; color: var(--nx-text-3); font-variant-numeric: tabular-nums; }
.cal-chip .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip.is-scheduled { box-shadow: inset 2px 0 0 var(--nx-signal); }
.cal-chip.is-published { box-shadow: inset 2px 0 0 var(--nx-ok); }
.cal-chip.is-failed { box-shadow: inset 2px 0 0 var(--nx-danger); background: var(--nx-danger-soft); color: var(--nx-text); }
.cal-chip.is-publishing { box-shadow: inset 2px 0 0 var(--nx-warn); }
.cal-chip.is-skipped { opacity: 0.6; }
.cal-more { padding: 0 var(--nx-2); font-size: var(--nx-t-xs); color: var(--nx-text-3); }

@media (max-width: 1023px) {
  .cal-day { min-height: 92px; }
  .cal-chip .t { display: none; }
}
.cal-agenda { display: none; }
@media (max-width: 767px) {
  .cal-weekdays, .cal-grid { display: none; }
  .cal-agenda { display: block; padding: 0 var(--nx-3) var(--nx-3); }
}
.cal-agenda-day { padding: var(--nx-3); border-radius: var(--nx-r-tile); }
.cal-agenda-day + .cal-agenda-day { margin-top: 4px; }
.cal-agenda-day.is-today { background: var(--nx-signal-soft); }
.cal-agenda-date { margin-bottom: var(--nx-2); font-size: var(--nx-t-sm); font-weight: 600; color: var(--nx-text-2); }
.cal-agenda .cal-chip { height: 36px; font-size: var(--nx-t-sm); margin-bottom: 4px; }
.cal-agenda .cal-chip .t { display: inline; }

/* ==========================================================================
   L9 · CREW IDENTITY AND STATE
   ========================================================================== */

:root {
  --nx-office-image: url("/_assets/brand/office-dark.webp?v=61cc1d09");
  --nx-office-dark-image: url("/_assets/brand/office-dark.webp?v=61cc1d09");
  --nx-stage-veil: linear-gradient(90deg, rgba(18, 21, 25, 0.98) 0%, rgba(18, 21, 25, 0.9) 34%, rgba(18, 21, 25, 0.45) 66%, rgba(18, 21, 25, 0.2) 100%);
  --nx-stage-floor: linear-gradient(0deg, rgba(18, 21, 25, 0.9) 0%, rgba(18, 21, 25, 0) 55%);
  --crew-1: var(--nx-signal); --crew-2: var(--nx-signal); --crew-ink: var(--nx-signal);
}
:root[data-theme="light"] {
  --nx-office-image: url("/_assets/brand/office-light.webp?v=eb25a5f7");
  --nx-stage-veil: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 36%, rgba(255, 255, 255, 0.5) 68%, rgba(255, 255, 255, 0.22) 100%);
  --nx-stage-floor: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 55%);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --nx-office-image: url("/_assets/brand/office-light.webp?v=eb25a5f7");
  --nx-stage-veil: linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 36%, rgba(255, 255, 255, 0.5) 68%, rgba(255, 255, 255, 0.22) 100%);
  --nx-stage-floor: linear-gradient(0deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 55%);
  }
}

.crew-cyan    { --crew-1: #3ad6ea; --crew-2: #1f8fff; --crew-ink: #52c9e0; }
.crew-blue    { --crew-1: #4f8dff; --crew-2: #5a5cf0; --crew-ink: #6fa2ff; }
.crew-violet  { --crew-1: #9275ff; --crew-2: #b061f5; --crew-ink: #a791ff; }
.crew-magenta { --crew-1: #d45cf0; --crew-2: #f05aa6; --crew-ink: #dc84f2; }
.crew-slate   { --crew-1: #8a96a6; --crew-2: #5d6978; --crew-ink: var(--nx-text-3); }
:root[data-theme="light"] .crew-cyan { --crew-ink: #077a8e; } :root[data-theme="light"] .crew-blue { --crew-ink: #1d5bd8; } :root[data-theme="light"] .crew-violet { --crew-ink: #5b3fd1; } :root[data-theme="light"] .crew-magenta { --crew-ink: #9a2bb8; }
@media (prefers-color-scheme: light) {
:root:not([data-theme="dark"]) .crew-cyan { --crew-ink: #077a8e; } :root:not([data-theme="dark"]) .crew-blue { --crew-ink: #1d5bd8; } :root:not([data-theme="dark"]) .crew-violet { --crew-ink: #5b3fd1; } :root:not([data-theme="dark"]) .crew-magenta { --crew-ink: #9a2bb8; }
}

.tone-ok     { --state-tone: var(--nx-ok);     --state-wash: var(--nx-ok-soft); }
.tone-info   { --state-tone: var(--nx-signal); --state-wash: var(--nx-signal-soft); }
.tone-warn   { --state-tone: var(--nx-warn);   --state-wash: var(--nx-warn-soft); }
.tone-danger { --state-tone: var(--nx-danger); --state-wash: var(--nx-danger-soft); }
.tone-idle   { --state-tone: var(--nx-idle);   --state-wash: var(--nx-idle-soft); }

/* --- the status capsule ---------------------------------------------------- */
.crew-status {
  display: inline-flex; align-items: center; gap: 7px;
  height: 26px; padding: 0 10px 0 9px;
  border-radius: var(--nx-r-full);
  background: var(--state-wash, var(--nx-surface-3));
  color: var(--state-tone, var(--nx-text-2));
  white-space: nowrap; flex: none;
}
.crew-status .cs-text { font-size: var(--nx-t-xs); font-weight: 600; color: var(--state-tone, var(--nx-text-2)); }
.crew-status.is-sm { height: 24px; padding: 0 9px 0 8px; gap: 6px; }
.crew-status .cs-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* Working: a filled disc in the live colour. The one state with a colour of its
   own, because "running right now" is the one fact that is time-critical. */
.crew-status.kind-working { background: var(--nx-live-soft); color: var(--nx-live); }
.crew-status.kind-working .cs-text { color: var(--nx-live); }
/* Ready: a ring. Standing by, not running. */
.crew-status.kind-ready .cs-dot { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
/* Attention: a diamond. */
.crew-status.kind-attention .cs-dot { border-radius: 1px; transform: rotate(45deg); width: 7px; height: 7px; }
/* Error: a square inside a ring, the densest mark on the screen. */
.crew-status.kind-error .cs-dot { border-radius: 2px; box-shadow: 0 0 0 2px var(--state-wash), 0 0 0 3px currentColor; }
/* Setup required: a half-filled disc. Started, not finished. */
.crew-status.kind-setup .cs-dot { background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%); box-shadow: inset 0 0 0 1.5px currentColor; }
/* Offline: small and muted. Present, not participating. */
.crew-status.kind-offline .cs-dot { width: 6px; height: 6px; opacity: 0.7; }
/* In development: a dashed outline. Drawn, not built. */
.crew-status.kind-development .cs-dot { background: transparent; border: 1.5px dashed currentColor; }

@media (prefers-reduced-motion: no-preference) {
  .crew-status.kind-working .cs-dot::after {
    content: ""; position: absolute; inset: -3px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    animation: nx-pulse 2.6s var(--nx-ease-out) infinite;
  }
}

/* --- the portrait -------------------------------------------------------- */
.crew-sigil { position: relative; display: inline-block; flex: none; line-height: 0; }
.crew-sigil svg { display: block; overflow: visible; }
.crew-sigil .sigil-ground { fill: var(--nx-surface-3); }
.crew-sigil .sigil-mark { font-family: var(--nx-font); font-weight: 600; letter-spacing: 0.02em; }
.crew-sigil .sigil-frame { opacity: 0.85; }
.crew-sigil.compact .sigil-frame { stroke-width: 1.2; opacity: 0.7; }
.crew-sigil.is-muted { opacity: 0.55; filter: saturate(0.2); }
.crew-sigil.has-portrait::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); pointer-events: none; }
.crew-sigil .sigil-portrait { image-rendering: auto; }

.crew-motif { display: block; width: 100%; max-width: 420px; height: 34px; }
.crew-motif .motif-base, .crew-motif .motif-rail, .crew-motif .motif-trace { stroke: var(--nx-line-2); stroke-width: 1; fill: none; }
.crew-motif .motif-node { fill: var(--crew-ink); }
.crew-motif .motif-block, .crew-motif .motif-doc, .crew-motif .motif-dash { stroke: var(--nx-line-2); fill: none; }
.crew-motif .motif-live { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .crew-motif.is-live .motif-live { opacity: 1; }
  .crew-motif.is-live .motif-packet, .crew-motif.is-live .motif-carrier { animation: nx-motif-carry 3.2s var(--nx-ease-inout) infinite; }
  .crew-motif.is-live .motif-scanline { animation: nx-motif-carry 2.8s var(--nx-ease-inout) infinite; }
  .crew-motif.is-live .motif-message { animation: nx-motif-carry 2.6s var(--nx-ease-inout) infinite; }
}
@keyframes nx-motif-carry {
  0% { transform: translateX(0); opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { transform: translateX(280px); opacity: 0; }
}

/* ==========================================================================
   L9.1 · THE STAGE
   ========================================================================== */

.mc { display: flex; flex-direction: column; gap: var(--nx-6); min-width: 0; }

.mc-stage {
  position: relative; overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 1fr);
  gap: var(--nx-6);
  align-items: center;
  min-height: 300px;
  padding: var(--nx-8) var(--nx-7) var(--nx-7);
  border-radius: var(--nx-r-chrome);
  background-color: var(--nx-surface);
  background-image: var(--nx-stage-veil), var(--nx-stage-floor), var(--nx-office-image);
  background-size: cover, cover, cover;
  background-position: center, center, 78% 38%;
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.mc-stage-copy { min-width: 0; }
.mc-context { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--nx-3); font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.mc-context-sep { width: 4px; height: 4px; border-radius: 50%; background: var(--nx-text-4); }
.mc-greeting { margin: 0; font-size: var(--nx-t-4xl); line-height: 1.04; letter-spacing: -0.035em; font-weight: 600; }
.mc-lede { margin: var(--nx-3) 0 0; font-size: var(--nx-t-lg); color: var(--nx-text-2); }

.mission-chips { display: flex; flex-wrap: wrap; gap: var(--nx-2); margin-top: var(--nx-5); }
.mission-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  border-radius: var(--nx-r-full);
  background: color-mix(in srgb, var(--nx-surface-2) 85%, transparent);
  box-shadow: inset 0 0 0 1px var(--nx-line);
  backdrop-filter: blur(10px);
  color: var(--nx-text-2);
  font-size: var(--nx-t-sm); font-weight: 500; white-space: nowrap;
}
a.mission-chip:hover { color: var(--nx-text); background: var(--nx-surface-3); }
.mission-chip .chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nx-idle); flex: none; }
.mission-chip.tone-ok .chip-dot { background: var(--nx-ok); }
.mission-chip.tone-info .chip-dot { background: transparent; box-shadow: inset 0 0 0 2px var(--nx-signal); }
.mission-chip.tone-warn .chip-dot { background: var(--nx-warn); border-radius: 1px; transform: rotate(45deg); width: 6px; height: 6px; }
.mission-chip.tone-danger .chip-dot { background: var(--nx-danger); border-radius: 2px; }
.mission-chip.tone-idle .chip-dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--nx-idle); }

/* The day's figures, as one frosted surface standing in the window. */
.mc-stage-figures { min-width: 0; }
.exec-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border-radius: var(--nx-r-panel);
  background: var(--nx-line);
  overflow: hidden;
  box-shadow: inset 0 1px 0 var(--nx-edge);
  backdrop-filter: blur(18px) saturate(1.2);
}
.exec-cell {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--nx-3);
  min-width: 0; padding: var(--nx-4);
  background: color-mix(in srgb, var(--nx-surface) 86%, transparent);
}
.exec-cell:has(> a) { padding: 0; }
.exec-cell > a { display: flex; align-items: flex-start; gap: var(--nx-3); flex: 1; min-width: 0; padding: var(--nx-4); color: inherit; transition: background-color var(--nx-d-fast) var(--nx-ease); }
.exec-cell > a:hover { background: var(--nx-hover); color: inherit; }
.exec-cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
.exec-cell .ms-icon { display: none; }
.exec-cell .ms-body { display: flex; flex-direction: column; min-width: 0; }
.exec-cell .v { order: 2; font-size: var(--nx-t-2xl); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; color: var(--nx-text); }
.exec-cell .k { order: 1; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.exec-cell .n { order: 3; margin-top: 3px; font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.exec-cell .n a { color: var(--nx-signal); }
.exec-cell.tone-warn .v { color: var(--nx-warn); }
.exec-cell.tone-danger .v { color: var(--nx-danger); }
.exec-cell:last-child .v { font-size: var(--nx-t-lg); letter-spacing: -0.01em; }
.exec-cell .hint { position: absolute; top: var(--nx-3); right: var(--nx-3); }

/* ==========================================================================
   L9.2 · SECTIONS
   ========================================================================== */

.mc-section-head { display: flex; align-items: center; gap: var(--nx-2); min-height: 36px; margin-bottom: var(--nx-3); }
.mc-section-head h2 { font-size: var(--nx-t-xl); letter-spacing: -0.02em; }
.mc-section-head .hint-trigger { margin-left: 0; }
.mc-section-sub { margin-left: auto; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.mc-panel {
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
  overflow: hidden;
}

/* ==========================================================================
   L9.3 · THE TEAM
   ========================================================================== */

.mc-team .crew-grid,
.crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--nx-2);
  padding: var(--nx-2);
  border-radius: var(--nx-r-chrome);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.crew-grid.count-1 { grid-template-columns: minmax(0, 360px); }
.crew-grid.count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.crew-grid.count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crew-grid.count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.crew-grid.count-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.crew-station {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  padding: var(--nx-3);
  border-radius: var(--nx-r-panel);
  transition: background-color var(--nx-d) var(--nx-ease);
}
.crew-station:hover, .crew-station:focus-within { background: var(--nx-hover); }

.station-band {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 4.2;
  border-radius: var(--nx-r-tile);
  background: var(--nx-surface-3);
}
.station-face { position: absolute; inset: 0; display: block; }
.station-face .crew-plate { display: block; width: 100%; height: 100%; transition: transform var(--nx-d-slow) var(--nx-ease-out); }
.crew-station:hover .station-face .crew-plate { transform: scale(1.025); }
.station-face .crew-sigil { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* A problem, or a running job, is stated along the portrait's lower edge in its
   own colour, so a row of faces can be scanned without reading. Drawn on a
   pseudo-element above the photograph: an inset shadow on the band itself is
   painted beneath its children and the portrait covers it. */
.station-band::after {
  content: "";
  position: absolute; inset: auto 0 0 0; z-index: 1;
  height: 3px;
  background: transparent;
  pointer-events: none;
}
.crew-station.state-error .station-band::after { background: var(--nx-danger); }
.crew-station.state-attention .station-band::after,
.crew-station.state-setup .station-band::after { background: var(--nx-warn); }
.crew-station.is-live .station-band::after { background: var(--nx-live); }
.station-decor { display: none; }

.station-id { display: flex; align-items: flex-start; gap: var(--nx-2); margin-top: var(--nx-3); }
.station-name { flex: 1; min-width: 0; }
.station-id h3 { margin: 0; font-size: var(--nx-t-lg); font-weight: 600; letter-spacing: 0.01em; }
.station-id h3 a { color: var(--nx-text); }
.station-id h3 a:hover { color: var(--crew-ink); }
.station-role { margin: 1px 0 0; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.station-open {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px;
  border-radius: var(--nx-r-full);
  background: var(--nx-surface-2);
  color: var(--nx-text-2);
  transition: background-color var(--nx-d-fast) var(--nx-ease), color var(--nx-d-fast) var(--nx-ease), transform var(--nx-d) var(--nx-ease-out);
}
.station-open:hover { background: var(--nx-signal-fill); color: #ffffff; transform: rotate(-8deg); }
.station-signal { display: block; margin-top: var(--nx-2); }

.station-say { display: flex; align-items: baseline; gap: 8px; margin: var(--nx-3) 0 0; min-height: 42px; color: var(--nx-text-2); font-size: var(--nx-t-sm); line-height: 1.5; }
.station-say .say-text { min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.crew-station.is-live .station-say { color: var(--nx-text); }
.station-say .sl-pip { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--nx-live); transform: translateY(-1px); }
@media (prefers-reduced-motion: no-preference) {
  .crew-station.is-live .sl-pip { animation: nx-breathe 2.2s var(--nx-ease-inout) infinite; }
}

.station-actions { margin-top: var(--nx-2); }
.station-fix { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nx-t-sm); font-weight: 500; color: var(--nx-signal); }
.station-fix .icon { transition: transform var(--nx-d-fast) var(--nx-ease); }
.station-fix:hover .icon { transform: translateX(2px); }

.station-metrics { display: grid; gap: var(--nx-2); margin: auto 0 0; padding: var(--nx-3) 0 0; list-style: none; border-top: 1px solid var(--nx-line); }
.crew-station .station-metrics { margin-top: var(--nx-3); }
.station-metrics.cols-1 { grid-template-columns: minmax(0, 1fr); }
.station-metrics.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.station-metrics.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.station-metric { min-width: 0; }
.station-metric > a, .station-metric > .sm-static { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 4px 6px; margin: -4px -6px; border-radius: var(--nx-r-control); color: inherit; }
.station-metric > a:hover { background: var(--nx-surface-2); color: inherit; }
.station-metric .v { font-size: var(--nx-t-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--nx-text); }
.station-metric > a:hover .v { color: var(--nx-signal); }
.station-metric .k { font-size: var(--nx-t-xs); color: var(--nx-text-3); line-height: 1.3; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.station-metric .n { color: var(--nx-text-4); }

.restricted-note {
  display: flex; align-items: flex-start; gap: var(--nx-3);
  margin-top: var(--nx-3); padding: var(--nx-3) var(--nx-4);
  border-radius: var(--nx-r-tile);
  background: var(--nx-surface-2);
  color: var(--nx-text-2); font-size: var(--nx-t-sm);
}
.restricted-note .icon { margin-top: 2px; color: var(--nx-text-3); }
.restricted-note strong { color: var(--nx-text); }

/* ==========================================================================
   L9.4 · THE WORK
   ========================================================================== */

/* The lower half: two columns, each a stack that reads down. */
.mc-lower { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr); gap: var(--nx-6) var(--nx-5); align-items: start; }
.mc-column { display: flex; flex-direction: column; gap: var(--nx-6); min-width: 0; }

.attention-band {
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
  overflow: hidden;
}
.attention-queue { margin: 0; padding: var(--nx-2); list-style: none; }
.attention-item + .attention-item { margin-top: 2px; }
.attention-item > a, .attention-item .attn-static {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: var(--nx-3); align-items: start;
  padding: var(--nx-3);
  border-radius: var(--nx-r-tile);
  color: inherit;
  transition: background-color var(--nx-d-fast) var(--nx-ease);
}
.attention-item > a:hover { background: var(--nx-hover); color: inherit; }
.attn-mark {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: var(--nx-r-control);
  background: var(--state-wash, var(--nx-surface-3));
  color: var(--state-tone, var(--nx-text-3));
}
.attention-item.tone-danger > a, .attention-item.tone-danger .attn-static { background: color-mix(in srgb, var(--nx-danger) 7%, transparent); }
.attn-body { min-width: 0; }
.attn-title { display: block; font-weight: 600; color: var(--nx-text); }
.attn-detail { display: block; margin-top: 2px; font-size: var(--nx-t-sm); color: var(--nx-text-2); }
.attn-meta { display: flex; align-items: center; gap: var(--nx-2); flex-wrap: wrap; margin-top: var(--nx-2); }
.attn-crew { display: inline-flex; align-items: center; gap: 5px; font-size: var(--nx-t-xs); font-weight: 600; color: var(--crew-ink); }
.attn-priority { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--nx-r-full); font-size: var(--nx-t-xs); font-weight: 500; background: var(--nx-surface-3); color: var(--nx-text-2); }
.attn-priority.tone-danger { background: var(--nx-danger-soft); color: var(--nx-danger); }
.attn-priority.tone-warn { background: var(--nx-warn-soft); color: var(--nx-warn); }
.attn-go { display: inline-flex; align-items: center; gap: 6px; padding-top: 8px; font-size: var(--nx-t-sm); font-weight: 500; color: var(--nx-text-3); white-space: nowrap; }
.attn-go .icon { transition: transform var(--nx-d-fast) var(--nx-ease); }
.attention-item > a:hover .attn-go { color: var(--nx-signal); }
.attention-item > a:hover .attn-go .icon { transform: translateX(3px); }
.attn-verb { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.attention-band.is-narrow .attn-verb { display: none; }
.crew-profile-page .attention-band.is-narrow .attn-crew { display: none; }
.attention-clear { display: flex; align-items: flex-start; gap: var(--nx-3); padding: var(--nx-5); color: var(--nx-text-2); }
.attention-clear .ok { color: var(--nx-ok); flex: none; }

.crew-activity { margin: 0; padding: var(--nx-2) 0; list-style: none; }
.crew-activity-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--nx-3); align-items: start; padding: 10px var(--nx-4); transition: background-color var(--nx-d-fast) var(--nx-ease); }
.crew-activity-row:hover { background: var(--nx-hover); }
.ca-face { position: relative; line-height: 0; }
.ca-face .crew-sigil svg { width: 32px; height: 32px; }
.ca-glyph { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--nx-surface-3); color: var(--nx-text-3); }
.ca-dot { position: absolute; right: -1px; bottom: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--nx-idle); box-shadow: 0 0 0 2px var(--nx-surface); }
.ca-dot.tone-success { background: var(--nx-ok); }
.ca-dot.tone-accent { background: var(--nx-signal); }
.ca-dot.tone-warn { background: var(--nx-warn); border-radius: 2px; }
.ca-dot.tone-danger { background: var(--nx-danger); border-radius: 2px; }
.ca-body { min-width: 0; }
.ca-line { display: block; min-width: 0; }
.ca-name { font-size: var(--nx-t-sm); font-weight: 600; color: var(--crew-ink); margin-right: 4px; }
.ca-what { color: var(--nx-text); }
.ca-what.tone-warn { color: var(--nx-warn); }
.ca-what.tone-danger { color: var(--nx-danger); }
.ca-actor { display: block; margin-top: 1px; font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.ca-when { padding-top: 2px; font-size: var(--nx-t-xs); color: var(--nx-text-3); white-space: nowrap; }

/* ==========================================================================
   L9.5 · THE OPERATION
   ========================================================================== */


/* The department board: one row per department, not a chart of small counts. */
.dept-board { padding: var(--nx-2) var(--nx-3) var(--nx-4); }
.dept-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.dept-row { min-width: 0; }
.dept-row + .dept-row { border-top: 1px solid var(--nx-line); }
/* Two lines, one shape: the state, who they are and what is waiting on the
   first; the proportion and when they last did something on the second. The
   words never fight the meter for width, which is what a four-column row did
   in a column this narrow. */
.dept-row > a, .dept-row > .dr-static {
  display: grid; align-items: center; gap: 6px var(--nx-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "state id count" "state meter last";
  padding: var(--nx-3) var(--nx-2);
  border-radius: var(--nx-r-control);
  color: inherit;
}
.dept-row > a:hover { background: var(--nx-hover); color: inherit; }
.dr-state { grid-area: state; align-self: center; }
.dr-id { grid-area: id; display: flex; align-items: baseline; gap: var(--nx-2); min-width: 0; }
.dr-name { flex: none; font-weight: 600; color: var(--nx-text); }
.dr-role { font-size: var(--nx-t-sm); color: var(--nx-text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-meter { grid-area: meter; height: 5px; }
.dr-meter > span { background: linear-gradient(90deg, var(--crew-1), var(--crew-2)); }
.dr-count { grid-area: count; justify-self: end; font-size: var(--nx-t-sm); font-weight: 600; color: var(--nx-text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dr-count.is-clear { font-weight: 400; color: var(--nx-text-3); }
.dr-last { grid-area: last; justify-self: end; font-size: var(--nx-t-xs); color: var(--nx-text-3); white-space: nowrap; }

.system-panel {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--nx-5);
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), inset 0 3px 0 var(--state-tone, transparent), var(--nx-panel-shadow);
}
.system-panel .sp-head { display: flex; align-items: center; gap: var(--nx-2); }
.system-panel .sp-head .hint-trigger { margin-left: 0; }
.system-panel h3 { font-size: var(--nx-t-sm); font-weight: 500; color: var(--nx-text-3); }
.system-panel .sp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--state-tone, var(--nx-idle)); flex: none; }
.system-panel.kind-error .sp-dot, .system-panel.tone-danger .sp-dot { border-radius: 2px; }
.system-panel.tone-warn .sp-dot { border-radius: 1px; transform: rotate(45deg); }
.system-panel .sp-value { margin: 2px 0 0; font-size: var(--nx-t-xl); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.system-panel .sp-detail { margin: 0; font-size: var(--nx-t-sm); color: var(--nx-text-2); }
.system-panel .sp-go { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--nx-2); font-size: var(--nx-t-sm); font-weight: 500; }
.system-panel .sp-go .icon { transition: transform var(--nx-d-fast) var(--nx-ease); }
.system-panel .sp-go:hover .icon { transform: translateX(3px); }
.system-panel .sp-trace { display: none; }

.command-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--nx-2); border-radius: var(--nx-r-panel); background: var(--nx-surface); box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow); }
.command-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: var(--nx-3); min-width: 0; padding: 10px; border-radius: var(--nx-r-tile); color: var(--nx-text); transition: background-color var(--nx-d-fast) var(--nx-ease); }
.command-tile:hover { background: var(--nx-hover); color: var(--nx-text); }
.ct-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--nx-r-control); background: var(--nx-surface-3); color: var(--crew-ink); }
.ct-body { min-width: 0; }
.ct-label { display: block; font-weight: 500; }
.ct-sub { display: block; font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.ct-go { color: var(--nx-text-4); opacity: 0; transform: translateX(-4px); transition: opacity var(--nx-d-fast) var(--nx-ease), transform var(--nx-d) var(--nx-ease-out); }
.command-tile:hover .ct-go, .command-tile:focus-visible .ct-go { opacity: 1; transform: none; color: var(--nx-signal); }

/* The brand band is retained for any caller, but Mission Control no longer
   draws it: a slogan panel has no job on an operational screen. */
.brand-banner { display: flex; align-items: center; gap: var(--nx-5); padding: var(--nx-5); border-radius: var(--nx-r-panel); background: var(--nx-surface); color: inherit; }
.bb-art { display: none; }
.bb-copy { flex: 1; min-width: 0; }
.bb-line { margin: 0; font-weight: 600; }
.bb-words { margin: 4px 0 0; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.bb-go { color: var(--nx-text-3); }

/* ==========================================================================
   L9.6 · THE CREW PAGES
   ========================================================================== */

.mission-surface { display: block; min-width: 0; }

.mission-header { margin-bottom: var(--nx-2); }
.mission-top { display: flex; align-items: flex-end; gap: var(--nx-5); flex-wrap: wrap; }
.mission-titles { flex: 1 1 360px; min-width: 0; }
.mission-company { margin: 0 0 var(--nx-2); font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.mission-company .sep { margin: 0 6px; }
.mission-header h1 { font-size: var(--nx-t-3xl); letter-spacing: -0.03em; }
.mission-header h1.is-greeting { font-size: var(--nx-t-4xl); }
.mission-lede { margin: var(--nx-2) 0 0; font-size: var(--nx-t-md); color: var(--nx-text-2); max-width: 64ch; }
.mission-strapline { margin: var(--nx-1) 0 0; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.mission-aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--nx-2); }
.mission-actions { display: flex; gap: var(--nx-2); flex-wrap: wrap; }
.mission-fresh { margin: 0; font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.mission-signals { display: flex; flex-wrap: wrap; gap: var(--nx-3) var(--nx-8); margin-top: var(--nx-6); }
.mission-signal { position: relative; min-width: 0; }
.mission-signal > a { display: block; color: inherit; }
.mission-signal .ms-icon { display: none; }
.mission-signal .ms-body { display: flex; flex-direction: column; }
.mission-signal .v { order: 2; font-size: var(--nx-t-3xl); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; color: var(--nx-text); }
.mission-signal .k { order: 1; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.mission-signal > .ms-body, .mission-signal { display: flex; flex-direction: column; }
.mission-signal.tone-warn .v { color: var(--nx-warn); }
.mission-signal.tone-danger .v { color: var(--nx-danger); }
.mission-signal .hint { margin-left: 0; }

.crew-directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); gap: var(--nx-4); align-items: stretch; }
/* A directory entry is a person first: the portrait takes its own column and
   everything about them reads down beside it. The head's wrapper is dissolved
   with display: contents so its three parts join the card's grid directly. */
.crew-profile-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-auto-rows: min-content;
  column-gap: var(--nx-5); row-gap: var(--nx-3);
  align-content: start;
  min-width: 0; padding: var(--nx-5);
  border-radius: var(--nx-r-panel);
  background: var(--nx-surface);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
  transition: background-color var(--nx-d) var(--nx-ease), transform var(--nx-d) var(--nx-ease-out);
}
.crew-profile-card:hover { background: var(--nx-surface-2); transform: translateY(-2px); }
.crew-profile-card.is-future { background: color-mix(in srgb, var(--nx-surface) 55%, transparent); box-shadow: inset 0 0 0 1px var(--nx-line); }
.crew-profile-card.is-future:hover { transform: none; }
.cpc-head { display: contents; }
.cpc-head > .crew-sigil { grid-column: 1; grid-row: 1 / span 8; align-self: start; }
.cpc-head > .crew-sigil svg { width: 112px; height: 112px; }
.crew-profile-card > :not(.cpc-head) { grid-column: 2; }
.cpc-head > .crew-status { grid-column: 2; justify-self: start; }
.cpc-who { grid-column: 2; min-width: 0; }
.cpc-who h3 { font-size: var(--nx-t-xl); letter-spacing: 0; }
.cpc-who p { margin: 2px 0 0; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.cpc-tagline { margin: 0; font-weight: 600; color: var(--crew-ink); }
.crew-profile-card.is-future .cpc-tagline { color: var(--nx-text-3); }
.cpc-mission { margin: 0; color: var(--nx-text-2); }
.cpc-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.card-body .cpc-skills + p { margin-top: var(--nx-4); }
.cpc-skills li { height: 26px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: var(--nx-r-full); background: var(--nx-surface-3); font-size: var(--nx-t-xs); color: var(--nx-text-2); }
.cpc-note { margin: 0; padding: var(--nx-3); border-radius: var(--nx-r-tile); background: var(--nx-surface-2); font-size: var(--nx-t-sm); color: var(--nx-text-2); }
.cpc-actions { display: flex; gap: var(--nx-2); flex-wrap: wrap; padding-top: var(--nx-1); }

.crew-profile-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--nx-6); align-items: center;
  padding: var(--nx-6) var(--nx-7);
  border-radius: var(--nx-r-chrome);
  background-color: var(--nx-surface);
  background-image: radial-gradient(520px 220px at 0% 50%, color-mix(in srgb, var(--crew-1) 13%, transparent), transparent 72%);
  box-shadow: inset 0 1px 0 var(--nx-edge), var(--nx-panel-shadow);
}
.crew-profile-hero .crew-sigil { justify-self: start; }

/* The portrait and, for a company admin, the controls to replace it. */
.cph-portrait { display: flex; flex-direction: column; align-items: center; gap: var(--nx-3); justify-self: start; }
.cph-photo { display: flex; flex-direction: column; align-items: center; gap: var(--nx-2); max-width: 190px; }
.cph-photo-upload { display: flex; gap: var(--nx-2); align-items: center; flex-wrap: wrap; justify-content: center; }
/* Chosen before the file, because choosing the file sends the form. */
.cph-photo-crop { display: inline-flex; align-items: center; gap: 6px; font-size: var(--nx-t-xs); color: var(--nx-text-3); order: -1; flex-basis: 100%; justify-content: center; }
.cph-photo-crop select { height: 28px; width: auto; padding-block: 0; font-size: var(--nx-t-xs); }
.cph-photo-pick { cursor: pointer; }
.cph-photo-pick:focus-within { box-shadow: var(--nx-focus); }
.cph-photo-pick.is-busy { opacity: 0.6; pointer-events: none; }
/* The name, and for a company admin a disclosure to rename them. */
.cph-name { display: flex; align-items: center; gap: var(--nx-3); flex-wrap: wrap; min-width: 0; }
.cph-name h1 { min-width: 0; overflow-wrap: anywhere; }
.cph-rename { position: relative; }
.cph-rename > summary { list-style: none; cursor: pointer; color: var(--nx-text-3); }
.cph-rename > summary::-webkit-details-marker { display: none; }
.cph-rename[open] > summary { color: var(--nx-text); background: var(--nx-hover); }
.cph-rename-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 40;
  width: min(360px, calc(100vw - 48px));
  display: flex; flex-direction: column; gap: var(--nx-3);
  padding: var(--nx-3);
  border-radius: var(--nx-r-panel);
  background: var(--nx-elevated);
  box-shadow: inset 0 1px 0 var(--nx-edge-strong), var(--nx-float-lg), var(--nx-panel-shadow);
}
.cph-rename-form { display: flex; gap: var(--nx-2); }
.cph-rename-form input { flex: 1; min-width: 0; height: 36px; }
.cph-rename-form .btn { height: 36px; }
.cph-rename-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--nx-2); flex-wrap: wrap; margin: 0; font-size: var(--nx-t-sm); color: var(--nx-text-3); }
.cph-rename-foot strong { color: var(--nx-text-2); font-weight: 600; }
/* On a phone the panel opens in place under the name rather than floating,
   because the profile card clips anything that overhangs it. */
@media (max-width: 767px) {
  .cph-rename[open] { flex-basis: 100%; }
  .cph-rename-panel { position: static; width: 100%; margin-top: var(--nx-2); }
}
.cph-photo-hint { margin: 0; font-size: var(--nx-t-xs); color: var(--nx-text-3); text-align: center; text-wrap: balance; }
.crew-profile-hero .crew-sigil svg { width: 148px; height: 148px; }
.cph-who { min-width: 0; }
.cph-who h1 { font-size: var(--nx-t-4xl); letter-spacing: -0.03em; }
.cph-role { margin: 4px 0 0; font-size: var(--nx-t-lg); font-weight: 500; color: var(--crew-ink); }
.cph-tagline { margin: var(--nx-3) 0 0; font-weight: 600; color: var(--nx-text); }
.cph-mission { margin: var(--nx-2) 0 0; color: var(--nx-text-2); max-width: 62ch; }
.cph-state { display: flex; flex-direction: column; align-items: flex-end; gap: var(--nx-3); }
.cph-task { margin: 0; max-width: 32ch; padding: var(--nx-3) var(--nx-4); border-radius: var(--nx-r-tile); background: var(--nx-surface-2); text-align: right; color: var(--nx-text); }
.cph-task-label { display: block; margin-bottom: 2px; font-size: var(--nx-t-xs); color: var(--nx-text-3); }

.mission-lower { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--nx-5); align-items: start; }
.mission-lower.two { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.mission-lower.single { grid-template-columns: minmax(0, 1fr); max-width: 780px; }
.mission-lower > section, .mission-lower > .stack { min-width: 0; }
/* A column with nothing to say (an unreleased specialist has no metrics and no
   queue) takes no row, so it leaves no gap either. */
.mission-lower > .stack:not(:has(> *)) { display: none; }
.profile-motif { display: flex; flex-direction: column; gap: var(--nx-2); margin: var(--nx-4) 0; }
.sl-caption { margin: 0; font-size: var(--nx-t-xs); color: var(--nx-text-3); }
.profile-metrics { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); border-top: 1px solid var(--nx-line); }
.profile-metrics .station-metric > a, .profile-metrics .station-metric > .sm-static { margin: 0; padding: var(--nx-2) 0; }
.profile-metrics .station-metric .v { font-size: var(--nx-t-2xl); }

/* ==========================================================================
   L9.7 · RESPONSIVE
   ========================================================================== */

@media (max-width: 1360px) {
  .crew-grid.count-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mc-lower { grid-template-columns: minmax(0, 1fr); }
  /* The board is wider here, but so are the words: let the state capsule size
     to its own label again rather than holding a desktop column open. */
}
@media (max-width: 1180px) {
  .mc-stage { grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 0; }
  .crew-grid.count-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crew-profile-hero { grid-template-columns: auto minmax(0, 1fr); }
  .cph-state { grid-column: 1 / -1; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .cph-task { text-align: left; }
  .mission-lower, .mission-lower.two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1023px) {
  .crew-grid.count-3, .crew-grid.count-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mc-greeting { font-size: var(--nx-t-3xl); }
}

/* Phone: the team becomes a row the thumb flicks through, one colleague at a
   time, rather than five stacked cards to scroll past before reaching what
   needs a decision. */
@media (max-width: 767px) {
  .mc { gap: var(--nx-5); }
  .mc-stage { padding: var(--nx-6) var(--nx-5) var(--nx-5); border-radius: var(--nx-r-panel); background-position: center, center, 70% 30%; }
  .mc-greeting { font-size: 30px; }
  .mc-lede { font-size: var(--nx-t-md); }
  .exec-cell .v { font-size: var(--nx-t-xl); }
  .crew-grid, .crew-grid.count-1, .crew-grid.count-2, .crew-grid.count-3, .crew-grid.count-4, .crew-grid.count-5 {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(250px, 78%);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .crew-grid::-webkit-scrollbar { display: none; }
  .crew-station { scroll-snap-align: start; }
  /* On a phone the row keeps the state beside the name and puts the meter,
     the count and the time on their own lines. */
  .dept-row > a, .dept-row > .dr-static {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "state id" "meter meter" "count last";
  }
  .dr-count { justify-self: start; }
  .mc-section-head h2 { font-size: var(--nx-t-lg); }
  .crew-profile-hero { grid-template-columns: minmax(0, 1fr); padding: var(--nx-5); border-radius: var(--nx-r-panel); }
  .crew-profile-hero .crew-sigil svg { width: 104px; height: 104px; }
  .cph-who h1 { font-size: var(--nx-t-3xl); }
  .crew-directory { grid-template-columns: minmax(0, 1fr); }
  .crew-profile-card { grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--nx-4); padding: var(--nx-4); }
  .cpc-head > .crew-sigil svg { width: 72px; height: 72px; }
  .cpc-head > .crew-sigil { grid-row: 1 / span 3; }
  .crew-profile-card > :not(.cpc-head) { grid-column: 1 / -1; }
  .mission-signals { gap: var(--nx-4) var(--nx-6); }
  .mission-signal .v { font-size: var(--nx-t-2xl); }
  .attention-item > a, .attention-item .attn-static { grid-template-columns: 32px minmax(0, 1fr); }
  .attn-go { display: none; }
  .ca-actor { display: none; }
}

/* ==========================================================================
   L9.9 · MOTION WITH A FACT BEHIND IT
   The office window, live mode, the working hologram and card tilt. Every
   loop here is either scenery that claims nothing (the office) or evidence
   (a job the product reported running, a stream actually connected).
   ========================================================================== */

/* --- the office window: a slow video behind the greeting ------------------ */
.mc-stage > .mc-stage-copy, .mc-stage > .mc-stage-figures { position: relative; z-index: 2; }
.mc-stage-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 38%;
  opacity: 0; pointer-events: none;
  transition: opacity 1400ms var(--nx-ease-out);
}
.mc-stage-video.is-playing { opacity: 1; }
/* The veil the still photograph carries, laid over the video instead once it
   plays, so no sentence is ever read against moving picture. */
.mc-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--nx-stage-veil), var(--nx-stage-floor);
  opacity: 0; transition: opacity 1400ms var(--nx-ease-out);
}
.mc-stage.is-ambient::after { opacity: 1; }

/* --- live mode ------------------------------------------------------------- */
.live-slot { display: contents; }
.mc-live {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px 0 8px;
  border-radius: var(--nx-r-full);
  background: var(--nx-live-soft); color: var(--nx-live);
  font-size: var(--nx-t-xs); font-weight: 600;
}
.mc-live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
@media (prefers-reduced-motion: no-preference) {
  .mc-live-dot { animation: nx-live-breathe 2.4s var(--nx-ease-inout) infinite; }
  .is-updated > *, [data-live-region].is-updated { animation: nx-live-flash 700ms var(--nx-ease-out); }
}

/* --- the working hologram ---------------------------------------------------
   Drawn only on a station marked .is-live, which is set from the product's own
   report that a job is running, and only on a profile whose specialist has a
   current task. Ready, attention, error, setup and offline are all still. */
.station-holo {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  border-radius: inherit; overflow: hidden;
  background: repeating-linear-gradient(0deg, color-mix(in srgb, var(--nx-live) 9%, transparent) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nx-live) 40%, transparent), inset 0 0 28px color-mix(in srgb, var(--nx-live) 22%, transparent);
  mix-blend-mode: screen;
}
.station-holo::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--nx-live) 30%, transparent) 55%, color-mix(in srgb, #ffffff 22%, transparent) 60%, transparent);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .station-holo::before { animation: nx-holo-scan 3.6s var(--nx-ease-inout) infinite; }
}

.cph-portrait { position: relative; }
.cph-holo {
  position: absolute; top: -8px; left: 50%; z-index: 0;
  width: 164px; height: 164px; margin-left: -82px;
  border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0turn, color-mix(in srgb, var(--nx-live) 75%, transparent) 0.12turn, transparent 0.3turn, transparent 0.55turn, color-mix(in srgb, var(--crew-1) 70%, transparent) 0.68turn, transparent 0.85turn);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nx-live) 60%, transparent));
}
.cph-portrait .crew-sigil { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cph-holo { animation: nx-holo-spin 6s linear infinite; }
}
@media (max-width: 560px) {
  .cph-holo { width: 120px; height: 120px; margin-left: -60px; }
}

/* --- card tilt: follows a pointer, never moves on its own ----------------- */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  [data-tilt] {
    transform: perspective(900px) rotateX(0deg) rotateY(0deg);
    transition: transform 420ms var(--nx-ease-out), background-color var(--nx-d) var(--nx-ease);
    will-change: transform;
  }
  [data-tilt].is-tilting {
    transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateZ(0);
    transition-duration: 90ms, var(--nx-d);
  }
  [data-tilt] > .tilt-glare, .crew-station[data-tilt]::before, .crew-profile-card[data-tilt]::before {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, 0.07), transparent 48%);
    opacity: 0; transition: opacity 320ms var(--nx-ease-out);
  }
  .crew-station.is-tilting::before, .crew-profile-card.is-tilting::before { opacity: 1; }
  .crew-profile-card[data-tilt] { position: relative; }
}

/* ==========================================================================
   L9 · GENERATED
   Written by packages/ui/src/design/generated.ts. Do not hand-edit the output:
   change the generator.
   ========================================================================== */

/* --- cascade steps (CSP forbids an inline animation-delay) --------------- */
.nx-d1 { animation-delay: 42ms; }
.nx-d2 { animation-delay: 84ms; }
.nx-d3 { animation-delay: 126ms; }
.nx-d4 { animation-delay: 168ms; }
.nx-d5 { animation-delay: 210ms; }
.nx-d6 { animation-delay: 252ms; }
.nx-d7 { animation-delay: 294ms; }
.nx-d8 { animation-delay: 336ms; }
.nx-d9 { animation-delay: 356ms; }
.nx-d10 { animation-delay: 376ms; }
.nx-d11 { animation-delay: 396ms; }
.nx-d12 { animation-delay: 416ms; }
.nx-d13 { animation-delay: 436ms; }
.nx-d14 { animation-delay: 456ms; }
.nx-d15 { animation-delay: 476ms; }
.nx-d16 { animation-delay: 496ms; }

/* --- proportional fill widths (CSP forbids an inline style) -------------- */
.pct-0 > span { width: 0%; }
.pct-1 > span { width: 1%; }
.pct-2 > span { width: 2%; }
.pct-3 > span { width: 3%; }
.pct-4 > span { width: 4%; }
.pct-5 > span { width: 5%; }
.pct-6 > span { width: 6%; }
.pct-7 > span { width: 7%; }
.pct-8 > span { width: 8%; }
.pct-9 > span { width: 9%; }
.pct-10 > span { width: 10%; }
.pct-11 > span { width: 11%; }
.pct-12 > span { width: 12%; }
.pct-13 > span { width: 13%; }
.pct-14 > span { width: 14%; }
.pct-15 > span { width: 15%; }
.pct-16 > span { width: 16%; }
.pct-17 > span { width: 17%; }
.pct-18 > span { width: 18%; }
.pct-19 > span { width: 19%; }
.pct-20 > span { width: 20%; }
.pct-21 > span { width: 21%; }
.pct-22 > span { width: 22%; }
.pct-23 > span { width: 23%; }
.pct-24 > span { width: 24%; }
.pct-25 > span { width: 25%; }
.pct-26 > span { width: 26%; }
.pct-27 > span { width: 27%; }
.pct-28 > span { width: 28%; }
.pct-29 > span { width: 29%; }
.pct-30 > span { width: 30%; }
.pct-31 > span { width: 31%; }
.pct-32 > span { width: 32%; }
.pct-33 > span { width: 33%; }
.pct-34 > span { width: 34%; }
.pct-35 > span { width: 35%; }
.pct-36 > span { width: 36%; }
.pct-37 > span { width: 37%; }
.pct-38 > span { width: 38%; }
.pct-39 > span { width: 39%; }
.pct-40 > span { width: 40%; }
.pct-41 > span { width: 41%; }
.pct-42 > span { width: 42%; }
.pct-43 > span { width: 43%; }
.pct-44 > span { width: 44%; }
.pct-45 > span { width: 45%; }
.pct-46 > span { width: 46%; }
.pct-47 > span { width: 47%; }
.pct-48 > span { width: 48%; }
.pct-49 > span { width: 49%; }
.pct-50 > span { width: 50%; }
.pct-51 > span { width: 51%; }
.pct-52 > span { width: 52%; }
.pct-53 > span { width: 53%; }
.pct-54 > span { width: 54%; }
.pct-55 > span { width: 55%; }
.pct-56 > span { width: 56%; }
.pct-57 > span { width: 57%; }
.pct-58 > span { width: 58%; }
.pct-59 > span { width: 59%; }
.pct-60 > span { width: 60%; }
.pct-61 > span { width: 61%; }
.pct-62 > span { width: 62%; }
.pct-63 > span { width: 63%; }
.pct-64 > span { width: 64%; }
.pct-65 > span { width: 65%; }
.pct-66 > span { width: 66%; }
.pct-67 > span { width: 67%; }
.pct-68 > span { width: 68%; }
.pct-69 > span { width: 69%; }
.pct-70 > span { width: 70%; }
.pct-71 > span { width: 71%; }
.pct-72 > span { width: 72%; }
.pct-73 > span { width: 73%; }
.pct-74 > span { width: 74%; }
.pct-75 > span { width: 75%; }
.pct-76 > span { width: 76%; }
.pct-77 > span { width: 77%; }
.pct-78 > span { width: 78%; }
.pct-79 > span { width: 79%; }
.pct-80 > span { width: 80%; }
.pct-81 > span { width: 81%; }
.pct-82 > span { width: 82%; }
.pct-83 > span { width: 83%; }
.pct-84 > span { width: 84%; }
.pct-85 > span { width: 85%; }
.pct-86 > span { width: 86%; }
.pct-87 > span { width: 87%; }
.pct-88 > span { width: 88%; }
.pct-89 > span { width: 89%; }
.pct-90 > span { width: 90%; }
.pct-91 > span { width: 91%; }
.pct-92 > span { width: 92%; }
.pct-93 > span { width: 93%; }
.pct-94 > span { width: 94%; }
.pct-95 > span { width: 95%; }
.pct-96 > span { width: 96%; }
.pct-97 > span { width: 97%; }
.pct-98 > span { width: 98%; }
.pct-99 > span { width: 99%; }
.pct-100 > span { width: 100%; }

/* --- segment widths (CSP forbids an inline style) ----------------------- */
.seg-0 { flex: 0 1 0%; }
.seg-1 { flex: 0 1 1%; }
.seg-2 { flex: 0 1 2%; }
.seg-3 { flex: 0 1 3%; }
.seg-4 { flex: 0 1 4%; }
.seg-5 { flex: 0 1 5%; }
.seg-6 { flex: 0 1 6%; }
.seg-7 { flex: 0 1 7%; }
.seg-8 { flex: 0 1 8%; }
.seg-9 { flex: 0 1 9%; }
.seg-10 { flex: 0 1 10%; }
.seg-11 { flex: 0 1 11%; }
.seg-12 { flex: 0 1 12%; }
.seg-13 { flex: 0 1 13%; }
.seg-14 { flex: 0 1 14%; }
.seg-15 { flex: 0 1 15%; }
.seg-16 { flex: 0 1 16%; }
.seg-17 { flex: 0 1 17%; }
.seg-18 { flex: 0 1 18%; }
.seg-19 { flex: 0 1 19%; }
.seg-20 { flex: 0 1 20%; }
.seg-21 { flex: 0 1 21%; }
.seg-22 { flex: 0 1 22%; }
.seg-23 { flex: 0 1 23%; }
.seg-24 { flex: 0 1 24%; }
.seg-25 { flex: 0 1 25%; }
.seg-26 { flex: 0 1 26%; }
.seg-27 { flex: 0 1 27%; }
.seg-28 { flex: 0 1 28%; }
.seg-29 { flex: 0 1 29%; }
.seg-30 { flex: 0 1 30%; }
.seg-31 { flex: 0 1 31%; }
.seg-32 { flex: 0 1 32%; }
.seg-33 { flex: 0 1 33%; }
.seg-34 { flex: 0 1 34%; }
.seg-35 { flex: 0 1 35%; }
.seg-36 { flex: 0 1 36%; }
.seg-37 { flex: 0 1 37%; }
.seg-38 { flex: 0 1 38%; }
.seg-39 { flex: 0 1 39%; }
.seg-40 { flex: 0 1 40%; }
.seg-41 { flex: 0 1 41%; }
.seg-42 { flex: 0 1 42%; }
.seg-43 { flex: 0 1 43%; }
.seg-44 { flex: 0 1 44%; }
.seg-45 { flex: 0 1 45%; }
.seg-46 { flex: 0 1 46%; }
.seg-47 { flex: 0 1 47%; }
.seg-48 { flex: 0 1 48%; }
.seg-49 { flex: 0 1 49%; }
.seg-50 { flex: 0 1 50%; }
.seg-51 { flex: 0 1 51%; }
.seg-52 { flex: 0 1 52%; }
.seg-53 { flex: 0 1 53%; }
.seg-54 { flex: 0 1 54%; }
.seg-55 { flex: 0 1 55%; }
.seg-56 { flex: 0 1 56%; }
.seg-57 { flex: 0 1 57%; }
.seg-58 { flex: 0 1 58%; }
.seg-59 { flex: 0 1 59%; }
.seg-60 { flex: 0 1 60%; }
.seg-61 { flex: 0 1 61%; }
.seg-62 { flex: 0 1 62%; }
.seg-63 { flex: 0 1 63%; }
.seg-64 { flex: 0 1 64%; }
.seg-65 { flex: 0 1 65%; }
.seg-66 { flex: 0 1 66%; }
.seg-67 { flex: 0 1 67%; }
.seg-68 { flex: 0 1 68%; }
.seg-69 { flex: 0 1 69%; }
.seg-70 { flex: 0 1 70%; }
.seg-71 { flex: 0 1 71%; }
.seg-72 { flex: 0 1 72%; }
.seg-73 { flex: 0 1 73%; }
.seg-74 { flex: 0 1 74%; }
.seg-75 { flex: 0 1 75%; }
.seg-76 { flex: 0 1 76%; }
.seg-77 { flex: 0 1 77%; }
.seg-78 { flex: 0 1 78%; }
.seg-79 { flex: 0 1 79%; }
.seg-80 { flex: 0 1 80%; }
.seg-81 { flex: 0 1 81%; }
.seg-82 { flex: 0 1 82%; }
.seg-83 { flex: 0 1 83%; }
.seg-84 { flex: 0 1 84%; }
.seg-85 { flex: 0 1 85%; }
.seg-86 { flex: 0 1 86%; }
.seg-87 { flex: 0 1 87%; }
.seg-88 { flex: 0 1 88%; }
.seg-89 { flex: 0 1 89%; }
.seg-90 { flex: 0 1 90%; }
.seg-91 { flex: 0 1 91%; }
.seg-92 { flex: 0 1 92%; }
.seg-93 { flex: 0 1 93%; }
.seg-94 { flex: 0 1 94%; }
.seg-95 { flex: 0 1 95%; }
.seg-96 { flex: 0 1 96%; }
.seg-97 { flex: 0 1 97%; }
.seg-98 { flex: 0 1 98%; }
.seg-99 { flex: 0 1 99%; }
.seg-100 { flex: 0 1 100%; }