/* Sakura on the shared Nozomi foundations (web/nozomi-ui.css, loaded first).
   Buttons (.nz-btn*), fields (.nz-input), badges (.nz-badge), tables
   (.nz-table), empty states, the public landing, type, and the element reset
   all come from the shared layer. This sheet keeps only the Sakura brand
   (deep background, pink accent), the workspace layout, and components the
   shared layer does not have: the audit list, the source picker, the audit
   dossier, and the paper report. Geometry derives from --nozomi-* tokens. */

:root {
  /* Sakura brand: background depth. */
  --paper: #09090d;
  --paper-raised: #0e0e13;

  /* Sakura brand: the pink accent family. */
  --accent: #f19bb7;
  --accent-strong: #ffb3ca;
  --accent-ink: #271019;
  --petal-light: #ffd5e2;
  --accent-panel-border: #4a2b38;

  /* Adopted shared surfaces, lines, and text. */
  --panel: var(--nozomi-panel);
  --line: var(--nozomi-border);
  --line-strong: var(--nozomi-border-strong);
  --ink: var(--nozomi-text-strong);
  --ink-soft: var(--nozomi-text);
  --muted: var(--nozomi-text-muted);
  --ok: var(--nozomi-success);
  --warn: var(--nozomi-warning);
  --bad: var(--nozomi-danger);
  --scrim: color-mix(in srgb, var(--nozomi-bg-deep) 70%, transparent);

  /* Sakura pink treatment: recolor the shared accent-driven variables so every
     nz-* component reads pink here instead of the default terracotta. */
  --nozomi-bg: var(--paper);
  --nozomi-accent: var(--accent);
  --nozomi-accent-ink: var(--accent-ink);
  --nozomi-accent-hover: var(--accent-strong);
  --nozomi-accent-dark: #d97e9c;
  --nozomi-accent-soft: var(--petal-light);
  --nozomi-accent-bg: rgba(241, 155, 183, 0.14);
  --nozomi-accent-bg-hover: rgba(241, 155, 183, 0.22);
  --nozomi-accent-border: rgba(255, 179, 202, 0.42);
  --nozomi-focus: var(--accent);
  --nozomi-eyebrow: var(--accent);
  --term-phosphor: rgba(241, 155, 183, 0.9);

  /* Workspace rhythm. */
  --pad: var(--nozomi-space-5);
}

[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { min-height: 100vh; background: var(--paper); color: var(--ink-soft); }
.mono { font-family: var(--nozomi-font-mono); }
.muted { color: var(--muted); }
.error { color: var(--nozomi-danger-text); }
/* Headings receive focus programmatically after hash navigation; no ring. */
.view h1:focus { outline: none; }
fieldset { min-width: 0; }

/* ---------- Layout ---------- */
main { position: relative; max-width: 76rem; margin: auto; padding: 0 var(--nozomi-space-5) 5rem; }
#workspace { position: relative; z-index: 1; }
body.authenticated::before { left: var(--nozomi-size-sidebar); }
body.authenticated main { max-width: none; margin-left: var(--nozomi-size-sidebar); padding: 40px clamp(24px, 4vw, 56px) 96px; }
body.authenticated .nz-hero, body.authenticated .nz-gate, body.authenticated .nz-seam { display: none; }
body.authenticated #workspace { width: min(72rem, 100%); margin: auto; }
/* Every view is one column of sections on a 24px rhythm; minmax(0, 1fr) keeps
   wide content (tables, code) inside the viewport instead of widening it. */
.view { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nozomi-space-5); }
:where(.view) > * { animation: nz-rise-in var(--nozomi-motion-slow) var(--nozomi-ease-entrance) backwards; }
:where(.view) > :nth-child(2) { animation-delay: 50ms; }
:where(.view) > :nth-child(3) { animation-delay: 100ms; }
:where(.view) > :nth-child(n + 4) { animation-delay: 150ms; }

/* ---------- Sidebar ---------- */
/* The rail is flush to the viewport edge, divided by one rule, matching the
   shared .nz-shell treatment. It stops above the information footer. */
#sidebar { position: fixed; top: 0; bottom: 40px; left: 0; z-index: 30; width: var(--nozomi-size-sidebar); display: flex; flex-direction: column; overflow: hidden; border-right: 1px solid var(--line); background: var(--nozomi-sidebar); }
.sidebar-head { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--nozomi-space-4); padding: var(--nozomi-space-3) var(--nozomi-space-4h); }
.sidebar-nav { flex: 1; padding: var(--nozomi-space-2) var(--nozomi-space-3); overflow-y: auto; }
.sidebar-nav p { margin: var(--nozomi-space-4h) var(--nozomi-space-2h) var(--nozomi-space-2); color: color-mix(in srgb, var(--muted) 78%, transparent); font-family: var(--nozomi-font-caption); font-size: 10.5px; font-weight: var(--nozomi-weight-medium); letter-spacing: 0.14em; text-transform: uppercase; }
.sidebar-nav p:first-child { margin-top: var(--nozomi-space-2); }
/* The shared "you are here" convention: raised neutral ground, accent bar,
   accent icon (see .nz-shell-link-active). */
