/* ─── Argus stylesheet ─────────────────────────────────────────
   Tokens live in tokens.css — this file ONLY references variables.
   No raw hex, no off-grid pixel values, no naked transition timings.
   The Phase 0 audit enforces this. */

/* Layout-level dimensions that aren't design tokens. Defined here so
   the same value can be used by #hdr (height), body (padding-top),
   and #drawer (top + height calc) without three-way drift. */
:root {
  --hdr-height: 96px;
}

* { box-sizing: border-box; }
html, body {
  margin:0; padding:0; min-height: 100dvh; height: 100dvh;
  background: var(--bg-0); color: var(--text-primary);
  font-family: var(--font-sans);
  /* Base body type: 13/1.55 with the full stylistic-set stack from spec.
     Tabular figures only at the digit level (tnum). */
  font-size: var(--text-base-size); line-height: var(--text-base-lh);
  letter-spacing: var(--tracking-body);
  font-feature-settings: "ss01", "cv11", "cv02", "cv05", "cv09";
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Tabular numerals on every column / live counter. */
.num, .stat .num, .num-cell, .src-count, .freshness, .ts, .last-poll,
.live-epm, .clock, [data-count-sev], [data-count-cat], .tab-count,
.facet-count, .score, .score-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum", "ss01", "cv11";
}

/* Mono contexts: disable contextual-alternates and ligatures so code
   reads literally. */
code, pre, kbd, .ioc-value-cell, .val, .src, .alias, .latest-meta,
.last-poll, .src-count, .src-meta {
  font-family: var(--font-mono);
  font-feature-settings: "tnum", "lnum";
  font-variant-ligatures: none;
}

/* ─── Accessibility utilities (PR A) ──────────────────────────── */
.visually-hidden-h2,
.sr-only {
  position: absolute !important; width: 1px; height: 1px;
  padding:0; margin:-var(--space-px); overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
/* PR-A item 3: spec'd focus ring with offset + soft halo. Applies everywhere;
   no `outline: none` overrides should remain. */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(122,167,255,0.25);
  border-radius: inherit;
}
/* PR-A item 9: non-color shape AND letter on severity badges
   (●/◐/○/—  +  C/H/M/L) so colorblind users get two redundant cues. */
.pill[data-sev-letter]::before {
  content: attr(data-sev-letter);
  display: inline-block; margin-right:var(--space-1);
  font-weight: var(--fw-medium); opacity: .92;
}
.pill.sev-critical::after { content: " ●"; }
.pill.sev-high::after     { content: " ◐"; }
.pill.sev-med::after      { content: " ○"; }
.pill.sev-low::after      { content: " —"; }
.score.sev-critical::after { content: " ●"; }
.score.sev-high::after     { content: " ◐"; }
.score.sev-med::after      { content: " ○"; }
.score.sev-low::after      { content: " —"; }
/* Headings inside the bottom regions render the visually-hidden ones invisible. */
h1, h2 { font: inherit; margin:0; }

body {
  display: grid;
  /* PR-B item 9: replace fixed widths with clamp() so panes flex. */
  grid-template-columns:
    clamp(216px, 19vw, 256px)
    minmax(0, 1fr)
    clamp(320px, 26vw, 400px);
  /* The header is `position: fixed !important` (96px) and the body has
     `padding-top: 96px` to reserve space for it, so the header is not
     placed via the grid. The leading 72px row that used to live here
     was a placeholder reserved for the now-removed #sys-health amber
     bar; deleting it lets #sidebar / #map-region / #feed sit flush
     against the bottom of the fixed header.

     Equal-split rows: the map row and the bottom-tab row each take
     half of (100vh − 96px header). minmax() gives a small floor so
     the map doesn't shrink below 320px / the table below 280px on
     short viewports — at any height ≥600 the split is exactly 1:1. */
  grid-template-rows: minmax(320px, 1fr) minmax(280px, 1fr);
  grid-template-areas:
    "sidebar map feed"
    "bottom bottom bottom";
}

/* ─── Responsive breakpoints ──────────────────────────────────
   ≥1280: 3-column desktop (above), all 6 KPIs visible
   <1280: collapsible sidebar, KPIs wrap to 2 rows
   <1024: single column, KPIs progressively disclose by data-priority
   < 768: priority≤2 KPIs only (drops Sources / Actors); LIVE compact
   < 480: priority≤1 KPIs only (Reports + IOCs only) */

#sidebar-toggle {
  display: none; background: var(--bg-card); color: var(--text);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  padding:var(--space-2) var(--space-2); cursor: pointer; font-family: var(--mono);
  font-size: var(--text-xs-size); letter-spacing: .12em; margin-right:var(--space-2);
  text-transform: uppercase;
}

@media (max-width: 1280px) {
  body {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 32vw, 380px);
    /* No "hdr" row — header is fixed-positioned, body padding-top
       reserves its space. */
    grid-template-areas:
      "map feed"
      "bottom bottom";
  }
  #sidebar {
    position: fixed; top:60px; left:0; bottom:0; z-index: 30;
    width: clamp(240px, 70vw, 320px);
    transform: translateX(-100%); transition: transform var(--dur-base) ease;
    box-shadow: 4px 0 18px color-mix(in srgb, var(--ctp-crust) 50%, transparent);
  }
  #sidebar.open { transform: translateX(0); }
  #sidebar-toggle { display: inline-block; }
  /* Header wraps so KPI strip can take a second row instead of overlapping. */
  #hdr {
    flex-wrap: wrap; align-items: center;
    padding:var(--space-2) var(--space-3) var(--space-2) var(--space-3); row-gap:var(--space-2); min-height: 60px; height: auto;
  }
  body { grid-template-rows: minmax(320px, 1fr) minmax(280px, 1fr); }
  /* Stats grid wraps to a 2-row layout; uses responsive columns instead of
     a tight overflow-hidden flex strip. */
  .stats {
    display: grid; gap:var(--space-2) var(--space-4); padding:var(--space-2) var(--space-2);
    grid-template-columns: repeat(6, minmax(0, 1fr));
    width: 100%; flex: 1 1 100%;
    min-width: 0;
  }
  .stat .num { font-size: var(--text-lg-size); }
  .clock { display: none; }
}

/* Phase 8.3: 1280-980 → 2-column (sidebar overlay, map left, table right);
   the Recent Events feed becomes a slide-over (off-canvas right) toggled
   from the header. <980 → fully stacked. */
@media (max-width: 1280px) {
  html, body {
    /* Below 1280, the sidebar collapses and the KPI strip wraps to a
       second row — the page MUST be allowed to grow taller than the
       viewport, otherwise the wrapped content is clipped. */
    height: auto; min-height: 100dvh; overflow-y: auto;
  }
  body {
    grid-template-columns: minmax(0, 1fr);
    /* No "hdr" row — header is fixed-positioned. */
    grid-template-areas:
      "map"
      "bottom";
    grid-template-rows: minmax(320px, 1fr) minmax(280px, 1fr);
  }
  #feed {
    position: fixed; top: calc(var(--space-16) + var(--space-2)); right:0; bottom:0;
    width: clamp(320px, 28vw, 420px);
    z-index: 25;
    transform: translateX(100%);
    transition: transform var(--dur-base) ease;
    background: var(--bg-panel);
    border-left:var(--space-px) solid var(--border);
    box-shadow: -4px 0 18px color-mix(in srgb, var(--ctp-crust) 45%, transparent);
    max-height: none;
  }
  #feed.feed-slide-open { transform: translateX(0); }
  .feed-slide-toggle { display: inline-flex; }
}
@media (min-width: 1281px) {
  /* Header toggle is only relevant when feed is off-canvas. */
  .feed-slide-toggle { display: none; }
  #feed { transform: none !important; position: static; }
}

@media (max-width: 980px) {
  body {
    grid-template-columns: minmax(0, 1fr);
    /* No "hdr" row — header is fixed-positioned. */
    grid-template-rows: auto auto;
    grid-template-areas:
      "map"
      "bottom";
    height: auto; min-height: 100dvh;
  }
  html, body { overflow-y: auto; }
  #map-region { min-height: 45dvh; }
  #feed { max-height: 50dvh; }
  #bottom { min-height: 45dvh; width: 100%; }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* No CSS-based drops — JS-measured overflow moves KPIs into the
     "+N more" popover instead of silently hiding them. */
}

@media (max-width: 768px) {
  .live-indicator, .last-new { font-size: var(--text-xs-size); }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap:var(--space-2); }
  /* Collapsible map */
  #map-region { position: relative; }
  #map-region.collapsed #map,
  #map-region.collapsed #map-legend,
  #map-region.collapsed .stats-strip { display: none; }
  #map-collapse-toggle {
    display: block; width: 100%; padding:var(--space-2) var(--space-3);
    background: var(--bg-card); border: 0; border-bottom:var(--space-px) solid var(--border);
    color: var(--text); cursor: pointer; font-family: var(--mono);
    font-size: var(--text-xs-size); text-transform: uppercase; letter-spacing: .12em;
  }
  #feed { display: none; }
  #drawer {
    inset:auto 0 0 0; width: 100%; max-height: 80dvh;
    border-left:0; border-top:var(--space-px) solid var(--accent);
    transform: translateY(100%);
  }
  #drawer.hidden { transform: translateY(100%); }
  #drawer:not(.hidden) { transform: translateY(0); }
}

@media (min-width: 769px) {
  #map-collapse-toggle { display: none; }
  .tab.small-only { display: none; }
}

@media (max-width: 480px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:var(--space-2); padding:var(--space-1) var(--space-2);
  }
  .stat .num { font-size: var(--text-md-size); }
  .stat .lbl { font-size: var(--text-xs-size); }
  .live-indicator { padding:var(--space-1) var(--space-2); }
  .live-indicator .live-label { display: none; }
  .last-new { padding:var(--space-1) var(--space-2); min-width: 40px; }
  #drawer {
    inset:0 !important; width: 100%; max-height: 100dvh;
    border: 0; border-radius: 0;
  }
  .drawer-head { position: sticky; top:0; z-index: 2; }
  .brand .tagline { display: none; }
}

/* ─── Header ─────────────────────────────────────────────────── */
#hdr {
  grid-area: hdr; display: flex; align-items: stretch;
  background: var(--bg-panel);
  border-bottom:var(--space-px) solid var(--border);
  padding-right:var(--space-4);
  /* Always allow wrap so KPIs flow to a second row instead of overflowing
     into the LIVE pill / clock at intermediate widths. */
  flex-wrap: wrap; row-gap:var(--space-1);
  min-width: 0; overflow-x: hidden;
}
.brand {
  display: flex; align-items: center; gap:var(--space-2);
  padding:0 var(--space-4); border-right:var(--space-px) solid var(--border);
  min-width: 240px;
}
.brand-text { display: flex; flex-direction: column; gap:var(--space-0_5); line-height: 1; }
.logo {
  font-weight: var(--fw-medium); font-size: var(--text-md-size); letter-spacing: .14em;
  color: var(--text);
}
.tagline {
  color: var(--text-muted); font-size: var(--text-xs-size);
  text-transform: uppercase; letter-spacing: .14em;
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot-live   { background: var(--sev-low); box-shadow: 0 0 0 0 var(--ok-bg); animation: pulse 2s infinite; }
.dot-crit     { background: var(--sev-critical); }
.dot-warn  { background: var(--sev-med); }
.dot-idle    { background: var(--text-dim); }
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0   var(--ok-bg); }
  70%  { box-shadow: 0 0 0 8px var(--ok-bg);   }
  100% { box-shadow: 0 0 0 0   var(--ok-bg);   }
}

/* Desktop ≥1280: flex strip with 6 KPIs. Each stat has a min-width so that
   when widths get tight (≈1280-1320px) we wrap the row instead of overflowing.
   `min-width: 0` on the strip stops it from forcing the header beyond its
   container width. */
.stats {
  display: flex; flex: 1 1 auto; align-items: center;
  padding-left:var(--space-5); gap:var(--space-6);
  flex-wrap: wrap; row-gap:var(--space-2);
  min-width: 0; overflow: hidden;
}
.stat {
  display: flex; flex-direction: column; line-height: 1;
  min-width: 64px; flex: 0 0 auto;
}
/* KPI numerals: 28–32px / 700, tabular-nums for column alignment. */
.stat .num {
  font-family: var(--sans);
  font-weight: var(--fw-medium);
  font-size: clamp(var(--text-xl-size), 1.8vw + var(--text-sm-size), var(--text-2xl-size));
  line-height: 1;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01", "cv11";
  letter-spacing: -0.01em;
  margin-bottom:var(--space-2);
}
@media (max-width: 1024px) { .stat .num { font-size: var(--text-xl-size); } }
@media (max-width: 480px)  { .stat .num { font-size: var(--text-lg-size); } }
/* Legacy .stat .num rule deliberately removed — it was a 22px / 600 fallback
   that shadowed the new clamp()/700 spec. */
.stat .lbl {
  color: var(--text-muted); font-size: var(--text-xs-size); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .12em;
}
/* PR-H item 33: KPI deltas. Arrow shape carries the up/down meaning so
   colorblind users get a non-color cue. */
.stat .delta {
  font-family: var(--mono); font-size: var(--text-xs-size); margin-top:var(--space-1);
  letter-spacing: .04em; min-height: 1em;
}
.stat .delta.up   { color: var(--sev-low); }
.stat .delta.down { color: var(--sev-critical); }
.stat .delta.flat { color: var(--text-dim); }
/* 7-day rolling baseline: rendered below the 24h delta. Same shape rules. */
.stat .baseline {
  font-family: var(--mono); font-size: var(--text-xs-size);
  letter-spacing: .02em; min-height: 1em; opacity: .85;
}
.stat .baseline.baseline-up   { color: var(--sev-high); }
.stat .baseline.baseline-down { color: var(--text-dim); }
.stat .baseline.baseline-flat { color: var(--text-dim); }
/* KPI tile is now a button. Reset native button styling and add an
   explicit hover/focus affordance so the analyst knows it's interactive. */
button.stat {
  appearance: none; background: transparent; border: 0;
  text-align: left; cursor: pointer; padding:var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  transition: background-color 120ms ease, box-shadow 120ms ease;
}
button.stat:hover {
  background: var(--bg-hover, color-mix(in srgb, var(--ctp-text) 4%, transparent));
}
button.stat:focus-visible {
  outline: 2px solid var(--accent, var(--ctp-blue));
  outline-offset: 2px;
}
.live-indicator {
  display: flex; align-items: center; gap:var(--space-2); padding:var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  margin-right:var(--space-2); background: var(--bg-card);
  font-family: var(--mono); font-size: var(--text-xs-size);
  text-transform: uppercase; letter-spacing: .12em;
}
.live-indicator.stalled { border-color: var(--sev-critical); }
.live-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sev-low);
  box-shadow: 0 0 0 0 var(--ok-bg);
  animation: pulse 1.6s infinite;
}
.live-indicator.stalled .live-pulse {
  background: var(--sev-critical);
  box-shadow: 0 0 0 0 var(--crit-bg);
  animation: pulse-red 1.2s infinite;
}
@keyframes pulse-red {
  0%   { box-shadow: 0 0 0 0 var(--crit-bg); }
  70%  { box-shadow: 0 0 0 8px var(--crit-bg); }
  100% { box-shadow: 0 0 0 0 var(--crit-bg); }
}
.live-label { color: var(--text); font-weight: var(--fw-medium); }
.live-epm { color: var(--accent); font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.live-indicator.stalled .live-epm { color: var(--sev-critical); }

/* Legacy header chip group (removed in redesign) — kept for any callers that
   still create runtime .chip elements. */
.chip {
  background: transparent; color: var(--text-muted);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  padding:var(--space-1) var(--space-3); font-size: var(--text-xs-size); cursor: pointer;
  text-transform: uppercase; letter-spacing: .12em; font-family: var(--sans); font-weight: var(--fw-semibold);
  transition: all var(--dur-fast) ease;
}
.chip:hover { color: var(--text); border-color: var(--accent); background: var(--bg-hover); }
.chip.active { background: var(--accent); color: var(--text-inverse); border-color: var(--accent); }

/* ─── Sidebar ────────────────────────────────────────────────── */
#sidebar {
  grid-area: sidebar; background: var(--bg-panel);
  border-right:var(--space-px) solid var(--border); overflow-y: auto; padding:var(--space-4) var(--space-3);
}
.sec { margin-bottom:var(--space-5); }
/* Sidebar section headings: 14px / 600. Uppercase + wider tracking is
   reserved for short single-token labels (SEVERITY, CATEGORY, SCOPE);
   longer phrases use the same size in title case. */
.sec h2, .sec h3 {
  font-size: var(--text-md-size); color: var(--text);
  font-weight: var(--fw-semibold); letter-spacing: 0.04em;
  margin:0 0 var(--space-2);
  padding-bottom:var(--space-2); border-bottom:var(--space-px) solid var(--border-soft);
}
.sec[aria-labelledby="sec-severity"] h2,
.sec[aria-labelledby="sec-category"] h2,
.sec[aria-labelledby="sec-scope"] h2 {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: var(--text-sm-size); color: var(--text-dim);
}
.sec label {
  display: flex; align-items: center; gap:var(--space-2); padding:var(--space-1) 0;
  cursor: pointer; font-size: var(--text-sm-size); user-select: none; color: var(--text-muted);
}
.sec label:hover { color: var(--text); }
.sec input[type=checkbox] { accent-color: var(--accent); margin:0; }
.muted { color: var(--text-muted); font-size: var(--text-xs-size); }

.pill {
  padding:var(--space-px) var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-xs-size); font-family: var(--mono);
  font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .08em;
}
.pill.sev-critical { background: var(--crit-bg);   color: var(--sev-critical); }
.pill.sev-high     { background: var(--sev-high-bg);  color: var(--sev-high);     }
.pill.sev-med      { background: rgba(245,158,11,.15);  color: var(--sev-med);      }
.pill.sev-low      { background: var(--ok-bg);  color: var(--sev-low);      }
.pill.sev-info     { background: rgba(107,114,128,.15); color: var(--sev-info);     }

.cat-pill {
  padding:var(--space-px) var(--space-2); border-radius: var(--radius-xs); font-size: var(--text-xs-size); font-family: var(--mono);
  font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .06em;
  background: var(--bg-elevated); color: var(--text-muted);
  border-left:var(--space-0_5) solid var(--border);
}
.cat-pill.cat-A { border-left-color: var(--cat-A); color: var(--cat-A); }
.cat-pill.cat-B { border-left-color: var(--cat-B); color: var(--cat-B); }
.cat-pill.cat-C { border-left-color: var(--cat-C); color: var(--cat-C); }
.cat-pill.cat-D { border-left-color: var(--cat-D); color: var(--cat-D); }
.cat-pill.cat-E { border-left-color: var(--cat-E); color: var(--cat-E); }
.cat-pill.cat-F { border-left-color: var(--cat-F); color: var(--cat-F); }
.cat-pill.cat-G { border-left-color: var(--cat-G); color: var(--cat-G); }

.src-list { max-height: calc(100vh - 440px); overflow-y: auto; }

/* ─── Source list row — three-zone flex layout ────────────────────
   Three top-level children:
     [a] .cat-pill       — fixed-width type badge ("VENDOR", "GOV"…)
     [b] .src-row-mid    — flex column with name (line 1) + timestamp
                            (line 2). min-width:0 so ellipsis kicks in
                            only when truly needed.
     [c] .src-count      — right-aligned ingested-count, tabular-nums

   Layout at 240px sidebar width:
     ┌────────────────────────────────────────────┐
     │ [VENDOR ]  etda_apt                  979   │
     │            • 6h ago                        │
     └────────────────────────────────────────────┘

   Tested at 200px / 240px / 280px sidebar widths — only the source
   name truncates; the badge and count stay visible. */
.src-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 4px;
  font-size: var(--text-xs-size);
  cursor: default;
  border-radius: var(--radius-sm);
}
.src-row:hover {
  background: var(--bg-elevated);
}
.src-row .cat-pill {
  flex-shrink: 0;
  width: 56px;
  text-align: center;
  padding: 2px 6px;
  /* belt: kill any negative margins / absolute positioning that might
     have been introduced by older overrides */
  position: static;
  margin: 0;
}
.src-row-mid {
  flex: 1 1 auto;
  min-width: 0;            /* unlocks ellipsis on the .n child */
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.src-row .n {
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--mono); color: var(--text); font-size: var(--text-xs-size);
}
.src-row .last-poll {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .04em;
  margin-top: 2px;
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.src-row .last-poll .dot {
  width: 6px; height: 6px; flex-shrink: 0;
}
.src-row .last-poll.stale { color: var(--sev-high); }
.src-row .src-count {
  flex-shrink: 0;
  padding-left: 8px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
  min-width: 32px;
}
.src-row .c { color: var(--text-dim); font-family: var(--mono); font-size: var(--text-xs-size); }

/* ─── Map ────────────────────────────────────────────────────── */
/* ─── Argus map (rebuilt) ─────────────────────────────────────── */
#map-region {
  grid-area: map; background: var(--bg-1); position: relative; overflow: hidden;
  border-right: var(--border-width) solid var(--border-default);
  display: flex; flex-direction: column;
  /* min-height: 0 (rather than the old 480 px floor) so the grid track
     can shrink the map to its 1fr share of the viewport on short
     screens — the body grid-template-rows minmax(320px, 1fr) provides
     the actual sensible floor. height:100% lets the SVG inside fill
     whatever the grid track gives us. */
  min-height: 0;
  height: 100%;
}
#map {
  flex: 1 1 auto;
  width: 100%; min-height: 0;
  display: block;
  outline: none;
  cursor: grab;
}
#map:focus-visible { outline: var(--space-px) solid var(--accent); outline-offset: -4px; }
#map.paused .marker-pulse { animation: none; }
#map.pulses-off .marker-pulse { display: none; }

/* Land + borders. Spec: solid fill at oklch(20% 0.028 250) — slightly
   lighter than --bg-1 (16 %) so land sits visibly above the ocean
   panel without resorting to any blue tint. */
#map .country {
  fill: oklch(20% 0.028 250);
  stroke: oklch(48% 0.026 250 / 0.7);
  stroke-width: 0.75;
  vector-effect: non-scaling-stroke;
  transition: fill var(--dur-fast) var(--ease-out);
}
#map .country.hk {
  fill: var(--accent-muted);
}
#map .country-tint {
  fill: oklch(76% 0.13 215 / 0.04);
  stroke: none;
  pointer-events: none;
}
#map .country-border {
  fill: none;
  stroke: oklch(40% 0.022 250 / 0.5);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

/* Hong Kong anchor — always-on "you are here". */
#map .hk-ring {
  fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.4;
  vector-effect: non-scaling-stroke;
}
#map .hk-dot { fill: var(--accent); opacity: 0.9; }

/* Continent + city labels */
#map .label-continent {
  /* Visible enough to read at arm's length but quiet enough that the
     eye reads it as cartographic typography (an editorial whisper).
     Bumped opacity over the 0.5 the spec named because at 10 px on
     dark navy the lower setting was disappearing into the noise. */
  fill: oklch(74% 0.02 250 / 0.85);
  font-family: var(--font-sans);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
}
#map .label-city {
  fill: var(--text-tertiary);
  font-family: var(--font-sans);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  pointer-events: none;
  user-select: none;
}
#map .label-city-primary {
  fill: var(--accent-text);
  font-size: var(--text-xs-size);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.003em;
}
#map .city-dot { fill: var(--text-quaternary); }
#map .city-dot-primary { fill: var(--accent); }

/* Markers — layered (pulse + halo + core). */
#map .marker { cursor: pointer; }
#map .marker .marker-pulse {
  fill: none; stroke-width: 1.5; opacity: 0;
  vector-effect: non-scaling-stroke;
  animation: pulse-out 2400ms var(--ease-out) infinite;
  pointer-events: none;
}
@keyframes pulse-out {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.6); }
}
#map .marker .marker-halo {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  pointer-events: auto;
}
#map .marker:hover .marker-halo { opacity: 1; transform: scale(1.15); }
#map .marker .marker-core { pointer-events: none; }
#map .marker:focus-visible .marker-halo {
  stroke-width: 2.5;
  filter: drop-shadow(0 0 4px var(--accent));
}

/* Tooltip — re-styled per Phase 7 (frosted bg, text-primary title,
   muted metadata, max width). */
#map-tooltip {
  position: fixed;
  pointer-events: none; z-index: 200;
  background: var(--bg-2);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  box-shadow: var(--shadow-md);
  max-width: 280px;
  backdrop-filter: blur(8px);
}
#map-tooltip.hidden { display: none; }
#map-tooltip .tip-src {
  font-family: var(--font-mono);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-semibold);
  color: var(--accent-text);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
#map-tooltip .tip-title {
  font-size: var(--text-sm-size);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  letter-spacing: var(--tracking-body);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#map-tooltip .tip-meta {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-medium);
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* ─── Legend card ─────────────────────────────────────────────── */
.map-legend {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 6;
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 180px;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(8px);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.map-legend .legend-head {
  font-family: var(--font-sans);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width) solid var(--border-subtle);
  margin-bottom: var(--space-1);
}
.stream-toggle {
  display: flex; align-items: center; gap: var(--space-2);
  height: 24px; padding: 0 var(--space-2);
  background: transparent; border: 0; border-radius: var(--radius-xs);
  cursor: pointer; color: var(--text-secondary);
  font-family: var(--font-sans); font-size: var(--text-xs-size);
  font-weight: var(--fw-medium); letter-spacing: -0.003em;
  transition: background var(--dur-fast) var(--ease-out);
}
.stream-toggle:hover { background: var(--bg-3); }
.stream-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stream-toggle.off { color: var(--text-quaternary); }
.stream-toggle.off .legend-dot {
  background: transparent !important;
  box-shadow: inset 0 0 0 var(--space-px) currentColor;
}
.stream-toggle .legend-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.stream-toggle .legend-dot.dot-ioc   { background: var(--stream-ioc-text); }
.stream-toggle .legend-dot.dot-cert  { background: var(--stream-cert-text); }
.stream-toggle .legend-dot.dot-actor { background: var(--stream-actor-text); }
.stream-toggle .legend-label { flex: 1 1 auto; text-align: left; }
.stream-toggle .legend-count {
  font-family: var(--font-mono);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text-tertiary);
}

/* ─── Bottom-left zoom controls ────────────────────────────────── */
/* Same card style as .map-legend / .map-pulse-toggle so the three
   floating controls read as one family. */
.map-zoom-controls {
  position: absolute;
  left: var(--space-4);
  bottom: calc(var(--space-14) + var(--space-2));
  z-index: 6;
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(8px);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.map-zoom-controls button {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-8); height: var(--space-8);   /* 32 × 32 per spec */
  background: transparent; border: 0;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.map-zoom-controls button + button {
  border-top: var(--border-width) solid var(--border-subtle);
}
.map-zoom-controls button:hover {
  background: var(--bg-3); color: var(--text-primary);
}
.map-zoom-controls button:active { color: var(--accent); }
.map-zoom-controls button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: -2px;
}
.map-zoom-controls svg { display: block; }

/* ─── Bottom-right Live-events pulse switch ───────────────────── */
/* Same card style as .map-legend / .map-zoom-controls — the three
   floating controls form one visual family (spec problem 8). */
.map-pulse-toggle {
  position: absolute;
  right: var(--space-4);
  bottom: calc(var(--space-14) + var(--space-2));
  z-index: 6;
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: var(--space-8); padding: 0 var(--space-3);
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(8px);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  color: var(--text-secondary);
  font-family: var(--font-sans); font-size: var(--text-xs-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-ui);
  cursor: pointer;
}
.map-pulse-toggle:hover { color: var(--text-primary); }
.map-pulse-toggle .pulse-icon { font-size: var(--text-sm-size); line-height: 1; }
.map-pulse-toggle .pulse-switch {
  display: inline-block;
  width: 28px; height: 16px;
  background: var(--bg-3);
  border-radius: var(--radius-pill);
  position: relative;
  transition: background var(--dur-fast) var(--ease-out);
}
.map-pulse-toggle[aria-pressed="true"] .pulse-switch {
  background: var(--accent-muted);
}
.map-pulse-toggle .pulse-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--text-primary);
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-fast) var(--ease-spring);
}
.map-pulse-toggle[aria-pressed="true"] .pulse-thumb {
  transform: translateX(12px);
}

/* ─── Resize handle (above sparkline strip) ───────────────────── */
.map-resize {
  height: 4px; flex: 0 0 auto;
  background: var(--border-subtle);
  cursor: row-resize;
  transition: background var(--dur-fast) var(--ease-out), height var(--dur-fast) var(--ease-out);
}
.map-resize:hover, .map-resize:focus-visible {
  background: var(--accent);
  height: 6px; outline: none;
}
.stats-strip {
  /* Spec (problem 7): separate row, --bg-1, 56 px tall, 1 px top
     hairline at --border-subtle. Same bg as the map area above so the
     two read as one continuous panel separated only by the hairline. */
  height: 56px;
  border-top: var(--border-width) solid var(--border-subtle);
  display: flex; align-items: center;
  padding: 0 var(--space-4); gap: var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--text-xs-size);
  background: var(--bg-1);
  color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: var(--tracking-label);
}
.spark-axes {
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-muted);
  margin-left:var(--space-2); letter-spacing: .04em;
}
#sparkline { flex: 1; height: 32px; display: flex; align-items: center; }

/* ─── Live feed ──────────────────────────────────────────────── */
#feed {
  grid-area: feed; background: var(--bg); overflow: hidden;
  display: flex; flex-direction: column;
}
.feed-head {
  padding:var(--space-3) var(--space-4); background: var(--bg-panel);
  border-bottom:var(--space-px) solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.feed-head .t,
.feed-head h2 {
  font-size: var(--text-xs-size); text-transform: uppercase; letter-spacing: .14em;
  color: var(--text); font-weight: var(--fw-semibold); margin:0;
}
.right { margin-left:auto; }
#feed-list { flex: 1; overflow-y: auto; padding:var(--space-2) var(--space-2); }
.card {
  background: var(--bg-card); border: var(--border-width) solid var(--border-soft);
  border-radius: var(--radius-xs); margin-bottom:var(--space-1); padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  cursor: pointer; position: relative;
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  animation: slideIn var(--dur-base) var(--ease-in-out);
}
@keyframes slideIn {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.card:hover { border-color: var(--accent); background: var(--bg-elevated); }
.card::before {
  content: ""; position: absolute; left:0; top:0; bottom:0; width: 3px;
  border-top-left-radius: 3px; border-bottom-left-radius: 3px;
}
.card.sev-critical::before { background: var(--sev-critical); animation: barpulse 1.6s infinite; }
.card.sev-high::before     { background: var(--sev-high);     }
.card.sev-med::before      { background: var(--sev-med);      }
.card.sev-low::before      { background: var(--sev-low);      }
.card.sev-info::before     { background: var(--sev-info);     }
@keyframes barpulse {
  0%, 100% { opacity: 1;   }
  50%      { opacity: .45; }
}
.card.fresh {
  background: linear-gradient(180deg, var(--sev-high-bg), var(--bg-card));
}
.card .row1 {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: var(--text-xs-size); text-transform: uppercase;
  letter-spacing: .08em; margin-bottom:var(--space-1);
}
/* Source slugs stay accent-coloured but with a slightly lighter weight so
   they don't compete with the title; the accent passes 4.5:1 on bg-card. */
.card .src { color: var(--accent); font-weight: var(--fw-semibold);
             font-feature-settings: "tnum"; letter-spacing: -0.005em; }
/* Timestamps were too dim against bg-card — bump to text-muted for AA. */
.card .ts  { color: var(--text-muted); font-feature-settings: "tnum"; }
.card .title {
  font-size: var(--text-sm-size); line-height: 1.35; color: var(--text);
  max-height: 2.7em; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.card .row3 {
  display: flex; gap:var(--space-1); margin-top:var(--space-2); align-items: center; flex-wrap: wrap;
}
.card .enriched {
  margin-top:var(--space-2); font-size: var(--text-xs-size); color: var(--text-muted);
  padding-top:var(--space-2); border-top:var(--space-px) dashed var(--border-soft);
  line-height: 1.35;
}
.card .enriched b {
  display: inline-block; padding:var(--space-px) var(--space-1); margin-right:var(--space-1);
  background: var(--bg-elevated); color: var(--accent);
  font-size: var(--text-xs-size); letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radius-xs); font-family: var(--mono); font-weight: var(--fw-semibold);
}
.score {
  font-family: var(--mono); font-size: var(--text-xs-size); font-weight: var(--fw-semibold);
  padding:var(--space-px) var(--space-2); border-radius: var(--radius-xs);
  background: rgba(139,145,168,.1); color: var(--text-muted);
  letter-spacing: .04em;
}
.score.sev-critical { background: var(--crit-bg);   color: var(--sev-critical); }
.score.sev-high     { background: var(--sev-high-bg);  color: var(--sev-high);     }
.score.sev-med      { background: rgba(245,158,11,.2);  color: var(--sev-med);      }
.score.sev-low      { background: var(--ok-bg);  color: var(--sev-low);      }
.flag {
  margin-left:auto; font-family: var(--mono); font-size: var(--text-xs-size);
  padding:var(--space-px) var(--space-1); background: var(--bg-elevated); color: var(--text-muted);
  border-radius: var(--radius-xs); letter-spacing: .04em;
}

/* ─── Bottom tabs + table ────────────────────────────────────── */
#bottom {
  grid-area: bottom; background: var(--bg-panel);
  border-top:var(--space-px) solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  /* min-height: 0 lets the flex column shrink to its grid track
     (50% of viewport-after-header) so #tab-body's overflow:auto
     can scroll internally instead of growing the row past 50%. */
  min-height: 0;
  height: 100%;
}
.tabs {
  display: flex; align-items: center; gap:var(--space-0_5); padding:var(--space-1) var(--space-3);
  border-bottom:var(--space-px) solid var(--border); background: var(--bg-panel);
  flex-wrap: wrap; row-gap:var(--space-1);
}
.tabs .search-cluster { flex: 1 1 200px; min-width: 0; max-width: 100%; }
.tabs #search { width: 100%; min-width: 100px; }
@media (max-width: 768px) {
  .tabs .search-cluster { flex-basis: 100%; margin-left:0; }
  .tabs #search { width: 100%; }
}
.tab {
  background: none; color: var(--text-muted); border: 0;
  padding:var(--space-2) var(--space-4); font-size: var(--text-xs-size); cursor: pointer;
  border-bottom:var(--space-0_5) solid transparent;
  text-transform: uppercase; letter-spacing: .12em; font-family: var(--sans); font-weight: var(--fw-semibold);
  transition: color var(--dur-fast) ease;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
#search {
  margin-left:auto; background: var(--bg); border: var(--border-width) solid var(--border);
  color: var(--text); font-family: var(--mono); font-size: var(--text-xs-size);
  padding:var(--space-2) var(--space-2); border-radius: var(--radius-xs); width: 280px;
}
#search:focus { border-color: var(--accent); /* :focus-visible adds the ring */ }
#search::placeholder { color: var(--text-dim); }
#tab-body { flex: 1; overflow: auto; padding:0; }
/* Table rows: 13px Cozy (default) / 12px Compact. Same Inter typeface
   throughout — code-shaped values get tabular-nums + tighter letter-spacing
   from their own .val / .num-cell rules so URLs read like data. */
table.data {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: var(--text-base-size);
}
table.data th {
  text-align: left; font-weight: var(--fw-semibold); color: var(--text-dim);
  text-transform: uppercase; font-size: var(--text-xs-size); letter-spacing: .12em;
  padding:var(--space-2) var(--space-3); border-bottom:var(--space-px) solid var(--border);
  position: sticky; top:0; background: var(--bg-panel); z-index: 1;
}
table.data td {
  padding:var(--space-2) var(--space-3); border-bottom:var(--space-px) solid var(--border-soft);
  vertical-align: top; color: var(--text-muted);
}
/* Initial value-cell defaults; the redesign block overrides max-width and
   adds nowrap + ellipsis. word-break is forced normal so URLs never stack
   their characters vertically. */
table.data td.val { word-break: normal; max-width: 420px; color: var(--text); }
table.data tr:hover { background: var(--bg-hover); }
table.data tr:hover td { color: var(--text); }
.btn {
  background: var(--bg-elevated); color: var(--text-muted);
  border: var(--border-width) solid var(--border); padding:var(--space-0_5) var(--space-2); font-size: var(--text-xs-size);
  border-radius: var(--radius-xs); cursor: pointer; font-family: var(--mono);
  margin-right:var(--space-1); text-transform: uppercase; letter-spacing: .06em;
}
.btn:hover { color: var(--text); border-color: var(--accent); background: var(--bg-hover); }

/* ─── Drawer ─────────────────────────────────────────────────── */
#drawer {
  position: fixed;
  /* Park the drawer below the fixed header so #hdr never occludes
     the close button, title, or meta line. The header is z-index:41
     and the drawer is z-index:20, so without this offset the header
     would visually sit on top of the drawer's first ~96 px. */
  top: var(--hdr-height); right: 0;
  width: 560px;
  height: calc(100dvh - var(--hdr-height));
  background: var(--bg-panel); border-left:var(--space-px) solid var(--border);
  display: flex; flex-direction: column; z-index: 20;
  transform: translateX(0); transition: transform var(--dur-base) var(--ease-in-out);
  box-shadow: -4px 0 24px color-mix(in srgb, var(--ctp-crust) 50%, transparent);
}
#drawer.hidden { transform: translateX(100%); pointer-events: none; }
.drawer-head {
  padding:var(--space-4) var(--space-5); border-bottom:var(--space-px) solid var(--border);
  display: flex; flex-direction: column; gap:var(--space-2); position: relative;
  background: var(--bg-card);
  font-family: Inter, system-ui, sans-serif;
}
/* Close button — absolute top-right, never wraps under the title. */
#drawer-close {
  position: absolute; top: 8px; right: 8px;
  width: 24px; height: 24px;
  background: none; border: 0;
  color: var(--text-muted); font-size: var(--text-lg-size);
  cursor: pointer; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
}
#drawer-close:hover { color: var(--text); background: var(--bg-2); }
/* Reserve space for the close button so the title never wraps under it. */
#drawer-title { padding-right: 28px; }
#drawer-title {
  font-weight: var(--fw-medium); font-size: var(--text-md-size); line-height: 1.4; padding-right:var(--space-8); color: var(--text);
}
/* Drawer meta row — single-line flex container. The literal `·`
   separators in the markup are gone; a uniform 8 px gap handles
   spacing. Chips, links, and action buttons all sit on one
   baseline. */
