/* ============================================================================
   Roxas Agent — MSSP Console
   Server-rendered, no build step. Cross-document View Transitions for motion.
   ========================================================================= */

:root {
  color-scheme: dark;

  --bg-0: #0b0d11;
  --bg-1: #0f1218;
  --panel: #14181f;
  --panel-2: #1a1f28;
  --raise: #202634;
  --line: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.13);
  --chrome: rgba(12, 14, 19, 0.82);          /* frosted sidebar / top strip */

  --fg: #e6e9ef;
  --fg-dim: #9aa4b2;
  --fg-faint: #6b7482;

  --accent: #7c8cff;
  --accent-2: #9db0ff;
  --accent-ink: #0a0e1a;
  --accent-glow: rgba(124, 140, 255, 0.28);
  --link-hover: #c3ccff;

  --tp: #ff6b7d;   /* true positive  */
  --bp: #ffcf6b;   /* benign positive */
  --fp: #5fd39a;   /* false positive */
  --und: #9aa7b4;  /* undetermined   */

  --sev-high: #ff6b7d;
  --sev-medium: #ffb15c;
  --sev-low: #ffe08a;
  --sev-informational: #7fb0ff;

  --ok-bg: #12261b; --ok-line: #2f6b45; --ok-fg: #b9e6c8;
  --err-bg: #2a1518; --err-line: #7a3b3f; --err-fg: #f2c2c6;

  --grain-blend: normal;
  --vignette: rgba(0, 0, 0, .24);

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.55);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;

  --sb-w: 236px;       /* pinned sidebar */
  --sb-rail: 66px;     /* collapsed rail */
  --topstrip-h: 56px;
}

/* ------------------------------------------------------------------- light theme
   A soft, cool off-white palette that keeps the periwinkle identity (deepened
   for contrast on white) and gives the semantic colors readable weights. */
:root[data-theme="light"] {
  color-scheme: light;

  --bg-0: #eceff5;
  --bg-1: #f3f5f9;
  --panel: #ffffff;
  --panel-2: #f4f6fb;
  --raise: #e9edf5;
  --line: rgba(17, 24, 39, 0.10);
  --line-strong: rgba(17, 24, 39, 0.17);
  --chrome: rgba(255, 255, 255, 0.82);

  --fg: #182031;
  --fg-dim: #566076;
  --fg-faint: #8b94a7;

  --accent: #5563e6;
  --accent-2: #4451d6;
  --accent-ink: #ffffff;
  --accent-glow: rgba(85, 99, 230, 0.20);
  --link-hover: #3341c4;

  --tp: #dd2f47;
  --bp: #b9791b;
  --fp: #1a9163;
  --und: #6a7688;

  --sev-high: #dd2f47;
  --sev-medium: #cc6f12;
  --sev-low: #a9800c;
  --sev-informational: #3a6fd0;

  --ok-bg: #e6f6ef; --ok-line: #a6d9c1; --ok-fg: #1b6647;
  --err-bg: #fdecee; --err-line: #f1b3ba; --err-fg: #a52836;

  --grain-blend: multiply;
  --vignette: rgba(17, 24, 39, .07);

  --shadow: 0 1px 2px rgba(17,24,39,.05), 0 14px 30px -16px rgba(17,24,39,.22);
}

/* ------------------------------------------------------------------ aurora theme
   Dark, deep teal-black with a glowing aqua/teal accent instead of the
   periwinkle default -- same structural contrast targets as Midnight (fg
   against panel, semantic colors against both), just a different mood. */
:root[data-theme="aurora"] {
  color-scheme: dark;

  --bg-0: #050e10; --bg-1: #071316; --panel: #0b1a1d; --panel-2: #102327;
  --raise: #163038;
  --line: rgba(180, 255, 245, 0.08); --line-strong: rgba(180, 255, 245, 0.15);
  --chrome: rgba(5, 14, 16, 0.82);

  --fg: #e3f5f2; --fg-dim: #94b9b3; --fg-faint: #5f807a;

  --accent: #2dd4bf; --accent-2: #5eead4; --accent-ink: #04211d;
  --accent-glow: rgba(45, 212, 191, 0.3);
  --link-hover: #99f6e4;

  --tp: #ff6b7d; --bp: #ffcf6b; --fp: #4ade80; --und: #8fa8a3;

  --sev-high: #ff6b7d; --sev-medium: #ffb15c; --sev-low: #ffe08a; --sev-informational: #67e8f9;

  --ok-bg: #0e2b21; --ok-line: #2f6b58; --ok-fg: #b7ecd8;
  --err-bg: #2a1518; --err-line: #7a3b3f; --err-fg: #f2c2c6;

  --grain-blend: normal;
  --vignette: rgba(0, 0, 0, .3);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------------- ember theme
   Dark, warm charcoal-brown with a copper/coral accent. bp (benign-positive
   amber) is kept a full hue-step away from the accent so the two never read
   as the same color at a glance. */
:root[data-theme="ember"] {
  color-scheme: dark;

  --bg-0: #120d0a; --bg-1: #170f0b; --panel: #1d1410; --panel-2: #241a14;
  --raise: #2e2018;
  --line: rgba(255, 235, 220, 0.07); --line-strong: rgba(255, 235, 220, 0.14);
  --chrome: rgba(18, 13, 10, 0.82);

  --fg: #f2e6da; --fg-dim: #bba795; --fg-faint: #86745f;

  --accent: #ff8657; --accent-2: #ffab7f; --accent-ink: #2b1206;
  --accent-glow: rgba(255, 134, 87, 0.3);
  --link-hover: #ffc4a3;

  --tp: #ff6b7d; --bp: #ffcf6b; --fp: #6ee7a3; --und: #ab9a87;

  --sev-high: #ff6b7d; --sev-medium: #ffb15c; --sev-low: #ffe08a; --sev-informational: #7fb0ff;

  --ok-bg: #1c2415; --ok-line: #55692f; --ok-fg: #d6e3b7;
  --err-bg: #2e1512; --err-line: #7a3b33; --err-fg: #f2c6c2;

  --grain-blend: normal;
  --vignette: rgba(0, 0, 0, .32);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------------- linen theme
   A warm, second light option -- cream/paper ground with a terracotta
   accent, as an alternative to Daylight's cool periwinkle-on-white. */
:root[data-theme="linen"] {
  color-scheme: light;

  --bg-0: #f7f1e8; --bg-1: #faf5ee; --panel: #fffdf9; --panel-2: #f6efe3;
  --raise: #efe4d3;
  --line: rgba(59, 41, 23, 0.10); --line-strong: rgba(59, 41, 23, 0.18);
  --chrome: rgba(255, 253, 249, 0.85);

  --fg: #2b2013; --fg-dim: #6b5c46; --fg-faint: #9c8b73;

  --accent: #c1652f; --accent-2: #a8501f; --accent-ink: #fff8f0;
  --accent-glow: rgba(193, 101, 47, 0.22);
  --link-hover: #8a3f18;

  --tp: #c3273f; --bp: #a06515; --fp: #1f8a5a; --und: #6f6252;

  --sev-high: #c3273f; --sev-medium: #b5661a; --sev-low: #93720f; --sev-informational: #2f6fb0;

  --ok-bg: #eaf3e2; --ok-line: #9ecb8e; --ok-fg: #215c34;
  --err-bg: #fbe9e6; --err-line: #e7b2ab; --err-fg: #8f2a22;

  --grain-blend: multiply;
  --vignette: rgba(59, 41, 23, .08);
  --shadow: 0 1px 2px rgba(59,41,23,.06), 0 14px 30px -16px rgba(59,41,23,.2);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,140,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0));
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { margin: 0; font-weight: 650; letter-spacing: -0.02em; }
h1 { font-size: 22px; }

/* ------------------------------------------------------ ambient page backdrop
   A fixed, non-interactive layer that sits behind the content (z-index -1) and
   gives the flat background some depth: a masked blueprint grid, a slow drift
   of accent-tinted light, a faint film grain, and a soft edge vignette.
   Kept deliberately low-contrast — you feel it more than see it. */
.ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  contain: layout paint style;
  background: radial-gradient(140% 128% at 50% 30%, transparent 60%, var(--vignette));   /* edge vignette */
}
.ambient > i {                     /* drifting accent light — the only animated part */
  content: ""; position: absolute; inset: -20%;
  background:
    radial-gradient(44vw 44vw at 10% 4%,  color-mix(in srgb, var(--accent) 17%, transparent), transparent 60%),
    radial-gradient(38vw 38vw at 92% 2%,  color-mix(in srgb, #6be3c9 12%, transparent), transparent 62%),
    radial-gradient(56vw 56vw at 82% 100%, color-mix(in srgb, var(--tp) 8%, transparent), transparent 60%);
  animation: ambient-drift 46s ease-in-out infinite alternate;
  will-change: transform;
}
:root[data-theme="light"] .ambient > i { opacity: .6; }
.ambient::before {                 /* blueprint grid, dense at the top-right, fading out */
  content: ""; position: absolute; inset: -2px;
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 7%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(1300px 880px at 86% -6%, #000, transparent 78%);
          mask-image: radial-gradient(1300px 880px at 86% -6%, #000, transparent 78%);
  opacity: .7;
}
:root[data-theme="light"] .ambient::before { opacity: .5; }
.ambient::after {                  /* fine film grain, so gradients don't band */
  content: ""; position: absolute; inset: 0; opacity: .38;
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}
:root[data-theme="light"] .ambient::after { opacity: .22; }
@keyframes ambient-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.5%, 1.1%, 0) scale(1.045); }
  100% { transform: translate3d(1.3%, -0.9%, 0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .ambient > i { animation: none; } }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-faint); font-weight: 600; }

/* ----------------------------------------------------------------- view transitions */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .38s; animation-timing-function: var(--ease); }
::view-transition-old(content) { animation: vt-out .28s var(--ease) both; }
::view-transition-new(content) { animation: vt-in .40s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px) scale(.994); } }
@keyframes vt-in  { from { opacity: 0; transform: translateY(12px) scale(.994); } }
.sidebar { view-transition-name: sidebar; }
.topstrip { view-transition-name: topstrip; }
main { view-transition-name: content; }
/* keep the chrome rock-steady between pages — no cross-fade of its snapshot */
::view-transition-group(sidebar), ::view-transition-old(sidebar), ::view-transition-new(sidebar) { animation: none; }
::view-transition-group(topstrip), ::view-transition-old(topstrip), ::view-transition-new(topstrip) { animation: none; }

