/* GENERATED:TOKENS:START -- edit tokens.v1.json, run python3 scripts/generate_tokens.py */
:root {
  --nozomi-bg: #111315;
  --nozomi-sidebar: #15181b;
  --nozomi-panel: #181b1f;
  --nozomi-surface: #23292f;
  --nozomi-surface-raised: #272d34;
  --nozomi-border: #2c3339;
  --nozomi-border-strong: #3a434b;
  --nozomi-text: #c4c9cf;
  --nozomi-text-strong: #f0f3f5;
  --nozomi-text-muted: #9aa3ad;
  --nozomi-accent: #d87050;
  --nozomi-accent-hover: #e18363;
  --nozomi-accent-dark: #b95c42;
  --nozomi-accent-soft: #f0a46f;
  --nozomi-cyan: #7ab6cc;
  --nozomi-success: #8ac27e;
  --nozomi-warning: #e9bd62;
  --nozomi-danger: #e07575;
  --nozomi-focus: rgba(122, 182, 204, 0.48);
  --nozomi-accent-bg: rgba(216, 112, 80, 0.20);
  --nozomi-accent-bg-hover: rgba(216, 112, 80, 0.28);
  --nozomi-accent-border: rgba(232, 168, 124, 0.48);

  /* Surface overlay scale -- use these instead of ad-hoc bg-white/[0.0xx]. */
  --nozomi-overlay-subtle: rgba(255, 255, 255, 0.025);
  --nozomi-overlay-soft: rgba(255, 255, 255, 0.04);
  --nozomi-overlay-medium: rgba(255, 255, 255, 0.06);
  --nozomi-overlay-strong: rgba(255, 255, 255, 0.09);

  /* Status tone overlays -- tinted backgrounds and borders for alerts/badges. */
  --nozomi-danger-bg: rgba(224, 117, 117, 0.10);
  --nozomi-danger-border: rgba(224, 117, 117, 0.30);
  --nozomi-danger-text: #ecb4b4;
  --nozomi-warning-bg: rgba(233, 189, 98, 0.10);
  --nozomi-warning-border: rgba(233, 189, 98, 0.30);
  --nozomi-warning-text: #e9c685;
  --nozomi-success-bg: rgba(138, 194, 126, 0.10);
  --nozomi-success-border: rgba(138, 194, 126, 0.30);
  --nozomi-success-text: #b8dca8;
  --nozomi-info-bg: rgba(122, 182, 204, 0.10);
  --nozomi-info-border: rgba(122, 182, 204, 0.30);
  --nozomi-info-text: #aacfdf;

  /* Radius scale -- control 6 / panel 7 / dialog 8. */
  --nozomi-radius-small: 4px;
  --nozomi-radius-control: 6px;
  --nozomi-radius-panel: 7px;
  --nozomi-radius-dialog: 8px;

  /* Control sizing. */
  --nozomi-size-control: 34px;
  --nozomi-size-control-sm: 28px;
  --nozomi-size-icon-button: 32px;
  --nozomi-size-sidebar: 280px;
  --nozomi-size-target-min: 24px;

  /* Spacing scale -- 4px grid for gaps and padding rhythm. */
  --nozomi-space-1: 4px;
  --nozomi-space-2: 8px;
  --nozomi-space-3: 12px;
  --nozomi-space-4: 16px;
  --nozomi-space-5: 24px;
  --nozomi-space-6: 32px;

  /* Motion -- fast: state feedback; base: value change; slow: entrances;
     spin/shimmer: component-internal loop cadences. */
  --nozomi-motion-fast: 120ms;
  --nozomi-motion-base: 240ms;
  --nozomi-motion-slow: 480ms;
  --nozomi-motion-spin: 720ms;
  --nozomi-motion-shimmer: 1400ms;
  --nozomi-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --nozomi-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1);

  /* Typography scale shared by Kernel, Forge, and Arena dashboards. */
  --nozomi-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --nozomi-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --nozomi-font-body: 14px;
  --nozomi-line-body: 1.5;
  --nozomi-font-control: 13px;
  --nozomi-font-small: 12px;
  --nozomi-font-message: 13.5px;
  --nozomi-font-caption: 10px;
  --nozomi-font-label: 10px;
  --nozomi-font-section-title: 16px;
  --nozomi-font-page-title: 22px;
  --nozomi-font-heading-compact: 22px;
  --nozomi-line-tight: 1.1;
  --nozomi-line-message: 1.45;
  --nozomi-line-longform: 1.58;
  --nozomi-weight-medium: 500;
  --nozomi-weight-semibold: 650;
  --nozomi-weight-bold: 700;

  /* Categorical chart palette -- series, personas, avatars. Cycle in order. */
  --nozomi-chart-1: #d87050;
  --nozomi-chart-2: #7ab6cc;
  --nozomi-chart-3: #f0a46f;
  --nozomi-chart-4: #b7d37a;
  --nozomi-chart-5: #c58bd8;
  --nozomi-chart-6: #76c893;
  --nozomi-chart-7: #e5989b;
  --nozomi-chart-8: #8ea7e9;
  --nozomi-chart-9: #f2cc8f;
  --nozomi-chart-10: #b8c0ff;

  /* Shadow scale. */
  --nozomi-shadow-panel: 0 18px 48px rgba(0, 0, 0, 0.28);
  --nozomi-shadow-raised: 0 8px 18px rgba(0, 0, 0, 0.28);
  --nozomi-shadow-dialog: 0 24px 80px rgba(0, 0, 0, 0.5);
  --nozomi-glow-accent: 0 0 14px rgba(216, 112, 80, 0.30);
  --nozomi-glow-cyan: 0 0 12px rgba(122, 182, 204, 0.45);
}
/* GENERATED:TOKENS:END */