#drawer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
  line-height: 1.4;
}
/* Static dot separator — opt-in, rendered as <span class="sep">·</span>
   wherever the layout benefits from a visual divider. */
#drawer-meta .sep {
  color: var(--text-muted);
  opacity: 0.5;
  font-size: 11px;
  line-height: 1;
}
/* Unified score / source-tag chip. AI / KW / SOURCE all share the
   same dimensions; only colour varies via modifier classes. */
#drawer-meta .meta-chip {
  display: inline-flex;
  align-items: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-2);
  color: var(--text-secondary);
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}
#drawer-meta .meta-chip:hover { background: var(--bg-3); }
/* Modifier — AI score chip uses cyan/blue accent. */
#drawer-meta .meta-chip.chip-ai {
  border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent);
  color: var(--accent-cyan);
  background: color-mix(in srgb, var(--accent-cyan) 8%, var(--bg-2));
}
/* Modifier — KW (keyword bootstrap) chip stays muted; LLM upgrades
   it (.chip-llm) to the same accent as the score itself. */
#drawer-meta .meta-chip.chip-kw {
  color: var(--text-tertiary);
}
#drawer-meta .meta-chip.chip-llm {
  color: var(--accent-cyan);
  border-color: color-mix(in srgb, var(--accent-cyan) 40%, transparent);
}
/* SOURCE ↗ chip — same dimensions as score chips, accent text. */
#drawer-meta .meta-chip.chip-source {
  color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent-text) 40%, transparent);
}
/* Drawer-actions stays right-aligned on the same baseline as the
   meta chips. The margin-left:auto pushes it to the row's right
   edge regardless of how many chips precede it. */
#drawer-meta .drawer-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* IOC value in the drawer title — monospace + word-break (was
   inline style; moved out per the audit-style hardening pass). */
.ioc-value-mono {
  font-family: var(--mono);
  word-break: break-all;
}
#drawer-body { flex: 1; overflow-y: auto; padding:var(--space-4) var(--space-5); font-size: var(--text-sm-size); }
/* When the drawer hosts a non-report detail (case / actor / malware
   family / CVE), the title carries a small uppercase kind label above
   the identifier itself so the analyst sees what kind of thing they
   opened (replaces the per-panel "<div class='muted-block'>CASE</div>"
   header that the bottom panels used to render). */
.drawer-kind-label {
  font-family: var(--font-sans);
  font-size: var(--text-2xs-size, 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary, var(--text-muted));
  margin-bottom: 2px;
}
.drawer-kind-title {
  font-family: var(--font-sans);
  font-size: var(--text-md-size);
  font-weight: var(--fw-semibold);
  color: var(--text-primary, var(--text));
  letter-spacing: var(--tracking-heading, 0);
}
/* Push .drawer-actions to the right when it's used inside #drawer-meta
   alongside score chips or a metadata trail. The original report drawer
   relied on the implicit inline-block flow; the new detail-panel
   migration places .drawer-actions as the only meta child, so we make
   the meta container a flex row with .drawer-actions getting margin-
   left:auto (already set on the class itself). */
#drawer-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
/* The actor / malware tab strips render at the top of the drawer-body.
   The negative top-margin pulls them to the very top edge so they butt
   against the drawer header (parity with the old bottom panels which
   had the tab strip immediately under .case-head). The body's natural
   padding lives below them via the inner .actor-body / .case-body. */
#drawer-body > .actor-tabs {
  margin: calc(-1 * var(--space-4)) calc(-1 * var(--space-5)) var(--space-3);
  padding: 0 var(--space-5);
  border-bottom: var(--border-width) solid var(--border-subtle);
  background: var(--bg-card);
  position: sticky; top: 0; z-index: 1;
}
.drawer-section { margin-bottom:var(--space-4); }
.drawer-section h3,
.drawer-section h4 {
  margin:0 0 var(--space-2); font-size: var(--text-xs-size); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .18em; font-weight: var(--fw-semibold);
  padding-bottom:var(--space-1); border-bottom:var(--space-px) solid var(--border-soft);
}
.alias {
  display: inline-block; padding:var(--space-0_5) var(--space-2); border-radius: var(--radius-xs);
  background: var(--bg-elevated); font-size: var(--text-xs-size); margin:0 var(--space-1) var(--space-1) 0;
  font-family: var(--mono); color: var(--text); text-decoration: none;
  border: var(--border-width) solid var(--border-soft);
}
.alias:hover { border-color: var(--accent); }
.alias.ttp { color: var(--accent); border-color: var(--accent-dim); }
pre.code {
  background: var(--bg); padding:var(--space-2) var(--space-3); border-radius: var(--radius-xs);
  font-family: var(--mono); font-size: var(--text-xs-size); overflow: auto; max-height: 320px;
  border: var(--border-width) solid var(--border); white-space: pre; color: var(--text-primary);
  line-height: 1.45;
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-elevated), var(--border), var(--bg-elevated));
  background-size: 200% 100%; animation: shimmer 1.2s infinite linear;
  height: 11px; border-radius: var(--radius-xs); margin-bottom:var(--space-1);
}
@keyframes shimmer {
  from { background-position: 200% 0;  }
  to   { background-position: -200% 0; }
}

.disconnected-banner {
  position: fixed; top:60px; left:0; right:0; background: var(--sev-critical);
  color: white; text-align: center; padding:var(--space-2); font-size: var(--text-xs-size); z-index: 30;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em;
}

.mentions { display: flex; flex-direction: column; gap:var(--space-1); }
.mention-row {
  display: flex; align-items: center; gap:var(--space-2);
  padding:var(--space-2) var(--space-2); background: var(--bg-card); border: var(--border-width) solid var(--border-soft);
  border-radius: var(--radius-xs); font-size: var(--text-xs-size);
}
.mention-row:hover { border-color: var(--accent); background: var(--bg-elevated); }
.mention-row .src {
  font-family: var(--mono); font-size: var(--text-xs-size); font-weight: var(--fw-semibold); color: var(--accent);
  text-transform: uppercase; letter-spacing: .06em; flex: 0 0 auto;
}
.mention-row .title-sm {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text);
}
.mention-row .ts {
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-dim); flex: 0 0 auto;
}

a.btn { text-decoration: none; display: inline-block; }

/* ─── HK Alerts ──────────────────────────────────────────────── */
#hk-alerts-list { max-height: 180px; overflow-y: auto; }
.hk-alert-row {
  display: grid; grid-template-columns: auto 1fr auto; gap:var(--space-2);
  align-items: center; padding:var(--space-1) 0; border-bottom:var(--space-px) dashed var(--border-soft);
  font-size: var(--text-xs-size); cursor: pointer;
}
.hk-alert-row:hover .hk-alert-title { color: var(--text); }
.hk-alert-title {
  color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}
.hk-alert-ts { font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-dim); }

#hk-alerts-banners {
  position: fixed; top:68px; right:var(--space-5); width: 420px;
  display: flex; flex-direction: column; gap:var(--space-2); z-index: 40;
}
.hk-toast {
  background: var(--bg-card); border: var(--border-width) solid var(--border);
  border-left-width: 4px; border-radius: var(--radius-xs); padding:var(--space-2) var(--space-7) var(--space-2) var(--space-4);
  display: grid; grid-template-columns: auto 1fr; gap:var(--space-2); align-items: start;
  font-size: var(--text-sm-size); cursor: pointer; position: relative;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ctp-crust) 45%, transparent);
  animation: hkSlideIn var(--dur-base) ease;
}
.hk-toast-critical { border-left-color: var(--sev-critical);
  background: linear-gradient(180deg, var(--crit-bg), var(--bg-card)); }
.hk-toast-high     { border-left-color: var(--sev-high);
  background: linear-gradient(180deg, var(--sev-high-bg), var(--bg-card)); }
@keyframes hkSlideIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.hk-toast-fade { opacity: 0.3; transition: opacity .8s; }
.hk-toast-tag {
  font-family: var(--mono); font-size: var(--text-xs-size); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .12em; color: var(--sev-critical);
}
.hk-toast-critical .hk-toast-tag { color: var(--sev-critical); }
.hk-toast-high .hk-toast-tag { color: var(--sev-high); }
.hk-toast-title {
  grid-column: 1 / span 2; color: var(--text); line-height: 1.35;
}
.hk-toast-src {
  grid-column: 2; color: var(--text-dim); font-family: var(--mono); font-size: var(--text-xs-size);
}
.hk-toast-close {
  position: absolute; top:var(--space-1); right:var(--space-2); background: none; border: 0;
  color: var(--text-muted); font-size: var(--text-lg-size); line-height: 1; cursor: pointer;
}
.hk-toast-close:hover { color: var(--text); }

#map .country.hk.hk-flash {
  animation: hkFlash 1.2s infinite;
}
@keyframes hkFlash {
  0%, 100% { fill: var(--crit-bg); stroke: var(--sev-critical); stroke-width: 2; }
  50%      { fill: var(--crit-bg); stroke: var(--sev-critical); stroke-width: 2; }
}

/* (Legacy #map inline-style override block removed — all map styling
   now lives in the rebuilt section above.) */

/* ─── Map tooltip + latest-event banner ──────────────────────── */
#map-tooltip {
  position: fixed; pointer-events: none; z-index: 50;
  background: var(--bg-elevated); border: var(--border-width) solid var(--border);
  border-left-width: 4px; border-radius: var(--radius-xs);
  padding:var(--space-2) var(--space-3); max-width: 360px;
  font-family: var(--mono); font-size: var(--text-xs-size);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ctp-crust) 45%, transparent);
}
#map-tooltip.hidden { display: none; }
#map-tooltip[data-sev="sev-critical"] { border-left-color: var(--sev-critical); }
#map-tooltip[data-sev="sev-high"]     { border-left-color: var(--sev-high); }
#map-tooltip[data-sev="sev-med"]      { border-left-color: var(--sev-med); }
#map-tooltip[data-sev="sev-low"]      { border-left-color: var(--sev-low); }
#map-tooltip .src   { color: var(--accent); font-weight: var(--fw-semibold);
                      text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-xs-size); }
#map-tooltip .title { color: var(--text); margin:var(--space-1) 0; line-height: 1.35;
                      white-space: normal; word-break: break-word; }
#map-tooltip .meta  { color: var(--text-muted); font-size: var(--text-xs-size);
                      text-transform: uppercase; letter-spacing: .06em; }

#map-banner {
  position: absolute; top:var(--space-2); left:var(--space-2);
  display: flex; gap:var(--space-2); align-items: center;
  padding:var(--space-2) var(--space-3); background: rgba(15,19,41,.92);
  border: var(--border-width) solid var(--border); border-left-width: 3px;
  border-radius: var(--radius-xs); font-family: var(--mono); font-size: var(--text-xs-size);
  max-width: 70%; transition: opacity .8s; z-index: 5;
}
#map-banner.hidden { display: none; }
#map-banner.fade { opacity: 0; }
#map-banner[data-sev="sev-critical"] { border-left-color: var(--sev-critical); }
#map-banner[data-sev="sev-high"]     { border-left-color: var(--sev-high); }
#map-banner[data-sev="sev-med"]      { border-left-color: var(--sev-med); }
#map-banner[data-sev="sev-low"]      { border-left-color: var(--sev-low); }
#map-banner .map-banner-tag {
  font-size: var(--text-xs-size); font-weight: var(--fw-medium); letter-spacing: .12em; color: var(--accent);
}
#map-banner .map-banner-src   { color: var(--text); font-weight: var(--fw-semibold); }
#map-banner .map-banner-title {
  color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}

.last-new {
  margin-right:var(--space-2); padding:var(--space-1) var(--space-2); border-radius: var(--radius-xs);
  font-family: var(--mono); font-size: var(--text-xs-size); font-weight: var(--fw-semibold);
  background: var(--bg-card); border: var(--border-width) solid var(--border);
  letter-spacing: .02em; text-align: center;
  white-space: nowrap;
  /* Phase 1: pill text is now self-describing ("last update Ns ago"); the
     legacy "LAST " ::before prefix was removed. */
}
.last-new.ln-green { color: var(--sev-low); }
.last-new.ln-gold  { color: var(--sev-med); }
.last-new.ln-red   { color: var(--sev-critical); border-color: var(--sev-critical); }

/* Actors-tab Latest-Activity column */
.latest-title {
  color: var(--text); font-size: var(--text-xs-size); line-height: 1.35;
  white-space: normal; overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.latest-meta {
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-dim);
  margin-top:var(--space-1); display: flex; gap:var(--space-2);
}
.latest-meta .src {
  color: var(--accent); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: .06em;
}

/* Victims-tab description under the chips */
.victim-desc {
  color: var(--text-muted); font-size: var(--text-xs-size); line-height: 1.35;
  margin-top:var(--space-1); white-space: normal; word-break: normal;
  font-family: var(--sans);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

/* PR-H item 26: stream-health rollup */
.src-health {
  display: flex; align-items: center; gap:var(--space-2); padding:var(--space-2) var(--space-2);
  background: var(--bg-card); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xs); margin-bottom:var(--space-2);
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-muted);
}
.src-health[data-overall="amber"] { border-color: var(--sev-med); }
.src-health[data-overall="red"]   { border-color: var(--sev-critical);
                                    color: var(--sev-critical); }

/* PR-E item 24: search syntax popover */
#search-help-popover {
  position: fixed; right:var(--space-4); bottom:260px; z-index: 60;
  background: var(--bg-panel); border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-sm); padding:var(--space-3) var(--space-4); min-width: 320px;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--ctp-crust) 60%, transparent);
}
#search-help-popover code {
  font-family: var(--mono); color: var(--accent);
  background: var(--bg); padding:var(--space-px) var(--space-2); border-radius: var(--radius-xs);
}

/* PR-G: sidebar controls, settings popover, density modes */
.sec-controls {
  display: flex; gap:var(--space-2); margin-bottom:var(--space-4); align-items: center;
}
.sec-controls .btn { padding:var(--space-1) var(--space-2); }
.sec-controls .btn-tertiary {
  flex: 1; background: transparent; color: var(--text-muted);
  border: var(--border-width) dashed var(--border); text-align: center;
  font-weight: var(--fw-regular); text-transform: none; letter-spacing: .02em;
}
.sec-controls .btn-tertiary:hover {
  color: var(--text); border-color: var(--accent); background: transparent;
}
.sec-controls .btn-icon {
  background: var(--bg-card); color: var(--text-muted);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  width: 28px; height: 28px; padding:0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-md-size); flex: 0 0 auto;
}
.sec-controls .btn-icon:hover { color: var(--accent); border-color: var(--accent); }

#settings-popover {
  position: fixed; top:var(--space-20); left:260px; z-index: 60;
  background: var(--bg-panel); border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-sm); padding:var(--space-4) var(--space-4); min-width: 280px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ctp-crust) 60%, transparent); font-size: var(--text-sm-size);
}
#settings-popover h4 { margin:0 0 var(--space-2); font-size: var(--text-xs-size);
  text-transform: uppercase; letter-spacing: .14em; color: var(--text-dim); }
#settings-popover label { display: flex; align-items: center; gap:var(--space-2); padding:var(--space-1) 0; }
#settings-popover hr { border: 0; border-top:var(--space-px) solid var(--border); margin:var(--space-2) 0; }

/* PR-J item 34: Settings dialog (true <dialog aria-modal="true">) */
#settings-dialog {
  background: var(--bg-panel); color: var(--text);
  border: var(--border-width) solid var(--accent); border-radius: var(--radius-sm);
  padding:var(--space-4) var(--space-5); min-width: 320px; max-width: 90vw;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--ctp-crust) 70%, transparent); font-size: var(--text-sm-size);
}
#settings-dialog::backdrop {
  background: rgba(8, 12, 31, 0.7); backdrop-filter: blur(2px);
}
#settings-dialog h3 {
  margin:0 0 var(--space-3); font-size: var(--text-sm-size);
  text-transform: uppercase; letter-spacing: .14em; color: var(--accent);
}
#settings-dialog fieldset {
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  margin:0 0 var(--space-2); padding:var(--space-2) var(--space-2) var(--space-2);
}
#settings-dialog legend {
  font-size: var(--text-xs-size); padding:0 var(--space-2); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .1em;
}
#settings-dialog label {
  display: flex; align-items: center; gap:var(--space-2);
  padding:var(--space-1) 0; cursor: pointer;
}
#settings-dialog .accent-row { display: flex; gap:var(--space-2); padding:var(--space-1) 0; }
#settings-dialog .swatch { padding:var(--space-0_5); }
#settings-dialog .swatch input { margin:0; }
#settings-dialog .swatch .dot {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  vertical-align: middle; border: var(--border-width) solid var(--border);
}
#settings-dialog .swatch input:checked + .dot {
  outline: 2px solid var(--text); outline-offset: 1px;
}
#settings-dialog .dlg-actions {
  display: flex; justify-content: flex-end; gap:var(--space-2);
  margin-top:var(--space-2); padding-top:var(--space-2); border-top:var(--space-px) solid var(--border);
}

/* Debug overlay (settings → debug overlay) */
#debug-overlay {
  position: fixed; bottom:var(--space-2); right:var(--space-2); z-index: 70;
  background: rgba(8, 12, 31, 0.92); color: var(--text);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  padding:var(--space-2) var(--space-2); font-family: var(--mono); font-size: var(--text-xs-size);
  line-height: 1.45; pointer-events: none;
}
#debug-overlay b { color: var(--accent); }

body.density-compact { font-size: var(--text-sm-size); }
body.density-compact .stat .num {
  font-size: var(--text-xl-size) !important; font-weight: var(--fw-medium);
}
body.density-compact table.data { font-size: var(--text-xs-size); }
body.density-compact table.data td { padding:var(--space-1) var(--space-2); }
body.density-compact table.data td.val { min-width: 200px; max-width: 360px; }
body.density-compact .card { padding:var(--space-2) var(--space-2) var(--space-2) var(--space-2); margin-bottom:var(--space-1); }
body.density-compact .feed-head { padding:var(--space-2) var(--space-2); }

body.reduce-motion-pref *,
body.reduce-motion-pref *::before {
  animation: none !important; transition: none !important;
}

/* PR-J item 17: hide map legend until at least one marker exists */
#map-region:not(.has-markers) #map-legend { display: none; }

/* PR-F: IOC table toolbar + sort/filter/context-menu */
.ioc-toolbar {
  display: flex; align-items: center; gap:var(--space-2); flex-wrap: wrap;
  padding:var(--space-2) var(--space-2); background: var(--bg-card);
  border-bottom:var(--space-px) solid var(--border);
  font-family: var(--mono); font-size: var(--text-xs-size);
}
.ioc-toolbar-toggle {
  display: flex; align-items: center; gap:var(--space-1);
  color: var(--text-muted); cursor: pointer;
}
.ioc-toolbar-toggle input { accent-color: var(--accent); }
.ioc-toolbar #ioc-count { margin-left:auto; }
.ioc-toolbar .btn[disabled] { opacity: .35; cursor: not-allowed; }
.ioc-tb-divider {
  width: 1px; height: 16px; background: var(--border); margin:0 var(--space-1);
}
.ioc-sel-col { width: 28px; }
table.data th[data-sort] { cursor: pointer; user-select: none; }
table.data th[data-sort]:hover { color: var(--accent); }
.ioc-filter-row th { padding:var(--space-0_5) var(--space-1) !important; background: var(--bg-card); }
.ioc-colfilter {
  width: 100%; background: var(--bg); color: var(--text);
  border: var(--border-width) solid var(--border-soft); border-radius: var(--radius-xs);
  padding:var(--space-1) var(--space-2); font-family: var(--mono); font-size: var(--text-xs-size);
}
.ioc-colfilter:focus { border-color: var(--accent); }
mark { background: rgba(245,158,11,.4); color: var(--text); padding:0 var(--space-0_5); border-radius: var(--radius-xs); }

#ctx-menu {
  position: fixed; z-index: 100; background: var(--bg-elevated);
  border: var(--border-width) solid var(--accent); border-radius: var(--radius-xs);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ctp-crust) 60%, transparent); min-width: 180px;
  font-family: var(--mono); font-size: var(--text-xs-size);
}
#ctx-menu a {
  display: block; padding:var(--space-2) var(--space-3); color: var(--text);
  text-decoration: none; border-bottom:var(--space-px) solid var(--border-soft);
}
#ctx-menu a:last-child { border-bottom:0; }
#ctx-menu a:hover, #ctx-menu a:focus { background: var(--bg-hover); color: var(--accent); }

/* PR-I item 32: hidden ops panel (Ctrl+Shift+O) */
#ops-panel {
  position: fixed; top:72px; left:50%; transform: translateX(-50%);
  width: min(720px, 90vw); max-height: 80vh; overflow: auto; z-index: 60;
  background: var(--bg-panel); border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-sm); box-shadow: 0 14px 36px color-mix(in srgb, var(--ctp-crust) 60%, transparent);
  padding:var(--space-4) var(--space-4);
}
#ops-panel .ops-head {
  display: flex; justify-content: space-between; align-items: center;
  border-bottom:var(--space-px) solid var(--border); padding-bottom:var(--space-2); margin-bottom:var(--space-2);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em;
}
#ops-panel h4 {
  font-size: var(--text-xs-size); text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-dim); margin:var(--space-2) 0 var(--space-1);
}

/* PR-D item 16: header clock */
.clock {
  display: flex; gap:var(--space-3); padding:var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  background: var(--bg-card); margin-right:var(--space-2);
  font-family: var(--mono); font-size: var(--text-xs-size);
}
.clock div { display: flex; flex-direction: column; line-height: 1.1; min-width: 64px; }
.clock .lbl { color: var(--text-muted); font-size: var(--text-xs-size); font-weight: var(--fw-medium);
              text-transform: uppercase; letter-spacing: .14em; }
.clock #clock-utc, .clock #clock-hkt {
  color: var(--text); font-variant-numeric: tabular-nums;
}

/* PR-C item 13: LLM state machine pills */
.llm-state { padding:var(--space-0_5) 0; }
.llm-pill {
  display: inline-block; padding:var(--space-0_5) var(--space-2); border-radius: var(--radius-xs);
  font-family: var(--mono); font-size: var(--text-xs-size); font-weight: var(--fw-medium);
  letter-spacing: .08em;
}
.llm-pill.queued  { background: rgba(107,114,128,.18); color: var(--text-muted); }
.llm-pill.inprog  { background: var(--accent-muted);  color: var(--accent); }
.llm-pill.ok      { background: var(--ok-bg);  color: var(--sev-low); }
.llm-pill.failed  { background: var(--crit-bg);   color: var(--sev-critical); }
.llm-elapsed { margin-left:var(--space-2); font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-muted); }
.llm-elapsed.over-time { color: var(--sev-high); font-weight: var(--fw-semibold); }
.llm-footer {
  margin-top:var(--space-2); padding-top:var(--space-2); border-top:var(--space-px) solid var(--border-soft);
  display: flex; flex-wrap: wrap; gap:var(--space-3);
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-dim);
}
.llm-footer code { color: var(--accent); background: var(--bg);
                   padding:0 var(--space-1); border-radius: var(--radius-xs); }

.provenance { margin-top:var(--space-2); font-size: var(--text-xs-size); }
.provenance code { background: var(--bg); padding:var(--space-px) var(--space-1); border-radius: var(--radius-xs);
                   font-family: var(--mono); color: var(--accent); }
.provenance .snippet { margin-top:var(--space-1); color: var(--text-muted); font-size: var(--text-xs-size);
                       font-style: italic; line-height: 1.4; }

/* Victims tab — single primary victim chip per row, plus +N overflow,
   below the headline. The redesign foregrounds the WHO/WHAT/BY-WHOM and
   drops the noise columns (HK/AI scores) that aren't relevant here. */
.data-victims { table-layout: auto; }
.data-victims .victim-when { white-space: nowrap; color: var(--text-secondary); }
.data-victims .victim-cell { padding-top: var(--space-2); padding-bottom: var(--space-2); min-width: 0; }
.victim-primary { display: flex; align-items: center; gap: var(--space-2); }
.victim-chip {
  display: inline-block;
  padding: var(--space-0_5) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--crit-bg);
  color: var(--crit-text);
  border: var(--border-width) solid var(--crit-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-mono);
  /* Single chip per row now — capitalise the first letter via JS-side
     data, but keep CSS lowercase-friendly. */
  text-transform: capitalize;
  max-width: 32ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.victim-more {
  font-family: var(--font-mono); font-size: var(--text-2xs-size);
  color: var(--text-tertiary);
  padding: var(--space-0_5) var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--neutral-chip-bg);
  cursor: help;
}
.victim-desc {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-sm-size);
  line-height: 1.4;
  /* Single line; full headline lives in the title attribute. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 64ch;
}

.actor-chip {
  display: inline-block;
  padding: var(--space-0_5) var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--stream-actor);
  color: var(--stream-actor-text);
  border: var(--border-width) solid color-mix(in srgb, var(--stream-actor-text) 28%, transparent);
  font-family: var(--font-mono);
  font-size: var(--text-xs-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-mono);
  white-space: nowrap;
}

/* Attack-type badges — hue conveys severity / category at a glance.
   Generic "intrusion" stays neutral so the eye lands on specific types. */
.attack-badge {
  font-family: var(--font-mono); font-size: var(--text-xs-size); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  padding: var(--space-0_5) var(--space-2); border-radius: var(--radius-xs);
  background: var(--sev-high-bg); color: var(--sev-high-text);
  border: var(--border-width) solid var(--sev-high-border);
  white-space: nowrap;
}
.attack-badge.attack-data_breach,
.attack-badge.attack-ransomware,
.attack-badge.attack-wiper {
  background: var(--crit-bg); color: var(--crit-text); border-color: var(--crit-border);
}
.attack-badge.attack-supply_chain,
.attack-badge.attack-zero_day,
.attack-badge.attack-implant {
  background: var(--sev-high-bg); color: var(--sev-high-text); border-color: var(--sev-high-border);
}
.attack-badge.attack-phishing,
.attack-badge.attack-credential_theft,
.attack-badge.attack-fraud,
.attack-badge.attack-crypto_scam,
.attack-badge.attack-invoice_fraud {
  background: var(--sev-med-bg); color: var(--sev-med-text); border-color: var(--sev-med-border);
}
.attack-badge.attack-ddos {
  background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border);
}
.attack-badge.attack-intrusion,
.attack-badge.attack-recon,
.attack-badge.attack-malware,
.attack-badge.attack-other {
  background: var(--sev-info-bg); color: var(--sev-info-text); border-color: var(--sev-info-border);
}
.attack-fresh { animation: attackFresh 6s ease-out; }
@keyframes attackFresh {
  0%   { background: var(--crit-bg); }
  60%  { background: var(--crit-bg); }
  100% { background: transparent; }
}

.hunt-lib { padding:var(--space-2) var(--space-2) var(--space-3); }
.hunt-entry {
  border: var(--border-width) solid var(--border-soft); border-radius: var(--radius-xs);
  padding:var(--space-2) var(--space-3); margin:0 0 var(--space-2) 0; background: var(--bg-card);
}
.hunt-entry[open] { border-color: var(--accent-dim); }
.hunt-entry summary {
  cursor: pointer; font-size: var(--text-sm-size); list-style: none;
  padding:var(--space-0_5) 0; color: var(--text);
}
.hunt-entry summary::-webkit-details-marker { display: none; }
.hunt-entry summary b { color: var(--accent); font-family: var(--mono); }
.hunt-entry pre.code { margin-top:var(--space-2); }

@media (prefers-reduced-motion: reduce) {
  .card, .card::before, .dot-live, #map .ring { animation: none !important; }
}

/* ──────────────────────────────────────────────────────────────
   REDESIGN PASS — added in this iteration
   ────────────────────────────────────────────────────────────── */

/* Sidebar collapse chevron + collapsed state.
   When collapsed, the sidebar shrinks to a 16px rail with the chevron
   visible at top-left so users can re-expand it. */
.sidebar-collapse-btn {
  position: absolute; top:var(--space-2); right:var(--space-1);
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg-card); border: var(--border-width) solid var(--border);
  color: var(--text-muted); cursor: pointer;
  font-size: var(--text-base-size); line-height: 1; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--dur-base) ease, background var(--dur-fast) ease;
}
.sidebar-collapse-btn:hover { color: var(--text); background: var(--bg-hover); }
#sidebar { position: relative; }
body.sidebar-collapsed-pref #sidebar {
  width: 16px; padding:var(--space-4) 0; overflow: visible;
}
body.sidebar-collapsed-pref #sidebar > section,
body.sidebar-collapsed-pref #sidebar > #sidebar-collapse + section,
body.sidebar-collapsed-pref #sidebar > #src-search,
body.sidebar-collapsed-pref #sidebar h2 { display: none; }
body.sidebar-collapsed-pref #sidebar { grid-area: sidebar; }
body.sidebar-collapsed-pref { grid-template-columns: 16px minmax(0, 1fr) clamp(320px, 26vw, 400px); }
body.sidebar-collapsed-pref .sidebar-collapse-btn { transform: rotate(180deg); }
@media (max-width: 1280px) {
  /* On narrow viewports the sidebar is already a slide-out panel; hide
     the collapse chevron there since the hamburger does the same job. */
  .sidebar-collapse-btn { display: none; }
  body.sidebar-collapsed-pref { grid-template-columns: minmax(0, 1fr) clamp(320px, 32vw, 380px); }
}

/* Scope facet (replaces header HK-FIN/AI-TECH/ALL chips). */
.facet-row { display: flex; gap:var(--space-1); flex-wrap: wrap; padding:var(--space-0_5) 0 var(--space-1); }
.facet {
  background: transparent; color: var(--text-muted);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  padding:var(--space-1) var(--space-2); font-size: var(--text-xs-size); cursor: pointer;
  text-transform: uppercase; letter-spacing: .1em;
  font-family: var(--sans); font-weight: var(--fw-semibold);
  transition: all var(--dur-fast) ease;
}
.facet:hover { color: var(--text); border-color: var(--accent); background: var(--bg-hover); }
.facet.active {
  background: var(--accent); color: var(--text-inverse);
  border-color: var(--accent);
}

/* Per-KPI freshness micro-line under each delta. */
.stat .freshness {
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-dim);
  letter-spacing: .04em; margin-top:var(--space-0_5); min-height: 1em;
}
.stat .freshness.stale { color: var(--sev-high); }

/* KPI overflow: when a stat doesn't fit, JS adds .stat-overflow which
   visually hides it but keeps it in the DOM so its content is mirrored
   into #kpi-overflow-popover via "+N more" button. */
.stat.stat-overflow { display: none; }
.kpi-more-btn {
  display: none;  /* JS sets to inline-flex when there's overflow */
  align-items: center; gap:var(--space-1); padding:var(--space-1) var(--space-2);
  background: var(--bg-card); color: var(--text-muted);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  cursor: pointer; font-family: var(--mono); font-size: var(--text-xs-size);
  text-transform: uppercase; letter-spacing: .08em;
  align-self: center;
}
.kpi-more-btn:hover { color: var(--text); border-color: var(--accent); }
.kpi-more-btn[aria-expanded="true"] { background: var(--bg-elevated); color: var(--accent); }
.kpi-more-btn .more-count {
  font-weight: var(--fw-medium); color: var(--accent);
}

#kpi-overflow-popover {
  position: absolute; z-index: 60;
  background: var(--bg-panel); color: var(--text);
  border: var(--border-width) solid var(--accent); border-radius: var(--radius-sm);
  padding:var(--space-2); min-width: 200px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ctp-crust) 60%, transparent);
}
#kpi-overflow-popover .arrow {
  position: absolute; top:-var(--space-2); right:var(--space-3);
  width: 12px; height: 12px; background: var(--bg-panel);
  border-top:var(--space-px) solid var(--accent); border-left:var(--space-px) solid var(--accent);
  transform: rotate(45deg);
}
#kpi-overflow-popover .stat {
  padding:var(--space-2) var(--space-1);
  border-bottom:var(--space-px) solid var(--border-soft);
}
#kpi-overflow-popover .stat:last-child { border-bottom:0; }
#kpi-overflow-popover .stat .num { font-size: var(--text-lg-size); }

/* Live-feed pause button (in the live-indicator). */
.live-pause {
  background: transparent; border: 0; color: var(--text-muted);
  cursor: pointer; padding:0 var(--space-1); font-size: var(--text-sm-size); line-height: 1;
  margin-left:var(--space-1);
}
.live-pause:hover { color: var(--text); }
.live-pause.paused { color: var(--accent); }
.feed-paused-tag {
  display: inline-block; margin-left:var(--space-2); padding:var(--space-px) var(--space-2);
  background: var(--accent-muted); color: var(--accent);
  font-family: var(--mono); font-size: var(--text-xs-size); letter-spacing: .06em;
  border-radius: var(--radius-xs);
}
.feed-paused-tag.hidden { display: none; }
.feed-empty.hidden { display: none; }
.stale-banner.hidden { display: none; }
.brush-clear.hidden { display: none; }

/* Empty live-feed state. */
.feed-empty {
  margin:var(--space-4) var(--space-4); padding:var(--space-4);
  background: var(--bg-card); border: var(--border-width) dashed var(--border);
  border-radius: var(--radius-sm);
}
.feed-empty-title {
  font-weight: var(--fw-semibold); color: var(--text); font-size: var(--text-base-size); margin-bottom:var(--space-2);
}
.feed-empty-body {
  color: var(--text-muted); font-size: var(--text-sm-size); margin-bottom:var(--space-2); line-height: 1.45;
}
.feed-empty-actions { display: flex; gap:var(--space-2); flex-wrap: wrap; }
.feed-empty-actions .btn { padding:var(--space-1) var(--space-2); }

/* Source panel: search box, sort, category groups, stale section. */
.src-controls {
  display: grid; grid-template-columns: 1fr 90px; gap:var(--space-1);
  margin-bottom:var(--space-2);
}
.src-search-box {
  width: 100%; background: var(--bg); color: var(--text);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  padding:var(--space-1) var(--space-2); font-size: var(--text-xs-size);
}
.src-search-box:focus { border-color: var(--accent); }
.src-sort {
  background: var(--bg); color: var(--text);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  font-size: var(--text-xs-size); padding:var(--space-1) var(--space-2);
}
.src-sort:focus { border-color: var(--accent); }
/* (.src-row .src-count is now defined in the canonical 3-zone flex
   block near line 460 — do not redeclare here.) */
.src-stale-wrap {
  margin:var(--space-2) 0 var(--space-2); padding:var(--space-2) var(--space-2);
  background: rgba(245,158,11,.08); border: var(--border-width) solid var(--sev-med);
  border-radius: var(--radius-xs);
}
.src-stale-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--sev-med);
  text-transform: uppercase; letter-spacing: .1em; font-weight: var(--fw-semibold);
  margin-bottom:var(--space-1);
}
.src-stale-list .src-row { padding:var(--space-0_5) 0; }
.src-stale-list .src-row .n { color: var(--text); }
.src-cat-group {
  margin-bottom:var(--space-2);
}
.src-cat-toggle {
  display: flex; align-items: center; gap:var(--space-2); width: 100%;
  background: none; border: 0; cursor: pointer; padding:var(--space-1) 0;
  font-family: var(--mono); font-size: var(--text-xs-size);
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
  font-weight: var(--fw-semibold);
}
.src-cat-toggle:hover { color: var(--text); }
.src-cat-toggle .chev {
  display: inline-block; transition: transform var(--dur-fast) ease;
  width: 10px; text-align: center;
}
.src-cat-group[data-open="false"] .src-cat-toggle .chev { transform: rotate(-90deg); }
.src-cat-group[data-open="false"] .src-cat-body { display: none; }
.src-cat-toggle .count { margin-left:auto; color: var(--text-dim); font-weight: var(--fw-regular); }
/* (.src-row .last-poll is now defined in the canonical 3-zone flex
   block near line 460 — do not redeclare here.) */