/* ===================================================================== left sidebar */
.app-shell { min-height: 100vh; }

/* The collapsed icon rail is the DEFAULT. It expands either temporarily
   (hover / keyboard focus — overlays, doesn't shove content) or permanently
   when the user pins it (:root[data-sb-pinned], persisted in localStorage and
   applied pre-paint by an inline <head> script). */
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 60;
  width: var(--sb-rail);
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 12px;
  background: var(--chrome);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-right: 1px solid var(--line);
  overflow: hidden;
  transition: width .2s var(--ease), box-shadow .2s var(--ease);
}
.sidebar.is-overview { border-right-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }

/* the content column always reserves only the rail — the expanded sidebar
   (pinned or hover) floats over it and never reflows the page */
.app-body {
  margin-left: var(--sb-rail);
  display: flex; flex-direction: column; min-height: 100vh;
}

/* --- expanded: pinned (persists) OR hover/focus (temporary); both overlay --- */
:root[data-sb-pinned] .sidebar,
.sidebar:hover,
.sidebar:focus-within { width: var(--sb-w); box-shadow: var(--shadow); }

.sb-head {
  display: flex; align-items: center; gap: 8px;
  height: 32px; margin-bottom: 8px;
  justify-content: center; padding: 0;
}
:root[data-sb-pinned] .sb-head,
.sidebar:hover .sb-head,
.sidebar:focus-within .sb-head { justify-content: space-between; padding: 0 4px 0 8px; }

.brand { display: flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -.02em; color: var(--fg); white-space: nowrap; overflow: hidden; }
.brand .brand-mark {
  width: 20px; height: 20px; flex: none;
  filter: drop-shadow(0 0 9px rgba(125, 99, 255, 0.30));
}

/* pin toggle — only reachable once the sidebar is expanded */
.sb-toggle {
  display: none; flex: none; border: 0; background: transparent; color: var(--fg-faint);
  width: 30px; height: 30px; place-items: center;
  border-radius: 8px; cursor: pointer;
  transition: color .16s var(--ease), background .16s var(--ease);
}
:root[data-sb-pinned] .sb-toggle,
.sidebar:hover .sb-toggle,
.sidebar:focus-within .sb-toggle { display: grid; }
.sb-toggle:hover { color: var(--fg); background: var(--panel-2); }
.sb-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.sb-toggle svg { width: 15px; height: 15px; fill: none; transition: fill .16s var(--ease); }
:root[data-sb-pinned] .sb-toggle { color: var(--accent-2); }
:root[data-sb-pinned] .sb-toggle svg { fill: currentColor; }

/* nav */
.sb-nav { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
/* Settings sits in its own second <nav> so it can be pushed to the very
   bottom of the sidebar's flex column, separated from the main links by a
   divider -- same link styling as the rest of .sb-nav otherwise. */
.sb-nav--bottom {
  margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line);
}
.sb-nav a {
  position: relative;
  display: flex; align-items: center; gap: 0;
  padding: 9px; border-radius: var(--radius-sm);
  color: var(--fg-dim); font-weight: 500; white-space: nowrap;
  justify-content: center;
  transition: background .16s var(--ease), color .16s var(--ease);
}
:root[data-sb-pinned] .sb-nav a,
.sidebar:hover .sb-nav a,
.sidebar:focus-within .sb-nav a { justify-content: flex-start; gap: 12px; padding: 9px 11px; }
.sb-nav a:hover { color: var(--fg); background: var(--panel-2); }
.sb-nav a.active { color: var(--fg); background: var(--raise); }
.sb-nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
}
.sb-ic { width: 18px; height: 18px; flex: none; }
.sb-nav a.active .sb-ic { color: var(--accent-2); }

/* text labels: zero-width + faded on the bare rail, slide in when expanded */
.brand-name, .sb-lbl {
  opacity: 0; max-width: 0; overflow: hidden;
  transition: opacity .16s var(--ease), max-width .2s var(--ease);
}
:root[data-sb-pinned] .brand-name, :root[data-sb-pinned] .sb-lbl,
.sidebar:hover .brand-name, .sidebar:hover .sb-lbl,
.sidebar:focus-within .brand-name, .sidebar:focus-within .sb-lbl { opacity: 1; max-width: 160px; }

/* scope / tenant switcher: hidden on the rail, shown when expanded */
.sidebar .scope-switch, .sidebar .tenant-switch { display: none; }
:root[data-sb-pinned] .sidebar .scope-switch, :root[data-sb-pinned] .sidebar .tenant-switch,
.sidebar:hover .scope-switch, .sidebar:hover .tenant-switch,
.sidebar:focus-within .scope-switch, .sidebar:focus-within .tenant-switch { display: flex; }

/* Approvals count: a full pill when expanded, a bare dot on the rail */
.sb-nav .badge {
  position: absolute; top: 4px; right: 6px; margin: 0;
  min-width: 9px; height: 9px; padding: 0; overflow: hidden; text-indent: 120%;
}
:root[data-sb-pinned] .sb-nav .badge,
.sidebar:hover .sb-nav .badge,
.sidebar:focus-within .sb-nav .badge {
  position: static; margin-left: auto; min-width: 20px; height: 20px;
  padding: 0 6px; overflow: visible; text-indent: 0;
}

/* tenant / scope switcher — full-width control inside the sidebar */
.tenant-switch, .scope-switch { position: relative; display: flex; align-items: center; width: 100%; margin: 2px 0 4px; transition: opacity .16s var(--ease); }
.tenant-switch::after, .scope-switch::after {
  content: ""; position: absolute; right: 13px; width: 7px; height: 7px; pointer-events: none;
  border-right: 1.5px solid var(--fg-dim); border-bottom: 1.5px solid var(--fg-dim);
  transform: rotate(45deg) translateY(-2px);
}
.tenant-switch select, .scope-switch select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-weight: 550; color: var(--fg); width: 100%;
  background: var(--panel-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 8px 32px 8px 12px; cursor: pointer;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.tenant-switch select:hover, .scope-switch select:hover { border-color: var(--accent); }
.tenant-switch select:focus-visible, .scope-switch select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.scope-switch select { font-weight: 600; }
.scope-switch.at-overview select {
  color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, var(--panel-2));
  box-shadow: 0 0 16px -4px var(--accent-glow);
}

/* ------------------------------------------------------------------- top strip (account) */
.topstrip {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px;
  height: var(--topstrip-h); padding: 0 24px;
  background: var(--chrome);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.spacer { flex: 1; }
.greeting { color: var(--fg-dim); font-size: 13px; white-space: nowrap; margin-right: 2px; }
.greeting:empty { display: none; }

.theme-toggle {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 9px; background: transparent;
  color: var(--fg-dim); cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.theme-toggle:hover { color: var(--fg); border-color: var(--accent); background: var(--panel-2); }
.theme-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }
.theme-toggle svg { width: 16px; height: 16px; fill: currentColor; }        /* dark: solid moon */
:root[data-theme="light"] .theme-toggle { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
:root[data-theme="light"] .theme-toggle svg { fill: none; }                 /* light: outline moon */
.theme-toggle.login-theme { position: fixed; top: 20px; right: 20px; z-index: 5;
  background: var(--chrome); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

.usermenu { display: flex; align-items: center; gap: 10px; color: var(--fg-dim); }
.usermenu .avatar {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 12px; font-weight: 700; color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.usermenu .um-id { white-space: nowrap; }
.usermenu .role { font-size: 11px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: .1em; }

/* -------------------------------------------------------------------- responsive chrome */
@media (max-width: 860px) { :root { --sb-w: 216px; } }
@media (max-width: 720px) {
  .usermenu .um-id { display: none; }
  .greeting { display: none; }
  .topstrip { padding: 0 16px; }
}

/* --------------------------------------------------------------------------- layout */
main { max-width: 1360px; margin: 0 auto; padding: 34px 24px 80px; width: 100%; }
main.main-wide { max-width: 1760px; }
main.main-report { max-width: 2680px; }
.page-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.page-head .sub { color: var(--fg-faint); font-size: 13px; }
.backlink { color: var(--fg-dim); text-decoration: none; font-size: 13px; }
.backlink:hover { color: var(--link-hover); }
.section { margin-top: 26px; }
.section > h2 { margin-bottom: 12px; }

/* incident detail: rule description sits directly under the hero */
.rule-desc { margin: 12px 2px 0; color: var(--fg-dim); line-height: 1.6; max-width: 82ch; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: start; }
.grid-3 > div { min-width: 0; }
.grid-3 h2 { margin-bottom: 10px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------- panels */
.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px 20px;
}
.panel + .panel { margin-top: 14px; }
.panel.reading { line-height: 1.7; color: var(--fg); white-space: pre-wrap; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------------ dashboard cards */
/* The stat bar is lifted out of the page view transition so it doesn't
   re-render / flash when the incident list re-sorts (same numbers, new snapshot
   snaps in instantly). But when you navigate to a page that has no stat bar,
   the orphaned old snapshot must fade out cleanly instead of lingering the full
   group duration and then popping. */
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; view-transition-name: incident-stats; }
::view-transition-group(incident-stats) { animation: none; }
::view-transition-new(incident-stats) { animation: none; }
::view-transition-old(incident-stats) { animation: vt-stat-out .18s linear both; }
@keyframes vt-stat-out { to { opacity: 0; } }
.stat {
  flex: 1; min-width: 130px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
}
.stat .n { font-size: 24px; font-weight: 680; letter-spacing: -.03em; }
.stat .l { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-faint); margin-top: 2px; }
.stat .s { font-size: 12px; color: var(--fg-dim); margin-top: 5px; }

/* --------------------------------------------------------------------------- tables */
.table-wrap { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
/* cap a long table and let it scroll within the section, sticky header */
.table-wrap.scroll-y { overflow-y: auto; max-height: 340px; }
.table-wrap.scroll-y thead th { position: sticky; top: 0; z-index: 2; }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
thead th {
  position: relative;
  text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint);
  background: var(--panel-2); border-bottom: 1px solid var(--line);
}

/* draggable column dividers (JS-added to [data-resizable-cols]) */
table.cols-fixed { table-layout: fixed; }
table.cols-fixed td, table.cols-fixed th { overflow: hidden; text-overflow: ellipsis; }
table.cols-fixed td .rulename, table.cols-fixed td .cell-sub { overflow: hidden; text-overflow: ellipsis; }
.col-grip {
  position: absolute; top: 0; right: -3px; width: 10px; height: 100%;
  cursor: col-resize; z-index: 4; touch-action: none;
}
.col-grip::after {
  content: ""; position: absolute; top: 22%; bottom: 22%; right: 4px; width: 1px;
  background: var(--line-strong); transition: background .14s var(--ease), width .14s var(--ease);
}
.col-grip:hover::after, body.col-resizing .col-grip::after { background: var(--accent); width: 2px; }
body.col-resizing { user-select: none; }
body.col-resizing * { cursor: col-resize !important; }
tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .16s var(--ease); }
tbody tr:hover { background: var(--panel-2); }
tr.row-link { cursor: pointer; }
tr.row-link td:first-child { box-shadow: inset 3px 0 0 transparent; transition: box-shadow .16s var(--ease); }
tr.row-link:hover td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.reveal tbody tr { animation: rise .44s var(--ease) both; animation-delay: calc(var(--i, 0) * 34ms + 60ms); }

.rulename { font-weight: 600; color: var(--fg); letter-spacing: -.01em; }
.cell-sub { color: var(--fg-faint); font-size: 12.5px; margin-top: 3px; }
.mono { font-family: var(--mono); font-size: 12.5px; }

/* --------------------------------------------------------------------------- pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line-strong); white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.v-true_positive  { color: var(--tp); border-color: color-mix(in srgb, var(--tp) 45%, transparent); }
.pill.v-benign_positive{ color: var(--bp); border-color: color-mix(in srgb, var(--bp) 45%, transparent); }
.pill.v-false_positive { color: var(--fp); border-color: color-mix(in srgb, var(--fp) 45%, transparent); }
.pill.v-undetermined   { color: var(--und); border-color: color-mix(in srgb, var(--und) 45%, transparent); }
.pill.plain { color: var(--fg-dim); }
.pill.plain::before { display: none; }
/* Generic outcome pills (action succeeded / failed) — deliberately not the
   v-true_positive/v-false_positive verdict colors, which mean the opposite
   thing here (true_positive = red/bad, false_positive = green/good). */
.pill.ok  { color: var(--fp); border-color: color-mix(in srgb, var(--fp) 45%, transparent); }
.pill.err { color: var(--tp); border-color: color-mix(in srgb, var(--tp) 45%, transparent); }
.pill.wait {
  color: var(--sev-medium); border-color: color-mix(in srgb, var(--sev-medium) 45%, transparent);
  background: color-mix(in srgb, var(--sev-medium) 12%, transparent);
}

/* A row still awaiting sign-off gets a warm left edge so it reads as "needs
   you" at a glance, not just another table row. */
tr.row-awaiting {
  box-shadow: inset 3px 0 0 var(--sev-medium);
  background: color-mix(in srgb, var(--sev-medium) 6%, transparent);
}
tr.row-awaiting td:first-child { padding-left: 13px; }

/* Approvals page: a clear "this needs you" banner when anything is pending,
   instead of a plain paragraph easy to miss. */
.approvals-alert {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; margin-bottom: 16px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--sev-medium) 14%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--sev-medium) 45%, transparent);
}
.approvals-alert .a-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 999px; background: color-mix(in srgb, var(--sev-medium) 22%, transparent);
  color: var(--sev-medium); font-size: 18px; font-weight: 800;
}
.approvals-alert .a-title { font-weight: 700; font-size: 15px; }
.approvals-alert .a-sub { color: var(--fg-dim); font-size: 13px; margin-top: 2px; }

