/* GENERATED:TOKENS:START -- edit tokens.v1.json, run python3 scripts/generate_tokens.py */
:root, nz-information, .nz-information-dialog {
  --nozomi-bg: #07080b;
  --nozomi-sidebar: #0b0c10;
  --nozomi-panel: #0f1116;
  --nozomi-surface: #161a20;
  --nozomi-surface-raised: #1d2229;
  --nozomi-border: #1f242b;
  --nozomi-border-strong: #2e353e;
  --nozomi-border-interactive: #646e7a;
  --nozomi-text: #c9ced6;
  --nozomi-text-strong: #f6f8fa;
  --nozomi-text-muted: #8e98a3;
  --nozomi-accent: #d87050;
  --nozomi-accent-hover: #e18363;
  --nozomi-accent-dark: #b95c42;
  --nozomi-accent-soft: #f0a46f;
  --nozomi-accent-ink: #07080b;
  --nozomi-cyan: #7ab6cc;
  --nozomi-success: #8ac27e;
  --nozomi-warning: #e9bd62;
  --nozomi-danger: #e07575;
  --nozomi-focus: #7ab6cc;
  --nozomi-bg-deep: #040507;
  --nozomi-accent-bg: rgba(216, 112, 80, 0.14);
  --nozomi-accent-bg-hover: rgba(216, 112, 80, 0.2);
  --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.1);

  /* 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. */
  --nozomi-radius-small: 6px;
  --nozomi-radius-control: 10px;
  --nozomi-radius-panel: 18px;
  --nozomi-radius-dialog: 24px;
  --nozomi-radius-pill: 999px;

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

  /* Spacing scale -- 4px grid (plus 6/10/20px half-steps) for gaps and padding rhythm. */
  --nozomi-space-1: 4px;
  --nozomi-space-1h: 6px;
  --nozomi-space-2: 8px;
  --nozomi-space-2h: 10px;
  --nozomi-space-3: 12px;
  --nozomi-space-4: 16px;
  --nozomi-space-4h: 20px;
  --nozomi-space-5: 24px;
  --nozomi-space-6: 32px;

  /* Accent tint steps -- color-mix percentages for translucent washes:
     color-mix(in srgb, var(--nozomi-accent) var(--nozomi-tint-2), transparent). */
  --nozomi-tint-1: 4%;
  --nozomi-tint-2: 8%;
  --nozomi-tint-3: 12%;
  --nozomi-tint-4: 20%;
  --nozomi-tint-5: 32%;
  --nozomi-tint-6: 50%;

  /* Motion -- fast: state feedback; base: value change; slow: entrances;
     spin/shimmer: component-internal loop cadences. */
  --nozomi-motion-fast: 140ms;
  --nozomi-motion-base: 220ms;
  --nozomi-motion-slow: 420ms;
  --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);
  --nozomi-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* Typography scale shared by Kernel, Forge, and Arena dashboards. */
  --nozomi-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --nozomi-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, 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: 11px;
  --nozomi-font-label: 11px;
  --nozomi-font-section-title: 16px;
  --nozomi-font-page-title: 24px;
  --nozomi-font-heading-large: 34px;
  --nozomi-font-heading-medium: 20px;
  --nozomi-line-tight: 1.1;
  --nozomi-line-message: 1.45;
  --nozomi-line-longform: 1.58;
  --nozomi-weight-medium: 500;
  --nozomi-weight-semibold: 600;
  --nozomi-weight-bold: 700;
  --nozomi-font-display-hero: clamp(2.5rem, 1.2rem + 5vw, 5.25rem);
  --nozomi-font-display-page: clamp(1.75rem, 1.2rem + 1.7vw, 2.625rem);
  --nozomi-font-display-section: 1.0625rem;
  --nozomi-tracking-tight: -0.011em;
  --nozomi-tracking-display: -0.04em;
  --nozomi-tracking-label: 0.09em;

  /* 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: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 1px 1px rgba(0, 0, 0, 0.4), 0 24px 48px -28px rgba(0, 0, 0, 0.75);
  --nozomi-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -6px rgba(0, 0, 0, 0.45);
  --nozomi-shadow-dialog: 0 0 0 1px rgba(255, 255, 255, 0.05), 0 40px 120px -20px rgba(0, 0, 0, 0.85);
  --nozomi-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px -8px rgba(0, 0, 0, 0.4);
  --nozomi-shadow-popover: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 40px -8px rgba(0, 0, 0, 0.6), 0 4px 12px -4px rgba(0, 0, 0, 0.4);
  --nozomi-shadow-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --nozomi-glow-accent: 0 0 0 1px rgba(216, 112, 80, 0.35), 0 6px 20px -6px rgba(216, 112, 80, 0.55);
  --nozomi-glow-cyan: 0 0 12px rgba(122, 182, 204, 0.45);
}
/* GENERATED:TOKENS:END */

/* Interface type is Inter (variable weight and optical size, latin subset),
   served by every consumer at /fonts/ so the ecosystem renders the same face
   on every platform. Characters outside the subset fall through to the system
   sans in the stack. Space Mono remains available for deliberate technical
   treatments. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-latin-400.woff2") format("woff2");
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Space Mono";
  src: url("/fonts/space-mono-latin-700.woff2") format("woff2");
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}
:root, nz-information, .nz-information-dialog {
  --font-display: var(--nozomi-font-sans);
  /* Caption voice: the vendored Space Mono for eyebrows, labels, and column
     heads, so the technical accent renders identically on every platform.
     Data values keep --nozomi-font-mono. */
  --nozomi-font-caption: "Space Mono", var(--nozomi-font-mono);
  /* Eyebrow ink for .nz-eyebrow and .term-eyebrow: a tint of the product's own
     accent, so every product labels its sections in its own colour. A product
     can still recolour every eyebrow by setting this on its root. */
  --nozomi-eyebrow: color-mix(in srgb, var(--nozomi-accent) 72%, var(--nozomi-text-strong));
  /* Glass surfaces: translucent panel fills that let the ambient canvas tint
     them, with a top-lit edge. Consumers restyle a region by overriding these. */
  --nozomi-glass: color-mix(in srgb, var(--nozomi-panel) 78%, transparent);
  --nozomi-glass-strong: color-mix(in srgb, var(--nozomi-panel) 90%, transparent);
  --nozomi-glass-edge: rgba(255, 255, 255, 0.075);
  --nozomi-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 120px);
  /* The ambient canvas: two soft light sources, one in the product accent and
     one cool, fixed behind every surface. */
  --nozomi-canvas:
    radial-gradient(64rem 36rem at 8% -12%, color-mix(in srgb, var(--nozomi-accent) 15%, transparent), transparent 70%),
    radial-gradient(56rem 40rem at 104% -6%, color-mix(in srgb, var(--nozomi-cyan) 7%, transparent), transparent 70%),
    radial-gradient(48rem 32rem at 60% 118%, color-mix(in srgb, var(--nozomi-accent) 5%, transparent), transparent 70%);
}

/* ---------- 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;
}

/* Shared text rendering defaults. The palette is dark and the surfaces sit on
   a 4px grid; these make type crisp and numbers align across every consumer
   without each app restating them. Consumers may override per surface. */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  /* cv11: single-storey a; ss03: rounded quotes; calt: contextual arrows and
     case-sensitive punctuation. Quietly modern without changing metrics. */
  font-feature-settings: "kern", "calt", "cv11", "ss03";
  font-kerning: normal;
  font-optical-sizing: auto;
  letter-spacing: var(--nozomi-tracking-tight);
}
/* Native check, radio, range and progress controls take the product accent. */
:root { accent-color: var(--nozomi-accent); }
/* Numeric data (metrics, tables, logs) lines up in columns everywhere. */
code, kbd, samp, pre, .nz-mono {
  font-variant-numeric: tabular-nums;
}
::selection {
  background: color-mix(in srgb, var(--nozomi-accent) 32%, transparent);
  color: var(--nozomi-text-strong);
}

/* ---------- Shared base (opt-in preflight) ----------
   A minimal element reset every consumer was hand-rolling: border-box, zeroed
   margins on prose/heading elements, and form controls that inherit the body
   font and colour. Scoped to a root `.nz-base` (or `nz-root` host) so it never
   fights an app's own element rules -- an app adopts it by putting the class
   on its top-level wrapper instead of re-writing the preflight. Colours come
   only from tokens. */
.nz-base,
.nz-base *,
.nz-base *::before,
.nz-base *::after {
  box-sizing: border-box;
}
.nz-base {
  margin: 0;
  min-height: 100vh;
  background: var(--nozomi-canvas), var(--nozomi-bg);
  background-attachment: fixed;
  color: var(--nozomi-text);
  font: var(--nozomi-font-body)/var(--nozomi-line-body) var(--nozomi-font-sans);
  -webkit-tap-highlight-color: transparent;
}
/* Zero the browser default margins on prose/heading elements. Heading size and
   weight are deliberately NOT reset: every product styles headings through
   classes. The whole reset carries zero specificity (:where) so any class --
   a margin utility such as `.app-mt-2` included -- wins over it; at 0,1,1 it
   silently cancelled every single-class margin on a heading or paragraph. */
:where(.nz-base) :where(h1, h2, h3, h4, h5, h6, p, dl, dd, figure, blockquote, pre, hr, ol, ul) {
  margin: 0;
}
/* list-style-type: "" (not none) keeps VoiceOver announcing these as lists. */
:where(.nz-base) :where(ol, ul) { padding: 0; list-style-type: ""; }
/* Preflight resets use :where() (zero specificity) so they only apply to bare
   elements. Any element carrying a component class (.nz-btn-primary and the
   like, specificity 0,1,0) beats them, which keeps component colours such as
   Kura's dark ink on the yellow mark from being clobbered by `inherit`. */
.nz-base :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}
.nz-base :where(button) { margin: 0; border: 0; padding: 0; background: none; cursor: pointer; }
.nz-base :where(button:disabled) { cursor: not-allowed; }
.nz-base :where(a) { color: inherit; text-decoration: none; }
:where(.nz-base) :where(img, svg) { display: block; max-width: 100%; }
:where(.nz-base) :where(code, kbd, samp, pre) {
  font-family: var(--nozomi-font-mono);
  font-size: 1em;
}

/* 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-sheen), var(--nozomi-overlay-soft);
  box-shadow: var(--nozomi-shadow-inset-top);
  transition: border-color var(--nozomi-motion-fast) var(--nozomi-ease),
    box-shadow var(--nozomi-motion-fast) var(--nozomi-ease),
    transform var(--nozomi-motion-fast) var(--nozomi-ease);
}

.nz-card-raised {
  border-radius: var(--nozomi-radius-panel);
  border: 1px solid var(--nozomi-border);
  background: var(--nozomi-sheen), var(--nozomi-glass-strong);
  box-shadow: var(--nozomi-shadow-panel);
}

/* Panels are glass: a translucent fill over the ambient canvas, a sheen that
   lights the top edge, and a long soft drop shadow that lifts them off it. */
.nz-panel {
  border-radius: var(--nozomi-radius-panel);
  border: 1px solid var(--nozomi-border);
  background: var(--nozomi-sheen), var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-panel);
  transition: border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}

.nz-panel-head {
  border-bottom: 1px solid var(--nozomi-border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
}

.nz-toolbar {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--nozomi-border);
  border-radius: calc(var(--nozomi-radius-control) + 4px);
  background: var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-inset-top);
  padding: 6px;
}

.nz-metric-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 132px), 1fr));
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-border);
  box-shadow: var(--nozomi-shadow-panel);
  gap: 1px;
}

/* Inside a framed surface the strip is the frame's foot: one top rule, no
   second border. */
:is(.nz-panel, .nz-card, .nz-card-raised) > .nz-metric-strip {
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: none;
}

.nz-metric-strip-item {
  min-width: 0;
  background: var(--nozomi-sheen), var(--nozomi-panel);
  padding: 14px 18px;
}

.nz-metric-strip-value {
  margin-top: 8px;
  overflow: hidden;
  color: var(--nozomi-text-strong);
  font-size: 1.375rem;
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Directional trend marker beside a metric value (component sets tone). */
.nz-metric-trend {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  margin-left: 8px;
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: 0;
  vertical-align: baseline;
}

.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: 168px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-panel);
  background:
    radial-gradient(50% 70% at 50% 0%, color-mix(in srgb, var(--nozomi-accent) 7%, transparent), transparent 70%),
    var(--nozomi-overlay-subtle);
  padding: 40px 24px;
  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: var(--nozomi-radius-pill);
  background: var(--nozomi-border-strong);
  box-shadow: 0 0 0 1px var(--nozomi-border);
}
/* Optional icon slot above the mark; consumers pass any inline SVG. */
.nz-empty-state-icon {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  margin-bottom: 14px;
  border: 1px solid var(--nozomi-border-strong);
  border-radius: 12px;
  background: var(--nozomi-surface);
  box-shadow: var(--nozomi-shadow-inset-top), var(--nozomi-shadow-card);
  color: var(--nozomi-text);
}
.nz-empty-state-icon > svg { width: 20px; height: 20px; }