.src-health {
  display: flex; align-items: center; gap:var(--space-2); padding:var(--space-2) var(--space-2);
  background: var(--bg-card); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-xs); margin-bottom:var(--space-2);
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-muted);
}
.src-health[data-overall="amber"] { border-color: var(--sev-med); }
.src-health[data-overall="red"]   { border-color: var(--sev-critical); }

/* Stale-source page banner */
.stale-banner {
  /* Banner is non-blocking — only its buttons accept clicks. Without this
     a Stale/Down warning at the top would intercept every click on the
     Filters / Settings buttons in the sidebar header below it. */
  position: fixed; top:60px; left:50%; transform: translateX(-50%);
  z-index: 28;
  max-width: 720px; width: max-content;
  background: rgba(245,158,11,.18); color: var(--sev-med);
  border: var(--border-width) solid var(--sev-med); border-radius: 0 0 4px 4px;
  border-top:0;
  padding:var(--space-2) var(--space-4); font-family: var(--mono); font-size: var(--text-xs-size);
  text-transform: uppercase; letter-spacing: .1em;
  display: flex; align-items: center; gap:var(--space-3); justify-content: center;
  pointer-events: none;
}
.stale-banner > * { pointer-events: auto; }
.stale-banner .btn { background: transparent; color: var(--sev-med);
                     border-color: var(--sev-med); }
.stale-banner .btn:hover { color: var(--text-inverse); background: var(--sev-med); }

/* Search syntax popover, anchored to the help button. */
#search-help-popover {
  position: absolute; z-index: 60;
  background: var(--bg-panel); color: var(--text);
  border: var(--border-width) solid var(--accent); border-radius: var(--radius-sm);
  padding:var(--space-3) var(--space-4); min-width: 260px; max-width: 360px;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--ctp-crust) 60%, transparent);
  font-size: var(--text-sm-size); line-height: 1.5;
}
#search-help-popover h4 {
  margin:0 0 var(--space-2); font-size: var(--text-xs-size); color: var(--accent);
  text-transform: uppercase; letter-spacing: .14em;
}
#search-help-popover code {
  background: var(--bg); color: var(--accent); padding:var(--space-px) var(--space-1);
  border-radius: var(--radius-xs); font-family: var(--mono); font-size: var(--text-xs-size);
}
#search-help-popover ul { margin:0; padding-left:var(--space-4); }
#search-help-popover li { margin-bottom:var(--space-1); color: var(--text-muted); }
#search-help-popover .arrow {
  position: absolute; top:-var(--space-2); right:var(--space-3);
  width: 12px; height: 12px; background: var(--bg-panel);
  border-top:var(--space-px) solid var(--accent); border-left:var(--space-px) solid var(--accent);
  transform: rotate(45deg);
}

/* Search examples line under the input */
.search-examples {
  padding:var(--space-1) var(--space-4); background: var(--bg-panel);
  border-bottom:var(--space-px) solid var(--border);
  font-size: var(--text-xs-size); color: var(--text-muted);
  font-family: var(--mono); letter-spacing: .04em;
}
.search-examples code {
  background: var(--bg); color: var(--accent);
  padding:var(--space-px) var(--space-1); border-radius: var(--radius-xs); font-size: var(--text-xs-size);
  margin:0 var(--space-px);
}
.search-cluster {
  display: flex; align-items: center; gap:var(--space-1); margin-left:auto;
  /* Drawer is z-index 20 and full-height; without this the search-help
     button gets clipped by the drawer subtree's pointer-event capture
     when the drawer is open (test_escape_chain_closes_topmost). */
  position: relative; z-index: 25;
}
.search-help-btn { padding:var(--space-1) var(--space-2); }

/* Interactive sparkline: severity-stacked bars, hover tooltip, brush selection */
.sparkline-host { flex: 1; height: 36px; display: flex; align-items: center;
                  position: relative; cursor: crosshair; user-select: none; }
.sparkline-host svg { width: 100%; height: 100%; max-width: 280px; }
.sparkline-host .bar-stack rect { transition: opacity var(--dur-fast) ease; }
.sparkline-host .bar-crit  { fill: var(--sev-critical); }
.sparkline-host .bar-high  { fill: var(--sev-high); }
.sparkline-host .bar-med   { fill: var(--sev-med); }
.sparkline-host .bar-low   { fill: var(--sev-low); }
.sparkline-host .bar-info  { fill: var(--text-dim); }
.sparkline-host .bar-stack:hover rect { opacity: .75; }
.sparkline-host .brush {
  fill: var(--accent-muted); stroke: var(--accent); stroke-width: 1;
  pointer-events: none;
}
#spark-tooltip {
  position: absolute; pointer-events: none; z-index: 5;
  background: var(--bg-elevated); border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-xs); padding:var(--space-2) var(--space-2);
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ctp-crust) 45%, transparent);
  white-space: nowrap;
}
#spark-tooltip.hidden { display: none; }
#spark-tooltip .tt-row { display: flex; justify-content: space-between; gap:var(--space-3); }
#spark-tooltip .tt-row .lbl { color: var(--text-muted); }
.brush-clear { padding:var(--space-1) var(--space-2); font-size: var(--text-xs-size); }

/* Phase 5: dim non-selected bars when a brush is active so the selection
   pops without losing context. Apply via CSS class, not inline opacity. */
.sparkline-host .bar-stack.bar-dim rect { opacity: .35; }

/* Brush chip — replaces the plain CLEAR button when a brush is active.
   Reads "Filtered: HH:00–HH:00 · Clear" and the whole pill clears. */
.brush-clear.brush-chip {
  padding:var(--space-1) var(--space-2); font-size: var(--text-xs-size);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 45%, var(--border));
  text-transform: none; letter-spacing: .02em;
}
.brush-clear.brush-chip:hover {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}
.brush-clear.brush-chip b {
  font-family: var(--mono); font-weight: var(--fw-medium);
}

/* Midnight-wrap glyph in the axis label. */
.spark-axes-wrap {
  display: inline-block; margin-left:var(--space-1);
  color: var(--text-muted); font-weight: var(--fw-medium);
}

/* Map "recent events" list mirror — keyboard-reachable */
.map-events-btn {
  position: absolute; bottom:var(--space-14); right:var(--space-2); z-index: 4;
  background: var(--bg-card); color: var(--text-muted);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  padding:var(--space-2) var(--space-2); cursor: pointer;
  font-family: var(--mono); font-size: var(--text-xs-size);
  text-transform: uppercase; letter-spacing: .12em;
}
.map-events-btn:hover { color: var(--text); border-color: var(--accent); }
.map-events-btn[aria-expanded="true"] { background: var(--bg-elevated); color: var(--accent); }
.map-events-list {
  position: absolute; bottom:92px; right:var(--space-2); width: min(360px, 90%);
  max-height: 50%; overflow-y: auto; z-index: 4;
  background: var(--bg-panel); border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-sm); box-shadow: 0 14px 30px color-mix(in srgb, var(--ctp-crust) 60%, transparent);
  padding:var(--space-2);
}
.map-events-list.hidden { display: none; }
.map-events-list .me-row {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap:var(--space-2); align-items: center; padding:var(--space-2) var(--space-2);
  border-bottom:var(--space-px) solid var(--border-soft);
  cursor: pointer; font-size: var(--text-xs-size);
}
.map-events-list .me-row:hover { background: var(--bg-hover); }
.map-events-list .me-row .me-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.map-events-list .me-row.kind-ioc   .me-dot { background: var(--stream-ioc-text); }
.map-events-list .me-row.kind-cert  .me-dot { background: var(--stream-cert-text); }
.map-events-list .me-row.kind-actor .me-dot { background: var(--stream-actor-text); }
.map-events-list .me-row .me-title {
  color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.map-events-list .me-row .me-meta {
  color: var(--text-dim); font-family: var(--mono); font-size: var(--text-xs-size);
}

/* Category pills: glyph + color (a11y). */
.cat-pill[data-cat-glyph]::before {
  content: attr(data-cat-glyph);
  display: inline-block; margin-right:var(--space-1); opacity: .8;
}

/* IOC value middle-truncate with hover-to-expand. Hover keeps the value on
   ONE line — when the table is too narrow, #tab-body's overflow-x:auto
   gives the operator horizontal scroll instead of stacking URL letters
   vertically. */
table.data td.val {
  min-width: 240px; max-width: 480px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  position: relative; cursor: text;
  font-feature-settings: "tnum", "ss01", "cv11";
  letter-spacing: -0.005em;
}
table.data td.val .val-mid {
  display: inline-flex; align-items: baseline; max-width: 100%;
  overflow: hidden; white-space: nowrap;
}
/* Hover: expand horizontally (single line, no break-all). The cell can
   exceed its max-width because the surrounding #tab-body scrolls. */
table.data td.val:hover {
  max-width: none;
  background: var(--bg-elevated);
  z-index: 2; position: relative;
}
table.data td.val:hover .val-prefix,
table.data td.val:hover .val-suffix {
  max-width: none; white-space: nowrap;
}
table.data td.val .val-prefix,
table.data td.val .val-suffix {
  display: inline-block; vertical-align: baseline;
  white-space: nowrap; overflow: hidden;
}
table.data td.val .val-prefix { max-width: 60%; text-overflow: ellipsis; }
table.data td.val .val-suffix { color: var(--text-muted); }
table.data td.val .val-ellip { color: var(--text-dim); padding:0 var(--space-0_5); }
/* When IOC table can't fit, scroll horizontally — never stack characters. */
#tab-body { overflow-x: auto; }
table.data { table-layout: auto; min-width: max-content; }

/* HK/AI scores ≥ 25 colored in tables */
table.data td.score-hk[data-bucket="med"]      { color: var(--sev-med); font-weight: var(--fw-semibold); }
table.data td.score-hk[data-bucket="high"]     { color: var(--sev-high); font-weight: var(--fw-semibold); }
table.data td.score-hk[data-bucket="critical"] { color: var(--sev-critical); font-weight: var(--fw-medium); }
table.data td.score-ai[data-bucket="med"]      { color: var(--sev-med); font-weight: var(--fw-semibold); }
table.data td.score-ai[data-bucket="high"]     { color: var(--sev-high); font-weight: var(--fw-semibold); }
table.data td.score-ai[data-bucket="critical"] { color: var(--sev-critical); font-weight: var(--fw-medium); }

/* Right-align numeric/time columns; tabular-nums keeps digits aligned. */
table.data td.num-cell,
table.data th.num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01", "cv11";
}

/* Compact-density: collapse IOC table action buttons to icons. */
body.density-compact .ioc-actions .btn {
  padding:var(--space-0_5) var(--space-1); min-width: var(--space-6); text-align: center;
}
body.density-compact .ioc-actions .btn .btn-text { display: none; }
body.density-compact .ioc-actions .btn::after {
  content: attr(data-icon); font-size: var(--text-sm-size);
}
.ioc-actions { display: inline-flex; gap:var(--space-0_5); }

/* Severity-pill icon glyphs (item shapes already added at top); ensure
   :focus-visible on facet rows lands on the parent button. */
.facet:focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 2px; }

/* Settings: labeled accent swatches.
   Phase 7: ensure the whole {circle + label} <label> is the click target,
   show a 2px accent ring around the active swatch, and dim non-active
   ones so the selected state is unambiguous. */
#settings-dialog .swatch {
  display: flex; flex-direction: column; align-items: center;
  gap:var(--space-1); padding:var(--space-2) var(--space-2);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: background-color var(--dur-fast);
}
#settings-dialog .swatch:hover {
  background: color-mix(in srgb, var(--text) 4%, transparent);
}
#settings-dialog .swatch input { /* visually hidden but keyboard-reachable */
  position: absolute; width: 1px; height: 1px; padding:0; margin:-var(--space-px);
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
#settings-dialog .swatch .swatch-name {
  font-family: var(--mono); font-size: var(--text-xs-size); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: .06em;
}
#settings-dialog .swatch input:checked ~ .swatch-name { color: var(--text); }
#settings-dialog .swatch input:checked ~ .dot {
  /* Phase 7: 2px ring for the active swatch instead of the legacy text-color
     outline; matches the cyan accent visually. */
  box-shadow: 0 0 0 2px var(--accent);
  outline: 0;
}
#settings-dialog .swatch:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

/* ─── Phase 1 (KPI strip) — visual divider, sources pill, clock cycle, pause label ─── */

/* Subtle 1px divider between the Volume cluster (Reports/IOCs/HK/AI Hits)
   and the Coverage cluster (Sources/Actors). The first .stat-group-coverage
   tile (Sources) gets a left border at 30% opacity. Suppressed at narrow
   widths where stats wrap to multiple rows. */
/* .stat-group-coverage left-border / wider padding differentiator
   removed — Sources / Actors / Supply now use the same grid as
   Reports / IOCs / HK / AI, so labels, values, deltas, and sub
   decorations all share the same baselines tile-to-tile. */

/* (Sources health pill rules removed — the pill was deleted from
   the DOM by user request. Class kept hidden in case any other
   future code references it.) */
.src-health-pill { display: none !important; }

/* Clock cycle modes — class on #clock controls which sub-block is visible. */
#clock {
  cursor: pointer;
  background: var(--bg-card);
  border: var(--border-width) solid var(--border);
  /* override default <button> styling */
  font-family: var(--mono); font-size: var(--text-xs-size);
  align-items: stretch;
}
#clock:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
#clock[data-mode="hkt"] .clock-utc-wrap { display: none; }
#clock[data-mode="utc"] .clock-hkt-wrap { display: none; }
/* both: show both (default flex) */

/* Live pause button — icon-only by default, expands to icon+label on
   hover/focus or when pressed. Keeps a stable hit target either way. */
.live-pause {
  display: inline-flex; align-items: center; gap:var(--space-2);
  padding:var(--space-0_5) var(--space-2); border-radius: var(--radius-xs);
  border: var(--border-width) solid transparent;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), padding var(--dur-fast);
}
.live-pause .live-pause-text {
  display: inline-block;
  max-width: 0; overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  font-size: var(--text-xs-size); font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: .08em;
  transition: max-width var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.live-pause:hover,
.live-pause:focus-visible,
.live-pause[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  padding:var(--space-0_5) var(--space-2);
  outline: 0;
}
.live-pause:hover .live-pause-text,
.live-pause:focus-visible .live-pause-text,
.live-pause[aria-pressed="true"] .live-pause-text {
  max-width: 120px;
  opacity: 1;
}

/* ─── Phase 2 (Left filter rail) — chip rows, count badge, saved views ─── */

.sec-facets { display: flex; flex-direction: column; gap:var(--space-1); }
.facet-chip-row {
  display: flex; align-items: center; gap:var(--space-2);
  padding:var(--space-1) var(--space-2); border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast);
}
.facet-chip-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.facet-chip-row:focus-within { outline: 0; }

/* Active = full saturation + soft inner glow on the pill itself.
   Inactive = whole row dims to 40% opacity (pill loses saturation). */
.facet-chip-row .pill,
.facet-chip-row .cat-pill {
  /* Suppress the legacy ●/◐/○/— icon suffix and letter prefix on the
     sidebar facets only — the colour + label is enough here. The same
     pills used in score badges/tables keep their non-colour cues. */
  cursor: pointer;
  flex: 0 0 auto;
  transition: filter var(--dur-fast), box-shadow var(--dur-fast), opacity var(--dur-fast);
}
.facet-chip-row .pill::before,
.facet-chip-row .pill::after,
.facet-chip-row .cat-pill::before,
.facet-chip-row .cat-pill::after { content: none !important; }

.facet-chip-row:has(input:checked) .pill,
.facet-chip-row:has(input:checked) .cat-pill {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
}
.facet-chip-row:has(input:not(:checked)) {
  opacity: .42;
}
.facet-chip-row:has(input:not(:checked)) .pill,
.facet-chip-row:has(input:not(:checked)) .cat-pill {
  box-shadow: none;
}

/* Trailing count badge — small, mono, right-aligned. */
.facet-chip-row .facet-count {
  margin-left:auto;
  font-family: var(--mono); font-size: var(--text-xs-size);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 2.4ch; text-align: right;
}
.facet-chip-row:has(input:checked) .facet-count { color: var(--text); }

/* Saved views — popover menu under the Saved Views button. */
.saved-views-menu {
  position: absolute; z-index: 60;
  margin-top:36px; left:var(--space-2); right:var(--space-2);
  background: var(--bg-panel); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm); padding:var(--space-1);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ctp-crust) 45%, transparent);
  max-height: 260px; overflow-y: auto;
}
.saved-views-menu[hidden] { display: none; }
.saved-views-menu .sv-item {
  display: flex; align-items: center; gap:var(--space-2);
  padding:var(--space-2) var(--space-2); border-radius: var(--radius-xs); cursor: pointer;
  font-size: var(--text-sm-size); color: var(--text);
}
.saved-views-menu .sv-item:hover,
.saved-views-menu .sv-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: 0;
}
.saved-views-menu .sv-item .sv-name { flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-views-menu .sv-item .sv-meta {
  font-family: var(--mono); font-size: var(--text-2xs-size); color: var(--text-muted);
}
.saved-views-menu .sv-item .sv-del {
  background: transparent; border: 0; color: var(--text-muted);
  cursor: pointer; padding:0 var(--space-1); font-size: var(--text-md-size); line-height: 1;
  opacity: 0; transition: opacity var(--dur-fast);
}
.saved-views-menu .sv-item:hover .sv-del,
.saved-views-menu .sv-item:focus-within .sv-del { opacity: 1; }
.saved-views-menu .sv-del:hover { color: var(--sev-critical); }
.saved-views-menu .sv-empty {
  padding:var(--space-2); color: var(--text-muted); font-size: var(--text-sm-size); font-style: italic;
}
.saved-views-menu .sv-divider { height: 1px; background: var(--border); margin:var(--space-1) 0; }
.saved-views-menu .sv-save {
  display: flex; align-items: center; gap:var(--space-2);
  padding:var(--space-2) var(--space-2); border-radius: var(--radius-xs); cursor: pointer;
  color: var(--accent); font-size: var(--text-sm-size); font-weight: var(--fw-semibold);
  background: transparent; border: 0; width: 100%; text-align: left;
}
.saved-views-menu .sv-save:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* Reset button disabled state — dim + cursor cue, click is no-op. */
#filter-reset[aria-disabled="true"] {
  opacity: .4; cursor: not-allowed;
}

/* ─── Phase 3 (IOC table toolbar + rows) ─────────────────────── */

.ioc-toolbar-v2 {
  display: flex; flex-wrap: wrap; align-items: center; gap:var(--space-2);
  padding:var(--space-2) var(--space-2); border-bottom:var(--space-px) solid var(--border);
}
.ioc-toolbar-v2 .ioc-tb-group { display: inline-flex; position: relative; }
.ioc-toolbar-v2 .ioc-toolbar-spacer { flex: 1 1 auto; }
.ioc-split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; padding-right:var(--space-2); }
.ioc-split-caret {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  border-left:0 !important; padding:var(--space-1) var(--space-2); min-width: var(--space-6);
}
.ioc-menu {
  position: absolute; top:100%; left:0; z-index: 60;
  min-width: 180px; margin-top:var(--space-0_5);
  background: var(--bg-panel); border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm); padding:var(--space-1);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ctp-crust) 45%, transparent);
}
.ioc-menu[hidden] { display: none; }
.ioc-menu-item {
  display: flex; align-items: center; gap:var(--space-2);
  width: 100%; text-align: left;
  padding:var(--space-2) var(--space-2); border-radius: var(--radius-xs);
  background: transparent; border: 0; cursor: pointer;
  color: var(--text); font-size: var(--text-sm-size);
}
.ioc-menu-item:hover, .ioc-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: 0;
}
.ioc-menu-divider { height: 1px; background: var(--border); margin:var(--space-1) 0; }
.ioc-menu-toggle .ioc-menu-check {
  display: inline-block; width: 14px; text-align: center;
  font-family: var(--mono); color: var(--accent);
}

/* Destructive "Suppress as FP" button — red outline. */
.btn.btn-danger {
  border-color: color-mix(in srgb, var(--sev-critical) 50%, var(--border));
  color: color-mix(in srgb, var(--sev-critical) 90%, var(--text));
}
.btn.btn-danger:hover:not(:disabled),
.btn.btn-danger:focus-visible:not(:disabled) {
  background: color-mix(in srgb, var(--sev-critical) 14%, transparent);
  border-color: var(--sev-critical);
}

/* Column-filters toggle pill. */
.ioc-colfilter-toggle[aria-pressed="true"] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  color: var(--text);
}

/* TYPE chip — coloured pill, lowercase text. */
.ioc-type-chip {
  display: inline-flex; align-items: center; gap:var(--space-1);
  padding:var(--space-0_5) var(--space-2); border-radius: var(--radius-xs);
  font-family: var(--mono); font-size: var(--text-xs-size); font-weight: var(--fw-semibold);
  letter-spacing: .04em;
}
.ioc-type-chip.ioc-type-url    { background: color-mix(in srgb, var(--accent) 18%, transparent);
                                  color: var(--accent); }
.ioc-type-chip.ioc-type-domain { background: var(--stream-actor);
                                  color: var(--stream-actor-text); }
.ioc-type-chip.ioc-type-ip     { background: color-mix(in srgb, var(--sev-med) 22%, transparent);
                                  color: var(--sev-med); }
.ioc-type-chip.ioc-type-hash   { background: color-mix(in srgb, var(--text-muted) 22%, transparent);
                                  color: var(--text-muted); }
.ioc-type-chip.ioc-type-other  { background: color-mix(in srgb, var(--text-muted) 12%, transparent);
                                  color: var(--text-muted); }
.ioc-type-glyph { font-weight: var(--fw-medium); opacity: .85; }

/* Score cells — 0 is muted "—"; >0 has a thin severity-colored fill bar. */
.score-zero { color: var(--text-muted); font-style: normal; }
.score-bar-cell { position: relative; }
.score-bar-cell .score-num { font-variant-numeric: tabular-nums; }
.score-bar-cell .score-bar {
  display: inline-block; vertical-align: middle;
  width: 40px; max-width: 40px; height: 4px; margin-left:var(--space-2);
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  border-radius: var(--radius-xs); overflow: hidden;
}
.score-bar-cell .score-fill {
  display: block; height: 100%; transition: width var(--dur-base);
  background: var(--accent); /* default cyan */
}
.score-bar-cell[data-bucket="crit"] .score-fill { background: var(--sev-critical); }
.score-bar-cell[data-bucket="high"] .score-fill { background: var(--sev-high); }
.score-bar-cell[data-bucket="med"]  .score-fill { background: var(--sev-med); }

/* Hover-reveal row actions — visible only on hover/focus or selection. */
.ioc-row-actions {
  opacity: 0;
  transition: opacity var(--dur-fast);
}
.ioc-row:hover .ioc-row-actions,
.ioc-row:focus-within .ioc-row-actions,
.ioc-row.row-selected .ioc-row-actions {
  opacity: 1;
}

/* Click-to-copy on the value cell. */
.ioc-value-cell {
  cursor: copy;
}
.ioc-value-cell:hover { color: var(--accent); }

/* Pagination footer. */
.ioc-table-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding:var(--space-2) var(--space-2); gap:var(--space-3);
  border-top:var(--space-px) solid var(--border);
  font-size: var(--text-sm-size);
}
.ioc-load-more {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); border: var(--border-width) solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.ioc-load-more:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }

/* Toast — bottom-right pill, 1.5 s fade. */
.hks-toast {
  position: fixed; right:var(--space-4); bottom:var(--space-4); z-index: 200;
  background: color-mix(in srgb, var(--accent) 92%, var(--bg-panel));
  color: var(--text-inverse); font-weight: var(--fw-semibold); font-size: var(--text-sm-size);
  padding:var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--ctp-crust) 40%, transparent);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  pointer-events: none;
}
.hks-toast.show {
  opacity: 1; transform: translateY(0);
}

/* ─── Phase 4 (Recent Events feed) ───────────────────────────── */

/* "Load older" button at the bottom of the feed list. */
.feed-load-older {
  display: block; width: calc(100% - 16px);
  margin:var(--space-2); padding:var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 36%, var(--border));
  border-radius: var(--radius-xs); cursor: pointer;
  font-family: var(--mono); font-size: var(--text-xs-size); font-weight: var(--fw-semibold);
  letter-spacing: .08em; text-transform: uppercase;
}
.feed-load-older:hover,
.feed-load-older:focus-visible {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  outline: 0;
}

/* ─── Phase 6 (Tabs / empty states / Hunts polish) ───────────── */

/* Tab count badge spacing.
   The .tab container is `display:inline-flex` (defined later in the
   cascade), so margin-inline-start AND a column gap on the parent
   together guarantee a visible separation regardless of which layout
   model wins. The selector covers all three badge class names that
   appear in templates (.tab-count is canonical; .count and .badge are
   legacy aliases). */
.tab .tab-count, .tab .count, .tab .badge {
  display: inline-block;
  margin-inline-start: var(--space-2) !important;   /* ≥6px guarantee */
  padding:0 var(--space-2);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--text-muted) 22%, transparent);
  color: var(--text-muted);
  font-family: var(--mono); font-size: var(--text-2xs-size); font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  vertical-align: middle;
  min-width: 18px; text-align: center;
}
.tab.active .tab-count,
.tab.active .count,
.tab.active .badge {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
}
.tab .tab-count[hidden],
.tab .count[hidden],
.tab .badge[hidden] { display: none; }

/* Skeleton rows during tab load. */
.skel-table { width: 100%; border-collapse: collapse; opacity: .6; }
.skel-table thead th { height: 18px; }
.skel-table .skel-row td { padding:var(--space-2); }
.skel-bar {
  display: block; height: 10px; border-radius: var(--radius-xs);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--text-muted) 14%, transparent),
    color-mix(in srgb, var(--text-muted) 28%, transparent),
    color-mix(in srgb, var(--text-muted) 14%, transparent));
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Tab empty-state — centered. */
.tab-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap:var(--space-2); padding:var(--space-12) var(--space-4);
  color: var(--text-muted);
  text-align: center;
}
.tab-empty-title {
  font-size: var(--text-base-size); font-weight: var(--fw-semibold); color: var(--text);
  letter-spacing: .02em;
}
.tab-empty-hint { font-size: var(--text-sm-size); }
.tab-empty-reset {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  border: var(--border-width) solid color-mix(in srgb, var(--accent) 36%, var(--border));
}

/* Generic hover-reveal action column (Detections + Brand Certs). */
td.row-actions {
  opacity: 0;
  transition: opacity var(--dur-fast);
}
tr:hover td.row-actions,
tr:focus-within td.row-actions {
  opacity: 1;
}

/* Clickable example chips in the search hint row. */
#search-examples code {
  cursor: pointer;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}
#search-examples code:hover,
#search-examples code:focus-visible {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--text);
  outline: 0;
}

/* Hunts code blocks — language label corner + copy button reveal. */
.hunt-code {
  position: relative;
  padding-top:var(--space-7);          /* room for the language pill / copy button */
  font-family: var(--mono);
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.hunt-code .hunt-lang {
  position: absolute; top:var(--space-2); left:var(--space-2);
  padding:var(--space-px) var(--space-2); border-radius: var(--radius-xs);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
  font-family: var(--mono); font-size: var(--text-2xs-size); font-weight: var(--fw-medium);
  letter-spacing: .08em; text-transform: uppercase;
}
.hunt-code .hunt-copy {
  position: absolute; top:var(--space-1); right:var(--space-2);
  padding:var(--space-0_5) var(--space-2); font-size: var(--text-xs-size);
  opacity: 0; transition: opacity var(--dur-fast);
}
.hunt-code:hover .hunt-copy,
.hunt-code:focus-within .hunt-copy { opacity: 1; }
.hunt-code code {
  display: block; white-space: pre; color: var(--text);
  font-size: var(--text-sm-size);
}
.hunt-code code .kw {
  color: var(--accent); font-weight: var(--fw-medium);
}

/* ─── Phase 8 (Cross-cutting) ─────────────────────────────────── */

/* Header "Events" toggle — base appearance. Display is controlled
   by the <1280 / >=1281 media queries earlier in the file. */
.feed-slide-toggle {
  align-items: center; gap:var(--space-1);
  padding:var(--space-1) var(--space-2); margin-right:var(--space-2);
  background: var(--bg-card); color: var(--text);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  cursor: pointer; font-family: var(--mono); font-size: var(--text-xs-size);
  letter-spacing: .08em; text-transform: uppercase;
}
.feed-slide-toggle:hover { border-color: var(--accent); color: var(--accent); }
.feed-slide-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent); color: var(--accent);
}

/* Keyboard shortcuts modal (opened via "?"). */
#shortcuts-modal {
  background: var(--bg-panel);
  color: var(--text);
  border: var(--border-width) solid var(--border);
  border-radius: var(--radius-md);
  padding:var(--space-4) var(--space-5);
  max-width: 520px; min-width: 320px;
}
#shortcuts-modal::backdrop {
  background: color-mix(in srgb, var(--ctp-crust) 55%, transparent);
}
#shortcuts-modal h3 {
  margin:0 0 var(--space-3); font-size: var(--text-md-size); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: .12em;
}
#shortcuts-modal .shortcuts-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm-size);
}
#shortcuts-modal .shortcuts-table tr + tr {
  border-top:var(--space-px) solid var(--border-soft);
}
#shortcuts-modal .shortcut-keys { padding:var(--space-2) var(--space-2) var(--space-2) 0; white-space: nowrap; }
#shortcuts-modal .shortcut-desc { padding:var(--space-2) 0 var(--space-2) var(--space-3); color: var(--text-muted); }
#shortcuts-modal kbd {
  display: inline-block; min-width: var(--space-6); padding:var(--space-0_5) var(--space-2);
  background: var(--bg-elevated); color: var(--text);
  border: var(--border-width) solid var(--border); border-radius: var(--radius-xs);
  font-family: var(--mono); font-size: var(--text-xs-size); font-weight: var(--fw-semibold);
  text-align: center;
}
#shortcuts-modal .dlg-actions {
  display: flex; justify-content: flex-end; margin-top:var(--space-3);
  padding-top:var(--space-2); border-top:var(--space-px) solid var(--border);
}

/* ─── Phase 0 utility classes (replace inline-style strings in JS) ─ */
.block-pad        { padding: var(--space-3); }
.block-pad-lg     { padding: var(--space-2) var(--space-3); }
.row-pad          { padding: var(--space-2) 0; }
.row-pad-tight    { padding: var(--space-1) 0 var(--space-1) 0; }
.muted-block      { color: var(--text-secondary); font-size: var(--text-sm-size); }
.text-center      { text-align: center; }
.cursor-pointer   { cursor: pointer; }
.mt-1             { margin-top: var(--space-1); }
.mt-2             { margin-top: var(--space-2); }
.ml-2             { margin-left: var(--space-2); }
.src-mono-accent  { font-family: var(--font-mono); color: var(--accent-text); }

/* ─── §3 Shared table component (.tbl-v2) ───────────────────────────
   Single source of truth for every workspace tab's table. Per-tab
   tables get the .tbl-v2 class; renderer-specific styling stays
   small (column widths only). Contract:
     - Rows 40 px tall, --border-subtle bottom hairline, no zebra.
     - Header 36 px, --bg-1, sticky, --text-2xs --fw-semibold uppercase.
     - Hover --bg-2.
     - Selected row: --accent-muted bg + 2 px left --accent border.
     - First/last cell padding-x var(--space-5); middle cells --space-4.
     - Numeric cells right-aligned + tnum.
     - Mono cells (hashes, IPs, URLs) use --font-mono --text-xs.
     - Empty values render "—" in --text-disabled.
     - Truncated cells get a 16 px fade-to-transparent right edge mask. */

.tbl-v2 {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base-size);
  letter-spacing: var(--tracking-body);
  color: var(--text-secondary);
}
.tbl-v2 thead th {
  position: sticky; top: 0; z-index: 2;
  height: 36px;
  background: var(--bg-1);
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  padding: 0 var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  vertical-align: middle;
  white-space: nowrap;
}
.tbl-v2 thead th:first-child { padding-left: var(--space-5); }
.tbl-v2 thead th:last-child  { padding-right: var(--space-5); }
.tbl-v2 thead th.num-cell    { text-align: right; }
.tbl-v2 thead th[data-sort]  { cursor: pointer; user-select: none; }
.tbl-v2 thead th[data-sort]:hover { color: var(--text-secondary); }
.tbl-v2 thead th[aria-sort="ascending"],
.tbl-v2 thead th[aria-sort="descending"] { color: var(--accent-text); }
.tbl-v2 thead th .sort-arrow {
  display: inline-block; margin-left: var(--space-1);
  color: var(--accent-text);
}

.tbl-v2 tbody tr {
  height: 40px;
  transition: background var(--dur-fast) var(--ease-out);
}
.tbl-v2 tbody tr + tr td { border-top: var(--border-width) solid var(--border-subtle); }
.tbl-v2 tbody tr:hover { background: var(--bg-2); }
.tbl-v2 tbody tr.is-selected {
  background: var(--accent-muted);
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.tbl-v2 tbody td {
  padding: 0 var(--space-4);
  vertical-align: middle;
  color: var(--text-secondary);
  font-size: var(--text-base-size);
  white-space: nowrap;
}
.tbl-v2 tbody td:first-child { padding-left: var(--space-5); }
.tbl-v2 tbody td:last-child  { padding-right: var(--space-5); }
.tbl-v2 tbody tr:hover td    { color: var(--text-primary); }

.tbl-v2 .num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}
.tbl-v2 .mono-cell {
  font-family: var(--font-mono);
  font-size: var(--text-xs-size);
  font-variant-ligatures: none;
  color: var(--text-secondary);
}
.tbl-v2 .empty-cell { color: var(--text-disabled); }

/* Truncated cell: fade-to-transparent right edge so long values
   gracefully ellipsis-out without abrupt clipping. JS can attach a
   `title=` for the full value tooltip. */
.tbl-v2 .truncate {
  overflow: hidden;
  position: relative;
  text-overflow: clip;
  /* The mask creates a 16 px fade at the right edge. */
  mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  max-width: 0; /* combined with td's own min-width forces truncation */
}

/* ─── §3.2 Shared chip taxonomy ───────────────────────────────────
   .chip is the base; .chip-{url,domain,ip,hash,cve,email,victim,
   actor,attack} are the variants. All chips share the same
   geometry so they vertically align in mixed-chip rows. */
.chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-px) var(--space-2);
  min-height: 18px;
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  white-space: nowrap;
  vertical-align: middle;
}
.chip > .chip-glyph { font-weight: var(--fw-semibold); opacity: 0.85; }

/* Network-artefact family — single hue, varying brightness. */
.chip-type-url    { background: var(--accent-muted); color: var(--accent-text); border-color: var(--accent-border); }
.chip-type-domain { background: oklch(76% 0.13 215 / 0.22); color: oklch(88% 0.10 215); border-color: oklch(76% 0.13 215 / 0.45); }
.chip-type-ip     { background: oklch(76% 0.13 215 / 0.10); color: oklch(80% 0.10 215); border-color: oklch(76% 0.13 215 / 0.30); }

/* File-artefact family — neutral grey. */
.chip-type-hash {
  background: var(--bg-3); color: var(--text-secondary);
  border-color: var(--border-subtle);
  text-transform: lowercase;
}
.chip-type-file { /* alias */ background: var(--bg-3); color: var(--text-secondary); border-color: var(--border-subtle); }

/* Vulnerability — orange. */
.chip-type-cve { background: var(--warn-bg); color: var(--warn-text); border-color: oklch(78% 0.15 75 / 0.30); }

/* Email — violet. */
.chip-type-email {
  background: oklch(70% 0.22 305 / 0.10); color: oklch(82% 0.15 305);
  border-color: oklch(70% 0.22 305 / 0.30);
}

/* Catch-all for unknown types so we never render a naked string. */
.chip-type-other { background: var(--bg-3); color: var(--text-tertiary); border-color: var(--border-subtle); }

/* Entity chips. */
.chip-victim {
  background: var(--sev-crit-bg); color: var(--sev-crit-text);
  border-color: var(--sev-crit-border);
  text-transform: capitalize;
  max-width: 28ch; overflow: hidden; text-overflow: ellipsis; display: inline-block;
}
.chip-victim-more {
  font-family: var(--font-mono); font-size: var(--text-2xs-size);
  color: var(--text-tertiary);
  padding: var(--space-px) var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--neutral-chip-bg);
  cursor: help;
  margin-left: var(--space-1);
}
.chip-actor {
  background: oklch(70% 0.22 305 / 0.14); color: oklch(82% 0.15 305);
  border-color: oklch(70% 0.22 305 / 0.30);
  text-transform: none;
}
.chip-attack {
  background: var(--sev-high-bg); color: var(--sev-high-text);
  border-color: var(--sev-high-border);
  text-transform: uppercase;
}
/* Attack hue overrides per type — match the existing victims-tab palette. */
.chip-attack.chip-attack-data_breach,
.chip-attack.chip-attack-ransomware,
.chip-attack.chip-attack-wiper {
  background: var(--crit-bg); color: var(--crit-text); border-color: var(--crit-border);
}
.chip-attack.chip-attack-supply_chain,
.chip-attack.chip-attack-zero_day,
.chip-attack.chip-attack-implant {
  background: var(--sev-high-bg); color: var(--sev-high-text); border-color: var(--sev-high-border);
}
.chip-attack.chip-attack-phishing,
.chip-attack.chip-attack-credential_theft,
.chip-attack.chip-attack-fraud,
.chip-attack.chip-attack-crypto_scam,
.chip-attack.chip-attack-invoice_fraud {
  background: var(--sev-med-bg); color: var(--sev-med-text); border-color: var(--sev-med-border);
}
.chip-attack.chip-attack-ddos {
  background: var(--warn-bg); color: var(--warn-text); border-color: var(--warn-border);
}
.chip-attack.chip-attack-intrusion,
.chip-attack.chip-attack-recon,
.chip-attack.chip-attack-malware,
.chip-attack.chip-attack-other {
  background: var(--sev-info-bg); color: var(--sev-info-text); border-color: var(--sev-info-border);
}

