/*
 * EcoSphere screening prototype. Static mockup, no build step.
 *
 * The two token blocks below are copied verbatim from
 * frontend/src/styles/tokens.css. Dark mode is the second block, selected by
 * data-mode="dark" on <html>; index.html stamps that attribute from
 * prefers-color-scheme before first paint.
 */

/* Light values. `.eg-light-island` shares this block deliberately (#2134): a
   light island is a subtree that stays light in BOTH modes because it sits on
   fixed light artwork or produces a light artefact — today the unauthenticated
   auth shell (full-bleed light illustration + editorial photograph), and the
   same mechanism is what the MapLibre basemap and the report/DOCX/PDF export
   surfaces use. Custom properties inherit, so re-declaring them on the island
   element re-lights its whole subtree; the dark block never applies there
   because it selects the ROOT element, not the island. Sharing the declaration
   list (rather than copying the values) is what stops the two drifting. */
:root,
.eg-light-island {
  /* Native controls, scrollbars and form widgets follow the active mode: light
     here, dark under the dark block below (#2134). Supersedes the color-scheme
     forcing the Kumo remap used to carry. */
  color-scheme: light;

  /* Surfaces (warm neutrals) */
  --bg-root: hsl(40, 10%, 97%);
  --bg-surface: hsl(40, 8%, 98%);
  --bg-raised: hsl(0, 0%, 100%);
  --bg-sunken: hsl(40, 12%, 95%);
  --bg-sidebar: hsl(220, 25%, 10%);

  /* Text — every token clears WCAG 4.5:1 on bg-root/surface/raised/sunken
     after the issue #305 audit. text-tertiary darkened from 48% to 43%
     (4.04:1 → 4.85:1 on bg-surface, 4.56:1 on bg-sunken). */
  --text-primary: hsl(30, 10%, 13%);
  --text-secondary: hsl(30, 6%, 35%);
  --text-tertiary: hsl(30, 5%, 43%);
  --text-on-dark: hsl(40, 5%, 90%);
  /* Text on solid accent/status fills (filled buttons, solid badges). Flips to
     near-black ink in dark mode, where those fills lighten (#2134). */
  --text-inverse: hsl(0, 0%, 100%);

  /* Brand accent (deep teal). Accent darkened 35% → 33% post-#305 to
     clear 4.5:1 on accent-subtle (selected sidebar items, active tabs):
     4.39:1 → 4.82:1. Hover stays a uniform 5% darker than accent. */
  --accent: hsl(185, 45%, 33%);
  --accent-hover: hsl(185, 45%, 26%);
  --accent-subtle: hsl(185, 30%, 94%);
  --accent-soft: hsl(185, 32%, 90%);
  --ring: hsl(185 45% 33% / 0.32);

  /* Status (muted, not neon). status-success darkened 38% → 32% post-#305
     to clear 4.5:1 on status-success-subtle (3.75:1 → 4.96:1). The other
     status pairs use a strong shade (warning, danger) for the same role. */
  --status-success: hsl(155, 40%, 32%);
  --status-success-strong: hsl(155, 50%, 26%);
  --status-success-subtle: hsl(155, 42%, 92%);
  --status-warning: hsl(40, 60%, 50%);
  --status-warning-strong: hsl(38, 65%, 34%);
  --status-warning-subtle: hsl(42, 70%, 93%);
  --status-danger: hsl(5, 50%, 42%);
  --status-danger-strong: hsl(5, 56%, 34%);
  --status-danger-subtle: hsl(5, 58%, 95%);
  --status-info: hsl(215, 40%, 42%);
  --status-info-subtle: hsl(215, 48%, 94%);

  /* Success-chip border pairing (delivery timeline "Derived from artefacts"
     span + legend key, #1801 design-audit ratchet burn-down). A light-green
     border keyed to status-success-subtle's chip fill. Decorative-only —
     registered as such in a11y/contrast.ts — the chip's fill colour, label
     text, and icon already carry the status signifier. */
  --status-success-border: hsl(155, 30%, 80%);

  /* Sidebar */
  --sidebar-muted: hsl(220, 8%, 58%);
  --sidebar-border: hsl(220, 20%, 18%);
  --sidebar-active: hsl(220, 20%, 18%);

  /* Significance verdict swatches (EIA effect × phase × receptor matrix,
     #1310). Ordered dark→light: major / moderate / minor adverse then
     negligible. Each clears 4.5:1 against bg-raised for the swatch label. */
  --sig-major: hsl(5, 55%, 40%);
  --sig-moderate: hsl(18, 68%, 46%);
  --sig-minor: hsl(40, 60%, 44%);
  --sig-negligible: hsl(155, 40%, 36%);

  /* Categorical data-viz swatches (methodology TRAJECTORY legend key + the
     plotted reference paths, #1801 design-audit ratchet burn-down).
     Decorative-only — no text is rendered on the swatch itself, so WCAG
     1.4.3/1.4.11 do not apply; registered as "decorative" in
     a11y/contrast.ts for documentation. Light values are the Tailwind
     blue/teal/violet/pink-600 hues the legend has always used.
     #2134: the SVG `stroke`/`fill` array now reads these tokens too —
     `var()` DOES resolve in SVG presentation attributes (they are parsed
     as CSS property values), so the legend key and its plotted path share
     one source of truth and both follow the appearance mode. */
  --viz-series-1: hsl(221, 83%, 53%); /* blue-600 */
  --viz-series-2: hsl(175, 84%, 32%); /* teal-600 */
  --viz-series-3: hsl(262, 83%, 58%); /* violet-600 */
  --viz-series-4: hsl(333, 71%, 51%); /* pink-600 */

  /* Borders. border-accent is the at-rest accent-tinted affordance border
     (assistant citation/action chips, #2134). */
  --border: hsl(40, 5%, 88%);
  --border-strong: hsl(40, 6%, 80%);
  --border-accent: hsl(185, 30%, 82%);

  /* Radius (tight) */
  --radius-sm: 3px;
  --radius-md: 5px;
  --radius-lg: 8px;

  /* Shadows (subtle). lg/overlay carry the drawer + auth/dialog float shadows
     (formerly literals at their call sites); the -ink pair are COLOUR tokens
     backing the Kumo shadow roles, which take an ink colour rather than a
     box-shadow (#2134). */
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.04);
  --shadow-md: 0 2px 8px hsl(0 0% 0% / 0.06);
  --shadow-lg: -12px 0 32px hsl(0 0% 0% / 0.16);
  --shadow-overlay: 0 24px 60px hsl(0 0% 0% / 0.18), 0 4px 12px hsl(0 0% 0% / 0.08);
  --shadow-edge-ink: hsl(0 0% 0% / 0.04);
  --shadow-drop-ink: hsl(0 0% 0% / 0.06);

  /* Decorative chrome — the assistant-surface dotted grid ink (#2134). */
  --decor-grid-dot: hsl(30 5% 75% / 0.45);

  /* Typography */
  --font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-heading: "Source Serif 4", Georgia, serif;
  --font-mono: "JetBrains Mono", monospace;

  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-lg: 1rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;

  --font-weight-heading: 600;
  --leading-tight: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
}