.sidebar-nav a { position: relative; display: flex; min-height: 36px; align-items: center; gap: var(--nozomi-space-2h); margin-top: 2px; padding: 0 var(--nozomi-space-2h); border: 1px solid transparent; border-radius: var(--nozomi-radius-control); color: var(--muted); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); transition: color var(--nozomi-motion-fast) var(--nozomi-ease), background-color var(--nozomi-motion-fast) var(--nozomi-ease); }
.sidebar-nav a:hover { background: var(--nozomi-overlay-soft); color: var(--ink); }
.sidebar-nav a.active { border-color: transparent; background: var(--nozomi-overlay-medium); color: var(--ink); }
.sidebar-nav a.active::before { content: ""; position: absolute; left: -1px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }
.nav-icon { display: inline-flex; width: 16px; height: 16px; flex: none; color: var(--muted); transition: color var(--nozomi-motion-fast) var(--nozomi-ease); }
.nav-icon svg { width: 16px; height: 16px; }
.sidebar-nav a:hover .nav-icon { color: var(--ink-soft); }
.sidebar-nav a.active .nav-icon { color: var(--accent); }
.nav-count { min-width: 20px; height: 20px; margin-left: auto; display: inline-grid; place-items: center; padding: 0 var(--nozomi-space-1h); border-radius: var(--nozomi-radius-pill); background: var(--nozomi-overlay-medium); color: var(--muted); font-size: var(--nozomi-font-caption); font-variant-numeric: tabular-nums; }
.sidebar-account { display: grid; grid-template-columns: var(--nozomi-size-icon-button) minmax(0, 1fr) var(--nozomi-size-icon-button); align-items: center; gap: var(--nozomi-space-2h); margin: var(--nozomi-space-2); padding: var(--nozomi-space-2) var(--nozomi-space-2h); border: 1px solid var(--line); border-radius: var(--nozomi-radius-panel); background: var(--nozomi-overlay-subtle); }
.account-avatar { display: grid; width: var(--nozomi-size-icon-button); height: var(--nozomi-size-icon-button); place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: var(--nozomi-font-small); font-weight: var(--nozomi-weight-semibold); }
.account-copy { min-width: 0; display: grid; gap: 2px; }
.account-copy strong, .account-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-copy strong { color: var(--ink); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); }
.account-copy small { color: var(--muted); font-size: var(--nozomi-font-small); }
.sidebar-logout, .icon-button { width: var(--nozomi-size-icon-button); height: var(--nozomi-size-icon-button); display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--nozomi-radius-control); color: var(--muted); font-size: 1.15rem; transition: color var(--nozomi-motion-fast) var(--nozomi-ease), background-color var(--nozomi-motion-fast) var(--nozomi-ease); }
.sidebar-logout:hover, .icon-button:hover { border-color: var(--line); background: var(--nozomi-overlay-medium); color: var(--ink); }
#nav-close { display: none; }
#app-bar { display: none; }
#nav-scrim { position: fixed; inset: 0; z-index: 20; background: var(--scrim); backdrop-filter: blur(2px); }

/* ---------- Page header ---------- */
.page-heading { margin-bottom: var(--nozomi-space-2); }
.page-heading h1 { margin-top: var(--nozomi-space-2h); color: var(--ink); font-size: var(--nozomi-font-display-page); font-weight: var(--nozomi-weight-bold); line-height: 1.06; letter-spacing: var(--nozomi-tracking-display); text-wrap: balance; overflow-wrap: anywhere; }
.page-heading h1 + p { max-width: 46rem; margin-top: var(--nozomi-space-2); color: var(--muted); line-height: 1.6; text-wrap: pretty; }
.heading-actions, .detail-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--nozomi-space-5); }
.heading-actions > div, .detail-heading > div:first-child { min-width: 0; }

/* ---------- Panels and section heads ---------- */
.panel { min-width: 0; padding: var(--pad); }
.section-title { display: flex; align-items: center; justify-content: space-between; gap: var(--nozomi-space-4); margin-bottom: var(--nozomi-space-4h); }
.section-title > div:first-child { min-width: 0; }
/* Zero-specificity defaults: any component class restyles its own heading. */
:where(#workspace) h2 { margin-top: var(--nozomi-space-1); color: var(--ink); font-size: var(--nozomi-font-display-section); font-weight: var(--nozomi-weight-semibold); letter-spacing: var(--nozomi-tracking-tight); }
:where(#workspace) h3 { color: var(--ink); font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-semibold); }
/* One accent eyebrow per page: panel eyebrows step back to muted. */
.panel .nz-eyebrow { color: var(--muted); }
/* A list panel runs its rows edge to edge under the panel head. */
.list-panel { overflow: hidden; padding-bottom: 0; }
.list-panel .runs { margin-inline: calc(-1 * var(--pad)); border-top: 1px solid var(--line); }

/* ---------- Overview ---------- */
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--nozomi-space-4); }
.metric { min-width: 0; display: grid; gap: var(--nozomi-space-1); padding: var(--nozomi-space-5) var(--pad); border: 1px solid var(--line); border-radius: var(--nozomi-radius-panel); background: var(--nozomi-sheen), var(--nozomi-glass); box-shadow: var(--nozomi-shadow-panel); }
.metric span { color: var(--muted); 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; }
.metric strong { margin-top: var(--nozomi-space-2); color: var(--ink); font-size: 2.5rem; font-weight: var(--nozomi-weight-bold); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.metric small { color: var(--muted); font-size: var(--nozomi-font-small); }
.metric.accent-metric { border-color: var(--accent-panel-border); background: var(--nozomi-glass); }
.metric.accent-metric strong { color: var(--petal-light); }
.nz-explain-grid { margin-top: 0; }

/* ---------- Audit list ---------- */
.runs { display: grid; }
.run-item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; border-top: 1px solid var(--line); transition: background-color var(--nozomi-motion-fast) var(--nozomi-ease); }
.run-item:first-child { border-top: 0; }
.run-item:hover { background: var(--nozomi-overlay-subtle); }
/* When any row can be deleted, every row reserves the action column so the
   status badges and chevrons stay aligned down the list. */