.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);
  /* Interactive controls get the >=3:1 boundary; decorative panel edges keep
     the hairline --nozomi-border. */
  border: 1px solid var(--nozomi-border-interactive);
  /* Fields sit recessed below the panel plane. */
  background: color-mix(in srgb, var(--nozomi-bg-deep) 62%, transparent);
  color: var(--nozomi-text-strong);
  padding: 8px 12px;
  font-size: var(--nozomi-font-control);
  line-height: 1.4;
  min-height: var(--nozomi-size-control);
  outline: none;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.03);
  transition:
    border-color var(--nozomi-motion-fast) var(--nozomi-ease),
    box-shadow var(--nozomi-motion-fast) var(--nozomi-ease),
    background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-input::placeholder { color: var(--nozomi-text-muted); opacity: 0.85; }
.nz-input:hover:not(:disabled):not(:focus) { border-color: color-mix(in srgb, var(--nozomi-border-interactive) 70%, var(--nozomi-text)); }
/* Focus draws a soft halo in the product focus colour; the 2px ring keeps
   the keyboard indicator at >=3:1 against every surface. */
.nz-input:focus {
  border-color: var(--nozomi-focus);
  background-color: color-mix(in srgb, var(--nozomi-bg-deep) 80%, transparent);
  box-shadow:
    0 0 0 1px var(--nozomi-focus),
    0 0 0 5px color-mix(in srgb, var(--nozomi-focus) 18%, transparent),
    0 0 24px -4px color-mix(in srgb, var(--nozomi-focus) 30%, transparent);
}
.nz-input:disabled { opacity: 0.5; cursor: not-allowed; }
textarea.nz-input { min-height: 88px; line-height: var(--nozomi-line-body); resize: vertical; }
/* Selects draw their own chevron (two gradient strokes, no image request, so
   strict img-src policies still render it) and drop the platform chrome. */
select.nz-input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--nozomi-text-muted) 50%),
    linear-gradient(135deg, var(--nozomi-text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}
select.nz-input option { background: var(--nozomi-panel); color: var(--nozomi-text-strong); }

.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-interactive);
  border-radius: var(--nozomi-radius-pill);
  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-accent-border);
  background: color-mix(in srgb, var(--nozomi-accent) 26%, transparent);
  box-shadow: 0 0 16px -4px color-mix(in srgb, var(--nozomi-accent) 55%, transparent);
}
.nz-switch > input:checked + .nz-switch-track > span {
  transform: translateX(16px);
  background: var(--nozomi-accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--nozomi-accent) 70%, transparent);
}
.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-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: var(--nozomi-tracking-label);
  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-display-section);
  font-weight: var(--nozomi-weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--nozomi-tracking-tight);
  color: var(--nozomi-text-strong);
}

.nz-type-label {
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  line-height: 1.2;
  letter-spacing: var(--nozomi-tracking-label);
  text-transform: uppercase;
  color: var(--nozomi-text-muted);
}

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

.nz-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-radius: calc(var(--nozomi-radius-control) + 2px);
  border: 1px solid;
  box-shadow: var(--nozomi-shadow-inset-top);
  padding: 11px 14px;
  font-size: var(--nozomi-font-control);
  line-height: 1.5;
}
.nz-alert-neutral {
  border-color: var(--nozomi-border);
  background: var(--nozomi-overlay-soft);
  color: var(--nozomi-text);
}
.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: var(--nozomi-radius-pill);
  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:
    radial-gradient(120% 50% at 0% 0%, color-mix(in srgb, var(--nozomi-accent) 11%, transparent), transparent 62%),
    color-mix(in srgb, var(--nozomi-sidebar) 94%, transparent);
}
/* The blur is desktop-only: on phones the bar contains the fixed drawer, and a
   backdrop filter would become that drawer's containing block. */
@media (min-width: 768px) {
  .nz-shell {
    background:
      radial-gradient(120% 50% at 0% 0%, color-mix(in srgb, var(--nozomi-accent) 11%, transparent), transparent 62%),
      color-mix(in srgb, var(--nozomi-sidebar) 86%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
  }
}

.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);
}
/* The rail's mark sits at wordmark scale, not hero scale. */
.nz-shell-brand .nz-logo { --nz-logo-size: 30px; }

.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: 16px;
  font-weight: var(--nozomi-weight-bold);
  line-height: 1;
  letter-spacing: -0.025em;
}

.nz-shell-link {
  position: relative;
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 36px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: var(--nozomi-radius-control);
  background: transparent;
  padding: 0 10px;
  font: inherit;
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-medium);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  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),
    transform var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-shell-link:hover {
  background: var(--nozomi-overlay-soft);
  color: var(--nozomi-text-strong);
}
.nz-shell-link:hover .nz-shell-link-icon { color: var(--nozomi-text); }
.nz-shell-link:active { transform: scale(0.99); }
/* Active nav item: a raised neutral ground with a short accent bar and an
   accent icon, in the product's own accent. This is the single "you are here"
   convention across every Nozomi rail (shared shell here, Sakura's own
   #sidebar); it reads the accent tokens, so each product colours it itself
   with no per-app override. The bar is a pseudo-element pinned to the item's
   left edge, so it never overlaps a leading icon. */
.nz-shell-link-active,
.nz-shell-link[aria-current="page"] {
  border-color: color-mix(in srgb, var(--nozomi-accent) 24%, transparent);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--nozomi-accent) 20%, transparent), color-mix(in srgb, var(--nozomi-accent) 5%, transparent) 75%),
    var(--nozomi-overlay-subtle);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 24px -14px color-mix(in srgb, var(--nozomi-accent) 80%, transparent);
  color: var(--nozomi-text-strong);
}
.nz-shell-link-active::before,
.nz-shell-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nozomi-accent);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--nozomi-accent) 75%, transparent);
}
.nz-shell-link-active .nz-shell-link-icon,
.nz-shell-link[aria-current="page"] .nz-shell-link-icon { color: var(--nozomi-accent); }

.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;
  transition: color var(--nozomi-motion-fast) var(--nozomi-ease);
  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 10px 8px;
  font-family: var(--nozomi-font-caption);
  font-size: 10.5px;
  font-weight: var(--nozomi-weight-medium);
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--nozomi-text-muted) 78%, transparent);
}

@media (min-width: 768px) {
  .nz-shell-toggle {
    display: none;
  }
  .nz-shell-section {
    display: block;
    flex-shrink: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .nz-shell-nav {
    overflow-y: auto;
  }
  .nz-shell-section:first-child {
    border-top: 0;
    padding-top: 0;
  }
  .nz-shell-section-label {
    display: block;
  }
  /* The main column clears the floating rail. Apps own everything inside it. */
  .nz-shell ~ main {
    width: calc(100% - var(--nozomi-size-sidebar));
    max-width: none;
    margin-left: var(--nozomi-size-sidebar);
    margin-right: 0;
    padding-left: clamp(20px, 3vw, 44px);
    padding-right: clamp(20px, 3vw, 44px);
  }
}

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

.nz-progress {
  height: 6px;
  overflow: hidden;
  border-radius: var(--nozomi-radius-pill);
  background: var(--nozomi-overlay-medium);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}

.nz-progress-fill {
  height: 100%;
  border-radius: var(--nozomi-radius-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--nozomi-cyan) 55%, transparent), var(--nozomi-cyan));
  box-shadow: 0 0 10px color-mix(in srgb, var(--nozomi-cyan) 55%, transparent);
  transition: width var(--nozomi-motion-slow) var(--nozomi-ease-entrance);
}



/* ---------- 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;
  gap: 6px;
  border: 1px solid;
  border-radius: var(--nozomi-radius-pill);
  padding: 3px 10px;
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-medium);
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Optional leading status dot (component sets --nz-badge-dot). */
.nz-badge-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--nz-badge-dot, currentColor);
  box-shadow: 0 0 6px var(--nz-badge-dot, currentColor);
}

/* Buttons */
.nz-btn {
  display: inline-flex;
  min-height: var(--nozomi-size-control);
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: var(--nozomi-radius-control);
  padding: 0 14px;
  font-family: inherit;
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-medium);
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none; /* anchors styled as buttons */
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  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),
    box-shadow var(--nozomi-motion-fast) var(--nozomi-ease),
    transform var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-btn:active:not(:disabled) { transform: translateY(0) scale(0.975); }
.nz-btn > svg { flex: 0 0 auto; }
.nz-btn:disabled { cursor: not-allowed; opacity: 0.5; }

/* Solid accent fill: the default affirmative control. The ink colour adapts
   per brand through --nozomi-accent-ink so a high-chroma mark (Kura yellow)
   stays legible while terracotta/cyan read as light-on-dark. */
/* Primary actions glow in the product accent and lift on hover. */
.nz-btn-primary {
  border-color: color-mix(in srgb, var(--nozomi-accent) 70%, #fff);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%),
    var(--nozomi-accent);
  color: var(--nozomi-accent-ink);
  font-weight: var(--nozomi-weight-semibold);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 24px -8px color-mix(in srgb, var(--nozomi-accent) 75%, transparent);
}
.nz-btn-primary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--nozomi-accent-hover) 60%, #fff);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0) 60%),
    var(--nozomi-accent-hover);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 14px 34px -10px color-mix(in srgb, var(--nozomi-accent) 90%, transparent);
}

/* Secondary actions are glass: a translucent fill with a lit top edge. */
.nz-btn-secondary {
  border-color: var(--nozomi-border-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
    color-mix(in srgb, var(--nozomi-surface) 70%, transparent);
  color: var(--nozomi-text-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.nz-btn-secondary:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--nozomi-border-interactive) 80%, transparent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.025)),
    var(--nozomi-surface-raised);
  color: var(--nozomi-text-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 6px 18px -10px rgba(0, 0, 0, 0.7);
}
.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 {
  min-height: var(--nozomi-size-control-sm);
  padding: 0 10px;
  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 (the base .nz-panel-head block lives with .nz-panel). */
@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). */
.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);
}

/* 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: color-mix(in srgb, var(--nozomi-bg-deep) 58%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  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-strong);
  border-radius: var(--nozomi-radius-dialog);
  background:
    radial-gradient(90% 60% at 50% -20%, color-mix(in srgb, var(--nozomi-accent) 9%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 160px),
    var(--nozomi-panel);
  box-shadow: var(--nozomi-shadow-dialog), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  /* Keep keyboard-focused controls from landing under a sticky header. */
  scroll-padding-top: 6.5rem;
}
/* Entrance: the dialog layer fades, the box rises and settles. */
.nz-dialog[open] { animation: nz-fade-in var(--nozomi-motion-fast) var(--nozomi-ease) both; }
.nz-dialog[open] .nz-dialog-box {
  animation: nz-dialog-in var(--nozomi-motion-base) var(--nozomi-ease-entrance) both;
}
@keyframes nz-dialog-in {
  from { opacity: 0; transform: translateY(16px) scale(0.96); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* 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: color-mix(in srgb, var(--nozomi-panel) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 20px 24px;
}

/* Page header */
.nz-page-header {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 4px;
}
.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: 10px; }
.nz-page-header-title-row .nz-display-title { min-width: 0; }
.nz-page-header-meta { flex-shrink: 0; max-width: 100%; }
.nz-page-header-description {
  margin-top: 10px;
  max-width: 46rem;
  font-size: var(--nozomi-font-body);
  line-height: 1.6;
  color: var(--nozomi-text-muted);
  text-wrap: pretty;
}
.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;
  gap: 2px;
  border: 1px solid var(--nozomi-border);
  border-radius: calc(var(--nozomi-radius-control) + 3px);
  background: color-mix(in srgb, var(--nozomi-bg-deep) 62%, transparent);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
  padding: 3px;
}
.nz-segmented-option {
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: calc(var(--nozomi-radius-control) - 1px);
  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"] {
  border-color: var(--nozomi-border-strong);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.01)),
    var(--nozomi-surface-raised);
  color: var(--nozomi-text-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px -2px rgba(0, 0, 0, 0.6);
}
.nz-segmented-option:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Tabs */
.nz-tabs { display: grid; gap: 0; }
.nz-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--nozomi-border);
}
.nz-tab {
  position: relative;
  min-height: 40px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  padding: 0 12px;
  font-family: inherit;
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-medium);
  color: var(--nozomi-text-muted);
  cursor: pointer;
  transition:
    color var(--nozomi-motion-fast) var(--nozomi-ease),
    border-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-tab:hover:not(:disabled) { color: var(--nozomi-text-strong); }
.nz-tab[aria-selected="true"] {
  border-bottom-color: var(--nozomi-accent);
  color: var(--nozomi-text-strong);
  box-shadow: 0 10px 18px -14px color-mix(in srgb, var(--nozomi-accent) 90%, transparent);
}
.nz-tab:disabled { cursor: not-allowed; opacity: 0.5; }
.nz-tabpanel { padding-top: var(--nozomi-space-4); }
.nz-tabpanel[hidden] { display: none; }