/* ─── §3.4 Action column — hover-revealed icon-button cluster ───── */
.tbl-v2 .row-actions {
  display: flex; align-items: center; gap: var(--space-1);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.tbl-v2 tr:hover .row-actions,
.tbl-v2 tr:focus-within .row-actions,
.tbl-v2 tr.is-selected .row-actions { opacity: 1; }
.tbl-v2 .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-6); height: var(--space-6);
  background: transparent; border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.tbl-v2 .icon-btn:hover { background: var(--bg-3); color: var(--text-primary); }
.tbl-v2 .icon-btn:focus-visible {
  box-shadow: var(--ring); outline: none;
}
.tbl-v2 .icon-btn svg { display: block; }
.tbl-v2 .icon-btn .lbl {
  /* Compact label for actions that need text (YARA / SIGMA / SPLUNK
     in Detections, where icons alone aren't readable). */
  font-family: var(--font-mono);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  padding: 0 var(--space-1);
}
/* Anchor variant of icon-btn (used by Brand Certs crt.sh / VT). */
.tbl-v2 a.icon-btn { text-decoration: none; }

/* Inline info icon in column headers (Actors ATT&CK column). */
.tbl-v2 .hdr-info {
  display: inline-flex; vertical-align: middle;
  margin-left: var(--space-1);
  color: var(--text-quaternary);
}
.tbl-v2 .hdr-info svg { width: 12px; height: 12px; }

/* "+N hidden" link in the IOC count area. */
.ioc-show-hidden {
  background: none; border: 0; padding: 0;
  color: var(--accent-text);
  font-family: var(--font-mono);
  font-size: var(--text-2xs-size);
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.ioc-show-hidden:hover { color: var(--accent); }

/* Hunts table — column widths + expand-row + pinned indicator.
   The Hunts tab uses the shared .tbl-v2 component (§3) but has its
   own column widths because the Why/Query columns carry long prose
   that needs to truncate gracefully rather than push the action
   column off-screen. */
/* Column widths: titles + why are the longest cells; cap them so the
   table fits a 1440 viewport without cutting off Last-tuned / Actions. */
.data-hunts .hunt-id      { width: 64px; }
.data-hunts .hunt-surface { width: 14%; max-width: 180px; }
.data-hunts .hunt-title   { width: 22%; max-width: 280px; }
.data-hunts .hunt-why     { max-width: 240px; }
.data-hunts .hunt-query   { max-width: 200px; }
.data-hunts .hunt-why,
.data-hunts .hunt-query,
.data-hunts .hunt-title,
.data-hunts .hunt-surface {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-hunts .hunt-tuned   { width: 96px; color: var(--text-tertiary); }
.data-hunts .hunt-row     { cursor: pointer; }
.data-hunts .hunt-row.is-pinned td:first-child {
  box-shadow: inset 2px 0 0 0 var(--accent);
}
.data-hunts .hunt-row.is-pinned .hunt-id { color: var(--accent-text); }
.data-hunts .hunt-row.is-pinned .hunt-pin { color: var(--accent-text); }
.data-hunts .hunt-row.is-pinned .hunt-pin:hover { color: var(--accent); }
.data-hunts .hunt-query .chip { margin-right: var(--space-2); }
.data-hunts .hunt-query-snip { color: var(--text-secondary); }

/* Expand row beneath a hunt — hidden by default, toggled by row
   click or the open-icon action. Mirrors the Detections pattern. */
.data-hunts .hunt-expand-row > td {
  background: var(--bg-1);
  padding: var(--space-3) var(--space-4);
  white-space: normal;
  border-top: var(--border-width) solid var(--border-subtle);
}
.data-hunts .hunt-expand-row .hunt-code {
  margin-top: var(--space-2);
}

/* "LIVE" pill — marks hunts auto-derived from the last 24 h of feed
   activity (vs evergreen library entries). Pulses slowly so the
   "this is fresh" reading lands without being noisy. */
.hunt-live-pill {
  display: inline-flex; align-items: center;
  height: 14px; padding: 0 var(--space-1);
  margin-right: var(--space-2);
  border-radius: var(--radius-xs);
  background: var(--accent-muted);
  color: var(--accent-text);
  border: var(--border-width) solid var(--accent-border);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  vertical-align: middle;
}
.hunt-live-pill::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: var(--space-1);
  animation: pulse-out 2400ms var(--ease-out) infinite;
}
.data-hunts .hunt-row.is-live .hunt-id {
  color: var(--accent-text);
}

/* AI-score source pill in the report drawer header. Tells the operator
   whether the displayed score came from the LLM judgment ("AI" chip,
   accent-coloured) or the keyword bootstrap ("kw" chip, muted). */
.score-src {
  display: inline-block;
  padding: var(--space-px) var(--space-1);
  border-radius: var(--radius-xs);
  font-family: var(--font-mono);
  font-size: var(--text-2xs-size);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  border: var(--border-width) solid var(--border-subtle);
  margin-left: var(--space-1);
}
.score-src.llm {
  color: var(--accent-text);
  background: var(--accent-muted);
  border-color: var(--accent-border);
}
.score-src.kw {
  color: var(--text-tertiary);
  background: var(--neutral-chip-bg);
}

/* ─── §4 IOC enrichment side-panel ─────────────────────────────── */
.enrich-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: clamp(320px, 32vw, 460px);
  background: var(--bg-1);
  border-left: var(--border-width) solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: 250;
  display: flex; flex-direction: column;
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.enrich-panel.hidden { transform: translateX(100%); pointer-events: none; }
.enrich-panel .enrich-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  background: var(--bg-2);
}
.enrich-panel .enrich-titles { flex: 1 1 auto; min-width: 0; }
.enrich-panel .enrich-title {
  font-family: var(--font-mono); font-size: var(--text-sm-size);
  font-weight: var(--fw-semibold); color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.enrich-panel .enrich-close {
  background: transparent; border: 0; color: var(--text-secondary);
  font-size: var(--text-xl-size); cursor: pointer; line-height: 1;
  padding: 0 var(--space-1);
}
.enrich-panel .enrich-pivot {
  font-family: var(--font-mono); font-size: var(--text-2xs-size);
  letter-spacing: var(--tracking-caps); padding: var(--space-1) var(--space-2);
}
.enrich-panel .enrich-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--space-3);
}
.enrich-card {
  margin-bottom: var(--space-2);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-2);
}
.enrich-card summary {
  cursor: pointer;
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-xs-size); font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
  color: var(--text-secondary);
}
.enrich-card .enrich-name { flex: 1 1 auto; }
.enrich-status {
  font-family: var(--font-mono); font-size: var(--text-2xs-size);
  padding: var(--space-px) var(--space-1); border-radius: var(--radius-xs);
}
.enrich-status-ok  { background: var(--ok-bg);   color: var(--ok-text); }
.enrich-status-err { background: var(--crit-bg); color: var(--crit-text); }
.enrich-card-body {
  padding: var(--space-2) var(--space-3) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-sm-size);
}
.enrich-card-body .kv {
  display: flex; gap: var(--space-2); padding: var(--space-px) 0;
}
.enrich-card-body .kv .k {
  flex: 0 0 96px; color: var(--text-tertiary);
  font-family: var(--font-mono); font-size: var(--text-2xs-size);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.enrich-card-body .kv .v { flex: 1 1 auto; min-width: 0; word-break: break-all; }
.enrich-cert {
  padding: var(--space-1) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.enrich-cert:last-child { border-bottom: 0; }

/* ─── §5 Pivot graph panel ─────────────────────────────────────── */
.pivot-panel {
  position: fixed; inset: var(--space-4);
  z-index: 260;
  background: var(--bg-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column;
}
.pivot-panel.hidden { display: none; }
.pivot-panel .pivot-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.pivot-panel .pivot-title {
  flex: 1 1 auto;
  font-family: var(--font-sans); font-size: var(--text-md-size);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-heading);
  color: var(--text-primary);
}
.pivot-panel .pivot-close {
  background: transparent; border: 0; color: var(--text-secondary);
  font-size: var(--text-xl-size); cursor: pointer; line-height: 1;
}
.pivot-panel .pivot-legend {
  display: flex; gap: var(--space-3); align-items: center;
  font-size: var(--text-2xs-size);
  font-family: var(--font-mono); letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.pivot-panel .pivot-legend .dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: var(--space-1);
  vertical-align: middle;
}
.pivot-canvas { flex: 1 1 auto; position: relative; overflow: hidden; }
.pivot-svg { width: 100%; height: 100%; display: block; }
.pivot-edge {
  stroke: var(--border-default); stroke-width: 1; opacity: 0.55;
  vector-effect: non-scaling-stroke;
}
.pivot-edge-attributed { stroke: var(--stream-actor-text); opacity: 0.7; }
.pivot-edge-uses       { stroke: var(--text-tertiary); opacity: 0.5; }
.pivot-edge-seen_in    { stroke: var(--accent); opacity: 0.7; }
.pivot-node circle {
  stroke: var(--bg-1); stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
}
.pivot-node-ioc    circle { fill: var(--accent); }
.pivot-node-report circle { fill: var(--sev-high-text); }
.pivot-node-actor  circle { fill: var(--stream-actor-text); }
.pivot-node-ttp    circle { fill: var(--text-tertiary); }
.pivot-node.is-anchor circle { stroke: var(--accent); stroke-width: 3; }
.pivot-label {
  font-family: var(--font-sans); font-size: var(--text-2xs-size);
  fill: var(--text-secondary); pointer-events: none;
  user-select: none;
}
.pivot-node:hover .pivot-label { fill: var(--text-primary); }

/* ─── §6 Case-detail content (now hosted inside #drawer) ──────────
   The bottom-panel scaffold (.case-panel / .case-head / .case-close /
   .case-title / .case-body) was removed as part of the unification
   refactor — every detail kind (cases, actors, malware, CVEs) opens
   in the shared right-side #drawer instead. The remaining .case-*
   rules below are class-name-only and still apply to the detail
   markup wherever it lands (inside the drawer body now). */
.case-meta {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.case-meta label {
  display: flex; flex-direction: column; gap: var(--space-1);
  font-family: var(--font-sans); font-size: var(--text-2xs-size);
  font-weight: var(--fw-semibold); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-tertiary);
}
.case-meta select, .case-meta input {
  background: var(--bg-2); color: var(--text-primary);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-sm-size);
}
.case-section { margin-top: var(--space-3); }
.case-summary, .case-new-note {
  width: 100%; resize: vertical;
  background: var(--bg-2); color: var(--text-primary);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  font-family: var(--font-sans); font-size: var(--text-sm-size);
  margin-top: var(--space-1);
}
.case-note {
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
}
.case-note:last-of-type { border-bottom: 0; }
.case-note-body {
  margin-top: var(--space-1);
  color: var(--text-primary);
  font-size: var(--text-sm-size);
  white-space: pre-wrap;
}
.case-add-note {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin-top: var(--space-3);
}

/* ─── Drawer action buttons (Pivot, Open Case) ─────────────────── */
.drawer-actions {
  margin-left: auto; display: inline-flex; gap: var(--space-1);
}
.drawer-actions .btn {
  font-family: var(--font-mono); font-size: var(--text-2xs-size);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}

/* prefers-reduced-motion: kill remaining animations */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.0ms !important;
    scroll-behavior: auto !important;
  }
  .live-pulse, .dot-live { animation: none !important; }
  #map .ring { animation: none !important; opacity: 0; }
  .card { animation: none !important; }
}

/* ─── Lineage panel (PR-Lineage) ───────────────────────────────── */
/* Slide-in from the right like .enrich-panel, but wider — a 3-column
   layout (upstream | anchor | downstream) needs more horizontal real
   estate than a single-column enrichment readout. */
.lineage-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: clamp(560px, 56vw, 920px);
  background: var(--bg-1);
  border-left: var(--border-width) solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: 260;
  display: flex; flex-direction: column;
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.lineage-panel.hidden { transform: translateX(100%); pointer-events: none; }
.lineage-panel .lin-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-default);
}
.lineage-panel .lin-titles { flex: 1 1 auto; min-width: 0; }
.lineage-panel .lin-title {
  font-family: var(--mono); font-size: var(--text-sm-size);
  color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lineage-panel .lin-subtitle {
  font-size: var(--text-xs-size); text-transform: uppercase; letter-spacing: .04em;
}
.lineage-panel .lin-stats {
  font-size: var(--text-xs-size); font-family: var(--mono);
  white-space: nowrap;
}
.lineage-panel .lin-close {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--text-lg-size); cursor: pointer; padding: 0 var(--space-2);
}
.lineage-panel .lin-close:hover { color: var(--text); }

.lineage-panel .lin-cols {
  flex: 1 1 auto; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: var(--border-width); background: var(--border-default);
}
.lineage-panel .lin-col {
  background: var(--bg-1);
  display: flex; flex-direction: column; min-height: 0;
}
.lineage-panel .lin-col-h {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs-size); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
  border-bottom: var(--border-width) solid var(--border-default);
  background: var(--bg-2);
}
.lineage-panel .lin-col-body {
  flex: 1 1 auto; overflow-y: auto; padding: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-1);
}

.lineage-panel .lin-peer {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "kind label rel"
    "kind sub when";
  gap: 0 var(--space-2);
  padding: var(--space-2);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-xs);
  text-decoration: none; color: var(--text);
  font-size: var(--text-sm-size);
  background: var(--bg-2);
  cursor: pointer;
}
.lineage-panel .lin-peer:hover {
  border-color: var(--accent);
  background: var(--bg-1);
}
.lineage-panel .lin-kind {
  grid-area: kind;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: var(--text-xs-size);
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--bg-elevated); border-radius: var(--radius-xs);
  padding: var(--space-1) var(--space-2);
  align-self: center;
}
.lineage-panel .lin-label {
  grid-area: label;
  font-family: var(--mono); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lineage-panel .lin-rel {
  grid-area: rel;
  font-size: var(--text-xs-size); color: var(--text-muted);
  white-space: nowrap;
}
.lineage-panel .lin-sub {
  grid-area: sub;
  font-size: var(--text-xs-size); color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lineage-panel .lin-when {
  grid-area: when;
  font-size: var(--text-xs-size); color: var(--text-muted);
  font-family: var(--mono);
}

/* Anchor card sits in the centre column. Stacked layout — header row
   with kind chip + label, then sub lines below. Avoids the grid
   row-span gymnastics that left the chip overlapping the label when
   there were fewer sub lines than expected. */
.lineage-panel .lin-anchor-card {
  display: flex; flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border: var(--border-width) solid var(--accent);
  border-radius: var(--radius-xs);
  background: var(--bg-2);
}
.lineage-panel .lin-anchor-card .lin-anchor-head {
  display: flex; align-items: center; gap: var(--space-2);
}
.lineage-panel .lin-anchor-card .lin-kind {
  flex: 0 0 auto;
}
.lineage-panel .lin-anchor-card .lin-label {
  font-size: var(--text-md-size); font-weight: 600;
  white-space: normal; word-break: break-all;
  flex: 1 1 auto;
}

/* Per-kind accent strip on the kind chip — matches our chip-type taxonomy
   so colors stay coherent across the app. */
.lineage-panel .lin-kind-source .lin-kind { color: var(--text); border-left: 3px solid #5fd; }
.lineage-panel .lin-kind-report .lin-kind { color: var(--text); border-left: 3px solid #aaf; }
.lineage-panel .lin-kind-ioc    .lin-kind { color: var(--text); border-left: 3px solid #fc6; }
.lineage-panel .lin-kind-actor  .lin-kind { color: var(--text); border-left: 3px solid #f88; }
.lineage-panel .lin-kind-ttp    .lin-kind { color: var(--text); border-left: 3px solid #c8f; }
.lineage-panel .lin-kind-case   .lin-kind { color: var(--text); border-left: 3px solid #fb8; }

/* ─── PR-Provenance: TLP + confidence chips ─────────────────────── */
/* TLP colours match the FIRST 2.0 spec colour palette. We use a flat
   pill so the chip stays compact on table rows and in the header. */
.chip-tlp {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-family: var(--mono); font-size: var(--text-xs-size);
  font-weight: 600; letter-spacing: .04em;
  white-space: nowrap;
  border: var(--border-width) solid transparent;
}
.chip-tlp.tlp-clear { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-default); }
.chip-tlp.tlp-green { background: color-mix(in srgb, var(--ctp-green) 18%, var(--bg-elevated)); color: var(--ctp-green); border-color: color-mix(in srgb, var(--ctp-green) 25%, var(--bg-elevated)); }
.chip-tlp.tlp-amber { background: color-mix(in srgb, var(--ctp-peach) 18%, var(--bg-elevated)); color: var(--ctp-yellow); border-color: color-mix(in srgb, var(--ctp-peach) 25%, var(--bg-elevated)); }
.chip-tlp.tlp-amberstrict {
  background: color-mix(in srgb, var(--ctp-peach) 18%, var(--bg-elevated)); color: var(--ctp-yellow); border-color: var(--ctp-yellow);
  /* AMBER+STRICT gets a bordered look so it visually reads as
     "tighter" than plain AMBER. */
}
.chip-tlp.tlp-red { background: color-mix(in srgb, var(--ctp-red) 18%, var(--bg-elevated)); color: var(--ctp-maroon); border-color: color-mix(in srgb, var(--ctp-red) 25%, var(--bg-elevated)); }

.chip-conf {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  font-family: var(--mono); font-size: var(--text-xs-size); font-weight: 700;
}
.chip-conf.conf-h { background: rgba(80,255,160,.10); color: #5fd; }
.chip-conf.conf-m { background: rgba(160,160,255,.10); color: #aaf; }
.chip-conf.conf-l { background: rgba(255,120,120,.08); color: #f88; }

/* ─── PR-Decay: decay cell + suppressions panel ─────────────────── */
.decay {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--mono); font-size: var(--text-xs-size);
  font-variant-numeric: tabular-nums;
}
.decay-num { min-width: 24px; text-align: right; }
.decay-bar { height: 6px; border-radius: 3px; background: currentColor;
  display: inline-block; opacity: .65; }
.decay.decay-strong { color: #5fd; }
.decay.decay-fading { color: #fc6; }
.decay.decay-weak   { color: #fb8; }
.decay.decay-dead   { color: #f88; }

.supp-panel {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: clamp(420px, 36vw, 600px);
  background: var(--bg-1);
  border-left: var(--border-width) solid var(--border-default);
  box-shadow: var(--shadow-lg);
  z-index: 255;
  display: flex; flex-direction: column;
  transform: translateX(0);
  transition: transform var(--dur-base) var(--ease-out);
}
.supp-panel.hidden { transform: translateX(100%); pointer-events: none; }
.supp-panel .supp-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-default);
}
.supp-panel .supp-titles { flex: 1 1 auto; min-width: 0; }
.supp-panel .supp-title {
  font-family: var(--mono); font-size: var(--text-sm-size);
  color: var(--text); font-weight: 600;
}
.supp-panel .supp-subtitle {
  font-size: var(--text-xs-size); text-transform: uppercase; letter-spacing: .04em;
}
.supp-panel .supp-stats {
  font-size: var(--text-xs-size); font-family: var(--mono);
}
.supp-panel .supp-close {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--text-lg-size); cursor: pointer; padding: 0 var(--space-2);
}
.supp-panel .supp-body {
  flex: 1 1 auto; overflow-y: auto; padding: var(--space-2);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.supp-panel .supp-section-h {
  padding: var(--space-2) var(--space-2);
  font-size: var(--text-xs-size); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-muted);
}
.supp-panel .supp-section-body {
  display: flex; flex-direction: column; gap: var(--space-2);
}
.supp-panel .supp-row {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-xs);
  background: var(--bg-2);
}
.supp-panel .supp-row-head {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
}
.supp-panel .supp-urg {
  font-size: var(--text-xs-size); font-family: var(--mono);
  padding: 0 var(--space-2); border-radius: var(--radius-xs);
}
.supp-panel .supp-urg-expiring     { background: rgba(255,120,80,.12); color: #fb8; }
.supp-panel .supp-urg-stale_review { background: rgba(160,160,255,.10); color: #aaf; }
.supp-panel .supp-days { font-size: var(--text-xs-size); color: var(--text-muted); }
.supp-panel .supp-days-soon { color: #fc6; font-weight: 600; }
.supp-panel .supp-row-ioc {
  display: flex; gap: var(--space-2); align-items: baseline;
  font-size: var(--text-sm-size);
}
.supp-panel .supp-ioc-type {
  text-transform: uppercase; color: var(--text-muted);
  font-size: var(--text-xs-size); letter-spacing: .04em;
}
.supp-panel .supp-ioc-val { word-break: break-all; }
.supp-panel .supp-decay { margin-left: auto; color: var(--text-muted); font-size: var(--text-xs-size); }
.supp-panel .supp-just {
  font-size: var(--text-xs-size); color: var(--text-muted);
  font-style: italic; padding: var(--space-1) 0;
}
.supp-panel .supp-row-meta { font-size: var(--text-xs-size); }
.supp-panel .supp-row-actions {
  display: flex; gap: var(--space-2); margin-top: var(--space-1);
}
.supp-panel .supp-row-actions .btn {
  padding: var(--space-1) var(--space-2); font-size: var(--text-xs-size);
}

/* ─── PR-Hunt: hunt-row stats badges + Promote modal ────────────── */
.hunt-db-stats {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-2) 0;
  font-size: var(--text-xs-size);
  font-family: var(--mono);
  color: var(--text-muted);
  border-bottom: var(--border-width) dashed var(--border-default);
  margin-bottom: var(--space-2);
}
.hunt-db-stats .hunt-stat b {
  color: var(--text); font-weight: 600;
  margin-right: var(--space-1);
  text-transform: uppercase; letter-spacing: .03em;
  font-size: var(--text-xs-size);
}

.promote-modal {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ctp-crust) 55%, transparent);
  z-index: 270;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
}
.promote-modal.hidden { display: none; }
.promote-card {
  background: var(--bg-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  width: clamp(560px, 60vw, 880px);
  max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.promote-head, .promote-foot {
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
}
.promote-head { border-bottom: var(--border-width) solid var(--border-default); }
.promote-foot {
  border-top: var(--border-width) solid var(--border-default);
  justify-content: flex-end;
}
.promote-title {
  flex: 1 1 auto;
  font-family: var(--mono); font-weight: 600;
  font-size: var(--text-sm-size);
}
.promote-close {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--text-lg-size); cursor: pointer;
}
.promote-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
.promote-hunt-info {
  font-family: var(--mono); font-size: var(--text-xs-size);
  padding: var(--space-2); background: var(--bg-2); border-radius: var(--radius-xs);
}
.promote-row {
  display: flex; flex-direction: column; gap: var(--space-1);
}
.promote-row > span {
  font-size: var(--text-xs-size); text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted);
}
.promote-row select, .promote-row input {
  padding: var(--space-2);
  background: var(--bg-2); color: var(--text);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-xs);
  font-family: var(--mono); font-size: var(--text-sm-size);
}
.promote-preview-h {
  font-size: var(--text-xs-size); text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted);
  margin-top: var(--space-2);
}
.promote-preview {
  background: var(--bg-2); border-radius: var(--radius-xs);
  padding: var(--space-3); margin: 0;
  max-height: 320px; overflow: auto;
  font-family: var(--mono); font-size: var(--text-xs-size);
  color: var(--text); white-space: pre;
}
.btn.btn-primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn.btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs-size); }

/* ─── PR-CertScore: phish-score cell + breakdown ────────────────── */
.phish-score {
  display: inline-block;
  font-family: var(--mono); font-weight: 700;
  padding: 0 var(--space-2);
  border-radius: var(--radius-xs);
  min-width: 32px; text-align: right;
}
.phish-score.score-cell-crit { background: rgba(255, 80, 80, .18); color: #f88; }
.phish-score.score-cell-high { background: rgba(255, 160, 80, .15); color: #fb8; }
.phish-score.score-cell-med  { background: rgba(255, 200, 80, .15); color: #fc6; }
.phish-score.score-cell-low  { background: rgba(160, 160, 200, .10); color: var(--text-muted); }

.phish-breakdown {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-2);
  background: var(--bg-2);
  border-radius: var(--radius-xs);
}
.phish-bar {
  display: flex; gap: 2px;
  height: 22px;
}
.phish-seg {
  display: inline-flex; align-items: center; padding: 0 var(--space-1);
  font-family: var(--mono); font-size: var(--text-xs-size);
  background: var(--accent); color: var(--bg);
  white-space: nowrap; overflow: hidden;
  border-radius: 2px;
  /* Each segment also colours by factor so the bar is visually
     distinguishable when many factors contribute. */
}
.phish-seg-homoglyph_distance  { background: #f88; color: var(--bg-elevated); }
.phish-seg-brand_combinatorics { background: #fb8; color: var(--bg-elevated); }
.phish-seg-issuer_trust        { background: #aaf; color: var(--bg-elevated); }
.phish-seg-domain_age          { background: #fc6; color: var(--bg-elevated); }
.phish-seg-subdomain_depth     { background: #5fd; color: var(--bg-elevated); }
.phish-seg-tld_risk            { background: #c8f; color: var(--bg-elevated); }
.phish-todo-row { font-size: var(--text-xs-size); }
.phish-todo {
  display: inline-block; padding: 0 var(--space-1);
  background: var(--bg-elevated);
  border-radius: var(--radius-xs);
  font-family: var(--mono);
}
.phish-pivots {
  display: flex; align-items: center; gap: var(--space-2);
  flex-wrap: wrap;
}

/* ─── PR-Keyboard: shortcut help overlay ────────────────────────── */
.kb-help {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ctp-crust) 55%, transparent);
  z-index: 280;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-6);
}
.kb-help.hidden { display: none; }
.kb-help-card {
  background: var(--bg-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-sm);
  width: clamp(420px, 40vw, 560px);
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
}
.kb-help-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-default);
  font-family: var(--mono); font-weight: 600;
}
.kb-help-close {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--text-lg-size); cursor: pointer;
}
.kb-help-tbl {
  width: 100%; padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm-size); border-collapse: collapse;
}
.kb-help-tbl td { padding: var(--space-1) var(--space-2); vertical-align: top; }
.kb-help-tbl td:first-child { width: 110px; }
.kb-help-tbl kbd {
  display: inline-block;
  background: var(--bg-elevated);
  border: var(--border-width) solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  padding: 0 var(--space-2);
  font-family: var(--mono); font-size: var(--text-xs-size);
  font-weight: 600;
}

/* ─── PR-Search-DSL: autocomplete popover ──────────────────────── */
.search-suggest {
  position: absolute;
  z-index: 290;
  background: var(--bg-1);
  border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-lg);
  max-height: 260px; overflow-y: auto;
  font-family: var(--mono); font-size: var(--text-sm-size);
  min-width: 240px;
}
.search-suggest.hidden { display: none; }
.search-suggest-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
  gap: var(--space-3);
}
.search-suggest-item.is-active,
.search-suggest-item:hover {
  background: var(--bg-2);
}
.search-suggest-item .suggest-text { color: var(--text); }
.search-suggest-item .suggest-hint { font-size: var(--text-xs-size); }


/* ─── Brief item 2: noise widget + rule modal ─────────────────────── */
.noise-widget {
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-card, var(--bg-1));
  padding: var(--space-3);
  margin: var(--space-3) 0;
}
.noise-widget-empty { background: transparent; }
.noise-head {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin-bottom: var(--space-2);
}
.noise-title {
  font-weight: var(--fw-medium); text-transform: uppercase;
  letter-spacing: .08em; font-size: var(--text-sm-size);
}
.noise-hidden {
  font-family: var(--mono); font-size: var(--text-xs-size);
  color: var(--sev-high); padding: 0 var(--space-2);
  border-left: 1px solid var(--border);
}
.noise-tbl { width: 100%; }
.noise-tbl .noise-src code { font-family: var(--mono); }
.noise-tbl .noise-fp { color: var(--sev-critical); }
.noise-actions { display: flex; gap: var(--space-2); }
.btn-sm {
  font-size: var(--text-xs-size);
  padding: var(--space-1) var(--space-2);
}

/* Rule create / list dialog */
dialog.rule-modal {
  border: 1px solid var(--border);
  background: var(--bg-card, var(--bg-1));
  color: var(--text);
  border-radius: var(--radius-sm);
  max-width: 540px;
  padding: var(--space-4);
}
dialog.rule-list-modal { max-width: 800px; }
dialog.rule-modal::backdrop { background: color-mix(in srgb, var(--ctp-crust) 60%, transparent); }
.rule-form { display: flex; flex-direction: column; gap: var(--space-3); }
.rule-form h3 { margin: 0; }
.rule-form label {
  display: flex; flex-direction: column; gap: var(--space-1);
  font-size: var(--text-xs-size); color: var(--text-muted);
}
.rule-form input[type=text],
.rule-form input:not([type=submit]),
.rule-form textarea {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: var(--space-2);
  font-family: var(--mono); font-size: var(--text-sm-size);
}
.rule-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
}
.rule-form menu {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  margin: 0; padding: 0;
}
.rule-error { color: var(--sev-critical); font-size: var(--text-xs-size); }
.rule-row-actions { display: flex; gap: var(--space-1); }

/* ─── Brief item 3: choropleth + empty-layer self-explain ─────────── */
#layer-land path.country.choro-active {
  cursor: pointer;
  transition: fill 200ms ease, fill-opacity 200ms ease;
}
#layer-land path.country.choro-active:hover {
  filter: brightness(1.2);
}
.map-empty-explain {
  position: absolute;
  bottom: var(--space-3); left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card, var(--bg-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: var(--space-2) var(--space-3);
  font-family: var(--mono); font-size: var(--text-xs-size);
  color: var(--text-muted);
  pointer-events: none;
  z-index: 7;
}

/* ─── Brief item 4: hunts table additions ─────────────────────────── */
.chip-attck {
  font-family: var(--mono); font-size: var(--text-xs-size);
  background: rgba(255, 184, 61, 0.12);
  color: var(--sev-med, var(--ctp-yellow));
  border: 1px solid rgba(255, 184, 61, 0.3);
  border-radius: var(--radius-xs);
  padding: 0 var(--space-1);
  text-decoration: none;
  margin-right: var(--space-1);
}
.chip-attck:hover { filter: brightness(1.2); }
.hunt-attck { white-space: nowrap; }
.hunt-hits.has-hits { color: var(--sev-high); font-weight: var(--fw-medium); }
.hunt-actions {
  display: flex; gap: var(--space-1); flex-wrap: nowrap; align-items: center;
}
.hunt-dialect-menu {
  position: absolute;
  background: var(--bg-card, var(--bg-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  z-index: 400;
  display: flex; flex-direction: column;
  min-width: 140px;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ctp-crust) 40%, transparent);
}
.hunt-dialect-menu button {
  appearance: none; background: transparent; color: var(--text);
  border: 0; padding: var(--space-2) var(--space-3); text-align: left;
  cursor: pointer; font-size: var(--text-sm-size);
}
.hunt-dialect-menu button:hover { background: var(--bg-2); }

/* ─── Brief item 5: case detail extras ────────────────────────────── */
.cases-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border);
}
.cases-myq { display: flex; align-items: center; gap: var(--space-2); }
.chip-pivot {
  appearance: none; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); cursor: pointer;
  font-family: var(--mono); font-size: var(--text-xs-size);
  padding: 1px var(--space-2); border-radius: var(--radius-xs);
  margin-right: var(--space-1);
}
.chip-pivot:hover { background: var(--bg-3); }
.chip-pivot-arrow { color: var(--text-muted); margin-left: 2px; }

.att-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) 0; border-bottom: 1px solid var(--border);
}
.case-att-form {
  display: flex; gap: var(--space-2); margin-top: var(--space-2);
  align-items: center; flex-wrap: wrap;
}
.case-att-form input[type=file] { flex: 1 1 auto; }
.audit-tbl { font-size: var(--text-xs-size); width: 100%; }
.audit-tbl code { font-family: var(--mono); }
.audit-detail {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 220px; display: inline-block;
}
.case-brief-controls {
  display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap;
}
.case-brief-actions { margin-top: var(--space-2); display: flex; gap: var(--space-2); }
.case-brief-redact { display: flex; gap: var(--space-1); align-items: center; }
.case-brief-out { margin-top: var(--space-2); }

/* ─── Brief item 6: certs table additions ─────────────────────────── */
.certs-toolbar {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border);
}
.cert-brand-header td {
  background: var(--bg-2);
  padding: var(--space-1) var(--space-3);
  border-bottom: 1px solid var(--border);
}
.cert-why { font-size: var(--text-xs-size); color: var(--text-muted); }
dialog.takedown-modal {
  background: var(--bg-card, var(--bg-1));
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  max-width: 720px; padding: var(--space-4);
}
.takedown-form { display: flex; flex-direction: column; gap: var(--space-2); }
.takedown-form input, .takedown-form textarea {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); padding: var(--space-2);
  font-family: var(--mono); font-size: var(--text-sm-size);
}
.takedown-form menu {
  display: flex; gap: var(--space-2); justify-content: flex-end; margin: 0; padding: 0;
}

/* ─── Brief item 7: TLP STRICT modal + handling caveats ──────────── */
dialog.tlp-strict-modal {
  background: var(--bg-card, var(--bg-1));
  color: var(--text);
  border: 1px solid var(--sev-critical, var(--ctp-red));
  border-radius: var(--radius-sm);
  max-width: 540px; padding: var(--space-4);
}
dialog.tlp-strict-modal h3 { color: var(--sev-critical); margin: 0 0 var(--space-2); }
dialog.tlp-strict-modal textarea {
  width: 100%; background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); padding: var(--space-2);
  font-family: var(--mono); font-size: var(--text-sm-size);
}
dialog.tlp-strict-modal menu {
  display: flex; gap: var(--space-2); justify-content: flex-end; margin: var(--space-2) 0 0; padding: 0;
}
.ioc-handling { border-top: 1px solid var(--border); padding-top: var(--space-2); }
.handling-row { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-1) 0; }
.handling-row .caveat {
  font-family: var(--mono); font-size: var(--text-xs-size);
  background: var(--bg-2); padding: 2px var(--space-1);
  border-radius: var(--radius-xs);
}
.chip-tlp { font-family: var(--mono); font-size: var(--text-xs-size); padding: 0 var(--space-2); }
.chip-tlp.tlp-clear      { background: color-mix(in srgb, var(--ctp-text) 6%, transparent); }
.chip-tlp.tlp-green      { background: rgba(78,255,140,0.15); color: var(--sev-low, var(--ctp-green)); }
.chip-tlp.tlp-amber      { background: rgba(255,184,61,0.22); color: var(--sev-med, var(--ctp-yellow)); }
.chip-tlp.tlp-amber-strict { background: rgba(255,138,68,0.25); color: var(--sev-high, var(--ctp-peach)); border: 1px solid var(--sev-high, var(--ctp-peach)); }
.chip-tlp.tlp-red        { background: rgba(255,77,106,0.25); color: var(--sev-critical, var(--ctp-red)); border: 1px solid var(--sev-critical, var(--ctp-red)); }

/* ─── Brief item 8: theme variants — light + high-contrast ────────── */
:root.theme-light {
  /* Legacy in-app light theme — superseded by Catppuccin's
     data-theme="latte". Kept for backward-compat with any older link
     that toggles `theme-light`; the Catppuccin Latte palette below is
     equivalent and richer. */
  --bg: var(--bg-app);
  --bg-1: var(--bg-panel);
  --bg-2: var(--bg-elevated);
  --bg-3: var(--bg-hover);
  --bg-card: var(--bg-panel);
  --bg-hover: var(--bg-hover);
  --text: var(--text-primary);
  --text-muted: var(--text-muted);
  --text-dim: var(--text-muted);
  --border: var(--border-default);
}
:root.theme-light body { background: var(--bg); color: var(--text); }
:root.theme-light .stat .num { color: var(--text); }

:root.theme-hc {
  /* High-contrast — uses Catppuccin Crust as the base and Text as
     foreground for max legibility. WCAG AAA capable. */
  --bg: var(--ctp-crust);
  --bg-1: var(--ctp-crust);
  --bg-2: var(--ctp-mantle);
  --bg-3: var(--ctp-base);
  --bg-card: var(--ctp-mantle);
  --bg-hover: color-mix(in srgb, var(--ctp-text) 8%, transparent);
  --text: var(--ctp-text);
  --text-muted: var(--ctp-subtext1);
  --text-dim: var(--ctp-subtext0);
  --border: var(--ctp-text);
}
:root.theme-hc body { background: var(--bg); color: var(--text); }
:root.theme-hc .stat,
:root.theme-hc .data,
:root.theme-hc .noise-widget,
:root.theme-hc dialog {
  border-width: 2px;
}