/* Dark mode (#2134) — the token-level appearance axis. Selected by
   `data-mode="dark"` on <html>, stamped pre-paint from the `eg-appearance`
   preference (light is the attribute's ABSENCE — there is never a
   `data-mode="light"`). Components never branch on mode: ONLY these token
   values change, and the Kumo remap follows by `var()` reference. Radius and
   typography stay mode-invariant. Every documented role pair clears the same
   WCAG thresholds as the light register (4.5:1 body / 3:1 large+UI); the dark
   rows join TOKEN_CONTRAST_PAIRS in the gate slice of #2134. */
:root[data-mode="dark"] {
  color-scheme: dark;

  /* Surfaces (warm neutrals; raised is the LIGHTEST — elevation reads as
     lighter in dark). The sidebar stays cool-dark, a step deeper than canvas. */
  --bg-root: hsl(30, 8%, 9%);
  --bg-surface: hsl(30, 7%, 11%);
  --bg-raised: hsl(30, 6%, 13%);
  --bg-sunken: hsl(30, 9%, 7%);
  --bg-sidebar: hsl(220, 25%, 7%);

  /* Text. text-inverse flips to near-black ink — it sits on the lightened
     accent/status fills. */
  --text-primary: hsl(40, 8%, 92%);
  --text-secondary: hsl(40, 5%, 72%);
  --text-tertiary: hsl(40, 4%, 62%);
  --text-on-dark: hsl(40, 5%, 90%);
  --text-inverse: hsl(30, 10%, 10%);

  /* Brand accent — lightened for dark surfaces; hover goes LIGHTER (towards
     the reader), the subtle/soft washes become deep teal tints. */
  --accent: hsl(185, 45%, 56%);
  --accent-hover: hsl(185, 50%, 64%);
  --accent-subtle: hsl(185, 30%, 16%);
  --accent-soft: hsl(185, 28%, 21%);
  --ring: hsl(185 45% 56% / 0.4);

  /* Status. Subtle fills go deep; the base shades lighten so they work as text
     on both the subtle fills and raised cards; the -strong shades FLIP from
     darker-than-base to lighter-than-base (they are text on the subtle fills). */
  --status-success: hsl(155, 45%, 55%);
  --status-success-strong: hsl(155, 45%, 70%);
  --status-success-subtle: hsl(155, 35%, 14%);
  --status-warning: hsl(40, 65%, 58%);
  --status-warning-strong: hsl(42, 60%, 70%);
  --status-warning-subtle: hsl(40, 45%, 14%);
  --status-danger: hsl(5, 65%, 64%);
  --status-danger-strong: hsl(5, 70%, 76%);
  --status-danger-subtle: hsl(5, 40%, 15%);
  --status-info: hsl(215, 55%, 66%);
  --status-info-subtle: hsl(215, 40%, 16%);
  /* Success-chip border. Light pairs a border slightly DARKER than the chip
     fill (1.29:1); dark flips that to slightly lighter, at 1.53:1 — dark
     surfaces need a touch more separation to read as the same subtlety. */
  --status-success-border: hsl(155, 28%, 24%);

  /* Sidebar */
  --sidebar-muted: hsl(220, 10%, 64%);
  --sidebar-border: hsl(220, 20%, 15%);
  --sidebar-active: hsl(220, 20%, 16%);

  /* Significance verdict swatches — lightened; the adverse ordering stays
     major > moderate > minor by hue, each ≥4.5:1 on bg-raised. */
  --sig-major: hsl(5, 60%, 62%);
  --sig-moderate: hsl(18, 65%, 60%);
  --sig-minor: hsl(40, 55%, 58%);
  --sig-negligible: hsl(155, 40%, 58%);

  /* Borders */
  --border: hsl(30, 6%, 22%);
  --border-strong: hsl(30, 6%, 32%);
  --border-accent: hsl(185, 30%, 30%);

  /* Shadows — light-mode alphas vanish on dark surfaces, so the inks deepen. */
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.35);
  --shadow-md: 0 2px 8px hsl(0 0% 0% / 0.4);
  --shadow-lg: -12px 0 32px hsl(0 0% 0% / 0.55);
  --shadow-overlay: 0 24px 60px hsl(0 0% 0% / 0.5), 0 4px 12px hsl(0 0% 0% / 0.3);
  --shadow-edge-ink: hsl(0 0% 0% / 0.25);
  --shadow-drop-ink: hsl(0 0% 0% / 0.35);

  /* Decorative chrome */
  --decor-grid-dot: hsl(30 5% 40% / 0.4);

  /* Categorical data-viz swatches — lightened to stay distinguishable on the
     dark canvas (the light blue/teal/violet-600 hues go muddy against it).
     Decorative, but held to 3:1 on bg-raised so a legend key and its plotted
     path remain discernible. */
  --viz-series-1: hsl(217, 85%, 68%);
  --viz-series-2: hsl(174, 60%, 55%);
  --viz-series-3: hsl(263, 80%, 74%);
  --viz-series-4: hsl(333, 75%, 68%);
}