/* Tooltip */
.nz-tooltip-wrap { position: relative; display: inline-flex; }
.nz-tooltip-trigger { display: inline-flex; }
.nz-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 70;
  max-width: 20rem;
  transform: translateX(-50%) translateY(2px);
  border: 1px solid var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-control);
  background: color-mix(in srgb, var(--nozomi-surface-raised) 88%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 6px 10px;
  font-size: var(--nozomi-font-small);
  line-height: 1.35;
  color: var(--nozomi-text);
  box-shadow: var(--nozomi-shadow-popover);
  opacity: 0;
  pointer-events: none;
  white-space: normal;
  transition:
    opacity var(--nozomi-motion-fast) var(--nozomi-ease),
    transform var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-tooltip-wrap:hover .nz-tooltip,
.nz-tooltip-wrap:focus-within .nz-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 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: 11px 14px;
  background: var(--nozomi-overlay-subtle);
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: 10.5px;
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.nz-table-td {
  border-bottom: 1px solid var(--nozomi-border);
  padding: 12px 14px;
  vertical-align: top;
  color: var(--nozomi-text);
  transition: background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-table tbody tr:hover .nz-table-td { background: color-mix(in srgb, var(--nozomi-accent) 4%, var(--nozomi-overlay-subtle)); }
/* Last row needs no trailing rule so the table ends flush with its frame. */
.nz-table tbody tr:last-child .nz-table-td { border-bottom: 0; }
.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);
}
/* Desktop: the rail floats inset from the viewport edge as one glass sheet,
   so the ambient canvas runs continuously behind navigation and content. */
@media (min-width: 768px) {
  .nz-shell {
    position: fixed;
    top: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    width: calc(var(--nozomi-size-sidebar) - 20px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--nozomi-border);
    border-radius: 20px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  }
}
.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 16px 12px; border-bottom-color: transparent; }
}
.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-canvas), var(--nozomi-sidebar);
  animation: nz-rise-in var(--nozomi-motion-base) var(--nozomi-ease-entrance) both;
  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: 2px;
}
.nz-shell-link-body {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}
.nz-shell-section-label-visible { display: block; }
/* The mobile drawer stacks each section's label above its links. */
@media (max-width: 767px) {
  .nz-shell-nav-open .nz-shell-section { display: block; padding: 6px 0 10px; }
  .nz-shell-nav-open .nz-shell-link { min-height: 44px; font-size: var(--nozomi-font-body); }
}
.nz-shell-foot-mobile {
  margin-top: auto;
  border-top: 1px solid var(--nozomi-border);
  padding: 12px 4px;
}
.nz-shell-foot {
  margin: 0 8px 8px;
  border: 1px solid var(--nozomi-border);
  border-radius: 14px;
  background: var(--nozomi-overlay-subtle);
  box-shadow: var(--nozomi-shadow-inset-top);
  padding: 8px 10px;
}


/* ---------- 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);
}

/* Page entrance: the direct sections of a shell's main column rise in with a
   short stagger whenever a view mounts. The fill is backwards-only, so once the
   entrance ends no transform remains to capture fixed-position descendants or
   shift layout measurements. */
/* Zero specificity: a section that runs its own entrance keeps it. */
:where(.nz-shell ~ main, .nz-page-enter) > * {
  animation: nz-rise-in var(--nozomi-motion-slow) var(--nozomi-ease-entrance) backwards;
}
:where(.nz-shell ~ main, .nz-page-enter) > :nth-child(2) { animation-delay: 50ms; }
:where(.nz-shell ~ main, .nz-page-enter) > :nth-child(3) { animation-delay: 100ms; }
:where(.nz-shell ~ main, .nz-page-enter) > :nth-child(4) { animation-delay: 150ms; }
:where(.nz-shell ~ main, .nz-page-enter) > :nth-child(n + 5) { animation-delay: 200ms; }

/* 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(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Auth card (login treatment; static-HTML friendly) ---------- */
.nz-auth {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(46% 42% at 50% 0%, color-mix(in srgb, var(--nozomi-accent) 20%, transparent), transparent 72%),
    var(--nozomi-canvas),
    var(--nozomi-bg);
  padding: var(--nozomi-space-5);
}
/* A receding horizon grid under the card gives the sign-in page depth. */
.nz-auth::before {
  content: "";
  position: absolute;
  inset: 55% -40% -20%;
  background:
    linear-gradient(color-mix(in srgb, var(--nozomi-accent) 16%, transparent) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, color-mix(in srgb, var(--nozomi-accent) 16%, transparent) 1px, transparent 1px) 0 0 / 44px 44px;
  transform: perspective(360px) rotateX(64deg);
  transform-origin: 50% 0;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 0%, #000, transparent 80%);
  mask-image: radial-gradient(60% 70% at 50% 0%, #000, transparent 80%);
  pointer-events: none;
}
.nz-auth > * { position: relative; }
.nz-auth-card {
  width: 100%;
  max-width: 420px;
  border: 1px solid var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-dialog);
  background:
    radial-gradient(80% 50% at 50% 0%, color-mix(in srgb, var(--nozomi-accent) 10%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 180px),
    color-mix(in srgb, var(--nozomi-panel) 82%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--nozomi-shadow-dialog), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  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);
}
/* Operator login composition: mark, product eyebrow, title, one line, one
   action. Same card on every operator surface. */
/* No form fields here, so the card is centred: mark as a badge, then the
   product eyebrow, title, one line, and one full-width action. */
.nz-auth-card { text-align: center; padding: var(--nozomi-space-6) var(--nozomi-space-6) calc(var(--nozomi-space-6) + var(--nozomi-space-1)); }
.nz-auth-card .nz-logo { --nz-logo-size: 72px; margin: 0 auto var(--nozomi-space-5); }
.nz-auth-card .nz-eyebrow { color: var(--nozomi-accent); }
.nz-auth-card .nz-alert { text-align: left; }
.nz-auth-title {
  margin: var(--nozomi-space-2) 0 0;
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-display-page);
  font-weight: var(--nozomi-weight-semibold);
  line-height: var(--nozomi-line-tight);
  letter-spacing: var(--nozomi-tracking-display);
  color: var(--nozomi-text-strong);
}
.nz-auth-card > p { margin: var(--nozomi-space-3) 0 0; color: var(--nozomi-text-muted); line-height: 1.6; text-wrap: pretty; }
.nz-auth-actions .nz-btn { min-height: 42px; font-size: var(--nozomi-font-body); }


/* ---------- 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 color-mix(in srgb, var(--nozomi-accent) 40%, var(--nozomi-border-strong));
  border-radius: 50%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--nozomi-accent) 55%, var(--nozomi-surface)), var(--nozomi-surface) 85%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 14px -4px color-mix(in srgb, var(--nozomi-accent) 70%, transparent);
  font-family: var(--nozomi-font-sans);
  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: var(--nozomi-font-heading-medium);
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: -0.018em;
  color: var(--nozomi-text-strong);
}
.nz-dialog-header-title-spaced { margin-top: 8px; }
.nz-dialog-pad { padding: 24px; }
.nz-dialog-body {
  margin-top: 8px;
  font-size: var(--nozomi-font-body);
  line-height: var(--nozomi-line-body);
  color: var(--nozomi-text-muted);
}
.nz-dialog-actions {
  margin-top: 24px;
  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-control);
  border: 1px solid var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-panel);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--nozomi-shadow-popover);
  animation: nz-toast-in var(--nozomi-motion-base) var(--nozomi-ease-spring) both;
}
@keyframes nz-toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.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;
}
/* ---------- 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: calc(var(--nozomi-radius-control) + 4px);
  background: var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-inset-top);
  padding: 6px 8px 6px 14px;
  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 ---------- */

/* Eyebrows are instrument captions: mono, widely tracked, in the product
   accent tint. */
.nz-eyebrow {
  margin: 0;
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: var(--nozomi-tracking-label);
  text-transform: uppercase;
  color: var(--nozomi-eyebrow);
}

/* Page titles: large, tight, and lit from above so they read as the one
   headline on the page. */
.nz-display-title {
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-display-page);
  font-weight: var(--nozomi-weight-bold);
  line-height: 1.08;
  text-wrap: balance;
  letter-spacing: var(--nozomi-tracking-display);
  color: var(--nozomi-text-strong);
}

/* Hero-scale display title for brand/login/landing surfaces. */
.nz-display-hero {
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-display-hero);
  font-weight: var(--nozomi-weight-semibold);
  line-height: 1.04;
  letter-spacing: var(--nozomi-tracking-display);
  text-wrap: balance;
  color: var(--nozomi-text-strong);
}

/* ============================================================
   Compatibility treatments for existing hero and operator surfaces.
   Display text follows the shared proportional type; technical values
   continue to use the explicit monospace helpers.
   ============================================================ */

:root {
  --term-phosphor: color-mix(in srgb, var(--nozomi-cyan) 90%, transparent);
}

.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);
}

/* Display eyebrow label with a leading marker, e.g. "// player". */
.term-eyebrow {
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: var(--nozomi-tracking-label);
  text-transform: uppercase;
  color: var(--nozomi-eyebrow);
}

/* Framed surfaces share the same quiet treatment as panels. Existing class
   names remain compatible with independently deployed consumers. */
.term-frame {
  position: relative;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-sheen), var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-panel);
}

/* 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 metric label for console stat rows. */
.term-metric-label {
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-medium);
  letter-spacing: var(--nozomi-tracking-label);
  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;
  }
}

/* ---------- Brand mark (pixel compass-star) ----------
   The shared mark rendered as an inline SVG of unit squares (see logo.html /
   BrandMark). Region 1 (`b*`) reads the consumer accent, region 2 (`l*`) the
   strong text tone, so every product shows the same object in its own colour;
   the level suffix carries the face shading. Sized by --nz-logo-size. */
.nz-logo {
  display: block;
  width: var(--nz-logo-size, 112px);
  height: auto;
  aspect-ratio: 1;
  overflow: visible;
  shape-rendering: crispEdges;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 0 18px var(--nz-logo-glow, var(--nozomi-accent-bg)));
}
.nz-logo-hero { --nz-logo-size: clamp(104px, 9vw, 136px); }
.nz-logo-compact { --nz-logo-size: 48px; filter: none; }
.nz-logo [class^="b"] { fill: var(--nozomi-accent); }
.nz-logo [class^="l"] { fill: var(--nozomi-text-strong); }
.nz-logo .b0, .nz-logo .l0 { fill-opacity: 0.22; }
.nz-logo .b1, .nz-logo .l1 { fill-opacity: 0.32; }
.nz-logo .b2, .nz-logo .l2 { fill-opacity: 0.42; }
.nz-logo .b3, .nz-logo .l3 { fill-opacity: 0.53; }
.nz-logo .b4, .nz-logo .l4 { fill-opacity: 0.64; }
.nz-logo .b5, .nz-logo .l5 { fill-opacity: 0.76; }
.nz-logo .b6, .nz-logo .l6 { fill-opacity: 0.88; }
.nz-logo .b7, .nz-logo .l7 { fill-opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .nz-logo-spin { animation: nz-logo-spin var(--nz-logo-spin-duration, 3.2s) linear infinite; }
}
@keyframes nz-logo-spin {
  to { transform: perspective(320px) rotateY(1turn); }
}

/* ---------- Landing gate liveness ----------
   The gate aside can read as a running system: a live pulse on its eyebrow,
   and (opt-in, add the graph SVG) a faint node graph behind the copy with one
   pulsing core. Accent-driven, CSP-safe (class-only), reduced-motion aware.
   The graph SVG self-clips to its box, so the gate keeps its corner ticks. */
