/* =========================================================================
   VALKAN tokens — adapted from the design system's colors_and_type.css
   Single source of truth for color, type, spacing, radii, shadows, motion.
   Use the CSS custom properties; never hard-code values in components.

   Only the Midnight + Gold palette ships in the app.

   Light mode lives behind data-theme="light". Dark is default.
   ========================================================================= */

/* -----------------------------------------------------------------------
   Base tokens — palette-agnostic
   These do not change across palettes or themes.
   ----------------------------------------------------------------------- */
:root {
  /* ---- Type stack ---- */
  --font-sans: "Geist", "Söhne", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono",
    "Menlo", monospace;
  --font-display: var(--font-sans); /* No separate display face by design */

  /* ---- Type scale (px values, semantically named) ---- */
  --text-2xs: 11px;   /* labels, tiny meta */
  --text-xs: 12px;    /* table cell meta, footnotes */
  --text-sm: 13px;    /* body in dense UI, table cells */
  --text-base: 14px;  /* default body */
  --text-md: 15px;    /* reading body */
  --text-lg: 17px;    /* subheads */
  --text-xl: 20px;    /* card titles, h4 */
  --text-2xl: 24px;   /* h3 */
  --text-3xl: 30px;   /* h2 */
  --text-4xl: 40px;   /* h1, big numbers */
  --text-5xl: 56px;   /* hero / dashboard headline numbers */
  --text-6xl: 80px;   /* marketing only */

  /* ---- Weights ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Line-heights ---- */
  --leading-tight: 1.1;     /* big numbers, hero */
  --leading-snug: 1.25;     /* headlines */
  --leading-normal: 1.45;   /* body */
  --leading-relaxed: 1.6;   /* long-form reading */

  /* ---- Tracking ---- */
  --tracking-display: -0.022em; /* big numbers, hero text */
  --tracking-tight: -0.012em;   /* h1-h3 */
  --tracking-normal: 0;          /* body */
  --tracking-wide: 0.04em;       /* uppercase labels (sparingly) */

  /* ---- Spacing (4px base) ---- */
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 56px;
  --space-11: 80px;
  --space-12: 120px;

  /* ---- Radii ---- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px; /* @kind other */

  /* ---- Shadows (dark-mode-tuned; rebuilt under [data-theme=light]) ----
     Directional: light source top-left (inset highlight) + cast shadow
     bottom-right, so floating elements read as physically lifted. */
  --shadow-1:
    inset 1px 1px 0 rgba(255,255,255,0.22),
    inset -1px -1px 0 rgba(0,0,0,0.40),
    0 6px 20px rgba(0,0,0,0.80),
    0 2px 6px rgba(0,0,0,0.60),
    0 0 0 1px rgba(0,0,0,0.50);
  --shadow-2:
    inset 1px 1px 0 rgba(255,255,255,0.13),
    inset -1px -2px 2px rgba(0,0,0,0.35),
    10px 14px 34px rgba(0,0,0,0.62),
    0 0 0 1px rgba(0,0,0,0.45);
  --shadow-3:
    inset 1px 2px 0 rgba(255,255,255,0.16),
    inset -2px -3px 4px rgba(0,0,0,0.40),
    22px 30px 70px rgba(0,0,0,0.70),
    0 0 0 1px rgba(0,0,0,0.50);
  /* Control depth (buttons, interactive pills) + chrome edge cast */
  --shadow-control: 0 1px 2px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.09);
  --shadow-control-strong: 0 2px 4px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.28);
  --shadow-pressed: inset 0 1px 3px rgba(0,0,0,0.45);
  --edge-shadow-right: 5px 0 18px rgba(0,0,0,0.32);
  --edge-shadow-down: 0 5px 18px rgba(0,0,0,0.32);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --dur-fast: 80ms; /* @kind other */
  --dur-base: 120ms; /* @kind other */
  --dur-slow: 200ms; /* @kind other */
  --dur-page: 320ms; /* @kind other */

  /* ---- Severity (cross-palette, do not theme) ---- */
  --sev-critical: #E5484D;
  --sev-critical-bg: rgba(229, 72, 77, 0.12);
  --sev-critical-border: rgba(229, 72, 77, 0.32);

  --sev-high: #F5A524;
  --sev-high-bg: rgba(245, 165, 36, 0.12);
  --sev-high-border: rgba(245, 165, 36, 0.32);

  --sev-medium: #E0C56A;
  --sev-medium-bg: rgba(224, 197, 106, 0.10);
  --sev-medium-border: rgba(224, 197, 106, 0.28);

  --sev-low: #5EA4F2;
  --sev-low-bg: rgba(94, 164, 242, 0.10);
  --sev-low-border: rgba(94, 164, 242, 0.28);

  --sev-info: #8A95AD;
  --sev-info-bg: rgba(138, 149, 173, 0.10);
  --sev-info-border: rgba(138, 149, 173, 0.28);

  --sev-ok: #5BB98C;
  --sev-ok-bg: rgba(91, 185, 140, 0.10);
  --sev-ok-border: rgba(91, 185, 140, 0.28);

  /* ---- Z-index ---- */
  --z-base: 0; /* @kind other */
  --z-sticky: 20; /* @kind other */
  --z-nav: 30; /* @kind other */
  --z-dropdown: 40; /* @kind other */
  --z-modal-scrim: 50; /* @kind other */
  --z-modal: 51; /* @kind other */
  --z-toast: 60; /* @kind other */
  --z-tooltip: 70; /* @kind other */
}

/* =========================================================================
   PALETTE 1 — MIDNIGHT + GOLD (default)
   Deep navy substrate, single gold accent, warm white text.
   ========================================================================= */
:root,
:root[data-palette="midnight"] {
  /* Surfaces (dark) */
  --bg-0: #070B14;          /* page */
  --bg-1: #0B1120;          /* sidebar, top chrome */
  --bg-2: #121A2E;          /* card surface */
  --bg-3: #1A2440;          /* hover-lifted row, menu */
  --bg-inset: #060912;      /* code blocks, deep wells */
  --bg-overlay: rgba(7, 11, 20, 0.72); /* modal scrim */
  --bg-deep: #040509;       /* richer near-black edge for the page-level radial depth */

  /* Foregrounds */
  --fg-1: #F4F1E8;          /* warm white — primary text */
  --fg-2: #B3BACC;          /* secondary text */
  --fg-3: #6E7894;          /* tertiary / placeholder */
  --fg-4: #4A5371;          /* disabled / faint chrome */
  --fg-inverse: #0B1120;    /* text on gold / on white */

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Accent — gold */
  --accent: #D4A95C;
  --accent-hover: #DDB66E;
  --accent-press: #C29A48;
  --accent-bg: rgba(212, 169, 92, 0.10);
  --accent-border: rgba(212, 169, 92, 0.32);
  --accent-fg: #1A1505;     /* text on gold */

  /* Data viz (calm, distinguishable @ small sizes) */
  --viz-1: #D4A95C;         /* gold (primary series) */
  --viz-2: #5EA4F2;         /* blue */
  --viz-3: #5BB98C;         /* sage */
  --viz-4: #B68FE2;         /* lavender */
  --viz-5: #E0C56A;         /* muted yellow */
  --viz-6: #6BC2D9;         /* teal */
  --viz-7: #E58A5C;         /* terracotta */
  --viz-8: #8A95AD;         /* gray */

  /* Access level on graph edges (what a principal can DO at the far end).
     Deliberately NOT aliases of --viz-*: the viz ramp belongs to charts and is
     re-tuned independently, and --viz-4 is already spent on cross-plane bridge
     edges. Also NOT the --sev-* ramp: access level is a capability, not a
     severity, and read access to a crown-jewel bucket outranks admin access to
     a scratch one. Hue here is a secondary channel — stroke width and the edge
     marker carry the same information for anyone who cannot separate these. */
  --access-read: #7C93B8;        /* muted slate-blue — deliberately recessive */
  --access-write: #D98E4F;       /* amber-orange */
  --access-read-write: #C77BC4;  /* orchid — reads as "both", not as a third hue */
  --access-admin: #E0574F;       /* alarm red, distinct from --sev-critical */

  /* Inventory-ring ramp (42M-402 review: "gray/sand/olive/bronze, no blue").
     A warm-neutral LIGHTNESS STAIRCASE, not a categorical palette — muted
     earth tones can't pass categorical CVD checks alone (validated), so ring
     identity rides on fixed concentric order + legend + hover, with lightness
     as the differentiator and red reserved for the attention share. */
  --ring-1: #C9A45C;        /* bronze  (outermost) */
  --ring-2: #A8935F;        /* sand */
  --ring-3: #838B52;        /* olive */
  --ring-4: #63795B;        /* moss */
  --ring-5: #5C6578;        /* gray   (innermost) */

  /* Page-level vignette (brand signature) */
  --vignette: radial-gradient(
    1200px 800px at 0% 100%,
    rgba(212, 169, 92, 0.05) 0%,
    rgba(212, 169, 92, 0) 60%
  ); /* @kind other */

  color-scheme: dark;
}

/* =========================================================================
   LIGHT MODE — Paper + Midnight + Gold
   Targets BOTH the root (so it beats the palette selectors' specificity
   on <html>) and any descendant element (so split-pane previews can flip
   one pane to light without touching root).
   ========================================================================= */
:root[data-theme="light"],
[data-theme="light"] {
  /* Surfaces — deepened warm cream (was near-pure-white); chrome and cards
     sit a shade darker than the page so glass edges read without a hard line */
  /* 42M-402 review rework: the warm-parchment wash read soft and heavy —
     neutral near-white canvas, white cards, sharper edges. A whisper of the
     old warmth stays in the canvas tint so light mode is still Valkan. */
  --bg-0: #F3F2EE;          /* page — neutral, faintly warm */
  --bg-1: #FAFAF7;          /* sidebar, top chrome */
  --bg-2: #FFFFFF;          /* cards — white */
  --bg-3: #ECEBE5;          /* hover row, menu */
  --bg-inset: #E7E5DE;      /* code blocks, wells */
  --bg-overlay: rgba(7, 11, 20, 0.35); /* modal scrim — dark navy at low alpha */
  --bg-deep: #ECEAE4;       /* page-level radial depth edge */

  /* Foregrounds — the midnight navy, stepped down for hierarchy
     (secondary/tertiary darkened in the 42M-402 review pass). */
  --fg-1: #0B1120;          /* primary text = dark-mode bg-1 navy */
  --fg-2: #3D4557;          /* secondary */
  --fg-3: #5B6377;          /* tertiary / placeholder */
  --fg-4: #8B93A8;          /* disabled / faint */
  --fg-inverse: #FFFFFF;    /* text on dark / on gold */

  /* Borders — neutral navy-gray, crisper than the old warm tint */
  --border-subtle:  rgba(15, 23, 42, 0.09);
  --border-default: rgba(15, 23, 42, 0.15);
  --border-strong:  rgba(15, 23, 42, 0.24);

  /* Accent — gold, deepened for legibility on white */
  --accent: #B5853C;
  --accent-hover: #C09548;
  --accent-press: #9B6F2D;
  --accent-bg: rgba(181, 133, 60, 0.10);
  --accent-border: rgba(181, 133, 60, 0.32);
  --accent-fg: #FFFFFF;     /* text on filled gold buttons */

  /* Data viz — slightly deepened to read on white */
  --viz-1: #B5853C;         /* gold */
  --viz-2: #2F6AB8;         /* blue */
  --viz-3: #3F8E62;         /* sage */
  --viz-4: #8867B6;         /* lavender */
  --viz-5: #B89A3E;         /* mustard */
  --viz-6: #3F8FA3;         /* teal */
  --viz-7: #B8623C;         /* terracotta */
  --viz-8: #6B7488;         /* gray */

  /* Access level — deepened to hold contrast on white */
  --access-read: #4C6389;
  --access-write: #A9611F;
  --access-read-write: #94438F;
  --access-admin: #B3352E;

  /* Inventory-ring ramp — deepened for white surfaces */
  --ring-1: #A8813A;
  --ring-2: #8A7844;
  --ring-3: #6B7238;
  --ring-4: #4F6847;
  --ring-5: #555E70;

  /* Page vignette — gold whisper from the bottom-left */
  --vignette: radial-gradient(
    1200px 800px at 0% 100%,
    rgba(181, 133, 60, 0.06) 0%,
    rgba(181, 133, 60, 0) 60%
  ); /* @kind other */

  /* Shadows — small and quiet (the broad directional casts of the parchment
     era made light mode feel heavy); the 1px ring does the separating. */
  --shadow-1:
    0 1px 3px rgba(11,17,32,0.10),
    0 0 0 1px rgba(11,17,32,0.07);
  --shadow-2:
    0 3px 8px rgba(11,17,32,0.12),
    0 0 0 1px rgba(11,17,32,0.07);
  --shadow-3:
    0 10px 28px rgba(11,17,32,0.16),
    0 0 0 1px rgba(11,17,32,0.08);
  /* Control depth + chrome edge cast — tuned for white */
  --shadow-control: 0 1px 2px rgba(11,17,32,0.14), inset 0 1px 0 rgba(255,255,255,0.75);
  --shadow-control-strong: 0 2px 4px rgba(11,17,32,0.18), inset 0 1px 0 rgba(255,255,255,0.35);
  --shadow-pressed: inset 0 1px 3px rgba(11,17,32,0.18);
  --edge-shadow-right: 5px 0 18px rgba(11,17,32,0.10);
  --edge-shadow-down: 0 5px 18px rgba(11,17,32,0.10);

  color-scheme: light;
}

/* Severity colors deepen slightly under light mode so they pass AA on white.
   They stay recognisable as the same hues. */
:root[data-theme="light"],
[data-theme="light"] {
  --sev-critical: #C7363B;
  --sev-critical-bg: rgba(199, 54, 59, 0.08);
  --sev-critical-border: rgba(199, 54, 59, 0.28);

  --sev-high: #C77A0F;
  --sev-high-bg: rgba(199, 122, 15, 0.08);
  --sev-high-border: rgba(199, 122, 15, 0.28);

  --sev-medium: #9C8530;
  --sev-medium-bg: rgba(156, 133, 48, 0.08);
  --sev-medium-border: rgba(156, 133, 48, 0.28);

  --sev-low: #2F6AB8;
  --sev-low-bg: rgba(47, 106, 184, 0.08);
  --sev-low-border: rgba(47, 106, 184, 0.28);

  --sev-info: #6B7488;
  --sev-info-bg: rgba(107, 116, 136, 0.08);
  --sev-info-border: rgba(107, 116, 136, 0.28);

  --sev-ok: #2F8C5C;
  --sev-ok-bg: rgba(47, 140, 92, 0.08);
  --sev-ok-border: rgba(47, 140, 92, 0.28);
}

/* =========================================================================
   SEMANTIC CSS variables — what you reach for in components
   ========================================================================= */
:root {
  /* Body */
  --color-bg: var(--bg-0);
  --color-surface: var(--bg-2);
  --color-text: var(--fg-1);
  --color-text-muted: var(--fg-2);
  --color-text-faint: var(--fg-3);
  --color-border: var(--border-subtle);
  --color-focus: var(--accent);
}

/* =========================================================================
   BASE element styles — minimal reset + sensible defaults
   ========================================================================= */
html {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-0);
  background-image: var(--vignette);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01", "ss03"; /* Geist's stylistic alts */
}

body {
  margin: 0;
}

/* Headings — type scale + tracking */
h1, .h1 {
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  margin: 0;
}
h2, .h2 {
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  margin: 0;
}
h3, .h3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  margin: 0;
}
h4, .h4 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-semibold);
  margin: 0;
}
h5, .h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: 0;
}
h6, .h6 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin: 0;
}

p {
  margin: 0;
}

/* Code & mono */
code, kbd, samp, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  font-feature-settings: "ss01", "ss02", "zero";
}

code {
  padding: 1px 6px;
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--fg-1);
}

pre {
  font-size: var(--text-sm);
  padding: var(--space-5);
  background: var(--bg-inset);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  line-height: var(--leading-relaxed);
}

/* Big numbers — the signature metric type */
.metric {
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  font-feature-settings: "tnum", "lnum", "cv11";
  font-variant-numeric: tabular-nums;
}

/* Eyebrow / overline */
.eyebrow {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Brand mark theme pair (BrandMark with no explicit variant): blue metal on
   dark surfaces, gold metal on cream — exactly one visible per theme. */
.bm-light { display: none !important; }
[data-theme="light"] .bm-light { display: block !important; }
[data-theme="light"] .bm-dark { display: none !important; }

/* Helpers */
.tabular { font-variant-numeric: tabular-nums; }
.muted   { color: var(--fg-2); }
.faint   { color: var(--fg-3); }

/* Selection */
::selection {
  background: var(--accent);
  color: var(--accent-fg);
}

/* Focus ring — global, never invisible */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scrollbar — thin, on-brand */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-default);
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; border: 2px solid transparent; }

/* =========================================================================
   COMPAT ALIASES — legacy Valkan token names resolved onto Valkan tokens.
   Lets all pre-redesign CSS and inline var() styles render correctly while
   pages migrate. Pruned as consumers move to the real token names.
   ========================================================================= */
:root {
  /* Surfaces */
  --bg: var(--bg-0);
  --surface: var(--bg-2);
  --surface-2: var(--bg-1);
  --surface-3: var(--bg-inset);
  --hover: var(--bg-3);

  /* Borders */
  --border: var(--border-subtle);
  --border-soft: var(--border-subtle);

  /* Text */
  --fg: var(--fg-1);
  /* Text on saturated colored fills (provider chips, solid pills) — stays
     white in both themes; the fills themselves don't change with the theme. */
  --fg-on-color: #ffffff;

  /* Brand */
  --accent-2: var(--accent-hover);
  --accent-soft: var(--accent-bg);
  --accent-ring: var(--accent-border);

  /* Risk → severity */
  --risk-critical: var(--sev-critical);
  --risk-critical-bg: var(--sev-critical-bg);
  --risk-high: var(--sev-high);
  --risk-high-bg: var(--sev-high-bg);
  --risk-medium: var(--sev-medium);
  --risk-medium-bg: var(--sev-medium-bg);
  --risk-low: var(--sev-low);
  --risk-low-bg: var(--sev-low-bg);
  --risk-info: var(--sev-info);
  --risk-info-bg: var(--sev-info-bg);

  /* Radii + shadows */
  --r-sm: var(--radius-md);
  --r: var(--radius-lg);
  --r-lg: var(--radius-lg);
  --shadow-sm: var(--shadow-control);
  --shadow: var(--shadow-1);
  --shadow-lg: var(--shadow-2);
}