/* ======================================================================
   Base
   ====================================================================== */

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

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--bg-root);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

[hidden] {
  display: none !important;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Programmatic focus targets (headings, the outcome card) take focus for
   screen readers without drawing a ring around a whole block. */
[tabindex="-1"]:focus-visible {
  outline: none;
}

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

.icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sm {
  width: 14px;
  height: 14px;
}

.icon-xs {
  width: 12px;
  height: 12px;
}

.icon-fill {
  fill: currentColor;
  stroke: none;
}

.mono {
  font-family: var(--font-mono);
}

.tert {
  color: var(--text-tertiary);
}

.sec {
  color: var(--text-secondary);
}

.xs {
  font-size: var(--text-xs);
}

.ta-r {
  text-align: right;
}

/* ======================================================================
   Shell: sidebar, context bar, announcement, content scroller
   ====================================================================== */

.shell {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.sidebar {
  --sidebar-focus: hsl(185, 45%, 56%);
  display: flex;
  width: 15rem;
  flex-shrink: 0;
  flex-direction: column;
  border-right: 1px solid var(--sidebar-border);
  background: var(--bg-sidebar);
  color: var(--text-on-dark);
}

.sidebar :focus-visible {
  outline-color: var(--sidebar-focus);
}

.account {
  display: flex;
  min-height: 3.5rem;
  align-items: center;
  gap: 0.625rem;
  border-bottom: 1px solid var(--sidebar-border);
  padding: 0.625rem 0.75rem;
}

.account-mark {
  display: flex;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--text-inverse);
  font-size: 0.8125rem;
  font-weight: 700;
}

.account-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: var(--leading-tight);
}