.nz-gate-live { display: inline-flex; align-items: center; gap: 7px; }
.nz-gate-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nozomi-accent);
  animation: nz-gate-dot 2s ease-out infinite;
}
@keyframes nz-gate-dot {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nozomi-accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 7px transparent; }
}
.nz-gate-graph {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  pointer-events: none;
  /* Fade the graph out before the step copy so text stays legible over it. */
  -webkit-mask-image: linear-gradient(180deg, #000 0 14%, transparent 40%);
  mask-image: linear-gradient(180deg, #000 0 14%, transparent 40%);
}
/* Raise the real content above the graph only when a graph is present. */
.nz-gate:has(.nz-gate-graph) > :not(.nz-gate-graph) { position: relative; z-index: 1; }
.nz-gate-graph-edges line { stroke: var(--nozomi-accent-border); stroke-width: 0.75; }
.nz-gate-graph-node { fill: var(--nozomi-accent); opacity: 0.7; }
.nz-gate-graph-core { fill: var(--nozomi-accent); }
.nz-gate-graph-ping {
  fill: none;
  stroke: var(--nozomi-accent);
  stroke-width: 1;
  transform-origin: 110px 60px;
  animation: nz-gate-ping 2.6s var(--nozomi-ease) infinite;
}
@keyframes nz-gate-ping {
  0% { transform: scale(1); opacity: 0.7; }
  70%, 100% { transform: scale(4.5); opacity: 0; }
}

/* ---------- Section seam (accent divider) ----------
   A single shallow accent chevron that separates hero from the section below,
   the way a technical console rules off one region from the next. An inline
   SVG so the hairline stays crisp at any width (non-scaling stroke); reads the
   consumer accent. Decorative -- always aria-hidden. Fuji's peak doubles as
   its mountain motif; the shallow angle reads as a neutral divider elsewhere. */
.nz-seam {
  display: block;
  width: 100%;
  height: clamp(24px, 4vw, 44px);
  margin: clamp(1.5rem, 4vw, 3rem) 0;
  overflow: visible;
  pointer-events: none;
}
.nz-seam-line {
  fill: none;
  stroke: var(--nozomi-accent);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
  opacity: 0.5;
  filter: drop-shadow(0 0 6px var(--nozomi-accent-bg));
}

/* ---------- Work meter (determinate progress + ETA) ----------
   A live "actual work" indicator for long-running jobs: a headline + percent,
   a native <progress> fill (CSP-safe -- the value is a DOM property, no inline
   style), and a phase + estimated-completion foot. Determinate when a value is
   set; a sweeping overlay (.nz-workmeter-indeterminate) covers the queued state
   before work has a measurable start. Reads the consumer accent. */
.nz-workmeter { display: grid; gap: 0.5rem; }
.nz-workmeter-head, .nz-workmeter-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--nozomi-space-4);
}
.nz-workmeter-label {
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-bold);
  letter-spacing: 0.01em;
  color: var(--nozomi-text-strong);
}
.nz-workmeter-pct {
  font-family: var(--nozomi-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-bold);
  color: var(--nozomi-accent);
}
.nz-workmeter-foot { color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); }
.nz-workmeter-eta { font-family: var(--nozomi-font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The bar: a recessed rail; the value is an accent gradient with a slow
   travelling sheen so it reads as live even between value updates. */
.nz-workmeter-track { position: relative; }
.nz-workmeter-bar {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.6rem;
  border: 0;
  border-radius: var(--nozomi-radius-pill);
  overflow: hidden;
  background: var(--nozomi-overlay-medium);
}
.nz-workmeter-bar::-webkit-progress-bar { background: var(--nozomi-overlay-medium); border-radius: var(--nozomi-radius-pill); }
.nz-workmeter-bar::-webkit-progress-value {
  border-radius: var(--nozomi-radius-pill);
  background:
    linear-gradient(90deg, transparent, var(--nozomi-overlay-strong) 45%, transparent 70%) 0 0 / 180px 100% repeat-x,
    linear-gradient(90deg, var(--nozomi-accent-dark), var(--nozomi-accent));
  animation: nz-workmeter-sheen 1.4s linear infinite;
}
.nz-workmeter-bar::-moz-progress-bar {
  border-radius: var(--nozomi-radius-pill);
  background:
    linear-gradient(90deg, transparent, var(--nozomi-overlay-strong) 45%, transparent 70%) 0 0 / 180px 100% repeat-x,
    linear-gradient(90deg, var(--nozomi-accent-dark), var(--nozomi-accent));
  animation: nz-workmeter-sheen 1.4s linear infinite;
}
@keyframes nz-workmeter-sheen { to { background-position: 180px 0, 0 0; } }
/* Queued state: hide the (zero) value and run a sweeping band over the rail. */
.nz-workmeter-indeterminate .nz-workmeter-sweep { display: block; }
.nz-workmeter-sweep {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: var(--nozomi-radius-pill);
  overflow: hidden;
  pointer-events: none;
}
.nz-workmeter-sweep::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 38%;
  border-radius: var(--nozomi-radius-pill);
  background: linear-gradient(90deg, transparent, var(--nozomi-accent), transparent);
  animation: nz-workmeter-scan 1.5s var(--nozomi-ease) infinite;
}
@keyframes nz-workmeter-scan { to { left: 102%; } }

/* ============================================================
   Public landing layer -- the one composition every product's
   signed-out page shares: masthead, two-column hero (copy +
   framed "bar" aside), three-step explainer, one access card,
   legal links. Products keep only their accent tokens and any
   decorative background field. Static-HTML friendly.
   ============================================================ */
.nz-public {
  position: relative;
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}
/* Floating glass masthead: a pill that hovers over the page as it scrolls. */
.nz-public-header {
  position: sticky;
  top: 12px;
  z-index: 5;
  display: flex;
  width: min(76rem, calc(100% - 24px));
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: var(--nozomi-space-6);
  margin: 12px auto 0;
  padding: 8px 8px 8px 18px;
  border: 1px solid var(--nozomi-glass-edge);
  border-radius: var(--nozomi-radius-pill);
  background: color-mix(in srgb, var(--nozomi-bg) 64%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 44px -26px rgba(0, 0, 0, 0.95);
}
.nz-public-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--nozomi-text-strong);
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: 1.0625rem;
  font-weight: var(--nozomi-weight-bold);
  letter-spacing: -0.025em;
  text-decoration: none;
}
.nz-public-brand .nz-logo { --nz-logo-size: 1.6rem; }
.nz-public-brand:hover { color: var(--nozomi-accent); }
.nz-public-account {
  display: flex;
  align-items: center;
  gap: var(--nozomi-space-4);
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-small);
  letter-spacing: 0.02em;
}
.nz-public-account a {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--nozomi-accent) 70%, #fff);
  border-radius: var(--nozomi-radius-pill);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 60%), var(--nozomi-accent);
  padding: 0 16px;
  color: var(--nozomi-accent-ink);
  font-family: var(--nozomi-font-sans);
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 20px -8px color-mix(in srgb, var(--nozomi-accent) 80%, transparent);
  transition: transform var(--nozomi-motion-fast) var(--nozomi-ease), box-shadow var(--nozomi-motion-fast) var(--nozomi-ease), background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-public-account a:hover { transform: translateY(-1px); background-color: var(--nozomi-accent-hover); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), 0 10px 26px -8px color-mix(in srgb, var(--nozomi-accent) 90%, transparent); }
.nz-public-notice { position: relative; z-index: 1; margin: var(--nozomi-space-6) 0 0; }

/* The hero is one centred column: the mark in orbit, the claim, one action.
   A spotlight falls from the masthead and a horizon grid recedes beneath it. */
.nz-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(3rem, 7vw, 5.5rem);
  text-align: center;
}
.nz-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -6rem;
  left: 50%;
  width: min(64rem, 140%);
  height: 38rem;
  transform: translateX(-50%);
  background:
    conic-gradient(from 180deg at 50% 0%, transparent 150deg, color-mix(in srgb, var(--nozomi-accent) 16%, transparent) 172deg, color-mix(in srgb, var(--nozomi-accent) 22%, transparent) 180deg, color-mix(in srgb, var(--nozomi-accent) 16%, transparent) 188deg, transparent 210deg);
  -webkit-mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent 75%);
  mask-image: radial-gradient(60% 80% at 50% 0%, #000, transparent 75%);
  filter: blur(8px);
  pointer-events: none;
}
.nz-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: -4rem;
  width: 160vw;
  max-width: 140rem;
  height: 22rem;
  transform: translateX(-50%) perspective(480px) rotateX(64deg);
  transform-origin: 50% 100%;
  background:
    linear-gradient(color-mix(in srgb, var(--nozomi-accent) 26%, transparent) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, color-mix(in srgb, var(--nozomi-accent) 26%, transparent) 1px, transparent 1px) 0 0 / 64px 64px;
  -webkit-mask-image: radial-gradient(50% 90% at 50% 100%, #000 20%, transparent 70%);
  mask-image: radial-gradient(50% 90% at 50% 100%, #000 20%, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}
.nz-hero-copy { display: grid; justify-items: center; min-width: 0; }
/* Boot reveal: the mark settles first, then the copy rises in line by line.
   Runs once on load; the consolidated reduced-motion block collapses it. */
.nz-hero-copy > *, .nz-hero-visual {
  opacity: 0;
  animation: nz-rise-in var(--nozomi-motion-slow) var(--nozomi-ease-entrance) forwards;
}
.nz-hero-visual { animation-delay: 20ms; }
.nz-hero-copy > :nth-child(1) { animation-delay: 90ms; }
.nz-hero-copy > :nth-child(2) { animation-delay: 160ms; }
.nz-hero-copy > :nth-child(3) { animation-delay: 230ms; }
.nz-hero-copy > :nth-child(4) { animation-delay: 300ms; }
.nz-hero-copy > :nth-child(5) { animation-delay: 370ms; }
.nz-hero-copy > :nth-child(n + 6) { animation-delay: 440ms; }
/* The hero eyebrow reads as a small status pill with a live accent dot. */
.nz-hero-copy .nz-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  border: 1px solid var(--nozomi-accent-border);
  border-radius: var(--nozomi-radius-pill);
  background: color-mix(in srgb, var(--nozomi-accent) 10%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 30px -10px color-mix(in srgb, var(--nozomi-accent) 70%, transparent);
  padding: 6px 14px 6px 11px;
  color: color-mix(in srgb, var(--nozomi-accent) 60%, var(--nozomi-text-strong));
}
.nz-hero-copy .nz-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nozomi-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--nozomi-accent) 22%, transparent), 0 0 10px var(--nozomi-accent);
}
.nz-hero h1 {
  max-width: 15ch;
  margin: 1.4rem 0 1.5rem;
  font-family: var(--font-display, var(--nozomi-font-mono));
  font-size: var(--nozomi-font-display-hero);
  font-weight: var(--nozomi-weight-bold);
  line-height: 0.98;
  letter-spacing: -0.048em;
  color: var(--nozomi-text-strong);
  text-wrap: balance;
  /* Lit from above: the headline falls off into the canvas at its foot. */
  background: linear-gradient(180deg, var(--nozomi-text-strong) 30%, color-mix(in srgb, var(--nozomi-text-strong) 58%, var(--nozomi-bg)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nz-hero h1 span {
  background: linear-gradient(100deg, var(--nozomi-accent-soft), var(--nozomi-accent) 55%, var(--nozomi-accent-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nz-hero-lede {
  max-width: 40rem;
  margin: 0;
  color: color-mix(in srgb, var(--nozomi-text) 82%, var(--nozomi-text-muted));
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.nz-hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nozomi-space-3); margin-top: 2.25rem; }
.nz-hero-actions .nz-btn, .nz-access-card .nz-btn { min-height: 50px; padding-inline: 1.6rem; border-radius: var(--nozomi-radius-pill); font-size: 0.9375rem; }
p.nz-hero-note { max-width: 32rem; margin: var(--nozomi-space-4) 0 0; color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); line-height: 1.55; }
ul.nz-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-small);
  letter-spacing: 0.01em;
}
.nz-trust-row li {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 28px;
}
.nz-trust-row li::before {
  content: "✓";
  display: inline-grid;
  width: 18px;
  height: 18px;
  place-items: center;
  border: 1px solid var(--nozomi-success-border);
  border-radius: 50%;
  background: var(--nozomi-success-bg);
  color: var(--nozomi-success);
  font-size: 10px;
  font-weight: var(--nozomi-weight-bold);
}

/* The brand moment: the mark inside two orbit rings, a comet of accent light
   circling the outer one, and a halo behind. */
.nz-hero-visual {
  position: relative;
  order: -1;
  display: grid;
  place-items: center;
  width: clamp(168px, 16vw, 216px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, transparent 64%, color-mix(in srgb, var(--nozomi-accent) 22%, transparent) 64.6% 65.4%, transparent 66%),
    radial-gradient(closest-side, transparent 97.2%, color-mix(in srgb, var(--nozomi-text-strong) 14%, transparent) 97.6% 98.6%, transparent 99%);
}
.nz-hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0turn, transparent 0 62%, color-mix(in srgb, var(--nozomi-accent) 55%, transparent) 92%, var(--nozomi-accent-soft) 99.5%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side, transparent 96.4%, #000 97.2% 99.2%, transparent 99.8%);
  mask-image: radial-gradient(closest-side, transparent 96.4%, #000 97.2% 99.2%, transparent 99.8%);
  animation: nz-orbit 9s linear infinite;
}
.nz-hero-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--nozomi-accent) 34%, transparent), transparent 66%);
  filter: blur(26px);
}
.nz-hero-visual .nz-logo {
  position: relative;
  z-index: 1;
  --nz-logo-size: 46%;
  filter: drop-shadow(0 0 26px var(--nz-logo-glow, color-mix(in srgb, var(--nozomi-accent) 45%, transparent)));
  animation: nz-float 7s ease-in-out infinite;
}
@keyframes nz-orbit { to { transform: rotate(1turn); } }
@keyframes nz-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* The bar: what a result has to clear before the customer sees it, stated as
   three numbered stages. The last stage is the only one that reports, so it
   is the only one lit in the accent. */