/* =========================================================================
   VALKAN chrome — app shell, sidebar, subhead, cmd-k, agent panel.
   Ported from the design system's ui_kits/console/app.css (token-only).
   Loaded via styles.css @import, BEFORE the legacy rules — a legacy rule of
   equal specificity therefore wins until it is deleted; shell classes here
   have no legacy counterpart left (pruned in the same change).
   ========================================================================= */

html, body, #root { height: 100%; }
body { margin: 0; overflow: hidden; }

@property --sidebar-w {
  syntax: '<length>';
  inherits: true;
  initial-value: 220px;
}
@property --panel-w {
  syntax: '<length>';
  inherits: true;
  initial-value: 400px;
}

.app {
  --sidebar-w: 220px;
  --panel-w: 400px;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: 1fr;
  height: 100vh;
  color: var(--fg-2);
  background: var(--bg-0);
  background-image: radial-gradient(120% 140% at 15% -10%, var(--bg-1) 0%, var(--bg-0) 55%, var(--bg-deep, #040509) 100%);
  transition: grid-template-columns var(--dur-slow) var(--ease-out);
  position: relative;
}
/* Subtle film-grain for organic depth — CSS only, applies everywhere .app renders */
.app::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 500; opacity: 0.025; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.app[data-sidebar="collapsed"] { --sidebar-w: 64px; }
.app[data-panel="pinned"] {
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--panel-w);
}


/* ===== SUB-HEADER — breadcrumb + ⌘K, living inside <main> so it scrolls
   with the page. No background, no border: it sits directly on the app's
   background gradient, matching the redesign's "part of the background"
   direction. ===== */
.subhead {
  display: flex; align-items: center; gap: 16px;
  height: 40px; flex-shrink: 0; margin-bottom: 8px;
}
.subhead .tenant-name { color: var(--fg-1); font-weight: var(--weight-medium); }

.crumbs { display: flex; align-items: center; gap: 8px; color: var(--fg-3); font-size: var(--text-sm); white-space: nowrap; flex-shrink: 0; }
.crumbs .sep { color: var(--fg-4); }
.crumbs .cur { color: var(--fg-1); font-weight: var(--weight-medium); }
/* 42M-407 pass 3: the parent-of-entity segment, now a real control — same
   typography as a plain crumb span at rest, interactive on hover/focus. */
.crumb-back {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
.crumb-back:hover { color: var(--accent); }
.crumb-back:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; color: var(--accent);
}

.spacer { flex: 1; }

/* Collapsed to icon-only, same 28×28 .iconbtn footprint as the theme toggle
   (user call — always, not just below the 980px breakpoint). .cmdk-btn no
   longer carries its own size/shape; .iconbtn supplies all of that now. */
.cmdk-btn { flex-shrink: 0; }

/* Top-right global chrome cluster (42M-407 pass 2 §2) — scan-freshness pill,
   theme toggle, AI trigger, user avatar, outermost-to-innermost as content
   gets more page-specific. */
.subhead-chrome { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.subhead-theme { flex-shrink: 0; }
.user-menu-trigger { padding: 0; border: 1px solid transparent; }
.user-menu-trigger .avatar { width: 26px; height: 26px; font-size: 11px; }

/* ScanFreshnessPill's real base rule lives in styles.css (a file one level
   up from this styles/ directory — my first pass here missed it entirely
   and added a second, conflicting `.scan-pill` rule that fought the
   original for the height/margin the pill actually renders with; removed —
   styles.css:533 is the one definition now, with its margin dropped since
   `.subhead-chrome`'s own `gap` handles spacing in this new horizontal
   context). Only the compact-width override belongs here. */

.iconbtn.is-active { background: var(--accent-bg); color: var(--accent); border-color: var(--accent-border); }

.iconbtn {
  width: 28px; height: 28px; border-radius: var(--radius-md);
  background: transparent; border: 1px solid transparent;
  color: var(--fg-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.iconbtn:hover { background: var(--bg-3); color: var(--fg-1); border-color: var(--border-subtle); }

/* Details tab body — sits inside the agent panel; gives whatever inline
   detail markup (side-row key/value lists etc.) a consistent, sophisticated
   frame instead of looking like loose rows dropped in a plain scroll box. */
.ap-object-metadata { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; }
/* Reused detail components (GraphNodePanel, AgentDetail, …) lay out in
   .detail-grid's two columns above a 1180px *viewport* media query — but the
   panel itself is ~380-460px regardless of viewport width, so that query
   never fires here. Force single-column whenever detail-grid nests inside
   the panel. */
.ap-object-metadata .detail-grid { grid-template-columns: minmax(0, 1fr); }
.ap-object-metadata .side-row { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: var(--text-sm); }
[data-theme="light"] .ap-object-metadata .side-row { border-bottom-color: rgba(10,20,40,0.08); }
.ap-object-metadata .side-row:last-child { border-bottom: 0; }
.ap-object-metadata .side-row .k { color: var(--fg-3); font-size: 12px; }
.ap-object-metadata .side-row .v { color: var(--fg-1); font-weight: var(--weight-medium); }
.ap-object-metadata .inspector.embedded .head { padding: 0 0 16px; border-bottom: 1px solid rgba(255,255,255,0.06); margin-bottom: 16px; }
[data-theme="light"] .ap-object-metadata .inspector.embedded .head { border-bottom-color: rgba(10,20,40,0.08); }
.ap-object-metadata .inspector.embedded .body { padding: 0; gap: 20px; }
.ap-object-metadata .inspector.embedded .actions { padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px; }
[data-theme="light"] .ap-object-metadata .inspector.embedded .actions { border-top-color: rgba(10,20,40,0.08); }
.ap-object-metadata-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ap-object-metadata-avatar {
  width: 42px; height: 42px; border-radius: var(--radius-md); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: rgba(0,0,0,0.72); font-weight: var(--weight-semibold); font-size: 16px;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.4);
}
.ap-object-metadata-name { font-size: 15px; font-weight: var(--weight-semibold); color: var(--fg-1); letter-spacing: var(--tracking-tight); }
.ap-object-metadata-sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.ap-object-metadata-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.ap-object-metadata .fd-decision-card {
  margin: 14px 0 12px; padding: 12px;
  border: 1px solid var(--accent-border); border-radius: var(--radius-md);
  background: var(--accent-soft);
}
.ap-object-metadata .fd-decision-title { color: var(--fg-1); font-size: 13px; font-weight: var(--weight-semibold); }
.ap-object-metadata .fd-decision-card p { margin: 4px 0 10px; color: var(--fg-2); font-size: 12px; line-height: 1.45; }
.ap-object-metadata .fd-actions-row { display: flex; gap: 8px; flex-wrap: wrap; }
.ap-object-metadata .fd-decision-evidence { display: grid; gap: 12px; margin: 14px 2px 4px; }
.ap-object-metadata .fd-summary-item { display: grid; gap: 4px; }
.ap-object-metadata .fd-summary-item .fd-detail-text { margin: 0; }
.ap-object-metadata .fd-affected-entity { display: grid; gap: 6px; }
.ap-object-metadata .fd-affected-entity .fd-section-title { margin: 0; }
.ap-object-metadata .fd-last-observed { font-size: 12px; }
.ap-object-metadata .fd-verification-status {
  align-items: center; display: flex; gap: 8px; margin-top: 10px;
  color: var(--fg-2); font-size: 12px; line-height: 1.4;
}
.ap-object-metadata .fd-verification-status .spinner { flex: 0 0 auto; height: 13px; width: 13px; }
.ap-object-metadata .fd-verification-status.error { color: var(--risk-critical); }
.ap-object-metadata .fd-entity-chip {
  align-items: center; align-self: start; display: inline-flex; gap: 6px; max-width: 100%;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2);
  color: var(--fg-2); font: inherit; font-size: 12px; padding: 5px 9px;
}
.ap-object-metadata button.fd-entity-chip { cursor: pointer; }
.ap-object-metadata button.fd-entity-chip:hover { border-color: var(--accent-border); color: var(--fg-1); }
.ap-object-metadata .fd-entity-open { align-items: center; display: inline-flex; gap: 4px; color: var(--accent-2); margin-left: 2px; white-space: nowrap; }
.ap-object-metadata .fd-entity-open svg { width: 12px; height: 12px; }
.ap-section-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-4); margin: 18px 0 4px;
}
.ap-section-label:first-of-type { margin-top: 6px; }
.ap-object-metadata-headtext { min-width: 0; }
.ap-object-metadata-headtext .ap-object-metadata-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Accordion — used for any Object-tab content with more than a flat kv list
   (graph edges, escalations, related items). Never a nested tab row. */
.ap-accordion { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 4px; }
[data-theme="light"] .ap-accordion { border-top-color: rgba(10,20,40,0.08); }
.ap-accordion:first-of-type { margin-top: 14px; }
.ap-accordion-head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: transparent; border: 0; padding: 12px 2px; cursor: pointer;
  color: var(--fg-1); font-size: 12.5px; font-weight: var(--weight-medium); text-align: left;
  font-family: inherit;
}
.ap-accordion-chev { color: var(--fg-4); flex-shrink: 0; transition: transform 160ms var(--ease-out); }
.ap-accordion-chev.open { transform: rotate(90deg); }
.ap-accordion-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-4);
  background: rgba(255,255,255,0.05); border-radius: 999px; padding: 1px 7px;
}
.ap-accordion-body { padding: 0 2px 12px 21px; display: flex; flex-direction: column; gap: 8px; }

.edge-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-md);
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
}
[data-theme="light"] .edge-row { background: rgba(10,20,40,0.02); border-color: rgba(10,20,40,0.06); }
.edge-row-path { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; color: var(--fg-2); }
.edge-row-path span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edge-row-arrow { color: var(--fg-4); flex-shrink: 0; }
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px; margin-right: 5px;
  background: var(--sev-ok); box-shadow: 0 0 0 0 rgba(91,185,140,0.6);
  animation: pulse-ok 1.8s ease-out infinite;
}

.avatar {
  width: 26px; height: 26px; border-radius: 999px;
  background: linear-gradient(155deg, var(--accent-hover), var(--accent-press));
  color: var(--accent-fg); font-size: 11px; font-weight: var(--weight-semibold);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px -3px var(--accent-border);
}

/* ===== SIDEBAR — glass panel, matches the redesign's translucent gradient ===== */
.sidebar {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border-right: 1px solid rgba(255,255,255,0.06);
  position: relative; z-index: 1;
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto;
}
[data-theme="light"] .sidebar {
  background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
  border-right-color: rgba(10,20,40,0.1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 32px -24px rgba(10,20,40,0.16);
}
.nav-brand {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 16px; color: var(--fg-1); font-weight: var(--weight-semibold);
  font-size: var(--text-md); letter-spacing: var(--tracking-tight); white-space: nowrap; overflow: hidden;
}
.nav-brand img { flex-shrink: 0; }
.nav-brand span {
  overflow: hidden; text-overflow: ellipsis; max-width: 160px; opacity: 1;
  transition: max-width var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out), margin-left var(--dur-slow) var(--ease-out);
}
.app[data-sidebar="collapsed"] .nav-brand span { max-width: 0; opacity: 0; }
.sb-footer .nav-item .avatar {
  width: 18px; height: 18px; font-size: 9px; flex-shrink: 0;
}
.sidebar .sec {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-4); padding: 0 10px;
  height: 32px; display: flex; align-items: center;
  position: relative;
}
.sidebar .nav-item {
  display: flex; align-items: center;
  padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--fg-2); font-size: var(--text-sm); cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.sidebar button.nav-item { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; }
.sidebar .nav-item > svg { flex-shrink: 0; }
.sidebar .nav-item > span:not(.count):not(.avatar) {
  overflow: hidden; text-overflow: ellipsis;
  margin-left: 10px; max-width: 160px; opacity: 1;
  transition: max-width var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out), margin-left var(--dur-slow) var(--ease-out);
}
.sidebar .nav-item:hover { background: var(--bg-2); color: var(--fg-1); }
.sidebar .nav-item.active {
  background-image: linear-gradient(120deg, rgba(212,169,92,0.14), rgba(212,169,92,0.02) 65%);
  color: var(--fg-1);
}
.sidebar .nav-item .count {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  color: var(--accent); background: var(--accent-bg);
  border: 1px solid var(--accent-border); border-radius: 999px;
  padding: 1px 6px;
}

/* Contextual sections — collapsed header row by default; expands to its own
   sub-items only when active, collapsing any other open section. */
.nav-section-head {
  position: relative; font-weight: var(--weight-medium);
}
.nav-section-head .disclosure {
  margin-left: auto; color: var(--fg-4); flex-shrink: 0;
  max-width: 13px; opacity: 1; overflow: hidden;
  transition: max-width var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.nav-section-head.active {
  background-image: linear-gradient(120deg, rgba(212,169,92,0.14), rgba(212,169,92,0.02) 65%);
  color: var(--fg-1);
  border: 1px solid var(--accent-border);
}
.nav-section-head.active .disclosure { color: var(--accent); }
.nav-section-items {
  display: flex; flex-direction: column; gap: 1px;
  padding: 4px; margin: 2px 2px 6px;
  background: rgba(255,255,255,0.015);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: var(--radius-md);
}
[data-theme="light"] .nav-section-items { background: rgba(10,20,40,0.02); border-color: rgba(10,20,40,0.06); }
.sidebar .nav-item.nav-subitem { padding-left: 42px; position: relative; }
.nav-subitem > svg { width: 14px; height: 14px; }
.nav-subitem::before {
  content: ""; position: absolute; left: 26px; top: 0; bottom: 0;
  width: 1px; background: var(--border-subtle);
}
.nav-subitem.active {
  background-image: linear-gradient(120deg, rgba(212,169,92,0.14), rgba(212,169,92,0.02) 65%);
  color: var(--fg-1);
}
.nav-subitem.active::before { background: var(--accent-border); }
.sidebar .sb-footer {
  margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 2px;
}

/* Collapse toggle pinned to footer */
.sidebar .collapse-toggle {
  display: flex; align-items: center;
  padding: 6px 10px; border-radius: var(--radius-sm);
  color: var(--fg-3); font-size: var(--text-sm); cursor: pointer;
  background: transparent; border: 0; font-family: inherit; width: 100%;
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.sidebar .collapse-toggle > svg { flex-shrink: 0; }
.sidebar .collapse-toggle > span:not(.chev) {
  overflow: hidden; text-overflow: ellipsis;
  margin-left: 10px; max-width: 160px; opacity: 1;
  transition: max-width var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out), margin-left var(--dur-slow) var(--ease-out);
}
.sidebar .collapse-toggle:hover { background: var(--bg-2); color: var(--fg-1); }
.sidebar .collapse-toggle .chev { transition: transform var(--dur-slow) var(--ease-out); }

/* ===== COLLAPSED SIDEBAR (icons only) — icons keep identical size/position
   to expanded; only the label text collapses away (width+opacity), so
   nothing visually jitters or shifts during the transition. */
.app[data-sidebar="collapsed"] .sidebar .nav-item > span:not(.count):not(.avatar) {
  max-width: 0; opacity: 0; margin-left: 0;
}
.app[data-sidebar="collapsed"] .sidebar .sec {
  color: transparent; font-size: 0;
}
.app[data-sidebar="collapsed"] .sidebar .sec::after {
  content: ""; position: absolute; left: 8px; right: 8px; top: 50%;
  height: 1px; background: var(--border-subtle); transform: translateY(-50%);
}
.app[data-sidebar="collapsed"] .sidebar .nav-item .count {
  position: absolute; top: 2px; right: 4px; margin: 0;
  min-width: 0; padding: 0 4px; font-size: 9px; line-height: 14px;
}
.app[data-sidebar="collapsed"] .sidebar .nav-subitem::before { display: none; }
.app[data-sidebar="collapsed"] .sidebar .nav-item.nav-subitem {
  padding-left: 0; padding-right: 0; justify-content: center;
}
.app[data-sidebar="collapsed"] .sidebar .nav-section-head .disclosure { max-width: 0; opacity: 0; }
.app[data-sidebar="collapsed"] .sidebar .nav-section-items { display: flex; }
.app[data-sidebar="collapsed"] .sidebar .nav-section-head.active { background-image: linear-gradient(120deg, rgba(212,169,92,0.2), rgba(212,169,92,0.05) 70%); }
.app[data-sidebar="collapsed"] .sidebar .collapse-toggle { padding-left: 10px; }
.app[data-sidebar="collapsed"] .sidebar .collapse-toggle > span:not(.chev) {
  max-width: 0; opacity: 0; margin-left: 0;
}
.app[data-sidebar="collapsed"] .sidebar .collapse-toggle .chev { transform: rotate(180deg); }

/* Sidebar collapses width only; sub-header wraps naturally on narrow screens. */
/* Keep only the current segment — separators must hide with their spans or
   the crumbs render as orphaned "/ /" glyphs. */
@media (max-width: 980px)  { .subhead .crumbs span:not(.cur) { display: none; } }

/* Top-right cluster compression (42M-407 pass 2 §2) — collapsed onto the
   existing 980px breakpoint rather than inventing several new ones:
   - scan-freshness pill: label+age text hides, bare status dot remains
     (ScanFreshnessPill's aria-label AND title carry the full state
     regardless — see that component).
   - AI trigger is icon-only unconditionally now (user call), not part of
     this compression.
   - theme toggle: the top-right icon hides; UserMenu's own theme row
     becomes the only way to reach it. Base (shown) state declared
     immediately above `@media` — see that rule's comment for why source
     order between the two matters here. */
.user-menu-theme-row { display: none; }
@media (max-width: 980px) {
  .scan-pill .lbl, .scan-pill .age { display: none; }
  .subhead-theme { display: none; }
  .user-menu-theme-row { display: flex; }
}

/* ===== CONTENT ===== */
.content {
  overflow-y: auto;
  padding: 24px 28px 56px;
  container: content / inline-size;
}

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.page-head .titles { display: flex; flex-direction: column; gap: 4px; }
.page-head .title { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.page-head .sub { color: var(--fg-2); font-size: var(--text-sm); }
.page-head .actions { display: flex; gap: 8px; }

@keyframes slidein {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* ===== Cmd-K palette ===== */
.scrim {
  position: fixed; inset: 0; background: var(--bg-overlay);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: var(--z-modal-scrim);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 14vh;
  animation: fade var(--dur-base) var(--ease-out);
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
  width: 560px; max-width: 92vw;
  background: linear-gradient(160deg, color-mix(in oklab, var(--fg-1) 4%, var(--bg-2)), var(--bg-2));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3);
  overflow: hidden;
  backdrop-filter: blur(24px) saturate(160%);
}
.cmdk .ipt {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-3);
}
.cmdk .ipt input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--fg-1); font: inherit; font-size: var(--text-md);
}
.cmdk .ipt input::placeholder { color: var(--fg-3); }
.cmdk .grp { padding: 8px 0; }
.cmdk .grp .head { padding: 4px 18px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.cmdk .item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; color: var(--fg-1); font-size: var(--text-sm); cursor: pointer;
}
.cmdk .item:hover, .cmdk .item.sel { background: var(--bg-3); }
.cmdk .item .ic-l { color: var(--fg-3); }
.cmdk .item .right { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
.cmdk .ftr {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 18px; border-top: 1px solid var(--border-subtle);
  font-size: 10px; color: var(--fg-3); font-family: var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

@keyframes pulse-ok {
  0% { box-shadow: 0 0 0 0 rgba(91,185,140,0.6); }
  100% { box-shadow: 0 0 0 8px rgba(91,185,140,0); }
}

/* =========================================================================
   AGENT PANEL — right side, Assistant + Help tabs, pin or float
   ========================================================================= */
.agent-panel {
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255,255,255,0.08);
  min-height: 0;
  overflow: hidden;
}
[data-theme="light"] .agent-panel {
  background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
  border-left-color: rgba(10,20,40,0.1);
}
.agent-panel.pinned {
  grid-column: 3; grid-row: 1;
  border-left-color: var(--accent-border);
}
.agent-panel.floating {
  position: fixed; top: 0; right: 0; bottom: 0;
  /* Clamp to the viewport: a flat 400px panel is WIDER than a 390px phone, so it used to run
     off-screen and take its own close button with it. */
  width: min(var(--panel-w), 100vw);
  box-shadow: -30px 0 60px -20px rgba(0,0,0,0.5);
  z-index: var(--z-modal);
  animation: slidein var(--dur-slow) var(--ease-out);
}
[data-theme="light"] .agent-panel.floating { box-shadow: -20px 0 50px -20px rgba(10,20,40,0.2); }

/* Scrim behind the floating (unpinned) panel — darkens + softly blurs the
   rest of the screen, matching the redesign's .rx-panel-scrim. */
.panel-scrim {
  position: fixed; top: 0; left: 0; right: var(--panel-w); bottom: 0;
  background: rgba(4,5,9,0.35); backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease-out);
  z-index: calc(var(--z-modal) - 1);
}
.panel-scrim.open { opacity: 1; pointer-events: auto; }
[data-theme="light"] .panel-scrim { background: rgba(20,25,35,0.14); }