.account-name {
  overflow: hidden;
  color: var(--text-on-dark);
  font-size: var(--text-sm);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-sub {
  margin-top: 0.125rem;
  color: var(--sidebar-muted);
  font-size: var(--text-xs);
}

.sidebar-scroll {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0.625rem 0.75rem;
}

.sidebar-back,
.nav-item {
  display: flex;
  width: 100%;
  min-height: 2.125rem;
  align-items: center;
  gap: 0.625rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0.4375rem 0.5rem;
  color: var(--sidebar-muted);
  font-size: var(--text-sm);
  text-align: left;
  text-decoration: none;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.sidebar-back {
  font-weight: 500;
}

.sidebar-back:hover,
.nav-item:hover {
  background: var(--sidebar-active);
  color: var(--text-on-dark);
}

.sidebar-project {
  margin: 0.875rem 0.5rem 0.375rem;
  color: var(--sidebar-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.nav-item .nav-caret {
  margin-left: auto;
  opacity: 0.7;
}

.nav-item[aria-current="page"] {
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}

.main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  transition: margin-right 180ms ease;
}

.context-bar {
  display: flex;
  height: 3.5rem;
  min-width: 0;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 0 1rem;
}

.context-left {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
}

.menu-toggle {
  display: none;
}

.crumbs {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.crumbs li {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 0.25rem;
}

.crumbs li > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.crumbs [aria-current="page"] {
  color: var(--text-primary);
  font-weight: 500;
}

.topbar-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.375rem;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 0.25rem;
}

.search .icon {
  position: absolute;
  left: 0.5rem;
  color: var(--text-tertiary);
  pointer-events: none;
}

.search input {
  width: 13rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 0 2.5rem 0 1.875rem;
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.search input::placeholder {
  color: var(--text-tertiary);
}

.search kbd {
  position: absolute;
  right: 0.375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  padding: 0 0.25rem;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: 0.625rem;
  line-height: 1.4;
}

.search-icon-btn {
  display: none;
}

.ai-mark {
  color: var(--text-tertiary);
}

.user-chip {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  gap: 0.375rem;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  padding: 0 0.5rem 0 0.25rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.user-chip:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}

.avatar {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: var(--text-xs);
  font-weight: 700;
}

.announce {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--status-info-subtle);
  padding: 0.3125rem 1rem;
  color: var(--status-info);
  font-size: var(--text-xs);
  font-weight: 500;
}

.announce .btn-link {
  color: var(--status-info);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.scroll {
  position: relative;
  min-height: 0;
  flex: 1;
  overflow: auto;
  background: var(--bg-root);
}

.content {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  padding: 1.25rem 1.5rem 0;
}

.backdrop {
  display: none;
}

/* ======================================================================
   Page header, step strip, intro
   ====================================================================== */

.page-header {
  margin-bottom: 1rem;
}

.page-context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.page-head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-top: 0.25rem;
}

.page-title {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-heading);
  letter-spacing: -0.015em;
  line-height: var(--leading-tight);
}

.page-head-aside {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.stage-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
  padding: 0.1875rem 0.5rem;
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.steps ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}

.steps li + li {
  border-left: 1px solid var(--border);
}

.step {
  display: flex;
  height: 100%;
  min-width: 0;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background-color 150ms ease;
}

.step:hover {
  background: var(--bg-surface);
}

.step:focus-visible {
  outline-offset: -2px;
}

.step-num {
  display: inline-flex;
  width: 1.375rem;
  height: 1.375rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 600;
}

.step-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  line-height: var(--leading-tight);
}

.step-label {
  overflow: hidden;
  font-size: var(--text-sm);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step-meta {
  overflow: hidden;
  margin-top: 0.125rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.step.is-done .step-num {
  background: var(--accent-soft);
  color: var(--accent);
}

.step[aria-current="step"] {
  background: var(--accent-subtle);
  box-shadow: inset 0 -2px 0 var(--accent);
  color: var(--accent);
}

.step[aria-current="step"] .step-label {
  font-weight: 600;
}

.step[aria-current="step"] .step-num {
  background: var(--accent);
  color: var(--text-inverse);
}

.steps-caption {
  margin-bottom: 0.375rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.intro {
  max-width: 48rem;
  margin: 1rem 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

/* ======================================================================
   Buttons, badges, form controls
   ====================================================================== */

.btn {
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 0 0.75rem;
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 150ms ease,
    border-color 150ms ease,
    color 150ms ease;
}

.btn-sm {
  height: 1.75rem;
  padding: 0 0.625rem;
  font-size: var(--text-xs);
}

.btn-icon {
  width: 2rem;
  padding: 0;
}

.btn-primary {
  background: var(--accent);
  box-shadow: var(--shadow-sm);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  border-color: var(--border);
  background: var(--bg-raised);
  color: var(--text-primary);
}

.btn-secondary:hover {
  background: var(--bg-sunken);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.btn-ghost:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.btn-primary:disabled:hover,
.btn-primary[aria-disabled="true"]:hover {
  background: var(--accent);
}

.btn-secondary:disabled:hover,
.btn-secondary[aria-disabled="true"]:hover {
  background: var(--bg-raised);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: none;
  padding: 0;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  text-underline-offset: 3px;
}

.btn-link:hover {
  text-decoration: underline;
}

.btn-link:disabled,
.btn-link[aria-disabled="true"] {
  cursor: default;
  color: var(--text-tertiary);
  text-decoration: none;
}

.btn-link.xs {
  font-size: var(--text-xs);
}

.badge {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 0.25rem;
  border-radius: var(--radius-sm);
  padding: 0.1875rem 0.375rem;
  font-size: var(--text-xs);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.badge-neutral {
  background: var(--bg-sunken);
  color: var(--text-secondary);
}

.badge-accent {
  background: var(--accent-subtle);
  color: var(--accent);
}

.badge-success {
  background: var(--status-success-subtle);
  color: var(--status-success);
}

.badge-warning {
  background: var(--status-warning-subtle);
  color: var(--status-warning-strong);
}

.badge-danger {
  background: var(--status-danger-subtle);
  color: var(--status-danger);
}

.badge-info {
  background: var(--status-info-subtle);
  color: var(--status-info);
}

.badge-outline {
  border: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 0.125rem 0.3125rem;
  color: var(--text-secondary);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.input,
.select,
.textarea {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--text-sm);
}

.input,
.select {
  height: 2rem;
  padding: 0 0.5rem;
}

.input-sm,
.select-sm {
  height: 1.75rem;
  font-size: var(--text-sm);
}

.select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23857f78' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  padding-right: 1.75rem;
  cursor: pointer;
}

.select-auto {
  width: auto;
}

.textarea {
  min-height: 4.5rem;
  padding: 0.5rem;
  line-height: var(--leading-normal);
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--text-tertiary);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--text-tertiary);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

.input[aria-invalid="true"] {
  border-color: var(--status-danger);
}

.input-suffix {
  position: relative;
  display: flex;
  align-items: center;
}

.input-suffix .input {
  padding-right: 1.75rem;
  font-variant-numeric: tabular-nums;
}

.input-suffix > span {
  position: absolute;
  right: 0.5rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  pointer-events: none;
}

.field {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}

.field-label {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
}

.field-hint {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.field-error {
  color: var(--status-danger);
  font-size: var(--text-xs);
  font-weight: 500;
}

.inline-field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
  font-size: var(--text-sm);
  cursor: pointer;
}

input[type="checkbox"],
input[type="radio"] {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Segmented radio group: real radios, visually replaced by their labels. */
.segmented {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
}

.seg-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.seg {
  display: inline-flex;
  height: 1.75rem;
  align-items: center;
  padding: 0 0.625rem;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color 150ms ease,
    color 150ms ease;
}

.seg + .seg-input + .seg {
  border-left: 1px solid var(--border);
}

.seg:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}

.seg-input:checked + .seg {
  background: var(--accent-subtle);
  box-shadow: inset 0 0 0 1px var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.seg-input:focus-visible + .seg {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Switch (role="switch") */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: none;
  padding: 0.25rem 0;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.switch-track {
  position: relative;
  display: inline-block;
  width: 1.875rem;
  height: 1.0625rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--border-strong);
  transition: background-color 150ms ease;
}

.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0.8125rem;
  height: 0.8125rem;
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
  transition: transform 150ms ease;
}

.switch[aria-checked="true"] .switch-track {
  background: var(--accent);
}

.switch[aria-checked="true"] .switch-thumb {
  transform: translateX(0.8125rem);
}

/* Disclosure buttons */
.disclosure {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: none;
  padding: 0.125rem 0;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: 500;
}

.disclosure:hover {
  color: var(--text-primary);
}

.disclosure .icon {
  transition: transform 150ms ease;
}

.disclosure[aria-expanded="true"] .icon {
  transform: rotate(90deg);
}

/* ======================================================================
   Cards, lists, tables
   ====================================================================== */

.card {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
}

.card-head {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 1rem;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: var(--leading-tight);
}

.card-count {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  white-space: nowrap;
}

.card-body {
  padding: 0.75rem 1rem;
}

.card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding: 0.625rem 1rem;
}

.card-foot-split {
  justify-content: space-between;
}

.foot-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.unsaved {
  color: var(--status-warning-strong);
  font-size: var(--text-xs);
  font-weight: 500;
}

.card-source {
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 0.5rem 1rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.card-source a {
  color: var(--accent);
  font-weight: 500;
  text-underline-offset: 2px;
}

.cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 1rem;
}

/* Pick lists (factors and receptors) */
.pick-list > li + li {
  border-top: 1px solid var(--border);
}

.pick-row {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.5625rem 1rem;
}

.pick-row > input[type="checkbox"] {
  margin-top: 0.1875rem;
}

.pick-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 0.25rem;
}

.pick-name {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
}

.pick-detail {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.pick-why {
  max-width: 11rem;
  flex-shrink: 0;
  padding-top: 0.125rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  line-height: 1.4;
  text-align: right;
}

.pick-side {
  flex-shrink: 0;
  padding-top: 0.0625rem;
}

/* An unpicked row reads quietly until "Show everything" is on. Its reason
   still appears on hover or keyboard focus. */
.pick-row.is-compact {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.pick-row.is-compact .pick-name {
  color: var(--text-secondary);
  font-weight: 400;
}

.pick-row.is-compact .pick-why {
  visibility: hidden;
}

.pick-row.is-compact:hover .pick-why,
.pick-row.is-compact:focus-within .pick-why {
  visibility: visible;
}

.pick-row.is-compact .pick-main {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.375rem;
}

.pick-row.is-compact .pick-detail {
  color: var(--text-tertiary);
}

.rgroup + .rgroup {
  border-top: 1px solid var(--border);
}

.rgroup-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  padding: 0.375rem 1rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.rgroup-title span {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.inline-form {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 0.75rem;
}

.form-title {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 600;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.625rem;
}

.form-actions {
  display: flex;
  gap: 0.5rem;
}

/* Data table (mirrors the DataTable composite) */
.table-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.625rem;
}

.tt-left {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.table-caption {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.table-wrap {
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-raised);
}

.table-wrap.flush {
  border-width: 1px 0 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.dt {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-sm);
}

.dt th {
  border-bottom: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 0.5rem 0.75rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.dt td {
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
  vertical-align: top;
}

.dt tbody tr:last-child td {
  border-bottom: 0;
}

.dt tbody tr.is-clickable {
  cursor: pointer;
}

.dt tbody tr.is-clickable:hover {
  background: var(--bg-surface);
}

.dt tbody tr[aria-selected="true"],
.dt tbody tr[aria-selected="true"]:hover {
  background: var(--accent-subtle);
  box-shadow: inset 2px 0 0 var(--accent);
}

.dt td.cell-action {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  text-align: right;
}

.dt .empty-row td {
  padding: 1.25rem 0.75rem;
  color: var(--text-tertiary);
  text-align: center;
}

.cell-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.cell-strong {
  font-weight: 500;
}

/* Column widths (fixed layout: short columns sized, text column takes the rest) */
.col-topic-response { width: 12rem; }
.col-topic-sig { width: 11rem; }
.col-reasons { width: 8rem; }
.col-action { width: 5rem; }
.col-applies { width: 8rem; }
.col-confidence { width: 7rem; }
.col-group { width: 11rem; }
.col-changed { width: 9.5rem; }
.col-zone-topic { width: 12.5rem; }
.col-zone { width: 15rem; }
.col-zone-default { width: 13rem; }
.col-zone-action { width: 4.5rem; }

.table-min-topics { min-width: 40rem; }
.table-min-criteria { min-width: 38rem; }
.table-min-zones { min-width: 52rem; }

.crit {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.25rem;
}

.crit-line {
  display: flex;
  min-width: 0;
  gap: 0.5rem;
}

.crit-code {
  width: 2.25rem;
  flex-shrink: 0;
  padding-top: 0.0625rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 500;
}

.crit-text {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.45;
}

.crit .badge {
  align-self: flex-start;
  margin-left: 2.75rem;
}

.notice {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.625rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 0.4375rem 0.75rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.notice .icon {
  color: var(--text-tertiary);
}

/* Popover (Display options) */
.popover-anchor {
  position: relative;
}

.popover {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  display: flex;
  min-width: 13rem;
  flex-direction: column;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-raised);
  box-shadow: var(--shadow-md);
  padding: 0.625rem 0.75rem;
}

.popover-title {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ======================================================================
   Topic questions
   ====================================================================== */

.section-gap {
  margin-top: 1.25rem;
}

.topic-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
}

.topic-card {
  scroll-margin-top: 1rem;
}

.facts {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  padding: 0.5rem 0.75rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.5;
}

.facts .icon {
  margin-top: 0.125rem;
  color: var(--text-tertiary);
}

.question {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.875rem 0 0.75rem;
}

/* A floated legend is not the fieldset's "rendered legend", so it becomes an
   ordinary flex item and the column gap applies to it like the rest. */
.question > legend,
fieldset.insp-section > legend {
  float: left;
  width: 100%;
}

.question + .question {
  border-top: 1px solid var(--border);
}


.q-text {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.45;
}

.q-num {
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 500;
}

.q-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.625rem 1.25rem;
}

.q-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.q-field .select {
  width: 13rem;
}

.q-check {
  height: 1.75rem;
}

.reasons {
  max-width: 44rem;
}

.unpicked-card .disclosure {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  font-size: var(--text-sm);
}

.unpicked-list {
  border-top: 1px solid var(--border);
}

.unpicked-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.5rem 1rem;
}

.unpicked-list li + li {
  border-top: 1px solid var(--border);
}

.unpicked-list .pick-name {
  min-width: 12rem;
  cursor: default;
}

.unpicked-list .btn-link {
  margin-left: auto;
}

/* ======================================================================
   Outcome
   ====================================================================== */

.outcome-card {
  margin-top: 1.25rem;
  scroll-margin-top: 1rem;
}

.outcome-line {
  font-size: var(--text-sm);
  line-height: 1.6;
}

.outcome-label {
  color: var(--text-secondary);
}

.outcome-value {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
}

.outcome-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-top: 0.75rem;
}

.card-title .step-num {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ======================================================================
   Sticky bottom bar (sticks inside the content scroller)
   ====================================================================== */

.bottom-bar {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: auto -1.5rem 0;
  border-top: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 0.625rem 1.5rem;
}

.page-body {
  padding-bottom: 1.5rem;
}

.bb-left,
.bb-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.bb-summary {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.bb-summary strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* ======================================================================
   Zones of influence
   ====================================================================== */

.section-intro {
  max-width: 52rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.zone-topic {
  font-weight: 500;
  line-height: 1.4;
}

.adv-toggle {
  margin-top: 0.375rem;
}

.adv-summary {
  margin-top: 0.125rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}

.zone-editor {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.zone-editor .input-suffix {
  max-width: 8.5rem;
}

.guidance {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  color: var(--text-secondary);
}

.guidance-value {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

.dt tr.adv-row td {
  background: var(--bg-surface);
  padding: 0.25rem 0.75rem 0.875rem;
}

.adv {
  margin-left: 0.25rem;
  border-left: 2px solid var(--border-strong);
  padding-left: 1rem;
}

.adv-title {
  padding: 0.5rem 0 0.375rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.adv-empty {
  padding: 0.25rem 0 0.5rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.cat-head,
.cat-row {
  display: grid;
  grid-template-columns: minmax(10rem, 1.5fr) 7.5rem minmax(8rem, 1fr) minmax(11rem, auto) 3.75rem;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.cat-head {
  padding: 0 0 0.25rem;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 500;
}

.cat-row {
  border-top: 1px solid var(--border);
  padding: 0.375rem 0;
}

.cat-name {
  font-size: var(--text-sm);
}

.cat-row .ta-r,
.cat-head .ta-r {
  text-align: right;
}

.cat-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.cat-add .select {
  width: 15rem;
}

/* ======================================================================
   Right inspector
   ====================================================================== */

.inspector {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  width: 23rem;
  max-width: calc(100vw - 2rem);
  flex-direction: column;
  border-left: 1px solid var(--border);
  background: var(--bg-raised);
  box-shadow: var(--shadow-lg);
}

.insp-head {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 0.75rem 0.75rem 1rem;
}

.insp-eyebrow {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.insp-eyebrow.mono {
  letter-spacing: 0;
  text-transform: none;
}

.insp-title {
  margin-top: 0.125rem;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.4;
}

.insp-tabs {
  display: flex;
  flex-shrink: 0;
  gap: 0.25rem;
  border-bottom: 1px solid var(--border);
  padding: 0 0.75rem;
}

.insp-tab {
  position: relative;
  border: 0;
  background: none;
  padding: 0.625rem 0.5rem;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
}

.insp-tab:hover {
  color: var(--text-primary);
}

.insp-tab[aria-selected="true"] {
  color: var(--accent);
  font-weight: 600;
}

.insp-tab[aria-selected="true"]::after {
  position: absolute;
  right: 0.5rem;
  bottom: -1px;
  left: 0.5rem;
  height: 2px;
  background: var(--accent);
  content: "";
}

.insp-tab:focus-visible {
  outline-offset: -2px;
}

.insp-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  gap: 1.125rem;
  overflow-y: auto;
  padding: 1rem;
}

.insp-body p {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.insp-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.insp-label {
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: 500;
}


.insp-section .segmented {
  align-self: flex-start;
}

.insp-section .select {
  max-width: 12rem;
}

.insp-note {
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border);
  padding: 0.5rem 0.625rem;
}

.insp-body p.insp-note {
  font-size: var(--text-xs);
}

.worklist {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
  padding: 0.625rem 1rem;
}

.worklist-pos {
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

body.inspector-open .main {
  margin-right: 0;
}

/* Push tier: the inspector sits beside the content instead of over it. */
@media (min-width: 1440px) {
  body.inspector-open .main {
    margin-right: 23rem;
  }

  .inspector {
    box-shadow: none;
  }
}

/* ======================================================================
   Toast
   ====================================================================== */

.toast {
  position: fixed;
  right: 1.5rem;
  bottom: 4.5rem;
  z-index: 60;
  max-width: 24rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--text-primary);
  box-shadow: var(--shadow-md);
  padding: 0.5rem 0.75rem;
  color: var(--bg-raised);
  font-size: var(--text-sm);
  opacity: 0;
  pointer-events: none;
  transform: translateY(0.25rem);
  transition:
    opacity 150ms ease,
    transform 150ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: none;
}

/* ======================================================================
   Responsive
   ====================================================================== */

@media (max-width: 1199px) {
  .cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .search {
    display: none;
  }

  .search-icon-btn {
    display: inline-flex;
  }
}

@media (max-width: 1100px) {
  .steps .step-meta {
    display: none;
  }
}

@media (max-width: 899px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    visibility: hidden;
    transform: translateX(-100%);
    transition:
      transform 180ms ease,
      visibility 180ms;
  }

  body.sidebar-open .sidebar {
    visibility: visible;
    transform: none;
  }

  body.sidebar-open .backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
    background: hsl(0 0% 0% / 0.3);
  }

  .menu-toggle {
    display: inline-flex;
  }

  .topbar-actions .btn-label {
    display: none;
  }

  .content {
    padding: 1rem 1rem 0;
  }

  .bottom-bar {
    margin: auto -1rem 0;
    padding: 0.625rem 1rem;
  }

  .pick-why {
    max-width: 10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* ---------------------------------------------------------------------------
   Product sidebar (frontend/src/index.css `.eg-sidebar`): a light raised
   surface, 18.75rem wide, active item on the sunken surface in 600 weight.
   Overrides the dark variant above so the prototype matches the shipped shell.
   --------------------------------------------------------------------------- */
.sidebar {
  --sidebar-focus: var(--accent);
  width: 18.75rem;
  border-right-color: var(--border);
  background: var(--bg-raised);
  color: var(--text-primary);
}
.account {
  border-bottom-color: var(--border);
}
.account-name {
  color: var(--text-primary);
}
.account-sub,
.sidebar-back,
.nav-item,
.sidebar-project {
  color: var(--text-secondary);
}
.sidebar-back:hover,
.nav-item:hover {
  background: var(--bg-sunken);
  color: var(--text-primary);
}
.nav-item[aria-current="page"] {
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-weight: 600;
}