.sev { font-weight: 650; font-size: 12px; letter-spacing: .02em; }
.sev-High { color: var(--sev-high); } .sev-Medium { color: var(--sev-medium); }
.sev-Low { color: var(--sev-low); } .sev-Informational { color: var(--sev-informational); }

.review { color: var(--bp); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.review::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }

.badge {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 800;
}
.badge.pulse { animation: pulse 2s var(--ease) infinite; }

/* ------------------------------------------------------------------------- buttons */
.btn {
  font: inherit; font-weight: 600; padding: 8px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--raise); color: var(--fg);
  cursor: pointer; transition: transform .12s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.btn:hover { border-color: var(--accent); }
.btn:active { transform: scale(.97); }
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); border-color: transparent; }
.btn.approve { border-color: var(--ok-line); color: var(--ok-fg); }
.btn.approve:hover { background: var(--ok-bg); }
.btn.deny { border-color: var(--err-line); color: var(--err-fg); }
.btn.deny:hover { background: var(--err-bg); }
.btn.ghost { background: transparent; }
.btn.danger { border-color: var(--err-line); color: var(--err-fg); }
.btn.danger:hover { background: var(--err-bg); border-color: var(--err-line); }
.btn-ext { display: inline-flex; align-items: center; gap: 7px; }
.btn-ext svg { width: 13px; height: 13px; flex: none; opacity: .75; }
form.inline { display: inline; }

/* ------------------------------------------------------------------- confirm dialog */
.confirm-veil {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: 20px; background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px);
  animation: confirm-veil-in .14s var(--ease);
}
.confirm-veil[hidden] { display: none; }   /* explicit display: beats the [hidden] UA rule otherwise */
.confirm-card {
  width: 100%; max-width: 380px; padding: 22px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line-strong); box-shadow: var(--shadow);
  animation: confirm-card-in .16s var(--ease);
}
.confirm-card h3 { margin: 0 0 8px; font-size: 15px; }
.confirm-card p { margin: 0; color: var(--fg-dim); font-size: 13.5px; line-height: 1.5; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@keyframes confirm-veil-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes confirm-card-in { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }

/* a wider variant of the confirm veil, for popping a whole form (e.g. edit
   schedule) over the page instead of a short question. The card scrolls
   internally and stays vertically centered rather than the veil scrolling
   (which would anchor it to the top on tall forms / short viewports). */
.confirm-veil.wide .panel {
  width: 100%; max-width: 560px; max-height: calc(100vh - 96px); overflow-y: auto;
  animation: confirm-card-in .18s var(--ease);
  outline: 1px solid var(--accent); outline-offset: 3px;
}

input[type=text], input[type=password] {
  font: inherit; padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--bg-1); color: var(--fg);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
::placeholder { color: var(--fg-faint); }

/* app-styled <select> (no native chrome) */
.select-wrap { position: relative; display: inline-flex; width: 100%; }
.select-wrap[hidden] { display: none; }   /* explicit display: beats the [hidden] UA rule otherwise */
.select-wrap::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--fg-dim); border-bottom: 1.5px solid var(--fg-dim);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select {
  appearance: none; -webkit-appearance: none; font: inherit; font-weight: 500;
  color: var(--fg); background: var(--bg-1); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 9px 32px 9px 12px; cursor: pointer; width: 100%;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.select:hover { border-color: var(--accent); }
.select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.select option { background: var(--panel); color: var(--fg); }

/* sub-navigation tabs (e.g. Tuning) */
.subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 22px; }
.subnav a {
  padding: 9px 14px; color: var(--fg-dim); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.subnav a:hover { color: var(--fg); }
.subnav a.on { color: var(--fg); border-bottom-color: var(--accent); }

/* ------------------------------------------------ environment profile: chips + view */
.chips[data-chips] {
  align-items: center; padding: 6px; min-height: 40px; cursor: text;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-2);
}
.chips[data-chips]:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  color: var(--fg); background: var(--raise); border: 1px solid var(--line-strong);
}
.chip.static { padding: 3px 11px; }
.chip-x {
  display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0;
  border-radius: 50%; font-size: 13px; line-height: 1; cursor: pointer;
  color: var(--fg-faint); background: transparent;
}
.chip-x:hover { color: var(--fg); background: var(--panel-2); }
.chip-input {
  flex: 1 1 150px; min-width: 150px; border: 0; outline: 0; background: transparent;
  color: var(--fg); font: inherit; padding: 3px 4px;
}
input.chip-input--invalid { color: var(--tp); animation: chip-shake .3s var(--ease); }
input.chip-input--invalid::placeholder { color: var(--tp); }
@keyframes chip-shake {
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.chips-view { display: flex; flex-wrap: wrap; gap: 6px; }

.ep-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ep-view dd { min-height: 22px; }
.ep-nc { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ep-nc li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ep-nc-k {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-faint); min-width: 200px;
}

.nc-grid { display: grid; grid-template-columns: max-content 1fr; gap: 10px 14px; align-items: start; }
.nc-grid label { font-size: 12.5px; color: var(--fg-dim); padding-top: 10px; }
.nc-grid > div { min-width: 0; }
.nc-grid input { width: 100%; }
@media (max-width: 640px) {
  .nc-grid { grid-template-columns: 1fr; gap: 4px 0; }
  .nc-grid label { padding-top: 10px; }
}

/* Escalations: recipient rows */
.rcpts { display: flex; flex-direction: column; gap: 8px; }
.rcpt-head, .rcpt-row {
  display: grid; grid-template-columns: 1fr 1fr 1.6fr 28px; gap: 8px; align-items: center;
}
.rcpt-head { font-size: 11.5px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: .04em; }
.rcpt-row input { width: 100%; }
.rcpt-x {
  border: 1px solid var(--border); background: none; color: var(--fg-dim);
  border-radius: 6px; width: 28px; height: 28px; cursor: pointer; line-height: 1;
}
.rcpt-x:hover { color: var(--fg); background: var(--panel-2); }
@media (max-width: 640px) {
  .rcpt-head { display: none; }
  .rcpt-row { grid-template-columns: 1fr 1fr; }
  .rcpt-row input[name="c_email"] { grid-column: 1 / -1; }
}

.row-between { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; }

/* overview: scope-to-a-tenant filter (distinct from the top-bar switcher) */
.ov-filter { display: flex; gap: 8px; align-items: center; margin: -6px 0 20px; flex-wrap: wrap; }
.ov-filter .btn { padding: 8px 12px; }

/* --------------------------------------------------------- combobox (reusable)
   App-styled multi-select dropdown: a trigger button + a checkbox panel with a
   "Select all" toggle. Native <select multiple> / <datalist> can't be themed,
   so this is bespoke. Without JS the panel shows expanded with an Apply button. */
.combo { position: relative; display: inline-flex; align-items: center; min-width: 300px; }
.combo.open { z-index: 120; }   /* lift above sibling cards, incl. their load animation */
.combo .combo-input {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; font: inherit; font-weight: 500; text-align: left; color: var(--fg);
  background: var(--bg-1); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 9px 12px 9px 13px; cursor: pointer;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.combo .combo-input:hover { border-color: var(--accent); }
.combo .combo-input:focus-visible,
.combo.open .combo-input {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}
.combo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-chevron { flex: none; color: var(--fg-dim); transition: transform .18s var(--ease); }
.combo.open .combo-chevron { transform: rotate(180deg); }
.combo-list {
  position: absolute; z-index: 200; left: 0; right: 0; top: calc(100% + 6px);
  padding: 5px; background: var(--panel-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow);
  animation: rise .16s var(--ease) both;
}
.combo-list .combo-opts { max-height: 240px; overflow-y: auto; }
.combo-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-radius: 6px; color: var(--fg-dim); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.combo-opt:hover { background: var(--raise); color: var(--fg); }
.combo-opt input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.combo-opt-all { color: var(--fg); font-weight: 600; margin-bottom: 4px; }
.combo-opt-all + .combo-opts { border-top: 1px solid var(--line); padding-top: 4px; }
.combo-apply { display: block; width: 100%; margin-top: 6px; }

/* =========================================================================
   Incident list — search, filters, saved filters, sortable columns
   ========================================================================= */
.inc-controls { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }

.inc-search {
  display: flex; align-items: center; gap: 8px; position: relative;
  max-width: 560px;
}
.inc-search-ic { position: absolute; left: 12px; color: var(--fg-faint); pointer-events: none; }
.inc-search input[type=search] {
  flex: 1; min-width: 0; font: inherit; color: var(--fg); background: var(--bg-1);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 9px 12px 9px 36px;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.inc-search input[type=search]:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow);
}

.inc-buttons { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.inc-buttons .btn { padding: 7px 12px; }
.inc-buttons [data-toggle=filters][aria-expanded=true] { border-color: var(--accent); color: var(--fg); }

/* Saved-filters dropdown */
.drop { position: relative; }
.drop.open { z-index: 120; }
.drop-trigger, .drop [data-drop-trigger] { display: inline-flex; align-items: center; gap: 6px; }
.drop-menu {
  position: absolute; z-index: 200; top: calc(100% + 6px); left: 0; min-width: 260px;
  padding: 8px; background: var(--panel-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); animation: rise .16s var(--ease) both;
}
.saved-list { list-style: none; margin: 0 0 8px; padding: 0; max-height: 240px; overflow-y: auto; }
.saved-list li { display: flex; align-items: center; gap: 6px; border-radius: 6px; }
.saved-list li:hover { background: var(--raise); }
.saved-list li a { flex: 1; padding: 8px 10px; color: var(--fg); border-radius: 6px; }
.saved-list li .x {
  border: 0; background: none; color: var(--fg-faint); cursor: pointer;
  font-size: 16px; line-height: 1; padding: 6px 10px; border-radius: 6px;
}
.saved-list li .x:hover { color: var(--err-fg); background: var(--err-bg); }
.drop-empty { color: var(--fg-faint); font-size: 13px; padding: 6px 10px 10px; max-width: 240px; line-height: 1.5; }

/* ------------------------------------------------------------- Respond popover */
.respond { position: relative; display: inline-block; }
.respond.open { z-index: 120; }
.respond-toggle { display: inline-flex; align-items: center; gap: 8px; }
.respond-toggle svg { transition: transform .18s var(--ease); }
.respond.open .respond-toggle svg { transform: rotate(180deg); }
.respond-pop {
  /* Fixed, not absolute: the trigger lives inside the hero card, which
     clips overflow for its own decorative background -- an absolutely
     positioned popover would get clipped right along with it. Fixed
     positioning escapes that; JS sets top/left to track the button. */
  position: fixed; z-index: 400; width: 360px; max-width: calc(100vw - 32px);
  padding: 12px; background: var(--panel-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow); animation: rise .16s var(--ease) both;
}
.respond-pop-hd {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint);
  padding: 2px 6px 10px;
}
.respond-opts { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; }
.respond-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; text-align: left; font: inherit; color: var(--fg);
  background: none; border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer;
  transition: background .12s var(--ease);
}
.respond-opt:hover, .respond-opt:focus-visible { background: var(--raise); outline: none; }
.respond-opt-label { font-weight: 600; font-size: 13.5px; }
.respond-opt-auto { font-size: 11.5px; color: var(--fg-faint); }
.respond-opt-auto.auto { color: var(--fp); }
.respond-back {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px;
  font-weight: 600; color: var(--fg-dim); background: none; border: 0; cursor: pointer;
  padding: 4px 4px 10px; margin: -2px 0 0 -4px;
}
.respond-back:hover { color: var(--accent); }
.respond-fields { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.respond-fields[hidden] { display: none; }   /* explicit display: beats the [hidden] UA rule otherwise */
.respond-fields .select-wrap { width: 100%; }
.respond-fields input[type="text"] {
  font: inherit; color: var(--fg); background: var(--bg-1); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: 8px 11px;
}
.respond-fields input[type="text"]:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* Filter facet panel */
.filter-panel {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--panel); padding: 16px; animation: rise .16s var(--ease) both;
}
.facets { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px 24px; }
.facet h4 {
  margin: 0 0 8px; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .1em; color: var(--fg-faint);
}
.facet label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13.5px; color: var(--fg-dim); cursor: pointer; }
.facet label:hover { color: var(--fg); }
.facet input[type=checkbox] { accent-color: var(--accent); width: 15px; height: 15px; }
.facet label.date { flex-direction: column; align-items: flex-start; gap: 4px; }
.facet input[type=date] {
  font: inherit; color: var(--fg); background: var(--bg-1);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; width: 100%;
}
.facet input[type=date]:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.filter-actions { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }

.stat .of { font-size: 15px; font-weight: 500; color: var(--fg-faint); }

/* Sortable table headers */
.sort-th { padding: 0; }
.sort-th > a {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 12px 16px; color: inherit; white-space: nowrap;
}
.sort-th > a:hover { color: var(--fg); background: var(--raise); }
.sort-ind { font-size: 11px; color: var(--fg-faint); }
.sort-th.on > a { color: var(--fg); }
.sort-th.on .sort-ind { color: var(--accent); }

/* Workflow-status chips */
.status { font-weight: 600; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.s-open { color: var(--fg-faint); }
.status.s-investigating { color: var(--accent-2); }
.status.s-investigating::before { box-shadow: 0 0 8px currentColor; animation: pulse 2s var(--ease) infinite; }
.status.s-waiting-on-client { color: var(--bp); }
.status.s-waiting-on-client::before { box-shadow: 0 0 8px currentColor; }
.status.s-closed { color: var(--tp); }

/* Status setter on the incident hero -- floats in the card's own top-right
   corner (absolute, out of flow) rather than sharing a row with the title
   or the action buttons, so it never adds height to either and stays put
   regardless of how the button row wraps/scrolls. */
.status-set {
  position: absolute; top: 22px; right: 24px; z-index: 5;
  display: inline-flex; align-items: center; gap: 8px;
}
.status-set-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint); }
.status-set .select-wrap { width: auto; }
.status-set .select { width: auto; min-width: 168px; padding-right: 34px; }

/* per-page selector (sits with the Filters / Saved Filters buttons) */
.per-page { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; }
.per-page label { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint); white-space: nowrap; }
.per-page .select-wrap { width: auto; }
.per-page .select { width: auto; min-width: 68px; padding: 7px 30px 7px 11px; font-weight: 500; }

/* applied-filter chips */
.chips-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 500;
  color: var(--fg-dim); background: var(--panel-2); border: 1px solid var(--line-strong);
  transition: border-color .14s var(--ease), color .14s var(--ease);
}
.fchip:hover { border-color: var(--accent); color: var(--fg); }
.fchip-x {
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
  font-size: 13px; line-height: 1; color: var(--fg-faint); background: var(--raise);
}
.fchip:hover .fchip-x { color: var(--fg); }
.fchip-status  { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); color: var(--fg); }
.fchip-verdict { border-color: color-mix(in srgb, var(--tp) 35%, var(--line-strong)); }
.fchip-severity{ border-color: color-mix(in srgb, var(--sev-medium) 40%, var(--line-strong)); }

/* pagination */
.pager { display: flex; align-items: center; gap: 4px; margin-top: 16px; flex-wrap: wrap; }
.pager .pg, .pager .pg-step, .pager .gap {
  min-width: 30px; height: 30px; padding: 0 9px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; border-radius: var(--radius-sm); color: var(--fg-dim);
}
.pager a.pg, .pager a.pg-step { border: 1px solid var(--line-strong); transition: border-color .14s var(--ease), color .14s var(--ease); }
.pager a.pg:hover, .pager a.pg-step:hover { border-color: var(--accent); color: var(--fg); }
.pager .pg.on { background: var(--raise); color: var(--fg); border: 1px solid var(--line-strong); font-weight: 600; }
.pager .pg-step.disabled { color: var(--fg-faint); opacity: .5; }
.pager .gap { color: var(--fg-faint); }
.pager .pg-count { margin-left: 8px; font-size: 12px; color: var(--fg-faint); }

/* mini bar chart (overview) */
.bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.bars .bar { flex: 1; min-width: 3px; display: flex; align-items: flex-end; height: 100%; }
.bars .bar > span {
  display: block; width: 100%; min-height: 2px; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent));
}
.bars .bar:hover > span { background: var(--accent-2); }

/* =========================================================================
   Overview — SIEM-style dashboard
   ========================================================================= */
.ov-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 900px) { .ov-grid { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px 18px;
}
.card > h3 {
  margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--fg-faint);
}
.card > h3 .aside { float: right; letter-spacing: 0; text-transform: none; color: var(--fg-dim); font-weight: 500; }