.runs:has(.run-delete) .run-item { grid-template-columns: minmax(0, 1fr) calc(var(--nozomi-size-icon-button) + var(--pad)); }
.run { width: 100%; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: var(--nozomi-space-4); padding: var(--nozomi-space-3) var(--pad); color: var(--ink); text-align: left; }
.run:focus-visible { outline-offset: -2px; border-radius: 0; }
.runs:has(.run-delete) .run { padding-right: var(--nozomi-space-2); }
.run-copy { min-width: 0; display: grid; gap: 2px; }
.run-copy strong, .run-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-copy strong { font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-medium); }
.run-copy small { font-size: var(--nozomi-font-small); }
.run-counts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--nozomi-space-1h); }
.run-arrow { color: var(--muted); font-size: 1.25rem; line-height: 1; transition: transform var(--nozomi-motion-fast) var(--nozomi-ease), color var(--nozomi-motion-fast) var(--nozomi-ease); }
.run:hover .run-arrow { color: var(--ink); transform: translateX(2px); }
.run-delete { font-size: 1.1rem; }
.run-delete:hover:not(:disabled) { border-color: var(--nozomi-danger-border); background: var(--nozomi-danger-bg); color: var(--nozomi-danger-text); }
.runs > .run-skeleton { height: 36px; margin: 14px var(--pad); }
.runs > .nz-empty-state { margin: var(--pad); }
.runs > .error { padding: var(--pad); }
.toolbar { display: grid; grid-template-columns: minmax(12rem, 1fr) 12rem auto; gap: var(--nozomi-space-2); align-items: center; margin-bottom: var(--nozomi-space-4); }
.pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--nozomi-space-2); margin-inline: calc(-1 * var(--pad)); padding: var(--nozomi-space-3) var(--pad); border-top: 1px solid var(--line); }
.pagination span { color: var(--muted); font-size: var(--nozomi-font-small); font-variant-numeric: tabular-nums; }

/* Empty states get the shared icon tile with a drawn target mark. */
.nz-empty-state::before { content: ""; width: 44px; height: 44px; margin-bottom: 14px; border: 1px solid var(--line-strong); border-radius: var(--nozomi-radius-control); background: radial-gradient(circle, var(--accent) 0 3px, transparent 3.5px), radial-gradient(circle, transparent 0 8px, color-mix(in srgb, var(--accent) 45%, transparent) 8.5px 9.5px, transparent 10px), var(--nozomi-surface); box-shadow: var(--nozomi-shadow-inset-top), var(--nozomi-shadow-card); }
.nz-empty-state > strong { color: var(--ink); font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-semibold); }

/* ---------- Status badges ---------- */
/* Geometry is the shared .nz-badge; Sakura maps its data-tone values onto the
   shared tone tokens and adds the status dot. Text always carries the state. */
.state { border-color: var(--line-strong); background: var(--nozomi-overlay-soft); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.state::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: currentColor; opacity: 0.9; }
.state:not([data-tone])::before, .state[data-tone="neutral"]::before { background: var(--muted); }
.run-counts .state:not(:last-child)::before { display: none; }
.state[data-tone="ok"] { border-color: var(--nozomi-success-border); background: var(--nozomi-success-bg); color: var(--nozomi-success-text); }
.state[data-tone="warn"] { border-color: var(--nozomi-warning-border); background: var(--nozomi-warning-bg); color: var(--nozomi-warning-text); }
.state[data-tone="bad"] { border-color: var(--nozomi-danger-border); background: var(--nozomi-danger-bg); color: var(--nozomi-danger-text); }
.state[data-tone="live"] { border-color: var(--nozomi-info-border); background: var(--nozomi-info-bg); color: var(--nozomi-info-text); }
.state[data-tone="live"]::before { box-shadow: 0 0 0 3px var(--nozomi-info-bg); animation: pulse var(--nozomi-motion-shimmer) ease-in-out infinite; }
.status-cluster { display: flex; flex-wrap: wrap; gap: var(--nozomi-space-1h); justify-content: flex-end; }