/* ---------- Native chrome ----------
   The palette is dark, so declare it to the engine once here. This is what
   makes browser-drawn surfaces the shared tokens cannot reach -- scrollbars,
   date and colour pickers, select popups, spellcheck underlines, and autofill
   -- render dark instead of light. Consumers must not restate it. */
/* Scrollbars are thin and track-less: dense operator tables and log panes
   scroll constantly, and full-weight scrollbar chrome competes with the data.
   `scrollbar-color` inherits and so is declared once on the root, but
   `scrollbar-width` does not -- on the root it would thin only the page
   scroller and leave every nested pane, dialog, and table at full weight, so
   it has to reach every element. Both carry zero specificity, so a consumer
   overrides one region by naming it (`.pane { scrollbar-width: none }`).
   Standard properties only -- setting `scrollbar-color` makes Blink ignore
   ::-webkit-scrollbar rules, so the two syntaxes cannot be combined. */
:root {
  color-scheme: dark;
  scrollbar-color: var(--nozomi-border-strong) transparent;
}
* {
  scrollbar-width: thin;
}

/* Canonical focus ring -- keystroke navigation only. */
*:focus-visible {
  outline: 2px solid var(--nozomi-focus);
  outline-offset: 2px;
  border-radius: inherit;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline-offset: 1px;
}

/* ---------- Shared utility classes ---------- */

.nz-card {
  border-radius: var(--nozomi-radius-panel);
  border: 1px solid var(--nozomi-border);
  background: var(--nozomi-overlay-soft);
}

.nz-card-raised {
  border-radius: var(--nozomi-radius-panel);
  border: 1px solid var(--nozomi-border-strong);
  background: var(--nozomi-surface);
}

.nz-panel {
  border-radius: var(--nozomi-radius-panel);
  border: 1px solid var(--nozomi-border);
  background: var(--nozomi-overlay-soft);
  box-shadow: var(--nozomi-shadow-panel);
}

.nz-panel-header {
  border-bottom: 1px solid var(--nozomi-border);
}

.nz-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-overlay-subtle);
  padding: 8px;
}

.nz-metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 124px), 1fr));
  margin: 0;
  border-top: 1px solid var(--nozomi-border);
  background: var(--nozomi-border);
  gap: 1px;
}

.nz-metric-strip-item {
  min-width: 0;
  background: var(--nozomi-bg);
  padding: 12px 16px;
}

.nz-metric-strip-value {
  margin-top: 6px;
  overflow: hidden;
  color: var(--nozomi-text-strong);
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-page-title);
  font-weight: var(--nozomi-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--nozomi-line-tight);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nz-metric-strip-detail {
  margin-top: 4px;
  overflow: hidden;
  color: var(--nozomi-text-muted);
  font-size: var(--nozomi-font-small);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nz-empty-state {
  display: flex;
  min-height: 150px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--nozomi-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-overlay-subtle);
  padding: 28px 20px;
  text-align: center;
}

.nz-empty-state-compact {
  min-height: 96px;
  padding: 18px 16px;
}

.nz-empty-state-mark {
  width: 28px;
  height: 4px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: var(--nozomi-border-strong);
  box-shadow: 0 0 0 1px var(--nozomi-border);
}

.nz-empty-state-description {
  max-width: 36rem;
  margin-top: 6px;
  color: var(--nozomi-text-muted);
  font-size: var(--nozomi-font-control);
  line-height: var(--nozomi-line-body);
}

.nz-empty-state-action {
  margin-top: 14px;
}