/* KPI tiles with trend */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi {
  padding: 15px 16px; border-radius: var(--radius); background: var(--panel);
  border: 1px solid var(--line); animation: rise .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.kpi .k-top { display: flex; align-items: baseline; gap: 8px; }
.kpi .k-val { font-size: 25px; font-weight: 680; letter-spacing: -.03em; }
.kpi .k-label { font-size: 11px; text-transform: uppercase; letter-spacing: .11em; color: var(--fg-faint); margin-top: 3px; }
.kpi .k-sub { font-size: 12px; color: var(--fg-dim); margin-top: 4px; }
.delta { font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.delta.up   { color: var(--tp); background: color-mix(in srgb, var(--tp) 14%, transparent); }
.delta.down { color: var(--fp); background: color-mix(in srgb, var(--fp) 14%, transparent); }
.delta.flat { color: var(--fg-faint); background: var(--panel-2); }

/* tone accents for KPI tiles (per-tenant overview) */
.kpi.accent, .kpi.bad { position: relative; overflow: hidden; }
.kpi.accent::after, .kpi.bad::after {
  content: ""; position: absolute; left: 14px; right: 14px; top: 0; height: 2px;
  border-radius: 0 0 2px 2px;
}
.kpi.accent::after { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.kpi.bad::after    { background: linear-gradient(90deg, transparent, var(--tp), transparent); }

/* ===================================================== per-tenant overview */
.t-hero {
  position: relative; overflow: hidden;
  border: 1px solid var(--line-strong); border-radius: 18px;
  padding: 22px 24px; margin-bottom: 20px;
  background:
    radial-gradient(680px 200px at 90% -40%, var(--accent-glow), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  animation: rise .5s var(--ease) both;
}
.t-hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), transparent 85%);
  box-shadow: 0 0 18px var(--accent-glow);
}
.t-hero.v-tp::before { background: linear-gradient(180deg, var(--tp), transparent 85%); box-shadow: 0 0 18px color-mix(in srgb, var(--tp) 60%, transparent); }
.t-hero-grid {
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(420px 240px at 100% 0%, #000, transparent 75%);
  mask-image: radial-gradient(420px 240px at 100% 0%, #000, transparent 75%);
}
.t-hero .eyebrow, .t-hero h1, .t-hero .meta { position: relative; }
.t-hero h1 { font-size: 24px; letter-spacing: -.02em; }
.t-hero .meta { margin-top: 7px; color: var(--fg-faint); font-size: 13px; }
.t-hero .meta b { color: var(--fg-dim); font-weight: 600; }

.card.assure { border-color: var(--line-strong); }
.card.assure.ok  { border-left: 3px solid var(--fp); }
.card.assure.bad { border-left: 3px solid var(--tp); }
.assure-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 13.5px; color: var(--fg); }
.assure-head .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--fp); box-shadow: 0 0 10px var(--fp); }
.card.assure.bad .assure-head .dot { background: var(--tp); box-shadow: 0 0 10px var(--tp); }
.assure-head b.ok  { color: var(--fp); }
.assure-head b.bad { color: var(--tp); }
.assure-body { margin: 12px 0 14px; color: var(--fg-dim); font-size: 13px; line-height: 1.6; max-width: 74ch; }
.assure-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.assure-actions .btn { padding: 7px 13px; }

/* area / line chart */
.area-chart { width: 100%; height: auto; display: block; overflow: visible; }
.area-chart .fill { fill: url(#areaGrad); }
.area-chart .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area-chart .dot { fill: var(--accent); }
.area-chart .axis { stroke: var(--line); stroke-width: 1; }
.chart-foot { display: flex; justify-content: space-between; font-size: 11px; color: var(--fg-faint); margin-top: 6px; }

/* donut */
.donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut { flex-shrink: 0; }
.donut .track { fill: none; stroke: var(--line); }
.donut .seg { fill: none; stroke-linecap: butt; transition: stroke-width .15s var(--ease); }
.donut-center { font-size: 11px; fill: var(--fg-faint); }
.legend { display: flex; flex-direction: column; gap: 7px; font-size: 12.5px; }
.legend .row { display: flex; align-items: center; gap: 8px; color: var(--fg-dim); }
.legend .sw { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.legend .row b { color: var(--fg); font-variant-numeric: tabular-nums; }

/* horizontal bars (top tenants, funnel, event counts) */
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar { display: grid; grid-template-columns: 150px 1fr 46px; gap: 10px; align-items: center; font-size: 12.5px; }
.hbar .lbl { color: var(--fg-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .track { height: 8px; border-radius: 5px; background: var(--panel-2); overflow: hidden; }
.hbar .track > span {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
.hbar .val { text-align: right; color: var(--fg); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .hbar { grid-template-columns: 110px 1fr 40px; } }

/* severity chips */
.sev-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.sev-chip {
  padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong);
  font-size: 12.5px; color: var(--fg-dim);
}
.sev-chip b { color: var(--fg); }

/* segmented toggle (Match ALL / Match ANY) */
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 10px; }
.seg label { padding: 7px 14px; font-size: 12.5px; color: var(--fg-dim); cursor: pointer; user-select: none;
             transition: background .16s var(--ease), color .16s var(--ease); }
.seg label + label { border-left: 1px solid var(--line-strong); }
.seg label:has(input:checked) { background: var(--raise); color: var(--fg); }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* condition-row builder */
.cond-rows { display: flex; flex-direction: column; gap: 8px; margin: 0 0 12px; }
.cond-row { display: grid; grid-template-columns: 150px 110px 1fr 34px; gap: 8px; align-items: center; }
.cond-row input[type=text] { width: 100%; }
.cond-remove { padding: 4px 0; font-size: 17px; line-height: 1; }
@media (max-width: 640px) {
  .cond-row { grid-template-columns: 1fr 1fr; }
  .cond-row input[type=text], .cond-row .cond-remove { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------- flash */
.flash {
  padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 20px;
  border: 1px solid; font-weight: 500; animation: rise .4s var(--ease) both;
}
.flash.ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-fg); }
.flash.error { background: var(--err-bg); border-color: var(--err-line); color: var(--err-fg); }

/* --------------------------------------------------------------------------- misc */
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 18px; }
.kv dt { color: var(--fg-faint); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.kv dd { margin: 0; }

/* ------------------------------------------------------------ Settings: theme picker */
.theme-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
}
.theme-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 12px; border-radius: var(--radius-sm); cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line);
  transition: border-color .14s var(--ease), transform .14s var(--ease), box-shadow .14s var(--ease);
}
.theme-card:hover { transform: translateY(-1px); border-color: var(--line-strong); }
.theme-card input { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}
.theme-card__swatch {
  position: relative; height: 46px; border-radius: 7px;
  border: 1px solid var(--line-strong); overflow: hidden;
}
.theme-card__dot {
  position: absolute; right: 8px; bottom: 8px; width: 16px; height: 16px; border-radius: 50%;
  box-shadow: 0 0 10px 1px color-mix(in srgb, currentColor 60%, transparent);
}
.theme-card__name { font-size: 13px; font-weight: 600; color: var(--fg); }
.theme-card.is-selected .theme-card__name::after {
  content: " ✓"; color: var(--accent-2); font-weight: 700;
}
.theme-card__desc { font-size: 11.5px; color: var(--fg-faint); line-height: 1.4; }
ul.tight, ol.tight { margin: 4px 0; padding-left: 18px; }
ul.tight li, ol.tight li { margin: 4px 0; overflow-wrap: anywhere; }

/* investigation work-log: the KQL the agent ran, shown verbatim */
.work-log td { vertical-align: top; }
pre.kql {
  margin: 0 0 4px; white-space: pre-wrap; word-break: break-word;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--fg-dim);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; max-width: 100%; max-height: 260px; overflow: auto;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.params {
  display: block; white-space: pre-wrap; word-break: break-word; font-family: var(--mono);
  max-width: 100%; max-height: 180px; overflow: auto; color: var(--fg-dim); font-size: 11.5px;
}
/* Plain-English rendering of an action's params (see humanize_params) --
   prose, not a code dump. */
.params-plain {
  display: block; white-space: normal; word-break: break-word;
  max-width: 320px; color: var(--fg-dim); font-size: 12.5px; line-height: 1.5;
}
.action-label { font-weight: 650; }
.empty { color: var(--fg-faint); padding: 40px 0; text-align: center; }
.empty code { background: var(--panel-2); padding: 2px 6px; border-radius: 5px; }
.back-link { display: inline-block; margin-top: 28px; color: var(--fg-dim); }

/* --------------------------------------------------------------------------- login */
.login-wrap {
  position: relative; z-index: 1; min-height: 100vh; padding: 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
}
.auth-welcome { text-align: center; animation: rise .5s var(--ease) both; }
.auth-welcome h1 {
  font-size: clamp(38px, 7vw, 64px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.06;
  background: linear-gradient(180deg, var(--fg) 30%, color-mix(in srgb, var(--fg) 45%, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .5)) drop-shadow(0 0 28px var(--accent-glow));
}
:root[data-theme="light"] .auth-welcome h1 {
  filter: drop-shadow(0 8px 20px rgba(17, 24, 39, .22));
}
.login-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 380px; padding: 32px; border-radius: 18px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 88%, transparent), color-mix(in srgb, var(--panel-2) 88%, transparent));
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow), 0 0 60px -22px var(--accent-glow);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  animation: rise .5s var(--ease) both;
}
/* rotating conic hairline around the card */
.login-card::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; z-index: -1;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    color-mix(in srgb, var(--accent) 70%, transparent) 40deg,
    transparent 120deg,
    transparent 240deg,
    color-mix(in srgb, #6be3c9 55%, transparent) 300deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .7; animation: auth-spin 22s linear infinite;
}
.login-card .brand { font-size: 17px; margin-bottom: 4px; }
.login-card p.hint { color: var(--fg-faint); font-size: 13px; margin: 0 0 22px; }
.login-card label { display: block; font-size: 12px; color: var(--fg-dim); margin: 14px 0 6px; }
.login-card input { width: 100%; }
.login-card .btn { width: 100%; margin-top: 22px; padding: 11px; }
.login-card form + .auth-divider { margin-top: 4px; }
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 18px 0 2px; color: var(--fg-faint); font-size: 12px;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* ---- login motion backdrop -------------------------------------------------
   A fixed, non-interactive stage behind the card: a slow-breathing aurora, a
   set of concentric orbit rings with a sweeping radar arc and traveling
   nodes, a vertical scan beam, and a rising particle field. All motion is
   transform / opacity only; the whole thing freezes under reduced-motion. */