/* ---------- Forms ---------- */
label { display: grid; gap: var(--nozomi-space-2); color: var(--ink); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); }
.scope-field > span { color: var(--muted); font-weight: 400; }
.form-panel { display: grid; gap: var(--nozomi-space-4h); }
.form-panel > .section-title { margin-bottom: 0; }
.source-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--nozomi-space-2h); margin: 0; padding: 0; border: 0; }
.source-picker legend { margin-bottom: var(--nozomi-space-2); padding: 0; color: var(--ink); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); }
.source-option { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--nozomi-space-4); padding: var(--nozomi-space-4); border: 1px solid var(--line); border-radius: var(--nozomi-radius-panel); background: var(--nozomi-overlay-subtle); cursor: pointer; transition: border-color var(--nozomi-motion-fast) var(--nozomi-ease), background-color var(--nozomi-motion-fast) var(--nozomi-ease), box-shadow var(--nozomi-motion-fast) var(--nozomi-ease); }
.source-option:hover { border-color: var(--line-strong); background: var(--nozomi-overlay-soft); }
.source-option:focus-within, .source-option:has(.nz-input:not(:placeholder-shown)) { border-color: var(--nozomi-accent-border); background: color-mix(in srgb, var(--accent) 5%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
.source-copy { display: grid; gap: var(--nozomi-space-1); }
.source-copy strong { color: var(--ink); font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-semibold); }
.source-copy small { color: var(--muted); font-size: var(--nozomi-font-small); font-weight: 400; line-height: 1.5; }
.source-divider { align-self: center; color: var(--muted); font-size: var(--nozomi-font-small); }
.file-input { width: 100%; min-width: 0; color: var(--muted); font-size: var(--nozomi-font-small); font-weight: 400; }
.file-input::file-selector-button { height: var(--nozomi-size-control-sm); margin-right: var(--nozomi-space-2h); padding: 0 var(--nozomi-space-3); border: 1px solid var(--line-strong); border-radius: var(--nozomi-radius-control); background: var(--nozomi-surface); color: var(--ink); font: inherit; font-weight: var(--nozomi-weight-medium); cursor: pointer; }
.file-input::file-selector-button:hover { background: var(--nozomi-surface-raised); }
/* Settings-style rows: the choice on the left, the control on the right,
   separated by hairlines instead of nested boxes. */
.platform-picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 18rem); gap: var(--nozomi-space-3) var(--nozomi-space-6); align-items: center; padding-top: var(--nozomi-space-4h); border-top: 1px solid var(--line); }
#mobile-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: start; }
#mobile-fields > div:last-child { display: grid; gap: var(--nozomi-space-3); }
.platform-picker strong { color: var(--ink); font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-semibold); }
.platform-picker p { max-width: 40rem; margin-top: var(--nozomi-space-1); color: var(--muted); font-size: var(--nozomi-font-control); line-height: 1.55; }
.acquisition-start { display: grid; gap: var(--nozomi-space-3); }
.acquisition-start .nz-btn { justify-self: start; }
.authorization-check { display: grid; grid-template-columns: auto 1fr; gap: var(--nozomi-space-2); align-items: start; color: var(--muted); font-size: var(--nozomi-font-small); font-weight: 400; line-height: 1.5; }
.authorization-check input { margin-top: 3px; }
.android-console { padding: var(--nozomi-space-4); border: 1px solid var(--line); border-radius: var(--nozomi-radius-panel); background: var(--nozomi-overlay-subtle); }
.android-console .section-title { margin-bottom: var(--nozomi-space-2); }
.android-console .actions { padding-top: 0; border-top: 0; }
.inline-status { min-height: 1.4rem; color: var(--muted); font-size: var(--nozomi-font-control); }
.inline-status[data-tone="ok"] { color: var(--nozomi-success-text); }
.inline-status[data-tone="bad"] { color: var(--nozomi-danger-text); }
.inline-status[data-tone="busy"]::before { content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: var(--nozomi-space-2); border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%; vertical-align: -1px; animation: spin var(--nozomi-motion-spin) linear infinite; }
.estimate { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nozomi-space-2); }
.estimate-item { min-width: 0; display: grid; gap: var(--nozomi-space-1); padding: var(--nozomi-space-3) 14px; border-radius: var(--nozomi-radius-control); background: var(--nozomi-overlay-soft); }
.estimate-item span { color: var(--muted); font-size: var(--nozomi-font-small); }
.estimate-item strong { color: var(--ink); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); font-variant-numeric: tabular-nums; }
.actions { display: flex; gap: var(--nozomi-space-2); justify-content: flex-end; padding-top: var(--nozomi-space-4h); border-top: 1px solid var(--line); }

/* Disclosures share one chevron. */
:is(.advanced, .audit-context, .report-scope, .observations) > summary { display: flex; align-items: center; gap: var(--nozomi-space-2h); list-style: none; cursor: pointer; }
:is(.advanced, .audit-context, .report-scope, .observations) > summary::-webkit-details-marker { display: none; }
:is(.advanced, .audit-context, .report-scope, .observations) > summary::before { content: ""; width: 6px; height: 6px; flex: none; margin: 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform var(--nozomi-motion-fast) var(--nozomi-ease); }
:is(.advanced, .audit-context, .report-scope, .observations)[open] > summary::before { transform: rotate(45deg); }
.advanced { padding-top: var(--nozomi-space-4h); border-top: 1px solid var(--line); }
.advanced summary { min-height: 32px; color: var(--ink); font-size: var(--nozomi-font-body); font-weight: var(--nozomi-weight-semibold); }
.advanced summary span { color: var(--muted); font-weight: 400; }
.advanced[open] summary { margin-bottom: var(--nozomi-space-3); }

/* ---------- Solid destructive action ----------
   The shared .nz-btn-danger is the tinted secondary; the final confirm of an
   irreversible deletion is a solid danger fill with dark ink. */