.nz-input {
  width: 100%;
  border-radius: var(--nozomi-radius-control);
  border: 1px solid var(--nozomi-border);
  background: var(--nozomi-overlay-subtle);
  color: var(--nozomi-text-strong);
  padding: 6px 10px;
  font-size: var(--nozomi-font-control);
  line-height: 1.4;
  min-height: var(--nozomi-size-control);
  outline: none;
  transition: border-color var(--nozomi-motion-fast) var(--nozomi-ease), box-shadow var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-input::placeholder { color: var(--nozomi-text-muted); }
.nz-input:hover { border-color: var(--nozomi-border-strong); }
.nz-input:focus {
  border-color: var(--nozomi-border-strong);
  box-shadow: 0 0 0 2px var(--nozomi-focus);
}
.nz-input:disabled { opacity: 0.5; cursor: not-allowed; }

.nz-switch {
  display: inline-grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--nozomi-text);
  cursor: pointer;
}
.nz-switch > input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nz-switch-track {
  display: flex;
  width: 36px;
  height: 20px;
  align-items: center;
  border: 1px solid var(--nozomi-border-strong);
  border-radius: 999px;
  background: var(--nozomi-overlay-strong);
  padding: 2px;
  transition: background var(--nozomi-motion-fast) var(--nozomi-ease), border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-switch-track > span {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--nozomi-text-muted);
  transition: transform var(--nozomi-motion-fast) var(--nozomi-ease), background var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-switch > input:checked + .nz-switch-track {
  border-color: var(--nozomi-info-border);
  background: var(--nozomi-info-bg);
}
.nz-switch > input:checked + .nz-switch-track > span {
  transform: translateX(16px);
  background: var(--nozomi-cyan);
}
.nz-switch > input:focus-visible + .nz-switch-track {
  outline: 2px solid var(--nozomi-focus);
  outline-offset: 2px;
}
.nz-switch-copy { display: grid; gap: 2px; min-width: 0; }
.nz-switch-label { color: var(--nozomi-text-strong); font-size: var(--nozomi-font-control); }
.nz-switch-description { color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); }
.nz-switch-disabled { cursor: not-allowed; opacity: 0.5; }


.nz-label {
  display: block;
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nozomi-text-muted);
  margin-bottom: 6px;
}

.nz-type-section-title {
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-section-title);
  font-weight: var(--nozomi-weight-semibold);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--nozomi-text-strong);
}

.nz-type-label {
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-bold);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nozomi-text-muted);
}

.nz-type-metric-value {
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-page-title);
  font-weight: var(--nozomi-weight-semibold);
  line-height: var(--nozomi-line-tight);
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--nozomi-text-strong);
}

.nz-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: var(--nozomi-radius-control);
  border: 1px solid;
  padding: 8px 12px;
  font-size: var(--nozomi-font-control);
  line-height: 1.45;
}
.nz-alert-error,
.nz-alert-danger {
  border-color: var(--nozomi-danger-border);
  background: var(--nozomi-danger-bg);
  color: var(--nozomi-danger-text);
}
.nz-alert-warning {
  border-color: var(--nozomi-warning-border);
  background: var(--nozomi-warning-bg);
  color: var(--nozomi-warning-text);
}
.nz-alert-success {
  border-color: var(--nozomi-success-border);
  background: var(--nozomi-success-bg);
  color: var(--nozomi-success-text);
}
.nz-alert-info {
  border-color: var(--nozomi-info-border);
  background: var(--nozomi-info-bg);
  color: var(--nozomi-info-text);
}

/* Row helper for hoverable list items (leaderboard rows, etc.). */
.nz-row-hover {
  transition: background-color var(--nozomi-motion-fast) var(--nozomi-ease), border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-row-hover:hover {
  background: var(--nozomi-overlay-medium);
  border-color: var(--nozomi-border-strong);
}

/* Loading primitives. */
.nz-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--nozomi-border-strong);
  border-top-color: var(--nozomi-accent);
  animation: nz-spin var(--nozomi-motion-spin) linear infinite;
  vertical-align: -2px;
}
@keyframes nz-spin {
  to { transform: rotate(360deg); }
}

.nz-skeleton {
  display: block;
  border-radius: var(--nozomi-radius-control);
  background: linear-gradient(
    90deg,
    var(--nozomi-overlay-subtle) 0%,
    var(--nozomi-overlay-medium) 50%,
    var(--nozomi-overlay-subtle) 100%
  );
  background-size: 200% 100%;
  animation: nz-skeleton-shimmer var(--nozomi-motion-shimmer) ease-in-out infinite;
  color: transparent;
}
@keyframes nz-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}


/* ---------- App shell (280px sidebar rail) ---------- */
/* Shared chrome for Kernel / Forge / Arena. Plain CSS (no Tailwind here), all
   on the --nozomi-* tokens. Apps set --font-display for the header voice; it
   falls back to the mono stack when unset. */

.nz-shell {
  background:
    linear-gradient(180deg, var(--nozomi-overlay-subtle), rgba(255, 255, 255, 0) 120px),
    var(--nozomi-sidebar);
}

.nz-shell-brand {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
  color: var(--nozomi-text-strong);
  font-size: var(--nozomi-font-body);
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: 0;
  text-decoration: none;
}