.auth-fx {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  contain: strict;
}
.auth-aurora {
  position: absolute; left: 50%; top: 50%; width: min(120vmin, 1100px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: conic-gradient(from 90deg at 50% 50%,
    color-mix(in srgb, var(--accent) 55%, transparent),
    color-mix(in srgb, #6be3c9 40%, transparent),
    color-mix(in srgb, var(--tp) 32%, transparent),
    color-mix(in srgb, var(--accent-2) 50%, transparent),
    color-mix(in srgb, var(--accent) 55%, transparent));
  border-radius: 50%;
  filter: blur(72px);
  opacity: .5;
  mix-blend-mode: screen;
  animation: auth-aurora 46s ease-in-out infinite alternate;
  will-change: transform;
}
.auth-orbits {
  position: absolute; left: 50%; top: 50%; width: min(112vmin, 900px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: .72;
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
}
.auth-orbits svg { width: 100%; height: 100%; overflow: visible; }
.auth-orbits .ring {
  fill: none; stroke: color-mix(in srgb, var(--fg) 32%, transparent); stroke-width: 1;
  animation: auth-spin 150s linear infinite;
}
.auth-orbits .ring-dash { stroke: color-mix(in srgb, var(--accent) 62%, transparent); stroke-dasharray: 2 9; }
.auth-orbits .ring-set { transform-origin: 320px 320px; animation: auth-spin 200s linear infinite; }
.auth-orbits .arc {
  transform-origin: 320px 320px;
  fill: none; stroke: var(--accent-2); stroke-width: 2.6; stroke-linecap: round;
  filter: drop-shadow(0 0 9px var(--accent));
}
.auth-orbits .arc circle { fill: none; stroke: inherit; stroke-width: inherit; stroke-linecap: inherit;
  stroke-dasharray: 26 100; }
.auth-orbits .arc-a { animation: auth-spin 17s linear infinite; opacity: 1; }
.auth-orbits .arc-b { animation: auth-spin 28s linear infinite reverse; opacity: .6; }
.auth-orbits .orbit { transform-origin: 320px 320px; }
.auth-orbits .node { fill: var(--accent-2); filter: drop-shadow(0 0 10px var(--accent)); animation: auth-pulse 7s ease-in-out infinite; }
.auth-orbits .node-sm { fill: color-mix(in srgb, #6be3c9 85%, var(--fg)); filter: drop-shadow(0 0 8px #6be3c9); }
.auth-orbits .orbit-1 { animation: auth-spin 32s linear infinite; }
.auth-orbits .orbit-2 { animation: auth-spin 46s linear infinite reverse; }
.auth-orbits .orbit-3 { animation: auth-spin 62s linear infinite; }
.auth-orbits .orbit-4 { animation: auth-spin 80s linear infinite reverse; }
.auth-orbits .orbit-2 .node, .auth-orbits .orbit-4 .node { animation-delay: -3s; }
/* infrequent shooting stars — a small dot with a short trailing streak that
   darts across once per cycle, then idles for the rest of it */
.auth-shoot {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  color: var(--accent-2);
  background: currentColor;
  box-shadow: 0 0 6px 1px currentColor;
  opacity: 0;
  animation: auth-shoot 13s ease-in infinite;
  will-change: transform, opacity;
}
.auth-shoot::before {
  content: ""; position: absolute; right: 1px; top: 50%;
  width: 66px; height: 1.5px; transform-origin: right center;
  transform: rotate(29deg);
  background: linear-gradient(270deg, currentColor, transparent);
  border-radius: 2px;
}
.auth-shoot.s1 { top: 12%; left: 8%;  animation-duration: 13s; animation-delay: 0s; }
.auth-shoot.s2 { top: 6%;  left: 62%; animation-duration: 19s; animation-delay: 7s; }
.auth-shoot.s3 { top: 30%; left: 30%; animation-duration: 27s; animation-delay: 15s; color: #6be3c9; }

.auth-motes, .auth-motes::after {
  position: absolute; inset: -20% -20% -20% -20%; content: "";
  background-image:
    radial-gradient(1.4px 1.4px at 12% 20%, color-mix(in srgb, var(--fg) 55%, transparent) 50%, transparent),
    radial-gradient(1.6px 1.6px at 74% 8%,  color-mix(in srgb, var(--accent-2) 70%, transparent) 50%, transparent),
    radial-gradient(1.2px 1.2px at 40% 62%, color-mix(in srgb, var(--fg) 45%, transparent) 50%, transparent),
    radial-gradient(1.8px 1.8px at 88% 48%, color-mix(in srgb, #6be3c9 60%, transparent) 50%, transparent),
    radial-gradient(1.3px 1.3px at 22% 86%, color-mix(in srgb, var(--fg) 50%, transparent) 50%, transparent),
    radial-gradient(1.5px 1.5px at 60% 30%, color-mix(in srgb, var(--accent) 60%, transparent) 50%, transparent),
    radial-gradient(1.2px 1.2px at 6% 54%,  color-mix(in srgb, var(--fg) 40%, transparent) 50%, transparent),
    radial-gradient(1.6px 1.6px at 52% 94%, color-mix(in srgb, var(--fg) 48%, transparent) 50%, transparent);
  background-repeat: repeat; background-size: 460px 460px;
  animation: auth-motes 72s linear infinite;
  opacity: .7;
}
.auth-motes::after { background-size: 300px 300px; opacity: .4; animation-duration: 118s; animation-direction: reverse; }

:root[data-theme="light"] .auth-aurora { opacity: .5; filter: blur(88px); mix-blend-mode: multiply; }
:root[data-theme="light"] .auth-orbits { opacity: .55; }
:root[data-theme="light"] .auth-motes { opacity: .55; }
:root[data-theme="light"] .auth-shoot { color: var(--accent); }
:root[data-theme="light"] .auth-shoot.s3 { color: #1f9f86; }

@keyframes auth-spin { to { transform: rotate(360deg); } }
@keyframes auth-pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes auth-aurora {
  0%   { transform: translate(-50%, -50%) rotate(0deg)   scale(1);    opacity: .32; }
  50%  { transform: translate(-50%, -50%) rotate(180deg) scale(1.12); opacity: .44; }
  100% { transform: translate(-50%, -50%) rotate(360deg) scale(1.02); opacity: .34; }
}
@keyframes auth-shoot {
  0%              { opacity: 0; transform: translate3d(0, 0, 0); }
  3%             { opacity: 0; transform: translate3d(0, 0, 0); }
  4.5%           { opacity: 1; }
  9%             { opacity: 1; }
  12%            { opacity: 0; transform: translate3d(46vw, 26vw, 0); }
  100%           { opacity: 0; transform: translate3d(46vw, 26vw, 0); }
}
@keyframes auth-motes {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-40px, -460px, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .auth-aurora, .auth-orbits .ring, .auth-orbits .ring-set, .auth-orbits .arc,
  .auth-orbits .orbit, .auth-orbits .node, .auth-motes, .auth-motes::after,
  .login-card::before {
    animation: none;
  }
  .auth-shoot { display: none; }
}

/* ===========================================================================
   Incident detail — "SOC console" treatment
   ========================================================================= */

/* per-verdict accent, set on the hero and inherited by its children */
.incident-hero.v-true_positive   { --vd: var(--tp); }
.incident-hero.v-benign_positive { --vd: var(--bp); }
.incident-hero.v-false_positive  { --vd: var(--fp); }
.incident-hero.v-undetermined    { --vd: var(--und); }

/* section labels get a small HUD tick */
.section > h2 { position: relative; padding-left: 16px; }
.section > h2::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 8px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* --- hero ---------------------------------------------------------------- */
.incident-hero {
  position: relative; overflow: hidden;
  margin-bottom: 14px; padding: 22px 24px;
  border: 1px solid var(--line-strong); border-radius: 18px;
  background:
    radial-gradient(680px 200px at 88% -40%, color-mix(in srgb, var(--vd, var(--accent)) 22%, transparent), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  animation: rise .5s var(--ease) both;
}
.incident-hero::before {   /* verdict rail */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--vd, var(--accent)), transparent 85%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--vd, var(--accent)) 60%, transparent);
}
.hero-grid {   /* faint technical grid, top-right */
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--fg) 6%, transparent) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(420px 240px at 100% 0%, #000, transparent 75%);
  mask-image: radial-gradient(420px 240px at 100% 0%, #000, transparent 75%);
}
.hero-top { position: relative; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.eyebrow { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 6px; }
.hero-title h1 { font-size: 23px; line-height: 1.2; }
.hero-title .sub { display: block; margin-top: 6px; color: var(--fg-faint); font-size: 13px; }
.hero-id { display: block; margin-top: 4px; font-size: 11px; color: var(--fg-faint); opacity: .8; letter-spacing: .02em; }
/* One row, always -- wrapping left a lone Refresh button stranded on its own
   line, stretching the hero card taller at in-between widths. Scrolls
   sideways instead when the buttons don't all fit. */
.head-actions {
  /* Right-aligned to sit flush with the card's edge (Status now lives
     separately in the corner, so this row is no longer at risk of having
     its first/most-important item scrolled off -- flex-end reads better
     here than leaving a gap between the buttons and the card's right edge). */
  display: flex; gap: 8px; flex-shrink: 1; flex-wrap: nowrap; justify-content: flex-end;
  max-width: 100%; overflow-x: auto; padding: 2px; scrollbar-width: thin;
  /* Clears the Status control, which floats above (absolute, in the card's
     corner) -- only this row needs to drop below it, not the title next to
     it, so this is a margin here rather than padding on the shared parent. */
  margin-top: 34px;
}
.head-actions > * { flex-shrink: 0; }   /* buttons keep their own width; the row scrolls, they don't squish */

.hero-desc {
  position: relative; margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.hero-desc-label { display: block; margin-bottom: 5px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-faint); }
.hero-desc p { margin: 0; color: var(--fg-dim); line-height: 1.6; max-width: 88ch; }

.hero-verdict { position: relative; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.v-badge {
  width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center;
  border-radius: 13px; color: var(--vd, var(--accent));
  background: color-mix(in srgb, var(--vd, var(--accent)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--vd, var(--accent)) 45%, transparent);
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--vd, var(--accent)) 55%, transparent);
  animation: haze 3.6s var(--ease) infinite;
}
.v-badge svg { width: 24px; height: 24px; }
.v-copy { display: flex; flex-direction: column; gap: 3px; }
.v-word { font-size: 17px; font-weight: 680; letter-spacing: -.01em; color: var(--vd, var(--fg)); text-transform: capitalize; }
.v-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-dim); }
.meter { display: inline-flex; gap: 3px; }
.meter i { width: 16px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.meter.m-low i:nth-child(1),
.meter.m-medium i:nth-child(-n+2),
.meter.m-high i { background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }
.hero-sep { width: 1px; align-self: stretch; background: var(--line); margin: 2px 4px; }
.tag {
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  border: 1px solid var(--line-strong); color: var(--fg-dim); white-space: nowrap;
}
.tag.sev-tag { border-color: currentColor; }
.tag.sev-tag.sev-High { color: var(--sev-high); } .tag.sev-tag.sev-Medium { color: var(--sev-medium); }
.tag.sev-tag.sev-Low { color: var(--sev-low); } .tag.sev-tag.sev-Informational { color: var(--sev-informational); }
.tag.review-tag { color: var(--bp); border-color: color-mix(in srgb, var(--bp) 50%, transparent); }

/* --- alert overview tiles --------------------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.tile {
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  padding: 13px 15px; border-radius: 12px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line);
  animation: rise .44s var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.tile:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); transform: translateY(-2px); }
.tile--wide { grid-column: 1 / -1; }
.tile .t-l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-faint); }
.tile .t-v { color: var(--fg); font-weight: 550; overflow-wrap: anywhere; }

/* --- glow panels --------------------------------------------------------- */
.panel.glow { position: relative; }
.panel.glow::before {
  content: ""; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: .55;
}

/* --- recommended steps as a numbered rail ------------------------------- */
ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
ol.steps li {
  position: relative; counter-increment: step;
  padding: 0 0 16px 40px;
}
ol.steps li:last-child { padding-bottom: 0; }
ol.steps li::before {   /* number node */
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--accent-2);
  border-radius: 50%; background: var(--panel-2);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 12px -2px var(--accent-glow);
}
ol.steps li::after {    /* connector line */
  content: ""; position: absolute; left: 11.5px; top: 26px; bottom: 4px; width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
}
ol.steps li:last-child::after { display: none; }
ol.steps .step-what { display: block; font-weight: 550; color: var(--fg); }
ol.steps .step-why { display: block; margin-top: 4px; font-size: 12.5px; color: var(--fg-dim); }

/* --- entities: identifier + involvement ------------------------------------ */
ul.entity-list { list-style: none; margin: 0; padding: 0; }
ul.entity-list li { padding: 11px 0; border-bottom: 1px solid var(--line); }
ul.entity-list li:first-child { padding-top: 0; }
ul.entity-list li:last-child { padding-bottom: 0; border-bottom: 0; }
ul.entity-list .ent-name {
  display: block; font-weight: 600; color: var(--fg); font-size: 13px;
  overflow-wrap: anywhere; padding-left: 14px; position: relative;
}
ul.entity-list .ent-name::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px;
  border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow);
}
ul.entity-list .ent-role { display: block; margin-top: 4px; padding-left: 14px; font-size: 12.5px; color: var(--fg-dim); line-height: 1.55; overflow-wrap: anywhere; }
ul.entity-list li[hidden] { display: none; }

/* comments thread */
.comments .cmt-list { list-style: none; margin: 0 0 18px; padding: 0; }
.comments .cmt { padding: 12px 0; border-bottom: 1px solid var(--line); }
.comments .cmt:first-child { padding-top: 0; }
.comments .cmt-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.comments .cmt-author { font-weight: 600; font-size: 13.5px; }
.comments .cmt-src {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-2); border: 1px solid var(--line-strong); border-radius: 5px; padding: 1px 6px;
}
.comments .cmt-at { font-size: 12px; color: var(--fg-faint); margin-left: auto; }
.comments .cmt-body { color: var(--fg-dim); font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.comments .cmt-add { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.comments .cmt-add textarea {
  width: 100%; resize: vertical; min-height: 58px; font: inherit;
  background: var(--panel-2); color: var(--fg); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 10px 12px;
}
.comments .cmt-add textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }

/* verdict feedback panel */
.vfb-form { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.vfb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.vfb-form textarea {
  width: 100%; resize: vertical; min-height: 52px; font: inherit;
  background: var(--panel-2); color: var(--fg); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 10px 12px;
}
.vfb-form textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.vfb-others { border-top: 1px solid var(--line); width: 100%; }
.vfb-item { font-size: 0.92rem; padding: 4px 0; }

/* count pill in the "Entities" heading — cancel the h2 uppercase/tracking */
.ent-count {
  display: inline-block; margin-left: 8px; padding: 2px 8px;
  font: 500 11px/1.5 var(--mono); letter-spacing: 0; text-transform: none;
  color: var(--fg-dim); background: var(--bg-1);
  border: 1px solid var(--line-strong); border-radius: 999px; vertical-align: middle;
}

/* always-on filter; list scrolls once it's long (>5, class set server-side) */
.entity-filter { width: 100%; margin-bottom: 12px; }
ul.entity-list.is-scroll {
  max-height: 19rem; overflow-y: auto;
  /* room for the scrollbar so text doesn't sit under it */
  padding-right: 10px; margin-right: -10px;
}
ul.entity-list.is-scroll li:last-child { padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.entity-none { margin: 2px 0 0; color: var(--fg-faint); font-size: 13px; }

/* --- timeline sub-page --------------------------------------------------- */
ol.tl { list-style: none; margin: 0; padding: 0; counter-reset: tl; }
ol.tl li {
  position: relative; counter-increment: tl;
  padding: 0 0 18px 26px; color: var(--fg); line-height: 1.6;
}
ol.tl li:last-child { padding-bottom: 0; }
ol.tl li::before {
  content: ""; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--panel);
  border: 2px solid var(--accent); box-shadow: 0 0 10px -1px var(--accent-glow);
}
ol.tl li::after {
  content: ""; position: absolute; left: 7px; top: 18px; bottom: 2px; width: 1px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, transparent), transparent);
}
ol.tl li:last-child::after { display: none; }

/* ===========================================================================
   Pre-report incident — queued / investigating
   ========================================================================= */
.pending-hero {
  position: relative; overflow: hidden;
  margin-bottom: 18px; padding: 24px 26px;
  border: 1px solid var(--line-strong); border-radius: 18px;
  background:
    radial-gradient(680px 220px at 88% -40%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    linear-gradient(180deg, var(--panel-2), var(--panel));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
  animation: rise .5s var(--ease) both;
}
.pending-hero::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent-2), transparent 85%);
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 60%, transparent);
}
.pending-hero .eyebrow { position: relative; }
.pending-hero h1 { position: relative; font-size: 22px; line-height: 1.25; }
.pending-hero .sub { position: relative; display: block; margin-top: 6px; color: var(--fg-faint); font-size: 13px; }
.pending-hero .hero-id { position: relative; }