.danger-button { border-color: var(--bad); background: var(--bad); color: var(--accent-ink); font-weight: var(--nozomi-weight-semibold); }
.danger-button:hover:not(:disabled) { border-color: var(--nozomi-danger-text); background: var(--nozomi-danger-text); }
.danger-zone { border-color: var(--nozomi-danger-border); background: var(--panel); }
.danger-actions, .dialog-actions { display: flex; flex-wrap: wrap; gap: var(--nozomi-space-2); }
.back-button { justify-self: start; margin: -6px 0 -8px -10px; color: var(--muted); }

/* ---------- Audit dossier ---------- */
#audit-detail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--nozomi-space-5); }
.detail-heading .muted { margin-top: var(--nozomi-space-2); }
/* The cancel alert stays mounted empty (a role="alert" region) but out of the grid flow. */
#cancel-alert:empty { position: absolute; }
.detail-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nozomi-space-2); }
.detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nozomi-space-2); }
.detail-item { min-width: 0; display: grid; align-content: start; gap: var(--nozomi-space-1h); padding: var(--nozomi-space-3) 14px; border-radius: var(--nozomi-radius-control); background: var(--nozomi-overlay-soft); }
.detail-item span { color: var(--muted); font-size: var(--nozomi-font-small); }
.detail-item strong { color: var(--ink); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); overflow-wrap: anywhere; }
/* A wide fact spans two of the four columns; the source handle is a hash, so
   it renders monospace and breaks rather than overflowing its cell. */
.detail-item-wide { grid-column: span 2; }
.detail-item-source strong { font-family: var(--nozomi-font-mono); font-size: var(--nozomi-font-small); }
.audit-context { border: 1px solid var(--line); border-radius: var(--nozomi-radius-panel); background: var(--nozomi-sheen), var(--nozomi-glass); box-shadow: var(--nozomi-shadow-panel); }
.audit-context > summary { min-height: 48px; padding: 0 var(--nozomi-space-4h); border-radius: inherit; color: var(--ink-soft); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); }
.audit-context > summary:hover { color: var(--ink); }
.audit-context .detail-grid { padding: 0 var(--nozomi-space-4) var(--nozomi-space-4); }
.live-card { display: flex; align-items: center; gap: var(--nozomi-space-4); padding: var(--nozomi-space-4h) var(--pad); }
.live-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--nozomi-cyan); box-shadow: 0 0 0 5px var(--nozomi-info-bg); animation: pulse var(--nozomi-motion-shimmer) ease-in-out infinite; }
.live-copy strong { color: var(--ink); font-weight: var(--nozomi-weight-semibold); }
.live-copy p { margin-top: 2px; font-size: var(--nozomi-font-control); }
.loading-skeleton { display: grid; gap: var(--nozomi-space-3); }
.loading-skeleton .title { --nz-w: 40%; height: 2rem; }
.run-skeleton { display: block; height: 64px; border-radius: var(--nozomi-radius-control); }
.short { --nz-w: 60%; }

/* The waiting-room runner. Secondary to the live card above it: the status of
   the audit is the page, this is the thing to do while the page says nothing
   new. The canvas keeps its 4:1 drawing buffer and scales down on narrow
   screens, so the pixel grid stays square at every width. */
.runner-canvas { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; border: 1px solid var(--accent-panel-border); border-radius: var(--nozomi-radius-panel); background: var(--paper); image-rendering: pixelated; touch-action: manipulation; }
.runner-hint { margin-top: var(--nozomi-space-3); font-size: var(--nozomi-font-small); text-align: center; }
.runner-heading { margin: var(--nozomi-space-5) 0 var(--nozomi-space-3); }
/* Pink dusk treatment: the canvas paints its own evening sky, so the panel
   leans toward the blush palette instead of fighting it. */
.runner-panel { border-color: var(--accent-panel-border); background: var(--panel); }
.runner-panel .nz-eyebrow { color: var(--accent); }
.runner-panel .nz-workmeter-pct { font-variant-numeric: tabular-nums; }