.scrim-band {
  position: fixed; background: rgba(4,5,9,0.35); backdrop-filter: blur(2px);
  z-index: calc(var(--z-modal) - 1); cursor: pointer;
}
[data-theme="light"] .scrim-band { background: rgba(20,25,35,0.14); }

/* Header: segmented tab control + actions — matches the sophisticated
   redesign's panel chrome instead of a flat icon-bar. */
.ap-head {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 8px;
  flex-shrink: 0;
}
.ap-tabs {
  display: flex; gap: 2px; flex: 1; min-width: 0;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md); padding: 3px;
}
[data-theme="light"] .ap-tabs { background: rgba(10,20,40,0.03); border-color: rgba(10,20,40,0.08); }
.ap-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 28px; padding: 0 10px; border-radius: calc(var(--radius-md) - 2px);
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg-3); font-family: inherit; font-size: 12.5px; font-weight: var(--weight-medium);
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
  max-width: 140px; min-width: 0; flex: 1;
}
.ap-tab .ap-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ap-tab:hover { color: var(--fg-1); }
.ap-tab.active {
  color: var(--fg-1);
  background-color: rgba(255,255,255,0.07);
  background-image: linear-gradient(160deg, rgba(255,255,255,0.05), transparent);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 10px -6px rgba(0,0,0,0.4);
}
[data-theme="light"] .ap-tab.active {
  background-color: rgba(255,255,255,0.85);
  background-image: none;
  box-shadow: 0 1px 3px rgba(10,20,40,0.12);
}
.ap-tab.active .ap-tab-ic { color: var(--accent); }
.ap-actions { display: flex; align-items: center; gap: 2px; }

/* ----- Assistant (chat) ----- */
.chat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.chat-scroll {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 18px;
}

.msg { display: flex; flex-direction: column; gap: 6px; max-width: 100%; }
.msg.user {
  align-self: flex-end; align-items: flex-end;
  max-width: 86%;
}
.msg.user .bubble {
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  color: var(--fg-1); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-xs) var(--radius-lg);
  padding: 9px 12px; font-size: var(--text-sm); line-height: var(--leading-normal);
}
.msg.agent { align-self: stretch; }
.msg .who { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.agent-av {
  width: 22px; height: 22px; border-radius: var(--radius-sm);
  background: var(--bg-3); border: 1px solid var(--border-default);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-1); flex-shrink: 0;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.35);
}
.msg .who .nm { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--fg-1); }
.msg .who .nm .tag { color: var(--accent); font-family: var(--font-mono); font-size: 10px; font-weight: var(--weight-medium); margin-left: 6px; letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.msg.agent .bubble {
  color: var(--fg-1); font-size: var(--text-sm); line-height: var(--leading-relaxed);
  padding-left: 30px;
}
.msg.agent .bubble p { margin: 0 0 8px; }
.msg.agent .bubble p:last-child { margin-bottom: 0; }
.msg.agent .bubble code { background: var(--bg-inset); border-color: var(--border-subtle); }

/* Inline incident refs inside agent answers */
.ref-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; }
.ref {
  display: grid; grid-template-columns: 8px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px; border-radius: var(--radius-md);
  background: var(--bg-2); border: 1px solid color-mix(in oklab, var(--border-subtle) 55%, transparent);
  cursor: pointer; text-align: left; font-family: inherit;
  position: relative; overflow: hidden;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.ref::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(160px circle at var(--mx,50%) var(--my,50%), var(--accent-bg), transparent 70%);
  transition: opacity 200ms var(--ease-out);
}
.ref:hover::after { opacity: 1; }
.ref:hover { background: var(--bg-3); border-color: var(--border-default); }
.ref .dot { width: 8px; height: 8px; border-radius: 999px; }
.ref.crit .dot { background: var(--sev-critical); }
.ref.high .dot { background: var(--sev-high); }
.ref.med .dot { background: var(--sev-medium); }
.ref.low .dot { background: var(--sev-low); }
.ref .r-title { font-size: var(--text-xs); color: var(--fg-1); font-weight: var(--weight-medium); }
.ref .r-id { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }

.msg-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 30px; margin-top: 2px; }

/* Thinking indicator */
.thinking { display: flex; align-items: center; gap: 6px; padding-left: 30px; color: var(--fg-3); }
.thinking .d { width: 5px; height: 5px; border-radius: 999px; background: var(--fg-3); animation: blink 1.2s ease-in-out infinite; }
.thinking .d:nth-child(2) { animation-delay: 0.2s; }
.thinking .d:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 1; } }

/* Empty greeting + suggestions */
.chat-empty { display: flex; flex-direction: column; gap: 14px; padding: 8px 2px; }
.chat-empty .greet { display: flex; flex-direction: column; gap: 8px; }
.chat-empty .greet .gtitle { font-size: var(--text-lg); color: var(--fg-1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); }
.chat-empty .greet .gsub { font-size: var(--text-sm); color: var(--fg-2); line-height: var(--leading-relaxed); }
.suggest { display: flex; flex-direction: column; gap: 6px; }
.suggest .slabel { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); margin-bottom: 2px; }
.chip-btn {
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 9px 11px; border-radius: var(--radius-md);
  background: var(--bg-2); border: 1px solid color-mix(in oklab, var(--border-subtle) 55%, transparent);
  color: var(--fg-1); font-family: inherit; font-size: var(--text-sm); cursor: pointer;
  position: relative; overflow: hidden;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.chip-btn::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(160px circle at var(--mx,50%) var(--my,50%), var(--accent-bg), transparent 70%);
  transition: opacity 200ms var(--ease-out);
}
.chip-btn:hover::after { opacity: 1; }
.chip-btn:hover { background: var(--bg-3); border-color: var(--border-default); }
.chip-btn .ci { color: var(--accent); flex-shrink: 0; }

/* Composer */
.composer {
  flex-shrink: 0; border-top: 1px solid var(--border-subtle);
  padding: 12px; background: var(--bg-1);
}
.composer-box {
  display: flex; align-items: flex-end; gap: 8px;
  background: linear-gradient(160deg, color-mix(in oklab, var(--fg-1) 3%, var(--bg-2)), var(--bg-2)); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: 8px 8px 8px 12px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.composer-box:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.composer-box textarea {
  flex: 1; resize: none; border: 0; outline: none; background: transparent;
  color: var(--fg-1); font: inherit; font-size: var(--text-sm); line-height: var(--leading-normal);
  max-height: 120px; min-height: 20px; padding: 1px 0;
}
.composer-box textarea::placeholder { color: var(--fg-3); }
.send-btn {
  width: 30px; height: 30px; border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-fg); border: 0;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  flex-shrink: 0; transition: background var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.send-btn:hover { background: var(--accent-hover); }
.send-btn:disabled { opacity: 0.4; cursor: default; }
.composer .hint { margin-top: 6px; font-size: 10px; color: var(--fg-4); font-family: var(--font-mono); letter-spacing: var(--tracking-wide); text-align: center; }

/* ----- Help ----- */
.help { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 18px 32px; }
.help .ctx {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--accent); background: var(--accent-bg); border: 1px solid var(--accent-border);
  padding: 3px 8px; border-radius: var(--radius-pill); margin-bottom: 14px;
}
.help h3 { font-size: var(--text-xl); color: var(--fg-1); letter-spacing: var(--tracking-tight); font-weight: var(--weight-semibold); margin-bottom: 6px; }
.help .lead { font-size: var(--text-sm); color: var(--fg-2); line-height: var(--leading-relaxed); margin-bottom: 18px; }
.help .h-sec { padding: 14px 0; border-top: 1px solid var(--border-subtle); }
.help .h-sec h4 { font-size: var(--text-sm); color: var(--fg-1); font-weight: var(--weight-semibold); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.help .h-sec h4 .hi { color: var(--fg-3); }
.help .h-sec p { font-size: var(--text-sm); color: var(--fg-2); line-height: var(--leading-relaxed); margin-bottom: 8px; }
.help .h-sec p:last-child { margin-bottom: 0; }
.help ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.help li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: var(--text-sm); color: var(--fg-2); line-height: var(--leading-normal); }
.help li .li-ic { color: var(--accent); margin-top: 2px; }
.help li code { background: var(--bg-inset); border-color: var(--border-subtle); color: var(--fg-1); }
.help .kbd-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; font-size: var(--text-sm); color: var(--fg-2); }
.help .kbd-row .keys { display: flex; gap: 4px; }
.help .kbd-row .keys .k { font-family: var(--font-mono); font-size: 10px; color: var(--fg-2); background: var(--bg-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-xs); padding: 2px 6px; }
.help .ask-cta {
  margin-top: 18px; padding: 14px; border-radius: var(--radius-lg);
  background: var(--bg-2); border: 1px solid var(--border-subtle);
}
.help .ask-cta .t { font-size: var(--text-sm); color: var(--fg-1); font-weight: var(--weight-medium); margin-bottom: 4px; }
.help .ask-cta .s { font-size: var(--text-xs); color: var(--fg-3); margin-bottom: 10px; line-height: var(--leading-relaxed); }


/* ===== Valkan adaptations ===================================================
   Pages still carry their own .page padding/max-width; the subhead aligns to
   the same content column instead of .content owning the padding (that flips
   in the per-page restyle waves). */
.content { padding: 0; }
.subhead {
  max-width: 1640px; margin: 0 auto; width: 100%;
  padding: 12px 24px 0;
}

/* Reduced motion: no shell/panel animation, no spotlight glow, no pulses. */
@media (prefers-reduced-motion: reduce) {
  .app { transition: none; }
  .agent-panel.floating { animation: none; }
  .scrim { animation: none; }
  .panel-scrim { transition: none; }
  .live-dot { animation: none; box-shadow: none; }
  .thinking .d { animation: none; opacity: 0.6; }
  .ref::after, .chip-btn::after { display: none; }
}

/* =========================================================================
   VALKAN components — glass cards, feed rows, inspector, tables, tabs,
   toolbar, toggle, severity badges, buttons, chips (design app.css port).
   ========================================================================= */

/* ===== METRIC CARDS — glass, spotlight-reactive (see .rx-spotlight-hook in
   components.jsx, which sets --mx/--my via delegated mousemove) ===== */
.metric-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px;
  margin-bottom: 24px;
}
.metric-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg); padding: 16px 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -28px rgba(0,0,0,0.6);
  display: flex; flex-direction: column; gap: 6px;
  min-height: 132px; position: relative; overflow: hidden;
  cursor: pointer; transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.metric-card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), var(--accent-bg), transparent 70%);
  transition: opacity 200ms var(--ease-out);
}
.metric-card:hover::after { opacity: 1; }
.metric-card:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); transform: translateY(-1px); }
.metric-card.is-active { border-color: var(--accent-border); background: var(--accent-bg); box-shadow: var(--shadow-control); }
.metric-card .eyb { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.metric-card .val { font-size: 40px; font-weight: var(--weight-semibold); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; line-height: 1; color: var(--fg-1); }
.metric-card .val .unit { font-size: 16px; color: var(--fg-3); font-weight: 400; margin-left: 4px; letter-spacing: 0; }
.metric-card .delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-family: var(--font-mono); }
.metric-card .delta.up { color: var(--sev-ok); }
.metric-card .delta.warn { color: var(--sev-high); }
.metric-card .spark { margin-top: auto; height: 36px; }

/* ===== TWO COL ===== */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; }

/* Responsive: as the content area narrows (side panels open, or small screens),
   drop the metric grid to fewer columns and stack the two-column layout. */
@container content (max-width: 900px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-col { grid-template-columns: minmax(0, 1fr); }
}
@container content (max-width: 460px) {
  .metric-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== INCIDENT FEED ===== */
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.section-head .h { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--fg-1); letter-spacing: var(--tracking-tight); }
.section-head .actions { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--fg-3); }

.feed { display: flex; flex-direction: column; gap: 8px; }
.inc-row {
  display: grid;
  grid-template-columns: 14px auto minmax(0, 1fr) auto auto;
  grid-template-areas: "dot sev title stat when";
  gap: 4px 12px; align-items: center;
  background-color: transparent;
  background-image:
    linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01)),
    radial-gradient(72% 60% at 0% 0%, var(--rail-tint, transparent), transparent 52%),
    radial-gradient(200px circle at var(--mx,50%) var(--my,50%), var(--accent-bg), transparent 70%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md); padding: 12px 14px;
  position: relative; overflow: hidden;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -28px rgba(0,0,0,0.6);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