/* one phase visible at a time, driven by [data-phase] on .pending-hero */
.iv-phase { position: relative; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); display: none; }
.pending-hero[data-phase="queued"] .iv-phase[data-when="queued"] { display: flex; align-items: center; gap: 18px; }
.pending-hero[data-phase="investigating"] .iv-phase[data-when="investigating"] { display: block; }
.pending-hero[data-phase="closed"] .iv-phase[data-when="closed"] { display: block; }

.iv-copy { display: flex; flex-direction: column; gap: 4px; }
.iv-head { font-size: 15px; font-weight: 650; color: var(--fg); }
.iv-sub { font-size: 12.5px; color: var(--fg-dim); max-width: 70ch; line-height: 1.55; }

/* queued: three orbiting dots */
.iv-orbit { position: relative; width: 46px; height: 46px; flex: none; }
.iv-orbit span {
  position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-2); box-shadow: 0 0 10px var(--accent-glow);
  animation: iv-orbit 1.6s linear infinite;
}
.iv-orbit span:nth-child(2) { animation-delay: -.53s; }
.iv-orbit span:nth-child(3) { animation-delay: -1.06s; }
@keyframes iv-orbit {
  from { transform: rotate(0) translateX(17px); }
  to   { transform: rotate(360deg) translateX(17px); }
}

/* investigating: progress bar with a traveling shimmer */
.iv-bar {
  position: relative; height: 8px; margin: 16px 0 18px; border-radius: 5px;
  background: var(--panel-2); overflow: hidden; border: 1px solid var(--line);
}
.iv-bar > i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .6s var(--ease);
}
.iv-bar::after {
  content: ""; position: absolute; inset: 0; border-radius: 5px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 40%, transparent), transparent);
  transform: translateX(-100%);
  animation: iv-shimmer 1.8s var(--ease) infinite;
}
@keyframes iv-shimmer { to { transform: translateX(100%); } }

/* investigating: live step checklist */
.iv-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.iv-steps li { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-dim); }
.iv-steps li.done { color: var(--fg); animation: rise .3s var(--ease) both; }
.iv-steps li .tick {
  width: 18px; height: 18px; flex: none; display: grid; place-items: center; font-size: 11px;
  border-radius: 50%; color: var(--tp);
  background: color-mix(in srgb, var(--tp) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tp) 45%, transparent);
}
.iv-steps li .at { margin-left: auto; font-size: 11px; color: var(--fg-faint); }
.iv-steps li.current { color: var(--accent-2); }
.iv-steps li .spin {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent-2);
  animation: iv-spin .8s linear infinite;
}
@keyframes iv-spin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------- users page */
.users-scope { display: inline-flex; align-items: center; gap: 10px; margin: -4px 0 20px; }
.users-scope-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint); }
.users-scope .select-wrap { width: auto; }
.users-scope .select { width: auto; min-width: 220px; }

/* ------------------------------------------------------------------- onboarding */
.onb-result {
  border-color: color-mix(in srgb, var(--fp) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--fp) 6%, var(--panel));
}
.onb-result h2 { color: var(--fg); margin-bottom: 10px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.onb-token, .onb-consent { word-break: break-all; }
.onb-todo { margin: 4px 0 0; padding-left: 18px; color: var(--fg-dim); font-size: 13px; line-height: 1.9; }
.onb-todo .mono { word-break: break-all; }
.onb-clients { display: flex; flex-direction: column; gap: 2px; }

/* --------------------------------------------------- scripted demo control strip */
.demo-wrap { margin: 0 0 16px; }
.demo-toggle { display: inline-flex; align-items: center; gap: 7px; }
.demo-box {
  margin-top: 10px; padding: 16px 18px; border-radius: var(--radius-sm);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
  animation: rise .18s var(--ease) both;
}
.demo-title { margin: 0 0 12px; font-size: 12.5px; color: var(--fg-dim); }
.demo-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.demo-form + .demo-form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.demo-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint); }
.demo-form .select-wrap { width: auto; }
.demo-form .select { width: auto; min-width: 240px; padding-right: 34px; }
.demo-hint { font-size: 12px; color: var(--fg-faint); margin-right: auto; }