.nz-gate {
  position: relative;
  z-index: 1;
  min-width: 0;
  margin-top: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: calc(var(--nozomi-radius-dialog) + 4px);
  background:
    radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--nozomi-accent) 10%, transparent), transparent 60%),
    var(--nozomi-sheen),
    var(--nozomi-glass-strong);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--nozomi-shadow-panel);
}
.nz-gate .nz-eyebrow { margin: 0; color: var(--nozomi-eyebrow); }
.nz-gate h2 { margin: 0.4rem 0 0; font-size: var(--nozomi-font-page-title); font-weight: var(--nozomi-weight-semibold); letter-spacing: -0.022em; color: var(--nozomi-text-strong); }
ol.nz-gate-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: nz-gate;
}
.nz-gate-steps li {
  position: relative;
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: 1.25rem 1.25rem 1.35rem;
  border: 1px solid var(--nozomi-border);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-overlay-subtle);
  counter-increment: nz-gate;
}
.nz-gate-steps li:last-child {
  border-color: var(--nozomi-accent-border);
  background:
    radial-gradient(90% 90% at 100% 0%, color-mix(in srgb, var(--nozomi-accent) 16%, transparent), transparent 65%),
    var(--nozomi-overlay-subtle);
  box-shadow: 0 20px 44px -28px color-mix(in srgb, var(--nozomi-accent) 80%, transparent);
}
/* Stage index, top right of each card. */
.nz-gate-steps li::after {
  content: counter(nz-gate, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-small);
  letter-spacing: 0.08em;
}
.nz-gate-steps li:last-child::after { color: var(--nozomi-accent); }
/* A connector runs from each stage into the next. */
.nz-gate-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1.62rem;
  right: calc(-0.75rem - 1px);
  width: 0.75rem;
  height: 1px;
  background: var(--nozomi-border-strong);
}
.nz-gate-mark {
  position: relative;
  z-index: 1;
  flex: none;
  width: 0.8rem;
  height: 0.8rem;
  border: 1px solid var(--nozomi-border-interactive);
  border-radius: 50%;
  background: var(--nozomi-bg);
}
.nz-gate-mark-warn { border-color: var(--nozomi-warning); background: var(--nozomi-warning-bg); box-shadow: 0 0 10px -2px var(--nozomi-warning); }
.nz-gate-mark-ok { border-color: var(--nozomi-success); background: var(--nozomi-success); box-shadow: 0 0 0 4px var(--nozomi-success-bg), 0 0 14px var(--nozomi-success); }
.nz-gate-steps strong { display: block; color: var(--nozomi-text-strong); font-size: var(--nozomi-font-section-title); font-weight: var(--nozomi-weight-semibold); letter-spacing: -0.015em; }
.nz-gate-steps p { margin: 0.4rem 0 0; color: var(--nozomi-text-muted); font-size: var(--nozomi-font-control); line-height: 1.55; }
p.nz-gate-rule {
  margin: 1.35rem 0 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--nozomi-border);
  color: var(--nozomi-text);
  font-size: var(--nozomi-font-control);
  line-height: 1.55;
}

/* Explainer cards: each carries a large outline numeral in the accent. */
.nz-explain-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.75rem; counter-reset: nz-explain; }
.nz-explain-grid article {
  position: relative;
  overflow: hidden;
  min-height: 12.5rem;
  padding: 1.5rem;
  border: 1px solid var(--nozomi-border);
  border-radius: calc(var(--nozomi-radius-panel) + 2px);
  background: var(--nozomi-sheen), var(--nozomi-glass);
  box-shadow: var(--nozomi-shadow-panel);
  counter-increment: nz-explain;
  transition: border-color var(--nozomi-motion-base) var(--nozomi-ease), transform var(--nozomi-motion-base) var(--nozomi-ease-entrance), box-shadow var(--nozomi-motion-base) var(--nozomi-ease);
}
.nz-explain-grid article::after {
  content: counter(nz-explain, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 1.4rem;
  color: transparent;
  font-family: var(--font-display, var(--nozomi-font-sans));
  font-size: 3.75rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--nozomi-accent) 30%, transparent);
  pointer-events: none;
  transition: -webkit-text-stroke-color var(--nozomi-motion-base) var(--nozomi-ease);
}
.nz-explain-grid article:hover {
  border-color: color-mix(in srgb, var(--nozomi-accent) 35%, var(--nozomi-border));
  transform: translateY(-3px);
  box-shadow: var(--nozomi-shadow-panel), 0 24px 50px -30px color-mix(in srgb, var(--nozomi-accent) 70%, transparent);
}
.nz-explain-grid article:hover::after { -webkit-text-stroke-color: color-mix(in srgb, var(--nozomi-accent) 60%, transparent); }
/* The outline numeral is the visible index; the step chip stays for
   assistive technology only. */
.nz-explain-grid .nz-step-number {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nz-explain-grid h2, .nz-explain-grid h3 { position: relative; margin: 3.9rem 0 0; font-size: 1.125rem; font-weight: var(--nozomi-weight-semibold); letter-spacing: -0.02em; color: var(--nozomi-text-strong); }
.nz-explain-grid p { position: relative; max-width: 30rem; margin: 0.5rem 0 0; color: var(--nozomi-text-muted); font-size: var(--nozomi-font-control); line-height: 1.6; }
.nz-step-number {
  display: inline-flex;
  min-width: 1.75rem;
  height: 1.75rem;
  align-items: center;
  justify-content: center;
  padding: 0 0.45rem;
  border: 1px solid var(--nozomi-accent-border);
  border-radius: 8px;
  background: color-mix(in srgb, var(--nozomi-accent) 12%, transparent);
  box-shadow: 0 0 18px -6px color-mix(in srgb, var(--nozomi-accent) 80%, transparent);
  color: var(--nozomi-accent);
  font-family: var(--nozomi-font-caption);
  font-size: var(--nozomi-font-small);
  font-weight: var(--nozomi-weight-bold);
}

/* The closing call to action: a centred card whose border carries a slowly
   travelling band of accent light. */
@property --nz-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.nz-access-card {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--nozomi-space-5);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(2.25rem, 6vw, 4rem) clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--nozomi-accent-border);
  border-radius: calc(var(--nozomi-radius-dialog) + 4px);
  background:
    radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--nozomi-accent) 22%, transparent), transparent 70%),
    var(--nozomi-glass-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 40px 100px -40px color-mix(in srgb, var(--nozomi-accent) 70%, transparent);
  text-align: center;
}
.nz-access-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: conic-gradient(from var(--nz-angle), transparent 0 70%, var(--nozomi-accent-soft) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: nz-angle 7s linear infinite;
  pointer-events: none;
}
@keyframes nz-angle { to { --nz-angle: 360deg; } }
.nz-access-card .nz-eyebrow { margin: 0; color: var(--nozomi-eyebrow); }
.nz-access-card h2 { max-width: 22ch; margin: 0.6rem auto 0.75rem; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); font-weight: var(--nozomi-weight-bold); line-height: 1.08; letter-spacing: -0.04em; color: var(--nozomi-text-strong); text-wrap: balance; }
.nz-access-card p { max-width: 36rem; margin: 0 auto; color: var(--nozomi-text-muted); line-height: 1.6; }

/* Element-qualified selectors above (ul/ol/p) outrank the .nz-base prose
   reset, which zeroes margins on bare lists and paragraphs. */
body:has(nz-information) { padding-bottom: 40px; }
body.nz-information-open { overflow: hidden; }
nz-information, .nz-information-dialog { font: var(--nozomi-font-body)/var(--nozomi-line-body) var(--nozomi-font-sans); }
@media (min-width: 768px) { body:has(nz-information) .nz-shell { bottom: 50px; } }
/* The mobile drawer ends above the fixed reference footer, not under it. */
@media (max-width: 767px) { body:has(nz-information) .nz-shell-nav-open { bottom: 40px; } }
nz-information { display: block; position: fixed; inset: auto 0 0; z-index: 45; height: 40px; border-top: 1px solid color-mix(in srgb, var(--nozomi-border) 70%, transparent); background: color-mix(in srgb, var(--nozomi-bg) 72%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.nz-public-links { display: flex; justify-content: center; align-items: center; gap: clamp(0px, 1.5vw, 16px); height: 100%; margin: 0; padding: 0 8px; }
.nz-public-links a {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  color: var(--nozomi-text-muted);
  font-family: var(--nozomi-font-caption);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0 clamp(6px, 1vw, 12px);
  transition: color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.nz-public-links a:hover { color: var(--nozomi-text-strong); }
.nz-public-links a[aria-current="page"] { color: var(--nozomi-accent); text-decoration: underline; text-underline-offset: 5px; }
.nz-public-links a:focus-visible { outline: 2px solid var(--nozomi-accent); outline-offset: 3px; border-radius: 2px; }
.nz-information-dialog { box-sizing: border-box; width: min(860px, calc(100vw - 48px)); max-width: none; height: fit-content; max-height: min(780px, calc(100dvh - 96px)); padding: 0; margin: auto; overflow: hidden; border: 1px solid var(--nozomi-border-strong); border-radius: 22px; color: var(--nozomi-text); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 160px), var(--nozomi-bg); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 40px 120px -20px #000c; animation: nz-dialog-in var(--nozomi-motion-base) var(--nozomi-ease-entrance) both; }
.nz-information-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.nz-information-dialog::backdrop { background: color-mix(in srgb, var(--nozomi-bg-deep) 62%, transparent); backdrop-filter: blur(10px); }
.nz-information-head { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 10px 16px 10px 28px; border-bottom: 1px solid var(--nozomi-border); font-size: 12px; color: var(--nozomi-text-muted); }
.nz-information-head > span { font-family: var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.nz-information-head .nz-information-permalink { margin-left: auto; color: var(--nozomi-text-muted); text-decoration: none; }
.nz-information-head button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--nozomi-border); border-radius: 50%; background: var(--nozomi-panel); color: var(--nozomi-text-strong); font: 24px/1 sans-serif; cursor: pointer; }
.nz-information-head button:hover { background: var(--nozomi-surface-raised); }
.nz-information-head .nz-information-back { width: auto; padding: 0 12px; border-radius: 8px; font: inherit; }
.nz-information-head [hidden] { display: none; }
.nz-information-dialog :is(button, a):focus-visible { outline: 2px solid var(--nozomi-accent); outline-offset: 3px; }
.nz-information-content { min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--nozomi-border) transparent; }
.nz-information-document[role="status"] { min-height: 200px; padding: 32px; color: var(--nozomi-text-muted); }
.nz-information-document .nz-document { width: 100%; }
@media (max-width: 540px) {
  .nz-public-links a { font-size: 11px; }
  .nz-information-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 40px); border-radius: 12px; }
  .nz-information-head { padding-left: 20px; gap: 10px; }
}
@media print { nz-information { display: none; } }
/* Footer wrapper for pages that keep the legal links outside <main>. */
.nz-site-footer { max-width: 76rem; margin: 0 auto; padding: 0 1.5rem 2.5rem; }

/* One document reader for standalone pages and in-app reference views. */
.nz-document { box-sizing: border-box; width: min(52rem, 100%); margin: 0 auto; padding: clamp(1.5rem, 5vw, 3rem); color: var(--nozomi-text); overflow-wrap: anywhere; }
.nz-document h1 { margin: 0 0 1.5rem; font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; line-height: 1.2; letter-spacing: -.03em; color: var(--nozomi-text-strong); }
.nz-document h2 { margin: 2rem 0 .65rem; font-size: 1.1rem; font-weight: 600; color: var(--nozomi-text-strong); }
.nz-document :is(p, ul, ol, dl) { margin: 0 0 1rem; line-height: 1.75; color: var(--nozomi-text-muted); }
.nz-document :is(ul, ol) { padding-left: 1.4rem; }
.nz-document ul { list-style: disc; }
.nz-document ol { list-style: decimal; }
.nz-document dt { margin-top: .85rem; font-weight: 600; }
.nz-document dd { margin: .25rem 0 0; }
.nz-document a { color: var(--nozomi-accent); text-underline-offset: 3px; }
.nz-document a:focus-visible { outline: 2px solid var(--nozomi-accent); outline-offset: 3px; }
.nz-document .nz-eyebrow { margin-bottom: .75rem; }
.nz-document .nz-public-links { margin-top: 2rem; }
.nz-document .nz-public-links a { color: var(--nozomi-text-muted); }
.nz-document .nz-public-links a:hover, .nz-document .nz-public-links a[aria-current="page"] { color: var(--nozomi-accent); }
.nz-document .nz-document-meta { margin-top: 1rem; font-size: var(--nozomi-font-small); }
.nz-document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0; }
.nz-document-grid a { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border: 1px solid var(--nozomi-border); border-radius: var(--nozomi-radius-panel); background: var(--nozomi-panel); text-decoration: none; }
.nz-document-grid a:hover { border-color: var(--nozomi-accent); background: var(--nozomi-accent-bg); }
.nz-document-grid strong { color: var(--nozomi-text-strong); }
.nz-document-grid span { color: var(--nozomi-text-muted); font-size: var(--nozomi-font-small); line-height: 1.6; }
@media (max-width: 540px) {
  .nz-document-grid { grid-template-columns: 1fr; }
  .nz-public-links a { min-height: 32px; }
}