.nz-shell-brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: var(--nozomi-radius-control);
  object-fit: contain;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 8px 18px rgba(0, 0, 0, 0.28);
}

.nz-shell-brand-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nozomi-text-strong);
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-body);
  font-weight: var(--nozomi-weight-bold);
  line-height: 1;
  letter-spacing: 0.02em;
}

.nz-shell-link {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: var(--nozomi-radius-control);
  padding: 0 12px;
  font-size: var(--nozomi-font-body);
  color: var(--nozomi-text-muted);
  transition: color var(--nozomi-motion-fast) var(--nozomi-ease), background-color var(--nozomi-motion-fast) var(--nozomi-ease), border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-shell-link:hover {
  border-color: var(--nozomi-border);
  background: var(--nozomi-overlay-soft);
  color: var(--nozomi-text-strong);
}
.nz-shell-link-active {
  border-color: var(--nozomi-info-border);
  background: var(--nozomi-info-bg);
  color: var(--nozomi-text-strong);
  box-shadow: inset 3px 0 0 var(--nozomi-cyan);
}

.nz-shell-toggle {
  display: inline-flex;
  width: var(--nozomi-size-icon-button);
  height: var(--nozomi-size-icon-button);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-overlay-subtle);
  color: var(--nozomi-text);
}

.nz-shell-toggle:hover {
  border-color: var(--nozomi-border-strong);
  background: var(--nozomi-overlay-medium);
  color: var(--nozomi-text-strong);
}

.nz-shell-toggle-lines {
  display: grid;
  width: 14px;
  gap: 3px;
}

.nz-shell-toggle-lines > span {
  display: block;
  height: 1px;
  background: currentColor;
}

.nz-shell-link-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--nozomi-text-muted);
}

.nz-shell-link-icon > svg {
  width: 16px;
  height: 16px;
}

.nz-shell-link-meta {
  flex: 0 0 auto;
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-mono);
  font-size: var(--nozomi-font-caption);
  font-variant-numeric: tabular-nums;
}

.nz-shell-section {
  display: flex;
  flex-shrink: 0;
  gap: 8px;
}

.nz-shell-section-label {
  display: none;
  padding: 4px 8px 8px;
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-bold);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nozomi-text-muted);
}

@media (min-width: 768px) {
  .nz-shell-toggle {
    display: none;
  }
  .nz-shell-section {
    display: block;
    flex-shrink: 0;
    border-top: 1px solid var(--nozomi-border);
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .nz-shell-nav {
    overflow-y: auto;
  }
  .nz-shell-section:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .nz-shell-section-label {
    display: block;
  }
  .nz-shell ~ main {
    width: calc(100% - var(--nozomi-size-sidebar)) !important;
    max-width: none !important;
    margin-left: var(--nozomi-size-sidebar) !important;
    margin-right: 0 !important;
    padding-left: clamp(24px, 3vw, 40px) !important;
    padding-right: clamp(24px, 3vw, 40px) !important;
  }
}

/* ---------- Progress primitives ---------- */

.nz-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--nozomi-overlay-strong);
}

.nz-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--nozomi-cyan);
  transition: width var(--nozomi-motion-base) var(--nozomi-ease);
}



/* ---------- Component classes (owned by react.tsx) ----------
   These transcribe the shared components' former inline utility styling 1:1.
   react.tsx emits only nz-* classes; no utility framework is involved. */

/* Generic bits shared by several components. */
.nz-truncate {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nz-mono { font-family: var(--nozomi-font-mono); }
.nz-left { text-align: left; }
.nz-center { text-align: center; }
.nz-right { text-align: right; }
.nz-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nz-desktop-only { display: none !important; }
@media (min-width: 768px) {
  .nz-desktop-only { display: revert !important; }
  .nz-mobile-only { display: none !important; }
}

/* Status tones -- border/background/text sets and text-only variants. */
.nz-tone-neutral { border-color: var(--nozomi-border); background: var(--nozomi-overlay-soft); color: var(--nozomi-text); }
.nz-tone-success { border-color: var(--nozomi-success-border); background: var(--nozomi-success-bg); color: var(--nozomi-success-text); }
.nz-tone-warning { border-color: var(--nozomi-warning-border); background: var(--nozomi-warning-bg); color: var(--nozomi-warning-text); }
.nz-tone-danger { border-color: var(--nozomi-danger-border); background: var(--nozomi-danger-bg); color: var(--nozomi-danger-text); }
.nz-tone-info { border-color: var(--nozomi-info-border); background: var(--nozomi-info-bg); color: var(--nozomi-info-text); }
.nz-tone-text-neutral { color: var(--nozomi-text); }
.nz-tone-text-success { color: var(--nozomi-success-text); }
.nz-tone-text-warning { color: var(--nozomi-warning-text); }
.nz-tone-text-danger { color: var(--nozomi-danger-text); }
.nz-tone-text-info { color: var(--nozomi-info-text); }

/* Badge */
.nz-badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-medium);
}