/* ---------- The report: a paper document inside the dark workspace ---------- */
#audit-results {
  --paper: #f1eee9; --paper-raised: #f6f3ee; --panel: #f6f3ee;
  --line: #d4cfc7; --line-strong: #b3aca2; --ink: #272526; --ink-soft: #444044; --muted: #6b6467;
  --accent: #893e5c; --ok: #346446; --bad: #a4363f; --warn: #88571e;
  --card: color-mix(in srgb, #fff 60%, var(--paper-raised));
  --nozomi-text: var(--ink); --nozomi-text-strong: var(--ink); --nozomi-text-muted: var(--muted);
  --nozomi-panel: var(--paper-raised); --nozomi-surface: var(--card); --nozomi-surface-raised: var(--paper);
  --nozomi-border: var(--line); --nozomi-border-strong: var(--line-strong);
  --nozomi-overlay-subtle: rgba(39, 37, 38, 0.03); --nozomi-overlay-soft: rgba(39, 37, 38, 0.045); --nozomi-overlay-medium: rgba(39, 37, 38, 0.07);
  --nozomi-eyebrow: var(--accent); --nozomi-focus: var(--accent);
  --nozomi-danger-text: #9a2727; --nozomi-danger-bg: #f8e2e2; --nozomi-danger-border: #db9a9a;
  --nozomi-warning-text: #795112; --nozomi-warning-bg: #f1e7d1; --nozomi-warning-border: #c9b37f;
  --nozomi-success-text: #275c3e; --nozomi-success-bg: #e0ecdf; --nozomi-success-border: #9fb9a6;
  --nozomi-info-text: #315e7b; --nozomi-info-bg: #e0eaf1; --nozomi-info-border: #9bb8c8;
  color-scheme: light;
  padding: clamp(20px, 4vw, 56px);
  border-radius: var(--nozomi-radius-dialog);
  background: var(--paper-raised);
  color: var(--ink-soft);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 32px 80px -32px rgba(0, 0, 0, 0.7);
}
#audit-results .nz-btn-secondary { box-shadow: 0 1px 2px rgba(39, 37, 38, 0.08); }
.report-heading { margin-bottom: 0; }
.report-heading h2, .report-heading h2 + .report-meta { display: none; }
.report-meta { margin-top: var(--nozomi-space-2); font-size: var(--nozomi-font-small); }
.report-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--nozomi-space-2); }
.report-nav { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 0 var(--nozomi-space-5); margin-top: var(--nozomi-space-5); border-bottom: 1px solid var(--line); background: var(--paper-raised); }
.report-nav .text-button { position: relative; min-height: 40px; color: var(--muted); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); transition: color var(--nozomi-motion-fast) var(--nozomi-ease); }
.report-nav .text-button::after { content: ""; position: absolute; inset: auto 0 -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform var(--nozomi-motion-fast) var(--nozomi-ease); }
.report-nav .text-button:hover { color: var(--ink); }
.report-nav .text-button:hover::after { transform: scaleX(1); }
#audit-results :is(.report-summary, .finding-list, .report-scope) { scroll-margin-top: 5rem; }
.report-summary { padding: var(--nozomi-space-6) 0 var(--nozomi-space-2); }
.report-summary h3 { color: var(--muted); font-size: var(--nozomi-font-label); font-weight: var(--nozomi-weight-semibold); letter-spacing: var(--nozomi-tracking-label); text-transform: uppercase; }
#audit-results .report-summary > p { max-width: 38em; margin-top: var(--nozomi-space-3); color: var(--ink); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem); font-weight: var(--nozomi-weight-medium); line-height: 1.45; letter-spacing: -0.02em; text-wrap: pretty; }
.report-metrics { margin-top: var(--nozomi-space-6); }
#audit-results .report-metrics .detail-item { gap: var(--nozomi-space-1); padding: var(--nozomi-space-4) var(--nozomi-space-4h); border: 1px solid var(--line); border-radius: var(--nozomi-radius-panel); background: var(--card); }
.report-metrics .detail-item strong { font-size: 2rem; font-weight: var(--nozomi-weight-semibold); line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.report-scope { margin-block: var(--nozomi-space-4) var(--nozomi-space-6); border-block: 1px solid var(--line); }
.report-scope > summary { min-height: 48px; color: var(--ink-soft); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); }
.report-scope .detail-grid { padding-bottom: var(--nozomi-space-4); }
.report-section-heading { margin-bottom: var(--nozomi-space-4); }
#audit-results .report-section-heading h2 { margin-top: var(--nozomi-space-1h); font-size: 1.375rem; letter-spacing: -0.022em; }
.section-lede { max-width: 45rem; margin: 0 0 var(--nozomi-space-4); line-height: 1.6; }
:is(.assessment-section, .unverifiable-section) { margin-top: var(--nozomi-space-6); padding-top: var(--nozomi-space-6); border-top: 1px solid var(--line); }
.observations { margin-top: var(--nozomi-space-6); padding-top: var(--nozomi-space-5); border-top: 1px solid var(--line); }
.observations > summary { min-height: 36px; color: var(--ink); font-size: var(--nozomi-font-display-section); font-weight: var(--nozomi-weight-semibold); }
.observations > p { max-width: 45rem; margin: var(--nozomi-space-2) 0 var(--nozomi-space-4); line-height: 1.55; }
.finding-list { display: grid; gap: var(--nozomi-space-3); }
.finding { position: relative; min-width: 0; padding: var(--nozomi-space-5) var(--nozomi-space-6) var(--nozomi-space-5) 28px; border: 1px solid var(--line); border-radius: var(--nozomi-radius-panel); background: var(--card); }
/* Three result classes, three rails: proven, reachable-but-unprovable, and
   investigated-without-result. The middle one is the only one that asks the
   customer to make a judgement, so it is the only one that carries warning. */