/* -------------------------------------------------------------------- animations */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--accent-glow); } 50% { box-shadow: 0 0 0 6px transparent; } }
@keyframes haze {
  0%, 100% { box-shadow: 0 0 22px -4px color-mix(in srgb, var(--vd, var(--accent)) 55%, transparent); }
  50%      { box-shadow: 0 0 30px 0   color-mix(in srgb, var(--vd, var(--accent)) 30%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------- re-investigation banner */
.notice.reinvestigating {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 18px; padding: 12px 16px; border-radius: 12px;
  font-size: 13px; color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line-strong));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}
.notice.reinvestigating .spin {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  border: 2px solid var(--line-strong); border-top-color: var(--accent-2);
  animation: iv-spin .8s linear infinite;
}

/* ------------------------------------------------ manual refresh button */
.list-refresh { display: flex; justify-content: flex-end; margin: 0 0 10px; }
.btn-refresh { display: inline-flex; align-items: center; gap: 6px; }
.btn-refresh .ref-ic { display: inline-block; font-size: 14px; line-height: 1; }
.btn-refresh.is-refreshing { pointer-events: none; opacity: .7; }
.btn-refresh.is-refreshing .ref-ic { animation: iv-spin .7s linear infinite; }
.btn-refresh.refreshed {
  border-color: color-mix(in srgb, var(--tp) 55%, var(--line-strong));
  background: color-mix(in srgb, var(--tp) 12%, transparent);
}

/* ------------------------------------------------ MITRE ATT&CK coverage */
.mitre-intro { margin-bottom: 16px; }
.mitre-meta {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 12.5px; color: var(--fg-dim);
}
.mitre-meta .dot { color: var(--fg-faint); }
.mitre-meta--empty { color: var(--fg-faint); font-style: italic; }

.mitre-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.mitre-stat {
  flex: 1; min-width: 190px; padding: 13px 16px; border-radius: var(--radius);
  background: var(--panel); border: 1px solid var(--line);
  opacity: 0; animation: rise .4s var(--ease) both;
}
.mitre-stat:nth-child(2) { animation-delay: 70ms; }
.mitre-stat:nth-child(3) { animation-delay: 140ms; }
.mitre-stat b { display: block; font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--accent-2); }
.mitre-stat span { display: block; font-size: 11.5px; color: var(--fg-dim); margin-top: 3px; line-height: 1.35; }

/* ---- the matrix itself: mirrors Sentinel's own MITRE ATT&CK blade layout
   (one column per tactic, every technique listed top to bottom) but in
   Roxas's accent hue, with gradient intensity standing in for "how many
   enabled rules confirm this technique". A cell just lights up -- no rule
   names on the grid itself, that's what the click-through popover is for
   (keeps the matrix scannable instead of a wall of tiny mono text). */
.mitre-matrix-wrap { overflow-x: auto; padding-bottom: 4px; }
.mitre-matrix { display: flex; gap: 10px; min-width: max-content; }
.mitre-col {
  width: 152px; flex: none; display: flex; flex-direction: column; gap: 6px;
  opacity: 0; animation: rise .4s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 30ms);
}
.mitre-col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.mitre-col__label { font-weight: 600; font-size: 12px; color: var(--fg); letter-spacing: -.005em; line-height: 1.25; }
.mitre-col__count { font-family: var(--mono); font-size: 10.5px; color: var(--accent-2); white-space: nowrap; flex: none; }
.mitre-col__bar {
  height: 3px; border-radius: 2px; background: var(--line-strong); overflow: hidden;
}
.mitre-col__bar span {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .6s var(--ease);
}
.mitre-col__body { display: flex; flex-direction: column; gap: 3px; }

.mitre-cell {
  position: relative; display: flex; align-items: flex-start; justify-content: center; flex-direction: column;
  width: 100%; min-height: 52px; border-radius: 8px; padding: 8px 9px; cursor: pointer;
  font: inherit; text-align: left; background: var(--panel-2); border: 1px solid var(--line);
  transition: transform .12s var(--ease), border-color .12s var(--ease), box-shadow .16s var(--ease);
}
.mitre-cell:hover { transform: translateY(-1px); z-index: 2; }
.mitre-cell:focus-visible {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-glow); z-index: 2;
}
/* Gradient fill + outer glow both scale with --n (0-100, this technique's
   confirming-rule count relative to the most-confirmed technique in its
   tactic) -- more confirmation reads as a fuller, warmer, more luminous
   fill, never a different color. Saturation is pushed harder than a plain
   tint so a well-confirmed cell actually reads as "lit up", not just a
   slightly darker gray; the glow is the same accent color bled outward so
   it feels like the cell's own light, not a decoration on top of it. */
.mitre-cell.is-covered {
  border-color: color-mix(in srgb, var(--accent) calc(50% + var(--n, 0) * 0.25%), var(--line-strong));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) calc(38% + var(--n, 0) * 0.5%), var(--panel-2)),
    color-mix(in srgb, var(--accent-2) calc(26% + var(--n, 0) * 0.56%), var(--panel-2))
  );
  box-shadow:
    0 0 calc(4px + var(--n, 0) * 0.18px) color-mix(in srgb, var(--accent) calc(24% + var(--n, 0) * 0.4%), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent-2) 20%, transparent);
}
.mitre-cell.has-subs { padding-right: 20px; }
.mitre-cell.is-covered:hover {
  box-shadow:
    0 0 calc(8px + var(--n, 0) * 0.24px) color-mix(in srgb, var(--accent) calc(34% + var(--n, 0) * 0.45%), transparent),
    inset 0 1px 0 color-mix(in srgb, var(--accent-2) 26%, transparent);
}
.mitre-cell__name {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  font-size: 10.8px; line-height: 1.32; color: var(--fg-dim);
  overflow: hidden; white-space: normal; word-break: break-word;
}
.mitre-cell.is-covered .mitre-cell__name { color: var(--fg); font-weight: 600; }
.mitre-cell__chev {
  position: absolute; top: 7px; right: 7px; flex: none;
  color: var(--fg-faint); transition: transform .16s var(--ease), color .12s var(--ease);
}
.mitre-cell.is-covered .mitre-cell__chev { color: var(--fg); opacity: .85; }
.mitre-cell[aria-expanded="true"] .mitre-cell__chev { transform: rotate(90deg); }

/* ---- legend: the whole reason coverage now reads as a color gradient
   instead of visible rule names -- clients need one place that spells out
   what "more lit" means without having to click a cell to find out. Swatch
   gradients reuse the exact same --n-driven formula as the real cells. */
.mitre-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px;
  margin-bottom: 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--line);
  font-size: 11.5px; color: var(--fg-dim);
}
.mitre-legend-scale { display: flex; align-items: center; gap: 9px; }
.mitre-legend-label { font-weight: 600; color: var(--fg); }
.mitre-legend-swatches { display: flex; gap: 4px; }
.mitre-legend-swatch {
  width: 20px; height: 20px; border-radius: 5px; background: var(--panel-2); border: 1px solid var(--line);
}
.mitre-legend-swatch.is-covered {
  border-color: color-mix(in srgb, var(--accent) calc(50% + var(--n, 0) * 0.25%), var(--line-strong));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) calc(38% + var(--n, 0) * 0.5%), var(--panel-2)),
    color-mix(in srgb, var(--accent-2) calc(26% + var(--n, 0) * 0.56%), var(--panel-2))
  );
  box-shadow: 0 0 calc(4px + var(--n, 0) * 0.18px) color-mix(in srgb, var(--accent) calc(24% + var(--n, 0) * 0.4%), transparent);
}
.mitre-legend-range { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; color: var(--fg-faint); }
.mitre-legend-item { display: flex; align-items: center; gap: 7px; }
.mitre-legend-corr-swatch { width: 14px; height: 14px; border-left: 2px solid var(--accent-2); flex: none; }
.mitre-legend-chev { color: var(--fg-faint); flex: none; }

/* ---- click-through popover: a technique's rule list, or (for a technique
   with sub-techniques) a branch of them first -- picking one drills into
   ITS rule list, with a back arrow to return. Single reusable element,
   positioned via JS off the clicked cell's own rect; same fixed-popover
   pattern as the incident page's Respond control. */
.mitre-pop {
  position: fixed; z-index: 400; width: 300px; max-width: calc(100vw - 32px);
  max-height: min(420px, calc(100vh - 32px)); overflow-y: auto;
  padding: 14px 16px; background: var(--panel-2); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow); animation: rise .16s var(--ease) both;
}
.mitre-pop-back {
  display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px;
  font: inherit; font-size: 11.5px; color: var(--fg-dim); background: none; border: 0; padding: 0; cursor: pointer;
}
.mitre-pop-back[hidden] { display: none; }   /* explicit display: beats the [hidden] UA rule otherwise */
.mitre-pop-back:hover { color: var(--fg); }
.mitre-pop-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.mitre-pop-tactic {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint);
}
.mitre-pop-id { font-family: var(--mono); font-size: 10.5px; color: var(--accent-2); flex: none; }
.mitre-pop-title { font-size: 14px; font-weight: 700; color: var(--fg); margin-top: 2px; }
.mitre-pop-branch { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.mitre-pop-branch[hidden] { display: none; }   /* explicit display: beats the [hidden] UA rule otherwise */
.mitre-pop-branch-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font: inherit; padding: 7px 9px; border-radius: 7px;
  background: var(--panel); border: 1px solid var(--line); cursor: pointer;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.mitre-pop-branch-row:hover, .mitre-pop-branch-row:focus-visible { border-color: var(--accent); outline: none; }
.mitre-pop-branch-row.is-covered { border-color: color-mix(in srgb, var(--accent) 40%, var(--line-strong)); }
.mitre-pop-branch-dot {
  flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong);
}
.mitre-pop-branch-row.is-covered .mitre-pop-branch-dot {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.mitre-pop-branch-name { flex: 1; font-size: 12px; color: var(--fg-dim); }
.mitre-pop-branch-row.is-covered .mitre-pop-branch-name { color: var(--fg); font-weight: 600; }
.mitre-pop-branch-id { font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); flex: none; }
.mitre-pop-rules-hd {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--fg-faint);
  margin-top: 14px; margin-bottom: 6px;
}
.mitre-pop-rules { display: flex; flex-direction: column; gap: 4px; }
.mitre-pop-rule {
  font-size: 12px; color: var(--fg-dim); padding: 6px 9px; border-radius: 7px; background: var(--panel);
}
.mitre-pop-rules-empty { font-size: 12px; color: var(--fg-faint); font-style: italic; }
.mitre-pop-close {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; display: grid; place-items: center;
  border-radius: 50%; font-size: 16px; line-height: 1; color: var(--fg-faint);
  background: none; border: 0; cursor: pointer;
}
.mitre-pop-close:hover { color: var(--fg); background: var(--raise); }

@media (prefers-reduced-motion: reduce) {
  .mitre-col, .mitre-stat { animation: none; opacity: 1; }
}