/* Buttons */
.nz-btn {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--nozomi-radius-control);
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--nozomi-font-body);
  font-weight: var(--nozomi-weight-medium);
  cursor: pointer;
  transition:
    color var(--nozomi-motion-fast) var(--nozomi-ease),
    background-color var(--nozomi-motion-fast) var(--nozomi-ease),
    border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.nz-btn-primary {
  border-color: var(--nozomi-accent-border);
  background: var(--nozomi-accent-bg);
  color: var(--nozomi-text-strong);
}
.nz-btn-primary:hover:not(:disabled) { background: var(--nozomi-accent-bg-hover); }
.nz-btn-secondary {
  border-color: var(--nozomi-border);
  background: var(--nozomi-overlay-subtle);
  color: var(--nozomi-text);
}
.nz-btn-secondary:hover:not(:disabled) {
  background: var(--nozomi-overlay-medium);
  color: var(--nozomi-text-strong);
}
.nz-btn-danger {
  border-color: var(--nozomi-danger-border);
  background: var(--nozomi-danger-bg);
  color: var(--nozomi-danger-text);
}
.nz-btn-danger:hover:not(:disabled) {
  border-color: var(--nozomi-danger);
  color: var(--nozomi-text-strong);
}
.nz-btn-ghost {
  border-color: transparent;
  background: transparent;
  color: var(--nozomi-text-muted);
}
.nz-btn-ghost:hover:not(:disabled) {
  border-color: var(--nozomi-border);
  background: var(--nozomi-overlay-soft);
  color: var(--nozomi-text-strong);
}
.nz-btn-sm { font-size: var(--nozomi-font-small); }
.nz-btn-icon {
  width: var(--nozomi-size-icon-button);
  height: var(--nozomi-size-icon-button);
  padding: 0;
}

/* Panel composition */
.nz-panel-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px;
}
@media (min-width: 640px) {
  .nz-panel-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.nz-panel-titles { min-width: 0; }
.nz-panel-sub {
  margin-top: 4px;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text-muted);
}
.nz-panel-actions { flex-shrink: 0; }
.nz-panel-body { padding: 16px; }

/* Metric tile */
.nz-metric-tile { padding: 16px; }
.nz-metric-tile-value { margin-top: 8px; }

/* Progress */
.nz-progress-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nz-progress-row > .nz-progress {
  min-width: 0;
  flex: 1 1 auto;
}
.nz-progress-value {
  flex-shrink: 0;
  font-size: var(--nozomi-font-small);
  font-variant-numeric: tabular-nums;
  color: var(--nozomi-text-muted);
}
.nz-ring {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--nozomi-border);
  border-radius: 50%;
}
.nz-ring-well {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--nozomi-panel);
  font-size: var(--nozomi-font-small);
  font-variant-numeric: tabular-nums;
  color: var(--nozomi-text-strong);
}

/* Dashed empty box (Empty, diagram fallback). */
.nz-empty-dashed {
  border: 1px dashed var(--nozomi-border);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-overlay-subtle);
  padding: 32px 16px;
  text-align: center;
  font-size: var(--nozomi-font-body);
  color: var(--nozomi-text-muted);
}

/* Network diagram viewer */
.nz-diagram { position: relative; }
.nz-diagram-viewport {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-bg);
  box-shadow: var(--nozomi-shadow-raised);
}
.nz-diagram-viewport svg {
  width: 100%;
  height: 100%;
}
.nz-diagram-viewport-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.nz-diagram-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.nz-diagram-error {
  border: 1px solid var(--nozomi-danger-border);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-danger-bg);
  padding: 12px 16px;
  font-size: var(--nozomi-font-body);
  line-height: 24px;
  color: var(--nozomi-danger-text);
}
.nz-diagram-tooltip {
  position: fixed;
  z-index: 60;
  max-width: 24rem;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-control);
  background: rgba(0, 0, 0, 0.9);
  padding: 8px 12px;
  font-size: var(--nozomi-font-small);
  line-height: 20px;
  color: var(--nozomi-text-strong);
  box-shadow: var(--nozomi-shadow-panel);
}

/* Dialog */
.nz-dialog {
  position: fixed;
  inset: 0;
  z-index: 50;
  margin: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  border: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  padding: 16px;
  color: var(--nozomi-text);
}
.nz-dialog::backdrop { background: transparent; }
.nz-dialog[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* The box is the scroll container, not the backdrop: a dialog taller than the
   viewport scrolls inside its own rounded frame instead of dragging the whole
   fixed layer, which kept the corners and the close control off screen.
   box-sizing is stated locally because the shared sheet ships no global reset. */
.nz-dialog,
.nz-dialog-box { box-sizing: border-box; }
.nz-dialog-box {
  display: flex;
  width: 100%;
  max-height: 100%;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-dialog);
  background: var(--nozomi-panel);
  box-shadow: var(--nozomi-shadow-dialog);
  /* Keep keyboard-focused controls from landing under a sticky header. */
  scroll-padding-top: 6.5rem;
}