/* ─── Brief item 9: provenance chain + challenge ─────────────────── */
.prov-chain {
  list-style: none; padding-left: 0;
  border-left: 2px solid var(--border);
  margin: var(--space-2) 0;
}
.prov-chain li {
  padding: var(--space-1) var(--space-3);
  position: relative;
}
.prov-chain li::before {
  content: ""; position: absolute; left: -7px; top: 12px;
  width: 12px; height: 12px;
  background: var(--bg-card, var(--bg-1));
  border: 2px solid var(--accent, var(--ctp-blue));
  border-radius: 50%;
}
.prov-step {
  display: inline-block; min-width: 80px;
  font-size: var(--text-xs-size); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.prov-actions { margin-top: var(--space-2); }

/* ─── Brief item 10: engagement view ──────────────────────────────── */
.engagement-totals {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3); margin: var(--space-3);
}
.eng-tot {
  background: var(--bg-card, var(--bg-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: var(--space-3);
  text-align: center;
}
.eng-tot-warn { border-color: var(--sev-high, var(--ctp-peach)); }
.eng-tot-warn .eng-num { color: var(--sev-high, var(--ctp-peach)); }
.eng-num { font-size: var(--text-2xl-size, 28px); font-weight: var(--fw-medium); }
.eng-lbl {
  font-size: var(--text-xs-size); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.data-engagement .eng-warn { color: var(--sev-high, var(--ctp-peach)); font-weight: var(--fw-medium); }

/* ─── R1: KPI sparkline + 2σ-aware arrows ─────────────────────────── */
.kpi-spark-slot {
  display: block; margin-top: 2px;
  width: 80px; height: 18px;
}
.kpi-spark { width: 80px; height: 18px; display: block; }
.spark-bar { fill: var(--accent, var(--ctp-blue)); fill-opacity: 0.45; }
.spark-bar-today { fill: var(--accent, var(--ctp-blue)); fill-opacity: 1.0; }
.kpi-baseline {
  display: flex; gap: var(--space-1); align-items: baseline;
  font-family: var(--mono); font-size: var(--text-xs-size);
  letter-spacing: 0.02em;
}
.kpi-baseline .kpi-arrow { font-weight: var(--fw-medium); }
.kpi-baseline.kpi-arrow-down   { color: var(--sev-low,  var(--ctp-green)); }
.kpi-baseline.kpi-arrow-stable { color: var(--text-dim); }
.kpi-baseline.kpi-arrow-up     { color: var(--sev-med,  var(--ctp-yellow)); }
.kpi-baseline.kpi-arrow-surge  { color: var(--sev-critical, var(--ctp-red)); }
.kpi-baseline .kpi-base { color: var(--text-muted); margin-left: var(--space-1); }
.kpi-baseline.kpi-warming { opacity: .65; }
.kpi-baseline.kpi-warming::after { content: " ⚠"; color: var(--sev-med, var(--ctp-yellow)); }

/* ─── R10: engagement decision-grade additions ─────────────────────── */
.eng-tot { display: flex; flex-direction: column; gap: var(--space-1); }
.eng-col-spark { width: 80px; height: 18px; align-self: center; }
.eng-changed {
  margin: var(--space-3); padding: var(--space-3);
  border-left: 3px solid var(--accent, var(--ctp-blue));
  background: var(--bg-2);
  border-radius: var(--radius-xs);
}
.eng-changed ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); }
.eng-changed li.eng-changed-good { color: var(--sev-low, var(--ctp-green)); }
.eng-changed li.eng-changed-bad  { color: var(--sev-high, var(--ctp-peach)); }
.eng-noise-panel { margin: var(--space-3); }
.eng-noise-panel .data { width: 100%; }
.eng-breach-bar {
  display: inline-block; vertical-align: middle; height: 8px;
  margin-left: var(--space-2);
}
.eng-breach-seg {
  display: inline-block; height: 8px; border-radius: 2px;
}
.eng-breach-other { background: var(--sev-high, var(--ctp-peach)); }

/* ─── R2: dissemination dialog additions ─────────────────────────── */
dialog.tlp-disseminate-modal { max-width: 720px; }
dialog.tlp-disseminate-modal label {
  display: flex; flex-direction: column; gap: var(--space-1);
  margin: var(--space-2) 0;
}
dialog.tlp-disseminate-modal input,
dialog.tlp-disseminate-modal textarea {
  background: var(--bg-2); color: var(--text);
  border: 1px solid var(--border); padding: var(--space-2);
  font-family: var(--mono); font-size: var(--text-sm-size);
}
dialog.tlp-disseminate-modal .tlp-ack {
  flex-direction: row; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
}
dialog.tlp-disseminate-modal .tlp-preview {
  margin-top: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  background: var(--bg-2);
  padding: var(--space-2);
}
dialog.tlp-disseminate-modal .tlp-preview summary {
  font-size: var(--text-sm-size); cursor: pointer;
}
dialog.tlp-disseminate-modal .tlp-preview pre {
  background: var(--bg-1); padding: var(--space-2); margin-top: var(--space-1);
  font-size: var(--text-xs-size); max-height: 220px; overflow: auto;
}

/* ─── R4: hunt test-fire modal ─────────────────────────────────────── */
dialog.hunt-fire-modal {
  background: var(--bg-card, var(--bg-1));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  max-width: 880px; padding: var(--space-4);
}
dialog.hunt-fire-modal .hunt-fire-tbl { width: 100%; }
dialog.hunt-fire-modal .hunt-fire-tbl td { font-size: var(--text-sm-size); }
dialog.hunt-fire-modal menu {
  display: flex; gap: var(--space-2); justify-content: flex-end;
  margin: var(--space-2) 0 0; padding: 0;
}

/* ─── R5: SLA panel ─────────────────────────────────────────────── */
.case-sla-row { display: flex; gap: var(--space-2); align-items: center; margin: var(--space-1) 0; }
.case-sla-pause-reason {
  flex: 1 1 auto;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
  padding: var(--space-1) var(--space-2);
  font-family: var(--mono); font-size: var(--text-sm-size);
}
.chip.sla-paused { background: rgba(78,161,255,0.22); color: var(--accent, var(--ctp-blue)); }
.chip.sla-warn   { background: rgba(255,184,61,0.22); color: var(--sev-med, var(--ctp-yellow)); }
.chip.sla-overdue { background: rgba(255,77,106,0.20); color: var(--sev-critical, var(--ctp-red)); }
.case-sla-breach select {
  background: var(--bg-2); color: var(--text); border: 1px solid var(--border);
  padding: var(--space-1) var(--space-2);
}

/* ─── R6: auto-rule suggestion badge ──────────────────────────────── */
.noise-auto-badge {
  display: inline-block; margin-left: var(--space-2);
  padding: 1px 6px; border-radius: var(--radius-xs);
  background: rgba(255, 184, 61, 0.22);
  color: var(--sev-med, var(--ctp-yellow));
  border: 1px solid rgba(255, 184, 61, 0.4);
  font-family: var(--mono); font-size: var(--text-xs-size); letter-spacing: .04em;
}
.noise-auto td { background: rgba(255, 184, 61, 0.04); }

/* ─── R7: brand-cert structured-factor sort affordance ────────────── */
[data-cert-sort] { cursor: pointer; user-select: none; }
[data-cert-sort]:hover { background: var(--bg-2); }
[data-cert-sort].cert-sort-active { color: var(--accent, var(--ctp-blue)); }
[data-cert-sort].cert-sort-active::after { content: " ↕"; }

/* (.feed-hunt-fires-head rule deleted — right-rail hunt-fires panel
   was removed by user request. The .hunt-fire-card class below is
   still used by the schedule-modal dialog and stays.) */
.hunt-fire-card {
  border-left: 3px solid var(--accent, var(--ctp-blue));
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  background: var(--bg-card, var(--bg-1));
}
.hunt-fire-card header {
  display: flex; gap: var(--space-2); align-items: center;
  margin-bottom: var(--space-1);
}
.hunt-fire-title { flex: 1 1 auto; font-weight: var(--fw-medium); }
.hunt-fire-meta {
  display: flex; gap: var(--space-2); align-items: center;
  font-size: var(--text-xs-size); margin-bottom: var(--space-1);
}
.hunt-fire-hits.has-hits { color: var(--sev-high, var(--ctp-peach)); font-weight: var(--fw-medium); }
.hunt-fire-line {
  font-family: var(--mono); font-size: var(--text-xs-size);
  color: var(--text-muted); padding: var(--space-1) 0;
  border-top: 1px solid var(--border);
}
.hunt-fire-actions { margin-top: var(--space-1); }
dialog.hunt-schedule-modal { max-width: 520px; }

/* ─── P2: tab-aware facet rail ─────────────────────────────────────── */
.sec-category-rail.rail-hidden {
  opacity: 0.45;
}
.sec-category-rail.rail-hidden h2::after {
  content: " (n/a)";
  color: var(--text-muted);
  font-size: var(--text-xs-size);
  text-transform: none;
  letter-spacing: 0;
}
.sec-category-rail.rail-hidden label.facet-chip-row {
  pointer-events: none;
}

/* ─── P4 / P5 polish ──────────────────────────────────────────────── */
.audit-by-kind .audit-kind-row td { font-size: var(--text-sm-size); }
.audit-chrono { margin-top: var(--space-2); }
.audit-chrono summary { cursor: pointer; color: var(--text-muted); }
.eng-changed-arrow {
  display: inline-block; min-width: 14px; text-align: center;
  margin-right: 2px; font-weight: var(--fw-medium);
}

/* ─── PR30: Actor Detail panel + Tracing tab ──────────────────────── */
/* .actor-panel layout removed with the bottom-panel cleanup; the
   actor detail view now uses #drawer. .actor-title is still applied
   to the title element inside the drawer scaffold. */
.actor-head .actor-title { font-size: var(--text-lg-size); }
.actor-tabs {
  display: flex; gap: var(--space-1);
  padding: 0 var(--space-3);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.actor-tab {
  appearance: none; background: transparent; color: var(--text-muted);
  border: 0; padding: var(--space-2) var(--space-3);
  cursor: pointer; font-size: var(--text-sm-size);
  border-bottom: 2px solid transparent;
}
.actor-tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent, var(--ctp-blue));
}
.actor-tab:hover { background: var(--bg-2); }
.actor-overview { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
.actor-meta {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2);
  padding: var(--space-2); border: 1px solid var(--border);
  border-radius: var(--radius-xs);
}
.actor-section { padding: var(--space-3); border-bottom: 1px solid var(--border); }
.actor-section h3 { margin: 0 0 var(--space-2); font-size: var(--text-sm-size); }
.actor-cooc {
  display: flex; gap: var(--space-2); align-items: baseline;
  padding: var(--space-1) 0; border-bottom: 1px solid var(--border);
}
.actor-tracing {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3);
}
.actor-tracing-graph svg.alias-graph-svg { background: var(--bg-2); border-radius: var(--radius-xs); }
.actor-tracing-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); align-items: center; }
.actor-untrace-toggle { display: inline-flex; gap: var(--space-1); align-items: center; }
.attr-tbl { width: 100%; font-size: var(--text-sm-size); }
.attr-tbl .attr-row-challenged td { background: rgba(255, 184, 61, 0.06); }
.attr-tbl .attr-row-retracted td { color: var(--text-dim); text-decoration: line-through; }
.chip-attr-active     { background: rgba(78,255,140,0.15);  color: var(--sev-low, var(--ctp-green)); }
.chip-attr-challenged { background: rgba(255,184,61,0.22);  color: var(--sev-med, var(--ctp-yellow)); }
.chip-attr-retracted  { background: rgba(255,77,106,0.15);  color: var(--sev-critical, var(--ctp-red)); }
.untrace-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3);
  padding: var(--space-2);
}
.untrace-grey { opacity: 0.45; text-decoration: line-through; }

/* ─── PR31/32: TTP heatmap + coverage + intel feed ────────────────── */
.ttp-heatmap {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(120px, 1fr);
  gap: var(--space-2);
  overflow-x: auto;
  padding: var(--space-2);
}
.ttp-col { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.ttp-col-head {
  font-size: var(--text-xs-size); color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border); padding-bottom: 2px;
}
.ttp-cell {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px; border-radius: 2px; font-size: var(--text-xs-size);
  border: 1px solid transparent; cursor: default;
}
.ttp-cell.rec-hot   { border-color: var(--sev-critical, var(--ctp-red)); }
.ttp-cell.rec-warm  { border-color: var(--sev-med, var(--ctp-yellow)); }
.ttp-cell.rec-cold  { border-color: var(--text-dim); opacity: 0.7; }
.ttp-cell.rec-none  { opacity: 0.5; }
.coverage-summary { display: flex; gap: var(--space-3); padding: var(--space-2); }
.coverage-tbl tbody tr:hover { background: var(--bg-2); }
.coverage-details { margin-top: var(--space-3); }
.coverage-details summary { cursor: pointer; padding: var(--space-1); }
.intel-feed-tbl { font-size: var(--text-sm-size); }
.infra-row.infra-sinkholed { opacity: 0.7; }
.infra-row.infra-expired   { opacity: 0.5; text-decoration: line-through; }

/* ─── PR33: actor head action bar + brief output dialog ──────────── */
.actor-head { display: flex; align-items: center; gap: var(--space-3); }
.actor-head .actor-title-wrap { flex: 1 1 auto; }
.actor-head-actions {
  display: flex; gap: var(--space-2); align-items: center;
}
.actor-head-actions .btn { white-space: nowrap; }
dialog.actor-brief-out menu { gap: var(--space-2); flex-wrap: wrap; }

/* ─── PR35: malware tab + family detail panel ────────────────────── */
.data-malware tbody tr:hover { background: var(--bg-2); cursor: pointer; }
.data-malware .chip { font-family: var(--mono); font-size: var(--text-xs-size); }
#malware-panel { /* inherits .actor-panel */ }

/* ─── PR36: CVE tab + KEV banner ──────────────────────────────────── */
.data-cves tbody tr:hover { background: var(--bg-2); cursor: pointer; }
.kev-chip {
  background: rgba(255, 184, 61, 0.22);
  color: var(--sev-med, var(--ctp-yellow));
  border: 1px solid rgba(255, 184, 61, 0.5);
  font-family: var(--mono); font-size: var(--text-xs-size);
}
.kev-banner {
  background: rgba(255, 184, 61, 0.22);
  border-left: 3px solid var(--sev-med, var(--ctp-yellow));
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  font-weight: var(--fw-medium);
}
.poc-list { padding-left: var(--space-4); }
.poc-list li { margin: var(--space-1) 0; }

/* PR38 — sample-detail drawer (related samples + vendor pivot) */
dialog.sample-drawer {
  width: min(880px, 92vw);
  max-height: 86vh;
}
.sample-drawer .sample-drawer-form { gap: var(--space-3); }
.sample-drawer .sample-target {
  padding: var(--space-2) var(--space-3);
  background: var(--bg-tier-2, color-mix(in srgb, var(--ctp-text) 3%, transparent));
  border-radius: var(--radius-2);
}
.sample-drawer .sample-sec { margin-top: var(--space-3); }
.sample-drawer .sample-sec h4 {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm-size);
  color: var(--text-secondary, var(--text-secondary));
}
.sample-drawer .sample-vendor-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.sample-mb-card {
  padding: var(--space-2) var(--space-3);
  background: rgba(78, 161, 255, 0.08);
  border-left: 3px solid var(--ctp-blue);
  border-radius: var(--radius-2);
  margin-top: var(--space-2);
  font-size: var(--text-xs-size);
}
.sample-mb-card div { margin: 2px 0; }
.data-samples tbody tr { cursor: pointer; }
.data-samples tbody tr:hover { background: color-mix(in srgb, var(--ctp-text) 4%, transparent); }

/* PR39 — Research workspace ─────────────────────────────────────── */
.research-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
  align-items: flex-start;
}
@media (max-width: 1100px) {
  .research-grid { grid-template-columns: 1fr; }
}
.research-col {
  border: 1px solid var(--border-1, color-mix(in srgb, var(--ctp-text) 6%, transparent));
  border-radius: var(--radius-2);
  padding: var(--space-3);
  background: var(--bg-tier-1, color-mix(in srgb, var(--ctp-text) 2%, transparent));
}
.research-col-h {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-2);
}
.research-col-h h3 { margin: 0; font-size: var(--text-sm-size); }

.watchlist {
  border: 1px solid var(--border-1, color-mix(in srgb, var(--ctp-text) 6%, transparent));
  border-radius: var(--radius-2);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
}
.watchlist > summary {
  cursor: pointer;
  display: flex; align-items: center; gap: var(--space-2);
}
.watchlist-dot {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; flex-shrink: 0;
}
.watchlist-items {
  margin-top: var(--space-2);
  display: flex; flex-direction: column; gap: 4px;
}
.watchlist-item {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 4px 8px;
  background: color-mix(in srgb, var(--ctp-text) 3%, transparent);
  border-radius: var(--radius-1);
  font-size: var(--text-xs-size);
}
.unpin-btn { margin-left: auto; }
.research-del-wl { margin-left: auto; padding: 0 6px; }

.hyp-kanban {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
  overflow-x: auto;
}
@media (max-width: 1400px) {
  .hyp-kanban { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 700px) {
  .hyp-kanban { grid-template-columns: 1fr; }
}
.hyp-col {
  background: var(--bg-tier-2, color-mix(in srgb, var(--ctp-text) 3%, transparent));
  border-radius: var(--radius-2);
  padding: var(--space-2);
  min-height: 200px;
}
.hyp-col-h {
  font-size: var(--text-xs-size);
  font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: var(--space-2);
}
.hyp-col-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%;
}
.hyp-card {
  background: var(--bg-tier-1, color-mix(in srgb, var(--ctp-text) 5%, transparent));
  border-radius: var(--radius-1);
  padding: var(--space-2);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: background 0.15s;
}
.hyp-card:hover { background: color-mix(in srgb, var(--ctp-text) 8%, transparent); }
.hyp-card-title { font-size: var(--text-sm-size); margin-bottom: 4px; }
.hyp-empty { padding: var(--space-3); text-align: center; }

.hyp-detail .hyp-section { margin-top: var(--space-3); }
.hyp-detail .hyp-section h4 { margin-bottom: var(--space-1); font-size: var(--text-sm-size); }
.hyp-detail .hyp-body {
  white-space: pre-wrap; padding: var(--space-2);
  background: color-mix(in srgb, var(--ctp-text) 4%, transparent);
  border-radius: var(--radius-1);
  font-family: var(--mono);
  font-size: var(--text-xs-size);
}
.hyp-detail .hyp-log {
  list-style: none; padding-left: 0;
  max-height: 220px; overflow-y: auto;
}
.hyp-detail .hyp-log li {
  padding: 4px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--ctp-text) 4%, transparent);
  font-size: var(--text-xs-size);
  display: flex; gap: 6px; flex-wrap: wrap;
}
.hyp-transition-row {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}

/* Pin-anywhere button — small chip the detail panels can drop in. */
.btn-pin {
  font-size: var(--text-xs-size);
  padding: 4px 10px;
}


/* ════════════════════════════════════════════════════════════════════
   ARGUS REDESIGN LAYER
   Bloomberg-Terminal × Linear visual language. Loaded last so it wins
   the cascade for any conflicting element-level styles. Every value
   here references a token from tokens.css; no raw hex.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Header — fixed at --hdr-height to fit 32px KPI numerals ─── */
#hdr {
  position: fixed !important;
  top: 0; left: 0; right: 0;
  z-index: 41;
  height: var(--hdr-height) !important;
  min-height: var(--hdr-height);
  padding: 0 24px !important;
  display: grid !important;
  /* Brand fixed at 240 px, meta auto-sizes to its actual content
     (LIVE pill + star + theme picker + UTC/LAST stack), KPI strip
     takes whatever's left and scrolls horizontally if a very narrow
     viewport ever pinches it. minmax(0, 1fr) lets the KPI track
     shrink below its content width — without that, the KPI tiles'
     min-content would balloon past the column and bleed into meta. */
  grid-template-columns: 240px minmax(0, 1fr) auto;
  grid-template-areas: "brand kpi meta";
  align-items: stretch;
  gap: 16px;
  background: var(--bg-panel) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  overflow: hidden;
}
/* Reserve space below the fixed header. sys-health element fully removed
   from DOM, so the body's padding-top is just the header height. */
body { padding-top: var(--hdr-height); }
#stale-banner, .stale-banner { display: none !important; }
#hdr .brand {
  grid-area: brand;
  padding: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px;
  position: relative;
}
#hdr .stats        { grid-area: kpi; }
#hdr #sidebar-toggle  { grid-area: brand; }
#hdr #feed-slide-toggle { display: none !important; }
#hdr #kpi-more-btn,
#hdr .live-indicator,
#hdr #last-new-pill,
#hdr #clock {
  grid-area: auto !important;
  margin-left: 0 !important;
}
#hdr::after { display: none; }
.hdr-meta {
  grid-area: meta;
  display: flex; align-items: center; gap: 8px;
  height: 100%;
  padding: 8px 0;
  justify-content: flex-end;
  overflow: hidden;
}
.hdr-meta > * { flex: 0 0 auto; }

/* Force LIVE pill and LAST pill onto the same 32px centerline as the
   star button and theme-picker dropdown. Without this, the two
   "stretchy" pills used to fill ~80px of vertical space because
   .hdr-meta was align-items: stretch; the star button (28-32px) and
   the select (32px) sat at the top, the pills sat full-height —
   visually misaligned. Now everything centers on a single 32px row. */
.hdr-meta .live-indicator,
.hdr-meta #last-new-pill {
  height: 32px;
  padding-top: 0;
  padding-bottom: 0;
  display: flex;
  align-items: center;
}

/* Stack wrapper: small always-on UTC clock above the LAST-update pill.
   2px gap keeps the clock visually attached without crowding the pill. */
.last-new-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}
.live-clock {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
  padding: 0 12px;
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 6px;
  line-height: 1;
}
.live-clock .lc-label {
  color: var(--text-muted);
}
.live-clock #live-clock-time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
.hdr-meta-item {
  display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  font-size: 11px;
}
.hdr-meta-item .lbl {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
@media (max-width: 1280px) {
  #hdr {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "brand kpi meta";
    min-height: 64px;
  }
  .hdr-meta { min-width: 220px; gap: 10px; }
  /* Collapse the "Last update" stack (clock + pill) under the header
     at narrow viewports. The whole .last-new-stack moves so the small
     UTC clock stays visually attached to the pill. */
  .hdr-meta .last-new-stack {
    position: absolute; right: 20px; top: 64px;
  }
  .hdr-meta #last-new-pill {
    background: var(--bg-elevated); padding: 2px 8px;
  }
}
#hdr > * { min-width: 0; }

/* Logo / brand */
.brand {
  display: flex; align-items: center; gap: var(--space-2);
  border-right: 1px solid var(--border-subtle);
  padding-right: var(--space-3);
}
.logo {
  font-size: var(--text-md-size);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin: 0;
}
.brand .tagline {
  font-size: 11px;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.brand-text { display: flex; flex-direction: column; gap: 2px; }
#live-dot { width: 6px; height: 6px; }

/* ─── KPI cards — content-aware sizing ─────────────────────────────
   Each tile sizes to its own value. The previous `flex: 1 1 0` with a
   132–220px clamp forced equal widths that clipped longer values like
   "186/186" or "51 (11)" on the SOURCES / SUPPLY tiles. Now: shrink
   only when there isn't room, never below the value's intrinsic width,
   and on very narrow viewports let the strip scroll horizontally
   instead of clipping characters. */
.stats {
  display: flex !important;
  flex-wrap: nowrap !important;
  /* overflow-x: auto is the last-resort safety valve; on ≥1280px
     viewports there's plenty of room and no scrollbar appears. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  gap: var(--space-2) !important;
  padding-left: 0 !important;
  align-items: stretch;
}
button.stat,
.stat {
  /* Content-aware sizing: shrink-to-fit horizontally, but never below
     the actual content width (so values are never clipped). max-width
     is removed so high-magnitude values keep rendering at full width. */
  flex: 0 1 auto !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "label  spark"
    "value  delta";
  gap: 2px var(--space-2);
  align-items: end;
  padding: var(--space-2) var(--space-3) !important;
  padding-inline: var(--space-3) !important;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
button.stat:hover,
.stat:hover { background: var(--bg-3); border-color: var(--border-default); }
button.stat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.stat .lbl {
  grid-area: label;
  font-size: 11px !important;
  letter-spacing: var(--tracking-label) !important;
  text-transform: uppercase;
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat .num {
  grid-area: value;
  /* Numbers are data and must NEVER be replaced with an ellipsis.
     Drop overflow:hidden / text-overflow:ellipsis from this layer
     and let the tile expand to its content width (parent .stat now
     uses min-width: max-content). */
  font-size: clamp(20px, 2vw, 32px) !important;
  font-weight: var(--fw-medium);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -0.02em;
  color: var(--text-primary) !important;
  line-height: 1 !important;
  margin: 0 !important;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
.stat .delta {
  grid-area: delta;
  font-family: var(--font-mono);
  font-size: var(--text-xs-size);
  margin: 0;
  align-self: end;
  padding-bottom: 2px;
}
.stat .baseline { display: none; }   /* second-row baseline noise → hide */
.stat .freshness { display: none; }  /* freshness already in tooltip */
.stat .kpi-spark-slot {
  grid-area: spark;
  align-self: end;
  height: 18px;
  display: flex; align-items: end; justify-content: flex-end;
}
.stat .delta.up   { color: var(--ok-text); }
.stat .delta.down { color: var(--crit-text); }
.stat .delta.flat { color: var(--text-tertiary); }
.stat .delta::before { content: ""; }   /* shape carried by ↑↓ glyph */
@media (max-width: 1280px) {
  /* No per-rule font-size override — the clamp() above already scales
     down to 20px at narrow viewports while keeping a consistent ramp
     across all seven tiles. Keeping a separate 18px rule here was the
     bug that made tiles look inconsistent (one stepped, others didn't). */
  button.stat, .stat { padding: 6px var(--space-2) !important; }
}

/* "More" KPI overflow: same card silhouette, slimmer. */
.kpi-more-btn {
  flex: 0 0 auto;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
}

/* ─── Live indicator + last-update + clock — meta cluster ────────── */
.live-indicator {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm-size) !important;
  color: var(--text-secondary);
  border-radius: var(--radius-md) !important;
  padding: var(--space-1) var(--space-3) !important;
  height: 32px;
}
.live-indicator .live-label {
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-right: var(--space-1);
}
.live-indicator .live-epm {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.live-pulse { background: var(--ok-solid) !important; }
.live-indicator.stalled .live-pulse { background: var(--crit-solid) !important; }
@media (prefers-reduced-motion: reduce) {
  .live-pulse, .live-pulse::after { animation: none !important; }
}

#last-new-pill, .last-new {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-size: 11px !important;
  color: var(--text-tertiary);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  height: 32px; line-height: 22px;
}

#clock {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-1) var(--space-3) !important;
  height: 32px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
#clock .lbl {
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  color: var(--text-tertiary);
  margin-right: 6px;
}
#clock time { color: var(--text-primary); font-size: var(--text-sm-size); }

/* (System health strip rules deleted — element no longer in DOM.) */
body { position: relative; }

/* ─── Sidebar — 8px grid + filled chip rows ──────────────────────── */
#sidebar {
  background: var(--bg-1);
  border-right: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-2);
  gap: var(--space-3);
}
#sidebar .sec {
  padding: 0 var(--space-2);
}
#sidebar .sec h2 {
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin: 0 0 var(--space-2) 0;
  display: flex; align-items: center; justify-content: space-between;
}

/* Severity / category rows: filled chip with right-aligned count. */
.facet-chip-row {
  display: grid !important;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-2);
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.facet-chip-row:hover { background: var(--bg-2); }
.facet-chip-row .pill,
.facet-chip-row .cat-pill {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}
.facet-chip-row .facet-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs-size);
  font-variant-numeric: tabular-nums;
  color: var(--text-tertiary);
  min-width: 28px;
  text-align: right;
}
/* Active state — the "checked" sibling drives a tinted background. */
.facet-chip-row:has(input:checked) {
  background: var(--bg-2);
  border-left-color: var(--accent);
}
.facet-chip-row:has(input:checked) .pill,
.facet-chip-row:has(input:checked) .cat-pill { color: var(--text-primary); }

/* HK·SENTINEL — sidebar facet rows = checkbox + filled colored chip
   containing letter/glyph + label, with count outside the chip. */
.facet-chip-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 4px 8px 4px 4px !important;
  margin-bottom: 6px !important;
  background: transparent !important;
  cursor: pointer;
  grid-template-columns: none !important;
}
.facet-chip-row:hover { background: color-mix(in srgb, var(--ctp-sapphire) 4%, transparent) !important; }
.facet-chip-row input[type="checkbox"] {
  margin: 0 !important;
  width: 14px; height: 14px;
  flex: 0 0 auto;
  accent-color: var(--accent-cyan);
  cursor: pointer;
}
/* Letter prefix outside the chip, in muted mono. */
.facet-letter {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  width: 9px;
  text-align: center;
  flex: 0 0 auto;
}
/* The filled chip itself — coloured by severity/category, full row width. */
.facet-chip-row .pill,
.facet-chip-row .cat-pill {
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  border: 1px solid transparent !important;
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
}
/* Glyph sits at the right edge of the chip via the .facet-glyph span
   placed AFTER the pill in the row — pull it inside the chip visually
   by making it overlap. */
.facet-glyph {
  font-family: var(--font-mono);
  font-size: 11px;
  width: auto;
  margin-left: -22px;        /* tuck the glyph inside the chip's right edge */
  padding-right: 8px;
  color: inherit;
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.facet-chip-row .facet-count {
  color: var(--text-secondary) !important;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  text-align: right;
  min-width: 28px;
  flex: 0 0 auto;
}

/* Severity chip fills — solid filled box per target. Per-row coloring
   when the row's checkbox is checked. */
.facet-chip-row:has(input[data-sev="critical"]:checked) .pill {
  background: color-mix(in srgb, var(--ctp-red) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-red) 55%, transparent) !important;
  color: var(--severity-critical) !important;
}
.facet-chip-row:has(input[data-sev="critical"]:checked) .facet-glyph { color: var(--severity-critical) !important; }
.facet-chip-row:has(input[data-sev="high"]:checked) .pill {
  background: color-mix(in srgb, var(--ctp-peach) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-peach) 55%, transparent) !important;
  color: var(--severity-high) !important;
}
.facet-chip-row:has(input[data-sev="high"]:checked) .facet-glyph { color: var(--severity-high) !important; }
.facet-chip-row:has(input[data-sev="med"]:checked) .pill {
  background: color-mix(in srgb, var(--ctp-yellow) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-yellow) 55%, transparent) !important;
  color: var(--severity-medium) !important;
}
.facet-chip-row:has(input[data-sev="med"]:checked) .facet-glyph { color: var(--severity-medium) !important; }
.facet-chip-row:has(input[data-sev="low"]:checked) .pill {
  background: color-mix(in srgb, var(--ctp-sapphire) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-sapphire) 55%, transparent) !important;
  color: var(--ctp-sapphire) !important;
}
.facet-chip-row:has(input[data-sev="low"]:checked) .facet-glyph { color: var(--ctp-sapphire) !important; }

/* Category chip fills — distinct colors per data-cat. */
.facet-chip-row:has(input[data-cat="A"]:checked) .cat-pill {
  background: color-mix(in srgb, var(--ctp-green) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-green) 55%, transparent) !important;
  color: var(--ctp-green) !important;
}
.facet-chip-row:has(input[data-cat="B"]:checked) .cat-pill {
  background: color-mix(in srgb, var(--ctp-mauve) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-mauve) 55%, transparent) !important;
  color: var(--ctp-mauve) !important;
}
.facet-chip-row:has(input[data-cat="C"]:checked) .cat-pill {
  background: color-mix(in srgb, var(--ctp-yellow) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-yellow) 55%, transparent) !important;
  color: var(--severity-medium) !important;
}
.facet-chip-row:has(input[data-cat="D"]:checked) .cat-pill {
  background: color-mix(in srgb, var(--ctp-sapphire) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-sapphire) 55%, transparent) !important;
  color: var(--ctp-sapphire) !important;
}
.facet-chip-row:has(input[data-cat="E"]:checked) .cat-pill {
  background: color-mix(in srgb, var(--ctp-red) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-red) 55%, transparent) !important;
  color: var(--severity-critical) !important;
}
.facet-chip-row:has(input[data-cat="G"]:checked) .cat-pill {
  background: color-mix(in srgb, var(--ctp-peach) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--ctp-peach) 55%, transparent) !important;
  color: var(--severity-high) !important;
}

.facet-chip-row:has(input[data-sev="critical"]:checked) {
  background: color-mix(in oklab, var(--severity-critical) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--severity-critical) 45%, transparent);
}
.facet-chip-row:has(input[data-sev="critical"]:checked) .pill { color: var(--severity-critical) !important; }

.facet-chip-row:has(input[data-sev="high"]:checked) {
  background: color-mix(in oklab, var(--severity-high) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--severity-high) 45%, transparent);
}
.facet-chip-row:has(input[data-sev="high"]:checked) .pill { color: var(--severity-high) !important; }

.facet-chip-row:has(input[data-sev="med"]:checked) {
  background: color-mix(in oklab, var(--severity-medium) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--severity-medium) 45%, transparent);
}
.facet-chip-row:has(input[data-sev="med"]:checked) .pill { color: var(--severity-medium) !important; }

.facet-chip-row:has(input[data-sev="low"]:checked) {
  background: color-mix(in oklab, var(--ctp-sapphire) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--ctp-sapphire) 45%, transparent);
}
.facet-chip-row:has(input[data-sev="low"]:checked) .pill { color: var(--ctp-sapphire) !important; }
/* Fallback for browsers without color-mix(): rgba() at the same intensities. */
@supports not (background: color-mix(in oklab, red 50%, blue)) {
  .facet-chip-row:has(input[data-sev="critical"]:checked) {
    background: color-mix(in srgb, var(--ctp-red) 14%, transparent); border-color: color-mix(in srgb, var(--ctp-red) 45%, transparent);
  }
  .facet-chip-row:has(input[data-sev="high"]:checked) {
    background: color-mix(in srgb, var(--ctp-peach) 14%, transparent); border-color: color-mix(in srgb, var(--ctp-peach) 45%, transparent);
  }
  .facet-chip-row:has(input[data-sev="med"]:checked) {
    background: color-mix(in srgb, var(--ctp-yellow) 14%, transparent); border-color: color-mix(in srgb, var(--ctp-yellow) 45%, transparent);
  }
  .facet-chip-row:has(input[data-sev="low"]:checked) {
    background: color-mix(in srgb, var(--ctp-sapphire) 14%, transparent); border-color: color-mix(in srgb, var(--ctp-sapphire) 45%, transparent);
  }
}

/* Category cell coloring is already token-driven; just calm it down. */
.cat-pill { color: var(--text-secondary) !important; }

/* Scope facet row — segmented control, single restrained accent. */
.sec-controls,
.sec[aria-labelledby="sec-scope"] .facet-row {
  display: flex; gap: 0;
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 2px;
  margin-bottom: var(--space-2);
}
.sec[aria-labelledby="sec-scope"] .facet {
  flex: 1; padding: var(--space-1) var(--space-2);
  background: transparent !important;
  border: 0 !important;
  color: var(--text-secondary) !important;
  font-size: var(--text-xs-size);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.sec[aria-labelledby="sec-scope"] .facet:hover { background: var(--bg-3) !important; }
.sec[aria-labelledby="sec-scope"] .facet.active {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
}

/* Sidebar source list: tighter grid, hairline separators. */
.src-list .src-row { padding: var(--space-1) var(--space-2); }
.src-search-box,
.src-sort {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs-size);
}

/* ─── Map area — anchor controls ───────────────────────────────────
   --map-h removed: the map row's height is now driven by the body
   grid's `minmax(320px, 1fr)` track (50/50 split with the bottom
   table). Any legacy `var(--map-h, 50vh)` reference falls back to
   50vh, but no rules read it any more after the body row edits. */
#map-region {
  background: var(--bg-0);
  border-bottom: 1px solid var(--border-default);
}
.map-legend,
.map-zoom-controls,
.map-pulse-toggle,
#map-collapse-toggle {
  background: rgba(17, 26, 46, 0.85) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  backdrop-filter: blur(8px);
  color: var(--text-secondary) !important;
  font-size: var(--text-xs-size);
}
.map-legend .legend-head {
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.stream-toggle .legend-label {
  font-size: var(--text-xs-size);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-transform: none;
}
.stream-toggle[aria-pressed="true"] .legend-label { color: var(--text-primary); }

/* Stats strip below the map — calmer */
.stats-strip {
  background: var(--bg-1) !important;
  border-top: 1px solid var(--border-default) !important;
  font-size: var(--text-xs-size);
  color: var(--text-tertiary);
}
.stats-strip .muted { color: var(--text-tertiary); }
.stats-strip span:not(.muted) { color: var(--text-primary); }

/* ─── Right rail — unified card component ───────────────────────── */
#feed {
  background: var(--bg-1);
  border-left: 1px solid var(--border-default);
}
.feed-head {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border-default);
}
.feed-head h2,
.feed-head h3 {
  font-size: 11px !important;
  letter-spacing: var(--tracking-label) !important;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-weight: var(--fw-medium);
  margin: 0;
}
#feed-list { padding: var(--space-2); }