[data-theme="light"] .inc-row {
  background-image:
    linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3)),
    radial-gradient(72% 60% at 0% 0%, var(--rail-tint, transparent), transparent 52%),
    radial-gradient(200px circle at var(--mx,50%) var(--my,50%), var(--accent-bg), transparent 70%);
  border-color: rgba(10,20,40,0.1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 32px -24px rgba(10,20,40,0.16);
}
.inc-row > .dot  { grid-area: dot; }
.inc-row > .sev  { grid-area: sev; }
.inc-row > div   { grid-area: title; min-width: 0; }
.inc-row > .stat { grid-area: stat; }
.inc-row > .when { grid-area: when; }
.inc-row:hover { background-color: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); transform: translateY(-1px); }
.inc-row.selected { background-color: rgba(255,255,255,0.03); border-color: var(--accent-border); }
[data-theme="light"] .inc-row:hover { background-color: rgba(255,255,255,0.5); border-color: rgba(10,20,40,0.14); }
[data-theme="light"] .inc-row.selected { background-color: rgba(255,255,255,0.5); }
.inc-row.crit { --rail-tint: color-mix(in oklab, var(--sev-critical) 22%, transparent); }
.inc-row.high { --rail-tint: color-mix(in oklab, var(--sev-high) 22%, transparent); }
.inc-row.med  { --rail-tint: color-mix(in oklab, var(--sev-medium) 22%, transparent); }
.inc-row.low  { --rail-tint: color-mix(in oklab, var(--sev-low) 20%, transparent); }
.inc-row.ok   { --rail-tint: color-mix(in oklab, var(--sev-ok) 20%, transparent); }
[data-theme="light"] .inc-row.crit { --rail-tint: color-mix(in oklab, var(--sev-critical) 30%, transparent); }
[data-theme="light"] .inc-row.high { --rail-tint: color-mix(in oklab, var(--sev-high) 32%, transparent); }
[data-theme="light"] .inc-row.med  { --rail-tint: color-mix(in oklab, var(--sev-medium) 30%, transparent); }
[data-theme="light"] .inc-row.low  { --rail-tint: color-mix(in oklab, var(--sev-low) 28%, transparent); }
[data-theme="light"] .inc-row.ok   { --rail-tint: color-mix(in oklab, var(--sev-ok) 26%, transparent); }
.inc-row .dot { width: 8px; height: 8px; border-radius: 999px; }
.inc-row.crit .dot { background: var(--sev-critical); box-shadow: 0 0 0 0 rgba(229,72,77,0.5); animation: pulse-crit 1.8s ease-out infinite; }
.inc-row.high .dot { background: var(--sev-high); }
.inc-row.med .dot  { background: var(--sev-medium); }
.inc-row.low .dot  { background: var(--sev-low); }
.inc-row.ok .dot   { background: var(--sev-ok); }
@keyframes pulse-crit {
  0% { box-shadow: 0 0 0 0 rgba(229,72,77,0.5); }
  100% { box-shadow: 0 0 0 8px rgba(229,72,77,0); }
}
.inc-row .sev {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
.inc-row.crit .sev { color: var(--sev-critical); }
.inc-row.high .sev { color: var(--sev-high); }
.inc-row.med  .sev { color: var(--sev-medium); }
.inc-row.low  .sev { color: var(--sev-low); }
.inc-row.ok   .sev { color: var(--sev-ok); }
.inc-row .title { color: var(--fg-1); font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-row .sub { color: var(--fg-3); font-size: var(--text-xs); margin-top: 2px; font-family: var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-row .stat { color: var(--fg-2); font-size: var(--text-xs); white-space: nowrap; }
.inc-row .when { color: var(--fg-3); font-size: var(--text-xs); font-family: var(--font-mono); text-align: right; white-space: nowrap; }

/* Reflow the incident row when the content area gets tight (panels open / small screens) */
@container content (max-width: 680px) {
  .inc-row {
    grid-template-columns: 14px auto minmax(0, 1fr);
    grid-template-areas:
      "dot sev   when"
      "dot title title"
      "dot stat  stat";
    row-gap: 3px;
  }
  .inc-row > .dot { align-self: start; margin-top: 5px; }
  .inc-row .title { white-space: normal; }
  .inc-row .stat { text-align: left; }
}


/* ===== SIDE PANELS ===== */
.side {
  display: flex; flex-direction: column; gap: 16px;
}
.panel {
  background: linear-gradient(160deg, color-mix(in oklab, var(--fg-1) 3%, var(--bg-2)), var(--bg-2));
  border: 1px solid color-mix(in oklab, var(--border-subtle) 55%, transparent);
  border-radius: var(--radius-lg); padding: 16px 18px;
  box-shadow: var(--shadow-1);
}
.panel-title { font-size: var(--text-sm); color: var(--fg-1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); margin-bottom: 12px; }

.coverage-list { display: flex; flex-direction: column; gap: 10px; }
.coverage-row { display: flex; align-items: center; gap: 10px; font-size: var(--text-xs); color: var(--fg-2); }
.coverage-row .name { width: 100px; color: var(--fg-1); font-size: var(--text-sm); }
.coverage-row .bar { flex: 1; height: 4px; background: var(--bg-inset); border-radius: 999px; overflow: hidden; }
.coverage-row .bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.coverage-row .pct { font-family: var(--font-mono); font-variant-numeric: tabular-nums; width: 36px; text-align: right; }


/* ===== INSPECTOR ===== */
.inspector {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 420px;
  background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  backdrop-filter: blur(24px);
  border-left: 1px solid rgba(255,255,255,0.08);
  box-shadow: -30px 0 60px -20px rgba(0,0,0,0.5);
  display: flex; flex-direction: column;
  z-index: var(--z-modal);
  animation: slidein var(--dur-slow) var(--ease-out);
}
[data-theme="light"] .inspector {
  background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
  border-left-color: rgba(10,20,40,0.1);
  box-shadow: -20px 0 50px -20px rgba(10,20,40,0.2);
}
/* Shift the inspector left of the agent panel when it's present */
.app[data-panel="pinned"] .inspector,
.app[data-panel="floating"] .inspector { right: var(--panel-w); }

.inspector .head {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 8px;
}
.inspector .head .top {
  display: flex; align-items: center; gap: 10px;
}
.inspector .head .top .sev-badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--sev-critical-bg); border: 1px solid var(--sev-critical-border);
  color: var(--sev-critical);
}
.inspector .head .top .id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3); margin-left: auto; }
.inspector .head .title { font-size: var(--text-xl); color: var(--fg-1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
.inspector .head .meta { font-size: var(--text-xs); color: var(--fg-3); font-family: var(--font-mono); }

.inspector .body {
  flex: 1; overflow-y: auto;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 18px;
}
.inspector .label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.inspector .kv { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; font-size: var(--text-sm); }
.inspector .kv .k { color: var(--fg-3); }
.inspector .kv .v { color: var(--fg-1); font-family: var(--font-mono); font-size: var(--text-xs); }
.inspector .timeline { display: flex; flex-direction: column; gap: 0; }
.inspector .tle {
  display: grid; grid-template-columns: 16px 1fr; gap: 12px;
  padding: 8px 0;
  position: relative;
}
.inspector .tle::before {
  content: ''; position: absolute; left: 7px; top: 14px; bottom: -8px;
  width: 1px; background: var(--border-subtle);
}
.inspector .tle:last-child::before { display: none; }
.inspector .tle .node {
  width: 8px; height: 8px; border-radius: 999px; background: var(--fg-3);
  margin-top: 4px; z-index: 1; box-shadow: 0 0 0 3px var(--bg-1);
}
.inspector .tle.crit .node { background: var(--sev-critical); }
.inspector .tle.high .node { background: var(--sev-high); }
.inspector .tle.ok   .node { background: var(--sev-ok); }
.inspector .tle .when { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
.inspector .tle .what { color: var(--fg-1); font-size: var(--text-sm); }
.inspector .tle .who { color: var(--fg-3); font-size: var(--text-xs); font-family: var(--font-mono); }

.inspector .actions { padding: 14px 20px; border-top: 1px solid var(--border-subtle); display: flex; gap: 8px; }

/* Code block in inspector */
.codeblock {
  background: var(--bg-inset); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); padding: 10px 12px;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-1);
  line-height: var(--leading-relaxed); white-space: pre-wrap;
}
.codeblock .ann { color: var(--accent); }
.codeblock .dim { color: var(--fg-3); }


/* ===== TABLES (Policies, Models) ===== */
.tbl-wrap {
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg); overflow-x: auto;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -28px rgba(0,0,0,0.6);
}
[data-theme="light"] .tbl-wrap {
  background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
  border-color: rgba(10,20,40,0.1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 32px -24px rgba(10,20,40,0.16);
}
.tbl { width: 100%; min-width: 560px; border-collapse: collapse; }
.tbl thead th {
  text-align: left; font-weight: var(--weight-medium);
  font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--fg-3);
  padding: 10px 14px; background: rgba(255,255,255,0.02); border-bottom: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .tbl thead th { background: rgba(10,20,40,0.02); border-bottom-color: rgba(10,20,40,0.1); }
.tbl tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: var(--text-sm); color: var(--fg-1); vertical-align: middle;
}
[data-theme="light"] .tbl tbody td { border-bottom-color: rgba(10,20,40,0.08); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { position: relative; transition: background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.tbl tbody tr::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(160px circle at var(--mx,50%) var(--my,50%), var(--accent-bg), transparent 70%);
  transition: opacity 200ms var(--ease-out);
}
.tbl tbody tr:hover { background: rgba(255,255,255,0.035); }
[data-theme="light"] .tbl tbody tr:hover { background: rgba(255,255,255,0.5); }
.tbl tbody tr:hover::after { opacity: 1; }
.tbl .mono { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-2); }
.tbl .right { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .muted { color: var(--fg-3); }

/* ===== TABS ===== */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border-subtle); margin-bottom: 20px; }
.tab {
  padding: 8px 14px;
  font-size: var(--text-sm); color: var(--fg-3); cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  user-select: none;
  /* Tabs are <button>s (keyboard-reachable, announced as tabs). Reset the UA button chrome so
     they still render exactly as the previous <div>s did. `border-bottom` above must win, so
     only the other three edges are cleared. */
  background: none; border: 0 solid transparent; font-family: inherit; line-height: inherit;
}
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.tab:hover { color: var(--fg-2); }
.tab.active { color: var(--fg-1); border-bottom-color: var(--accent); font-weight: var(--weight-medium); text-shadow: 0 0 12px var(--accent-bg); }
.tab .count { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }

/* ===== POLICY CATALOG (Policies ▸ Policy catalog tab) ===== */
.policy-group { margin-bottom: 22px; }
.policy-group-head {
  padding: 4px 2px 8px; border-bottom: 1px solid var(--border-subtle); margin-bottom: 8px;
}
.policy-group-titlerow { display: flex; align-items: baseline; gap: 8px; }
.policy-group-desc { font-size: 12px; margin-top: 4px; max-width: 78ch; }
.policy-group-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-1); }
.policy-group-head .count { font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }

/* Listing: a title-only row per policy; details open in a popup on click. */
.policy-row-list { display: flex; flex-direction: column; }
.policy-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 8px; background: none; border: 0; border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-1); font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: background var(--dur-base) var(--ease-out);
}
.policy-row:hover { background: var(--bg-1); }
.policy-row.is-highlighted { background: var(--accent-bg); }
.policy-row-title { flex: 1; }
.policy-row svg { color: var(--fg-3); width: 14px; height: 14px; flex-shrink: 0; }
/* Details popup */
.policy-modal-overlay {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--bg-overlay);
}
.policy-modal {
  width: min(720px, 100%); max-height: 86vh; overflow-y: auto;
  background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: 20px 22px; display: grid; gap: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.policy-modal-head { display: flex; align-items: center; gap: 10px; }
.policy-modal-title { flex: 1; margin: 0; font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--fg-1); }
.policy-modal-close { background: none; border: 0; color: var(--fg-3); cursor: pointer; padding: 2px; }
.policy-modal-close:hover { color: var(--fg-1); }
.policy-modal-meta { display: flex; align-items: center; gap: 8px; margin-top: -4px; }
.policy-modal-id { font-size: 11px; margin-left: auto; }
.policy-modal-section { display: grid; gap: 3px; }
.policy-modal-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent);
  font-weight: var(--weight-medium);
}
.policy-modal-text { margin: 0; font-size: var(--text-sm); color: var(--fg-2); line-height: 1.55; }
.policy-details { display: grid; gap: 8px; }
.policy-detail-h {
  margin: 6px 0 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-1);
}
.policy-detail-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.policy-detail-list li { font-size: var(--text-sm); color: var(--fg-2); line-height: 1.5; }
.policy-detail-tablewrap { overflow-x: auto; }
.policy-detail-table {
  width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed;
}
/* Fixed column widths per shape so wide tables wrap inside the popup instead of
   overflowing. Column count comes from the renderer (cols-N). */
.policy-detail-table.cols-2 th:nth-child(1), .policy-detail-table.cols-2 td:nth-child(1) { width: 76%; }
.policy-detail-table.cols-2 th:nth-child(2), .policy-detail-table.cols-2 td:nth-child(2) { width: 24%; }
.policy-detail-table.cols-4 th:nth-child(1), .policy-detail-table.cols-4 td:nth-child(1) { width: 13%; }
.policy-detail-table.cols-4 th:nth-child(2), .policy-detail-table.cols-4 td:nth-child(2) { width: 13%; }
.policy-detail-table.cols-4 th:nth-child(3), .policy-detail-table.cols-4 td:nth-child(3) { width: 37%; }
.policy-detail-table.cols-4 th:nth-child(4), .policy-detail-table.cols-4 td:nth-child(4) { width: 37%; }
.policy-detail-table th, .policy-detail-table td {
  text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.policy-detail-table th { color: var(--fg-3); font-weight: var(--weight-medium); }
.policy-detail-table td { color: var(--fg-2); }
.policy-detail-table td:last-child, .policy-detail-table th:last-child { padding-right: 0; }
.policy-detail-table th, .policy-detail-table td { overflow-wrap: anywhere; }
.policy-details > summary {
  cursor: pointer; width: fit-content; list-style: none;
  font-size: 12px; color: var(--accent); font-weight: var(--weight-medium);
}
.policy-details > summary::-webkit-details-marker { display: none; }
.policy-details > summary::before { content: '▸ '; }
.policy-details[open] > summary::before { content: '▾ '; }
.policy-details > summary:hover { text-decoration: underline; }
.policy-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.policy-tag {
  font-size: 10px; padding: 2px 8px; color: var(--fg-3);
  background: var(--bg-2); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
}
.fd-policy-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--accent); text-decoration: none; margin-top: 2px;
  /* Rendered as a <button>: it opens the policy popup in place rather than
     navigating to /policies, so reset the button chrome. */
  background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
}
.fd-policy-link:hover { text-decoration: underline; }

/* A finding's policy in the findings table. Same register as .chip, but it is
   clickable and its label is a sentence, not an enum token — so it wraps. That
   rules out .chip's pill: at two or three lines a 999px radius curves in past
   the text. A small radius with even block padding keeps every line clear of
   the edge, and inline-block (not inline-flex) lets the lines flow normally. */
.policy-chip {
  display: inline-block; text-align: left;
  padding: 5px 10px; border-radius: var(--radius-sm);
  font-family: inherit; font-size: 10px; line-height: 1.5;
  max-width: 240px;
  background-color: var(--bg-3);
  border: 1px solid color-mix(in oklab, var(--border-subtle) 65%, transparent);
  color: var(--fg-2); cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.policy-chip:hover { background-color: var(--bg-2); color: var(--accent); border-color: var(--border-default); }

/* A side-rail value that acts as a link (the finding's policy row). */
.side-row-link {
  background: none; border: 0; padding: 0;
  font-family: inherit; font-size: inherit; font-weight: inherit; text-align: right;
  color: var(--accent); cursor: pointer;
}
.side-row-link:hover { text-decoration: underline; }

/* ===== TOOLBAR ===== */
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }

.input {
  height: 30px; padding: 0 10px 0 32px;
  background: var(--bg-1); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); color: var(--fg-1);
  font: inherit; font-size: var(--text-sm);
  outline: none; transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  width: 280px; position: relative;
}
.input::placeholder { color: var(--fg-3); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

.input-wrap { position: relative; }
.input-wrap > svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--fg-3); pointer-events: none; }

.filter-pill {
  height: 30px; padding: 0 10px; border-radius: var(--radius-md);
  background: var(--bg-1); border: 1px dashed var(--border-default);
  color: var(--fg-2); font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}
.filter-pill:hover { background: var(--bg-3); color: var(--fg-1); }
.filter-pill.active { border-style: solid; border-color: var(--accent-border); background-color: var(--accent-bg); background-image: linear-gradient(135deg, var(--accent-bg), transparent 70%); color: var(--accent); box-shadow: var(--shadow-control); }


/* ===== Toggle ===== */
.switch {
  width: 32px; height: 18px; background: var(--bg-3); border-radius: 999px;
  border: 1px solid var(--border-default); position: relative; cursor: pointer;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  flex-shrink: 0;
  /* Also used on <button> (Fleet's Show all), where the UA padding would distort the track.
     No-op on the <span> callers. */
  padding: 0; display: inline-block; box-sizing: border-box; appearance: none;
}
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Disabled must LOOK unavailable, not merely refuse clicks — an unexplained dead control reads
   as a bug. Fleet pairs this with a title saying why. */
.switch:disabled { cursor: not-allowed; opacity: 0.55; }
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 999px; background: var(--fg-2);
  transition: transform var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.switch.on { background: var(--accent); border-color: var(--accent); }
.switch.on::after { transform: translateX(14px); background: var(--accent-fg); }

/* ===== Severity badges ===== */
.sev-badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px; border-radius: var(--radius-pill);
  font-size: 10px; font-weight: var(--weight-medium);
  border: 1px solid;
  font-feature-settings: "tnum";
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  white-space: nowrap;
  background-image: linear-gradient(135deg, currentColor -320%, transparent 140%);
}
.sev-badge .d { width: 6px; height: 6px; border-radius: 999px; box-shadow: 0 0 6px 1px currentColor; }
.sev-badge.crit { background-color: var(--sev-critical-bg); border-color: var(--sev-critical-border); color: var(--sev-critical); }
.sev-badge.crit .d { background: var(--sev-critical); }
.sev-badge.high { background-color: var(--sev-high-bg); border-color: var(--sev-high-border); color: var(--sev-high); }
.sev-badge.high .d { background: var(--sev-high); }
.sev-badge.med  { background-color: var(--sev-medium-bg); border-color: var(--sev-medium-border); color: var(--sev-medium); }
.sev-badge.med .d { background: var(--sev-medium); }
.sev-badge.low  { background-color: var(--sev-low-bg); border-color: var(--sev-low-border); color: var(--sev-low); }
.sev-badge.low .d { background: var(--sev-low); }
.sev-badge.info { background-color: var(--sev-info-bg); border-color: var(--sev-info-border); color: var(--sev-info); }
.sev-badge.info .d { background: var(--sev-info); }
.sev-badge.ok   { background-color: var(--sev-ok-bg); border-color: var(--sev-ok-border); color: var(--sev-ok); }
.sev-badge.ok .d { background: var(--sev-ok); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 14px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--bg-3) 92%, var(--fg-1) 3%); color: var(--fg-1);
  border: 1px solid var(--border-default);
  font-family: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium);
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.btn:hover { background: color-mix(in oklab, var(--bg-3) 88%, white); }
.btn { box-shadow: var(--shadow-control); }
.btn:active { box-shadow: var(--shadow-pressed); transform: translateY(0.5px); }
.btn.primary {
  background-color: var(--accent-press);
  background-image: linear-gradient(155deg, var(--accent-hover), var(--accent-press)), radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,0.35), transparent 70%);
  color: var(--accent-fg); border-color: transparent; font-weight: var(--weight-semibold); box-shadow: var(--shadow-control-strong);
  position: relative;
}
.btn.primary:hover { filter: brightness(1.05); }
.btn.primary:active { box-shadow: var(--shadow-pressed); transform: translateY(0.5px); }
/* Neutral high-emphasis: inverse fill in both themes. Gold (.primary) is
   reserved for at most one page-level brand/action moment. */