@media (max-width: 960px) {
  ol.nz-gate-steps { grid-template-columns: 1fr; }
  .nz-gate-steps li:not(:last-child)::before { top: auto; bottom: calc(-0.75rem - 1px); left: 1.62rem; right: auto; width: 1px; height: 0.75rem; }
  .nz-explain-grid { grid-template-columns: 1fr 1fr; }
  .nz-explain-grid article:last-child { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .nz-public { padding-inline: 1rem; }
  .nz-public-header { top: 8px; width: calc(100% - 16px); min-height: 52px; margin-top: 8px; padding-left: 14px; }
  .nz-public-account span { display: none; }
  .nz-hero { padding-top: 2rem; }
  .nz-hero-visual { width: 132px; }
  .nz-hero h1 { font-size: clamp(2.3rem, 11vw, 3rem); }
  .nz-hero-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .nz-trust-row { flex-direction: column; align-items: flex-start; }
  .nz-gate { padding: 1.25rem; }
  .nz-explain-grid { grid-template-columns: 1fr; }
  .nz-explain-grid article { min-height: 0; }
  .nz-explain-grid article:last-child { grid-column: auto; }
  .nz-access-card .nz-btn { align-self: stretch; }
}

/* ---------- 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) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .nz-spinner { animation-duration: 1800ms !important; animation-iteration-count: infinite !important; }
  .nz-skeleton { animation: none !important; }
  .term-boot { opacity: 1 !important; transform: none !important; }
  .nz-hero-copy > *, .nz-hero-visual { opacity: 1 !important; animation: none !important; }
  .nz-hero-visual .nz-logo, .nz-hero-visual::before, .nz-access-card::before { animation: none !important; }
  :where(.nz-shell ~ main, .nz-page-enter) > * { animation: none !important; }
  .term-caret::after { animation: none !important; }
  .nz-gate-dot, .nz-gate-graph-ping { animation: none !important; }
  .nz-gate-graph-ping { opacity: 0; }
  .nz-workmeter-bar::-webkit-progress-value,
  .nz-workmeter-bar::-moz-progress-bar,
  .nz-workmeter-sweep::before { animation: none !important; }
}


/* Fuji app layer. The shared sheet owns type (Inter), the neutral scale, and
   every .nz-* control; this file only adds Fuji's cyan identity and the
   composition of its own views. No font, button, or input looks live here. */

/* Fuji brand-accent scale: a deeper glacier cyan, one step off the shared soft
   cyan (--nozomi-cyan, #7ab6cc), so the primary action reads distinct from the
   info tone, focus ring, and eyebrow, which stay on the softer shared cyan. */
:root {
  --fuji-accent: #3fa8d6;       /* glacier cyan: primary action */
  --fuji-accent-hover: #5cbbe4;
  --fuji-accent-dark: #2c86b4;
  --fuji-accent-soft: #86c8e6;
}

/* Alias layer: Fuji-local names over the shared Nozomi tokens. */
:root {
  --bg: var(--nozomi-bg);
  --panel: var(--nozomi-panel);
  --panel-2: var(--nozomi-surface);
  --line: var(--nozomi-border);
  --text: var(--nozomi-text-strong);
  --muted: var(--nozomi-text-muted);
  --accent: var(--fuji-accent);
  --accent-dark: var(--fuji-accent-dark);
  --error: var(--nozomi-danger-text);
}

/* The shared accent family maps onto the glacier cyan. */
:root {
  --nozomi-accent: var(--fuji-accent);
  --nozomi-accent-hover: var(--fuji-accent-hover);
  --nozomi-accent-dark: var(--fuji-accent-dark);
  --nozomi-accent-soft: var(--fuji-accent-soft);
  --nozomi-accent-bg: color-mix(in srgb, var(--fuji-accent) 16%, transparent);
  --nozomi-accent-bg-hover: color-mix(in srgb, var(--fuji-accent) 26%, transparent);
  --nozomi-accent-border: color-mix(in srgb, var(--fuji-accent) 42%, transparent);
  --nozomi-glow-accent: 0 0 14px color-mix(in srgb, var(--fuji-accent) var(--nozomi-tint-5), transparent);
  /* Fuji eyebrows stay on the soft shared cyan (the shared default is muted). */
  --nozomi-eyebrow: var(--nozomi-cyan);
}

/* The shared ambient canvas (.nz-base) lights the shell in glacier cyan; a
   second cool wash in the top corner is Fuji's own atmosphere. */
html { min-height: 100%; background: var(--bg); }
body.nz-base {
  background:
    radial-gradient(900px 520px at 100% -10%, color-mix(in srgb, var(--fuji-accent) 10%, transparent), transparent 70%),
    var(--nozomi-canvas),
    var(--nozomi-bg);
  background-attachment: fixed;
}

/* Caption voice: muted small text, one grouped rule. */
.change-schedule,
.inventory-description,
.inventory-compact,
.technology-chip,
.screenshot-placeholder,
.asset-screenshot figcaption,
.coverage-details summary small,
.coverage-row p,
.proposal-row div > span,
.landscape-sub {
  color: var(--muted);
  font-size: var(--nozomi-font-small);
}

/* ---------- Public landing ----------
   Composition comes from the shared nz-public-* / nz-hero / nz-gate layer;
   Fuji keeps its cyan wash and ridge field. */
.nz-public::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 74% -12%, color-mix(in srgb, var(--nozomi-cyan) 16%, transparent), transparent 34rem);
}

/* Fuji's masthead motif: three blurred ridges with a snowline on the nearest,
   massed behind the hero and capped near the fold. Static: the mountain is the
   still counterpart to Sakura's falling petals. The blur sits on the field
   because clip-path applies after an element's own filter. */
.ridge-field {
  position: fixed;
  inset: 0 0 auto;
  height: min(96vh, 1040px);
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  filter: blur(38px);
}
.ridge-field i {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: var(--ridge-width);
  height: var(--ridge-height);
  translate: calc(-50% + var(--ridge-shift)) 0;
  clip-path: polygon(0% 100%, 34% 26%, 43% 8%, 57% 8%, 66% 26%, 100% 100%);
  background: linear-gradient(180deg, var(--nozomi-info-border), transparent 74%);
  opacity: var(--ridge-opacity);
}
.ridge-field i:nth-child(1) { --ridge-width: 78rem; --ridge-height: 22rem; --ridge-shift: -22rem; --ridge-opacity: 0.7; }
.ridge-field i:nth-child(2) { --ridge-width: 62rem; --ridge-height: 17rem; --ridge-shift: 24rem; --ridge-opacity: 0.6; }
.ridge-field i:nth-child(3) {
  --ridge-width: 100rem;
  --ridge-height: 30rem;
  --ridge-shift: 0rem;
  --ridge-opacity: 0.9;
  background:
    linear-gradient(180deg, var(--nozomi-cyan) 0 5%, transparent 5.5%),
    linear-gradient(180deg, var(--nozomi-info-border), transparent 62%);
}

/* ---------- Shell ---------- */

/* Organization monogram in the rail's icon slot. */
.org-mark {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 1px solid var(--nozomi-border-strong);
  border-radius: 4px;
  background: var(--nozomi-surface);
  font-size: 10px;
  font-weight: var(--nozomi-weight-semibold);
  line-height: 1;
}
.nz-shell-link-active .org-mark,
.nz-shell-link[aria-current="page"] .org-mark {
  border-color: var(--nozomi-accent-border);
  background: var(--nozomi-accent-bg);
}

/* "Add organization" reads as a quiet rail action, not a browser disclosure. */
.organization-create summary {
  display: flex;
  min-height: var(--nozomi-size-control-sm);
  align-items: center;
  gap: var(--nozomi-space-2h);
  padding: 0 var(--nozomi-space-2h);
  border-radius: var(--nozomi-radius-control);
  color: var(--nozomi-text-muted);
  font-size: var(--nozomi-font-control);
  font-weight: var(--nozomi-weight-medium);
  cursor: pointer;
  list-style: none;
  transition: color var(--nozomi-motion-fast) var(--nozomi-ease), background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.organization-create summary::-webkit-details-marker { display: none; }
.organization-create summary:hover { background: var(--nozomi-overlay-medium); color: var(--nozomi-text-strong); }
.organization-create summary svg { color: var(--nozomi-accent); }
.organization-create[open] summary { margin-bottom: var(--nozomi-space-3); color: var(--nozomi-text-strong); }
.organization-create form .nz-btn { width: 100%; }

/* The drawer sits inside the sticky shell's stacking context, so the fixed
   product-information bar would cover its footer; stop the drawer above it. */
@media (max-width: 767px) {
  body:has(nz-information) .nz-shell-nav-open { bottom: 40px; }
}

/* ---------- Workspace column ---------- */

.content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--nozomi-space-5);
  min-width: 0;
  max-width: 88rem;
  padding-top: var(--nozomi-space-6);
  padding-bottom: 64px;
}
@media (max-width: 767px) {
  .content { padding: var(--nozomi-space-5) var(--nozomi-space-4) 56px; gap: var(--nozomi-space-4h); }
}
.content-skeleton-heading { max-width: 24rem; }

/* Page header: the shared component, with the Fuji title scale and a quiet
   rule separating it from the view. */
.content > .nz-page-header {
  padding-bottom: var(--nozomi-space-5);
  border-bottom: 1px solid var(--line);
}
.page-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--nozomi-space-2) var(--nozomi-space-3); }
.page-meta [role="status"]:empty { display: none; }
.nz-page-header-actions .nz-btn { white-space: nowrap; }
@media (max-width: 639px) {
  .nz-page-header-actions .nz-btn { width: 100%; }
}

/* Every banner in one tight stack; the wrapper disappears when empty. */
.fuji-notices { display: grid; gap: var(--nozomi-space-2); }
.fuji-notices:empty { display: none; }

/* First-run empty state carries the create form inline. */
.content-empty { min-height: 320px; margin-top: var(--nozomi-space-6); }
.organization-inline { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nozomi-space-2); width: min(28rem, 100%); }
.organization-inline .nz-input { flex: 1 1 14rem; }
.organization-inline .nz-btn { flex: 1 0 auto; }
@media (min-width: 540px) { .organization-inline .nz-btn { flex-grow: 0; } }
.nz-empty-state-action { margin-top: var(--nozomi-space-4); }

/* Buttons never wrap; leading icons sit on the label baseline. */
.nz-btn { white-space: nowrap; gap: var(--nozomi-space-2); }
.nz-btn > svg { width: 14px; height: 14px; flex: 0 0 auto; }

/* Panels: 20px rhythm on desktop, 16px on phones. A panel inside a panel is a
   section, not a second frame. */
.nz-panel-body { padding: var(--nozomi-space-4h); }
@media (max-width: 760px) {
  .nz-panel-head { flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; padding: var(--nozomi-space-3) var(--nozomi-space-4); }
  .nz-panel-body { padding: var(--nozomi-space-4); }
}
.nz-panel .nz-panel { border-color: transparent; background: var(--nozomi-overlay-subtle); box-shadow: none; }

/* Tables run edge to edge inside their panel; the first and last columns
   carry the panel's inset instead. */
.fuji-table-panel > .nz-panel-body { padding: 0; }
.fuji-table-panel .nz-table-th:first-child,
.fuji-table-panel .nz-table-td:first-child { padding-left: var(--nozomi-space-4h); }
.fuji-table-panel .nz-table-th:last-child,
.fuji-table-panel .nz-table-td:last-child { padding-right: var(--nozomi-space-4h); }
.fuji-table-panel .nz-pager { padding: var(--nozomi-space-3) var(--nozomi-space-4h) 0; }
/* On phones the rows become a divided list inside the panel, not cards in a card. */
.fuji-table-panel .nz-table-cards { gap: 0; }
.fuji-table-panel .nz-table-card { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; }
.fuji-table-panel .nz-table-card:first-child { border-top: 0; }
.fuji-table-panel .asset-address-heading + .nz-stack .nz-table-card:first-child { border-top: 1px solid var(--line); }
.nz-table-td { vertical-align: middle; }
.nz-table-td .nz-badge { vertical-align: middle; }

/* Inventory tables share fixed column geometry, so every address group lines
   up with the one above it. */