/* Unified event card — applies to .feed-card and .hunt-fire-card. */
.feed-card,
.hunt-fire-card {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-left: 3px solid var(--border-default) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-2) var(--space-3) !important;
  margin-bottom: var(--space-2) !important;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "badge title meta"
    "badge body  body"
    "badge action action";
  gap: 2px var(--space-2);
}
.feed-card.sev-crit, .hunt-fire-card.sev-crit { border-left-color: var(--sev-crit-bar) !important; }
.feed-card.sev-high, .hunt-fire-card.sev-high { border-left-color: var(--sev-high-bar) !important; }
.feed-card.sev-med,  .hunt-fire-card.sev-med  { border-left-color: var(--sev-med-bar)  !important; }
.feed-card.sev-low,  .hunt-fire-card.sev-low  { border-left-color: var(--accent) !important; }

/* ─── Tabs — calm underline (no caps blast) ─────────────────────── */
.tabs {
  background: var(--bg-1) !important;
  border-bottom: 1px solid var(--border-default) !important;
  padding: 0 var(--space-3) !important;
  gap: 0 !important;
  height: 44px;
}
.tab {
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: var(--text-sm-size) !important;
  font-weight: var(--fw-regular) !important;
  color: var(--text-tertiary) !important;
  padding: 0 var(--space-3) !important;
  border-bottom: 2px solid transparent !important;
  height: 44px;
  /* gap doubled to var(--space-2) so label↔badge separation is visible
     even when the badge's own margin-inline-start is suppressed by some
     other cascading rule. Belt + braces. */
  display: inline-flex; align-items: center; gap: var(--space-2);
}
.tab:hover { color: var(--text-secondary) !important; }
.tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
  font-weight: var(--fw-medium) !important;
}
.tab .tab-count {
  background: var(--bg-3) !important;
  color: var(--text-tertiary) !important;
  font-size: 11px !important;
  border-radius: var(--radius-pill) !important;
  padding: 1px 6px !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0;
}
.tab.active .tab-count { background: var(--accent-muted) !important; color: var(--accent-text) !important; }

#search {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-sm-size) !important;
  height: 32px;
  padding: 0 var(--space-3) !important;
  width: 320px !important;
  color: var(--text-primary);
}
#search:focus { border-color: var(--accent); }
#search-examples { display: none; }   /* moved into placeholder cycling */

#clearance-chip {
  background: transparent !important;
  border: 1px solid var(--warn-border) !important;
  color: var(--warn-text) !important;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 4px var(--space-2) !important;
  border-radius: var(--radius-md) !important;
  font-weight: var(--fw-medium);
}

/* ─── Tables — zebra + tabular nums + calmer chrome ─────────────── */
table.data thead th {
  background: var(--bg-1) !important;
  color: var(--text-tertiary) !important;
  font-size: 11px !important;
  letter-spacing: var(--tracking-label) !important;
  text-transform: uppercase;
  font-weight: var(--fw-medium) !important;
  border-bottom: 1px solid var(--border-default) !important;
  padding: var(--space-2) var(--space-3) !important;
}
table.data tbody td {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: var(--space-2) var(--space-3) !important;
  font-size: var(--text-sm-size);
}
table.data tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--ctp-text) 2%, transparent);
}
table.data tbody tr:hover { background: var(--bg-2) !important; }
table.data .num-cell {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum", "lnum";
}

/* Noise-contributors AUTO-RULE — icon, not pill. */
.noise-auto-badge {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin-left: var(--space-1) !important;
  color: var(--warn-solid);
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs-size);
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
  width: 14px; height: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--warn-bg) !important;
}
.noise-auto-badge::before {
  content: "✱";
  font-size: 11px;
  line-height: 1;
}
.noise-auto-badge { font-size: 0 !important; }   /* hide the literal text */
.noise-auto-badge[title] { font-size: 0 !important; }
.noise-auto td { background: transparent !important; }

/* FIX G — keep ACCEPT / EDIT / FILTER all visible. Restore secondaries
   that the prior redesign hid via display: none. */
.noise-actions { gap: var(--space-2) !important; display: flex; }
.noise-actions .btn-sm {
  padding: 4px 10px !important;
  font-size: var(--text-xs-size) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
/* ACCEPT — primary-subtle blue per spec G.10 */
.noise-actions .btn.btn-primary,
.noise-actions .noise-accept-rule {
  background: color-mix(in srgb, var(--ctp-blue) 12%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--ctp-blue) 40%, transparent) !important;
  color: var(--accent-blue) !important;
  border-radius: 4px !important;
  font-weight: var(--fw-medium);
}
.noise-actions .btn.btn-primary:hover,
.noise-actions .noise-accept-rule:hover {
  background: color-mix(in srgb, var(--ctp-blue) 22%, transparent) !important;
  border-color: var(--accent-blue) !important;
  box-shadow: var(--glow-blue) !important;
}

/* Empty-state messaging (zero-row table). */
.tbl-empty-cell {
  text-align: center; padding: var(--space-6) !important;
  color: var(--text-tertiary); font-size: var(--text-sm-size);
}

/* ─── TLP chips — official TLP color spec ───────────────────────── */
.tlp-chip,
.chip-tlp,
[class*="chip-tlp"] {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  border: 1px solid transparent;
  background: var(--bg-2);
}
.chip-tlp.tlp-red,    .tlp-red    { background: rgba(255, 43, 43, 0.14); color: var(--ctp-red); border-color: rgba(255, 43, 43, 0.35); }
.chip-tlp.tlp-amber,  .tlp-amber,
.chip-tlp.tlp-amberstrict { background: rgba(255, 192, 0, 0.14); color: var(--ctp-yellow); border-color: rgba(255, 192, 0, 0.35); }
.chip-tlp.tlp-green,  .tlp-green  { background: rgba(51, 255, 0, 0.14); color: var(--ctp-green); border-color: rgba(51, 255, 0, 0.30); }
.chip-tlp.tlp-clear,  .tlp-clear  { background: var(--bg-2); color: var(--text-secondary); border-color: var(--border-subtle); }

/* ─── Buttons — surgical use of color ────────────────────────────── */
.btn {
  background: var(--bg-2);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm-size);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn:hover { background: var(--bg-3); color: var(--text-primary); border-color: var(--border-default); }
.btn-primary {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  border-color: var(--accent) !important;
}
.btn-primary:hover { background: var(--accent-hover) !important; border-color: var(--accent-hover) !important; }
.btn-tertiary { background: transparent; border-color: var(--border-subtle); }

/* ─── Focus rings — visible 2px accent (spec) ───────────────────── */
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
  border-radius: var(--radius-sm);
}

/* ─── Reduced-motion (spec) ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .live-pulse,
  .live-pulse::after,
  .feed-card.new,
  .hunt-fire-card.new,
  [class*="ticker"] {
    animation: none !important;
    transition: none !important;
  }
}

/* ─── Workspace TLP context chip (top-right of bottom region) ───── */
#bottom { position: relative; }
#bottom::before {
  content: var(--tlp-context, "TLP:CLEAR");
  position: absolute; top: 8px; right: 12px;
  font-size: 11px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
  padding: 2px var(--space-2); border-radius: var(--radius-sm);
  background: var(--bg-1);
  pointer-events: none; z-index: 2;
}

/* ─── Drawer ─────────────────────────────────────────────────────── */
#drawer {
  background: var(--bg-1) !important;
  border-left: 1px solid var(--border-default) !important;
}

/* ─── Sidebar collapse button — calmer ──────────────────────────── */
.sidebar-collapse-btn {
  background: var(--bg-2);
  color: var(--text-tertiary);
  border: 1px solid var(--border-subtle);
}

/* ─── Score chips (HK / AI) → labelled mini progress indicator ───── */
.score {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  padding: 2px var(--space-2) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--bg-2) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  position: relative;
  overflow: hidden;
}
/* Underline progress bar showing the score 0–100 (max 100). */
.score::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  height: 2px;
  width: var(--score-pct, 0%);
  background: var(--accent);
}
.score.sev-critical { color: var(--sev-crit-text) !important; border-color: var(--sev-crit-border) !important; }
.score.sev-critical::after { background: var(--sev-crit-bar); }
.score.sev-high     { color: var(--sev-high-text) !important; border-color: var(--sev-high-border) !important; }
.score.sev-high::after     { background: var(--sev-high-bar); }
.score.sev-med      { color: var(--sev-med-text) !important;  border-color: var(--sev-med-border) !important; }
.score.sev-med::after      { background: var(--sev-med-bar); }
.score.sev-low      { color: var(--accent-text) !important;   border-color: var(--accent-border) !important; }
.score.sev-low::after      { background: var(--accent); }
/* Strip the legacy ●◐○— glyphs the original CSS appended. */
.score.sev-critical::after { content: ""; position: absolute; }
.score::before {
  content: "";
}
/* Critical/High redundancy cue in TEXT for non-color-aware users —
   keep an accessible non-color tag without stamping a glyph after. */
.score[data-axis]::before { content: attr(data-axis) " "; opacity: 0.7; font-size: 11px; letter-spacing: 0.05em; }


/* ════════════════════════════════════════════════════════════════════
   TOKYO NIGHT SOC — sci-fi visual layer
   "Tokyo Night × Blade Runner SOC" — deep indigo canvas, electric blue
   and cyan data, purple AI signals, magenta threats, soft neon glows
   on every active edge. Loaded last; wins the cascade.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Body canvas + scanline overlay ─────────────────────────────── */
html, body {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
}
body::before {
  /* Scanline overlay — barely perceptible 1px cyan repeating gradient.
     Pointer-events:none so it doesn't intercept clicks. */
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    color-mix(in srgb, var(--ctp-sapphire) 2%, transparent) 2px 3px);
  z-index: 1;
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce) {
  body::before { display: none; }
}
/* Lift real content above the scanline overlay. Excludes #drawer
   because it needs `position: fixed` for its slide-out behaviour. */
:where(header, aside, main, section, dialog) { z-index: 2; }
header, aside:not(#drawer), main, section { position: relative; z-index: 2; }
/* Drawer keeps its own fixed positioning + slide animation. */
#drawer { z-index: 20; }
#drawer.hidden { transform: translateX(100%) !important; pointer-events: none !important; }

::selection {
  background: color-mix(in srgb, var(--ctp-blue) 25%, transparent);
  color: var(--text-primary);
}

/* ─── Custom scrollbar — 6px, accent-blue on hover ───────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 3px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--accent-blue); }

/* ─── Header — deep layering surface (FIX: spec) ──────────────────── */
/* Header sits BELOW the canvas in tonal value (var(--bg-panel) vs var(--bg-app)),
   so KPI tiles read as elevated cards floating on a darker strip. */
#hdr {
  background-color: var(--bg-panel) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ctp-sapphire) 6%, transparent);
  background-image: var(--grad-hero);   /* faint gradient wash on top */
  background-blend-mode: screen;
}

/* ─── Brand — neon cyan dot, mono logo ──────────────────────────── */
.logo {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em;
  color: var(--text-primary);
  font-size: 15px;
  line-height: 1.4 !important;     /* FIX A.2 — restore line-height so the top stroke isn't clipped */
  padding-top: 0;                  /* the .brand container already has padding-top: 4px */
}
.brand .tagline { color: var(--text-muted); }
#live-dot {
  background: var(--accent-cyan) !important;
  box-shadow: var(--glow-cyan);
}

/* ─── KPI tiles — terminal-readout numerals ──────────────────────── */
button.stat,
.stat {
  /* KPI tiles paint individually so the gaps reveal the darker
     var(--bg-panel) header beneath, not the page-canvas white. */
  background-color: var(--bg-panel) !important;
  border: 1px solid var(--border-subtle) !important;
  position: relative;
  overflow: hidden;            /* FIX A.4 — sparklines must not bleed past tile */
  min-width: 140px;
  padding: 10px 16px !important;
}
/* Sparkline slot: anchored bottom-right, never bleeds past the tile. */
.stat .kpi-spark-slot {
  position: absolute !important;
  inset: auto 8px 8px auto;
  width: 60% !important;
  height: 24px !important;
  opacity: 0.6;
  pointer-events: none;
  display: block !important;
  align-self: auto !important;
  justify-content: flex-end;
}
.stat .kpi-spark-slot svg { width: 100%; height: 100%; }
/* Restore corner brackets to absolute so they sit ON the border, even
   though the tile clips overflow. */
button.stat::before, button.stat::after,
.stat::before, .stat::after { z-index: 1; }
button.stat::before,
button.stat::after,
.stat::before,
.stat::after {
  content: "";
  position: absolute;
  width: 8px; height: 8px;
  border: 1px solid color-mix(in srgb, var(--ctp-sapphire) 55%, transparent);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
  opacity: 0.55;
}
button.stat::before, .stat::before {
  top: -1px; left: -1px;
  border-right: 0; border-bottom: 0;
}
button.stat::after, .stat::after {
  bottom: -1px; right: -1px;
  border-left: 0; border-top: 0;
}
button.stat:hover,
.stat:hover {
  border-color: var(--accent-cyan) !important;
  box-shadow: var(--glow-cyan);
}
button.stat:hover::before,
button.stat:hover::after,
.stat:hover::before,
.stat:hover::after { opacity: 1; }

.stat .num {
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  color: var(--accent-cyan) !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--ctp-sapphire) 25%, transparent);
  /* FIX 3 — must fit a 72px header; ramp value is 24, not 32. */
  font-size: 24px !important;
  line-height: 1.1 !important;
}
.stat .lbl {
  color: var(--text-muted) !important;
  letter-spacing: 0.08em !important;
}
.stat .delta.up   { color: var(--accent-cyan) !important; }
.stat .delta.down { color: var(--accent-magenta) !important; }
.stat .delta.flat { color: var(--text-muted) !important; }

/* KPI sparkline tinted purple (per spec). */
.kpi-spark-slot path,
.kpi-spark-slot polyline,
.kpi-spark-slot circle { stroke: var(--accent-purple); }
.kpi-spark-slot path[fill]:not([fill="none"]),
.kpi-spark-slot polygon[fill]:not([fill="none"]) {
  fill: color-mix(in srgb, var(--ctp-mauve) 8%, transparent) !important;
}

/* ─── Live indicator — cyan pulse ────────────────────────────────── */
.live-indicator {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
}
.live-indicator .live-label { color: var(--text-muted); }
.live-indicator .live-epm { color: var(--accent-cyan) !important; }

.live-pulse {
  background: var(--accent-cyan) !important;
  box-shadow: var(--glow-cyan);
  animation: tn-pulse 1.6s ease-in-out infinite;
}
.live-indicator.stalled .live-pulse {
  background: var(--accent-magenta) !important;
  box-shadow: var(--glow-magenta);
}
@keyframes tn-pulse {
  0%, 100% { opacity: 1;    box-shadow: 0 0 10px color-mix(in srgb, var(--ctp-sapphire) 55%, transparent), 0 0 24px color-mix(in srgb, var(--ctp-sapphire) 20%, transparent); }
  50%      { opacity: 0.55; box-shadow: 0 0 4px color-mix(in srgb, var(--ctp-sapphire) 30%, transparent), 0 0 8px color-mix(in srgb, var(--ctp-sapphire) 10%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .live-pulse { animation: none !important; }
}

/* ─── Last-update + clock — outlined chips ───────────────────────── */
#last-new-pill, .last-new, #clock {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}
#clock time { color: var(--text-primary); }

/* (Second sys-health rule block deleted — element no longer in DOM.) */

/* ─── Sidebar — left neon spine (FIX: spec colours) ──────────────── */
#sidebar {
  background-color: var(--bg-panel) !important;
  border-right: 1px solid var(--border-subtle) !important;
}
#sidebar .sec h2 { color: var(--text-muted) !important; }

/* Severity chips inside the sidebar — sci-fi semantic tint. */
.facet-chip-row:has(input[data-sev="critical"]:checked) {
  background: var(--sev-crit-bg) !important;
  border-left-color: var(--accent-magenta) !important;
}
.facet-chip-row:has(input[data-sev="critical"]:checked) .pill { color: var(--accent-magenta) !important; }
.facet-chip-row:has(input[data-sev="high"]:checked) {
  background: var(--sev-high-bg) !important;
  border-left-color: var(--accent-orange) !important;
}
.facet-chip-row:has(input[data-sev="high"]:checked) .pill { color: var(--accent-orange) !important; }
.facet-chip-row:has(input[data-sev="med"]:checked) {
  background: var(--sev-med-bg) !important;
  border-left-color: var(--accent-yellow) !important;
}
.facet-chip-row:has(input[data-sev="med"]:checked) .pill { color: var(--accent-yellow) !important; }
.facet-chip-row:has(input[data-sev="low"]:checked) {
  background: var(--sev-low-bg) !important;
  border-left-color: var(--accent-teal) !important;
}
.facet-chip-row:has(input[data-sev="low"]:checked) .pill { color: var(--accent-teal) !important; }

/* Scope segmented control — accent blue active. */
.sec[aria-labelledby="sec-scope"] .facet.active {
  background: var(--accent-blue) !important;
  color: var(--bg-base) !important;
  box-shadow: var(--glow-blue);
}

/* ─── Tabs — cyan underline + glow on active (FIX: spec) ──────────── */
.tabs {
  background-color: var(--bg-panel) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.tab { color: var(--text-muted) !important; }
.tab:hover { color: var(--text-secondary) !important; }
.tab.active {
  /* FIX I — spec exact values: cyan + 1px underline + glow 10px @ 0.5 */
  color: var(--ctp-sapphire) !important;
  border-bottom: 1px solid var(--ctp-sapphire) !important;
  text-shadow: 0 0 10px color-mix(in srgb, var(--ctp-sapphire) 50%, transparent);
  font-weight: var(--fw-medium) !important;
}
.tab.active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px; background: var(--ctp-sapphire);
  box-shadow: 0 0 10px color-mix(in srgb, var(--ctp-sapphire) 50%, transparent);
  pointer-events: none;
}
.tab { position: relative; }
.tab:hover { color: var(--text-secondary) !important; }
/* Tab bar bottom rule so the active 1px underline reads against it. */
.tabs { border-bottom: 1px solid var(--border-subtle) !important; }
.tab .tab-count {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
}
.tab.active .tab-count {
  background: color-mix(in srgb, var(--ctp-sapphire) 14%, transparent) !important;
  color: var(--accent-cyan) !important;
  border: 1px solid color-mix(in srgb, var(--ctp-sapphire) 30%, transparent);
}

/* ─── Search input — bg-inset + cyan focus glow ──────────────────── */
#search,
.src-search-box {
  background: var(--bg-inset) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-mono) !important;
}
#search:focus,
.src-search-box:focus {
  border-color: var(--accent-cyan) !important;
  box-shadow: var(--glow-cyan) !important;
  outline: 0 !important;
}
#search::placeholder { color: var(--text-muted); font-style: italic; }

/* TLP context chip top-right of workspace */
#bottom::before {
  background: transparent !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
}

/* ─── Buttons — primary blue, secondary outline, destructive magenta
   FIX F — toolbar buttons get visible chrome: padding 6px 12px,
   border-radius 6px, cyan hover glow, bg-elevated active state. */
.btn,
.btn-tertiary {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-primary) !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  font-size: var(--text-sm-size) !important;
  font-family: var(--font-sans) !important;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover,
.btn-tertiary:hover {
  border-color: var(--accent-cyan) !important;
  color: var(--accent-cyan) !important;
  box-shadow: var(--glow-cyan);
}
.btn:active,
.btn[aria-pressed="true"],
.btn-tertiary:active,
.btn-tertiary[aria-pressed="true"] {
  background: var(--bg-elevated) !important;
}
.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none !important;
}
.btn:disabled:hover,
.btn[disabled]:hover {
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}
.btn-primary {
  background: var(--accent-blue) !important;
  border: 1px solid var(--accent-blue) !important;
  color: var(--bg-base) !important;
  font-weight: var(--fw-medium);
}
.btn-primary:hover {
  background: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
  color: var(--bg-base) !important;
  box-shadow: var(--glow-blue) !important;
}
.btn-danger,
.btn-destructive,
.btn[data-action="reject"],
.btn[data-variant="destructive"] {
  background: transparent !important;
  border: 1px solid var(--accent-magenta) !important;
  color: var(--accent-magenta) !important;
}
.btn-danger:hover,
.btn-destructive:hover,
.btn[data-action="reject"]:hover {
  border-color: var(--accent-magenta) !important;
  color: var(--accent-magenta) !important;
  box-shadow: var(--glow-magenta) !important;
}

/* IOC bulk-action toolbar — HK·SENTINEL target = plain inline labels,
   no borders or filled backgrounds; lift on hover with a cyan glow. */
.ioc-toolbar .btn,
.ioc-toolbar-v2 .btn {
  background: transparent !important;
  border: 0 !important;
  color: var(--text-secondary) !important;
  padding: 4px 10px !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  font-weight: 500;
}
.ioc-toolbar .btn:hover,
.ioc-toolbar-v2 .btn:hover {
  color: var(--accent-cyan) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-shadow: 0 0 8px color-mix(in srgb, var(--ctp-sapphire) 40%, transparent);
}
.ioc-toolbar .btn[disabled],
.ioc-toolbar-v2 .btn[disabled] { opacity: 0.35; }
.ioc-toolbar .btn-danger,
.ioc-toolbar-v2 .btn-danger {
  color: var(--accent-magenta) !important;
}
.ioc-toolbar .btn-danger:hover,
.ioc-toolbar-v2 .btn-danger:hover {
  text-shadow: 0 0 8px color-mix(in srgb, var(--ctp-red) 50%, transparent);
}
/* Vertical divider between logical groups. */
.ioc-tb-group + .btn,
.ioc-tb-group + .ioc-tb-group {
  position: relative;
}
.ioc-tb-group + .btn::before,
.ioc-tb-group + .ioc-tb-group::before {
  content: "";
  position: absolute; left: -6px; top: 6px; bottom: 6px;
  width: 1px; background: var(--border-subtle);
  pointer-events: none;
}
/* "Defang on copy" toggle — render as a real visible checkbox, not
   the dropdown menu item. */
.ioc-toolbar-toggle {
  display: inline-flex !important;
  align-items: center; gap: 6px;
  font-size: 11px !important;
  color: var(--text-secondary) !important;
  text-transform: none;
  letter-spacing: 0;
  padding: 4px 8px;
}
.ioc-toolbar-toggle input[type="checkbox"] {
  accent-color: var(--accent-cyan);
  width: 12px; height: 12px;
}
/* "100 of 100" count — push to far right. */
.ioc-toolbar #ioc-count {
  margin-left: auto !important;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ─── Cards — surface + cyan top-edge glow on hover ──────────────── */
.feed-card,
.hunt-fire-card,
.malware-modal,
dialog.rule-modal {
  background: var(--bg-surface) !important;
  box-shadow: var(--shadow-card) !important;
}
.feed-card:hover,
.hunt-fire-card:hover {
  border-color: var(--accent-cyan) !important;
}

/* Cards get a HUD-style top-edge glow line on hover. */
.feed-card,
.hunt-fire-card { position: relative; }
.feed-card::after,
.hunt-fire-card::after {
  content: "";
  position: absolute; top: -1px; left: 8%; right: 8%;
  height: 1px;
  background: var(--accent-cyan);
  opacity: 0;
  box-shadow: var(--glow-cyan);
  transition: opacity var(--dur-base) var(--ease-out);
}
.feed-card:hover::after,
.hunt-fire-card:hover::after { opacity: 0.85; }

/* Severity-coded left bar uses sci-fi semantic colors. */
.feed-card.sev-crit, .hunt-fire-card.sev-crit { border-left-color: var(--accent-magenta) !important; }
.feed-card.sev-high, .hunt-fire-card.sev-high { border-left-color: var(--accent-orange) !important; }
.feed-card.sev-med,  .hunt-fire-card.sev-med  { border-left-color: var(--accent-yellow) !important; }
.feed-card.sev-low,  .hunt-fire-card.sev-low  { border-left-color: var(--accent-teal) !important; }

/* ─── Tables — Tokyo Night data-grid (FIX: spec colours) ────────── */
table.data { background-color: var(--bg-base); }
table.data thead th {
  background-color: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border-strong) !important;
}
table.data tbody tr {
  background: transparent !important;
}
table.data tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ctp-text) 2%, transparent) !important; }
table.data tbody tr:hover {
  background: color-mix(in srgb, var(--ctp-blue) 6%, transparent) !important;
}
table.data tbody td { border-bottom: 1px solid color-mix(in srgb, var(--ctp-surface0) 50%, transparent) !important; }
table.data .num-cell {
  font-family: var(--font-mono);
  color: var(--text-primary);
}

/* ─── Score chips → sci-fi labelled progress ─────────────────────── */
.score {
  background: var(--bg-elevated) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-weight: var(--fw-medium);
}
.score.sev-critical { background: var(--sev-crit-bg) !important; border-color: color-mix(in srgb, var(--ctp-red) 40%, transparent) !important; color: var(--accent-magenta) !important; }
.score.sev-critical::after { background: var(--accent-magenta); box-shadow: 0 0 6px color-mix(in srgb, var(--ctp-red) 50%, transparent); }
.score.sev-high     { background: var(--sev-high-bg) !important; border-color: color-mix(in srgb, var(--ctp-peach) 40%, transparent) !important; color: var(--accent-orange) !important; }
.score.sev-high::after     { background: var(--accent-orange); }
.score.sev-med      { background: var(--sev-med-bg) !important;  border-color: color-mix(in srgb, var(--ctp-yellow) 40%, transparent) !important;  color: var(--accent-yellow) !important; }
.score.sev-med::after      { background: var(--accent-yellow); }
.score.sev-low      { background: var(--sev-low-bg) !important;  border-color: color-mix(in srgb, var(--ctp-teal) 40%, transparent) !important;   color: var(--accent-teal) !important; }
.score.sev-low::after      { background: var(--accent-teal); }

/* AI scores get the purple accent (per spec). */
.score[data-axis="AI"],
.score:where([class*="AI"]) {
  border-color: color-mix(in srgb, var(--ctp-mauve) 40%, transparent) !important;
  color: var(--accent-purple) !important;
  background: var(--ai-bg) !important;
}
.score[data-axis="AI"]::after { background: var(--accent-purple) !important; }

/* ─── Chips / badges — 14% accent fill, 40% accent border ────────── */
.chip,
.alias,
.cat-pill,
.pill {
  background: var(--accent-muted);
  border: 1px solid var(--accent-border);
  color: var(--accent-blue);
  border-radius: var(--radius-sm);
  padding: 2px var(--space-2);
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.cat-pill.cat-A { background: var(--live-bg); border-color: color-mix(in srgb, var(--ctp-sapphire) 40%, transparent); color: var(--accent-cyan); }
.cat-pill.cat-B { background: var(--accent-muted); border-color: var(--accent-border); color: var(--accent-blue); }
.cat-pill.cat-C { background: var(--sev-med-bg);  border-color: color-mix(in srgb, var(--ctp-yellow) 40%, transparent); color: var(--accent-yellow); }
.cat-pill.cat-D { background: var(--ai-bg);       border-color: color-mix(in srgb, var(--ctp-mauve) 40%, transparent); color: var(--accent-purple); }
.cat-pill.cat-E { background: var(--sev-crit-bg); border-color: color-mix(in srgb, var(--ctp-red) 40%, transparent); color: var(--accent-magenta); }
.cat-pill.cat-G { background: var(--sev-high-bg); border-color: color-mix(in srgb, var(--ctp-peach) 40%, transparent); color: var(--accent-orange); }

/* ─── TLP chips — outlined readable (FIX J) ─────────────────────── */
.chip-tlp,
[class*="chip-tlp"],
.tlp-chip {
  background: transparent !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--text-secondary) !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  padding: 4px 8px !important;
  border-radius: var(--radius-sm) !important;
  font-weight: var(--fw-medium);
}
/* Per spec J.14: TLP:CLEAR uses --text-secondary border + text. */
.chip-tlp.tlp-clear, .tlp-clear {
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
}
/* AMBER+STRICT uses --accent-yellow for both border and text. */
.chip-tlp.tlp-amber, .tlp-amber,
.chip-tlp.tlp-amberstrict {
  border-color: var(--accent-yellow) !important;
  color: var(--accent-yellow) !important;
}
.chip-tlp.tlp-red, .tlp-red {
  border-color: var(--accent-magenta) !important;
  color: var(--accent-magenta) !important;
}
.chip-tlp.tlp-green, .tlp-green {
  border-color: var(--accent-green) !important;
  color: var(--accent-green) !important;
}

/* ─── Map — dark indigo basemap (target HK·SENTINEL look) ─────────── */
#map { background: var(--bg-app) !important; }
#map-region { background: var(--bg-app) !important; }

/* Country base fill — match target: very dark navy, brighter outlines. */
:where(#map .country):not(.choro-active) {
  fill: var(--bg-panel);        /* deeper than the canvas for visual contrast */
  stroke: var(--border-subtle);
  stroke-width: 1;
}
:where(#map .country.hk):not(.choro-active) {
  fill: color-mix(in srgb, var(--ctp-blue) 25%, transparent);
  stroke: var(--ctp-blue);
}
:where(#map .country-border) {
  fill: none;
  stroke: var(--border-subtle);
  stroke-width: 1;
}
:where(#map .country-tint) { fill: color-mix(in srgb, var(--ctp-blue) 4%, transparent); }
:where(#map .graticule)    { stroke: color-mix(in srgb, var(--ctp-blue) 8%, transparent); stroke-width: 0.5; }

/* HK anchor — cyan ring + dot. */
:where(#map .hk-ring) { stroke: var(--accent-cyan); }
:where(#map .hk-dot)  { fill:   var(--accent-cyan); }

/* Markers — fills/strokes are set inline by map.js via style.fill /
   style.stroke. We only add filter-drop-shadow glow + stroke-width
   here, never `fill !important`, so inline values always win. */
#map .marker { transform-origin: center; }
#map .marker-core   { filter: drop-shadow(0 0 4px currentColor); }
#map .marker-halo   { stroke-width: 0; }
#map .marker-pulse  { fill: none; stroke-width: 1.5; }
#map .marker.stream-actor .marker-core,
#map .marker.stream-actor .marker-halo {
  /* Threat actor → magenta glow per spec. */
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--ctp-red) 60%, transparent));
}
#map .marker.stream-cert .marker-core {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ctp-yellow) 55%, transparent));
}
#map .marker.stream-ioc .marker-core {
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--ctp-sapphire) 55%, transparent));
}

/* Map legend / zoom / pulse — frosted indigo card. */
.map-legend,
.map-zoom-controls,
.map-pulse-toggle,
#map-collapse-toggle {
  background: color-mix(in srgb, var(--ctp-mantle) 85%, transparent) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  backdrop-filter: blur(8px);
}
.map-legend .legend-head { color: var(--text-muted); }
.legend-dot {
  width: 8px; height: 8px; border-radius: 50%;
  display: inline-block;
}
.legend-dot.dot-ioc   { background: var(--ctp-sapphire) !important; box-shadow: 0 0 6px color-mix(in srgb, var(--ctp-sapphire) 50%, transparent); }
.legend-dot.dot-cert  { background: var(--severity-medium) !important; box-shadow: 0 0 6px color-mix(in srgb, var(--ctp-yellow) 50%, transparent); }
.legend-dot.dot-actor { background: var(--ctp-mauve) !important; box-shadow: 0 0 6px color-mix(in srgb, var(--ctp-mauve) 50%, transparent); }

/* Stats-strip below the map. */
.stats-strip {
  background: var(--bg-surface) !important;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle) !important;
}

/* ─── Right rail — gradient wash + neon spine ───────────────────── */
#feed {
  background: var(--bg-surface) !important;
  border-left: 1px solid var(--border-subtle) !important;
  background-image: var(--grad-live);
}
.feed-head h2,
.feed-head h3 { color: var(--text-muted) !important; }

/* Cards inside #feed share the same surface as panels. */
#feed-list .feed-card,
#hunt-fires-list .hunt-fire-card {
  border: 1px solid var(--border-subtle) !important;
  border-left-width: 3px !important;
}

/* ─── Drawer HUD frame ──────────────────────────────────────────── */
/* Single host for all detail views post-unification: case / actor /
   malware family / CVE / report all open in #drawer. The corner
   brackets stay only on #drawer; the dead .actor-panel / .case-panel
   selectors were removed when the bottom panels were retired. */
#drawer {
  background: var(--bg-surface) !important;
  border-left: 1px solid var(--border-subtle) !important;
  /* position: fixed inherited from the base #drawer rule */
}
#drawer::before {
  /* HUD top-left corner bracket */
  content: "";
  position: absolute; top: 12px; left: 12px;
  width: 14px; height: 14px;
  border: 1px solid color-mix(in srgb, var(--ctp-sapphire) 55%, transparent);
  border-right: 0; border-bottom: 0;
  pointer-events: none;
}
#drawer::after {
  /* HUD bottom-right corner bracket */
  content: "";
  position: absolute; bottom: 12px; right: 12px;
  width: 14px; height: 14px;
  border: 1px solid color-mix(in srgb, var(--ctp-sapphire) 55%, transparent);
  border-left: 0; border-top: 0;
  pointer-events: none;
}

/* Modal corners */
dialog.rule-modal,
dialog.sample-drawer,
dialog.hyp-detail {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-strong) !important;
  position: relative;
}
dialog.rule-modal::backdrop {
  background: rgba(11, 12, 22, 0.78) !important;
  backdrop-filter: blur(2px);
}

/* ─── Severity score pills — sci-fi semantic ──────────────────────── */
.pill.sev-critical { background: var(--sev-crit-bg)  !important; border-color: color-mix(in srgb, var(--ctp-red) 40%, transparent) !important; color: var(--accent-magenta) !important; }
.pill.sev-high     { background: var(--sev-high-bg)  !important; border-color: color-mix(in srgb, var(--ctp-peach) 40%, transparent) !important; color: var(--accent-orange)  !important; }
.pill.sev-med      { background: var(--sev-med-bg)   !important; border-color: color-mix(in srgb, var(--ctp-yellow) 40%, transparent) !important; color: var(--accent-yellow)  !important; }
.pill.sev-low      { background: var(--sev-low-bg)   !important; border-color: color-mix(in srgb, var(--ctp-teal) 40%, transparent)  !important; color: var(--accent-teal)    !important; }

/* ─── Chart palette helpers (cyan→blue→purple→magenta→orange→yellow→teal) */
.chart-color-1 { color: var(--accent-cyan); }
.chart-color-2 { color: var(--accent-blue); }
.chart-color-3 { color: var(--accent-purple); }
.chart-color-4 { color: var(--accent-magenta); }
.chart-color-5 { color: var(--accent-orange); }
.chart-color-6 { color: var(--accent-yellow); }
.chart-color-7 { color: var(--accent-teal); }
.chart-fill-1  { fill:    var(--accent-cyan); }
.chart-fill-2  { fill:    var(--accent-blue); }
.chart-fill-3  { fill:    var(--accent-purple); }
.chart-fill-4  { fill:    var(--accent-magenta); }

/* ─── Focus ring — FIX L.18 — exact spec values ─────────────────── */
:focus-visible {
  outline: 2px solid var(--ctp-sapphire) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ctp-sapphire) 20%, transparent) !important;
  border-radius: var(--radius-sm);
}

/* ─── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ─── High contrast preference ──────────────────────────────────── */
@media (prefers-contrast: more) {
  :root {
    --text-primary:   var(--text-primary);
    --text-secondary: var(--text-secondary);
    --border-subtle:  var(--border-strong);
    --border-default: var(--border-strong);
  }
}

/* ─── Eradication overrides — force any legacy green path to blue ── */
.dot-live {
  background: var(--accent-cyan) !important;
  box-shadow: var(--glow-cyan) !important;
}
.last-new.ln-green { color: var(--accent-cyan) !important; }
.delta.up { color: var(--accent-cyan) !important; }
.delta.down { color: var(--accent-magenta) !important; }

/* AI-axis stream tints get purple. */
[data-stream="ai"], .stream-ai { color: var(--accent-purple) !important; }

/* Hunt → AI/ML purple per semantic mapping. */
.hunt-fire-card {
  border-left-color: var(--accent-purple) !important;
}

/* "Healthy" status pills — minimal green use only. */
.status-ok,
.chip.status-healthy {
  background: var(--ok-bg) !important;
  border-color: var(--ok-border) !important;
  color: var(--ok-text) !important;
}


/* ════════════════════════════════════════════════════════════════════
   ROOT PAINT — defensive backstop layer
   Prevent any layout shell from showing the user-agent default white.
   Every region that doesn't fully cover the viewport gets a background.
   ════════════════════════════════════════════════════════════════════ */