.btn.strong {
  background: var(--fg-1); color: var(--bg-0);
  border-color: transparent; font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-control-strong);
}
.btn.strong:hover { background: color-mix(in oklab, var(--fg-1) 88%, var(--bg-0)); }
.btn.strong:active { box-shadow: var(--shadow-pressed); transform: translateY(0.5px); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--fg-2); box-shadow: none; }
.btn.ghost:hover { background: var(--bg-3); color: var(--fg-1); }
.btn.ghost:active { box-shadow: none; transform: translateY(0.5px); }
.btn.sm { height: 26px; padding: 0 10px; font-size: var(--text-xs); }

/* Segmented control: joined .btn children, neutral (non-gold) active state. */
.seg { display: inline-flex; }
.seg .btn { border-radius: 0; margin-left: -1px; }
.seg .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); margin-left: 0; }
.seg .btn:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.seg .btn.on {
  background: var(--bg-3); color: var(--fg-1);
  font-weight: var(--weight-semibold); border-color: var(--border-strong, var(--border-default));
  position: relative; z-index: 1;
}


/* Live ping in header */
.live {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--fg-2);
  white-space: nowrap; flex-shrink: 0;
}
.live .pulse {
  width: 8px; height: 8px; border-radius: 999px; background: var(--sev-ok);
  box-shadow: 0 0 0 0 rgba(91,185,140,0.6);
  animation: pulse-ok 1.8s ease-out infinite;
}

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
.section-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg); padding: 16px 18px; margin-bottom: 16px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -28px rgba(0,0,0,0.6);
  overflow: hidden;
}
.section-card::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), var(--accent-bg), transparent 70%);
  transition: opacity 200ms var(--ease-out);
}
.section-card:hover::after { opacity: 1; }
.section-card > * { position: relative; z-index: 1; }
.section-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
/* Light mode: cards flip to a white wash over the cream background, matching
   the redesign's own light-mode override technique. */
[data-theme="light"] .metric-card,
[data-theme="light"] .section-card {
  background: linear-gradient(160deg, rgba(255,255,255,0.6), rgba(255,255,255,0.3));
  border-color: rgba(10,20,40,0.1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 32px -24px rgba(10,20,40,0.16);
}
[data-theme="light"] .metric-card:hover { background: rgba(255,255,255,0.85); border-color: rgba(10,20,40,0.14); }
.section-card .card-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-1); }

.platform-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--bg-3); }
.platform-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.platform-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--fg-2); }
.platform-legend span i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.platform-legend span b { font-family: var(--font-mono); color: var(--fg-3); font-weight: var(--weight-medium); }

.agent-logo {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  color: #0b0d10; font-weight: var(--weight-semibold); font-size: 12px; flex-shrink: 0;
  box-shadow: 0 3px 10px -3px rgba(0,0,0,0.35);
}

.usage-bar { display: flex; align-items: center; gap: 8px; }
.usage-bar-track { width: 64px; height: 5px; border-radius: 3px; background: var(--bg-3); overflow: hidden; }
.usage-bar-fill { height: 100%; border-radius: 3px; }
.usage-bar .mono { font-size: 10px; color: var(--fg-3); }

.stat-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--fg-3); }

/* Single agent detail */
/* Detail views are plain in-flow page content — .content (the app's single
   scroll container), or .ap-object-metadata for the embedded side-panel
   case, already scrolls them. No independent height/scroll region here:
   that used to create nested scrollbars and clipped overflow when the
   header + tabs + a tall body exceeded the viewport. .page gives the same
   padding/max-width every list page gets. */
.detail-shell { display: flex; flex-direction: column; }
.detail-head { flex-shrink: 0; }
/* (.drawer-fill is gone — PlaybookDrawer was the only overlay that needed it,
   and VAL-413 replaced it with an in-page DetailShell like every other panel.) */
.detail-head-top { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.det-logo {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: #0b0d10; font-weight: var(--weight-semibold); font-size: 18px; flex-shrink: 0;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.4);
}
/* flex-basis + min-width let a long title wrap the actions block to its own
   line instead of collapsing the title to a char-by-char sliver; overflow-wrap
   breaks a pathological long token (e.g. an ARN) rather than overflowing the
   panel — ported from the removed styles.css duplicate. */
.det-info { flex: 1 1 240px; min-width: 240px; }
.det-info .nm { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--fg-1); letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.det-info .meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.det-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.status-select {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: var(--radius-pill);
  background: var(--sev-ok-bg); border: 1px solid var(--sev-ok-border); color: var(--sev-ok);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
}
.status-select .d { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }
.status-select.in-review { background: var(--sev-medium-bg); border-color: var(--sev-medium-border); color: var(--sev-medium); }

.detail-body { padding-top: 18px; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
/* Both columns must be able to shrink below their content's intrinsic width
   so the metadata column is never pushed off-screen (ported from the
   removed styles.css duplicate, which had this but chrome.css's original
   didn't). */
.detail-grid > * { min-width: 0; }
@media (max-width: 1180px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
}
.side-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.side-row:last-child { border-bottom: 0; }
.side-row .k { color: var(--fg-3); }
.side-row .v { color: var(--fg-1); font-weight: var(--weight-medium); text-align: right; }

/* .inspector.embedded — the same head/body/actions markup, but nested inside
   the Assistant/Help/Details panel instead of floating fixed on its own. */
.inspector.embedded {
  position: static; inset: auto; width: auto; height: 100%;
  border-left: 0; box-shadow: none; animation: none;
  display: flex; flex-direction: column; min-height: 0;
}


/* ===== CHIP — small pill badge used on graph nodes, inspector headers, and
   edge/boundary tags ===== */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  font-size: 10px; line-height: 1.6; white-space: nowrap;
  background-color: var(--bg-3); background-image: linear-gradient(135deg, color-mix(in oklab, var(--fg-1) 6%, transparent), transparent 70%);
  border: 1px solid color-mix(in oklab, var(--border-subtle) 65%, transparent); color: var(--fg-3);
}
.chip.medium, .chip.sev-medium { background: var(--sev-medium-bg); border-color: var(--sev-medium-border); color: var(--sev-medium); }
.chip.high, .chip.sev-high { background: var(--sev-high-bg); border-color: var(--sev-high-border); color: var(--sev-high); }
.chip.crit, .chip.sev-crit { background: var(--sev-critical-bg); border-color: var(--sev-critical-border); color: var(--sev-critical); }
.chip.low, .chip.sev-low { background: var(--sev-low-bg); border-color: var(--sev-low-border); color: var(--sev-low); }
.chip.info { background: var(--sev-info-bg); border-color: var(--sev-info-border); color: var(--sev-info); }
/* Who an identity is: a person reads plain, a machine reads as information, unclassified reads muted. */
.chip.kind-machine { background: var(--sev-info-bg); border-color: var(--sev-info-border); color: var(--sev-info); }
.chip.kind-unknown { opacity: 0.7; }

/* Access level. Uses the --access-* ramp rather than the severity ramp: what a
   principal can DO is a capability, not a severity — read access to a
   crown-jewel bucket can matter more than admin access to a scratch one, and
   colouring it as a severity would assert an ordering the data does not carry.
   Colour is a secondary channel here; the chip always spells the level out. */
.chip.access-read       { background: color-mix(in oklab, var(--access-read) 14%, transparent);       border-color: color-mix(in oklab, var(--access-read) 40%, transparent);       color: var(--access-read); }
.chip.access-write      { background: color-mix(in oklab, var(--access-write) 14%, transparent);      border-color: color-mix(in oklab, var(--access-write) 40%, transparent);      color: var(--access-write); }
.chip.access-read-write { background: color-mix(in oklab, var(--access-read-write) 14%, transparent); border-color: color-mix(in oklab, var(--access-read-write) 40%, transparent); color: var(--access-read-write); }
.chip.access-admin      { background: color-mix(in oklab, var(--access-admin) 16%, transparent);      border-color: color-mix(in oklab, var(--access-admin) 45%, transparent);      color: var(--access-admin); }


/* ===== Legacy-contract compatibility ======================================
   Pre-redesign markup uses full-word severity names, a .dotc dot child, a
   .solid variant, and .tab-count — keep those contracts working on the new
   visual language until the page waves migrate them. */
.chip.critical { background: var(--sev-critical-bg); border-color: var(--sev-critical-border); color: var(--sev-critical); }
.chip .dotc { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.solid { background: var(--fg-1); color: var(--fg-inverse); border-color: transparent; }
.tab .tab-count, .tab-count { margin-left: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--fg-3); }
.sev-badge.medium { background-color: var(--sev-medium-bg); border-color: var(--sev-medium-border); color: var(--sev-medium); }
.sev-badge.medium .d { background: var(--sev-medium); }
.sev-badge.critical { background-color: var(--sev-critical-bg); border-color: var(--sev-critical-border); color: var(--sev-critical); }
.sev-badge.critical .d { background: var(--sev-critical); }

/* Legacy filter dropdown triggers (components/common.tsx FilterPill) — styled
   to the design's filter-pill language until pages migrate. */
.filter-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.filter-chip-lg {
  height: 30px; padding: 0 10px; border-radius: var(--radius-md);
  background: var(--bg-1); border: 1px dashed var(--border-default);
  color: var(--fg-2); font-size: var(--text-xs);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-family: inherit; white-space: nowrap;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.filter-chip-lg:hover { background: var(--bg-3); color: var(--fg-1); }
.filter-chip-lg.set { border-style: solid; border-color: var(--accent-border); background-color: var(--accent-bg); color: var(--fg-1); box-shadow: var(--shadow-control); }
.filter-chip-lg .v { color: var(--accent); font-weight: var(--weight-medium); }

/* Detail-header jump-to picker (components/InventoryPicker.tsx) — trigger
   reuses .filter-chip-lg; this is the search popover beneath it. */
.inv-picker { position: relative; }
/* 'crumb' variant — the picker doubles as the breadcrumb's trailing segment:
   plain text + chevron, matching .crumbs .cur typography, no pill chrome. */
.inv-picker-trigger-crumb {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-weight: var(--weight-medium); font-size: var(--text-sm);
  color: var(--fg-1); cursor: pointer;
}
.inv-picker-trigger-crumb:hover { color: var(--accent); }
/* 42M-407 pass 3 §3: chevron reads as discoverable at rest, not only on
   hover — raised from --fg-3 (muted tertiary, effectively invisible) to
   --fg-2, still "plain text + chevron, no pill chrome" per the original
   design call, just legible before the pointer arrives. Real :focus-visible
   state too — a :hover-only affordance gives keyboard users nothing. */
.inv-picker-trigger-crumb svg { width: 13px; height: 13px; color: var(--fg-2); flex-shrink: 0; }
.inv-picker-trigger-crumb:hover svg { color: var(--accent); }
.inv-picker-trigger-crumb:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}
.inv-picker-trigger-crumb:focus-visible svg { color: var(--accent); }
/* Shared popover shell (42M-407 pass 2 §5) — position (top/left) comes from
   usePopover's inline style, portalled to <body>, so this only sets the
   visual chrome. Consumers: InventoryPicker (.inv-picker-pop), UserMenu /
   AdminMenu (.menu-pop). */
.popover-pop {
  z-index: var(--z-dropdown);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r); box-shadow: var(--shadow-lg); overflow: hidden;
}
.inv-picker-pop {
  width: 280px; max-height: 360px;
}
.inv-picker-pop .list-search { margin: 8px; }
.inv-picker-list { overflow-y: auto; padding: 0 4px 4px; }
.inv-picker-item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 12px;
}
.inv-picker-item .ipi-label { color: var(--fg-1); }
.inv-picker-item .ipi-sub { font-size: 11px; }
.inv-picker-item.hi { background: var(--bg-3); }
.inv-picker-item.active .ipi-label { color: var(--accent); font-weight: var(--weight-medium); }
.inv-picker-empty { padding: 10px; text-align: center; font-size: 12px; }

/* Shared menu shell (role="menu") — UserMenu / AdminMenu, on top of
   .popover-pop's visual chrome (42M-407 pass 2 §5). */
.menu-pop { width: 220px; padding: 6px; gap: 2px; }
.menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border-radius: 6px; font-size: var(--text-sm);
  color: var(--fg-1); background: none; border: none; text-align: left;
  cursor: pointer; text-decoration: none;
}
.menu-item:hover, .menu-item:focus-visible {
  background: var(--bg-3); outline: none;
}
.menu-item svg { flex-shrink: 0; color: var(--fg-3); }

.user-menu-pop { width: 240px; }
.user-menu-who {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px 12px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.user-menu-who .avatar { width: 32px; height: 32px; font-size: 12px; flex-shrink: 0; }
.umw-text { display: flex; flex-direction: column; min-width: 0; }
.umw-name {
  font-weight: var(--weight-medium); color: var(--fg-1); font-size: var(--text-sm);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.umw-email { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Base (normal-width) state moved next to its @media override below —
   same selector, equal specificity, so whichever comes LATER in source
   order wins regardless of which one the media query matches. Having this
   declaration hundreds of lines after the override made the compact-width
   "show the row" rule dead: the base `display: none` here always won. */

@media (prefers-reduced-motion: reduce) {
  .metric-card::after, .tbl tbody tr::after, .section-card::after { display: none; }
  .inc-row.crit .dot, .live .pulse { animation: none; box-shadow: none; }
  .inspector { animation: none; }
}

/* ===== OVERVIEW redesign ===== spacing/layout only. Card chrome itself
   (background, border, radius, shadow, hover) is deliberately left alone
   here — .metric-card/.inc-row's own site-wide rules apply unmodified, the
   same "total agents"-style glass card + cursor-spotlight hover every other
   page using SummaryStat/.metric-card already gets (useSpotlight.ts's
   delegated pointermove hook isn't page-scoped, so it just works once
   nothing here suppresses it). Earlier rounds of this redesign overrode the
   card chrome to a flat bordered look, first with the reference mockup's
   own hardcoded colors, then with Valkan's tokens — both superseded: the ask
   is now for Overview's cards to be indistinguishable from the rest of the
   site's, not a variant. Content/data wiring is unchanged — same numbers,
   same labels, same links. Left nav, top bar and right panel are untouched
   (out of scope). */
.ov-page .page-head { margin-bottom: 32px; }
.ov-page .section-head { margin-bottom: 16px; }
.ov-page .section-head .h { font-size: 14px; letter-spacing: var(--tracking-tight); }
.ov-page .stat-grid { gap: 16px; }
.ov-page .feed { gap: 12px; }

/* Attention/Findings cards wrap the severity badge in .eyb (Inventory wraps
   an icon+label instead) — the reference gives the badge its own `mb-5`
   (20px) below it, clear of the big number; the shared card's 8px content
   gap read as cramped for this specific pairing. */
.ov-page .metric-card .eyb:has(.sev-badge) { display: block; margin-bottom: 20px; }

/* Inventory's icon eyebrow: small muted box behind the glyph, matching the
   reference's category chip instead of a bare floating icon. */
.ov-page .stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: var(--radius-md);
  background: var(--bg-1); color: var(--fg-3); flex-shrink: 0;
}
.ov-page .stat-icon svg { width: 14px; height: 14px; }

/* Inventory's primary/secondary numbers: mockup stacks them with a divider
   (`mt-auto border-t border-border pt-4`), not side-by-side — a genuine
   layout difference from the rest of the site's metric cards, so it's its
   own pair of classes rather than another .stat-grid variant.
   `margin-top: auto` on the secondary block keeps the divider aligned to
   the card's bottom edge across all 5 cards regardless of content height,
   but auto-margin alone can collapse close to 0 on a tall card — the fixed
   padding-bottom/padding-top below guarantee real breathing room around the
   line itself even then, not just when there happens to be slack to eat.
   The number→label gap (both here and in the primary stat) also had no
   space of its own, just line-height. */
.ov-page .ov-inv-numbers { display: flex; flex-direction: column; flex: 1; }
.ov-page .ov-inv-numbers > div:first-child { padding-bottom: 16px; }
.ov-page .ov-inv-numbers .val { margin-bottom: 4px; }
.ov-page .ov-inv-secondary { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-subtle); }

/* Findings' per-severity workflow-stage breakdown: 2x2 grid (Needs
   triage/Acknowledged on row one, Ticketed/Resolved on row two), matching
   the reference's `grid-cols-2`. Grid, not flex+gap — flex items size to
   their own text width ("0" vs "221"), which pushed each stage's label to a
   different x per card and read as uneven; equal grid columns fix that by
   construction and keep the 2x2 aligned across all three severity cards. */
.ov-stage-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; }
.ov-stage-tile {
  display: block; color: inherit; text-decoration: none; text-align: left;
  padding: 10px 12px; border-radius: 10px;
  background: color-mix(in oklab, var(--bg-1) 88%, var(--fg-1) 10%);
  border: 1px solid var(--border-subtle);
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.ov-stage-tile:hover { background: color-mix(in oklab, var(--bg-1) 78%, var(--fg-1) 16%); border-color: var(--border-default); }
/* `--bg-1` reads fine against the light theme's white card (its own
   --muted-on-white contrast is already enough — no complaint there), but in
   dark mode it sits too close to the glass card's near-transparent gradient
   to read without hovering. Light keeps the original flatter tile. */
[data-theme="light"] .ov-stage-tile { background: var(--bg-1); border-color: transparent; }
[data-theme="light"] .ov-stage-tile:hover { background: color-mix(in oklab, var(--bg-1) 85%, var(--fg-1) 6%); border-color: transparent; }

/* Integration source rows: .inc-row's own site-wide chrome, unmodified —
   same reasoning as .metric-card above. */

/* Severity badges: mockup's badge-critical/high/medium have no border and
   no dot glow — just a flat soft-color pill, so those two decorations turn
   off here. The colors themselves (--sev-critical/high/medium and their
   -bg variants) are untouched — Valkan's own severity palette, already tuned
   per theme in tokens.css. */
.ov-page .sev-badge { background-image: none; border-color: transparent; }
.ov-page .sev-badge .d { box-shadow: none; }

/* Integrations read as a filler at .two-col's default 340px rail — direct
   feedback wanted it noticeably roomier (and its heading un-shrunk, above). */
.ov-page .two-col { grid-template-columns: minmax(0, 1fr) 460px; }

/* ===== OVERVIEW v2 — Quiet instruments (42M-402) ========================== */
/* Shared glass surface for the new overview modules (same recipe as
   .section-card, without its margin — layout owns spacing via gap). */
.glass-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255,255,255,0.035), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 20px 40px -28px rgba(0,0,0,0.6);
}
[data-theme="light"] .glass-card {
  background: var(--bg-2);
  border-color: var(--border-default);
  box-shadow: var(--shadow-1, 0 6px 16px rgba(11,17,32,0.14));
}