/* Wrap a DialogHeader in this to pin it while the body below scrolls. Supplies
   its own padding, so the scrolling remainder starts with nz-dialog-pad. */
.nz-dialog-sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
  border-bottom: 1px solid var(--nozomi-border);
  background: var(--nozomi-panel);
  padding: 20px;
}

/* Page header */
.nz-page-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nz-page-header-compact { gap: 12px; }
@media (min-width: 640px) {
  .nz-page-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}
.nz-page-header-titles { min-width: 0; }
.nz-page-header-title-row {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.nz-page-header-title-row-spaced { margin-top: 8px; }
.nz-page-header-title-row .nz-display-title { min-width: 0; }
.nz-page-header-meta { flex-shrink: 0; }
.nz-page-header-description {
  margin-top: 8px;
  max-width: 48rem;
  font-size: var(--nozomi-font-body);
  color: var(--nozomi-text-muted);
}
.nz-page-header-description-tight { margin-top: 4px; }
.nz-page-header-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (min-width: 640px) {
  .nz-page-header-actions {
    flex-direction: row;
    align-items: center;
  }
}

/* Status dot */
.nz-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nz-dot {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  border-radius: 50%;
}
.nz-status-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text);
}

/* Form field */
.nz-field {
  display: grid;
  gap: 6px;
}
.nz-field > .nz-label { margin-bottom: 0; }
.nz-field-required { color: var(--nozomi-danger-text); }
.nz-field-help {
  margin: 0;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text-muted);
}
.nz-field-error {
  margin: 0;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-danger-text);
}

/* Segmented control */
.nz-segmented {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-overlay-soft);
  padding: 4px;
}
.nz-segmented-option {
  min-height: 32px;
  border: 0;
  border-radius: var(--nozomi-radius-small);
  background: transparent;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-medium);
  color: var(--nozomi-text-muted);
  cursor: pointer;
  transition:
    color var(--nozomi-motion-fast) var(--nozomi-ease),
    background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-segmented-option:hover:not(:disabled) { color: var(--nozomi-text); }
.nz-segmented-option[aria-checked="true"] {
  background: var(--nozomi-overlay-medium);
  color: var(--nozomi-text);
}
.nz-segmented-option:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Table */
.nz-table-wrap { overflow-x: auto; }
.nz-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
  font-size: var(--nozomi-font-body);
}
.nz-table-th {
  border-bottom: 1px solid var(--nozomi-border);
  padding: 8px 12px;
}
.nz-table-td {
  border-bottom: 1px solid var(--nozomi-border);
  padding: 12px;
  vertical-align: top;
  color: var(--nozomi-text);
}
.nz-table-cards {
  display: grid;
  gap: 12px;
}
.nz-table-card { padding: 12px; }


/* Shell composition (Sidebar component layout). */
.nz-shell {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--nozomi-border);
}
@media (min-width: 768px) {
  .nz-shell {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    width: var(--nozomi-size-sidebar);
    flex-direction: column;
    border-bottom: 0;
    border-right: 1px solid var(--nozomi-border);
  }
}
.nz-shell-head {
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--nozomi-border);
  padding: 12px 16px;
}
@media (min-width: 768px) {
  .nz-shell-head { padding: 16px 18px; }
}
.nz-shell-head-controls {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}
.nz-shell-scrim {
  position: fixed;
  inset: 0;
  top: 58px;
  z-index: 40;
  border: 0;
  padding: 0;
  background: rgba(0, 0, 0, 0.62);
}
.nz-shell-nav-closed { display: none; }
.nz-shell-nav-open {
  position: fixed;
  left: 0;
  right: 0;
  top: 58px;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  background: var(--nozomi-sidebar);
  border-bottom: 1px solid var(--nozomi-border);
  padding: 12px;
}
@media (min-width: 768px) {
  .nz-shell-nav-closed,
  .nz-shell-nav-open {
    position: static;
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    background: transparent;
    border-bottom: 0;
    padding: 12px;
  }
}
.nz-shell-links {
  display: grid;
  gap: 4px;
}
.nz-shell-link-body {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}
.nz-shell-section-label-visible { display: block; }
.nz-shell-foot-mobile {
  margin-top: auto;
  border-top: 1px solid var(--nozomi-border);
  padding: 12px 4px;
}
.nz-shell-foot {
  border-top: 1px solid var(--nozomi-border);
  padding: 10px 12px;
}


/* ---------- Layout and text vocabulary ----------
   A deliberately closed set of composition helpers. Gap and column sizing tune
   through the --nz-gap / --nz-col custom properties instead of per-value
   utility classes; bespoke geometry stays in app-local semantic CSS. */