.inventory-table { table-layout: fixed; }
.inventory-name, .inventory-description { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inventory-name { color: var(--text); font-weight: var(--nozomi-weight-medium); }
.inventory-description { margin-top: 2px; }
.inventory-compact { line-height: 1.5; }
.inventory-table .nz-progress-row { display: flex; align-items: center; gap: var(--nozomi-space-2); }
.inventory-table .nz-progress { flex: 1 1 auto; }
.inventory-table .nz-progress-value { min-width: 3ch; color: var(--muted); font-size: var(--nozomi-font-small); font-variant-numeric: tabular-nums; text-align: right; }

/* Mobile inventory card: identity, then priority, then a chevron. */
.nz-table-card { padding: 0; }
.asset-card-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--nozomi-space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--nozomi-space-3) var(--nozomi-space-4);
  border: 0;
  border-radius: inherit;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.asset-card-button:hover { background: var(--nozomi-overlay-subtle); }
.asset-card-body { display: grid; gap: 2px; min-width: 0; }
.asset-card-body strong { overflow: hidden; color: var(--text); font-weight: var(--nozomi-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.asset-card-body small { color: var(--muted); font-size: var(--nozomi-font-small); }
.asset-card-chevron { display: inline-flex; color: var(--muted); }
.asset-card-chevron svg { width: 14px; height: 14px; }

/* ---------- Overview ---------- */

.briefing-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: var(--nozomi-space-4);
  align-items: stretch;
}
.briefing-story {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding: var(--nozomi-space-6);
  border: 1px solid var(--line);
  border-radius: var(--nozomi-radius-panel);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--fuji-accent) 10%, transparent), transparent 60%),
    var(--nozomi-panel);
  box-shadow: var(--nozomi-shadow-inset-top);
}
.briefing-story-alert {
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--nozomi-danger) 10%, transparent), transparent 60%),
    var(--nozomi-panel);
}
.briefing-story h2 {
  max-width: 22ch;
  margin: var(--nozomi-space-3) 0 var(--nozomi-space-3);
  color: var(--text);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  font-weight: var(--nozomi-weight-semibold);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.executive-summary {
  max-width: 60ch;
  margin-bottom: var(--nozomi-space-5);
  color: var(--muted);
  font-size: var(--nozomi-font-body);
  line-height: 1.65;
}
.briefing-story-empty { align-items: center; margin: 0; }

/* Metric tiles: label, large tabular value, one detail line. */
.fuji-metrics {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--nozomi-space-3);
  border: 0;
  background: none;
}
.briefing-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fuji-metrics .nz-metric-strip-item {
  display: flex;
  flex-direction: column;
  min-height: 112px;
  padding: var(--nozomi-space-4) var(--nozomi-space-4h);
  border: 1px solid var(--line);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-panel);
  box-shadow: var(--nozomi-shadow-inset-top);
}
.fuji-metrics .nz-type-label { text-transform: none; letter-spacing: 0; font-size: var(--nozomi-font-small); font-weight: var(--nozomi-weight-medium); }
.fuji-metrics .nz-metric-strip-value {
  margin-top: var(--nozomi-space-2);
  color: var(--text);
  font-size: 1.875rem;
  font-weight: var(--nozomi-weight-semibold);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.fuji-metrics .nz-metric-strip-value.nz-tone-text-danger { color: var(--nozomi-danger-text); }
.fuji-metrics .nz-metric-strip-value.nz-tone-text-warning { color: var(--nozomi-warning-text); }
.fuji-metrics .nz-metric-strip-value.nz-tone-text-success { color: var(--nozomi-success-text); }
.fuji-metrics .nz-metric-strip-detail { display: grid; gap: var(--nozomi-space-2); margin-top: auto; padding-top: var(--nozomi-space-2); white-space: normal; }
.fuji-metrics .nz-metric-strip-value.nz-tone-text-info { color: var(--nozomi-info-text); }

/* Proposed assets and source signals: a divided list inside the panel. */
.proposal-list { display: grid; }
.proposal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nozomi-space-4);
  padding: var(--nozomi-space-3) 0;
  border-top: 1px solid var(--line);
}
.proposal-row:first-child { border-top: 0; padding-top: 0; }
.proposal-row:last-child { padding-bottom: 0; }
.proposal-row > div { display: grid; gap: 2px; min-width: 0; }
.proposal-row strong { overflow: hidden; color: var(--text); font-weight: var(--nozomi-weight-medium); text-overflow: ellipsis; white-space: nowrap; }
.proposal-row div > span { overflow-wrap: anywhere; }
.proposal-row .proposal-note { color: var(--nozomi-text); font-size: var(--nozomi-font-control); }
.panel-foot-alert { margin-top: var(--nozomi-space-4); }

/* Landscape disclosure: a panel-like row with a turning chevron. */
.briefing-depth {
  border: 1px solid var(--line);
  border-radius: var(--nozomi-radius-panel);
  background: var(--nozomi-panel);
  box-shadow: var(--nozomi-shadow-inset-top);
}
.briefing-depth > summary {
  display: flex;
  align-items: center;
  gap: var(--nozomi-space-3);
  padding: var(--nozomi-space-4) var(--nozomi-space-4h);
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
}
.briefing-depth > summary::-webkit-details-marker { display: none; }
.briefing-depth > summary:hover { background: var(--nozomi-overlay-subtle); }
.briefing-depth > summary > span:last-child { display: grid; gap: 2px; }
.briefing-depth > summary strong { color: var(--text); font-size: var(--nozomi-font-display-section); font-weight: var(--nozomi-weight-semibold); letter-spacing: var(--nozomi-tracking-tight); }
.briefing-depth > summary small { color: var(--muted); font-size: var(--nozomi-font-small); }
.briefing-depth-chevron { display: inline-flex; color: var(--muted); transition: transform var(--nozomi-motion-base) var(--nozomi-ease); }
.briefing-depth[open] .briefing-depth-chevron { transform: rotate(90deg); }
.briefing-depth[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--nozomi-radius-panel) var(--nozomi-radius-panel) 0 0; }
.overview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.overview-grid > section { min-width: 0; padding: var(--nozomi-space-4h); }
.overview-grid > section + section { border-left: 1px solid var(--line); }
.overview-grid h3 { color: var(--text); font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-semibold); }
.landscape-sub { margin: 2px 0 var(--nozomi-space-4); }
.composition-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--nozomi-space-2); margin: 0; }
.composition-list div { padding: var(--nozomi-space-3); border-radius: var(--nozomi-radius-control); background: var(--nozomi-overlay-subtle); }
.composition-list dt { color: var(--muted); font-size: var(--nozomi-font-small); }
.composition-list dd { margin: var(--nozomi-space-1) 0 0; color: var(--text); font-size: 1.25rem; font-weight: var(--nozomi-weight-semibold); font-variant-numeric: tabular-nums; }
.technology-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--nozomi-space-5); }
.technology-overview span { display: flex; align-items: center; justify-content: space-between; gap: var(--nozomi-space-3); padding: var(--nozomi-space-2) 0; border-bottom: 1px solid var(--line); font-size: var(--nozomi-font-control); }
.technology-overview strong { font-weight: var(--nozomi-weight-medium); }
.technology-overview small { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

.change-schedule { margin-bottom: var(--nozomi-space-4); }
.change-card { display: grid; gap: var(--nozomi-space-2); justify-items: start; padding: var(--nozomi-space-3) var(--nozomi-space-4); }

/* ---------- Assets ---------- */

/* Scope form: asset, description, attestation, then the submit. */
.asset-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--nozomi-space-3) var(--nozomi-space-4);
}
.asset-form .asset-value, .asset-description { grid-column: 1 / -1; }

.asset-toolbar { gap: var(--nozomi-space-2); padding: var(--nozomi-space-4) var(--nozomi-space-4h); border-bottom: 1px solid var(--line); }
.asset-search { position: relative; display: flex; flex: 1 1 16rem; align-items: center; min-width: min(20rem, 100%); }
.asset-search > svg { position: absolute; left: 11px; width: 14px; height: 14px; color: var(--muted); pointer-events: none; }
.asset-search .nz-input { width: 100%; padding-left: 32px; }
.asset-toolbar .nz-select, .asset-toolbar select.nz-input { flex: 0 0 auto; width: auto; min-width: 11rem; }

/* Address groups: a quiet header band over each table. */
.asset-address-group + .asset-address-group { border-top: 1px solid var(--line); }
.asset-address-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nozomi-space-4);
  padding: var(--nozomi-space-4) var(--nozomi-space-4h) var(--nozomi-space-3);
}
.asset-address-heading > div:first-child { display: grid; gap: 2px; min-width: 0; }
.asset-address-heading strong { color: var(--text); font-family: var(--nozomi-font-mono); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-semibold); }
.asset-address-group .nz-table-th { border-top: 1px solid var(--line); }

/* Technical chips: services and technologies are values, so mono and neutral. */
.chip-list { display: flex; flex-wrap: wrap; gap: var(--nozomi-space-1h); }
.data-chip, .technology-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 var(--nozomi-space-2);
  border: 1px solid var(--nozomi-border-strong);
  border-radius: var(--nozomi-radius-small);
  background: var(--nozomi-surface);
  color: var(--nozomi-text);
  font-size: var(--nozomi-font-small);
  white-space: nowrap;
}
.data-chip { font-family: var(--nozomi-font-mono); font-size: var(--nozomi-font-caption); }

/* Thumbnail is a real button opening a zoom dialog, so strip button chrome. */
.asset-table-thumbnail { display: block; width: 88px; padding: 0; border: 0; border-radius: var(--nozomi-radius-small); background: none; cursor: zoom-in; }
.asset-table-thumbnail:focus-visible { outline: 2px solid var(--nozomi-focus); outline-offset: 2px; }
.asset-table-thumbnail .screenshot-frame { width: 88px; min-height: 0; border: 1px solid var(--line); border-radius: var(--nozomi-radius-small); transition: border-color var(--nozomi-motion-fast) var(--nozomi-ease); }
.asset-table-thumbnail:hover .screenshot-frame { border-color: var(--nozomi-border-strong); }
.screenshot-zoom-dialog { max-width: min(52rem, 92vw); }
.screenshot-zoom-body { display: grid; place-items: center; }
.screenshot-zoom-image { display: block; max-width: 100%; max-height: 72vh; object-fit: contain; object-position: top; border-radius: var(--nozomi-radius-small); }

/* Asset detail: one panel, sections divided by rules, no nested frames. */
#asset-detail { scroll-margin-top: var(--nozomi-space-5); }
#asset-detail [tabindex="-1"]:focus { outline: none; }
.asset-detail-panel .nz-type-section-title { font-family: var(--nozomi-font-mono); font-size: var(--nozomi-font-body); overflow-wrap: anywhere; }
.asset-detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nozomi-space-3); }
.asset-detail-actions .nz-switch { margin-right: auto; }
.asset-description-edit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--nozomi-space-3); margin-top: var(--nozomi-space-4h); padding-top: var(--nozomi-space-4h); border-top: 1px solid var(--line); }
.asset-description-edit .nz-field { flex: 1 1 24rem; max-width: 44rem; }

.exposure-card { margin: var(--nozomi-space-4h) calc(-1 * var(--nozomi-space-4h)) calc(-1 * var(--nozomi-space-4h)); border-top: 1px solid var(--line); }
.exposure-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nozomi-space-4);
  padding: var(--nozomi-space-4) var(--nozomi-space-4h);
  background: var(--nozomi-overlay-subtle);
  border-bottom: 1px solid var(--line);
}
.exposure-heading > div { display: grid; gap: 2px; min-width: 0; }
.exposure-heading h3 { color: var(--text); font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-semibold); }
.exposure-heading span { color: var(--muted); font-size: var(--nozomi-font-small); }
.exposure-section { padding: var(--nozomi-space-4h); border-bottom: 1px solid var(--line); }
.exposure-section h4 {
  margin-bottom: var(--nozomi-space-3);
  color: var(--muted);
  font-size: var(--nozomi-font-label);
  font-weight: var(--nozomi-weight-semibold);
  letter-spacing: var(--nozomi-tracking-label);
  text-transform: uppercase;
}
.exposure-section > p + .chip-list { margin-top: var(--nozomi-space-3); }
.exposure-section > p { max-width: 72ch; font-size: var(--nozomi-font-control); line-height: 1.6; }
.exposure-card > .nz-alert { margin: var(--nozomi-space-4h); }