.ov2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ov2.has-rail { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
.ov2-main { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ov2-groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; align-items: start;
}

/* Hero posture strip */
.ov2-hero {
  overflow: hidden; padding: 24px 28px; min-height: 210px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
}
.ov2-hero-trend { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; }
.ov2-hero-top, .ov2-hero-bottom { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ov2-hero-count { display: flex; align-items: baseline; gap: 18px; }
.ov2-hero-num {
  font-size: clamp(48px, 7vw, 80px); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--fg-1); text-decoration: none;
}
.ov2-hero-num:hover { color: var(--fg-1); text-decoration: underline; text-decoration-color: var(--border-strong); }
.ov2-hero-deltas { display: flex; flex-direction: column; gap: 5px; font-size: var(--text-xs); }
.ov2-hero-chips { display: flex; gap: 8px; align-items: center; }
.ov2-hero-tip {
  position: absolute; top: 10px; right: 12px; z-index: 1;
  font-size: var(--text-2xs); color: var(--fg-2); background: var(--bg-1);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 3px 8px; pointer-events: none;
}
.ov2-verdict { font-size: var(--text-2xs); }
.ov2-verdict.good, .good { color: var(--sev-ok); }
.ov2-verdict.warn, .ov2 .warn { color: var(--sev-high); }

/* Instrument cards */
.ov2-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ov2-card-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--fg-1); text-decoration: none; }
.ov2-card-title:hover { text-decoration: underline; text-decoration-color: var(--border-strong); }
.ov2-delta { font-size: var(--text-2xs); }
.ov2-instrument { display: flex; align-items: center; gap: 16px; }
.ov2-ring { width: 96px; height: 96px; flex-shrink: 0; }
.ov2-ring-num { fill: var(--fg-1); font-size: 18px; font-weight: 600; }
.ov2-legend { display: flex; flex-direction: column; gap: 8px; font-size: var(--text-xs); color: var(--fg-2); min-width: 0; }
.ov2-legend .d, .ov2-rail-row .d {
  display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: currentColor; box-shadow: 0 0 6px 1px currentColor; vertical-align: 1px;
}
.ov2-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--border-subtle); padding-top: 10px; margin-top: auto;
  font-size: var(--text-2xs); color: var(--fg-3);
}
.ov2-card-foot a { color: var(--fg-2); text-decoration: none; }
.ov2-card-foot a:hover { color: var(--fg-1); }
.ov2-chips { display: flex; gap: 8px; flex-wrap: wrap; }

/* Punchcard */
.ov2-punchcard { display: grid; grid-template-columns: repeat(15, 12px); grid-auto-rows: 12px; gap: 3px; }
.ov2-cell { width: 12px; height: 12px; border-radius: 2px; }

/* Flip cards: CSS 3D turn, both faces in the flow (the tallest face sets the
   height via grid stacking so the card never collapses mid-flip). */
.ovflip { perspective: 1200px; }
.ovflip-inner {
  display: grid; transform-style: preserve-3d;
  transition: transform 0.45s var(--ease-out, ease);
}
.ovflip.is-flipped .ovflip-inner { transform: rotateY(180deg); }
.ovflip-face {
  grid-area: 1 / 1; backface-visibility: hidden;
  display: flex; flex-direction: column; gap: 14px; padding: 18px; min-height: 100%;
}
.ovflip-back { transform: rotateY(180deg); }
.ovflip-btn {
  position: absolute; top: 14px; right: 14px;
  width: 22px; height: 22px; border-radius: var(--radius-md);
  border: 1px solid var(--border-default); background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-3); cursor: pointer;
}
.ovflip-btn:hover { color: var(--fg-1); border-color: var(--border-strong); }
@media (prefers-reduced-motion: reduce) { .ovflip-inner { transition: none; } }

/* Table backs */
.ov2-table { border-collapse: collapse; width: 100%; font-family: var(--font-mono); font-size: var(--text-2xs); }
.ov2-table th {
  text-align: left; color: var(--fg-3); font-weight: var(--weight-medium); font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  padding: 6px 8px; border-bottom: 1px solid var(--border-default);
}
.ov2-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--border-subtle);
  color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.ov2-table th.r, .ov2-table td.r { text-align: right; }
.ov2-table td.k { color: var(--fg-1); font-family: inherit; font-size: var(--text-xs); }
.ov2-table td.k a { color: var(--fg-1); text-decoration: none; }
.ov2-table td.k a:hover { text-decoration: underline; }
.ov2-table td.warn { color: var(--sev-high); }
.ov2-table td.good { color: var(--sev-ok); }
.ov2-table td.sev-critical a { color: var(--sev-critical); }
.ov2-table td.sev-high a { color: var(--sev-high); }
.ov2-table td.sev-medium a { color: var(--sev-medium); }

/* Top actions */
.ov2-action-rows { display: flex; flex-direction: column; }
.ov2-action-row {
  display: flex; align-items: center; gap: 14px; padding: 11px 0;
  border-top: 1px solid var(--border-subtle);
}
.ov2-rank { font-size: var(--text-xs); color: var(--fg-4); width: 20px; flex-shrink: 0; }
.ov2-rank.is-primary { color: var(--accent); }
.ov2-action-title { flex-grow: 1; font-size: var(--text-sm); font-weight: var(--weight-medium); min-width: 0; }
.ov2-quiet-link { font-size: var(--text-2xs); color: var(--fg-2); text-decoration: none; white-space: nowrap; }
.ov2-quiet-link:hover { color: var(--fg-1); }
.ov2-missions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.ov2-mission { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.ov2-mission.is-primary { border-color: var(--accent-border); }
.ov2-mission-top { display: flex; justify-content: space-between; align-items: center; }
.ov2-mission-title { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
.ov2-mission-payoff { font-size: var(--text-xs); color: var(--fg-2); }

/* Changelog rail */
.ov2-rail { padding: 16px; display: flex; flex-direction: column; align-self: start; }
.ov2-rail-row {
  display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--border-subtle);
  text-decoration: none; color: var(--fg-1); font-size: var(--text-xs); line-height: var(--leading-normal);
}
.ov2-rail-row:first-of-type { margin-top: 12px; }
.ov2-rail-row .d { margin-top: 5px; flex-shrink: 0; }
.ov2-rail-row:hover .ov2-rail-body { color: var(--fg-1); }
.ov2-rail-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ov2-rail-meta { font-size: var(--text-2xs); color: var(--fg-3); }

/* Customize popover */
.ov2-customize {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 30;
  width: 260px; padding: 14px; display: flex; flex-direction: column; gap: 8px;
  background: var(--bg-1);
}
.ov2-customize label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--text-xs); color: var(--fg-2); cursor: pointer;
}
.ov2-customize label .muted { color: var(--fg-4); }
.ov2-customize input { accent-color: var(--accent); }

@container content (max-width: 1000px) {
  .ov2.has-rail { grid-template-columns: minmax(0, 1fr); }
}

/* ── Overview v2 round 2 (review): bars, year punchcard, scan bars, chips ── */
:root { --ov2-cell-empty: rgba(255,255,255,0.05); }
[data-theme="light"] { --ov2-cell-empty: rgba(73,53,22,0.08); }

/* Flip: faces must never exceed the wrapper or the turn drifts sideways. */
.ovflip { min-width: 0; }
.ovflip-inner { width: 100%; grid-template-columns: minmax(0, 1fr); transform-origin: center center; }
.ovflip-face { min-width: 0; max-width: 100%; }
.ovflip-face .ov2-table { display: block; overflow-x: auto; }

/* Inventory bar rows */
.ov2-bars { display: flex; flex-direction: column; gap: 4px; }
.ov2-bar-row {
  display: grid; grid-template-columns: 76px minmax(0,1fr) 40px 92px;
  align-items: center; gap: 10px; padding: 6px 4px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--fg-1);
}
.ov2-bar-row:hover { background: var(--bg-3); }
.ov2-bar-label { font-size: var(--text-xs); color: var(--fg-2); }
.ov2-bar-row:hover .ov2-bar-label { color: var(--fg-1); }
.ov2-bar-track { position: relative; height: 10px; border-radius: 999px; background: rgba(255,255,255,0.05); overflow: hidden; }
[data-theme="light"] .ov2-bar-track { background: rgba(73,53,22,0.08); }
.ov2-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; opacity: 0.75; }
.ov2-bar-attn { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--sev-high); }
.ov2-bar-num { font-size: var(--text-xs); text-align: right; font-variant-numeric: tabular-nums; }
.ov2-bar-meta { display: flex; gap: 8px; justify-content: flex-end; font-size: var(--text-2xs); }

/* Year punchcard: 7 rows (Mon→Sun top→bottom) × 52 columns (old→new). */
.ov2-punch-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.ov2-punch-cap { font-size: var(--text-2xs); color: var(--fg-4); }
.ov2-punch-wrap { display: flex; gap: 6px; align-items: stretch; }
.ov2-punch-days { display: flex; flex-direction: column; justify-content: space-between; font-size: var(--text-2xs); color: var(--fg-4); padding: 1px 0; }
.ov2-punchcard.year {
  display: grid; grid-auto-flow: column;
  grid-template-rows: repeat(7, 1fr); grid-auto-columns: 1fr;
  gap: 2px; width: 100%; aspect-ratio: 52 / 7; min-width: 0;
}
.ov2-punchcard.year .ov2-cell { width: auto; height: auto; border-radius: 1.5px; background: var(--ov2-cell-empty); }
.ov2-punchcard.year .ov2-cell.is-future { background: transparent; }

/* Findings chips as toggles */
.ov2-chips .sev-badge { cursor: pointer; text-decoration: none; }
.ov2-chips .sev-badge.is-off { opacity: 0.35; filter: grayscale(0.6); }
.ov2-hero-chips .sev-badge { text-decoration: none; }

/* Integration scan bars */
.ov2-scanbars { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.ov2-scanbar { flex: 1 1 0; min-width: 2px; border-radius: 1.5px; opacity: 0.8; }

/* Compact empty top-actions strip */
.ov2-actions-empty { display: flex; align-items: center; gap: 14px; padding: 10px 18px; }
.ov2-actions-empty-msg { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-xs); color: var(--fg-2); flex-grow: 1; }

/* Hero toggles sit above the backdrop */
.ov2-hero-top .seg { position: relative; z-index: 1; }
.ov2-hero-top .seg .btn.sm { height: 24px; padding: 0 10px; font-size: var(--text-2xs); }

/* ── Overview v2 round 3 (visual audit): radial inventory, source chips,
   hero de-occlusion ─────────────────────────────────────────────────────── */
.ov2-hero-top, .ov2-hero-bottom { position: relative; z-index: 1; }
.ov2-hero-bottom { flex-wrap: wrap; row-gap: 8px; }
.ov2-hero-count { flex-wrap: wrap; row-gap: 4px; }

.ov2-radial { width: 148px; height: 148px; flex-shrink: 0; }
.ov2-ring-sub { fill: var(--fg-4); font-size: 8px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }

.ov2-legend-row {
  display: grid; grid-template-columns: 12px 1fr auto 56px;
  align-items: center; gap: 8px; padding: 4px 6px; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--fg-2); font-size: var(--text-xs); min-width: 0;
}
.ov2-legend-row:hover { background: var(--bg-3); color: var(--fg-1); }
.ov2-legend-num { color: var(--fg-1); text-align: right; font-variant-numeric: tabular-nums; }
.ov2-legend-chips { display: flex; gap: 6px; justify-content: flex-end; font-size: var(--text-2xs); }

.ov2-source-chips { display: flex; flex-wrap: wrap; gap: 6px; align-content: flex-start; min-width: 0; }
.ov2-source-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-subtle);
  font-size: var(--text-2xs); color: var(--fg-2); text-decoration: none; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.ov2-source-chip:hover { color: var(--fg-1); border-color: var(--border-strong); }

/* Round 3 fixes: the year grid was overflowing its flex parent (newest,
   colored columns clipped off the card's right edge — "no filled boxes");
   fluid tracks need min-width:0 on every flex level. */
.ov2-punch-wrap { min-width: 0; }
.ov2-punchcard.year { flex: 1 1 0; width: auto; min-width: 0; overflow: hidden; }
.ov2-legend { min-width: 0; flex-grow: 1; }
.ov2-legend-row { grid-template-columns: 12px minmax(0, 1fr) auto auto; }
.ov2-legend-chips { flex-shrink: 0; }
.ov2-instrument { min-width: 0; }
.ov2-verdict { background: var(--bg-1); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 2px 8px; }

/* The base .ov2-punchcard's fixed 12px column template leaked into the year
   variant (auto-flow column only ADDS implicit tracks after the 15 fixed
   ones) — clear it so all 52 columns are fluid 1fr. */
.ov2-punchcard.year { grid-template-columns: none; }
.ov2-legend-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov2-radial { width: 132px; height: 132px; }

/* Card heads must clear BOTH absolute controls (expand + flip). */
.ovflip-face .ov2-card-head { padding-right: 58px; }
.ovflip.is-max .ovflip-face .ov2-card-head { padding-right: 30px; }

/* ── Overview v2 round 4 (findings review) ───────────────────────────────── */
/* Full-card inventory radial with in-arc labels */
.ov2-radial-full { width: 100%; max-width: 260px; margin: 0 auto; display: block; }
.ov2-radial-label {
  fill: var(--fg-2); font-size: 6.5px; font-family: var(--font-mono);
  letter-spacing: 0.03em; paint-order: stroke; stroke: var(--bg-0); stroke-width: 2px;
}
.ov2-radial-ring:hover .ov2-radial-label { fill: var(--fg-1); }
.ov2-radial-ring { cursor: pointer; }

/* Always-visible view toolbar (replaces the Customize popover) */
.ov2-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: -8px 0 16px;
}
.ov2-toolbar .btn.sm { height: 24px; padding: 0 10px; font-size: var(--text-2xs); }
.ov2-toolbar > .btn.sm.on { background: var(--bg-3); color: var(--fg-1); font-weight: var(--weight-semibold); border-color: var(--border-strong); }

/* Disabled range toggles read as "not enough history", not broken */
.seg .btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* Stack the instrument groups BEFORE their contents compress (review: at
   ~900px labels truncated and punchcard captions wrapped). */
.ov2-groups { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
@container content (max-width: 760px) {
  .ov2-groups { grid-template-columns: minmax(0, 1fr); }
}

/* Four stacked severity grids in the Findings card */
.ov2-punch-stack { display: flex; flex-direction: column; gap: 8px; }
.ov2-punch-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px; align-items: center; }
.ov2-punch-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; text-decoration: none; text-align: right; }
.ov2-punch-label.sev-crit { color: var(--sev-critical); }
.ov2-punch-label.sev-high { color: var(--sev-high); }
.ov2-punch-label.sev-med { color: var(--sev-medium); }
.ov2-punch-label.sev-ok { color: var(--sev-ok); }
.ov2-punch-row .ov2-punchcard.year { gap: 1.5px; }

/* ── Overview v2 round 5: hero layout, toggle affordance ─────────────────── */
/* Chart clears the headline: offset right, number block owns the left. */
.ov2-hero-trend { left: 26%; width: 74%; }
.ov2-hero-count { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ov2-hero-deltas { flex-direction: column; align-items: flex-start; }
.ov2-hero-tip { top: 42px; left: 50%; right: auto; transform: translateX(-50%); }
.ov2-hero-top { margin-bottom: 6px; }
.ov2-hero { padding: 20px 24px 12px; }

/* Page-level view switches are binary controls, not actions. Keep their labels,
   freshness copy, and tracks on the same optical baseline. */
.ov-page .page-head .actions {
  align-items: center; flex-wrap: wrap; justify-content: flex-end;
}
.ov-head-switch {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--fg-2); font-size: var(--text-xs); line-height: 18px;
}

/* Segmented toggles, app-wide: no boxed group, no joined borders — quiet
   ghost options whose active state reuses the design system's EXISTING
   active recipe (.filter-pill.active: accent-bg fill + accent-border +
   accent text), so on/off is unmistakable without inventing a new style.
   Also covers PersonaToggle and the hero/toolbar segs. */
.seg {
  gap: 2px; padding: 2px; border-radius: 999px;
  background: transparent; border: none;
}
.seg .btn, .seg .btn:first-child, .seg .btn:last-child {
  border: 1px solid transparent; background: transparent; box-shadow: none;
  border-radius: 999px; margin-left: 0; color: var(--fg-3);
}
.seg .btn:hover { background: var(--bg-3); color: var(--fg-1); }
.seg .btn.on, .seg .btn.on:hover {
  border-color: var(--accent-border);
  background-color: var(--accent-bg);
  background-image: linear-gradient(135deg, var(--accent-bg), transparent 70%);
  color: var(--accent);
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-control);
}
.seg .btn:disabled { opacity: 0.3; }
.seg .btn:disabled:hover { background: transparent; color: var(--fg-3); }