.nz-row {
  display: flex;
  align-items: center;
  gap: var(--nz-gap, var(--nozomi-space-2));
  min-width: 0;
}
.nz-row-between { justify-content: space-between; }
.nz-row-end { justify-content: flex-end; }
.nz-row-wrap { flex-wrap: wrap; }
.nz-row-top { align-items: flex-start; }
.nz-stack {
  display: grid;
  gap: var(--nz-gap, var(--nozomi-space-3));
  min-width: 0;
}
.nz-grid {
  display: grid;
  gap: var(--nz-gap, var(--nozomi-space-4));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--nz-col, 280px)), 1fr));
}
.nz-gap-xs { --nz-gap: var(--nozomi-space-1); }
.nz-gap-sm { --nz-gap: var(--nozomi-space-2); }
.nz-gap-md { --nz-gap: var(--nozomi-space-3); }
.nz-gap-lg { --nz-gap: var(--nozomi-space-4); }
.nz-gap-xl { --nz-gap: var(--nozomi-space-5); }
.nz-grow { flex: 1 1 auto; min-width: 0; }
.nz-fixed { flex: 0 0 auto; }
.nz-container {
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 40px);
}
.nz-num { font-variant-numeric: tabular-nums; }
.nz-muted { color: var(--nozomi-text-muted); }
.nz-strong { color: var(--nozomi-text-strong); }
.nz-small { font-size: var(--nozomi-font-small); }

/* ---------- Loading and refresh smoothness ---------- */

/* Text-shaped skeleton line; width tunes via --nz-w. */
.nz-skeleton-text {
  display: block;
  height: 1em;
  width: var(--nz-w, 100%);
  border-radius: var(--nozomi-radius-small);
}

/* Stale-while-revalidate rendering: keep last-good content mounted and set
   aria-busy on the region while refreshing. The transition delay means
   revalidations faster than one base beat never visibly flash. */
.nz-refresh {
  transition: opacity var(--nozomi-motion-base) var(--nozomi-ease);
}
.nz-refresh[aria-busy="true"] {
  opacity: 0.6;
  transition-delay: var(--nozomi-motion-base);
}

/* Entrances for content appearing after skeletons or into lists. */
.nz-anim-fade { animation: nz-fade-in var(--nozomi-motion-base) var(--nozomi-ease) both; }
.nz-anim-rise { animation: nz-rise-in var(--nozomi-motion-base) var(--nozomi-ease-entrance) both; }
@keyframes nz-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes nz-rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Auth card (login treatment; static-HTML friendly) ---------- */
.nz-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--nozomi-bg);
  padding: var(--nozomi-space-5);
}
.nz-auth-card {
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-dialog);
  background: var(--nozomi-panel);
  box-shadow: var(--nozomi-shadow-panel);
  padding: var(--nozomi-space-6);
}
.nz-auth-brand {
  display: flex;
  align-items: center;
  gap: var(--nozomi-space-2);
  margin-bottom: var(--nozomi-space-5);
  color: var(--nozomi-text-strong);
  font-weight: var(--nozomi-weight-semibold);
}
.nz-auth-actions {
  display: grid;
  gap: var(--nozomi-space-2);
  margin-top: var(--nozomi-space-5);
}


/* ---------- Account footer ---------- */
.nz-account {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.nz-account-avatar {
  display: grid;
  width: var(--nozomi-size-control-sm);
  height: var(--nozomi-size-control-sm);
  flex-shrink: 0;
  place-items: center;
  border: 1px solid var(--nozomi-border);
  border-radius: 50%;
  background: var(--nozomi-overlay-soft);
  font-family: var(--nozomi-font-mono);
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-semibold);
  color: var(--nozomi-text-strong);
}
.nz-account-copy {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  font-size: var(--nozomi-font-small);
  line-height: 1.375;
}
.nz-account-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--nozomi-weight-medium);
  color: var(--nozomi-text-strong);
}
.nz-account-detail {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--nozomi-text-muted);
}
.nz-account .nz-btn-icon {
  width: var(--nozomi-size-control-sm);
  height: var(--nozomi-size-control-sm);
}
.nz-account-extra {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--nozomi-border);
  padding-top: 12px;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text-muted);
}

/* ---------- Dialog header, body, and actions ---------- */
.nz-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.nz-dialog-header-title {
  margin: 0;
  font-size: 20px;
  font-weight: var(--nozomi-weight-semibold);
  color: var(--nozomi-text-strong);
}
.nz-dialog-header-title-spaced { margin-top: 8px; }
.nz-dialog-pad { padding: 20px; }
.nz-dialog-body {
  margin-top: 8px;
  font-size: var(--nozomi-font-body);
  line-height: 24px;
  color: var(--nozomi-text-muted);
}
.nz-dialog-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------- Toasts ---------- */
.nz-toaster {
  pointer-events: none;
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 100;
  display: flex;
  width: 100%;
  max-width: 24rem;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px;
}
@media (min-width: 640px) {
  .nz-toaster { padding: 0; }
}
.nz-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  font-size: var(--nozomi-font-body);
  box-shadow: var(--nozomi-shadow-panel);
}
.nz-toast-message {
  min-width: 0;
  overflow-wrap: break-word;
}
.nz-toast-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--nozomi-size-target-min);
  min-height: var(--nozomi-size-target-min);
  margin: -4px -6px -4px 0;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-toast-dismiss:hover { opacity: 1; }