.application-list { display: grid; gap: var(--nozomi-space-2); }
.application-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--nozomi-space-3);
  padding: var(--nozomi-space-3) var(--nozomi-space-4);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-overlay-subtle);
}
.application-card > div:first-child { min-width: 0; }
.application-card strong, .application-card a, .application-url { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.application-card strong { color: var(--text); font-weight: var(--nozomi-weight-medium); }
.application-card a, .application-url { margin-top: 2px; font-family: var(--nozomi-font-mono); font-size: var(--nozomi-font-caption); }
.application-card a { color: var(--accent); text-decoration: none; }
.application-card a:hover { text-decoration: underline; }
.application-url { color: var(--muted); }
.application-endpoints { color: var(--muted); font-size: var(--nozomi-font-small); font-variant-numeric: tabular-nums; white-space: nowrap; }
.application-card .chip-list { grid-column: 1 / -1; }

.asset-screenshot { margin: 0; padding: var(--nozomi-space-4h); border-bottom: 1px solid var(--line); }
.screenshot-frame { position: relative; display: grid; width: min(100%, 52rem); min-height: 12rem; margin-inline: auto; place-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: var(--nozomi-radius-control); background: var(--nozomi-bg-deep); }
.screenshot-frame img { display: block; width: 100%; max-height: 32rem; object-fit: contain; object-position: top; opacity: 0; transition: opacity var(--nozomi-motion-base) var(--nozomi-ease); }
.screenshot-frame[data-status="ready"] img { opacity: 1; }
.screenshot-frame-compact { width: 100%; min-height: 0; aspect-ratio: 16 / 10; }
.screenshot-frame-compact img { height: 100%; object-fit: cover; object-position: top; }
.screenshot-frame-compact .screenshot-placeholder { font-size: 10px; }
.screenshot-placeholder { position: absolute; }
.asset-screenshot figcaption { margin-top: var(--nozomi-space-2); text-align: center; }
.screenshot-unavailable { display: flex; align-items: flex-start; gap: var(--nozomi-space-3); padding: var(--nozomi-space-4) var(--nozomi-space-4h); border-bottom: 1px solid var(--line); }
.screenshot-unavailable > div { display: grid; gap: 2px; }
.screenshot-unavailable strong { color: var(--text); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); }
.screenshot-unavailable span { color: var(--muted); font-size: var(--nozomi-font-small); }

/* Collection coverage disclosure. */
.coverage-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nozomi-space-4);
  padding: var(--nozomi-space-4) var(--nozomi-space-4h);
  border-radius: 0 0 var(--nozomi-radius-panel) var(--nozomi-radius-panel);
  cursor: pointer;
  list-style: none;
}
.coverage-details summary:hover { background: var(--nozomi-overlay-subtle); }
.coverage-details summary::-webkit-details-marker { display: none; }
.coverage-details summary > span:first-child { display: grid; gap: 2px; }
.coverage-details summary strong { color: var(--text); font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-semibold); }
.coverage-toggle { display: inline-flex; align-items: center; gap: var(--nozomi-space-1); color: var(--accent); font-size: var(--nozomi-font-small); font-weight: var(--nozomi-weight-medium); white-space: nowrap; }
.coverage-toggle svg { width: 14px; height: 14px; transition: transform var(--nozomi-motion-base) var(--nozomi-ease); }
.coverage-details[open] .coverage-toggle svg { transform: rotate(90deg); }
.coverage-details[open] summary { border-bottom: 1px solid var(--line); border-radius: 0; }
.coverage-toggle-open { display: none; }
.coverage-details[open] .coverage-toggle-closed { display: none; }
.coverage-details[open] .coverage-toggle-open { display: inline; }
.coverage-list { display: grid; }
.coverage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--nozomi-space-4);
  padding: var(--nozomi-space-3) var(--nozomi-space-4h);
  border-bottom: 1px solid var(--line);
}
.coverage-row:last-child { border-bottom: 0; }
.coverage-row strong { color: var(--text); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); }
.coverage-row p { max-width: 80ch; margin-top: 2px; line-height: var(--nozomi-line-body); }

/* ---------- Vulnerabilities ---------- */

.finding-list { display: grid; gap: var(--nozomi-space-2); }
.finding-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--nozomi-space-2) var(--nozomi-space-5);
  padding: var(--nozomi-space-4) var(--nozomi-space-4h) var(--nozomi-space-4) var(--nozomi-space-5);
  border: 1px solid var(--line);
  border-radius: var(--nozomi-radius-control);
  background: var(--nozomi-overlay-subtle);
  transition: border-color var(--nozomi-motion-fast) var(--nozomi-ease), background-color var(--nozomi-motion-fast) var(--nozomi-ease);
}
.finding-row:hover { border-color: var(--nozomi-border-strong); background: var(--nozomi-overlay-soft); }
/* Severity rail; the badge beside it states the severity in words. */
.finding-row::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--nozomi-text-muted);
}
.finding-critical::before { background: var(--nozomi-danger); }
.finding-high::before { background: var(--nozomi-warning); }
.finding-resolved::before { background: var(--nozomi-success); }
.finding-resolved { opacity: 0.85; }
.finding-main { min-width: 0; }
.finding-main h3 { color: var(--text); font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-semibold); line-height: 1.4; }
.finding-meta { margin-top: 2px; color: var(--muted); font-size: var(--nozomi-font-small); }
.finding-evidence { max-width: 80ch; margin-top: var(--nozomi-space-2); color: var(--nozomi-text); font-size: var(--nozomi-font-control); line-height: 1.6; white-space: pre-wrap; }
.finding-badges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--nozomi-space-1h); }

/* ---------- Settings ---------- */

.settings-panel { max-width: 48rem; }
.settings-form { display: grid; gap: var(--nozomi-space-4); }
.settings-form textarea { font-size: var(--nozomi-font-control); line-height: 1.6; }
.form-actions { display: flex; justify-content: flex-end; }

/* ---------- Narrow screens ---------- */

@media (max-width: 1100px) {
  .briefing-lead { grid-template-columns: 1fr; }
  .briefing-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .fuji-metrics, .briefing-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nozomi-space-2); }
  .fuji-metrics .nz-metric-strip-item { min-height: 0; padding: var(--nozomi-space-3) var(--nozomi-space-4); }
  .fuji-metrics .nz-metric-strip-value { font-size: 1.5rem; }
  .briefing-story { padding: var(--nozomi-space-4h); }
  .briefing-story > .nz-btn { width: 100%; }
  .overview-grid { grid-template-columns: 1fr; }
  .overview-grid > section + section { border-left: 0; border-top: 1px solid var(--line); }
  .technology-overview { grid-template-columns: 1fr; }
  .asset-form { grid-template-columns: 1fr; }
  .asset-form .nz-btn, .form-actions .nz-btn { width: 100%; }
  .asset-toolbar { padding: var(--nozomi-space-3) var(--nozomi-space-4); }
  .asset-toolbar .nz-select, .asset-toolbar select.nz-input { flex: 1 1 100%; }
  .asset-address-heading { flex-direction: column; align-items: flex-start; padding: var(--nozomi-space-3) var(--nozomi-space-4) 0; }
  .asset-address-group + .asset-address-group { margin-top: var(--nozomi-space-2); }
  .exposure-card { margin: var(--nozomi-space-4) calc(-1 * var(--nozomi-space-4)) calc(-1 * var(--nozomi-space-4)); }
  .exposure-heading, .exposure-section, .asset-screenshot, .coverage-details summary, .coverage-row, .screenshot-unavailable { padding-inline: var(--nozomi-space-4); }
  .exposure-heading { flex-direction: column; align-items: flex-start; }
  .application-card { grid-template-columns: 1fr; }
  .coverage-row { grid-template-columns: 1fr; justify-items: start; gap: var(--nozomi-space-2); }
  .proposal-row { flex-direction: column; align-items: flex-start; gap: var(--nozomi-space-2); }
  .proposal-row .nz-btn { width: 100%; }
  .finding-row { grid-template-columns: 1fr; padding: var(--nozomi-space-3) var(--nozomi-space-4) var(--nozomi-space-3) var(--nozomi-space-4h); }
  .finding-badges { justify-content: flex-start; order: -1; }
  .asset-detail-actions .nz-btn { flex: 1 1 100%; }
  .asset-detail-panel .nz-panel-head { flex-direction: row; align-items: flex-start; justify-content: space-between; }
  .asset-card-button { grid-template-columns: minmax(0, 1fr) 16px; row-gap: var(--nozomi-space-2); }
  .asset-card-button .nz-badge { grid-row: 2; grid-column: 1; justify-self: start; }
  .asset-card-chevron { grid-row: 1 / span 2; grid-column: 2; }
  .asset-description-edit .nz-btn { width: 100%; }
}

/* ---------- Legal dialog ---------- */

.legal-dialog { width: min(52rem, 92vw); }
.legal-dialog-body { max-height: min(74vh, 46rem); overflow-y: auto; overscroll-behavior: contain; }
.legal-dialog-body #legal-main { padding: 1.15rem clamp(1.1rem, 3vw, 1.6rem) 1.75rem; }
/* The dialog header already states the document title. */
.legal-dialog-body #legal-main h1 { display: none; }

/* ---------- Waiting room (assessment in progress) ----------
   A work meter (shared nz-workmeter) over an ambient mountain-ascent scene: a
   small climber loops up two parallax ridges toward a summit flag, with
   drifting cloud bands. Decorative and CSS-animated with no per-frame inline
   style, so it runs under a strict style-src CSP. */
.fuji-wait { padding: var(--nozomi-space-4h); }
.fuji-wait-scene {
  position: relative;
  height: 148px;
  margin-top: var(--nozomi-space-4);
  border: 1px solid var(--line);
  border-radius: var(--nozomi-radius-control);
  overflow: hidden;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nozomi-bg-deep) 92%, var(--nozomi-cyan)),
    color-mix(in srgb, var(--nozomi-bg-deep) 95%, var(--nozomi-cyan)) 70%,
    var(--nozomi-bg-deep)
  );
}
.fuji-wait-scene > span { position: absolute; }
.fuji-wait-sky {
  inset: 0;
  background:
    radial-gradient(1px 1px at 18% 22%, color-mix(in srgb, var(--nozomi-cyan) var(--nozomi-tint-6), transparent), transparent),
    radial-gradient(1px 1px at 42% 14%, color-mix(in srgb, var(--nozomi-cyan) 35%, transparent), transparent),
    radial-gradient(1px 1px at 68% 30%, color-mix(in srgb, var(--nozomi-cyan) 45%, transparent), transparent),
    radial-gradient(1px 1px at 82% 18%, color-mix(in srgb, var(--nozomi-cyan) var(--nozomi-tint-5), transparent), transparent),
    radial-gradient(120px 120px at 78% -30%, color-mix(in srgb, var(--nozomi-cyan) var(--nozomi-tint-3), transparent), transparent 70%);
}
.fuji-wait-cloud {
  top: 0;
  height: 6px;
  width: 90px;
  border-radius: var(--nozomi-radius-pill);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--nozomi-cyan) var(--nozomi-tint-4), transparent), transparent);
  animation: fuji-wait-drift 26s linear infinite;
}
.fuji-wait-cloud-1 { top: 26px; animation-duration: 30s; }
.fuji-wait-cloud-2 { top: 52px; width: 64px; animation-duration: 22s; animation-delay: -12s; opacity: .7; }
@keyframes fuji-wait-drift { from { left: -100px; } to { left: 108%; } }
.fuji-wait-ridge { left: -4%; right: -4%; bottom: 0; }
.fuji-wait-ridge-far {
  height: 86px;
  clip-path: polygon(0 100%, 16% 62%, 30% 78%, 48% 40%, 63% 66%, 80% 46%, 100% 74%, 100% 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--nozomi-cyan) var(--nozomi-tint-4), transparent), color-mix(in srgb, var(--nozomi-cyan) var(--nozomi-tint-1), transparent) 78%);
}
.fuji-wait-ridge-near {
  height: 104px;
  clip-path: polygon(0 100%, 34% 30%, 43% 10%, 57% 10%, 66% 30%, 100% 100%);
  background:
    linear-gradient(180deg, var(--nozomi-cyan) 0 6%, transparent 6.5%),
    linear-gradient(180deg, color-mix(in srgb, var(--nozomi-cyan) 42%, transparent), color-mix(in srgb, var(--nozomi-cyan) var(--nozomi-tint-2), transparent) 70%);
}
.fuji-wait-summit {
  top: 38px;
  left: 50%;
  width: 2px;
  height: 16px;
  margin-left: -1px;
  background: var(--nozomi-text-muted);
}
.fuji-wait-summit::after {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  width: 10px;
  height: 7px;
  background: var(--nozomi-cyan);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  animation: fuji-wait-flag 2.2s ease-in-out infinite;
  transform-origin: left center;
}
@keyframes fuji-wait-flag { 50% { transform: scaleX(.7); } }
.fuji-wait-climber {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nozomi-cyan);
  box-shadow: 0 0 8px color-mix(in srgb, var(--nozomi-cyan) 70%, transparent);
  left: 8%;
  bottom: 6px;
  animation: fuji-wait-climb 9s var(--nozomi-ease) infinite;
}
@keyframes fuji-wait-climb {
  0% { left: 8%; bottom: 6px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 49%; bottom: 84px; opacity: 0; }
}
.fuji-wait-hint { margin-top: var(--nozomi-space-3); text-align: center; font-size: var(--nozomi-font-small); }

@media (prefers-reduced-motion: reduce) {
  .fuji-wait-cloud, .fuji-wait-climber, .fuji-wait-summit::after { animation: none !important; }
  .fuji-wait-climber { left: 30%; bottom: 46px; opacity: 1; }
  .briefing-depth-chevron, .coverage-toggle svg, .finding-row, .screenshot-frame img { transition: none; }
}