.finding::before { content: ""; position: absolute; left: -1px; top: 20px; bottom: 20px; width: 3px; border-radius: 0 3px 3px 0; background: var(--line-strong); }
.finding.verified::before { background: var(--ok); }
.finding.unverifiable::before { background: var(--warn); }
.finding-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--nozomi-space-4); }
.finding-heading > div { min-width: 0; }
.finding-heading h3 { margin-top: var(--nozomi-space-2h); font-size: 1.125rem; font-weight: var(--nozomi-weight-semibold); line-height: 1.35; letter-spacing: -0.015em; }
.severity { display: inline-flex; align-items: center; gap: var(--nozomi-space-1h); padding: 2px 9px; border-radius: var(--nozomi-radius-pill); background: color-mix(in srgb, currentColor 11%, transparent); font-size: var(--nozomi-font-caption); font-weight: var(--nozomi-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; }
.severity::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.severity-critical, .severity-high { color: var(--bad); }
.severity-medium, .severity-candidate { color: var(--warn); }
.severity-low, .severity-informational, .severity-verified { color: var(--ok); }
.category { margin-top: var(--nozomi-space-1h); color: var(--accent); font-size: var(--nozomi-font-control); font-weight: var(--nozomi-weight-medium); }
.finding-description { max-width: 72ch; margin-top: var(--nozomi-space-3); color: var(--ink-soft); font-size: 0.9375rem; line-height: 1.7; }
.finding-facts, .definition-list { display: grid; margin-top: var(--nozomi-space-4); }
.finding-facts > div, .definition-list > div { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--nozomi-space-4); padding: var(--nozomi-space-2h) 0; border-top: 1px solid var(--line); }
dt { color: var(--muted); font-size: var(--nozomi-font-small); font-weight: var(--nozomi-weight-medium); line-height: 1.6; }
dd { color: var(--ink); font-size: var(--nozomi-font-control); line-height: 1.6; overflow-wrap: anywhere; }
#audit-results .nz-empty-state { margin-top: var(--nozomi-space-2); border-color: var(--line-strong); background: var(--card); }

/* ---------- Settings ---------- */
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--nozomi-space-4); }
.settings-card { display: flex; flex-direction: column; gap: var(--nozomi-space-4); }
.settings-card.wide { grid-column: 1 / -1; }
.settings-card > .nz-btn { align-self: flex-start; margin-top: auto; }
.settings-card > p { max-width: 48rem; font-size: var(--nozomi-font-control); line-height: 1.6; }
/* An empty status line stays mounted (it is a live region) but takes no gap. */
.settings-card > p:empty { margin-top: calc(-1 * var(--nozomi-space-4)); }
.definition-list { margin-top: 0; }
.definition-list > div { grid-template-columns: 8rem minmax(0, 1fr); align-items: center; }
.usage-copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--nozomi-space-2) var(--nozomi-space-4); font-size: var(--nozomi-font-control); }
.usage-copy strong { color: var(--ink); font-weight: var(--nozomi-weight-medium); font-variant-numeric: tabular-nums; }
progress { width: 100%; height: 8px; overflow: hidden; border: 0; border-radius: var(--nozomi-radius-pill); background: var(--nozomi-overlay-strong); }
progress::-webkit-progress-bar { background: var(--nozomi-overlay-strong); }
progress::-webkit-progress-value { border-radius: var(--nozomi-radius-pill); background: var(--accent); }
progress::-moz-progress-bar { border-radius: var(--nozomi-radius-pill); background: var(--accent); }
.nz-base pre { overflow: auto; padding: var(--nozomi-space-3) var(--nozomi-space-4); border: 1px solid var(--line); border-radius: var(--nozomi-radius-control); background: color-mix(in srgb, var(--nozomi-bg-deep) 55%, transparent); color: var(--ink-soft); font: var(--nozomi-font-control)/1.6 var(--nozomi-font-mono); white-space: pre-wrap; }
.code-sample { white-space: pre; }
.code-sample::before { content: "$ "; color: var(--accent); }
#members-status[data-tone="warn"] { color: var(--nozomi-warning-text); }
/* Workspace membership, managed by the customer rather than the operator. */
.invite-form { display: grid; grid-template-columns: minmax(0, 1fr) 14rem auto; gap: var(--nozomi-space-3); align-items: end; }
.members-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--nozomi-radius-panel); }
.members-table td:first-child { color: var(--ink); }
.members-table td:last-child, .members-table th:last-child { text-align: right; }
.members-table .nz-table-td { vertical-align: middle; }