/* Standalone toolbar toggles share the same active recipe. */
.ov2-toolbar > .btn.sm { border-radius: 999px; }
.ov2-toolbar > .btn.sm.on {
  border-color: var(--accent-border);
  background-color: var(--accent-bg);
  background-image: linear-gradient(135deg, var(--accent-bg), transparent 70%);
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

/* Compact dot legend under the balance radial. */
.ov2-radial-legend {
  display: flex; flex-wrap: wrap; gap: 4px 14px; justify-content: center;
  font-size: var(--text-2xs);
}
.ov2-radial-legend a { color: var(--fg-3); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.ov2-radial-legend a:hover { color: var(--fg-1); }
.ov2-radial-legend .d {
  width: 6px; height: 6px; border-radius: 999px; background: currentColor;
  display: inline-block;
}

/* ── Overview v2 round 6 ─────────────────────────────────────────────────── */
/* The hero's text rows sat z-above the SVG and ate pointer events — chart
   hover only worked in the uncovered band. Rows pass pointers through;
   links/buttons stay interactive. */
.ov2-hero-top, .ov2-hero-bottom { pointer-events: none; }
.ov2-hero-top :is(a, button), .ov2-hero-bottom :is(a, button) { pointer-events: auto; }

/* Fixed hero height — switching series must not resize the banner. */
.ov2-hero { height: 216px; min-height: 0; }

/* Cards in one row share the row's height (grid stretch); the flip inner
   grid inherits it so both faces fill, feet pinned by margin-top:auto. */
.ov2-groups { align-items: stretch; }
.ov2-groups > .ovflip, .ov2-groups > .ovflip .ovflip-inner { height: 100%; }
.ovflip-face { height: 100%; }

/* Radial hover tooltip (instant HTML, not the laggy native SVG title). */
.ov2-radial-wrap { position: relative; }
.ov2-radial-tip {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: var(--text-2xs); color: var(--fg-2); background: var(--bg-1);
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  padding: 3px 8px; pointer-events: none; white-space: nowrap;
}
.ov2-radial-ring { cursor: pointer; transition: opacity var(--dur-base) var(--ease-out); }

/* ── Overview v2 round 7 (feedback distillation) ─────────────────────────── */
/* Maximized card: full grid width, instrument + table side by side. */
.ovflip.is-max { grid-column: 1 / -1; order: -1; }
.ovflip-max-inner {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 20px; align-items: stretch;
}
.ovflip-max-btn { right: 42px; }
.ovflip.is-max .ovflip-max-btn { right: 14px; }
@container content (max-width: 900px) {
  .ovflip-max-inner { grid-template-columns: minmax(0, 1fr); }
}

/* Legend total replaces the removed ring-center number. */
.ov2-legend-total { color: var(--fg-1); font-weight: var(--weight-semibold); margin-right: 4px; }

/* Rail below the sections: full-width card, events flow in columns. */
.ov2-rail .ov2-rail-rows, .ov2-rail { width: 100%; }
.ov2-rail { display: block; column-gap: 24px; }
@container content (min-width: 900px) {
  .ov2-rail { columns: 2; }
  .ov2-rail .eyebrow { column-span: all; }
}
.ov2-rail-row { break-inside: avoid; }

/* Max mode reuses .ovflip-face styling but NOT the flip stacking — each face
   is its own grid column. */
.ovflip-max-inner > .ovflip-face { grid-area: auto; }
.ovflip.is-max .ov2-radial-full { max-width: 220px; }

/* Reveal targets keep breathing room above when scrolled to. */
.ovflip.is-max, .ov2-rail { scroll-margin-top: 16px; }

/* Narrow hero: pills never wrap internally; the row wraps instead. */
.ov2-hero-top { flex-wrap: wrap; row-gap: 6px; align-items: center; }
.ov2-verdict { white-space: nowrap; }

/* Delta lines get a faint backdrop so chart lines can't strike them through. */
.ov2-hero-deltas span {
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  border-radius: var(--radius-sm); padding: 0 4px; margin-left: -4px; width: fit-content;
}

/* Narrow containers: the wrapped toggle rows need the banner to grow —
   clipping the deltas is worse than a taller hero. Desktop stays fixed. */
@container content (max-width: 900px) {
  .ov2-hero { height: auto; min-height: 220px; }
}

/* ── Overview v2 round 8 (review) ────────────────────────────────────────── */
/* Screen-reader-only summary text (grids are decorative behind it). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The compact hero chart no longer runs behind the toggles or chips:
   reserved top band and right inset. */
.ov2-hero-trend { top: 44px; bottom: 6px; right: 10px; height: auto; width: auto; }

/* In the 2-across zone the odd last card spans the row instead of leaving a
   hole; in the 3-across zone all three fit one row and this must not fire. */
@container content (min-width: 761px) and (max-width: 1059px) {
  .ov2-groups > :nth-child(3):last-child { grid-column: 1 / -1; }
}

/* Radial legend counts (hover is enhancement, not the only precise reading) */
.ov2-legend-n { color: var(--fg-1); font-variant-numeric: tabular-nums; }

/* ===== PLAYBOOKS (library cards + detail) ===== */
/* The library leads with what applies to this estate, so cards carry counts and
   severity, not just a title. Styles live here rather than inline on the page —
   the old grid was an inline style object, which is why the cards and the drawer
   had drifted to different chip tones for the same effort value. */
.pb-section { margin-bottom: 28px; }
.pb-section-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.pb-section-head .card-title { font-size: var(--text-sm); }
.pb-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.pb-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); color: inherit; font: inherit;
  transition: border-color 120ms ease, transform 120ms ease;
}
.pb-card:hover { border-color: var(--border-strong); transform: translateY(-1px); }
/* The card's readable body IS the button — the title/chips/why live inside it,
   so a click anywhere on them opens the playbook with no CSS involved. The
   footer is a SIBLING, which is what lets its standard codes be real buttons. */
.pb-card-main {
  flex: 1; display: flex; flex-direction: column; gap: 10px;
  padding: 0; margin: 0; text-align: left;
  background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.pb-card:has(.pb-card-main:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.pb-card-main:focus-visible { outline: none; }
/* Position in the ranked queue — the sort order made visible, since the order
   is the page's actual recommendation. */
.pb-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: var(--radius-sm); background: var(--surface-3); color: var(--fg-2);
  font-size: 10px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums;
}
.pb-card-worklist { color: var(--accent); text-decoration: none; font-size: var(--text-xs); }
.pb-card-worklist:hover { text-decoration: underline; }
.pb-card-stds { display: inline-flex; gap: 6px; flex-wrap: wrap; }
/* A standard code is a control now, not decoration — it opens its explanation. */
.pb-std-btn {
  padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--fg-3); font: inherit; font-size: var(--text-xs);
  border-bottom: 1px dotted var(--border-strong);
}
.pb-std-btn:hover { color: var(--fg-1); border-bottom-color: var(--accent); }
.pb-std-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Chip-shaped variant, for the detail panel's Standards card and the popup's
   sibling switcher. */
.pb-standard-btn { cursor: pointer; font: inherit; }
.pb-standard-btn:hover { border-color: var(--accent); color: var(--fg-1); }
.pb-card-head { display: flex; align-items: center; gap: 8px; }
.pb-card-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.pb-card-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* Clamped so a long "why" cannot make one card tower over its row. */
.pb-card-why {
  font-size: var(--text-xs); line-height: var(--leading-relaxed);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pb-card-foot {
  display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
  font-size: var(--text-xs); color: var(--fg-3); margin-top: auto;
}
.pb-facet { max-width: 220px; }
/* The standards facet carries "ASI09 — Human-Agent Trust Exploitation", not a
   bare code, so it needs more room than the provider facet beside it. The open
   popup sizes to its content; this is the CLOSED control's width. */
.pb-facet.wide { max-width: 340px; }
.pb-count { margin-left: auto; font-size: var(--text-xs); }

.pb-prose { font-size: var(--text-sm); color: var(--fg-2); line-height: var(--leading-relaxed); }
.pb-standards { display: flex; gap: 6px; flex-wrap: wrap; }
.pb-step { margin-bottom: 18px; }
.pb-step:last-child { margin-bottom: 0; }
.pb-step-title { font-weight: var(--weight-semibold); font-size: var(--text-sm); margin-bottom: 4px; }
.pb-step-desc { font-size: var(--text-xs); margin-bottom: 8px; line-height: var(--leading-relaxed); }
.pb-cli { position: relative; }
.pb-cli .codeblock { margin: 0; padding-right: 44px; }
.pb-cli-copy { position: absolute; top: 6px; right: 6px; }
.pb-console { margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; }
.pb-claim-label { display: block; font-size: var(--text-xs); margin: 12px 0 6px; }
/* `.input` is sized for a toolbar field; a proof textarea has to fill the modal. */
#pb-claim-justification { width: 100%; min-height: 72px; resize: vertical; }
.pb-claim-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

/* Facts cards (instance, GCE, database details): two responsive columns instead of one
   full-width column of short rows. The title spans both. */
.facts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); column-gap: 32px; }
.facts-grid > .card-title { grid-column: 1 / -1; }

/* Summary card: entities read as chips, the rest as plain sentences. */
.story-text { font-size: 14px; line-height: 1.7; }
.story-entity {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; font-weight: 600;
  padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,0.07); border: 1px solid var(--border);
  white-space: nowrap;
}
[data-theme="light"] .story-entity { background: rgba(10,20,40,0.06); }
/* Summary beside Status & action on wide screens, stacked on narrow ones. */
.overview-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.overview-pair > .section-card { margin-bottom: 16px !important; }

/* ============ Valkan console — Valkan design system ============
   Tokens (dark default + light mode + legacy compat aliases) live in
   styles/tokens.css. Both entry points (main.tsx and main-endpoint.tsx)
   import only this file, so the @imports below are the single load path. */


* { box-sizing: border-box; }
html, body, #root { height: 100%; margin: 0; }
body {
  font-family: var(--font-sans);
  color: var(--fg);
  background: var(--bg);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; }
input { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
/* Scrollbar styling comes from tokens.css (token-driven, theme-aware). */

/* Shell layout (app grid, sidebar, subhead, content) lives in styles/chrome.css. */

.icon-btn { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--fg-2); }
.icon-btn:hover { background: var(--hover); }


/* ============ Generic UI ============ */
/* Segmented control (e.g. Access graph ↔ Mind map view switch). */
.seg-row { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
.seg-label { font-size: 12px; color: var(--fg-3); }
.seg-hint { font-size: 12px; color: var(--fg-4); }
.seg {
  display: inline-flex; gap: 2px; padding: 2px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.seg-btn {
  font-size: 12px; padding: 4px 12px; border: 0; border-radius: 6px;
  background: transparent; color: var(--fg-3); cursor: pointer; white-space: nowrap;
}
.seg-btn:hover { color: var(--fg-2); background: var(--surface-3); }
.seg-btn.on { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }

/* .card/.card-header/.card-body were pre-Valkan leftovers shadowing
   chrome.css's .section-card/.section-card-head — removed; all detail-view
   call sites migrated to .section-card. .card-title/.card-sub survive
   (chrome.css styles .card-title as a .section-card child; .card-sub has
   no cascade duplicate). */
.card-title { font-weight: 600; letter-spacing: -0.01em; font-size: 13px; }
.card-sub { color: var(--fg-3); font-size: 12px; }

/* ============ Overview page ============ */
.page { padding: 20px 24px 40px; max-width: 1640px; margin: 0 auto; }
.page-header { display: flex; align-items: end; gap: 16px; margin-bottom: 18px; }
.page-title { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; }
.page-sub { color: var(--fg-3); font-size: 13px; margin-top: 4px; }
.page-actions { margin-left: auto; display: flex; gap: 8px; }

/* .stat-grid comes from chrome.css (4-col Valkan grid). */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  cursor: pointer;
  transition: all .15s ease;
}
.stat:hover { border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--shadow); }
.stat.active { border-color: var(--accent-border); background: linear-gradient(180deg, var(--accent-bg) 0%, var(--bg-2) 60%); }
.stat-row { display: flex; align-items: center; gap: 8px; }
.stat-icon {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--surface-3); color: var(--fg-2);
  display: grid; place-items: center;
}
.stat-icon.accent { background: var(--accent-soft); color: var(--accent); }
.stat-icon.amber { background: var(--risk-medium-bg); color: var(--risk-medium); }
.stat-icon.red { background: var(--risk-critical-bg); color: var(--risk-critical); }
.stat-icon.green { background: var(--risk-low-bg); color: var(--risk-low); }
.stat-icon.violet { background: color-mix(in srgb, var(--viz-4) 14%, transparent); color: var(--viz-4); }
.stat-icon.teal { background: color-mix(in srgb, var(--viz-6) 14%, transparent); color: var(--viz-6); }
.stat-label { color: var(--fg-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
/* margin-top:auto bottom-aligns the value+delta so a wrapped 2-line label
   (e.g. "Excessive permissions") doesn't shift the number relative to its
   single-line neighbours in the same grid row. */
.stat-value { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin-top: auto; }
.stat-delta { font-size: 11px; color: var(--fg-3); margin-top: 2px; display: flex; gap: 4px; align-items: center; }
.stat-delta.up { color: var(--risk-low); }
.stat-delta.down { color: var(--risk-critical); }

.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ============ AI Agents page ============ */
.agents-shell { display: grid; grid-template-columns: 1fr; height: 100%; }

.list-search {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--fg-3);
  background: var(--surface);
}
.list-search input { border: 0; outline: 0; background: transparent; width: 100%; font-size: 12px; }
.list-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 11px; color: var(--fg-2);
  background: var(--surface);
}
.filter-chip:hover { background: var(--hover); }
.filter-chip.active { background: var(--accent-soft); color: var(--accent-2); border-color: var(--accent); }

/* Inventory table */
.inv-wrap { padding: 16px 20px 40px; min-width: 0; } /* a grid item: let .tbl-wrap scroll, not the page */
.inv-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
/* Tables (.tbl-wrap/.tbl) come from chrome.css (glass table). */

.cell-agent { display: flex; align-items: center; gap: 10px; }
.cell-agent .nm { font-weight: 500; color: var(--fg); }
.cell-agent .id { font-family: var(--font-mono); font-size: 10px; color: var(--fg-4); }

.platforms { display: flex; gap: -4px; }
.platform-pill {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--surface-3); border: 1px solid var(--surface);
  display: grid; place-items: center;
  font-size: 10px; font-weight: 600;
  margin-left: -4px;
}
.platform-pill:first-child { margin-left: 0; }
.platform-pill.more { background: var(--fg-1); color: var(--fg-inverse); font-size: 9px; }

.pagination {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid var(--border-soft);
  background: var(--surface-2);
  font-size: 12px; color: var(--fg-3);
}
.pager { display: flex; gap: 4px; }
.pager .pg { height: 26px; padding: 0 10px; border-radius: 6px; display: inline-flex; align-items: center; white-space: nowrap; border: none; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pager button.pg:disabled { opacity: 0.4; cursor: default; }
.pager .pg:hover:not(:disabled) { background: var(--hover); }


/* ============ Agent Detail ============ */
/* .detail-shell/.detail-head/.det-logo/.det-info/.status-select/
   .detail-tabs/.detail-body/.detail-grid were pre-Valkan leftovers here,
   shadowing chrome.css's correctly-styled versions (48px glossy .det-logo,
   pill-shaped .status-select, etc.) — removed. chrome.css's .detail-grid
   is now the sole definition (minmax(0,1fr) 300px); its `> *` min-width:0
   and narrow-viewport collapse still need porting if not already present —
   verify visually. */

/* Identity graph */
.graph-card { padding: 0; overflow: hidden; }
.graph-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); background: var(--surface-2); }
.graph-toolbar .spacer { flex: 1; }
.graph-canvas {
  position: relative;
  height: 360px;
  overflow: auto;
  background:
    radial-gradient(circle at 1px 1px, var(--border-default) 1px, transparent 0) 0 0 / 18px 18px,
    var(--surface);
}
/* Fixed-size inner stage: the SVG connectors (.glines) and the node divs
   (.gnode) are positioned in this one 1000x360 space, so they always align.
   The .graph-canvas scrolls when the viewport is narrower than the stage. */
/* The wrap carries the zoom-scaled box size so .graph-canvas scrolls
   correctly; the stage is a fixed 1000x360 and is visually resized by the
   inline `transform: scale()`. */
.graph-stage-wrap { margin: 0 auto; }
.graph-stage {
  position: relative;
  width: 1000px;
  height: 360px;
}

/* Full-screen graph: the card lifts out as a fixed overlay. */
.graph-card.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  border-radius: 0;
  display: flex;
  flex-direction: column;
}
.graph-card.fullscreen .graph-canvas {
  flex: 1;
  height: auto;
}
.graph-hint {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 10px;
  color: var(--fg-4);
  font-family: var(--font-mono);
}
.gnode {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 10px 12px;
  min-width: 150px;
  box-shadow: var(--shadow-sm);
}
.gnode .gn-label { font-size: 10px; text-transform: uppercase; color: var(--fg-4); letter-spacing: 0.06em; font-weight: 600; margin-bottom: 4px; }
.gnode .gn-row { display: flex; align-items: center; gap: 8px; }
.gnode .gn-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--surface-3); display: grid; place-items: center; font-size: 10px; font-weight: 600; }
.gnode .gn-name { font-size: 12px; font-weight: 500; }
.gnode .gn-sub { font-size: 11px; color: var(--fg-3); }
.gnode.agent { border: 2px solid var(--risk-high); box-shadow: 0 0 0 4px var(--risk-high-bg); }
.gnode.action { min-width: 180px; padding: 8px 10px; }
.gnode .gn-tag { font-size: 10px; color: var(--fg-3); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }

/* The connector SVG shares the node divs' 1000x360 pixel coordinate space.
   It must NOT stretch (no inset:0 / preserveAspectRatio=none) or the lines
   drift away from the nodes. */
.glines { position: absolute; left: 0; top: 0; pointer-events: none; }

/* Side card. .side-row itself now comes from chrome.css only — this file's
   copy shadowed it with a dashed-border, .side-card padding remains here as
   a modifier applied alongside .section-card (e.g. `section-card side-card`). */
.side-card { padding: 14px; }

/* Risk analysis */
.risk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.risk-bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.risk-bar .fill { height: 100%; border-radius: 999px; }
.findings-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.findings-table th, .findings-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-soft); text-align: left; font-size: 12px; }
.findings-table th { color: var(--fg-3); font-weight: 600; text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; }