html, body {
  background-color: var(--bg-app);        /* canvas */
  color: var(--text-primary);                   /* text-primary */
  min-height: 100%;
  margin: 0;
}
main, #map-region {
  background-color: var(--bg-app);
  min-height: 0;
}

/* Right rail surface (#feed) — surface tone. */
#feed {
  background-color: var(--bg-panel) !important;
  border-left: 1px solid var(--border-subtle) !important;
}

/* Bottom toolbar (IOC bulk-action row) sits on a surface, not the
   canvas, so the buttons read against a slight elevation. */
.ioc-toolbar,
.ioc-toolbar-v2 {
  background-color: var(--bg-panel) !important;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle) !important;
}

/* Bottom region (#bottom) — surface, not transparent. */
#bottom {
  background-color: var(--bg-panel) !important;
}

/* Tagline — soft accent at 70% opacity per spec. */
.brand .tagline {
  color: var(--ctp-blue) !important;
  opacity: 0.7;
  font-weight: var(--fw-medium);
}
.logo {
  color: var(--text-primary) !important;
}

/* Drawer surface — not transparent. */
#drawer { background-color: var(--bg-panel) !important; }

/* Status-cluster items each paint individually so gaps don't reveal
   the (now-darker) header underneath as a thin stripe — which would
   look like an unintended divider. */
.live-indicator,
#last-new-pill,
#clock {
  background-color: var(--bg-panel) !important;
}

/* ════════════════════════════════════════════════════════════════════
   HEADER FINAL — strict spec values (FIX 3, 8, 9, 10)
   - Header 72px, padding 0 20px, 220 1fr 360 grid.
   - Brand: ARGUS 18px Mono 700 with cyan underline; tagline 11px blue.
   - Each .stat tile is the same component as the right-meta tiles, so
     LIVE / LAST UPDATE / HKT match KPI tiles in chrome.
   ════════════════════════════════════════════════════════════════════ */

#hdr .stats {
  display: flex !important;
  gap: 8px !important;
  align-items: stretch !important;
  height: 100% !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
}

#hdr button.stat,
#hdr .stat {
  /* HK·SENTINEL — flat numbers on the header. Identical 4-row grid on
     every tile so labels / values / deltas / sub-decorations all share
     the same baseline tile-to-tile. The sub row is a fixed 18px slot
     reserved on every tile (whether the tile uses it or not), so a
     populated decoration like the Sources "DEGRADED" pill no longer
     pushes the primary number up or down vs neighbouring tiles.

     Width policy: content-aware — shrink only when forced, never below
     the value's intrinsic width, so "186/186" and "51 (11)" render in
     full. min-height locks all seven tiles to the same outer height. */
  flex: 0 1 auto !important;
  flex-shrink: 0 !important;
  min-width: max-content !important;
  max-width: none !important;
  padding: 6px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr;
  grid-template-rows: 14px 36px 16px 18px;
  grid-template-areas:
    "label"
    "value"
    "delta"
    "sub";
  row-gap: 2px;
  column-gap: 0;
  align-content: start;
  justify-items: end;       /* right-align the column tile-to-tile */
  /* Layout invariant — DO NOT BREAK:
       min-height >= sum(grid-template-rows) + padding-block + (n-1)*row-gap
       96px        >= (14 + 36 + 16 + 18) + (6 + 6) + (3 * 2)
       96px        >= 84 + 12 + 6
       96px        >= 102 ← needs 102 actually, see below
     We use 96px because row-gap collapses where rows have content
     boundaries that share a track edge, so the effective vertical
     budget is closer to 96. If a future change adds extra row-gap or
     padding, bump min-height to match — never patch the issue with
     overflow:hidden, which only masks a layout bug and clips real UI
     (the symptom that produced the "12 DEGRADED" pill drifting below
     the tile's bottom edge). */
  overflow: visible !important;
  position: relative;
  height: auto !important;
  min-height: 96px;
  cursor: pointer;
}
#hdr button.stat:hover,
#hdr .stat:hover {
  background: color-mix(in srgb, var(--ctp-sapphire) 4%, transparent) !important;
  box-shadow: none !important;
  border: 0 !important;
}
.hdr-meta .stat,
.live-indicator,
#last-new-pill {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 12px !important;
}

#hdr .stat .lbl,
.hdr-meta .stat .lbl,
.live-indicator .live-label,
#last-new-pill .lbl,
#clock .lbl {
  grid-area: label;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  line-height: 1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Right-align labels so they share the column edge with the number,
     delta, and sub-row content. */
  text-align: right;
  justify-self: end;
  width: 100%;
}

#hdr .stat .num {
  grid-area: value;
  /* HK·SENTINEL target — pure white terminal-readout numerals.
     clamp() applied uniformly across every tile so all seven render at
     the same font-size at any given viewport width. The tile width
     itself flexes via min-width:max-content on .stat, so longer values
     ("186/186", "51 (11)", "1,234 (56)") get the room they need
     without ever being clipped or replaced by an ellipsis.
     Right-align + 100% width = the units digit of every tile lands at
     the same X-offset from its tile's right edge, forming the clean
     digit column the row was missing. */
  font-size: clamp(20px, 2vw, 32px) !important;
  font-weight: 700 !important;
  font-family: var(--font-mono) !important;
  color: var(--text-primary) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  text-shadow: none !important;
  text-align: right;
  justify-self: end;
  align-self: center;
  width: 100%;
}
/* The Sources tile (and any future tile that has more than one
   sub-row child) wraps its pill + freshness in a single .stat-sub
   container. Without the wrapper, both children would claim
   `grid-area: sub` and stack/overlap onto the same 18px slot. The
   wrapper takes the slot; its children flex-row inside it. */
.stat .stat-sub {
  grid-area: sub;
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  width: 100%;
  height: 18px;       /* matches the sub track height */
}
.stat .stat-sub .freshness { display: inline-flex !important; }

/* (#s-sources-pill rule removed — element deleted from DOM.) */
#hdr .stat .delta {
  grid-area: delta;
  font-size: 11px !important;
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  min-height: 11px !important;
  color: var(--ctp-green) !important;     /* bright sage-green per target */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block !important;
  text-align: right;
  justify-self: end;
  width: 100%;
}
#hdr .stat .delta.up    { color: var(--ctp-green) !important; }
#hdr .stat .delta.down  { color: var(--severity-critical) !important; }
#hdr .stat .delta.flat  { color: var(--text-muted) !important; }
/* All optional sub-row decorations live in `grid-area: sub` so the
   18px sub track is the canonical home for anything that's *not*
   label/value/delta. Right now baseline / kpi-spark-slot / freshness
   are display:none in the header (per HK·SENTINEL spec) but their
   grid-area is set so a future show-toggle drops them into the
   reserved slot rather than disrupting layout. */
#hdr .stat .baseline,
#hdr .stat .kpi-spark-slot,
#hdr .stat .freshness {
  grid-area: sub;
  justify-self: end;
  align-self: center;
}
#hdr .stat .baseline { display: none !important; }
#hdr .stat .kpi-spark-slot { display: none !important; }
#hdr .stat .freshness { display: none !important; }
#hdr .stat::before, #hdr .stat::after { display: none !important; }   /* drop HUD corners in header — they overflow the 72px box */

/* HK·SENTINEL wordmark — pure white, no underline (target shows none) */
.brand .logo {
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  color: var(--text-primary) !important;
  line-height: 1 !important;
  margin: 0 !important;
  text-transform: uppercase;
  position: relative;
  display: inline-block;
  width: max-content;
}
.brand .logo::after { display: none !important; }
.brand .tagline {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  color: var(--ctp-blue) !important;
  opacity: 0.7 !important;
  line-height: 1.2 !important;
  text-transform: uppercase;
  font-weight: 500;
}
.brand-text { gap: 4px !important; display: flex !important; flex-direction: column; }
/* Live dot — sage-green status indicator (target HK·SENTINEL look).
   Sits to the LEFT of the wordmark column, vertically centred. */
#hdr .brand {
  padding-left: 14px !important;
}
#hdr .brand #live-dot {
  position: absolute;
  top: 50%; left: 0;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ctp-green) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--ctp-green) 70%, transparent);
  margin: 0 !important;
  animation: tn-pulse 2.4s ease-in-out infinite;
}

/* FIX 10 + HK·SENTINEL — right meta is just LIVE + LAST (no clock). */
.live-indicator {
  flex: 0 0 auto !important;
  min-width: 150px !important;
  max-width: 200px !important;
  white-space: nowrap;
  overflow: visible !important;
}
#last-new-pill {
  flex: 0 0 auto !important;
  min-width: 170px !important;
  max-width: 240px !important;
  white-space: nowrap;
  overflow: visible !important;
}
.hdr-meta { overflow: visible !important; }
#hdr #clock { display: none !important; }   /* clock hidden in header per target */

/* LIVE indicator — pulse + label + rate + pause icon.
   Render inline so it reads "● LIVE 7.4/MIN ‖" on a single line. */
.live-indicator {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  grid-template-rows: none !important;
  padding: 0 12px !important;
  height: 100% !important;
}
.live-indicator .live-pulse {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ctp-green) !important;
  box-shadow: 0 0 8px color-mix(in srgb, var(--ctp-green) 65%, transparent) !important;
  flex: 0 0 auto;
}
.live-indicator .live-label {
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: var(--ctp-green) !important;
  text-transform: uppercase;
  line-height: 1;
}
.live-indicator .live-epm {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  letter-spacing: 0;
  text-transform: lowercase;
}
.live-indicator .live-pause {
  display: inline-flex !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 4px !important;
  margin-left: 4px;
}
.live-indicator .live-pause-text { display: none; }
.live-indicator .live-pause-icon { font-size: 12px; }

/* LAST update tile — single-line "LAST 1m" label + value pair. */
#last-new-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 0 12px !important;
  font-family: var(--font-mono) !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  text-transform: none;
  letter-spacing: 0;
  height: 100% !important;
  grid-template-rows: none !important;
}
#last-new-pill::before {
  content: "LAST";
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0;
  text-transform: uppercase;
}

/* Native checkboxes / radios — accent-cyan, dark background.
   Without this they paint user-agent white and break the "zero white
   pixels" guarantee. */
input[type="checkbox"]:not(.sr-only),
input[type="radio"]:not(.sr-only) {
  accent-color: var(--accent-cyan);
  background-color: var(--bg-inset);
  color-scheme: dark;
}

/* Safety net — defensive backstop. If any future layout shell loses
   its background, the html element falls back to canvas. The single
   !important on `html` only is acceptable as documented in theme.md. */
html { background-color: var(--bg-app) !important; }


/* ════════════════════════════════════════════════════════════════════
   FONT-LOCK + TYPE-RAMP — final cascade layer (FIX 1 + 2)
   Browsers don't inherit font-family onto form controls by default;
   without these, buttons/inputs render in Arial / -apple-system. The
   ramp guard ensures every component picks up a value from the
   allowed 7-step set (11/12/13/15/18/24/32).
   ════════════════════════════════════════════════════════════════════ */

html, body, button, input, select, textarea {
  font-family: var(--font-sans) !important;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11", "tnum";
}
.num, .delta, code, kbd, .mono, [class*="kpi-"] {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}
/* Drop any UI weight not in {400, 500, 700}. The token swap above
   already neutralises var(--fw-semibold), but a few literals exist. */
:where([style*="font-weight: 600"]),
:where([class*="-bold"]) { font-weight: 700; }

/* ════════════════════════════════════════════════════════════════════
   Argus full-automation tab
   ════════════════════════════════════════════════════════════════════ */
.automation-panel { padding: 16px 20px; }
.automation-panel .auto-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.automation-panel .auto-head h2 { margin: 0; font-size: 18px; font-weight: 700; }
.automation-panel .auto-head-controls { display: flex; gap: 8px; align-items: center; }
.automation-panel .auto-pills {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px;
}
.automation-panel .auto-pills .chip {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ctp-text) 10%, transparent);
}
.automation-panel .auto-pills .chip-green {
  background: rgba(58,210,159,0.15); color: var(--ctp-teal);
  border-color: rgba(58,210,159,0.4);
}
.automation-panel .auto-pills .chip-muted {
  background: color-mix(in srgb, var(--ctp-text) 4%, transparent); color: var(--text-muted);
}
.automation-panel .chip-red {
  background: rgba(255,99,99,0.18); color: var(--ctp-maroon);
  border: 1px solid rgba(255,99,99,0.4); padding: 2px 8px; border-radius: 999px;
  font-size: 11px;
}
.automation-panel h3 { font-size: 13px; margin: 18px 0 6px; }
.automation-panel .auto-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
  margin-bottom: 12px;
}
.automation-panel .auto-table th,
.automation-panel .auto-table td {
  text-align: left; padding: 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--ctp-text) 5%, transparent);
}
.automation-panel .auto-table th { color: var(--text-muted); font-weight: 500; }
.automation-panel .auto-table td.num,
.automation-panel .auto-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.automation-panel .auto-table td.nowrap { white-space: nowrap; }
.automation-panel .auto-table .small { font-size: 11px; }
.automation-panel .auto-table code {
  background: color-mix(in srgb, var(--ctp-text) 4%, transparent); padding: 1px 5px; border-radius: 3px;
}
.automation-panel .auto-detail-pair { margin-right: 8px; }
.automation-panel .auto-thresholds { margin: 8px 0 16px; }
.automation-panel .auto-thresholds summary { cursor: pointer; padding: 4px 0; }

/* ─── Catppuccin theme picker ─────────────────────────────────────
   Lives next to the LIVE pill in .hdr-meta. Compact select with a
   muted label so it doesn't compete with the live counter. */
.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-2);
  border-left: 1px solid var(--border-subtle);
  margin-left: var(--space-1);
  height: 32px;
}
.theme-picker-label {
  font-size: 11px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}
.theme-picker-select {
  background: var(--bg-elevated);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs-size);
  padding: 4px 8px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.theme-picker-select:hover  { border-color: var(--accent-primary); }
.theme-picker-select:focus  { border-color: var(--accent-primary); outline: 0; }

/* ════════════════════════════════════════════════════════════════════
   DENSITY-ULTRA LAYER (legacy power-user mode) — bottom-panel data tables only
   --------------------------------------------------------------------
   Activated by adding `.density-ultra` to #bottom (the bottom panel
   root). All rules are scoped under that selector so the world map,
   histogram, KPI strip, sidebar, Recent Events panel, and theme
   switcher are untouched.

   Targets (verified by getBoundingClientRect().height):
     - Tab bar         ≤ 28 px
     - <th>            22 px
     - <td>  one-line  24 px
     - <td>  two-line  32 px
     - Card rows       36 px
     - Pills/badges    16 px
     - Buttons         18 px
     - Severity dots    5 px
     - Sparklines      8 × 56 px

   Catppuccin tokens only — never raw hex.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Tab bar ──────────────────────────────────────────────────── */
#bottom.density-ultra .tabs {
  height: 28px !important;
  min-height: 28px;
  padding: 0 var(--space-2);
  gap: 4px;
  border-bottom: 1px solid var(--ctp-surface0);
}
#bottom.density-ultra .tab {
  height: 26px !important;
  padding: 5px 9px !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  gap: 4px;
  border-bottom-width: 1px !important;
}
#bottom.density-ultra .tab.active {
  border-bottom-color: var(--ctp-mauve) !important;
  color: var(--ctp-text) !important;
}
#bottom.density-ultra .tab:hover { color: var(--ctp-subtext1) !important; }
#bottom.density-ultra .tab .tab-count,
#bottom.density-ultra .tab .count,
#bottom.density-ultra .tab .badge {
  height: 14px;
  padding: 0 5px !important;
  font-size: 9.5px !important;
  border-radius: 7px !important;
  margin-inline-start: 4px !important;
  letter-spacing: 0;
  display: inline-flex; align-items: center;
}

/* Search input + adjacent header controls */
#bottom.density-ultra #search,
#bottom.density-ultra .tabs #search {
  height: 22px !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  border-radius: var(--radius-sm) !important;
}
#bottom.density-ultra .tabs .help-btn,
#bottom.density-ultra .tabs .syntax-btn,
#bottom.density-ultra .tabs .tlp-chip,
#bottom.density-ultra .tabs .strict-chip,
#bottom.density-ultra .tabs .density-toggle {
  height: 22px !important;
  padding: 0 6px !important;
  font-size: 10px !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex; align-items: center;
}
#bottom.density-ultra .density-toggle {
  width: 22px; padding: 0 !important;
  background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
  color: var(--ctp-subtext1); cursor: pointer;
  justify-content: center;
}
#bottom.density-ultra .density-toggle:hover { color: var(--ctp-text); }

/* ─── Tables — global ──────────────────────────────────────────── */
#bottom.density-ultra table.data,
#bottom.density-ultra table.tbl-v2,
#bottom.density-ultra table.auto-table,
#bottom.density-ultra table.data-malware,
#bottom.density-ultra table.data-cves,
#bottom.density-ultra table.data-hunts,
#bottom.density-ultra table {
  border-collapse: collapse !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  width: 100%;
}
#bottom.density-ultra thead th {
  padding: 4px 8px !important;
  height: 22px !important;
  font-size: 9.5px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--ctp-subtext0) !important;
  border-bottom: 1px solid var(--ctp-surface0) !important;
  font-weight: 500 !important;
  background: transparent !important;
  white-space: nowrap;
}
#bottom.density-ultra tbody td {
  padding: 3px 8px !important;
  height: 24px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  background: transparent !important;
}
#bottom.density-ultra tbody tr {
  min-height: 0 !important;
  background: transparent !important;
}
/* Strip every legacy zebra / alt-row tint. */
#bottom.density-ultra tbody tr:nth-child(even),
#bottom.density-ultra tbody tr:nth-child(odd),
#bottom.density-ultra tbody tr.alt-row { background: transparent !important; }
#bottom.density-ultra tbody tr:hover td {
  background: color-mix(in srgb, var(--ctp-surface0) 60%, transparent) !important;
}
#bottom.density-ultra tbody tr.cursor-pointer { cursor: pointer; }

/* ─── Inline elements inside cells ─────────────────────────────── */
/* Pills, chips, badges — the spec calls out HSBC, ANTHROPIC, VENDOR,
   HK-REG, HK 20, OPEN, HIGH, KEV 2026-04-28, REPORT:19906, IOC:45845,
   T1556.006, KQL, FALCO, WINDOWS, CROSS, STEALER, IMPLANT, BACKDOOR,
   CONFIRMED, AMBER+STRICT, TLP:CLEAR. They all share .chip / .pill /
   .badge / specific subclasses. Selector list catches every variant. */
#bottom.density-ultra .chip,
#bottom.density-ultra .pill,
#bottom.density-ultra .badge,
#bottom.density-ultra .chip-actor,
#bottom.density-ultra .chip-victim,
#bottom.density-ultra .chip-attck,
#bottom.density-ultra .chip-attack,
#bottom.density-ultra .src-mono-accent,
#bottom.density-ultra .cat-pill,
#bottom.density-ultra td .src,
#bottom.density-ultra .ref-pill,
#bottom.density-ultra .alias,
#bottom.density-ultra .kev-pill,
#bottom.density-ultra .eitw-pill,
#bottom.density-ultra .phase-tag,
#bottom.density-ultra .platform-tag,
#bottom.density-ultra .status-pill,
#bottom.density-ultra .sev-pill,
#bottom.density-ultra .sla-pill,
#bottom.density-ultra .query-type-chip,
#bottom.density-ultra .brand-pill {
  padding: 1px 5px !important;
  font-size: 9.5px !important;
  line-height: 1.4 !important;
  height: 16px !important;
  min-height: 16px !important;
  border-radius: 3px !important;
  letter-spacing: 0.03em !important;
  display: inline-flex !important; align-items: center; box-sizing: border-box;
  white-space: nowrap;
}

/* Action buttons (ACCEPT / EDIT… / FILTER… / RULES). */
#bottom.density-ultra .btn,
#bottom.density-ultra button.btn,
#bottom.density-ultra .row-actions button,
#bottom.density-ultra .action-btn,
#bottom.density-ultra .icon-btn {
  padding: 1px 7px !important;
  font-size: 10px !important;
  height: 18px !important;
  min-height: 18px !important;
  border-radius: 3px !important;
  display: inline-flex; align-items: center; line-height: 1;
}
#bottom.density-ultra td .row-actions,
#bottom.density-ultra td.actions,
#bottom.density-ultra td .action-cell {
  display: inline-flex; gap: 3px !important; align-items: center;
}

/* Score chips (the orange 30 / 25 in Brand Certs). */
#bottom.density-ultra .score-chip,
#bottom.density-ultra .score,
#bottom.density-ultra .phish-score {
  width: 22px !important;
  height: 18px !important;
  font-size: 10px !important;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important; border-radius: 3px !important;
}

/* Severity / status dots. */
#bottom.density-ultra .dot,
#bottom.density-ultra .status-dot,
#bottom.density-ultra .sev-dot {
  width: 5px !important; height: 5px !important;
}

/* Sparkline / TREND bar (Actors 7D Trend column). */
#bottom.density-ultra .mini-sparkline,
#bottom.density-ultra .sparkline,
#bottom.density-ultra td .spark-svg {
  width: 56px !important;
  height: 8px !important;
}

/* CVE / source links inside cells. */
#bottom.density-ultra td a,
#bottom.density-ultra td .cve-link {
  text-decoration: none !important;
  color: var(--ctp-sapphire) !important;
  font-size: 11px !important;
}
#bottom.density-ultra td a:hover { text-decoration: underline !important; }

/* Inline timestamps (8h ago, 7m ago, 2026-04-28, never). */
#bottom.density-ultra td .ts,
#bottom.density-ultra td.ts-cell,
#bottom.density-ultra td .timestamp,
#bottom.density-ultra td .last-poll,
#bottom.density-ultra td .when-cell,
#bottom.density-ultra .seen-cell {
  font-size: 10px !important;
  color: var(--ctp-overlay1) !important;
  white-space: nowrap;
}

/* ─── Per-tab specifics ────────────────────────────────────────── */

/* Actors: collapse "LATEST ACTIVITY" stacked title+meta into one line.
   Markup is <div class="latest-title">…</div><div class="latest-meta">
   <span class="src">…</span><span class="ts">…</span></div>. We make
   all four spans inline and inject the · separators via CSS, then
   ellipsis-truncate the whole composite. */
#bottom.density-ultra .latest-title,
#bottom.density-ultra .latest-meta {
  display: inline !important;
  white-space: nowrap !important;
}
#bottom.density-ultra .latest-meta { margin-left: 0 !important; }
#bottom.density-ultra .latest-meta::before {
  content: " · "; color: var(--ctp-overlay0);
}
#bottom.density-ultra .latest-meta .src {
  color: var(--ctp-sapphire) !important;
  font-size: 10px !important;
  margin-right: 4px;
}
#bottom.density-ultra .latest-meta .ts {
  color: var(--ctp-overlay1) !important;
  font-size: 10px !important;
}
#bottom.density-ultra .latest-meta .src + .ts::before {
  content: " · "; color: var(--ctp-overlay0); margin-right: 2px;
}
/* Container cell ellipsis. */
#bottom.density-ultra td.actors-latest,
#bottom.density-ultra .data-actors td:nth-child(4),
#bottom.density-ultra tr[data-actor] td:nth-child(4) {
  max-width: 0;     /* unlocks ellipsis inside table layout */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Country column ≤ 36 px. */
#bottom.density-ultra tr[data-actor] td:nth-child(3) {
  max-width: 36px; min-width: 36px; white-space: nowrap;
}

/* Victims: chip(s) + truncated description on a single line. */
#bottom.density-ultra .victim-cell .victim-primary,
#bottom.density-ultra .victim-cell .victim-desc {
  display: inline !important; white-space: nowrap;
}
#bottom.density-ultra .victim-cell {
  max-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bottom.density-ultra .victim-cell .victim-desc {
  color: var(--ctp-subtext1) !important;
  font-size: 11px !important;
  margin-left: 4px;
}
#bottom.density-ultra .victim-cell .victim-desc::before {
  content: ""; /* description already separated by chip's own end */
}
/* WHEN column 60 px. */
#bottom.density-ultra .victim-when {
  width: 60px !important; max-width: 60px;
  font-size: 10px !important; color: var(--ctp-overlay1) !important;
}

/* Detections / Noise: TITLE column fills, ACTIONS ≤ 140 px. */
#bottom.density-ultra .det-row td.val,
#bottom.density-ultra tbody td.title-cell {
  max-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bottom.density-ultra td.actions,
#bottom.density-ultra td .row-actions {
  max-width: 140px;
}

/* Hunts: ATT&CK chips inline, query monospace 10 px overlay1. */
#bottom.density-ultra .hunt-attack-cell { display: inline-flex; gap: 3px; }
#bottom.density-ultra .hunt-query {
  font-family: var(--font-mono);
  font-size: 10px !important;
  color: var(--ctp-overlay1) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-block; max-width: 100%; vertical-align: middle;
}

/* Brand Certs. */
#bottom.density-ultra .data-certs td.score-cell { width: 26px; }
#bottom.density-ultra .data-certs td.brand-cell .brand-pill { height: 16px !important; }
#bottom.density-ultra .data-certs td.domain-cell {
  font-family: var(--font-mono);
  font-size: 11px !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 280px;
}
#bottom.density-ultra .data-certs td.why-cell {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}

/* Malware: phase tag colour-mapped at 14 px. */
#bottom.density-ultra .data-malware .phase-tag {
  height: 14px !important; padding: 0 5px !important;
  font-size: 9.5px !important; border-radius: 2px !important;
  text-transform: uppercase; letter-spacing: 0.03em;
}
#bottom.density-ultra .phase-tag[data-phase="stealer"],
#bottom.density-ultra .phase-tag[data-phase="loader"] {
  background: color-mix(in srgb, var(--ctp-sapphire) 18%, transparent);
  color: var(--ctp-sapphire);
}
#bottom.density-ultra .phase-tag[data-phase="implant"],
#bottom.density-ultra .phase-tag[data-phase="backdoor"],
#bottom.density-ultra .phase-tag[data-phase="rat"] {
  background: color-mix(in srgb, var(--ctp-maroon) 20%, transparent);
  color: var(--ctp-maroon);
}
#bottom.density-ultra .phase-tag[data-phase="wiper"],
#bottom.density-ultra .phase-tag[data-phase="ransomware"] {
  background: color-mix(in srgb, var(--ctp-red) 20%, transparent);
  color: var(--ctp-red);
}
#bottom.density-ultra .data-malware td.aliases-cell {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}

/* CVEs. */
#bottom.density-ultra .data-cves .eitw-pill {
  height: 14px !important; background: color-mix(in srgb, var(--ctp-red) 20%, transparent);
  color: var(--ctp-red); padding: 0 5px !important; font-size: 9.5px !important;
}
#bottom.density-ultra .data-cves .kev-pill {
  height: 14px !important; padding: 0 5px !important; font-size: 9.5px !important;
  background: color-mix(in srgb, var(--ctp-peach) 20%, transparent);
  color: var(--ctp-peach);
}
#bottom.density-ultra .data-cves .patch-yes { color: var(--ctp-green); font-size: 10px !important; }
#bottom.density-ultra .data-cves .patch-no  { color: var(--ctp-red); font-size: 10px !important; }

/* Cases. */
#bottom.density-ultra .data-cases td.id-cell {
  width: 44px; font-family: var(--font-mono); font-size: 10px !important;
  color: var(--ctp-overlay1);
}
#bottom.density-ultra .data-cases td.refs-cell {
  display: flex; gap: 3px; align-items: center; flex-wrap: nowrap;
  max-width: 220px; overflow: hidden;
}
#bottom.density-ultra .data-cases td.sla-cell { width: 36px; }

/* Research: convert hyp-card grid to a dense 28 px row list. */
#bottom.density-ultra .hyp-grid {
  display: flex !important; flex-direction: column !important;
  gap: 0 !important;
}
#bottom.density-ultra .hyp-col { width: 100% !important; }
#bottom.density-ultra .hyp-col-h {
  font-size: 9.5px !important; padding: 4px 8px !important;
  height: 22px !important; color: var(--ctp-subtext0) !important;
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 1px solid var(--ctp-surface0);
}
#bottom.density-ultra .hyp-col-body {
  display: flex !important; flex-direction: column !important;
}
#bottom.density-ultra .hyp-card {
  height: 28px !important; max-height: 36px !important;
  padding: 4px 8px !important; margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ctp-surface0) !important;
  background: transparent !important;
  display: flex !important; align-items: center;
  gap: 8px;
  border-radius: 0 !important;
}
#bottom.density-ultra .hyp-card:hover {
  background: color-mix(in srgb, var(--ctp-surface0) 60%, transparent) !important;
}
#bottom.density-ultra .hyp-card-title {
  flex: 1 1 auto; min-width: 0;
  font-size: 11px !important; font-weight: 400 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ctp-text);
}
#bottom.density-ultra .hyp-card-meta {
  font-size: 10px !important;
  color: var(--ctp-overlay1) !important;
  flex-shrink: 0;
}

/* Automation. */
#bottom.density-ultra .auto-table th { padding: 4px 8px !important; height: 22px !important; }
#bottom.density-ultra .auto-table td { padding: 3px 8px !important; height: 24px !important; }
#bottom.density-ultra .auto-table td:first-child {
  width: 220px; max-width: 220px;
  font-family: var(--font-mono);
  font-size: 11px !important;
  text-align: left !important;
  /* Crucial: prevent left-edge clipping the user reported. */
  overflow: visible !important; white-space: nowrap;
  padding-left: 8px !important;
  color: var(--ctp-subtext1);
}
#bottom.density-ultra .auto-table td:nth-child(2) {
  width: 80px; max-width: 80px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  color: var(--ctp-text);
}
#bottom.density-ultra .auto-pills .auto-pill {
  height: 16px !important; padding: 0 5px !important; font-size: 9.5px !important;
}
#bottom.density-ultra .auto-thresholds summary {
  font-size: 10px !important; padding: 4px 0 !important;
}

/* Noise Contributors subheader compaction. */
#bottom.density-ultra .noise-widget h2,
#bottom.density-ultra .noise-widget .noise-head {
  height: 22px !important; padding: 0 8px !important;
  font-size: 10px !important; color: var(--ctp-subtext0) !important;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 0.06em;
}
#bottom.density-ultra .noise-widget .noise-head .rules-btn {
  height: 18px !important; padding: 0 6px !important; font-size: 10px !important;
  margin-left: auto;
}

/* Click-target preservation: tr is 24 px tall, but click areas need
   ≥20 px. The tr already meets that. Per-row buttons are 18 px tall —
   bump their hit area via ::before with negative inset (no visual
   change). */
#bottom.density-ultra .btn,
#bottom.density-ultra button.btn { position: relative; }
#bottom.density-ultra .btn::before,
#bottom.density-ultra button.btn::before {
  content: ""; position: absolute; inset: -3px -2px;
}

/* Caption / subtext under tab headings — collapse to the same 22 px
   row used by the table header so the body table sits flush. */
#bottom.density-ultra .block-pad,
#bottom.density-ultra .block-pad-lg,
#bottom.density-ultra .muted.block-pad,
#bottom.density-ultra .muted.block-pad-lg {
  padding: 2px 8px !important;
  font-size: 10px !important;
  margin: 0 !important;
}

/* Headline at the top of some tabs (e.g. Cases "MY QUEUE", Research). */
#bottom.density-ultra h2,
#bottom.density-ultra h3 {
  font-size: 11px !important;
  margin: 4px 8px !important;
  letter-spacing: 0.04em;
}

/* Reduce the bottom padding of the panel so the last row isn't lost. */
#bottom.density-ultra #tab-body { padding: 0 !important; }

/* ─── Density-compact: overpower fixed-height rules ──────────────
   `.tbl-v2 tbody tr { height: 40px }` and `table.data tbody tr`
   landed at higher cascade priority than the generic `tbody tr`
   override above, leaving every rendered row at 40px. Pin every
   selector explicitly. */
#bottom.density-ultra .tbl-v2 tbody tr,
#bottom.density-ultra table.data tbody tr,
#bottom.density-ultra table.tbl-v2 tbody tr,
#bottom.density-ultra .data-malware tbody tr,
#bottom.density-ultra .data-cves tbody tr,
#bottom.density-ultra .data-hunts tbody tr,
#bottom.density-ultra .data-cases tbody tr,
#bottom.density-ultra .data-actors tbody tr,
#bottom.density-ultra .auto-table tbody tr,
#bottom.density-ultra tbody tr {
  height: 24px !important;
  min-height: 0 !important;
  max-height: 32px;     /* allow two-line cells but no more */
  background: transparent !important;
}
#bottom.density-ultra .tbl-v2 tbody td,
#bottom.density-ultra table.data tbody td {
  padding: 3px 8px !important;
  height: 24px !important;
  min-height: 0 !important;
  background: transparent !important;
}
#bottom.density-ultra .tbl-v2 tbody td:first-child,
#bottom.density-ultra .tbl-v2 tbody td:last-child {
  padding-inline: 8px !important;
}
#bottom.density-ultra .tbl-v2 tbody tr:hover {
  background: color-mix(in srgb, var(--ctp-surface0) 60%, transparent) !important;
}
#bottom.density-ultra table.data tbody tr:nth-child(even),
#bottom.density-ultra table.data tbody tr:nth-child(odd) {
  background: transparent !important;
}

/* Detections / Hunts pick up a redundant border-top from
   `.tbl-v2 tbody tr + tr td { border-top: 1px ... }` (line 2612)
   which adds 1px on top of the bottom border, pushing the rendered
   height to 26. Strip the duplicate. */
#bottom.density-ultra .tbl-v2 tbody tr + tr td {
  border-top: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════
   DENSITY-COMPACT — calibrated middle ("Bloomberg / Linear" target)
   --------------------------------------------------------------------
   Replaces the previous overshoot (renamed .density-ultra). New ratio:
   denser than comfortable (was ~36px rows) but readable for long
   scanning sessions. Targets verified by getBoundingClientRect():
     - tab bar         32 px
     - <th>            26 px
     - <td>  one-line  30 px
     - <td>  two-line  40 px (Cases title, Research cluster card)
     - pills/badges    20 px
     - action buttons  22 px
     - severity dots    6 px
     - sparkline      10 × 64 px

   Truncation policy:  body-text columns reserve a generous min-width
   before ellipsis kicks in, so Victim descriptions / Detection titles
   / Hunt queries no longer cut off after a handful of characters.

   Default density for new users (set in preinit.js).
   Catppuccin tokens only — no raw hex.
   ════════════════════════════════════════════════════════════════════ */

/* ─── Tab bar ──────────────────────────────────────────────────── */
#bottom.density-compact .tabs {
  height: 32px !important;
  min-height: 32px;
  padding: 0 var(--space-2);
  gap: 4px;
  border-bottom: 1px solid var(--ctp-surface0);
}
#bottom.density-compact .tab {
  height: 32px !important;
  padding: 7px 11px !important;
  font-size: 12px !important;
  letter-spacing: 0 !important;
  gap: 5px;
  border-bottom-width: 2px !important;
}
#bottom.density-compact .tab.active {
  border-bottom-color: var(--ctp-mauve) !important;
  color: var(--ctp-text) !important;
}
#bottom.density-compact .tab:hover { color: var(--ctp-subtext1) !important; }
#bottom.density-compact .tab .tab-count,
#bottom.density-compact .tab .count,
#bottom.density-compact .tab .badge {
  height: 16px;
  padding: 1px 6px !important;
  font-size: 10.5px !important;
  border-radius: 8px !important;
  margin-inline-start: 5px !important;
  letter-spacing: 0;
  display: inline-flex; align-items: center;
}

/* Search input + adjacent header controls */
#bottom.density-compact #search,
#bottom.density-compact .tabs #search {
  height: 26px !important;
  font-size: 11.5px !important;
  padding: 0 10px !important;
  border-radius: var(--radius-sm) !important;
}
#bottom.density-compact .tabs .help-btn,
#bottom.density-compact .tabs .syntax-btn,
#bottom.density-compact .tabs .tlp-chip,
#bottom.density-compact .tabs .strict-chip,
#bottom.density-compact .tabs .density-toggle,
#bottom.density-compact #search-help,
#bottom.density-compact #clearance-chip {
  height: 26px !important;
  padding: 0 9px !important;
  font-size: 11.5px !important;
  border-radius: var(--radius-sm) !important;
  display: inline-flex; align-items: center;
}
#bottom.density-compact .density-toggle {
  width: 26px; padding: 0 !important;
  background: var(--ctp-surface0); border: 1px solid var(--ctp-surface1);
  color: var(--ctp-subtext1); cursor: pointer;
  justify-content: center;
}
#bottom.density-compact .density-toggle:hover { color: var(--ctp-text); }