/* ---------- Dialogs ---------- */
dialog { width: min(30rem, calc(100% - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line-strong); border-radius: var(--nozomi-radius-dialog); background: var(--panel); color: var(--ink-soft); box-shadow: var(--nozomi-shadow-dialog); }
dialog[open] { animation: nz-dialog-in var(--nozomi-motion-base) var(--nozomi-ease-entrance) both; }
dialog::backdrop { background: var(--scrim); backdrop-filter: blur(6px); }
.deletion-dialog-body { display: grid; gap: var(--nozomi-space-3); padding: var(--nozomi-space-5); }
.deletion-dialog-body h2 { margin: 0; color: var(--ink); font-size: var(--nozomi-font-heading-medium); letter-spacing: -0.018em; }
.deletion-dialog-body p { color: var(--muted); line-height: 1.6; }
.deletion-dialog-body label { display: block; margin-top: var(--nozomi-space-2); }
.deletion-dialog-body label strong { padding: 1px 6px; border-radius: var(--nozomi-radius-small); background: var(--nozomi-danger-bg); color: var(--nozomi-danger-text); font-family: var(--nozomi-font-mono); font-size: var(--nozomi-font-small); }
.deletion-dialog-body .dialog-actions { justify-content: flex-end; margin-top: var(--nozomi-space-3); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .source-picker { grid-template-columns: minmax(0, 1fr); gap: var(--nozomi-space-2); }
  .source-divider { display: flex; align-items: center; gap: var(--nozomi-space-3); }
  .source-divider::before, .source-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
}

@media (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric:last-child { grid-column: 1 / -1; }
  .estimate, .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-picker, #mobile-fields { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767px) {
  :root { --pad: var(--nozomi-space-4); }
  main, body.authenticated main { margin-left: 0; padding: var(--nozomi-space-5) var(--nozomi-space-4) 5rem; }
  body.authenticated::before { left: 0; }
  #app-bar:not([hidden]) { position: sticky; top: 0; z-index: 10; min-height: 56px; display: flex; align-items: center; gap: var(--nozomi-space-3); padding: var(--nozomi-space-2) var(--nozomi-space-4); border-bottom: 1px solid color-mix(in srgb, var(--line) 80%, transparent); background: color-mix(in srgb, var(--paper) 78%, transparent); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
  #app-bar strong { color: var(--ink); font-size: 15px; font-weight: var(--nozomi-weight-semibold); }
  #app-bar span { margin-left: auto; color: var(--muted); font-size: var(--nozomi-font-control); }
  #nav-toggle { border-color: var(--line); background: var(--nozomi-overlay-subtle); color: var(--ink-soft); }
  /* visibility keeps the closed drawer (and its links) out of the tab order */
  #sidebar { top: 0; bottom: 40px; left: 0; width: min(var(--nozomi-size-sidebar), 86vw); border-width: 0 1px 0 0; box-shadow: var(--nozomi-shadow-dialog); transform: translateX(-100%); visibility: hidden; transition: transform var(--nozomi-motion-base) var(--nozomi-ease-entrance); }
  body.nav-open #sidebar { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; }
  #nav-close { display: inline-grid; }
  .heading-actions, .detail-heading { align-items: flex-start; flex-direction: column; gap: var(--nozomi-space-4); }
  .finding-heading { flex-direction: column; gap: var(--nozomi-space-3); }
  .settings-grid, .invite-form { grid-template-columns: minmax(0, 1fr); }
  .settings-card.wide { grid-column: auto; }
  .toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .toolbar .search { grid-column: 1 / -1; }
  .run { grid-template-columns: minmax(0, 1fr) 12px; gap: var(--nozomi-space-2) var(--nozomi-space-3); }
  .run-counts { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .run-arrow { grid-column: 2; grid-row: 1; }
  .pagination { justify-content: space-between; }
  .actions, .danger-actions { flex-direction: column; }
  .actions .nz-btn, .danger-actions .nz-btn, .invite-form .nz-btn, .settings-card > .nz-btn { width: 100%; }
  .deletion-dialog-body .dialog-actions { flex-direction: column-reverse; }
  .deletion-dialog-body .dialog-actions .nz-btn { width: 100%; }
  .finding { padding: var(--nozomi-space-4h) var(--nozomi-space-4h) var(--nozomi-space-4h) 22px; }
  .finding-facts > div, .definition-list > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .report-nav { top: 56px; }
  .report-metrics.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Members collapse from a table to stacked rows. */
  .members-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .members-table, .members-table tbody { display: block; }
  .members-table tr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 2px var(--nozomi-space-2); padding: var(--nozomi-space-3) var(--nozomi-space-4); border-bottom: 1px solid var(--line); }
  .members-table tr:last-child { border-bottom: 0; }
  .members-table .nz-table-td { display: block; padding: 0; border: 0; background: none !important; }
  .members-table td:nth-child(1) { grid-column: 1 / 4; overflow-wrap: anywhere; font-weight: var(--nozomi-weight-medium); }
  .members-table td:nth-child(2), .members-table td:nth-child(3) { grid-row: 2; color: var(--muted); font-size: var(--nozomi-font-small); }
  .members-table td:nth-child(3)::before { content: "·"; margin-right: var(--nozomi-space-2); }
  .members-table td:nth-child(4) { grid-column: 4; grid-row: 1 / 3; }
}

@media (max-width: 480px) {
  .estimate, .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .detail-item-wide { grid-column: auto; }
  .report-metrics.detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-cluster { justify-content: flex-start; }
  .section-title { align-items: flex-start; flex-direction: column; gap: var(--nozomi-space-3); }
  .list-panel .section-title { flex-direction: row; align-items: center; }
  .report-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .report-heading h2, .report-heading .report-meta { display: block; }
  .report-nav { display: none; }
  #sidebar, #app-bar, nz-information, .back-button, #audit-detail > :not(#audit-results), .report-actions, .finding .actions { display: none !important; }
  body, body.authenticated main { margin: 0; padding: 0; background: #fff; }
  body::before { display: none; }
  body.authenticated main, #workspace { max-width: none; width: 100%; }
  .view:not([data-page="detail"]) { display: none !important; }
  #audit-results { --paper-raised: #fff; --panel: #fff; --card: #fff; --line: #ddd; --line-strong: #aaa; --ink: #111; --ink-soft: #333; --muted: #555; --accent: #8d3453; --ok: #25643d; --bad: #9a2727; margin: 0; padding: 0; border: 0; border-radius: 0; background: #fff; color: #111; box-shadow: none; print-color-adjust: exact; }
  details.observations > summary, .report-scope > summary { display: none; }
  details.observations:not([open]) > :not(summary), .report-scope:not([open]) > :not(summary) { display: block !important; }
  .finding, .report-summary { break-inside: avoid; }
}