/* ---------- App boundary ---------- */
.nz-boundary {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: var(--nozomi-space-5);
}
.nz-boundary-alert {
  width: 100%;
  max-width: 32rem;
}
.nz-boundary-detail {
  font-family: var(--nozomi-font-mono);
  font-size: var(--nozomi-font-small);
  overflow-wrap: break-word;
}

/* ---------- Table pager ---------- */
.nz-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-overlay-soft);
  padding: 8px 12px;
  font-size: var(--nozomi-font-small);
  color: var(--nozomi-text-muted);
}
.nz-pager-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nz-pager-page {
  font-family: var(--nozomi-font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- Display-font header voice ---------- */

.nz-eyebrow {
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nozomi-cyan);
}

.nz-display-title {
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-page-title);
  font-weight: var(--nozomi-weight-bold);
  line-height: var(--nozomi-line-tight);
  letter-spacing: 0.02em;
  color: var(--nozomi-text-strong);
}

/* ============================================================
   Terminal-brutalist layer -- the shared brand voice for hero
   surfaces (login, page headers, status consoles). Dense data
   views stay calm on the nz-* primitives; these are opt-in per
   surface. Apps set --font-display for the display webfont; it
   falls back to the shared mono stack.
   ============================================================ */

:root {
  --font-display: var(--nozomi-font-mono);
  --term-phosphor: rgba(122, 182, 204, 0.9);
}

.term-display {
  font-family: var(--font-display), var(--nozomi-font-mono);
  letter-spacing: -0.01em;
}

/* Large brand/hero wordmark -- bypasses app-level .text-* size clamps. */
.term-brand {
  font-family: var(--font-display), var(--nozomi-font-mono);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Phosphor glow for key accents (use sparingly). */
.term-glow {
  text-shadow: var(--nozomi-glow-cyan);
}

/* Monospace eyebrow label with a leading marker, e.g. "// player". */
.term-eyebrow {
  font-family: var(--font-display), var(--nozomi-font-mono);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nozomi-cyan);
}

/* Brutalist framed panel: square corners, hairline border, corner ticks. */
.term-frame {
  position: relative;
  border: 1px solid var(--nozomi-border-strong);
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(122, 182, 204, 0.04), rgba(0, 0, 0, 0) 120px),
    var(--nozomi-panel);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 60px rgba(0, 0, 0, 0.45);
}
.term-frame::before,
.term-frame::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: var(--term-phosphor);
  border-style: solid;
  pointer-events: none;
}
.term-frame::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}
.term-frame::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

/* CRT scanlines -- layered as a non-interactive overlay. */
.term-scanlines {
  position: relative;
}
.term-scanlines::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.45;
}

/* Terminal bracket tag, e.g. difficulty / category chips. */
.term-tag {
  font-family: var(--font-display), var(--nozomi-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* Uppercase mono metric label for console stat rows. */
.term-metric-label {
  font-family: var(--font-display), var(--nozomi-font-mono);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nozomi-text-muted);
}

/* Boot reveal -- staggered fade/translate on page load. Per element set
   `style={{ ['--boot-delay']: '120ms' }}` for the cascade. */
.term-boot {
  opacity: 0;
  transform: translateY(8px);
  animation: term-boot-in var(--nozomi-motion-slow) var(--nozomi-ease-entrance) forwards;
  animation-delay: var(--boot-delay, 0ms);
}
@keyframes term-boot-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Blinking cursor for prompts. */
.term-caret::after {
  content: "_";
  margin-left: 2px;
  color: var(--nozomi-cyan);
  animation: term-blink 1.1s step-end infinite;
}
@keyframes term-blink {
  50% {
    opacity: 0;
  }
}

/* ---------- Reduced motion (consolidated) ----------
   Every animated shared surface must be covered here; new motion features add
   their reduce path to this block. */
@media (prefers-reduced-motion: reduce) {
  .nz-switch-track,
  .nz-switch-track > span { transition: none; }
  .nz-spinner { animation-duration: 1800ms; }
  .nz-skeleton { animation: none; }
  .nz-anim-fade,
  .nz-anim-rise { animation: none; }
  .nz-refresh { transition: none; }
  .nz-progress-fill { transition: none; }
  .term-boot {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .term-caret::after { animation: none; }
}