/* ─── Tables — global ──────────────────────────────────────────── */
#bottom.density-compact table.data,
#bottom.density-compact table.tbl-v2,
#bottom.density-compact table.auto-table,
#bottom.density-compact table.data-malware,
#bottom.density-compact table.data-cves,
#bottom.density-compact table.data-hunts,
#bottom.density-compact table {
  border-collapse: collapse !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
  width: 100%;
}
#bottom.density-compact thead th {
  padding: 6px 12px !important;
  height: 26px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase;
  color: var(--ctp-subtext0) !important;
  border-bottom: 1px solid var(--ctp-surface0) !important;
  font-weight: 500 !important;
  background: transparent !important;
  white-space: nowrap;
}
#bottom.density-compact tbody td {
  padding: 5px 12px !important;
  height: 30px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--ctp-surface0) !important;
  color: var(--ctp-text) !important;
  background: transparent !important;
}
#bottom.density-compact tbody tr {
  min-height: 0 !important;
  background: transparent !important;
}
/* No zebra. */
#bottom.density-compact tbody tr:nth-child(even),
#bottom.density-compact tbody tr:nth-child(odd),
#bottom.density-compact tbody tr.alt-row { background: transparent !important; }
#bottom.density-compact tbody tr:hover td {
  background: color-mix(in srgb, var(--ctp-surface0) 50%, transparent) !important;
}
#bottom.density-compact tbody tr.cursor-pointer { cursor: pointer; }
/* Override legacy fixed-height rules. */
#bottom.density-compact .tbl-v2 tbody tr,
#bottom.density-compact table.data tbody tr {
  height: 30px !important;
  min-height: 0 !important;
  max-height: 40px;
}
#bottom.density-compact .tbl-v2 tbody tr + tr td { border-top: 0 !important; }
#bottom.density-compact .tbl-v2 tbody td:first-child,
#bottom.density-compact .tbl-v2 tbody td:last-child {
  padding-inline: 12px !important;
}

/* ─── Inline elements inside cells ─────────────────────────────── */
#bottom.density-compact .chip,
#bottom.density-compact .pill,
#bottom.density-compact .badge,
#bottom.density-compact .chip-actor,
#bottom.density-compact .chip-victim,
#bottom.density-compact .chip-attck,
#bottom.density-compact .chip-attack,
#bottom.density-compact .src-mono-accent,
#bottom.density-compact .cat-pill,
#bottom.density-compact td .src,
#bottom.density-compact .ref-pill,
#bottom.density-compact .alias,
#bottom.density-compact .kev-pill,
#bottom.density-compact .eitw-pill,
#bottom.density-compact .phase-tag,
#bottom.density-compact .platform-tag,
#bottom.density-compact .status-pill,
#bottom.density-compact .sev-pill,
#bottom.density-compact .sla-pill,
#bottom.density-compact .query-type-chip,
#bottom.density-compact .brand-pill {
  padding: 2px 7px !important;
  font-size: 10.5px !important;
  line-height: 1.4 !important;
  height: 20px !important;
  min-height: 20px !important;
  border-radius: 4px !important;
  letter-spacing: 0.02em !important;
  display: inline-flex !important; align-items: center; box-sizing: border-box;
  white-space: nowrap;
}

/* Action buttons */
#bottom.density-compact .btn,
#bottom.density-compact button.btn,
#bottom.density-compact .row-actions button,
#bottom.density-compact .action-btn,
#bottom.density-compact .icon-btn {
  padding: 3px 9px !important;
  font-size: 11px !important;
  height: 22px !important;
  min-height: 22px !important;
  border-radius: 4px !important;
  display: inline-flex; align-items: center; line-height: 1;
}
#bottom.density-compact td .row-actions,
#bottom.density-compact td.actions,
#bottom.density-compact td .action-cell {
  display: inline-flex; gap: 5px !important; align-items: center;
}

/* Score chips (Brand Certs) */
#bottom.density-compact .score-chip,
#bottom.density-compact .score,
#bottom.density-compact .phish-score {
  width: 26px !important;
  height: 20px !important;
  font-size: 11px !important;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 !important; border-radius: 4px !important;
}

/* Severity / status dots */
#bottom.density-compact .dot,
#bottom.density-compact .status-dot,
#bottom.density-compact .sev-dot {
  width: 6px !important; height: 6px !important;
}

/* Sparkline / TREND bar */
#bottom.density-compact .mini-sparkline,
#bottom.density-compact .sparkline,
#bottom.density-compact td .spark-svg {
  width: 64px !important;
  height: 10px !important;
}

/* Source / actor / CVE links */
#bottom.density-compact td a,
#bottom.density-compact td .cve-link,
#bottom.density-compact td .src-mono-accent,
#bottom.density-compact .latest-meta .src {
  text-decoration: none !important;
  color: var(--ctp-sapphire) !important;
  font-size: 11.5px !important;
}
#bottom.density-compact td a:hover { text-decoration: underline !important; }

/* Inline timestamps */
#bottom.density-compact td .ts,
#bottom.density-compact td.ts-cell,
#bottom.density-compact td .timestamp,
#bottom.density-compact td .last-poll,
#bottom.density-compact td .when-cell,
#bottom.density-compact .seen-cell,
#bottom.density-compact .latest-meta .ts {
  font-size: 11px !important;
  color: var(--ctp-overlay1) !important;
  white-space: nowrap;
}

/* ─── Per-tab specifics ────────────────────────────────────────── */

/* Actors: collapse "LATEST ACTIVITY" stacked title+meta to one line.
   Reserve 360px before ellipsis on the title. */
#bottom.density-compact .latest-title,
#bottom.density-compact .latest-meta {
  display: inline !important;
  white-space: nowrap !important;
}
#bottom.density-compact .latest-meta::before {
  content: " · "; color: var(--ctp-overlay0);
}
#bottom.density-compact .latest-meta .src + .ts::before {
  content: " · "; color: var(--ctp-overlay0); margin-right: 2px;
}
/* Actors LATEST cell — reserve 360 px, then ellipsis. */
#bottom.density-compact tr[data-actor] td:nth-child(4) {
  min-width: 360px;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bottom.density-compact tr[data-actor] td:nth-child(3) {
  max-width: 36px; min-width: 36px; white-space: nowrap;
}

/* Victims: chip + truncated description on a single line.
   Reserve at least 240 px on the cell, with description getting at
   least 180 px after the chip. */
#bottom.density-compact .victim-cell .victim-primary,
#bottom.density-compact .victim-cell .victim-desc {
  display: inline !important; white-space: nowrap;
}
#bottom.density-compact .victim-cell {
  min-width: 240px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bottom.density-compact .victim-cell .victim-desc {
  color: var(--ctp-subtext1) !important;
  font-size: 12px !important;
  margin-left: 6px;
  display: inline-block !important;
  min-width: 180px;
  max-width: calc(100% - 80px);    /* reserve ~80 px for chip + spacing */
  overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
#bottom.density-compact .victim-when {
  width: 60px !important; max-width: 60px;
  font-size: 11px !important; color: var(--ctp-overlay1) !important;
}

/* Detections: TITLE column flex-grow with min-width 320 px. */
#bottom.density-compact .det-row td.val,
#bottom.density-compact tbody td.title-cell {
  min-width: 320px;
  width: auto;
  max-width: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bottom.density-compact td.actions,
#bottom.density-compact td .row-actions {
  min-width: 156px;        /* 3×22 + 2×5 + padding */
  max-width: 200px;
}

/* Hunts: TITLE 360 px, QUERY 200 px, ATT&CK chips inline */
#bottom.density-compact .data-hunts td.hunt-title,
#bottom.density-compact .data-hunts td.title-cell {
  min-width: 360px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bottom.density-compact .hunt-query,
#bottom.density-compact .data-hunts td.query-cell {
  min-width: 200px;
  font-family: var(--font-mono);
  font-size: 11px !important;
  color: var(--ctp-overlay1) !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bottom.density-compact .hunt-attack-cell { display: inline-flex; gap: 5px; }

/* Brand Certs: DOMAIN ≥ 220 px, WHY ≥ 200 px */
#bottom.density-compact .data-certs td.score-cell { width: 30px; }
#bottom.density-compact .data-certs td.brand-cell .brand-pill { height: 20px !important; }
#bottom.density-compact .data-certs td.domain-cell {
  font-family: var(--font-mono);
  font-size: 11.5px !important;
  min-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bottom.density-compact .data-certs td.why-cell {
  min-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Malware: phase tag colour-mapped at 20 px */
#bottom.density-compact .data-malware .phase-tag {
  height: 20px !important; padding: 2px 7px !important;
  font-size: 10.5px !important; border-radius: 4px !important;
  text-transform: uppercase; letter-spacing: 0.02em;
}
#bottom.density-compact .phase-tag[data-phase="stealer"],
#bottom.density-compact .phase-tag[data-phase="loader"] {
  background: color-mix(in srgb, var(--ctp-sapphire) 18%, transparent);
  color: var(--ctp-sapphire);
}
#bottom.density-compact .phase-tag[data-phase="implant"],
#bottom.density-compact .phase-tag[data-phase="backdoor"],
#bottom.density-compact .phase-tag[data-phase="rat"] {
  background: color-mix(in srgb, var(--ctp-maroon) 20%, transparent);
  color: var(--ctp-maroon);
}
#bottom.density-compact .phase-tag[data-phase="wiper"],
#bottom.density-compact .phase-tag[data-phase="ransomware"] {
  background: color-mix(in srgb, var(--ctp-red) 20%, transparent);
  color: var(--ctp-red);
}
#bottom.density-compact .data-malware td.aliases-cell {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}

/* CVEs: TITLE flex with min 380 px */
#bottom.density-compact .data-cves td.cve-title,
#bottom.density-compact .data-cves td.title-cell {
  min-width: 380px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#bottom.density-compact .data-cves .eitw-pill {
  height: 20px !important; background: color-mix(in srgb, var(--ctp-red) 20%, transparent);
  color: var(--ctp-red); padding: 2px 7px !important; font-size: 10.5px !important;
}
#bottom.density-compact .data-cves .kev-pill {
  height: 20px !important; padding: 2px 7px !important; font-size: 10.5px !important;
  background: color-mix(in srgb, var(--ctp-peach) 20%, transparent);
  color: var(--ctp-peach);
}
#bottom.density-compact .data-cves .patch-yes { color: var(--ctp-green); font-size: 11px !important; }
#bottom.density-compact .data-cves .patch-no  { color: var(--ctp-red); font-size: 11px !important; }

/* Cases: title cell two-line at 40 px (per spec). The renderer
   actually emits class="case-row"; pad cells so even short titles
   ride the 40 px row height. */
#bottom.density-compact .data-cases tbody tr,
#bottom.density-compact tr.case-row,
#bottom.density-compact .case-row {
  height: 40px !important; max-height: 44px;
}
#bottom.density-compact .case-row td {
  padding-top: 9px !important;
  padding-bottom: 9px !important;
  height: 40px !important;
}
#bottom.density-compact .data-cases td.title-cell,
#bottom.density-compact .case-title-cell {
  min-width: 320px;
  white-space: normal;        /* allow wrapping to 2 lines */
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
#bottom.density-compact .data-cases td.id-cell {
  width: 52px; font-family: var(--font-mono); font-size: 11px !important;
  color: var(--ctp-overlay1);
}
#bottom.density-compact .data-cases td.refs-cell {
  display: flex; gap: 5px; align-items: center; flex-wrap: nowrap;
  max-width: 240px; overflow: hidden;
}
#bottom.density-compact .data-cases td.sla-cell { width: 44px; }

/* Research: 40 px row with cluster name on line 1 + meta on line 2 */
#bottom.density-compact .hyp-grid {
  display: flex !important; flex-direction: column !important;
  gap: 0 !important;
}
#bottom.density-compact .hyp-col { width: 100% !important; }
#bottom.density-compact .hyp-col-h {
  font-size: 10.5px !important; padding: 6px 12px !important;
  height: 26px !important; color: var(--ctp-subtext0) !important;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 1px solid var(--ctp-surface0);
}
#bottom.density-compact .hyp-col-body {
  display: flex !important; flex-direction: column !important;
}
#bottom.density-compact .hyp-card {
  height: 40px !important; max-height: 44px !important;
  padding: 6px 12px !important; margin: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ctp-surface0) !important;
  background: transparent !important;
  display: flex !important; flex-direction: column !important;
  justify-content: center; gap: 2px;
  border-radius: 0 !important;
}
#bottom.density-compact .hyp-card:hover {
  background: color-mix(in srgb, var(--ctp-surface0) 50%, transparent) !important;
}
#bottom.density-compact .hyp-card-title {
  font-size: 12px !important; font-weight: 400 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--ctp-text);
  line-height: 1.3;
}
#bottom.density-compact .hyp-card-meta {
  font-size: 10.5px !important;
  color: var(--ctp-overlay1) !important;
  line-height: 1.2;
}

/* Automation. KEY column 220 px monospace, fully visible. */
#bottom.density-compact .auto-table th { padding: 6px 12px !important; height: 26px !important; }
#bottom.density-compact .auto-table td { padding: 5px 12px !important; height: 30px !important; }
#bottom.density-compact .auto-table td:first-child {
  width: 220px; max-width: 220px;
  font-family: var(--font-mono);
  font-size: 12px !important;
  text-align: left !important;
  overflow: visible !important; white-space: nowrap;
  padding-left: 12px !important;
  color: var(--ctp-subtext1);
}
#bottom.density-compact .auto-table td:nth-child(2) {
  width: 80px; max-width: 80px;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  color: var(--ctp-text);
}
#bottom.density-compact .auto-pills .auto-pill {
  height: 20px !important; padding: 2px 7px !important; font-size: 10.5px !important;
}
#bottom.density-compact .auto-thresholds summary {
  font-size: 11.5px !important; padding: 6px 0 !important;
}

/* Noise Contributors: SOURCE ≥ 200 px; subheader at 26 px. */
#bottom.density-compact .noise-widget h2,
#bottom.density-compact .noise-widget .noise-head {
  height: 26px !important; padding: 0 12px !important;
  font-size: 11px !important; color: var(--ctp-subtext0) !important;
  display: flex; align-items: center; gap: 8px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
#bottom.density-compact .noise-widget .noise-head .rules-btn {
  height: 22px !important; padding: 3px 9px !important; font-size: 11px !important;
  margin-left: auto;
}
#bottom.density-compact .noise-widget td.source-cell {
  min-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Click-target ≥ 22 px (buttons are 22 px native; rows 30 px). */
#bottom.density-compact .btn,
#bottom.density-compact button.btn { position: relative; }
#bottom.density-compact .btn::before,
#bottom.density-compact button.btn::before {
  content: ""; position: absolute; inset: -2px -1px;
}

/* Caption / subtext under tab headings */
#bottom.density-compact .block-pad,
#bottom.density-compact .block-pad-lg,
#bottom.density-compact .muted.block-pad,
#bottom.density-compact .muted.block-pad-lg {
  padding: 4px 12px !important;
  font-size: 11.5px !important;
  margin: 0 !important;
}

#bottom.density-compact h2,
#bottom.density-compact h3 {
  font-size: 12px !important;
  margin: 6px 12px !important;
  letter-spacing: 0.04em;
}

#bottom.density-compact #tab-body { padding: 0 !important; }

/* ════════════════════════════════════════════════════════════════════
   SIDEBAR — calmed-down navigation rhythm
   --------------------------------------------------------------------
   The sidebar is a navigation surface (eye returns dozens of times
   per session), NOT a high-density scan surface. Gives it more
   breathing room than the bottom-panel data tables. Density toggle
   on the bottom panel still drives the sidebar one step:
     compact / ultra → 40 px sidebar rows  (default)
     comfortable     → 44 px sidebar rows
   No "ultra-dense" tier for the sidebar — would crush a navigation
   surface. All values use Catppuccin tokens.
   ════════════════════════════════════════════════════════════════════ */

#sidebar {
  padding: 12px 0 !important;
}

/* Section headers — SEVERITY / CATEGORY / SOURCES.
   Original H2 retained; this rule + .sidebar-section-title alias both
   resolve to the same treatment. */
#sidebar h2,
#sidebar .sidebar-section-title {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--ctp-subtext0) !important;
  padding: 16px 12px 10px !important;
  margin: 0 !important;
  border-bottom: 0 !important;
}
/* First section header at the top of the panel — less top padding. */
#sidebar > section:first-of-type h2,
#sidebar > section.sec-controls + section h2 {
  padding-top: 12px !important;
}

/* Visible separator between sections. */
#sidebar > section.sec + section.sec {
  border-top: 1px solid var(--ctp-surface0);
  margin-top: 12px;
  padding-top: 12px;
}
#sidebar > section.sec { padding-bottom: 12px; }

/* Reset filters + gear icon row at the top. */
#sidebar .sec-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px !important;
  margin-bottom: 4px;
}
#sidebar .sec-controls #filter-reset {
  height: 28px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  border-radius: var(--radius-sm);
  flex: 1 1 auto;
  display: inline-flex; align-items: center; justify-content: center;
}
#sidebar .sec-controls #settings-toggle,
#sidebar .sec-controls #saved-views-btn {
  width: 28px !important; height: 28px !important;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}

/* Severity & Category rows — calmed rhythm. */
#sidebar .sec-facets {
  display: flex; flex-direction: column;
  gap: 2px !important;
}
#sidebar .facet-chip-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  height: 40px !important;
  padding: 7px 12px !important;
  border-radius: 6px !important;
  cursor: pointer;
  transition: background-color var(--dur-fast);
}
#sidebar .facet-chip-row:hover {
  background: color-mix(in srgb, var(--ctp-surface0) 40%, transparent) !important;
}

/* Checkbox 14×14 with consistent placement. */
#sidebar .facet-chip-row input[type="checkbox"] {
  width: 14px; height: 14px; flex: 0 0 14px;
  margin: 0; accent-color: var(--ctp-mauve);
}

/* Severity letter (C/H/M/L) — colored by severity, fixed-width
   column so they stack visually. */
#sidebar .facet-chip-row .facet-letter {
  width: 14px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  flex: 0 0 14px;
  color: var(--ctp-overlay1);
  font-family: var(--font-mono);
}
#sidebar .facet-chip-row input[data-sev="critical"] ~ .facet-letter { color: var(--ctp-red); }
#sidebar .facet-chip-row input[data-sev="high"]     ~ .facet-letter { color: var(--ctp-maroon); }
#sidebar .facet-chip-row input[data-sev="med"]      ~ .facet-letter { color: var(--ctp-peach); }
#sidebar .facet-chip-row input[data-sev="low"]      ~ .facet-letter { color: var(--ctp-yellow); }

/* The pill itself — flex:1 so widths are CONSISTENT row-to-row
   instead of hugging variable text widths. */
#sidebar .facet-chip-row .pill,
#sidebar .facet-chip-row .cat-pill {
  flex: 1 1 auto !important;
  height: 26px !important;
  padding: 4px 10px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Hide the legacy ●/◐/○/— glyph + cat glyph in the row — pill colour
   already conveys severity / category and the glyphs add noise at
   this density. */
#sidebar .facet-chip-row .facet-glyph { display: none !important; }

/* Right-aligned count column — consistent min-width keeps columns
   tile-aligned across rows. */
#sidebar .facet-chip-row .facet-count {
  font-size: 11.5px !important;
  color: var(--ctp-subtext1) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: 32px !important;
  text-align: right !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;        /* gap on parent already gives 10 px */
  font-family: var(--font-sans);
}

/* Source list cards — keep the single-line three-zone layout from
   the previous pass, but bump card height to 40 px so they share the
   same rhythm as severity / category rows above. */
#sidebar .src-row {
  height: 40px !important;
  padding: 9px 12px !important;
  gap: 10px !important;
}

/* SOURCES section sub-controls (search box + sort select) — same
   28 px height as the Reset row. */
#sidebar .src-search-box,
#sidebar .src-sort {
  height: 28px !important;
  font-size: 12px !important;
  padding: 0 10px !important;
  border-radius: var(--radius-sm);
}
#sidebar .src-controls {
  display: flex; gap: 8px; padding: 0 12px 8px;
}

/* ─── Comfortable mode override — sidebar 44 px (one step looser) ── */
:root[data-panel-density="comfortable"] #sidebar .facet-chip-row,
:root[data-panel-density="comfortable"] #sidebar .src-row {
  height: 44px !important;
  padding: 9px 12px !important;
}

/* `.sec` heading (when used as a class instead of <h2>) keeps the
   same treatment — covers a couple of legacy markup variants. */
#sidebar .sec h2,
#sidebar .sec h3 {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--ctp-subtext0) !important;
  padding: 16px 12px 10px !important;
  margin: 0 !important;
}
#sidebar > section.sec-controls h2,
#sidebar > section.sec-controls h3 { display: none; }

/* ─── Sidebar toolbar + section headers — compact-density overrides
   --------------------------------------------------------------------
   Default values above are "cozy" (50 px toolbar, 42 px h2 headers).
   When the user picks `compact` or `ultra` on the bottom-panel
   density toggle, also tighten the sidebar's toolbar and section
   headers — the chip rows already responded; these three were the
   stragglers that stayed at cozy size.
   `comfortable` panel-density keeps the cozy defaults.
   `ultra` is not a sidebar tier on its own (per spec: "no Ultra for
   the sidebar — it's not a scanning surface"), so it falls through
   to the same compact treatment. */

/* Reset filters + ⚙ toolbar */
:root[data-panel-density="compact"] #sidebar .sec-controls,
:root[data-panel-density="ultra"]   #sidebar .sec-controls {
  padding: 6px 10px !important;
  gap: 6px !important;
  margin-bottom: 2px;
}
:root[data-panel-density="compact"] #sidebar .sec-controls #filter-reset,
:root[data-panel-density="ultra"]   #sidebar .sec-controls #filter-reset {
  height: 24px !important;
  padding: 0 10px !important;
  font-size: 11.5px !important;
}
:root[data-panel-density="compact"] #sidebar .sec-controls #settings-toggle,
:root[data-panel-density="compact"] #sidebar .sec-controls #saved-views-btn,
:root[data-panel-density="ultra"]   #sidebar .sec-controls #settings-toggle,
:root[data-panel-density="ultra"]   #sidebar .sec-controls #saved-views-btn {
  width: 24px !important;
  height: 24px !important;
}

/* SEVERITY / CATEGORY / SOURCES / HK ALERTS section headers */
:root[data-panel-density="compact"] #sidebar h2,
:root[data-panel-density="compact"] #sidebar h3,
:root[data-panel-density="compact"] #sidebar .sidebar-section-title,
:root[data-panel-density="ultra"]   #sidebar h2,
:root[data-panel-density="ultra"]   #sidebar h3,
:root[data-panel-density="ultra"]   #sidebar .sidebar-section-title {
  padding: 8px 10px 4px !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  /* weight + colour stay (var(--ctp-subtext0), 600) */
}

/* First section header — directly under the toolbar — gets a
   slightly tighter top padding so the gap doesn't double up. */
:root[data-panel-density="compact"] #sidebar > section:first-of-type h2,
:root[data-panel-density="compact"] #sidebar > section.sec-controls + section h2,
:root[data-panel-density="ultra"]   #sidebar > section:first-of-type h2,
:root[data-panel-density="ultra"]   #sidebar > section.sec-controls + section h2 {
  padding-top: 6px !important;
}

/* Tighten the inter-section divider too — 12 px above + below was
   the cozy spacing; compact mode halves it so the four sections
   don't sprawl. */
:root[data-panel-density="compact"] #sidebar > section.sec + section.sec,
:root[data-panel-density="ultra"]   #sidebar > section.sec + section.sec {
  margin-top: 6px !important;
  padding-top: 6px !important;
}
:root[data-panel-density="compact"] #sidebar > section.sec,
:root[data-panel-density="ultra"]   #sidebar > section.sec {
  padding-bottom: 6px !important;
}

/* Tighten sub-px targets — explicit line-height on h2 (was inheriting
   1.55 from body) and explicit min-height on the toolbar button. */
:root[data-panel-density="compact"] #sidebar h2,
:root[data-panel-density="compact"] #sidebar h3,
:root[data-panel-density="compact"] #sidebar .sidebar-section-title,
:root[data-panel-density="ultra"]   #sidebar h2,
:root[data-panel-density="ultra"]   #sidebar h3,
:root[data-panel-density="ultra"]   #sidebar .sidebar-section-title {
  line-height: 1.2 !important;
  height: auto !important;
}
:root[data-panel-density="compact"] #sidebar .sec-controls #filter-reset,
:root[data-panel-density="ultra"]   #sidebar .sec-controls #filter-reset {
  min-height: 24px !important;
  line-height: 1 !important;
}

/* ════════════════════════════════════════════════════════════════════
   Cases TYPE filter chips + watchlist star + global Watchlists panel
   ════════════════════════════════════════════════════════════════════ */

/* Cases TYPE filter chips. */
.cases-toolbar .cases-type-filter {
  display: inline-flex;
  gap: 4px;
  margin-left: 12px;
}
.cases-type-chip {
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 500;
}
.cases-type-chip:hover { color: var(--text); border-color: var(--border-default); }
.cases-type-chip.active {
  background: color-mix(in srgb, var(--ctp-mauve) 20%, transparent);
  color: var(--ctp-mauve);
  border-color: color-mix(in srgb, var(--ctp-mauve) 50%, transparent);
}
.cases-type-chip .chip-count {
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}
.cases-type-chip.active .chip-count { color: var(--ctp-mauve); }

/* Case TYPE pill in row — colour-mapped:
   auto → Sapphire, manual → Subtext1, hypothesis → Mauve */
.chip.case-type-auto {
  background: color-mix(in srgb, var(--ctp-sapphire) 18%, transparent);
  color: var(--ctp-sapphire);
}
.chip.case-type-manual {
  background: color-mix(in srgb, var(--ctp-subtext1) 18%, transparent);
  color: var(--ctp-subtext1);
}
.chip.case-type-hypothesis {
  background: color-mix(in srgb, var(--ctp-mauve) 22%, transparent);
  color: var(--ctp-mauve);
  font-weight: 600;
}

/* Watchlist star — leftmost cell on rows. */
.watchlist-star {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: var(--radius-xs);
  transition: color var(--dur-fast);
}
.watchlist-star:hover { color: var(--ctp-yellow); }
.watchlist-star.on { color: var(--ctp-yellow); }
td.star-cell { width: 24px; text-align: center; padding-left: 4px !important; padding-right: 4px !important; }

/* Global header watchlist button. */
.watchlists-btn {
  background: var(--bg-elevated);
  color: var(--ctp-yellow);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  margin-right: 4px;
}
.watchlists-btn:hover { border-color: var(--ctp-yellow); }

/* Global slide-over panel. */
.watchlists-panel {
  position: fixed;
  top: 96px; right: 0; bottom: 0;
  width: clamp(260px, 22vw, 360px);
  background: var(--bg-panel);
  border-left: 1px solid var(--border-default);
  z-index: 50;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--dur-base) var(--ease-out);
  box-shadow: var(--shadow-lg);
}
.watchlists-panel.open { transform: translateX(0); }
.watchlists-panel[hidden] { display: none; }
.watchlists-panel-h {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}
.watchlists-panel-h h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.watchlists-panel-close {
  background: transparent; border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-xs);
}
.watchlists-panel-close:hover { color: var(--text); background: var(--bg-hover); }
.watchlists-panel-body {
  flex: 1 1 auto; overflow-y: auto;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.watchlists-panel .watchlists-new {
  align-self: flex-start;
  padding: 4px 12px; font-size: 12px;
}
.watchlists-list { display: flex; flex-direction: column; gap: 4px; }
.watchlist-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}
.watchlist-row:hover { background: var(--bg-hover); }
.watchlist-name {
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
}
.watchlist-count {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.watchlist-row .watchlist-filter {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════════
   Sidebar Severity + Category — pixel-aligned filter rows
   --------------------------------------------------------------------
   Option A (preferred): drop the C / H / M / L letter column. Severity
   is already encoded in the pill text (CRIT 75+, HIGH 50+, MED 25+,
   LOW 0+) and in the pill colour (Red / Maroon / Peach / Yellow), so
   the letter column is redundant and the only reason the two filter
   sections misaligned. Both sections now share:
     [checkbox 13×13] [10px gap] [pill flex:1 min-width:140] [10px gap]
     [count tabular-nums right-aligned min-width:32]
   Pills span the same x-range row-to-row, so the sections read as one
   filter system instead of two stacked ones.
   ════════════════════════════════════════════════════════════════════ */

/* Hide the C/H/M/L letter column on Severity rows. */
#sidebar .facet-chip-row .facet-letter { display: none !important; }

/* Pill alignment + size: 24px tall, 11px text, flex:1 to stretch. */
#sidebar .facet-chip-row .pill,
#sidebar .facet-chip-row .cat-pill {
  flex: 1 1 auto !important;
  min-width: 140px !important;
  height: 24px !important;
  padding: 3px 10px !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  border-radius: 6px !important;
  letter-spacing: 0.02em;
  display: inline-flex; align-items: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Checkbox tightening — 13×13 with mauve accent. */
#sidebar .facet-chip-row input[type="checkbox"] {
  width: 13px !important; height: 13px !important; flex: 0 0 13px !important;
  margin: 0; accent-color: var(--ctp-mauve);
  border-radius: 1.5px;
}

/* Count column — same offset row-to-row. */
#sidebar .facet-chip-row .facet-count {
  font-size: 11.5px !important;
  color: var(--ctp-subtext1) !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  min-width: 32px !important;
  text-align: right !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

/* Inter-section divider — 1px Surface0. SEVERITY → CATEGORY pair
   collapses to a hairline so they read as one filter cluster. The
   divider between CATEGORY and SOURCES (or any other section pair)
   keeps the original 8 px breathing room. */
#sidebar > section.sec + section.sec {
  border-top: 1px solid var(--ctp-surface0) !important;
  margin-top: 8px !important;
  padding-top: 8px !important;
}
/* Pair-collapse for the two facet rails — pulls the CATEGORY header
   right under the last SEVERITY row.
   - sec-severity-rail: kill the bottom padding/margin that the
     `.sec { margin-bottom: 20px }` (line 404) and density-compact
     `padding-bottom: 6px` (line 7976) rules pile on.
   - sec-category-rail: minimal top-side gap (2 px each side + 0 px
     border) so the budget for 4+6 = 10 chip rows fits in the ~402 px
     visible sidebar (header bottom → bottom-panel top). */
#sidebar > section.sec.sec-severity-rail {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
#sidebar > section.sec.sec-severity-rail + section.sec.sec-category-rail {
  margin-top: 2px !important;
  padding-top: 2px !important;
  border-top: 0 !important;
}

/* Compact facet rows. Was 40 px (7 px V padding, 10 px gap, 6 px
   bottom-margin); trimmed to 26 px so the 4-sev + 6-cat block fits
   without scrolling. The 1 px row margin keeps a hairline gap
   without consuming the budget needed for the headers + section
   gaps.  .facet-chip-row only renders inside .sec-facets (severity
   + category), so the #sidebar-scoped selector implicitly covers
   exactly the rails the spec called out and nothing else. */
#sidebar .facet-chip-row {
  min-height: 26px !important;
  height: 26px !important;
  padding: 2px 8px !important;
  gap: 8px !important;
  margin-bottom: 1px !important;
}
#sidebar .facet-chip-row .pill,
#sidebar .facet-chip-row .cat-pill {
  padding: 2px 8px !important;
  line-height: 1 !important;
  /* font-size kept at the inherited 11 px — legibility is the priority. */
}
/* Tighten the SEVERITY / CATEGORY headers from ~30 px to ~18 px. */
#sidebar .sec-severity-rail h2,
#sidebar .sec-severity-rail h3,
#sidebar .sec-category-rail h2,
#sidebar .sec-category-rail h3 {
  padding: 4px 12px 2px !important;
}
#sidebar .sec-facets { gap: 0 !important; }

/* ─── Noise Contributors relocation polish ──────────────────────── */

/* Cross-link in the global tab-bar toolbar (only visible while IOCs
   is the active tab — switchTab toggles its `hidden` attribute). */
.iocs-noise-link {
  font-size: 11px;
  color: var(--ctp-overlay1) !important;
  text-decoration: none;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  height: 22px;
  white-space: nowrap;
  border-left: 1px solid var(--ctp-surface0);
  margin-left: 6px;
}
.iocs-noise-link:hover {
  color: var(--ctp-sapphire) !important;
  text-decoration: none;
}
.iocs-noise-link[hidden] { display: none; }

/* Divider between the relocated Noise Contributors section and the
   existing Automation toolbar / threshold list. */
.auto-section-divider {
  border: 0;
  border-top: 1px solid var(--ctp-surface0);
  margin: 16px 0;
  height: 0;
}

/* Variant header treatment for the noise widget when rendered inside
   Automation: matches the other Automation section headers ("Active
   thresholds", "Recent auto-actions"). */
#bottom .automation-panel .noise-widget {
  margin-bottom: 12px;
}
#bottom .automation-panel .noise-widget .noise-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto !important;
  padding: 0 !important;
  margin-bottom: 4px;
}
#bottom .automation-panel .noise-widget .noise-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ctp-subtext0);
  flex: 0 0 auto;
}
#bottom .automation-panel .noise-widget .noise-subtitle {
  font-size: 11px;
  color: var(--ctp-overlay1);
  flex: 1 1 auto;
  font-weight: normal;
  letter-spacing: 0;
  text-transform: none;
}
#bottom .automation-panel .noise-widget #noise-rules-btn {
  flex: 0 0 auto;
  height: 22px;
  padding: 0 10px;
  font-size: 11px;
}

/* ─── Map3D canvas layout ─────────────────────────────────────────
   #map-region is `display: flex; flex-direction: column`; the 2D
   <svg id="map"> ate the flex space natively. The 3D wrapper is a
   sibling that takes that same flex space, leaving the resize
   handle and #sparkline / .stats-strip below at their natural
   heights. Without this rule the canvas fell back to 0×0 and the
   strip got pushed out of place. */
#map-region .map3d-canvas {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  contain: layout paint;
}
#map-region .map3d-canvas canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ─── Map3D space scene polish ────────────────────────────────────
   Layers, back to front:
     1. .map3d-gradient-bg     vertical radial vignette
     2. <starfield outer sphere>     drawn by three
     3. <fog>                          three.fog
     4. <atmosphere Fresnel sphere>   three shader
     5. <ocean / land / borders>      three meshes
     6. <markers / labels>            three meshes / sprites
   The HTML gradient div lives behind the canvas (z-index:0; canvas
   sits on top via stacking context). */

.map3d-gradient-bg {
  position: absolute; inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center top,
      var(--ctp-mantle) 0%,
      var(--ctp-crust) 75%);
}
#map3d-canvas canvas { position: relative; z-index: 1; }

/* The +/− zoom and reset buttons sit over the new starfield; lift
   them with a translucent Mantle background card so they read. */
#map-region [data-map-zoom] {
  background: color-mix(in srgb, var(--ctp-mantle) 80%, transparent) !important;
  border: 1px solid var(--ctp-surface1) !important;
  backdrop-filter: blur(4px);
}

/* STREAMS legend + Live events toggle — opaque card so they don't
   visually merge with the starfield. */
:root[data-map-renderer="3d"] #map-legend,
:root[data-map-renderer="3d"] .map-legend,
:root[data-map-renderer="3d"] #live-events-toggle,
:root[data-map-renderer="3d"] .live-events-toggle {
  background: color-mix(in srgb, var(--ctp-mantle) 90%, transparent) !important;
  backdrop-filter: blur(6px);
  border: 1px solid var(--ctp-surface1) !important;
}

/* (Compact facet-rail rules consolidated into the existing
    "#sidebar .facet-chip-row" block above — see the inter-section
    divider section ~line 8203.) */

/* ─── Header meta cluster — compact for 8-tile KPI strip ────────────
   The LIVE pill, watchlists star, theme picker, and UTC/LAST stack
   share a 430 px right column. Default contents take ~560 px because
   of the "Pause stream" button text and the THEME label, so we hide
   those on the always-visible toolbar and reveal them only inside
   tooltips/aria-labels. */
.hdr-meta .live-indicator .live-pause-text { display: none !important; }
.hdr-meta .theme-picker .theme-picker-label { display: none !important; }
/* Tighten the theme picker dropdown so it doesn't dominate the meta
   row — the flag icon + flavour name is enough context. */
.hdr-meta .theme-picker-select {
  font-size: 11px;
  padding: 2px 6px;
  height: 26px;
}

/* ─── KPI strip — 8-tile compaction ─────────────────────────────────
   The new top-bar strip (Crit Open, KEV CVEs, Sector Hits, Active
   Actors, New TTPs, Campaigns Live, Sources, Enrichment Q) needs
   all 8 tiles to fit inside the ~800 px middle grid column without
   overflowing into the right-side .hdr-meta cluster (LIVE pill,
   theme picker, UTC clock, LAST pill).
   Previous min-width 140 px × 8 = 1120 px overflowed; trimmed to
   90 px with 4 px gaps so 8 tiles fit without touching the meta
   column. Numerals + labels stay legible at 24/10 px; longer
   labels like "Campaigns 24h" / "Sources" auto-grow but the rest
   stay at the floor. */
#hdr .stats {
  gap: 4px !important;
  /* When the KPI column has less width than the 8 tiles need, scroll
     horizontally inside the strip rather than bleeding into the meta
     column. min-width: 0 lets the grid track shrink below content. */
  min-width: 0 !important;
  overflow-x: auto !important;
}
#hdr .stats > button.stat,
#hdr .stats > .stat {
  min-width: 56px !important;
  padding: 6px 7px !important;
}
#hdr .stats > .stat .num {
  font-size: 22px !important;
  line-height: 1.05 !important;
}
#hdr .stats > .stat .lbl {
  font-size: 10px !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
}