/* Remediation */
.remed-item { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-bottom: 12px; }
.remed-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; }
.remed-head:hover { background: var(--surface-2); }
.remed-num { width: 22px; height: 22px; border-radius: 50%; background: var(--surface-3); color: var(--fg-2); display: grid; place-items: center; font-size: 11px; font-weight: 600; }
.remed-title { font-weight: 500; font-size: 13px; }
.remed-status {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  font-size: 11px; background: var(--surface-3); color: var(--fg-2);
}
.remed-status.open { background: var(--risk-medium-bg); color: var(--risk-medium); }
.remed-status.done { background: var(--risk-low-bg); color: var(--risk-low); }
/* Compact remediation rows: one aligned column after the severity chip. */
.remed-row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 2px; border-bottom: 1px solid var(--border-soft); }
.remed-row:last-child { border-bottom: none; padding-bottom: 4px; }
/* Row is a <button> for keyboard/focus semantics (feedback.md P2) — reset browser chrome. */
.remed-row-compact { width: 100%; background: none; border: none; border-radius: 0; font: inherit; color: inherit; align-items: center; }
.remed-row-compact:hover { background: var(--hover); }
.remed-row-compact:focus-visible { outline: 2px solid var(--accent-2); outline-offset: -2px; }
.remed-row-compact svg { flex-shrink: 0; color: var(--fg-4); }
.remed-main { flex: 1; min-width: 0; display: grid; gap: 6px; justify-items: start; }
.remed-row-top { display: flex; align-items: center; gap: 10px; width: 100%; }
.remed-row-top .remed-title { font-size: 14px; }
.remed-desc { font-size: 13px; line-height: 1.5; color: var(--fg); }
.remed-meta { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; font-size: 12px; color: var(--fg-3); }
.remed-recur { color: var(--risk-high); font-weight: 600; }
.remed-ticket { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-soft); background: var(--surface-2); border-radius: 999px; padding: 2px 10px; font-size: 11px; color: var(--fg-2); }
.remed-ticket a { color: var(--accent-2); text-decoration: none; }
.remed-ticket a:hover { text-decoration: underline; }
.remed-ticket-sync { background: none; border: none; cursor: pointer; font-size: 11px; color: var(--fg-4); padding: 0; }
.remed-ticket-sync:hover { color: var(--fg-2); }
.remed-ticket-create { cursor: pointer; color: var(--accent-2); font-family: inherit; }
.remed-ticket-create:hover { border-color: var(--border-strong); }
.remed-proof { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-3); max-width: 100%; }
.remed-proof-just { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.remed-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; width: 100%; }
.remed-history-btn { margin-left: auto; }
.guide {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
  padding: 12px;
}
.guide .gh { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; margin-bottom: 6px; color: var(--fg-2); }
.guide p { margin: 0 0 8px; color: var(--fg-2); font-size: 12px; line-height: 1.55; }
.guide ul { margin: 0; padding-left: 18px; color: var(--fg-2); font-size: 12px; }
.guide ul li { margin-bottom: 4px; }
.guide code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; }

.fd-field { display: block; margin-bottom: 12px; font-size: 12px; }
.fd-field > span { display: block; color: var(--fg-4); margin-bottom: 4px; }
.fd-field textarea,
.fd-field input,
.fd-field select {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  color: var(--fg);
  font-size: 13px;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  /* Blank the app out behind the dialog: a solid scrim over the overlay tint,
     plus a blur so nothing underneath reads as still-interactive content. In
     dark theme --bg-overlay alone is only ~0.35 alpha and the app showed
     straight through, making the popup look like it floated on top. */
  background: color-mix(in oklab, var(--bg-1) 78%, var(--bg-overlay));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.modal {
  width: min(440px, 92vw);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-3);
}
/* Simple dialogs put .modal-title straight inside .modal (no header/body/footer
   sections) — those need the modal itself to carry the padding. Sectioned
   modals (.modal > .modal-header/.modal-body) pad their own sections, so scope
   this to the direct-title layout and leave them untouched. */
.modal:has(> .modal-title) { padding: 20px 22px; }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.modal-title { font-weight: 600; }
.modal-body { padding: 16px; font-size: 13px; color: var(--fg-2); }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* Action row for the simple dialogs (Cancel/confirm). Used by several modals but
   was never defined — buttons rendered unspaced and left-aligned. */
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* Tools & actions */
.tools-table { width: 100%; border-collapse: collapse; }
.tools-table th, .tools-table td { padding: 9px 12px; border-bottom: 1px solid var(--border-soft); font-size: 12px; text-align: left; }
.tools-table th { color: var(--fg-3); text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em; font-weight: 600; }

/* Endpoint tables: keep long hostnames / IP:port / detail from forcing
   horizontal scroll. Full value stays in the cell's title tooltip + expand drawer. */
.ep-ellip { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-ellip-sm { max-width: 150px; }

/* Lifecycle timeline */
.timeline { position: relative; padding-left: 18px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item::before { content: ""; position: absolute; left: -18px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); }
.tl-item.critical::before { border-color: var(--risk-critical); }
.tl-item.info::before { border-color: var(--accent); }
.tl-item.ok::before { border-color: var(--risk-low); }
.tl-when { font-size: 11px; color: var(--fg-3); margin-bottom: 2px; }
.tl-what { font-size: 13px; font-weight: 500; }
.tl-who { font-size: 12px; color: var(--fg-3); margin-top: 2px; }

/* Identity graph SVG line */
.gline { stroke: var(--border-strong); stroke-width: 1.5; fill: none; }
.gline.active { stroke: var(--accent); stroke-width: 2; }

/* Distribution chart */
.dist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.dist-list { display: flex; flex-direction: column; gap: 8px; }
.dist-row { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.dist-row .name { flex: 1; color: var(--fg-2); }
.dist-row .num { font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 500; }
.donut { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.donut .center { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.donut .center .v { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; }
.donut .center .l { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }

/* Sparkline */
.spark { display: block; width: 100%; height: 32px; }

/* small util */
.row-flex { display: flex; align-items: center; gap: 8px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--fg-3); }
.sep-v { width: 1px; height: 18px; background: var(--border); }

/* Highlight on hover for clickable */
.clickable { cursor: pointer; }

/* ============ frontend-new additions (not in design prototype) ============ */
.center-screen { display: grid; place-items: center; height: 100vh; background: var(--surface-2); }
.spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--surface-3); border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Indeterminate progress bar — for work with no deterministic length
   (e.g. a running scan). */
.progress-indeterminate {
  height: 3px;
  background: var(--accent-soft);
  overflow: hidden;
}
.progress-indeterminate::after {
  content: "";
  display: block;
  height: 100%;
  width: 38%;
  background: var(--accent);
  border-radius: 2px;
  animation: progress-slide 1.1s ease-in-out infinite;
}
@keyframes progress-slide {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

.state-msg { text-align: center; }
.state-msg .t { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
.state-msg .s { font-size: 13px; color: var(--fg-3); margin-bottom: 14px; }

.banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; margin: 0 0 14px;
  font-size: 12px; color: var(--risk-medium);
  background: var(--risk-medium-bg); border-radius: var(--r-sm);
}

/* TopBar slots (M1, M2) */
.count-badge {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--surface-3);
  color: var(--fg-2);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  margin-left: 8px;
}
.count-badge .n { color: var(--fg); font-weight: 600; }
.top-action { display: flex; align-items: center; gap: 6px; }

/* Sidebar footer help icon */
.foot-help {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--fg-3);
  flex-shrink: 0;
}
.foot-help:hover { background: var(--hover); color: var(--fg); }

/* ============ UI v1 rebuild — atoms ============ */

/* SeverityBadge — uppercase, filled, text-only (no dot). Distinct from .chip */
.sev {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  white-space: nowrap;
}
.sev.critical { background: var(--risk-critical-bg); color: var(--risk-critical); }
.sev.high     { background: var(--risk-high-bg);     color: var(--risk-high); }
.sev.medium   { background: var(--risk-medium-bg);   color: var(--risk-medium); }
.sev.low      { background: var(--risk-low-bg);      color: var(--risk-low); }
.sev.info     { background: var(--risk-info-bg);     color: var(--risk-info); }

/* RiskScorePill — numeric, colored by threshold. Distinct from .chip and .sev */
.risk-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 2px 8px;
  border-radius: var(--r-sm);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px; font-weight: 600; font-family: var(--font-mono);
  border: 1px solid transparent;
}
.risk-pill.high { background: var(--risk-critical-bg); color: var(--risk-critical); }
.risk-pill.mid  { background: var(--risk-medium-bg);   color: var(--risk-medium); }
.risk-pill.low  { background: var(--risk-low-bg);      color: var(--risk-low); }

/* EntityTypeBadge — colored solid pill */
.etype {
  display: inline-block;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 3px;
  background: var(--fg-1); color: var(--fg-on-color);
  white-space: nowrap;
}
.etype.agent    { background: var(--viz-4); }
.etype.nhi      { background: var(--viz-3); }
.etype.human    { background: var(--viz-7); }
.etype.role     { background: var(--viz-1); }
.etype.oauth    { background: var(--viz-2); }
.etype.finding  { background: var(--risk-critical); }
.etype.policy   { background: var(--fg-2); }
.etype.secret   { background: var(--fg-1); }
.etype.incident { background: var(--risk-high); }
.etype.playbook { background: var(--viz-3); }

/* SurfaceTag — border-only muted pill */
.surface-tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10.5px; color: var(--fg-3); font-weight: 500;
  background: var(--surface);
  white-space: nowrap;
}

/* ScanFreshnessPill — green/amber/red dot + "Last scan Xm ago" */
/* 42M-407 pass 2: relocated from the sidebar footer (a vertical stack, where
   this margin-bottom spaced it from the next row) to Subhead's top-right
   flex row (`.subhead-chrome`, which already has its own `gap` between
   siblings) — the leftover margin was making align-items:center center the
   MARGIN box, not the content box, pinning the pill to the row's top edge
   instead of its vertical center. */
.scan-pill {
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--fg-2);
}
.scan-pill .dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.scan-pill .dot.fresh { background: var(--risk-low); box-shadow: 0 0 0 3px var(--risk-low-bg); }
.scan-pill .dot.stale { background: var(--risk-medium); box-shadow: 0 0 0 3px var(--risk-medium-bg); }
.scan-pill .dot.cold  { background: var(--risk-critical); box-shadow: 0 0 0 3px var(--risk-critical-bg); }
.scan-pill .age { color: var(--fg); font-weight: 500; }
.scan-pill .lbl { color: var(--fg-3); }

/* EmptyState — 48px icon + title + sub + optional action */
.empty {
  text-align: center; padding: 60px 24px;
  background: var(--surface); border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
}
.empty .empty-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--surface-3); color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.empty .empty-title { font-weight: 600; margin-bottom: 4px; font-size: 14px; color: var(--fg); }
.empty .empty-sub { color: var(--fg-3); font-size: 12.5px; margin-bottom: 14px; max-width: 420px; margin-left: auto; margin-right: auto; }
.empty .empty-action { margin-top: 4px; }
.empty.planned { border-style: solid; border-color: var(--border); background: var(--surface-2); }

/* Destructive action button — pair with .sm for table rows. */
.btn.danger {
  border-color: var(--risk-critical);
  color: var(--risk-critical);
}
.btn.danger:hover:not(:disabled) { background: var(--risk-critical); color: var(--fg-on-color); }
.btn.danger:disabled { opacity: 0.45; cursor: default; }

/* ============ Viz primitives (agent detail charts) ============ */
.legend-dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; display: inline-block; }
.mini-stats { display: flex; gap: 24px; margin-top: 12px; flex-wrap: wrap; }
.mini-stat .v { font-size: 22px; font-weight: 600; font-family: var(--font-mono); letter-spacing: -0.02em; margin-top: 4px; }
/* Text variant — the 22px mono treatment is for short numbers only. */
.mini-stat .v.txt { font-size: 13px; font-weight: 500; font-family: inherit; letter-spacing: normal; margin-top: 8px; }
.story-flow { display: flex; flex-direction: column; }
.story-step { display: grid; grid-template-columns: 24px 1fr; gap: 12px; padding: 8px 0; position: relative; }
.story-step::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 3px; border-radius: 2px; background: var(--rail, var(--border-soft)); opacity: .35; }
.story-num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 700; position: relative; z-index: 1; }
.story-step .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--fg-3); margin-bottom: 2px; }
.path-diagram-wrap { overflow-x: auto; padding: 4px 0; }
.pd-node { cursor: pointer; } .pd-node.dim, .pd-edge.dim { opacity: .35; }
.pd-edge-label { font-size: 10px; fill: var(--fg-3); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.viz-legend { display: flex; gap: 14px; align-items: center; font-size: 11px; color: var(--fg-3); flex-wrap: wrap; margin-top: 8px; }
.viz-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 5px; vertical-align: -2px; }
.viz-fallback > summary { cursor: pointer; font-size: 12px; color: var(--fg-3); padding: 8px 16px; border-top: 1px solid var(--border-soft); user-select: none; }
.viz-fallback[open] > summary { border-bottom: 1px solid var(--border-soft); }
/* Radial score dials */
.dial { position: relative; display: inline-grid; place-items: center; flex-shrink: 0; }
.dial svg { display: block; }
/* Flex column (not grid): the value + "/100" pair must center as ONE block —
   grid rows would center each line in its own half of the ring. */
.dial-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; }
.dial-value { font-family: var(--font-mono); font-weight: 700; color: var(--fg); letter-spacing: -0.02em; line-height: 1; }
.dial-sub { display: block; font-size: 10px; color: var(--fg-4); margin-top: 2px; }
/* Dot-keyed fired-rule lines (replaces compact ranked bars) */
.rule-line { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); padding: 2px 0; min-width: 0; }
.rule-line .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-line .w { font-family: var(--font-mono); font-size: 11px; color: var(--fg); }
/* Dot-keyed count chips (replaces criticality/severity segment bars) */
.count-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.count-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--fg-3); background: var(--surface-2); border: 1px solid var(--border-soft); border-radius: 999px; padding: 2px 8px; }
.count-chip .n { font-family: var(--font-mono); color: var(--fg); }
/* Blast rings */
.blast-rings { display: flex; justify-content: center; }
.blast-rings svg { max-width: 100%; height: auto; overflow: visible; }
.br-ring-label { font-size: 10px; fill: var(--fg-4); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.br-center-label { font-size: 11px; fill: var(--fg-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.br-dot { cursor: pointer; }
.br-dot.dim { opacity: .35; }
.br-dot:focus-visible > circle { stroke: var(--accent); }
.br-dot-label { font-size: 11px; fill: var(--fg-2); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.br-dot-score { font-family: var(--font-mono); font-size: 10px; fill: var(--fg); }

/* In-product external documentation. The HTML is generated from the
   allowlisted Markdown subset by scripts/build_external_docs.py. */
.external-doc-page { max-width: 1100px; }
.external-doc-body { color: var(--fg-2); line-height: 1.65; }
.external-doc-body h1 { color: var(--fg-1); font-size: 26px; letter-spacing: -0.02em; margin: 0 0 10px; }
.external-doc-body .external-doc-summary { color: var(--fg-3); font-size: 14px; margin: -4px 0 18px; }
.external-doc-body h2 { color: var(--fg-1); font-size: 18px; margin: 28px 0 8px; padding-top: 12px; border-top: 1px solid var(--border-subtle); }
.external-doc-body h3 { color: var(--fg-1); font-size: 14px; margin: 20px 0 6px; }
.external-doc-body p { margin: 0 0 12px; font-size: 13px; }
.external-doc-body ul, .external-doc-body ol { margin: 0 0 14px; padding-left: 22px; font-size: 13px; }
.external-doc-body li { margin: 5px 0; }
.external-doc-body a { color: var(--accent); }
.external-doc-body blockquote { margin: 14px 0; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--surface-2); }
.external-doc-body code { color: var(--fg-1); background: var(--bg-inset); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 1px 4px; font-family: var(--font-mono); font-size: 11px; }
.external-doc-body pre { overflow-x: auto; padding: 12px; border-radius: var(--radius-md); background: var(--bg-inset); border: 1px solid var(--border-subtle); }
.external-doc-body pre code { padding: 0; border: 0; background: transparent; }
.external-doc-body .doc-code-block { position: relative; }
.external-doc-body .doc-copy-btn { position: absolute; top: 6px; right: 6px; }
.external-doc-body table { width: 100%; border-collapse: collapse; margin: 12px 0 20px; font-size: 12px; }
.external-doc-body th, .external-doc-body td { border: 1px solid var(--border-subtle); padding: 8px 10px; text-align: left; vertical-align: top; }
.external-doc-body th { color: var(--fg-1); background: var(--surface-2); font-weight: 600; }
/* One set of steps, two routes through them ({{tab:}} in docs/external). The strip
   sticks because the routes are long enough to scroll past the choice. */
.external-doc-body .doc-tabs { margin: 18px 0 8px; }
.external-doc-body .doc-tab-strip { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; background: var(--surface); border-bottom: 1px solid var(--border-subtle); }
.external-doc-body .doc-tab-btn { color: var(--fg-3); background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: 6px 14px; font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.external-doc-body .doc-tab-btn:hover { color: var(--fg-1); border-color: var(--accent-border); }
.external-doc-body .doc-tab-btn.is-active { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border); }
.external-doc-body .doc-tab-panel.is-hidden { display: none; }
.external-doc-body .doc-tab-panel > h2:first-child { border-top: 0; padding-top: 0; }
.external-doc-groups { display: flex; flex-direction: column; gap: 28px; }
.external-doc-group + .external-doc-group { padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.external-doc-group-title { color: var(--fg-1); font-size: 18px; margin: 0 0 12px; }
.external-doc-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.external-doc-card { display: block; color: inherit; text-decoration: none; transition: border-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.external-doc-card:hover { border-color: var(--accent-border); transform: translateY(-1px); }
.external-doc-card .ctx { display: inline-block; color: var(--accent); font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.external-doc-card h2 { color: var(--fg-1); font-size: 16px; margin: 10px 0 5px; }
.external-doc-card p { color: var(--fg-3); font-size: 12px; line-height: 1.5; margin: 0 0 12px; }
.external-doc-card-link { color: var(--accent); font-size: 12px; }