/* ═══════════════════════════════════════════════════════════════════
   OPENTHREAT — style.css
   Theme: Dark Terminal / Industrial Cyber
   ═══════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ─────────────────────────────────────────────────
   SEMANTIC COLOUR DISCIPLINE.

   Cyan used to mean four things at once: active state, links, numeric counts
   and section highlights. When one hue means four things it stops meaning any
   of them — you cannot tell from the colour whether something is clickable,
   selected, or just a number.

   Four roles, four tokens, and they are the only ones the rest of the sheet is
   allowed to reach for:

     --ui-active    THIS IS SELECTED / focused / armed. Cyan, and now nothing
                    else is cyan, so cyan is answerable.
     --ui-link      this navigates somewhere. Blue.
     --ui-count     this is a quantity. Deliberately quiet: a count is data,
                    not an invitation.
     --ui-accent    brand furniture — the logo, the scan line, section labels.
                    Never interactive.

   --accent-cyan is kept as an alias so nothing external breaks, but new rules
   should use the semantic name.
   ------------------------------------------------------------------ */
:root {
  color-scheme: dark;
  /* v5 palette retune. The v4 scheme was the "cybersecurity" look rather than
     the security-tool look: neon cyan (#00ffe1) as the interaction colour, a
     scanline sweep, and a lit grid. Consoles people actually stare at for
     eight hours -- Sentinel, Falcon, Chronicle, Elastic Security -- are calm
     and near-monochrome, and spend saturated colour almost exclusively on
     severity. The drama should come from density, not from the chrome.

     It also fixed two measured accessibility failures. Against the card
     surface, --text-secondary sat at 4.00:1 (below the 4.5 floor for body
     text) and --text-muted at 1.69:1, which is not legible at all. They are
     now 6.64 and 3.78. */
  --bg-base:         #0a0c10;
  --bg-surface:      #0f1319;
  --bg-card:         #151a21;
  --bg-card-hover:   #1c232c;
  --border:          #232a34;
  --border-strong:   #38434f;
  --border-glow:     #5aa2f524;

  --text-primary:    #d8dee7;
  --text-secondary:  #93a1b1;
  /* AA-large only (3.78:1). Used exclusively for de-emphasised metadata that
     is never the sole carrier of meaning -- a timestamp beside a headline, a
     count beside a label. Anything a reader must be able to read on its own
     uses --text-secondary or better. */
  --text-muted:      #6a7684;
  --text-code:       #8fbfd8;

  /* Selection blue, not neon. One interaction colour, used only for "this is
     the thing you picked". */
  --ui-active:       #5aa2f5;
  --ui-active-dim:   #5aa2f533;
  --ui-link:         #7cb8f5;
  --ui-count:        #93a1b1;
  --ui-accent:       #5aa2f5;

  /* Kept as aliases so v4 rules that still name them follow the retune
     instead of stranding a neon accent somewhere nobody looks. */
  --accent-cyan:     var(--ui-active);
  --accent-cyan-dim: var(--ui-active-dim);
  --accent-blue:     #5aa2f5;
  --accent-orange:   #d98a3d;
  --shadow-panel:    0 24px 60px rgba(0, 0, 0, 0.55);
  /* Sticky chrome sits over scrolling content, so it needs a translucent
     background rather than a flat one — and therefore its own token. These
     were hardcoded rgba(8,11,15,…), which is why the header and toolbar
     stayed black in light mode while everything under them turned white. */
  --bg-sticky:       rgba(10, 12, 16, 0.94);

  /* Severity is ORDINAL (low -> critical), so it takes a one-hue sequential
     ramp rather than four categorical hues. The previous set put #f5c518
     (medium) next to #ff8c42 (high) at deltaE 14.4 — below the 15 normal-vision
     floor, i.e. hard to tell apart even with full colour vision. This ramp
     passes all four ordinal checks against the #0d1117 surface. Severity always
     ships with a text label, so colour is never the only cue. */
  --critical:    #ff7a91;  --critical-bg: #ff7a9118;
  --high:        #e04365;  --high-bg:     #e0436518;
  --medium:      #b9455f;  --medium-bg:   #b9455f18;
  --low:         #8c4a5c;  --low-bg:      #8c4a5c18;

  --series-1:    #3987e5;
  --ok:          #34d399;
  --warn:        #f5c518;

  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --font-display: 'Syne', sans-serif;
  --radius:       4px;
  --transition:   0.18s ease;

  /* THREE breakpoints, chosen rather than accumulated. The sheet had grown
     five — 640 / 820 / 860 / 900 / 1180 — across twelve media queries, none of
     which corresponded to anything in particular. Custom properties cannot be
     used inside a media query, so these are documentation for the three values
     the queries below actually use:
       640px   phone           single column, no sidebar chrome
       900px   tablet          view switcher wraps, panels go full width
       1200px  wide desktop    multi-column research layouts
     Nothing else is allowed a breakpoint of its own. */
  /* Height of the pinned chrome, MEASURED at runtime by syncStickyOffsets()
     in app.js. These values are only the pre-measurement fallback.

     They are variables because the header's height is not a constant: a v4 fix
     gave it `flex-wrap: wrap; height: auto` so the stat pills stop overlapping
     on narrow screens, which means it is 60px at desktop width and 86px at
     ~880px. Every bar below it used to hard-code `top: 60px`, so as soon as
     the header wrapped it covered them -- and once v5 added a second nav row
     at the same offset, the two rows drew on top of each other. */
  --stack-header: 60px;   /* bottom edge of .site-header */
  --stack-nav:    96px;   /* bottom edge of .mode-switcher */

  --bp-sm: 640px;
  --bp-md: 900px;
  --bp-lg: 1200px;
}

/* ── Light theme ───────────────────────────────────────────────────
   This project was committed dark-only, which is a real gap for a tool you
   read for long stretches in a bright room. Because the sheet is fully
   tokenised, light is a second token block rather than a restyle.

   Three states: an explicit choice stamps data-theme on <html>; the default
   follows the OS. Both paths redefine the same tokens, so a rule written
   against a token needs no light-mode counterpart. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-sticky:     rgba(247, 249, 251, 0.94);
    color-scheme: light;
    --bg-base:       #eef1f5;
    --bg-surface:    #f7f9fb;
    --bg-card:       #ffffff;
    --bg-card-hover: #eef3f8;
    --border:        #d3dbe4;
    --border-strong: #b3c0cd;
    --border-glow:   #0b6e6033;

    --text-primary:   #16212c;
    --text-secondary: #4c5f72;
    --text-muted:     #8497a8;
    --text-code:      #0b6b57;

    --ui-active:     #067c6c;
    --ui-active-dim: #067c6c33;
    --ui-link:       #1257c4;
    --ui-count:      #556a7d;
    --ui-accent:     #067c6c;

    --critical:  #b3122f;  --critical-bg: #b3122f14;
    --high:      #c02a48;  --high-bg:     #c02a4814;
    --medium:    #8f3450;  --medium-bg:   #8f345014;
    --low:       #6c4557;  --low-bg:      #6c455714;

    --series-1:  #1f5fb0;
    --ok:        #0f7a52;
    --warn:      #96690a;
    --shadow-panel: 0 24px 60px rgba(22, 33, 44, 0.18);
  }
}

:root[data-theme="light"] {
  --bg-sticky:     rgba(247, 249, 251, 0.94);
  color-scheme: light;
  --bg-base:       #eef1f5;
  --bg-surface:    #f7f9fb;
  --bg-card:       #ffffff;
  --bg-card-hover: #eef3f8;
  --border:        #d3dbe4;
  --border-strong: #b3c0cd;
  --border-glow:   #0b6e6033;

  --text-primary:   #15202b;
  --text-secondary: #4e5f70;
  --text-muted:     #6f8091;
  --text-code:      #0b6b57;

  --ui-active:     #1257c4;
  --ui-active-dim: #1257c422;
  --ui-link:       #1257c4;
  --ui-count:      #4e5f70;
  --ui-accent:     #1257c4;

  --critical:  #b3122f;  --critical-bg: #b3122f14;
  --high:      #c02a48;  --high-bg:     #c02a4814;
  --medium:    #8f3450;  --medium-bg:   #8f345014;
  --low:       #6c4557;  --low-bg:      #6c455714;

  --series-1:  #1f5fb0;
  --ok:        #0f7a52;
  --warn:      #96690a;
  --shadow-panel: 0 24px 60px rgba(22, 33, 44, 0.18);
}

/* The dark palette is the :root default, so an explicit dark choice only has
   to undo a light OS preference. */
:root[data-theme="dark"] { color-scheme: dark; }

/* The animated grid and scan line are decoration that reads as dirt on a light
   background, where there is no glow for them to belong to. */
:root[data-theme="light"] .bg-grid,
:root[data-theme="light"] .scan-line { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .bg-grid,
  :root:not([data-theme="dark"]) .scan-line { display: none; }
}

/* ── Reset & Base ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  max-width: 100%; min-width: 0;
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100vw;
}

/* -- Background texture ------------------------------------------------
   The grid is dialled well back and the scanline sweep is gone.

   A 2px cyan bar travelling down the viewport every 8 seconds, forever, is
   motion in the periphery of a page people read for long stretches. It says
   "hacker film" rather than "console", it never conveyed anything, and it is
   exactly the sort of ambient animation that vestibular-sensitive readers
   have to disable. The element is kept in the markup so no selector breaks;
   it simply no longer draws. */
.bg-grid {
  position: fixed; inset: 0; z-index: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.14; pointer-events: none;
}
.scan-line { display: none; }

/* ── Header ─────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; height: 60px;
  background: var(--bg-sticky);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.header-left { display: flex; align-items: center; gap: 20px; }
.logo { font-family: var(--font-display); font-size: 18px; font-weight: 800; letter-spacing: 0.05em; white-space: nowrap; }
.logo-bracket { color: var(--text-muted); }
.logo-text    { color: var(--text-primary); }
.logo-accent  { color: var(--ui-accent); }
.header-meta  { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 11px; }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #00ff88; box-shadow: 0 0 6px #00ff88;
  animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.header-right { display: flex; align-items: center; gap: 10px; }
.stat-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-surface); font-size: 11px;
}
.stat-label { color: var(--text-secondary); letter-spacing: 0.08em; }
.stat-value { font-weight: 700; color: var(--text-primary); }
#stat-critical .stat-value { color: var(--critical); }
#stat-high     .stat-value { color: var(--high); }
#stat-medium  .stat-value { color: var(--medium); }
.stat-pill.active { border-color: var(--ui-active); box-shadow: 0 0 8px var(--ui-active-dim); }

/* ── Controls Bar ───────────────────────────────────────────────── */
.controls-bar {
  /* Also not sticky any more -- see .view-switcher. This is the tallest of the
     bars (search + toolbar + eleven filter pills, ~100px once they wrap) and
     the least worth pinning: filters are set once and then scrolled past. */
  position: static;
  display: flex; align-items: center; gap: 16px; padding: 12px 24px;
  background: var(--bg-sticky);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  flex-wrap: wrap;
}
.search-wrapper {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px 12px;
  flex: 1; min-width: 200px; max-width: 400px;
  transition: border-color var(--transition);
}
.search-wrapper:focus-within {
  border-color: var(--ui-active);
  box-shadow: 0 0 0 2px var(--ui-active-dim);
}
.search-icon { color: var(--text-muted); font-size: 16px; }
.search-input {
  background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: var(--font-mono);
  font-size: 12px; width: 100%;
}
.search-input::placeholder { color: var(--text-muted); }
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-btn {
  padding: 5px 12px; border: 1px solid var(--border);
  border-radius: var(--radius); background: transparent;
  color: var(--text-secondary); font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  cursor: pointer; transition: all var(--transition);
}
.filter-btn:hover { border-color: var(--ui-active); color: var(--ui-active); }
.filter-btn.active { background: var(--ui-active); border-color: var(--ui-active); color: var(--bg-base); }

/* Matrix button special style */
.filter-btn.matrix-btn { background: #001020; border-color: #1a4060; color: #4da6ff; }
.filter-btn.matrix-btn:hover,
.filter-btn.matrix-btn.active { background: #4da6ff; border-color: #4da6ff; color: var(--bg-base); }

/* ── Dashboard Layout ───────────────────────────────────────────── */
.dashboard {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 240px 1fr;
  gap: 0; min-height: calc(100vh - 120px);
}

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  border-right: 1px solid var(--border); padding: 20px 16px;
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: var(--stack-nav);
  height: calc(100vh - var(--stack-nav));
  overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.sidebar-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.sidebar-title { display: flex; align-items: center; justify-content: space-between; font-size: 9px; font-weight: 700; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.linkedin-badge-wrap { display: flex; justify-content: center; min-height: 120px; }
.linkedin-badge-wrap .badge-base { width: 100% !important; text-align: center; }
.sev-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.sev-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; width: 56px; flex-shrink: 0; }
.sev-label.critical { color: var(--critical); }
.sev-label.high     { color: var(--high); }
.sev-label.medium   { color: var(--medium); }
.sev-label.low      { color: var(--low); }
.sev-bar-wrap { flex: 1; height: 4px; background: var(--bg-card); border-radius: 2px; overflow: hidden; }
.sev-bar { height: 100%; border-radius: 2px; width: 0%; transition: width 0.8s ease; }
.sev-bar.critical { background: var(--critical); }
.sev-bar.high     { background: var(--high); }
.sev-bar.medium   { background: var(--medium); }
.sev-bar.low      { background: var(--low); }
.sev-count { font-size: 10px; color: var(--text-secondary); width: 20px; text-align: right; }
.source-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 10px; }
.source-item:last-child { border-bottom: none; }
.source-name { color: var(--text-secondary); }
.source-badge { background: var(--bg-card); border: 1px solid var(--border); border-radius: 20px; padding: 1px 7px; color: var(--ui-count); font-size: 9px; }
.cat-item { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 10px; cursor: pointer; transition: color var(--transition); }
.cat-item:last-child { border-bottom: none; }
.cat-item:hover .cat-name { color: var(--ui-active); }
.cat-name { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }
.cat-count { color: var(--text-muted); }

/* ── Feed ────────────────────────────────────────────────────────── */
.feed { padding: 20px 24px; display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-x: hidden; width: 100%; box-sizing: border-box; }
.feed-header { display: flex; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 10px; letter-spacing: 0.08em; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.feed-sort { color: var(--ui-active); }
.loading-state { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 80px 20px; color: var(--text-secondary); font-size: 12px; }
.loader-ring { width: 36px; height: 36px; border: 2px solid var(--border); border-top-color: var(--ui-active); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-state { text-align: center; padding: 60px 20px; color: var(--critical); }
.error-icon  { font-size: 32px; margin-bottom: 12px; }
.error-state p { color: var(--text-secondary); margin-top: 8px; }
.error-state code { color: var(--ui-active); background: var(--bg-card); padding: 1px 6px; border-radius: 3px; }
.no-results { text-align: center; padding: 60px 20px; color: var(--text-muted); }

/* ── Intel Cards ─────────────────────────────────────────────────── */
.cards-container { display: flex; flex-direction: column; gap: 10px; width: 100%; overflow: hidden; }
.intel-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius); padding: 14px 16px;
  display: block; width: 100%; overflow: hidden;
  box-sizing: border-box; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  animation: card-in 0.3s ease backwards;
  text-decoration: none; color: inherit;
}
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.intel-card:hover { background: var(--bg-card-hover); border-color: var(--border-glow); transform: translateX(2px); }
.intel-card[data-category="cve"]      { border-left-color: var(--critical); }
.intel-card[data-category="advisory"] { border-left-color: var(--high); }
.intel-card[data-category="news"]     { border-left-color: var(--accent-blue); }
.intel-card[data-category="incident"] { border-left-color: var(--accent-orange); }

/* AI-enriched cards: purple glow replaces left border */
.intel-card.ai-enriched { border-left-color: #a78bfa !important; }

/* Expanded state */
.intel-card.expanded {
  transform: translateX(0) !important;
  border-color: #5b3fa088;
  background: var(--bg-card-hover);
  overflow: visible;
}

.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; width: 100%; overflow: hidden; }
.card-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; flex: 1; word-break: break-word; overflow-wrap: break-word; min-width: 0; }
.card-title a { color: inherit; text-decoration: none; transition: color var(--transition); }
.card-title a:hover { color: var(--ui-link); }
.badge { padding: 2px 8px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; flex-shrink: 0; border: 1px solid transparent; }
.badge.critical { background: var(--critical-bg); color: var(--critical); border-color: var(--critical); }
.badge.high     { background: var(--high-bg);     color: var(--high);     border-color: var(--high);     }
.badge.medium   { background: var(--medium-bg);   color: var(--medium);   border-color: var(--medium);   }
.badge.low      { background: var(--low-bg);       color: var(--low);      border-color: var(--low);      }
.badge.info     { background: #3b9eff18; color: var(--accent-blue); border-color: var(--accent-blue); }
.card-description { font-size: 11px; color: var(--text-secondary); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-top: 6px; word-break: break-word; overflow-wrap: break-word; white-space: normal; }
.card-actors { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.card-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.meta-tag { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; padding: 1px 6px; border-radius: 2px; text-transform: uppercase; }
.meta-source  { background: var(--bg-base); color: var(--ui-active); border: 1px solid var(--border); }
.meta-cat     { background: var(--bg-base); color: var(--text-muted);  border: 1px solid var(--border); }
.meta-cvss    { background: var(--critical-bg); color: var(--critical); border: 1px solid var(--critical); }
.meta-ai-score{ background: #1e0a3c; color: #a78bfa; border: 1px solid #5b3fa0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta-epss{ background: #0a1f2e; color: var(--ui-active); border: 1px solid #006655; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta-date    { color: var(--text-muted); font-size: 10px; margin-left: auto; }
.cve-id { font-family: var(--font-mono); font-size: 10px; color: var(--critical); font-weight: 700; cursor: pointer; }
.cve-id:hover { text-decoration: underline; }

/* ── TTP Pills ───────────────────────────────────────────────────── */
.card-ttps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }


/* ── Footer ─────────────────────────────────────────────────────── */
.site-footer { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 14px 24px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 10px; letter-spacing: 0.06em; flex-wrap: wrap; gap: 8px; }

/* ── Scrollbars ──────────────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── MITRE ATT&CK Matrix View ────────────────────────────────────── */
.matrix-view    { width: 100%; overflow-x: auto; padding-bottom: 12px; }
.matrix-legend  { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 0 14px; font-size: 10px; color: var(--text-secondary); border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.legend-item    { display: flex; align-items: center; gap: 5px; }
.legend-dot     { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.legend-dot.active-high { background: #4da6ff; border: 1px solid #4da6ff; }
.legend-dot.active-med  { background: #1a4060; border: 1px solid #2a5a80; }
.legend-dot.inactive    { background: var(--bg-card); border: 1px solid var(--border); }
.matrix-hint    { margin-left: auto; color: var(--text-muted); font-size: 9px; font-style: italic; }
.matrix-grid    { display: flex; gap: 6px; min-width: max-content; align-items: flex-start; }
.tactic-col     { display: flex; flex-direction: column; gap: 4px; min-width: 130px; max-width: 150px; }
.tactic-header  { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; background: #0a1f35; border: 1px solid #1a4060; border-radius: 3px 3px 0 0; gap: 4px; }
.tactic-name    { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; color: #4da6ff; text-transform: uppercase; line-height: 1.3; }
.tactic-count   { font-size: 10px; font-weight: 700; color: var(--ui-count); flex-shrink: 0; }
.tactic-cells   { display: flex; flex-direction: column; gap: 3px; }
.tech-cell { padding: 6px 8px; border-radius: 2px; border: 1px solid var(--border); background: var(--bg-card); cursor: default; transition: all var(--transition); position: relative; }
.tech-cell.active-med  { background: #0d2038; border-color: #1e4d73; cursor: pointer; }
.tech-cell.active-med:hover  { background: #1a4060; border-color: #4da6ff; transform: scale(1.02); }
.tech-cell.active-high { background: #0d2a45; border-color: #4da6ff; box-shadow: 0 0 8px #4da6ff22; cursor: pointer; }
.tech-cell.active-high:hover { background: #1a4060; border-color: #4da6ff; box-shadow: 0 0 14px #4da6ff44; transform: scale(1.02); }
.tech-cell.inactive    { opacity: 0.35; cursor: default; }
.tech-id   { display: block; font-family: var(--font-mono); font-size: 8px; font-weight: 700; color: #4da6ff; letter-spacing: 0.05em; margin-bottom: 2px; }
.tech-cell.inactive .tech-id   { color: var(--text-muted); }
.tech-cell.inactive .tech-name { color: var(--text-muted); }
.tech-name  { display: block; font-size: 9px; color: var(--text-secondary); line-height: 1.3; word-break: break-word; }
.tech-count { position: absolute; top: 4px; right: 5px; font-size: 9px; font-weight: 700; color: var(--ui-count); }

/* ── New Item Highlight ──────────────────────────────────────────── */
/* NEW now means "since your last visit" rather than "since the last hourly
   run", so it fires on a handful of cards instead of two-thirds of them — a
   glow is affordable again. Derived from the active hue so it survives a theme
   switch. */
.intel-card.new-item { box-shadow: inset 0 0 0 1px var(--ui-active-dim); }
.new-item-badge { display: inline-flex; align-items: center; padding: 1px 5px; margin-left: 5px; border-radius: 2px; font-size: 8px; font-weight: 700; letter-spacing: 0.12em; background: var(--critical-bg); color: var(--critical); border: 1px solid var(--critical); vertical-align: middle; animation: pulse-new 2s ease-in-out infinite; }
@keyframes pulse-new { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ── Daily Summary Bar ───────────────────────────────────────────── */
.daily-summary  { position: relative; z-index: 85; background: linear-gradient(90deg, var(--ui-active-dim), var(--bg-surface) 60%); border-bottom: 1px solid var(--ui-active-dim); padding: 8px 24px; overflow: hidden; }
.summary-inner  { display: flex; align-items: center; gap: 10px; font-size: 11px; flex-wrap: wrap; row-gap: 4px; }
.summary-label  { font-size: 9px; font-weight: 700; letter-spacing: 0.15em; color: var(--ui-accent); white-space: nowrap; flex-shrink: 0; }
.summary-stats  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.summary-stat   { display: flex; align-items: center; gap: 3px; font-size: 10px; white-space: nowrap; }
.summary-stat-val          { font-weight: 700; }
.summary-stat-val.c        { color: var(--critical); }
.summary-stat-val.h        { color: var(--high); }
.summary-stat-val.m        { color: var(--medium); }
.summary-stat-val.n        { color: var(--accent-blue); }
.summary-stat-lbl          { color: var(--text-muted); font-size: 9px; }
.summary-divider           { color: var(--border); flex-shrink: 0; }
.summary-top               { color: var(--text-secondary); font-size: 10px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.summary-top strong        { color: var(--text-primary); }

/* ── Mobile Sidebar Toggle ───────────────────────────────────────── */
.mobile-stats-toggle { position: relative; z-index: 85; border-bottom: 1px solid var(--border); background: var(--bg-surface); }
.toggle-btn { width: 100%; padding: 8px 16px; background: transparent; border: none; color: var(--text-secondary); font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; cursor: pointer; text-align: left; transition: color var(--transition); }
.toggle-btn:hover { color: var(--ui-active); }

/* ═══════════════════════════════════════════════════════════════════
   AI VISUAL INTELLIGENCE PANEL
   Covers: card expand/collapse, analysis panel, TTP detail cards,
   AI badge, AI score.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Expand hint bar ─────────────────────────────────────────────── */
.card-expand-hint { margin-top: 10px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 8px; font-weight: 700; letter-spacing: 0.15em; color: var(--text-muted); text-align: center; transition: color var(--transition); user-select: none; }
.intel-card:hover .card-expand-hint { color: var(--ui-active); }
.intel-card.expanded .card-expand-hint { display: none; }

/* ── AI Badge (inline in card title) ────────────────────────────── */
.ai-badge { display: inline-flex; align-items: center; padding: 1px 6px; margin-left: 6px; border-radius: 3px; font-size: 8px; font-weight: 700; letter-spacing: 0.1em; background: #2d1f4e; color: #a78bfa; border: 1px solid #5b3fa0; vertical-align: middle; white-space: nowrap; flex-shrink: 0; }

/* ── Analysis section ────────────────────────────────────────────── */
.analysis-section {
  display: none;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid #5b3fa044;
  animation: fade-in-panel 0.22s ease;
}
@keyframes fade-in-panel { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.intel-card.expanded .analysis-section { display: block; }

.analysis-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.analysis-label  { font-size: 9px; font-weight: 700; letter-spacing: 0.18em; color: #a78bfa; text-transform: uppercase; }
.analysis-model  { font-size: 8px; color: var(--text-muted); letter-spacing: 0.08em; font-style: italic; }

/* AI summary paragraph */
.analysis-summary { font-size: 11px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 16px; padding: 10px 12px; background: #08080f; border: 1px solid #1e2d3d; border-left: 3px solid #5b3fa0; border-radius: 0 var(--radius) var(--radius) 0; word-break: break-word; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile-first, clean breakpoints
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tablet (≤ 900px) ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .dashboard { grid-template-columns: 1fr; }
  .sidebar {
    position: static; height: auto; flex-direction: row;
    overflow-x: auto; overflow-y: visible;
    padding: 12px 16px; border-right: none;
    border-bottom: 1px solid var(--border); gap: 12px; scrollbar-width: thin;
  }
  .sidebar-card { min-width: 190px; flex-shrink: 0; }
}

/* ── Mobile (≤ 640px) ────────────────────────────────────────────── */
@media (max-width: 640px) {
  .site-header { padding: 10px 14px; height: auto; flex-wrap: wrap; gap: 4px; }
  .header-left { flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
  .header-right { display: none; }
  .logo { font-size: 15px; }
  .header-meta { font-size: 9px; word-break: break-word; }
  .controls-bar { padding: 8px 14px; flex-direction: column; align-items: stretch; gap: 8px; }
  .search-wrapper { max-width: 100%; min-width: unset; width: 100%; }
  .filter-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; scrollbar-width: none; -ms-overflow-style: none; }
  .filter-tabs::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; padding: 6px 12px; font-size: 10px; white-space: nowrap; }
  .daily-summary { padding: 6px 14px; }
  .summary-inner { gap: 6px; row-gap: 4px; }
  .summary-top, .summary-top + .summary-divider { display: none; }
  .mobile-stats-toggle { display: block !important; }
  .sidebar { display: none; flex-direction: column; overflow-x: hidden; padding: 12px 14px; }
  .sidebar.mobile-open { display: flex; }
  .sidebar-card { min-width: unset; width: 100%; }
  .feed { padding: 10px 14px; gap: 8px; }
  .feed-header { font-size: 9px; padding-bottom: 8px; }
  .intel-card { padding: 12px 12px; }
  .card-top { gap: 8px; align-items: flex-start; }
  .card-title { font-size: 12px; line-height: 1.4; }
  .badge { font-size: 8px; padding: 2px 6px; flex-shrink: 0; }
  .card-description { font-size: 11px; -webkit-line-clamp: 3; line-height: 1.55; margin-top: 5px; }
  .card-meta { gap: 5px; margin-top: 6px; flex-wrap: wrap; }
  .meta-tag { font-size: 8px; padding: 1px 5px; }
  .meta-date { font-size: 9px; margin-left: auto; }
  .cve-id { font-size: 9px; }
  .new-item-badge { font-size: 7px; padding: 1px 4px; }

  /* Matrix: horizontal scroll, smaller cells */
  .matrix-grid { gap: 4px; }
  .tactic-col  { min-width: 110px; max-width: 120px; }
  .tactic-name { font-size: 8px; }
  .tech-cell   { padding: 5px 6px; }
  .tech-id     { font-size: 7px; }
  .tech-name   { font-size: 8px; }
  .matrix-hint { display: none; }

  .analysis-summary { font-size: 10px; }
  .analysis-header { flex-direction: column; align-items: flex-start; }

  .site-footer { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 14px; font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════
   CVE Modal Styles
   ═══════════════════════════════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg-sticky);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-content {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%; max-width: 720px; max-height: 85vh;
  display: flex; flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px var(--border-glow);
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
}
.modal-title {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 700;
  color: var(--ui-active);
}
.modal-close {
  background: none; border: none;
  color: var(--text-secondary); font-size: 28px; cursor: pointer;
  line-height: 1; padding: 0 4px;
  transition: color var(--transition);
}
.modal-close:hover { color: var(--critical); }
.modal-body {
  padding: 20px; overflow-y: auto; flex: 1;
}
.modal-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 40px; color: var(--text-secondary);
}
.modal-section { margin-bottom: 20px; }
.modal-section:last-child { margin-bottom: 0; }
.modal-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase;
}
.modal-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
}
.modal-stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.modal-stat-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.modal-stat-value { font-size: 14px; font-weight: 600; color: var(--text-primary); margin-top: 4px; }
.modal-stat-value.critical { color: var(--critical); }
.modal-stat-value.high { color: var(--high); }
.modal-stat-value.medium { color: var(--medium); }

.modal-description {
  font-size: 13px; line-height: 1.65; color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px;
}
.modal-refs {
  display: flex; flex-direction: column; gap: 8px;
}
.modal-ref-link {
  display: block; font-size: 11px; color: var(--accent-blue);
  text-decoration: none; padding: 6px 10px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); transition: all var(--transition);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-ref-link:hover { background: var(--bg-card-hover); border-color: var(--accent-blue); }
.modal-epss-bar {
  height: 8px; background: var(--bg-base); border-radius: 4px; overflow: hidden; margin-top: 6px;
}
.modal-epss-fill {
  height: 100%; background: linear-gradient(90deg, var(--ui-active), var(--accent-blue));
  border-radius: 4px; transition: width 0.5s ease;
}
.modal-error { text-align: center; padding: 30px; color: var(--critical); }



/* Keyboard shortcut hint */
kbd {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 3px; padding: 1px 5px; font-size: 10px;
  color: var(--text-muted); font-family: var(--font-mono);
}

/* Retry button */
.retry-btn {
  margin-top: 16px; padding: 8px 20px;
  background: var(--bg-card); border: 1px solid var(--ui-active);
  color: var(--ui-active); border-radius: var(--radius);
  cursor: pointer; font-family: var(--font-mono); font-size: 12px;
  transition: all var(--transition);
}
.retry-btn:hover { background: var(--ui-active); color: var(--bg-base); }

/* ── IOC Pills ──────────────────────────────────────────────────── */
.card-iocs {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.ioc-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 7px; border-radius: 3px;
  font-size: 9px; font-weight: 600; letter-spacing: 0.04em;
  font-family: var(--font-mono); cursor: default;
  transition: all var(--transition);
  word-break: break-all;
}
.ioc-pill:hover { transform: translateY(-1px); }
.ioc-ipv4    { background: #0a1f2e; color: #4da6ff; border: 1px solid #1a4060; }
.ioc-domain  { background: #1a0f2e; color: #a78bfa; border: 1px solid #3a2060; }
.ioc-url     { background: #1a2e0f; color: #7dd3ba; border: 1px solid #2a5a30; }
.ioc-sha256  { background: #2e1a0f; color: #ff8c42; border: 1px solid #5a3a20; }
.ioc-sha1    { background: #2e1a2e; color: #f5c518; border: 1px solid #5a3a40; }
.ioc-md5     { background: #2e0f1a; color: #ff5c7c; border: 1px solid #5a2030; }
.ioc-cve     { background: #2e0f0f; color: var(--critical); border: 1px solid #5a2020; }
.ioc-cidr    { background: #0f2e2e; color: #00ffe1; border: 1px solid #1a5a50; }
.ioc-email   { background: #1a1a2e; color: #78a7fa; border: 1px solid #2a2a5a; }

/* Threat actor badge */
.threat-actor-badge {
  display: inline-block; padding: 1px 6px;
  background: #2a1a3a; border: 1px solid #8b5cf6;
  color: #a78bfa; font-size: 9px; border-radius: 3px;
  margin-right: 4px;
}

/* CISA KEV badge */
.cisa-kev-badge {
  display: inline-block; padding: 1px 6px;
  background: #3a1a1a; border: 1px solid #ff3b5c;
  color: #ff3b5c; font-size: 9px; border-radius: 3px;
  margin-left: 4px; font-weight: 700;
}

/* Resizable sidebar */
.resize-handle {
  width: 4px; cursor: col-resize; background: transparent;
  transition: background var(--transition);
  position: absolute; right: 0; top: 0; bottom: 0;
}
.resize-handle:hover, .resize-handle.active {
  background: var(--ui-active);
}

/* ═══════════════════════════════════════════════════════════════════
   v2.3 ADDITIONS — priority, pagination, watchlist, source health, trends
   ═══════════════════════════════════════════════════════════════════ */

/* ── Priority badge ──────────────────────────────────────────────── */
.meta-priority { font-variant-numeric: tabular-nums; white-space: nowrap; border: 1px solid; }
.meta-priority.prio-urgent   { background: #3a0a12; color: #ff3b5c; border-color: #ff3b5c; box-shadow: 0 0 8px #ff3b5c33; }
.meta-priority.prio-elevated { background: #3a1e0a; color: #ff8c42; border-color: #ff8c42; }
.meta-priority.prio-moderate { background: #3a340a; color: #f5c518; border-color: #7a6a10; }
.meta-priority.prio-low      { background: var(--bg-base); color: var(--text-secondary); border-color: var(--border); }

/* ── Trends filter button ────────────────────────────────────────── */
.filter-btn.trends-btn { background: #0a2018; border-color: #1a5a40; color: #34d399; }
.filter-btn.trends-btn:hover,
.filter-btn.trends-btn.active { background: #34d399; border-color: #34d399; color: var(--bg-base); }

/* ── Sort toggle button ──────────────────────────────────────────── */
.feed-sort {
  background: transparent; border: 1px solid var(--border); color: var(--ui-active);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  padding: 3px 9px; border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
}
.feed-sort:hover { border-color: var(--ui-active); background: var(--ui-active-dim); }

/* ── Load more + scroll sentinel ─────────────────────────────────── */
.load-more-btn {
  width: 100%; margin-top: 8px; padding: 10px; background: var(--bg-surface);
  border: 1px dashed var(--border); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
}
.load-more-btn:hover { border-color: var(--ui-active); color: var(--ui-active); }
#scroll-sentinel { height: 1px; width: 100%; }

/* ── Sidebar title badge (consolidated with .sidebar-title above) ── */
.sidebar-title-badge { color: var(--ui-count); font-size: 9px; letter-spacing: 0.05em; }

/* ── Watchlist ───────────────────────────────────────────────────── */
.watchlist-input {
  width: 100%; background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary); font-family: var(--font-mono);
  font-size: 10px; padding: 6px 8px; outline: none; margin-bottom: 8px;
}
.watchlist-input:focus { border-color: var(--ui-active); }
.watchlist-input::placeholder { color: var(--text-muted); }
.watchlist-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.watchlist-empty { font-size: 9px; color: var(--text-muted); line-height: 1.5; }
.watch-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px;
  background: #14243a; border: 1px solid #1e4d73; color: var(--ui-active);
  border-radius: 3px; font-size: 9px;
}
.watch-x { cursor: pointer; color: var(--text-secondary); font-weight: 700; }
.watch-x:hover { color: var(--critical); }
.watchlist-only-btn {
  width: 100%; margin-top: 8px; padding: 5px; background: transparent;
  border: 1px solid var(--border); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em;
  border-radius: var(--radius); cursor: pointer; transition: all var(--transition);
}
.watchlist-only-btn:hover { border-color: var(--ui-active); color: var(--ui-active); }
.watchlist-only-btn.active { background: var(--ui-active); border-color: var(--ui-active); color: var(--bg-base); }

/* Card highlight when it matches a watchlist keyword */
.intel-card.watchlist-hit { border-left-color: #34d399 !important; }
.intel-card.watchlist-hit::before {
  content: '★'; position: absolute; margin-left: -10px; color: #34d399; font-size: 10px;
}

/* ── Source health panel ─────────────────────────────────────────── */
.source-health { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow-y: auto; }
.health-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 10px; }
.health-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.health-dot.ok    { background: #00ff88; box-shadow: 0 0 4px #00ff88; }
.health-dot.empty { background: var(--medium); }
.health-dot.err   { background: var(--critical); box-shadow: 0 0 4px var(--critical); }
.health-name { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-count { color: var(--text-muted); font-size: 9px; }

/* ── Trends view ─────────────────────────────────────────────────── */
.trends-view { width: 100%; padding-bottom: 20px; }
.trends-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.trend-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; overflow: hidden; }
.trend-wide { grid-column: 1 / -1; }
.trend-title { font-size: 9px; font-weight: 700; letter-spacing: 0.15em; color: var(--text-muted); margin-bottom: 14px; text-transform: uppercase; }
.trend-empty { font-size: 10px; color: var(--text-muted); font-style: italic; }

/* Volume chart (stacked bars over time) */
.trend-vol-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; overflow-x: auto; padding-bottom: 4px; }
.trend-bar-col { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; min-width: 14px; height: 100%; justify-content: flex-end; }
.trend-bar-stack { display: flex; flex-direction: column-reverse; justify-content: flex-start; width: 100%; height: 120px; border-radius: 2px 2px 0 0; overflow: hidden; }
.tb-seg { display: block; width: 100%; min-height: 1px; }
.tb-seg.critical { background: var(--critical); }
.tb-seg.high     { background: var(--high); }
.tb-seg.medium   { background: var(--medium); }
.tb-seg.low      { background: var(--low); }
.trend-bar-x { font-size: 7px; color: var(--text-muted); transform: rotate(-45deg); white-space: nowrap; height: 10px; }
.trend-legend { display: flex; gap: 14px; margin-top: 12px; font-size: 9px; color: var(--text-secondary); flex-wrap: wrap; }
.trend-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.trend-legend .dot.critical { background: var(--critical); }
.trend-legend .dot.high { background: var(--high); }
.trend-legend .dot.medium { background: var(--medium); }
.trend-legend .dot.low { background: var(--low); }

/* Horizontal bar lists (actors, sources, ttps) */
.bar-list { display: flex; flex-direction: column; gap: 7px; }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 10px; }
.bar-label { width: 40%; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 6px; background: var(--bg-card); border-radius: 3px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 3px; transition: width 0.6s ease; }
.bar-val { width: 24px; text-align: right; color: var(--text-muted); font-size: 9px; }

/* Trending CVE list */
.trending-list { display: flex; flex-direction: column; gap: 4px; }
.trending-cve { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px; cursor: pointer; font-size: 10px; transition: all var(--transition); }
.trending-cve:hover { border-color: var(--ui-link); background: var(--bg-card-hover); }
.tc-id { font-family: var(--font-mono); color: var(--critical); font-weight: 700; flex-shrink: 0; }
.tc-kev { background: #3a1a1a; border: 1px solid #ff3b5c; color: #ff3b5c; font-size: 8px; padding: 0 4px; border-radius: 2px; font-weight: 700; }
.tc-prio { background: #1e0a3c; color: #a78bfa; font-size: 8px; padding: 0 4px; border-radius: 2px; flex-shrink: 0; }
.tc-title { color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-days { color: var(--text-muted); font-size: 9px; flex-shrink: 0; }

@media (max-width: 640px) {
  .trends-grid { grid-template-columns: 1fr; }
}
/* ─── CVE cross-reference links (modal) ─────────────────────────────────────── */
.modal-xref-links { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.xref-link {
  display: inline-block; padding: 4px 10px; font-size: 10px; font-weight: 700;
  font-family: var(--font-mono); text-decoration: none; border-radius: 3px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--ui-link);
  transition: all var(--transition);
}
.xref-link:hover { border-color: var(--ui-link); background: var(--bg-card-hover); }
.xref-link.xref-kev { border-color: #ff3b5c; color: #ff3b5c; }

/* ─── Source health staleness badges ────────────────────────────────────────── */
.health-item.stale .health-name { color: var(--medium); }
.health-stale-badge {
  font-size: 8px; padding: 0 4px; border-radius: 2px; flex-shrink: 0;
  background: #3a2a10; border: 1px solid var(--medium); color: var(--medium);
}

/* ─── v2.4 ADDITIONS — PoC badge, Stack badge, Trend arrows, My Stack ────────── */

.poc-badge {
  display: inline-block; padding: 1px 6px;
  background: #2a1a0a; border: 1px solid var(--high);
  color: var(--high); font-size: 9px; border-radius: 3px;
  margin-left: 4px; font-weight: 700;
}
.poc-badge a { color: inherit; text-decoration: none; }
.poc-badge a:hover { text-decoration: underline; }

.stack-badge {
  display: inline-block; padding: 1px 6px;
  background: #1a2a1a; border: 1px solid #34d399;
  color: #34d399; font-size: 9px; border-radius: 3px;
  margin-left: 4px; font-weight: 700;
}

/* Stack chips (reuses watchlist styles) */
.stack-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.stack-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px;
  background: #1a2a1a; border: 1px solid #2a5a3a; color: #34d399;
  border-radius: 3px; font-size: 9px;
}
.stack-x { cursor: pointer; color: var(--text-secondary); font-weight: 700; }
.stack-x:hover { color: var(--critical); }

.intel-card.stack-hit { border-left-color: #34d399 !important; }
.intel-card.stack-hit::before {
  content: '⚙'; position: absolute; margin-left: -10px; color: #34d399; font-size: 10px;
}

/* Trend direction arrows */
.trend-up   { color: var(--critical); font-size: 7px; margin-left: 2px; }
.trend-down { color: #34d399; font-size: 7px; margin-left: 2px; }
.trend-flat { color: var(--text-muted); font-size: 7px; margin-left: 2px; }

/* PoC link in xref bar */
.xref-link.xref-poc { border-color: var(--high); color: var(--high); }
.xref-link.xref-poc:hover { background: #2a1a0a; }

/* PWA: hidden fullscreen controls on mobile */
@media (display-mode: standalone) {
  .site-header { padding-top: env(safe-area-inset-top); }
  .mobile-stats-toggle { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   v3.0 additions
   ══════════════════════════════════════════════════════════════════════════ */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ui-active); color: var(--bg-base);
  padding: 8px 16px; font-family: var(--font-mono); font-size: 12px;
}
.skip-link:focus { left: 0; }

/* Visible focus ring — keyboard navigation is a first-class path here. */
:where(button, a, input, [tabindex]):focus-visible {
  outline: 2px solid var(--ui-active);
  outline-offset: 2px;
}

/* ── Toast (live updates) ───────────────────────────────────────────────── */
.toast-host { position: fixed; top: 16px; right: 16px; z-index: 300; }
.toast {
  display: flex; align-items: center; gap: 12px;
  background: var(--bg-card); border: 1px solid var(--ui-active);
  box-shadow: 0 4px 24px #000a, 0 0 0 1px var(--border-glow);
  border-radius: var(--radius); padding: 10px 12px;
  font-family: var(--font-mono); font-size: 12px; color: var(--text-primary);
  animation: toast-in 0.22s ease;
}
@keyframes toast-in { from { transform: translateY(-8px); opacity: 0; } }
.toast-action {
  background: var(--ui-active); color: var(--bg-base); border: none;
  border-radius: 3px; padding: 4px 10px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700;
}
.toast-close {
  background: none; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px;
}

/* ── Daily brief ────────────────────────────────────────────────────────── */
.daily-brief {
  /* The tint and the rule both derive from the active-state hue rather than
     being hardcoded, so the brief follows the theme instead of staying a dark
     green band on a white page. */
  background: linear-gradient(90deg, var(--ui-active-dim), var(--bg-surface) 70%);
  border-bottom: 1px solid var(--ui-active-dim); padding: 12px 24px;
}
.brief-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.brief-label {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; color: var(--ui-accent);
}
.brief-stats { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); }
.brief-headline {
  margin: 6px 0 0; font-family: var(--font-display); font-size: 15px;
  color: var(--text-primary); line-height: 1.4;
}
.brief-list { margin: 8px 0 0; padding-left: 20px; }
.brief-item { margin-bottom: 4px; font-size: 13px; line-height: 1.45; }
.brief-link { color: var(--accent-blue); text-decoration: none; font-weight: 600; }
.brief-link:hover { text-decoration: underline; }
.brief-reason { color: var(--text-secondary); font-size: 12px; display: block; }

/* ── Action line (what the priority score is FOR) ───────────────────────── */
.card-action {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 8px 0; padding: 6px 10px; border-radius: var(--radius);
  border-left: 3px solid var(--text-muted); background: #0c141d;
}
.card-action.prio-urgent   { border-left-color: var(--critical); background: var(--critical-bg); }
.card-action.prio-elevated { border-left-color: var(--high);     background: var(--high-bg); }
.card-action.prio-moderate { border-left-color: var(--medium);   background: var(--medium-bg); }
.action-verb {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--text-primary); letter-spacing: 0.04em;
}
.action-detail { font-size: 12px; color: var(--text-secondary); }

/* ── Cards: triage states ───────────────────────────────────────────────── */
.intel-card.cursor { box-shadow: 0 0 0 2px var(--ui-active); }
.intel-card.starred { border-left: 3px solid var(--warn); }
.intel-card.is-dismissed { opacity: 0.45; }
.intel-card.just-arrived { animation: flash-in 1.4s ease; }
@keyframes flash-in {
  0%   { background: #0a2f28; box-shadow: 0 0 0 2px var(--ui-active); }
  100% { background: var(--bg-card); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .intel-card.just-arrived, .toast { animation: none; }
  * { scroll-behavior: auto !important; }
}

.card-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: middle; }
.card-actions {
  display: flex; align-items: center; gap: 6px; margin-top: 10px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.card-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-secondary); border-radius: 3px; cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; padding: 3px 8px;
  transition: var(--transition);
}
.card-btn:hover { border-color: var(--ui-active); color: var(--ui-active); }
.card-expand-hint { margin-left: auto; font-size: 10px; color: var(--text-muted); }

.meta-ssvc { background: #2a1030; color: #d9a7ff; border: 1px solid #6b3a80; }
.meta-cwe  { background: #1a2430; color: var(--text-secondary); border: 1px solid var(--border); }
.analysis-why {
  margin-top: 6px; padding-left: 10px; border-left: 2px solid var(--ui-active);
  color: var(--text-primary); font-size: 13px; font-style: italic;
}

/* Compact density: one line per item for fast scanning. */
.cards-container[data-density="compact"] .card-description,
.cards-container[data-density="compact"] .card-iocs,
.cards-container[data-density="compact"] .card-actions,
.cards-container[data-density="compact"] .card-action { display: none; }
.cards-container[data-density="compact"] .intel-card { padding: 8px 12px; }
.cards-container[data-density="compact"] .intel-card.expanded .card-description,
.cards-container[data-density="compact"] .intel-card.expanded .card-actions,
.cards-container[data-density="compact"] .intel-card.expanded .card-action { display: flex; }
.cards-container[data-density="compact"] .intel-card.expanded .card-description { display: block; }

/* ── Interactive sidebar (was read-only decoration) ─────────────────────── */
.sidebar-hint { font-size: 9px; color: var(--text-muted); font-weight: 400; letter-spacing: 0; }
.sev-row, .src-row, .cat-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
  border-radius: 3px; transition: var(--transition); text-align: left;
}
.sev-row:hover, .src-row:hover, .cat-row:hover { background: var(--bg-card-hover); }
.sev-row.active, .cat-row.active { background: var(--bg-card-hover); color: var(--ui-active); }
.sev-label { width: 62px; flex-shrink: 0; font-weight: 700; font-size: 10px; }
.sev-label.critical { color: var(--critical); }
.sev-label.high     { color: var(--high); }
.sev-label.medium   { color: var(--medium); }
.sev-label.low      { color: var(--low); }
.sev-bar-wrap, .src-bar-wrap {
  flex: 1; height: 6px; background: #0c1219; border-radius: 3px; overflow: hidden;
}
.sev-bar, .src-bar {
  display: block; height: 100%; border-radius: 3px; transition: width 0.3s ease;
}
.sev-count, .src-count, .cat-count {
  width: 32px; text-align: right; flex-shrink: 0;
  font-variant-numeric: tabular-nums; color: var(--text-primary);
}
.src-name, .cat-name {
  width: 96px; flex-shrink: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-title-badge.all-clear { color: var(--ok); }

/* Source health: `stale` is a distinct state from `ok`. */
.health-item { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 11px; }
.health-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot-ok    { background: var(--ok); }
.dot-stale { background: var(--warn); }
.dot-empty { background: var(--text-muted); }
.dot-error { background: var(--critical); }
.health-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-stale-badge {
  font-size: 8px; padding: 1px 4px; border-radius: 2px;
  background: #3a2a10; color: var(--warn); border: 1px solid var(--warn);
}
.health-count { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

.chip {
  display: inline-flex; align-items: center; gap: 4px; margin: 2px;
  padding: 2px 6px; border-radius: 3px; background: #14243a;
  border: 1px solid #1e4d73; color: var(--ui-active);
  font-family: var(--font-mono); font-size: 10px;
}
.chip-x { background: none; border: none; color: inherit; cursor: pointer; padding: 0; font-size: 12px; }

/* ── Charts ─────────────────────────────────────────────────────────────── */
.chart-grid-layout { display: grid; gap: 20px; }
.chart-figure {
  margin: 0; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; position: relative;
}
.chart-title {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--text-primary); margin-bottom: 10px;
}
.chart-svg { width: 100%; height: auto; display: block; }
/* Recessive grid and axes — the data is the figure, not the furniture. */
.chart-grid { stroke: #1a2733; stroke-width: 1; }
.chart-axis-label { fill: var(--text-secondary); font-size: 9px; font-family: var(--font-mono); }
.chart-crosshair { stroke: var(--ui-active); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-tooltip {
  position: absolute; top: 20px; transform: translateX(-50%);
  background: var(--bg-base); border: 1px solid var(--ui-active);
  border-radius: 3px; padding: 6px 8px; pointer-events: none;
  font-family: var(--font-mono); font-size: 10px; transition: opacity 0.1s;
  display: flex; flex-direction: column; gap: 2px; min-width: 110px; z-index: 5;
}
.tt-row { display: flex; align-items: center; gap: 6px; }
.tt-dot { width: 8px; height: 8px; border-radius: 2px; }
.tt-name { flex: 1; color: var(--text-secondary); }
.tt-val { color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* Legend is always present for >= 2 series: identity is never colour-alone. */
.chart-legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
}
.legend-entry { display: flex; align-items: center; gap: 5px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; }
.chart-empty { color: var(--text-secondary); font-size: 12px; padding: 16px 0; }
.bar-list { display: flex; flex-direction: column; gap: 5px; }
.bar-row { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; }
.bar-name { width: 130px; flex-shrink: 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { flex: 1; height: 8px; background: #0c1219; border-radius: 4px; overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 4px; }
.bar-val { width: 34px; text-align: right; color: var(--text-primary); font-variant-numeric: tabular-nums; }
/* A table view always exists alongside the chart. */
.chart-table { margin-top: 16px; font-family: var(--font-mono); font-size: 11px; }
.chart-table summary { cursor: pointer; color: var(--ui-active); padding: 6px 0; }
.chart-table table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.chart-table th, .chart-table td {
  padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
}
.chart-table th:first-child, .chart-table td:first-child { text-align: left; }
.chart-table th { color: var(--text-secondary); font-weight: 600; }

/* ── Command palette ────────────────────────────────────────────────────── */
.palette-overlay {
  position: fixed; inset: 0; z-index: 400; display: flex;
  align-items: flex-start; justify-content: center; padding-top: 12vh;
  background: #000a; backdrop-filter: blur(2px);
}
.palette-box {
  width: min(560px, 92vw); background: var(--bg-card);
  border: 1px solid var(--ui-active); border-radius: 6px;
  box-shadow: 0 12px 48px #000c; overflow: hidden;
}
.palette-input {
  width: 100%; background: var(--bg-base); border: none;
  border-bottom: 1px solid var(--border); color: var(--text-primary);
  font-family: var(--font-mono); font-size: 14px; padding: 12px 14px; outline: none;
}
.palette-list { max-height: 46vh; overflow-y: auto; }
.palette-row {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  background: none; border: none; cursor: pointer; text-align: left;
  padding: 8px 14px; font-family: var(--font-mono); font-size: 12px;
  color: var(--text-primary);
}
.palette-row:hover, .palette-row.active { background: var(--bg-card-hover); color: var(--ui-active); }
.palette-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-hint { font-size: 10px; color: var(--text-muted); }
.palette-empty { padding: 14px; color: var(--text-secondary); font-size: 12px; }
.palette-footer {
  padding: 8px 14px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
}
kbd {
  background: var(--bg-base); border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 5px; font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
}
.shortcuts-title {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ui-accent);
}
.shortcuts-list {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 16px;
  padding: 14px; margin: 0; font-size: 12px;
}
.shortcuts-list dt { text-align: right; }
.shortcuts-list dd { margin: 0; color: var(--text-secondary); }

/* ── Skeleton loading (replaces the bare spinner) ───────────────────────── */
.skeleton-card {
  height: 96px; margin-bottom: 12px; border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: skeleton 1.4s ease-in-out infinite;
}
@keyframes skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton-card { animation: none; } }

.icon-btn {
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
  border-radius: 3px; cursor: pointer; padding: 5px 9px;
  font-family: var(--font-mono); font-size: 11px;
}
.icon-btn:hover { border-color: var(--ui-active); color: var(--ui-active); }
.feed-controls { display: flex; gap: 6px; }
.modal-action {
  margin: 10px 0; padding: 8px 12px; border-radius: var(--radius);
  border-left: 3px solid var(--text-muted); background: #0c141d; font-size: 13px;
}
.modal-action.prio-urgent   { border-left-color: var(--critical); background: var(--critical-bg); }
.modal-action.prio-elevated { border-left-color: var(--high);     background: var(--high-bg); }
.modal-xrefs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.modal-vector {
  display: block; padding: 6px 8px; background: var(--bg-base);
  border: 1px solid var(--border); border-radius: 3px;
  font-family: var(--font-mono); font-size: 11px; color: var(--text-code);
  overflow-x: auto;
}
.tactic-col { min-width: 150px; }
.tactic-header {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  color: var(--ui-active); padding: 6px 0; border-bottom: 1px solid var(--border);
  margin-bottom: 6px; letter-spacing: 0.05em;
}
.tech-cell {
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
  width: 100%; margin-bottom: 3px; padding: 4px 6px; cursor: pointer;
  border-radius: 3px; font-family: var(--font-mono); font-size: 10px;
  background: #0d2a45; border: 1px solid #1e4d73; color: var(--text-primary);
}
.tech-cell:hover { background: #1a4060; border-color: #4da6ff; }
.tech-count { color: var(--ui-count); font-variant-numeric: tabular-nums; }
.error-detail { color: var(--text-secondary); font-size: 12px; font-family: var(--font-mono); }

/* Priority badge. Leads over the keyword-inferred severity badge wherever a
   score exists, so a card can't show "MEDIUM" next to "Patch now / P90". */
.prio-badge { font-weight: 700; letter-spacing: 0.06em; }
.badge.prio-urgent   { background: var(--critical-bg); color: var(--critical); border-color: var(--critical); }
.badge.prio-elevated { background: var(--high-bg);     color: var(--high);     border-color: var(--high); }
.badge.prio-moderate { background: var(--medium-bg);   color: var(--medium);   border-color: var(--medium); }
.badge.prio-low      { background: var(--low-bg);      color: var(--low);      border-color: var(--low); }

/* ─── Attacker map (Phase 02) ────────────────────────────────────────────── */
.map-view { padding: 4px 0 24px; }
.map-head { margin-bottom: 16px; }
.map-title {
  font-size: 18px; color: var(--text-primary); margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.map-sub { font-size: 12px; color: var(--text-secondary); margin: 0; max-width: 70ch; }

.map-toggles { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 18px; }
.map-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; font-size: 11px; letter-spacing: 0.04em;
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.map-toggle:hover { color: var(--text-primary); border-color: var(--text-muted); }
.map-toggle.active { color: var(--text-primary); border-color: var(--ui-active); }
.map-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.map-toggle-label { white-space: nowrap; }

.map-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .map-grid { grid-template-columns: 1fr; } }

.map-canvas {
  background: var(--bg-surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 8px; overflow: hidden;
}
.map-grid-line { stroke: var(--border); stroke-width: 0.5; opacity: 0.5; }

.map-table-wrap { overflow-x: auto; }
.map-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.map-table-caption {
  text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); padding-bottom: 8px; caption-side: top;
}
.map-row td { padding: 4px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.map-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; width: 1%; }
.map-cc {
  font-family: var(--font-mono, monospace); color: var(--text-code);
  font-size: 11px; width: 1%;
}
.map-name { color: var(--text-primary); white-space: nowrap; }
.map-bar-cell { width: 45%; }
.map-bar { height: 8px; border-radius: 2px; min-width: 2px; opacity: 0.8; }
.map-val {
  text-align: right; color: var(--text-secondary);
  font-variant-numeric: tabular-nums; width: 1%; white-space: nowrap;
}

.map-prov { margin-top: 18px; font-size: 11px; color: var(--text-secondary); }
.map-prov-summary { cursor: pointer; letter-spacing: 0.04em; }
.map-prov-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 3px 18px; margin: 10px 0 6px;
}
.map-prov-row { display: flex; justify-content: space-between; gap: 10px; }
.map-prov-feed { color: var(--text-primary); font-family: var(--font-mono, monospace); }
.map-prov-rows { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.map-attribution { color: var(--text-muted); margin: 8px 0 0; font-style: italic; }

/* ─── Sector list (Phase 03) ─────────────────────────────────────────────── */
.sector-list { display: flex; flex-direction: column; gap: 2px; }
.sector-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 5px 8px; background: transparent; border: 1px solid transparent;
  border-radius: 3px; cursor: pointer; text-align: left; width: 100%;
  color: var(--text-secondary); font-size: 12px;
}
.sector-row:hover { background: var(--bg-card); color: var(--text-primary); }
.sector-row.active { border-color: var(--ui-active); color: var(--text-primary); }
.sector-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sector-meta { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.sector-explicit { color: var(--ui-active); font-size: 8px; line-height: 1; }
.sector-count { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sector-empty { color: var(--text-muted); font-size: 11px; padding: 4px 8px; margin: 0; }

/* ─── Threat landscape (Phase 04) ────────────────────────────────────────── */
.landscape-view { padding: 4px 0 24px; }
.ls-title { font-size: 18px; color: var(--text-primary); margin: 0 0 4px; letter-spacing: 0.02em; }
.ls-sub { font-size: 12px; color: var(--text-secondary); margin: 0 0 18px; }
.ls-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 22px;
}
.ls-tile {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: 14px 16px;
}
.ls-tile-val {
  font-size: 26px; color: var(--text-primary); font-weight: 600;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.ls-tile-label {
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-secondary); margin-top: 4px;
}
.ls-tile-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.ls-rising  { color: #e0653f; }
.ls-cooling { color: #3fae8c; }
.ls-steady  { color: var(--text-muted); }
.ls-spark { width: 100%; height: auto; display: block; }
.ls-kev-bar { fill: var(--accent-orange); opacity: 0.75; }

/* ─── Geopolitical view (Phase 05) ───────────────────────────────────────── */
.geopol-view { padding: 4px 0 24px; }
.geo-origins {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin: 16px 0;
}
.geo-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 14px 16px; }
.geo-card-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.geo-cc { font-family: var(--font-mono, monospace); color: var(--text-code); font-size: 13px; }
.geo-country { color: var(--text-primary); font-weight: 600; }
.geo-count { color: var(--text-muted); font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; }
.geo-pill {
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; border: 1px solid currentColor;
}
.geo-suspected  { color: var(--accent-orange); }
.geo-attributed { color: #d6454f; }
.geo-actors { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.geo-line { font-size: 11px; color: var(--text-secondary); margin-bottom: 4px; }
.geo-src { margin-top: 8px; font-size: 11px; }
.geo-src-sum { cursor: pointer; color: var(--text-muted); }
.geo-src-row { color: var(--text-secondary); padding: 3px 0 0 10px; }
.geo-ledger { margin-top: 18px; font-size: 12px; }
.geo-ledger-sum { cursor: pointer; color: var(--text-secondary); letter-spacing: 0.04em; }
.geo-table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.geo-trow td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.geo-td-actor { color: var(--text-primary); font-weight: 500; white-space: nowrap; }
.geo-td-cc { font-family: var(--font-mono, monospace); color: var(--text-code); font-size: 11px; white-space: nowrap; }
.geo-td-src { color: var(--text-muted); font-size: 11px; }

/* ─── Choropleth world map ───────────────────────────────────────────────── */
.world-map { width: 100%; height: auto; display: block; }
.map-ocean { fill: #060a0e; }
.map-country {
  fill: #16202b;                 /* land with no data still reads as land */
  stroke: #24323f; stroke-width: 0.4; stroke-linejoin: round;
  transition: fill-opacity 0.18s ease, stroke 0.18s ease;
}
.map-country.has-data { cursor: pointer; }
.map-country.has-data:hover { stroke: var(--ui-active); stroke-width: 0.9; }

/* Pulse on the heaviest origins. Decorative reinforcement of a value already
   encoded by shade, so removing it loses no information. */
.map-pulse {
  fill: none; stroke-width: 1.2; opacity: 0.9;
  transform-box: fill-box; transform-origin: center;
  animation: cw-pulse 2.4s ease-out infinite;
}
.map-pulse-core { opacity: 0.95; }
@keyframes cw-pulse {
  0%   { r: 2.5; opacity: 0.85; }
  70%  { r: 13;  opacity: 0;    }
  100% { r: 13;  opacity: 0;    }
}
@media (prefers-reduced-motion: reduce) {
  .map-pulse { animation: none; opacity: 0.5; }
}

.map-readout {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  min-height: 20px; margin-top: 8px; padding: 6px 8px;
  border-top: 1px solid var(--border); font-size: 11px;
}
.map-readout-hint { color: var(--text-muted); }
.map-readout-cc {
  font-family: var(--font-mono, monospace); color: var(--text-code); font-size: 12px;
}
.map-readout-name { color: var(--text-primary); font-weight: 600; }
.map-readout-detail { color: var(--text-secondary); }

/* Motive chips: state / criminal / hacktivist must never read as the same claim */
.geo-motives { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.geo-motive {
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; border: 1px solid currentColor;
}
.geo-motive-state      { color: #d6454f; }
.geo-motive-criminal   { color: var(--accent-orange); }
.geo-motive-hacktivist { color: #9b6dd6; }
.geo-motive-unknown    { color: var(--text-muted); }
.geo-td-motive { white-space: nowrap; }

/* ─── OSINT provenance (Phase 06) ────────────────────────────────────────── */
.prov-badge {
  font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 2px; border: 1px solid currentColor; margin-left: auto;
}
.prov-human-toggle {
  display: block; width: 100%; text-align: left; margin-bottom: 6px;
  padding: 5px 8px; font-size: 11px; cursor: pointer; border-radius: 3px;
  background: transparent; border: 1px solid var(--border); color: var(--text-secondary);
}
.prov-human-toggle:hover { color: var(--text-primary); }
.prov-human-toggle.active { border-color: var(--ui-active); color: var(--ui-active); }
.prov-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 5px 8px; background: transparent; border: 1px solid transparent;
  border-radius: 3px; cursor: pointer; color: var(--text-secondary); font-size: 12px;
}
.prov-row:hover { background: var(--bg-card); color: var(--text-primary); }
.prov-row.active { border-color: var(--ui-active); color: var(--text-primary); }
.prov-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prov-count { margin-left: auto; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.prov-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }

/* One hue per provenance class. Adversary-authored is deliberately the loudest:
   it is the only stream where the attacker is speaking directly. */
.prov-dot-adversary-authored     { color: #d6454f; }
.prov-dot-vendor-research        { color: #3f9dd4; }
.prov-dot-independent-researcher { color: #3fae8c; }
.prov-dot-government             { color: #9b6dd6; }
.prov-dot-journalism             { color: var(--accent-orange); }
.prov-dot-vendor-advisory        { color: #6f8faf; }
.prov-dot-automated-feed         { color: var(--text-muted); }

.note-wrap { margin-top: 12px; }
.note-label {
  font-size: 8px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--text-muted); margin-bottom: 6px; text-transform: uppercase;
}
.note-input {
  width: 100%; background: #05080c; border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--text-primary); font-size: 11px;
  font-family: inherit; padding: 8px 10px; resize: vertical; line-height: 1.5;
}
.note-input:focus { outline: none; border-color: var(--ui-active); }
.note-input::placeholder { color: var(--text-muted); }

/* ─── LIVE threat map ────────────────────────────────────────────────────── */
.lm-bar {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 10px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px;
}
.lm-live { display: inline-flex; align-items: center; gap: 8px; }
.lm-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #d6454f;
  box-shadow: 0 0 0 0 rgba(214, 69, 79, 0.7); animation: lm-blink 1.6s infinite;
}
@keyframes lm-blink {
  0%   { box-shadow: 0 0 0 0 rgba(214,69,79,0.65); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(214,69,79,0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(214,69,79,0); opacity: 1; }
}
.lm-live-label {
  font-size: 11px; letter-spacing: 0.14em; color: var(--text-primary); font-weight: 600;
}
.lm-odo { display: inline-flex; align-items: baseline; gap: 10px; margin-left: auto; }
.lm-odo-label { font-size: 10px; letter-spacing: 0.1em; color: var(--text-secondary); }
.lm-odo-val {
  font-family: var(--font-mono, monospace); font-size: 22px; font-weight: 700;
  color: var(--ui-count); font-variant-numeric: tabular-nums;
}
.lm-controls { display: inline-flex; gap: 8px; }
.lm-btn {
  padding: 5px 12px; font-size: 11px; letter-spacing: 0.05em;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
}
.lm-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.lm-honesty {
  font-size: 11px; color: var(--text-muted); margin: 0 0 12px; max-width: 92ch;
  line-height: 1.5;
}

.lm-grid {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) 250px;
  gap: 14px; align-items: start;
}
@media (max-width: 1200px) { .lm-grid { grid-template-columns: 240px minmax(0,1fr); } .lm-ticker { grid-column: 1 / -1; } }
@media (max-width: 900px)  { .lm-grid { grid-template-columns: 1fr; } }

.lm-rail { display: flex; flex-direction: column; gap: 12px; }
.lm-panel, .lm-ticker {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: 12px;
}
.lm-panel-title {
  font-size: 10px; letter-spacing: 0.12em; color: var(--text-secondary);
  margin-bottom: 10px; font-weight: 600;
}
.lm-panel-empty { font-size: 11px; color: var(--text-muted); margin: 0; }
.lm-row {
  display: grid; grid-template-columns: 14px 24px minmax(0,1fr) 46px auto;
  align-items: center; gap: 6px; padding: 3px 0; font-size: 11px;
}
.lm-row-rank { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.lm-row-cc { font-family: var(--font-mono, monospace); color: var(--text-code); }
.lm-row-name {
  color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lm-row-track { background: var(--bg-surface); border-radius: 2px; height: 6px; overflow: hidden; }
.lm-row-fill { display: block; height: 100%; border-radius: 2px; opacity: 0.85; }
.lm-row-val {
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap;
}

.lm-canvas { position: relative; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px; padding: 6px; }
.lm-map { width: 100%; height: auto; display: block; }
.lm-arc { stroke-width: 1.9; stroke-linecap: round; filter: drop-shadow(0 0 3px currentColor); }
.lm-impact {
  fill: none; stroke-width: 1.6; transform-box: fill-box; transform-origin: center;
  animation: lm-impact 1.3s ease-out forwards;
}
@keyframes lm-impact {
  0%   { r: 2;  opacity: 0.95; stroke-width: 2.2; }
  100% { r: 16; opacity: 0;    stroke-width: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .lm-dot { animation: none; }
  .lm-impact { animation: none; opacity: 0.5; }
}

.lm-ticker { max-height: 560px; display: flex; flex-direction: column; }
.lm-ticker-list { overflow: hidden; display: flex; flex-direction: column; gap: 3px; }
.lm-tick {
  display: grid; grid-template-columns: 8px minmax(0,1fr) auto; gap: 7px;
  align-items: center; padding: 4px 6px; border-radius: 3px;
  background: var(--bg-surface); font-size: 10.5px;
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.lm-tick.lm-tick-in { opacity: 1; transform: none; }
.lm-tick-dot { width: 8px; height: 8px; border-radius: 50%; }
.lm-tick-body { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.lm-tick-src, .lm-tick-dst {
  font-family: var(--font-mono, monospace); color: var(--text-primary);
}
.lm-tick-arrow { color: var(--text-muted); }
.lm-tick-cat {
  color: var(--text-secondary); font-size: 9.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 92px;
}

/* Clickable header stat pills */
.stat-pill.is-clickable { cursor: pointer; border-radius: 3px; transition: border-color 0.15s, background 0.15s; }
.stat-pill.is-clickable:hover { background: var(--bg-card-hover); }
.stat-pill.is-clickable:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 2px; }
.stat-pill.is-active { border-color: var(--ui-active); background: var(--bg-card-hover); }

/* ─── ATT&CK matrix ──────────────────────────────────────────────────────── */
.matrix-legend-host { margin-bottom: 14px; }
.mx-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 14px;
}
.mx-stat {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px 13px; display: flex; flex-direction: column; gap: 2px;
}
.mx-stat-val {
  font-size: 21px; font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
.mx-stat-label { font-size: 10px; letter-spacing: 0.07em; color: var(--text-secondary); text-transform: uppercase; }
.mx-stat-sub { font-size: 10px; color: var(--text-muted); }

/* Kill-chain ribbon: the whole chain, lit where this run has activity. */
.mx-chain {
  display: flex; align-items: stretch; overflow-x: auto; gap: 0;
  padding: 10px 2px; margin-bottom: 12px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px;
}
.mx-chain-seg {
  --seg-heat: 0;
  flex: 1 0 auto; min-width: 76px; padding: 7px 8px; border-radius: 3px;
  display: flex; flex-direction: column; gap: 3px; text-align: center;
  background: rgba(0, 173, 216, calc(var(--seg-heat) * 0.30));
  border: 1px solid transparent; opacity: 0.42; transition: opacity 0.2s, border-color 0.2s;
}
.mx-chain-seg.lit { opacity: 1; border-color: rgba(0, 173, 216, 0.35); }
.mx-chain-name { font-size: 9.5px; color: var(--text-primary); line-height: 1.25; }
.mx-chain-n {
  font-size: 13px; font-weight: 600; color: var(--ui-count);
  font-variant-numeric: tabular-nums;
}
.mx-chain-seg:not(.lit) .mx-chain-n { color: var(--text-muted); }
.mx-chain-link {
  align-self: center; width: 10px; height: 1px; flex: none;
  background: var(--border);
}
.mx-scale { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 10px; color: var(--text-secondary); }
.mx-scale-ramp { display: inline-flex; gap: 2px; }
.mx-scale-sw { width: 20px; height: 9px; border-radius: 2px; }
.mx-scale-hint { margin-left: auto; color: var(--text-muted); }

.tactic-header { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tactic-name { flex: 1; min-width: 0; }
.tactic-count {
  font-size: 10px; color: var(--ui-count); font-variant-numeric: tabular-nums;
  background: var(--bg-surface); padding: 1px 5px; border-radius: 2px;
}
.tech-cell {
  position: relative; display: flex; flex-direction: column; gap: 1px;
  text-align: left; overflow: hidden;
}
.tech-name {
  font-size: 9px; color: var(--text-secondary); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tech-cell.is-hot { box-shadow: inset 0 0 0 1px rgba(0, 173, 216, 0.55); }
.tech-bar {
  position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--ui-active); opacity: 0.8;
}

/* ─── Landscape panels ───────────────────────────────────────────────────── */
.ls-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 14px; margin-top: 18px;
}
.ls-panel {
  margin: 0; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: 14px 16px;
}
.ls-panel-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.ls-panel-title { font-size: 13px; color: var(--text-primary); font-weight: 600; letter-spacing: 0.01em; }
.ls-panel-explain { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.ls-foot { font-size: 10px; color: var(--text-muted); margin: 10px 0 0; }

.ls-callout {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px;
  background: var(--bg-surface); border-radius: 3px;
}
.ls-callout-main { display: inline-flex; align-items: baseline; gap: 6px; }
.ls-callout-num {
  font-size: 28px; font-weight: 700; color: var(--text-primary);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.ls-callout-unit { font-size: 11px; color: var(--text-secondary); }
.ls-callout-trend { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.ls-callout-mean { margin-left: auto; font-size: 10px; color: var(--text-muted); }
.ls-up   { color: #e0653f; }
.ls-down { color: #3fae8c; }
.ls-flat { color: var(--text-muted); }

.ls-chart { width: 100%; height: auto; display: block; }
.ls-grid-line, .ls-grid { stroke: var(--border); stroke-width: 1; }
.ls-axis { fill: var(--text-muted); font-size: 9px; font-family: var(--font-mono, monospace); }
.ls-kev-bar { fill: var(--accent-orange); opacity: 0.62; }
.ls-kev-bar:hover { opacity: 0.95; }
.ls-kev-bar.is-latest { fill: var(--ui-active); opacity: 0.95; }
.ls-mean { stroke: var(--text-secondary); stroke-width: 1; stroke-dasharray: 4 3; opacity: 0.75; }
.ls-mean-label { fill: var(--text-secondary); font-size: 9px; font-family: var(--font-mono, monospace); }

.ls-bars { display: flex; flex-direction: column; gap: 6px; }
.ls-bar-row {
  display: grid; grid-template-columns: minmax(74px, 30%) 1fr auto;
  align-items: center; gap: 9px; font-size: 11px;
}
.ls-bar-row.is-click { cursor: pointer; border-radius: 3px; padding: 1px 3px; margin: 0 -3px; }
.ls-bar-row.is-click:hover { background: var(--bg-card-hover); }
.ls-bar-name {
  color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ls-bar-track { background: var(--bg-surface); height: 9px; border-radius: 2px; overflow: hidden; }
.ls-bar-fill { display: block; height: 100%; border-radius: 2px; opacity: 0.9; }
.ls-bar-val {
  color: var(--text-secondary); font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right; min-width: 54px;
}

/* ─── About / portfolio ──────────────────────────────────────────────────── */
.avatar-btn {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  background: transparent; border: 1px solid var(--border); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color 0.18s, transform 0.18s;
}
.avatar-btn:hover { border-color: var(--ui-active); transform: translateY(-1px); }
.avatar-btn:focus-visible { outline: 2px solid var(--ui-active); outline-offset: 2px; }
.pf-avatar-svg { display: block; border-radius: 50%; }

.about-view { padding: 6px 0 40px; max-width: 1100px; }
.pf-hero {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding: 20px 22px; margin-bottom: 18px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
}
.pf-hero-avatar { flex: none; }
.pf-id { min-width: 220px; }
.pf-name { font-size: 26px; color: var(--text-primary); margin: 0 0 2px; letter-spacing: -0.01em; }
.pf-role { font-size: 13px; color: var(--ui-accent); margin: 0 0 4px; }
.pf-meta { font-size: 11px; color: var(--text-muted); margin: 0 0 10px; }
.pf-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-link {
  font-size: 11px; padding: 4px 11px; border-radius: 3px;
  border: 1px solid var(--border); color: var(--text-secondary);
  text-decoration: none; transition: color 0.15s, border-color 0.15s;
}
.pf-link:hover { color: var(--text-primary); border-color: var(--ui-link); }
.pf-stats { display: flex; gap: 20px; margin-left: auto; flex-wrap: wrap; }
.pf-stat { display: flex; flex-direction: column; gap: 2px; }
.pf-stat-v { font-size: 22px; font-weight: 600; color: var(--text-primary); }
.pf-stat-l { font-size: 10px; color: var(--text-secondary); letter-spacing: 0.04em; }

.pf-summary {
  font-size: 13px; line-height: 1.7; color: var(--text-secondary);
  max-width: 82ch; margin: 0 0 24px;
}
.pf-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .pf-cols { grid-template-columns: 1fr; } .pf-stats { margin-left: 0; } }
.pf-section { margin-bottom: 26px; }
.pf-h3 {
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 0 12px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.pf-timeline { display: flex; flex-direction: column; gap: 4px; }
.pf-job {
  position: relative; padding: 12px 0 14px 18px; border-left: 1px solid var(--border);
}
.pf-job::before {
  content: ''; position: absolute; left: -4.5px; top: 17px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bg-base); border: 1.5px solid var(--text-muted);
}
.pf-job.is-current::before { border-color: var(--ui-active); background: var(--ui-active); }
.pf-job-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pf-job-role { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.pf-job-period { font-size: 10px; color: var(--text-muted); margin-left: auto; white-space: nowrap; }
.pf-job-org { font-size: 11px; color: var(--ui-accent); margin: 2px 0 8px; }
.pf-job-points { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.pf-job-points li { font-size: 11.5px; color: var(--text-secondary); line-height: 1.55; }

.pf-skill-group { margin-bottom: 12px; }
.pf-skill-label { font-size: 10px; color: var(--text-muted); margin-bottom: 5px; letter-spacing: 0.05em; }
.pf-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.pf-chip {
  font-size: 10.5px; padding: 3px 9px; border-radius: 3px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary);
}
.pf-certs { margin: 0; padding-left: 16px; display: flex; flex-direction: column; gap: 5px; }
.pf-certs li { font-size: 11px; color: var(--text-secondary); line-height: 1.5; }
.pf-edu { margin-bottom: 12px; }
.pf-edu-deg { font-size: 12px; color: var(--text-primary); }
.pf-edu-school { font-size: 11px; color: var(--text-secondary); }
.pf-edu-period { font-size: 10px; color: var(--text-muted); }

.pf-projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.pf-project {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 4px; padding: 14px 16px;
}
.pf-project-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.pf-project-name { font-size: 13px; color: var(--text-primary); font-weight: 600; }
.pf-project-tag {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ui-active); border: 1px solid currentColor; border-radius: 2px; padding: 1px 5px;
}
.pf-project-desc { font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; margin: 0 0 10px; }
.pf-project-link { display: inline-block; }
.pf-back {
  margin-top: 22px; padding: 7px 14px; font-size: 11px;
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 3px; cursor: pointer;
}
.pf-back:hover { color: var(--text-primary); border-color: var(--ui-active); }

/* ─── Dark web view ──────────────────────────────────────────────────────── */
.darkweb-view { padding: 6px 0 40px; }
.dw-search { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dw-input {
  flex: 1; min-width: 220px; padding: 9px 12px; font-size: 13px;
  background: var(--bg-surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 3px;
}
.dw-input:focus { outline: none; border-color: var(--ui-active); }
.dw-watch-btn {
  padding: 9px 14px; font-size: 11px; cursor: pointer; white-space: nowrap;
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 3px;
}
.dw-watch-btn:hover { color: var(--text-primary); border-color: var(--ui-active); }
.dw-hint { font-size: 11px; color: var(--text-muted); margin: 6px 0 0; }
.dw-count { font-size: 11px; color: var(--ui-count); margin-bottom: 8px; }
.dw-none {
  padding: 12px 14px; border-radius: 3px;
  background: var(--bg-surface); border-left: 3px solid var(--accent-orange);
}
.dw-none-head { font-size: 12px; color: var(--text-primary); margin-bottom: 5px; }
.dw-none-body { font-size: 11px; color: var(--text-secondary); line-height: 1.55; }

.dw-table-wrap { overflow-x: auto; margin-top: 8px; }
.dw-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 520px; }
.dw-thead th {
  text-align: left; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); padding: 6px 8px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dw-trow td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.dw-td-victim { color: var(--text-primary); }
.dw-td-group { color: #d6454f; white-space: nowrap; }
.dw-td-date, .dw-td-cc {
  color: var(--text-secondary); font-family: var(--font-mono, monospace);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dw-td-sector { color: var(--text-secondary); }

.dw-watch-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 3px; background: var(--bg-surface); margin-bottom: 6px;
}
.dw-watch-row.is-hit { border-left: 3px solid #d6454f; }
.dw-watch-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.dw-watch-term { font-size: 12px; color: var(--text-primary); }
.dw-watch-status { font-size: 10px; color: var(--text-secondary); }
.dw-watch-row.is-hit .dw-watch-status { color: #d6454f; }
.dw-watch-rm {
  font-size: 10px; padding: 3px 9px; cursor: pointer;
  background: transparent; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 3px;
}
.dw-watch-rm:hover { color: var(--text-primary); }

.dw-coverage { margin-top: 20px; font-size: 11px; }
.dw-coverage-sum { cursor: pointer; color: var(--text-secondary); letter-spacing: 0.03em; }
.dw-cov-block { margin: 10px 0; }
.dw-cov-h { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #3fae8c; margin-bottom: 4px; }
.dw-cov-h.dw-cov-no { color: var(--accent-orange); }
.dw-cov-list { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
.dw-cov-list li { color: var(--text-secondary); line-height: 1.5; }
.dw-cov-caveat {
  color: var(--text-muted); line-height: 1.6; margin: 10px 0 0;
  padding-left: 10px; border-left: 2px solid var(--border);
}

/* ─── Exposure view ──────────────────────────────────────────────────────── */
.exposure-view { padding: 6px 0 40px; }
.ex-code {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: 3px;
  padding: 10px 12px; font-family: var(--font-mono, monospace); font-size: 11px;
  color: var(--text-code); overflow-x: auto; margin: 0 0 8px;
}
.ex-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: var(--bg-surface); border-radius: 3px; margin-bottom: 6px;
}
.ex-row.is-bad { border-left: 3px solid #d6454f; }
.ex-row-left { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ex-domain { font-size: 12px; color: var(--text-primary); font-family: var(--font-mono, monospace); }
.ex-detail { font-size: 10.5px; color: var(--text-secondary); }
.ex-date { font-size: 10px; color: #e0653f; }
.ex-total {
  font-size: 18px; font-weight: 600; color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.ex-surface-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 10px 0 6px; padding-top: 8px; border-top: 1px solid var(--border);
}
.ex-surface-head:first-of-type { border-top: none; padding-top: 0; }
.ex-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.ex-chip {
  font-size: 10px; padding: 2px 7px; border-radius: 2px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary); font-family: var(--font-mono, monospace);
}
.ex-chip.is-flag { border-color: var(--accent-orange); color: var(--accent-orange); }
.ex-hosts { margin-bottom: 8px; }
.ex-hosts-sum { cursor: pointer; font-size: 10.5px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   v4 — NAVIGATION, FEED DENSITY, PANELS, RESEARCH VIEWS
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout ────────────────────────────────────────────────────────
   The sidebar left the grid. Eight always-on cards competed with the
   content for the width of the screen and several of them duplicated the
   nav; they live in a summoned panel now, so the feed gets the page. */
.dashboard { grid-template-columns: 1fr; }
.feed { max-width: 1400px; margin: 0 auto; width: 100%; }

/* ── View switcher (PRIMARY chrome) ────────────────────────────────
   These replace the screen. The filter row below replaces nothing. The two
   used to be one strip of sixteen identically-styled buttons, so clicking
   NEWS narrowed a list and clicking THREAT MAP discarded it, with no cue
   that they were different kinds of thing.

   The visual separation is deliberate and load-bearing: bigger, tab-shaped,
   attached to the header, with an active underline — chrome, not controls. */
.view-switcher {
  /* NOT sticky. It used to be, at the same `top: 60px` the mode switcher now
     occupies, so the two rows were painted on top of one another.

     Beyond the collision, pinning it was the wrong call anyway. Header + modes
     + sub-nav + search + eleven filter pills came to ~260px of permanently
     pinned chrome on a 910px viewport -- nearly a third of the screen, on a
     page whose entire purpose is a scrolling list. The mode row is the part
     worth keeping in reach; the rest scrolls away, and `/` focuses search and
     ctrl-K opens the palette from anywhere regardless. */
  position: static;
  display: flex; gap: 2px; padding: 0 20px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-strong);
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.view-switcher::-webkit-scrollbar { display: none; }
.view-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 14px 9px; border: none; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.09em; white-space: nowrap; cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}
.view-btn:hover { color: var(--text-primary); border-bottom-color: var(--border-strong); }
.view-btn.active { color: var(--ui-active); border-bottom-color: var(--ui-active); }
.view-btn:focus-visible { outline: 2px solid var(--ui-active); outline-offset: -2px; }
.view-ico { font-size: 11px; opacity: 0.85; }

.controls-bar { top: 100px; }

/* Feed filters are secondary: smaller, pill-shaped, visibly a level down. */
.filter-btn { font-size: 9.5px; padding: 4px 10px; border-radius: 20px; }
.filter-tabs { flex: 1 1 100%; }

.toolbar-actions { display: flex; gap: 6px; align-items: center; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--bg-surface);
  color: var(--text-secondary); font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em; cursor: pointer;
  transition: all var(--transition);
}
.tool-btn:hover { border-color: var(--ui-active); color: var(--ui-active); }
.tool-btn.is-active { border-color: var(--ui-active); color: var(--ui-active); background: var(--ui-active-dim); }
.tool-badge {
  min-width: 15px; padding: 0 4px; border-radius: 8px;
  background: var(--ui-active); color: var(--bg-base);
  font-size: 9px; font-weight: 700; text-align: center;
}
.search-help {
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-family: var(--font-mono); font-size: 12px; padding: 0 2px;
}
.search-help:hover { color: var(--ui-active); }
/* A structured query looks different from a keyword search, because it is. */
.search-wrapper.is-structured { border-color: var(--ui-active); }
.search-wrapper.is-structured .search-icon { color: var(--ui-active); }

/* ── Feed density ──────────────────────────────────────────────────
   Compact is the default. At 224px per card the old feed put roughly two
   items on a screen, which made 320 items about 160 screens of scrolling.
   A triage pass wants 15-20 scannable rows and expands only what earns it. */
.cards-container[data-density="compact"] .intel-card { padding: 7px 12px; }
.cards-container[data-density="compact"] .card-detail { display: none; }
.cards-container[data-density="compact"] .intel-card.expanded .card-detail { display: block; }
.cards-container[data-density="comfortable"] .card-detail { display: block; }

.intel-card { position: relative; }

/* The scan row: severity, action, title. One line, in that order. */
.card-scan { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.card-rail {
  width: 3px; align-self: stretch; border-radius: 2px; flex-shrink: 0;
  background: var(--text-muted);
}
.card-rail.prio-urgent   { background: var(--critical); }
.card-rail.prio-elevated { background: var(--high); }
.card-rail.prio-moderate { background: var(--medium); }
.card-rail.prio-low      { background: var(--low); }
.card-rail.prio-critical { background: var(--critical); }
.card-rail.prio-high     { background: var(--high); }

.card-verdict {
  flex-shrink: 0; width: 118px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-verdict.prio-urgent   { color: var(--critical); }
.card-verdict.prio-elevated { color: var(--high); }
.card-verdict.prio-moderate { color: var(--medium); }
.card-verdict.prio-low      { color: var(--text-secondary); }
.card-verdict.prio-none     { color: var(--text-muted); }

.card-scan .card-top { flex: 1; min-width: 0; margin: 0; }
.card-scan .card-title { font-size: 12.5px; line-height: 1.45; margin: 0; }

/* The score is a control. Clicking it opens the arithmetic. */
.card-score {
  flex-shrink: 0; min-width: 34px; padding: 1px 6px;
  border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg-base); color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: center; cursor: pointer;
  transition: all var(--transition);
}
button.card-score:hover { border-color: var(--ui-active); color: var(--ui-active); }
.card-score.is-open { border-color: var(--ui-active); color: var(--ui-active); }
.card-score.prio-urgent   { color: var(--critical); border-color: var(--critical); }
.card-score.prio-elevated { color: var(--high); border-color: var(--high); }
.card-score.prio-moderate { color: var(--medium); }
.card-score.sev-critical  { color: var(--critical); }
.card-score.sev-high      { color: var(--high); }

/* "Why am I seeing this?" — with five filters narrowing at once, an item's
   presence stops being self-evident. */
.card-why {
  display: flex; gap: 6px; align-items: baseline;
  margin: 3px 0 0 14px; font-size: 9.5px; color: var(--text-muted);
}
.why-ico { color: var(--ui-count); flex-shrink: 0; }
.why-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card-detail { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.card-expand-hint {
  position: absolute; right: 10px; bottom: 4px;
  font-size: 8px; color: var(--text-muted); pointer-events: none;
}
.intel-card.expanded .card-expand-hint { transform: rotate(180deg); }
.intel-card.is-reviewed { opacity: 0.62; }
.intel-card.is-reviewed .card-verdict { text-decoration: line-through; }

/* Score breakdown */
.card-score-panel { margin: 10px 0; }
.score-breakdown {
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px;
}
.score-rows { display: flex; flex-direction: column; gap: 4px; }
.score-row { display: flex; align-items: baseline; gap: 8px; font-size: 10.5px; }
.score-label { color: var(--text-primary); flex-shrink: 0; }
.score-detail {
  color: var(--text-muted); font-size: 9.5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.score-points {
  margin-left: auto; font-weight: 700; color: var(--ok);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.score-points.is-negative { color: var(--text-muted); }
.score-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 5px; }
.score-total .score-points { color: var(--ui-active); font-size: 13px; }
.score-note { margin-top: 8px; font-size: 9.5px; color: var(--text-muted); line-height: 1.5; }

/* Confidence pills — computed everywhere, shown nowhere until now. */
.card-confidence { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.conf-pill {
  font-size: 8.5px; letter-spacing: 0.05em; padding: 1px 6px;
  border-radius: 10px; border: 1px solid var(--border);
  background: var(--bg-base); color: var(--text-secondary);
}
.conf-pill.conf-explicit, .conf-pill.conf-high { border-color: var(--ok); color: var(--ok); }
.conf-pill.conf-inferred, .conf-pill.conf-medium { border-color: var(--warn); color: var(--warn); }
.conf-pill.conf-low { border-color: var(--text-muted); color: var(--text-muted); }

.malware-badge {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  background: var(--bg-base); border: 1px solid var(--border-strong);
  color: var(--text-primary); font-size: 9.5px; cursor: pointer;
}
.malware-badge:hover { border-color: var(--ui-active); color: var(--ui-active); }
.meta-detect { background: var(--bg-base); color: var(--ok); border: 1px solid var(--ok); cursor: pointer; }

/* ── Triage progress ───────────────────────────────────────────────
   Nine actionable items is a finishable list. An infinite feed never lets
   you finish; this is what makes it a queue you can get to the end of. */
.triage-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.triage-bar.is-complete { border-color: var(--ok); }
.triage-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text-secondary); white-space: nowrap;
}
.triage-track { flex: 1; height: 4px; background: var(--bg-card); border-radius: 2px; overflow: hidden; }
.triage-fill { display: block; height: 100%; background: var(--ok); transition: width 0.4s ease; }
.triage-next, .triage-reset {
  border: 1px solid var(--border); background: transparent;
  color: var(--text-secondary); font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 9px; border-radius: var(--radius); cursor: pointer; white-space: nowrap;
}
.triage-next:hover, .triage-reset:hover { border-color: var(--ui-active); color: var(--ui-active); }

.triage-done {
  text-align: center; padding: 36px 20px; margin-top: 12px;
  border: 1px dashed var(--ok); border-radius: var(--radius);
  background: var(--bg-surface);
}
.done-mark { font-size: 34px; color: var(--ok); line-height: 1; }
.done-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 10px 0 4px; }
.done-sub { font-size: 11px; color: var(--text-secondary); max-width: 460px; margin: 0 auto; }
.done-actions { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.done-btn {
  padding: 7px 14px; border: 1px solid var(--ui-active); border-radius: var(--radius);
  background: var(--ui-active); color: var(--bg-base);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; cursor: pointer;
}
.done-btn.ghost { background: transparent; color: var(--ui-active); }

/* ── Slide-over panels ─────────────────────────────────────────────
   Summoned, not permanent. */
.side-panel { position: fixed; inset: 0; z-index: 300; }
.side-panel-scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.side-panel-body {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 92vw);
  background: var(--bg-surface); border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow-panel);
  overflow-y: auto; padding: 0 16px 24px;
  display: flex; flex-direction: column; gap: 12px;
}
.side-panel-head {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; margin: 0 -16px;
  background: var(--bg-surface); border-bottom: 1px solid var(--border);
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-muted);
}
.side-panel-head-actions { display: flex; gap: 8px; align-items: center; }
.panel-close, .panel-reset {
  border: none; background: transparent; color: var(--text-secondary);
  font-family: var(--font-mono); cursor: pointer; padding: 2px 6px;
}
.panel-close { font-size: 20px; line-height: 1; }
.panel-reset { font-size: 9px; letter-spacing: 0.08em; border: 1px solid var(--border); border-radius: 3px; }
.panel-close:hover, .panel-reset:hover { color: var(--ui-active); }
body.panel-open { overflow: hidden; }

/* Collapsible filter sections */
details.sidebar-card > summary.sidebar-title {
  cursor: pointer; margin-bottom: 0; padding-bottom: 8px; list-style: none;
}
details.sidebar-card > summary.sidebar-title::-webkit-details-marker { display: none; }
details.sidebar-card > summary.sidebar-title::after {
  content: '+'; color: var(--text-muted); font-size: 12px; margin-left: auto; padding-left: 8px;
}
details.sidebar-card[open] > summary.sidebar-title::after { content: '\2212'; }
details.sidebar-card[open] > summary.sidebar-title { margin-bottom: 12px; }
.side-panel .sidebar {
  position: static; height: auto; overflow: visible; border: none;
  padding: 0; flex-direction: column; gap: 12px;
}

/* ── Saved investigations ──────────────────────────────────────────── */
.saved-form { display: flex; gap: 6px; }
.saved-current { font-size: 10px; color: var(--text-muted); word-break: break-word; }
.saved-empty { font-size: 10.5px; color: var(--text-muted); line-height: 1.6; }
.saved-list { display: flex; flex-direction: column; gap: 4px; }
.saved-row {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.saved-open {
  flex: 1; text-align: left; border: none; background: transparent;
  color: var(--text-primary); font-family: var(--font-mono); font-size: 11px; cursor: pointer;
}
.saved-open:hover { color: var(--ui-active); }
.saved-meta { font-size: 9px; color: var(--text-muted); }
.saved-del { border: none; background: transparent; color: var(--text-muted); cursor: pointer; font-size: 14px; }
.saved-del:hover { color: var(--critical); }

/* ── Time machine ──────────────────────────────────────────────────── */
.timemachine-bar {
  position: sticky; top: var(--stack-nav); z-index: 88;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 24px; background: var(--warn); color: #14100a;
  font-size: 10.5px;
}
.tmb-badge { font-weight: 700; letter-spacing: 0.12em; font-size: 9px; }
.tmb-text { flex: 1; min-width: 200px; }
.tmb-btn {
  border: 1px solid rgba(20,16,10,0.4); background: transparent; color: #14100a;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em; padding: 3px 9px; border-radius: 3px; cursor: pointer;
}
.tmb-btn:hover { background: rgba(20,16,10,0.12); }
.tmb-btn.is-primary { background: #14100a; color: var(--warn); }

.tm-lead { font-size: 10.5px; color: var(--text-secondary); line-height: 1.6; }
.tm-slider-wrap { display: flex; flex-direction: column; gap: 8px; }
.tm-slider { width: 100%; accent-color: var(--ui-active); }
.tm-readout { display: flex; flex-direction: column; gap: 2px; }
.tm-readout-date { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.tm-readout-stats { font-size: 10px; color: var(--text-muted); }
.tm-spark { width: 100%; height: 54px; }
.tm-spark-bar { fill: var(--border-strong); }
.tm-spark-bar.is-current { fill: var(--ui-active); }
.tm-go {
  padding: 8px 12px; border: 1px solid var(--ui-active); border-radius: var(--radius);
  background: var(--ui-active); color: var(--bg-base);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; cursor: pointer;
}
.tm-go.ghost { background: transparent; color: var(--ui-active); }
.tm-diff { border-top: 1px solid var(--border); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.tm-diff-title { font-size: 11px; letter-spacing: 0.1em; color: var(--text-primary); }
.tm-diff-note { font-size: 10px; color: var(--text-muted); }
.tm-diff-row { display: flex; gap: 8px; }
.tm-diff-field { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tm-diff-label { font-size: 9px; letter-spacing: 0.08em; color: var(--text-muted); }
.tm-diff-select {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 3px;
  color: var(--text-primary); font-family: var(--font-mono); font-size: 10px; padding: 5px 6px;
}
.tm-health {
  display: flex; gap: 8px; align-items: baseline; margin-top: 6px;
  padding: 7px 9px; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 9.5px; color: var(--text-muted);
}
.tm-health.is-gapped { border-color: var(--warn); color: var(--warn); }
.tm-health-label { font-weight: 700; letter-spacing: 0.1em; }

/* ── Diff view ─────────────────────────────────────────────────────── */
.diff-picker { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.diff-picker-label { font-size: 10px; letter-spacing: 0.08em; color: var(--text-muted); }
.diff-list { display: flex; flex-direction: column; gap: 6px; }
.diff-item { padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.diff-item-head { display: flex; align-items: baseline; gap: 8px; }
.diff-band { font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; flex-shrink: 0; }
.diff-band.prio-urgent { color: var(--critical); }
.diff-band.prio-elevated { color: var(--high); }
.diff-band.prio-moderate { color: var(--medium); }
.diff-item-title { font-size: 11.5px; color: var(--text-primary); text-decoration: none; }
a.diff-item-title:hover { color: var(--ui-link); }
.diff-item-meta { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.diff-meta-tag { font-size: 9px; color: var(--text-muted); }
.diff-deltas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.diff-delta {
  display: inline-flex; gap: 4px; align-items: baseline; font-size: 9px;
  padding: 2px 7px; border-radius: 10px;
  background: var(--bg-base); border: 1px solid var(--border);
}
.diff-delta.is-escalation { border-color: var(--critical); color: var(--critical); }
.diff-delta-label { color: var(--text-muted); }
.diff-delta-from { color: var(--text-muted); text-decoration: line-through; }
.diff-delta-arrow { color: var(--text-muted); }
.diff-delta-to { font-weight: 700; }
.diff-more { font-size: 10px; color: var(--text-muted); padding: 6px 0; }

/* ── Research view shell ───────────────────────────────────────────── */
.view-loading, .view-empty { padding: 48px 20px; text-align: center; color: var(--text-muted); }
.view-empty-icon { font-size: 26px; margin-bottom: 8px; }
.view-empty-text { font-size: 11px; line-height: 1.7; max-width: 480px; margin: 0 auto; }

.rv-head { margin-bottom: 16px; }
.rv-title { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: 0.02em; }
.rv-sub { font-size: 11px; color: var(--text-secondary); line-height: 1.7; margin-top: 6px; max-width: 780px; }
.rv-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.rv-stat {
  flex: 1 1 130px; padding: 10px 12px; background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.rv-stat.tone-urgent { border-color: var(--critical); }
.rv-stat.tone-ok { border-color: var(--ok); }
.rv-stat.tone-moderate { border-color: var(--warn); }
.rv-stat-value {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.rv-stat.tone-urgent .rv-stat-value { color: var(--critical); }
.rv-stat.tone-ok .rv-stat-value { color: var(--ok); }
.rv-stat-label { font-size: 9px; letter-spacing: 0.11em; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; }
.rv-stat-sub { font-size: 9px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }

.rv-panel { margin-bottom: 22px; }
.rv-panel-head { margin-bottom: 10px; }
.rv-panel-title { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-primary); text-transform: uppercase; }
.rv-panel-note { font-size: 10px; color: var(--text-muted); line-height: 1.6; margin-top: 4px; max-width: 760px; }
.rv-note { font-size: 10px; color: var(--text-muted); line-height: 1.7; margin-top: 8px; max-width: 820px; }

.rv-verdict {
  display: flex; gap: 12px; align-items: baseline; margin-bottom: 18px;
  padding: 12px 14px; background: var(--bg-surface);
  border: 1px solid var(--ui-active); border-left-width: 3px; border-radius: var(--radius);
}
.rv-verdict.is-thin { border-color: var(--warn); }
.rv-verdict.tone-urgent { border-color: var(--critical); }
.rv-verdict.tone-ok { border-color: var(--ok); }
.rv-verdict-label { font-size: 9px; font-weight: 700; letter-spacing: 0.14em; color: var(--text-muted); flex-shrink: 0; }
.rv-verdict-text { font-size: 12px; line-height: 1.7; color: var(--text-primary); }

.rv-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.rv-table { width: 100%; border-collapse: collapse; font-size: 10.5px; min-width: 520px; }
.rv-table th, .rv-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rv-table th { font-size: 9px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-surface); position: sticky; top: 0; }
.rv-table td { color: var(--text-secondary); }
.rv-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.rv-table tbody tr:hover { background: var(--bg-card-hover); }
.rv-table tr.is-best td { color: var(--text-primary); font-weight: 700; }
.rv-table tr.is-best td:first-child { box-shadow: inset 2px 0 0 var(--ok); }
.rv-table tr.is-current td { color: var(--ui-active); }

.rv-bars { display: flex; flex-direction: column; gap: 4px; }
.rv-bar-row { display: flex; align-items: center; gap: 10px; font-size: 10.5px; }
.rv-bar-row.is-click { cursor: pointer; }
.rv-bar-row.is-click:hover .rv-bar-label { color: var(--ui-active); }
.rv-bar-label { width: 210px; flex-shrink: 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-bar-track { flex: 1; height: 8px; background: var(--bg-card); border-radius: 2px; overflow: hidden; }
.rv-bar-fill { display: block; height: 100%; background: var(--series-1); }
.rv-bar-fill.tone-urgent { background: var(--critical); }
.rv-bar-fill.tone-moderate { background: var(--warn); }
.rv-bar-value { width: 56px; text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.research-tabs { display: flex; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.research-tab {
  padding: 8px 14px; border: none; border-bottom: 2px solid transparent;
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.09em; cursor: pointer; white-space: nowrap;
}
.research-tab.active { color: var(--ui-active); border-bottom-color: var(--ui-active); }
.research-tab:hover { color: var(--text-primary); }

/* ── Entity graph ──────────────────────────────────────────────────── */
.graph-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.graph-toggle {
  padding: 5px 10px; border: 1px solid var(--border); border-radius: 20px;
  background: transparent; color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.07em; cursor: pointer;
}
.graph-toggle.active { background: var(--ui-active); border-color: var(--ui-active); color: var(--bg-base); }
.graph-toggle.is-clear { border-color: var(--warn); color: var(--warn); }
.graph-legend { display: flex; gap: 14px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.graph-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 9px; color: var(--text-muted); }
.graph-legend-item::before { content: ''; width: 18px; height: 0; border-top: 2px solid var(--series-1); }
.graph-legend-item.legend-observed::before { border-top-style: dashed; border-top-color: var(--ui-count); }
.graph-hint { font-size: 9px; color: var(--text-muted); }
.graph-board { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-surface); padding: 8px; }
.graph-svg { width: 100%; min-width: 900px; height: auto; }
.graph-col-label { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; fill: var(--text-muted); font-family: var(--font-mono); }
.graph-edge { fill: none; stroke: var(--ui-count); opacity: 0.45; }
/* Solid = MITRE asserted it. Dashed = we merely saw them together. Collapsing
   that distinction would be the most misleading thing this view could do. */
.graph-edge.origin-attack { stroke: var(--series-1); opacity: 0.5; }
.graph-edge.origin-observed { stroke: var(--ui-count); stroke-dasharray: 4 3; opacity: 0.6; }
.graph-node { cursor: pointer; }
.graph-node-box { fill: var(--bg-card); stroke: var(--border); }
.graph-node:hover .graph-node-box { stroke: var(--ui-active); }
.graph-node.is-focus .graph-node-box { stroke: var(--ui-active); fill: var(--bg-card-hover); }
.graph-node:focus-visible .graph-node-box { stroke: var(--ui-active); stroke-width: 2; }
.graph-node-text { font-family: var(--font-mono); font-size: 10px; fill: var(--text-primary); }
.graph-node-count { font-family: var(--font-mono); font-size: 9px; fill: var(--ui-count); text-anchor: end; }
.graph-node.type-actor .graph-node-box { stroke: var(--critical); }
.graph-node.type-software .graph-node-box { stroke: var(--warn); }
.graph-node.type-technique .graph-node-box { stroke: var(--series-1); }
.graph-node.type-sector .graph-node-box { stroke: var(--ok); }

/* ── Entity drawer ─────────────────────────────────────────────────── */
.entity-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 12px; }
.entity-kind { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border); }
.entity-actor { color: var(--critical); border-color: var(--critical); }
.entity-malware { color: var(--warn); border-color: var(--warn); }
.entity-technique { color: var(--series-1); border-color: var(--series-1); }
.entity-count { font-size: 10px; color: var(--text-muted); }
.entity-chips, .entity-items { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.entity-items { flex-direction: column; flex-wrap: nowrap; }
.entity-chip { font-size: 9.5px; padding: 2px 7px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-secondary); }
.entity-item { padding: 5px 0; border-bottom: 1px solid var(--border); }
.entity-item-title { font-size: 11px; color: var(--text-primary); text-decoration: none; display: block; }
a.entity-item-title:hover { color: var(--ui-link); }
.entity-item-meta { font-size: 9px; color: var(--text-muted); }
.entity-hint { font-size: 10px; color: var(--text-muted); line-height: 1.6; }
.entity-filter-btn {
  margin-top: 14px; width: 100%; padding: 8px; border-radius: var(--radius);
  border: 1px solid var(--ui-active); background: transparent; color: var(--ui-active);
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.07em; cursor: pointer;
}
.entity-filter-btn:hover { background: var(--ui-active); color: var(--bg-base); }
.edge-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.edge-row { display: flex; gap: 8px; align-items: baseline; font-size: 10px; padding: 2px 0; }
.edge-kind { width: 92px; flex-shrink: 0; color: var(--text-muted); font-size: 9px; letter-spacing: 0.05em; }
.edge-target { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.edge-weight { margin-left: auto; color: var(--ui-count); font-size: 9px; }
.edge-more { font-size: 9px; color: var(--text-muted); padding-top: 4px; }

/* ── Campaigns ─────────────────────────────────────────────────────── */
.campaign-list { display: flex; flex-direction: column; gap: 12px; }
.campaign-card {
  padding: 14px; background: var(--bg-surface);
  border: 1px solid var(--border); border-left: 3px solid var(--text-muted);
  border-radius: var(--radius);
}
.campaign-card.conf-high { border-left-color: var(--critical); }
.campaign-card.conf-medium { border-left-color: var(--warn); }
.campaign-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.campaign-name {
  border: none; background: transparent; padding: 0;
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  color: var(--text-primary); cursor: pointer;
}
.campaign-name:hover { color: var(--ui-active); }
.campaign-conf { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 10px; border: 1px solid currentColor; }
.campaign-conf.conf-high { color: var(--critical); }
.campaign-conf.conf-medium { color: var(--warn); }
.campaign-conf.conf-low { color: var(--text-muted); }
.campaign-facts { display: flex; gap: 16px; margin: 10px 0; flex-wrap: wrap; }
.campaign-fact { display: flex; flex-direction: column; }
.campaign-fact-value { font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.campaign-fact-label { font-size: 8.5px; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
.campaign-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.campaign-chip { font-size: 9px; padding: 2px 7px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-secondary); }
.campaign-chip.chip-sector { border-color: var(--ok); color: var(--ok); }
.campaign-chip.chip-malware { border-color: var(--warn); color: var(--warn); cursor: pointer; }
.campaign-chip.chip-tech { border-color: var(--series-1); color: var(--series-1); cursor: pointer; }
.campaign-members-summary, .malware-examples-summary { font-size: 10px; color: var(--text-muted); cursor: pointer; padding: 4px 0; }
.campaign-member { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.campaign-member-title { font-size: 11px; color: var(--text-primary); text-decoration: none; flex: 1; min-width: 200px; }
a.campaign-member-title:hover { color: var(--ui-link); }
.campaign-member-meta { font-size: 9px; color: var(--text-muted); }
.campaign-join { font-size: 8px; padding: 1px 5px; border-radius: 8px; border: 1px solid var(--border); color: var(--text-muted); }
.campaign-join.join-anchor { border-color: var(--ok); color: var(--ok); }

/* ── Detections ────────────────────────────────────────────────────── */
.detect-block { border-bottom: 1px solid var(--border); }
.detect-summary { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; cursor: pointer; flex-wrap: wrap; }
.detect-tech { font-weight: 700; color: var(--text-primary); font-size: 11px; width: 84px; flex-shrink: 0; }
.detect-name { font-size: 11px; color: var(--text-secondary); flex: 1; min-width: 140px; }
.detect-seen { font-size: 9.5px; color: var(--ui-count); font-variant-numeric: tabular-nums; }
.detect-rules { font-size: 9.5px; color: var(--ok); }
.detect-rule { display: flex; gap: 10px; align-items: baseline; padding: 3px 0 3px 84px; flex-wrap: wrap; }
.detect-level { font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; width: 62px; flex-shrink: 0; }
.detect-level.tone-urgent { color: var(--critical); }
.detect-level.tone-elevated { color: var(--high); }
.detect-level.tone-moderate { color: var(--warn); }
.detect-level.tone-low { color: var(--text-muted); }
.detect-rule-title { font-size: 10.5px; color: var(--text-secondary); text-decoration: none; flex: 1; min-width: 180px; }
a.detect-rule-title:hover { color: var(--ui-link); }
.detect-logsource, .detect-status { font-size: 9px; color: var(--text-muted); }

/* ── Malware families ──────────────────────────────────────────────── */
.malware-list { display: flex; flex-direction: column; gap: 12px; }
.malware-card { padding: 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius); }
.malware-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.malware-name { border: none; background: transparent; padding: 0; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); cursor: pointer; }
.malware-name:hover { color: var(--ui-active); }
.malware-platform { font-size: 9px; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--border); color: var(--text-muted); }
.malware-count { font-size: 9.5px; color: var(--ui-count); }
.malware-unknown { font-size: 8.5px; color: var(--warn); border: 1px solid var(--warn); border-radius: 8px; padding: 1px 6px; }
.malware-aliases { font-size: 10px; color: var(--text-muted); margin: 5px 0; }
.malware-desc { font-size: 11px; color: var(--text-secondary); line-height: 1.65; margin: 7px 0; }
.malware-facets { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; }
.malware-facet { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.malware-facet-label { font-size: 8.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-muted); width: 100px; flex-shrink: 0; }
.malware-facet-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.malware-chip { font-size: 9px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--border); color: var(--text-secondary); }
/* Curated attribution and mere co-occurrence must not look the same. */
.malware-chip.chip-known { border-color: var(--critical); color: var(--critical); }
.malware-chip.chip-observed { border-style: dashed; }
.malware-chip.chip-sector { border-color: var(--ok); color: var(--ok); }
.malware-chip.chip-tech { border-color: var(--series-1); color: var(--series-1); }
.malware-example { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; border-top: 1px solid var(--border); flex-wrap: wrap; }
.malware-example-title { font-size: 10.5px; color: var(--text-primary); text-decoration: none; flex: 1; min-width: 180px; }
a.malware-example-title:hover { color: var(--ui-link); }
.malware-example-meta { font-size: 9px; color: var(--text-muted); }
.malware-link { font-size: 10px; color: var(--ui-link); text-decoration: none; }

/* ── Query help ────────────────────────────────────────────────────── */
.query-help-lead, .query-help-note { font-size: 11px; color: var(--text-secondary); line-height: 1.7; }
.query-examples { display: flex; flex-direction: column; gap: 6px; }
.query-example-row { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.query-example {
  font-family: var(--font-mono); font-size: 10.5px; text-align: left;
  padding: 4px 8px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg-card); color: var(--ui-active); cursor: pointer;
}
.query-example:hover { border-color: var(--ui-active); }
.query-example-note { font-size: 9.5px; color: var(--text-muted); }
.query-fields { display: flex; flex-direction: column; gap: 3px; }
.query-field-row { display: flex; gap: 10px; align-items: baseline; }
.query-field-name { font-size: 10px; color: var(--ui-active); width: 96px; flex-shrink: 0; }
.query-field-note { font-size: 10px; color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — the same three breakpoints, nothing new invented
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .view-switcher { padding: 0 12px; }
  .view-btn { padding: 10px 10px 8px; font-size: 10px; }
  .view-btn .view-ico { display: none; }
  .controls-bar { top: 96px; }
  .side-panel-body { width: 100%; border-left: none; }
  .rv-bar-label { width: 150px; }
  .graph-svg { min-width: 820px; }
}

@media (max-width: 640px) {
  /* The header stat pills were display:none on mobile, which removed the only
     always-visible count of what needs doing. They stay, wrapped. */
  .header-right { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
  .stat-pill { padding: 3px 8px; font-size: 10px; flex: 1 1 auto; justify-content: center; }
  .avatar-btn, #palette-open { display: none; }
  #theme-toggle { flex: 0 0 auto; }

  .site-header { position: static; }
  .view-switcher { top: 0; }
  .controls-bar { top: 38px; padding: 8px 12px; }
  .toolbar-actions { width: 100%; }
  .tool-btn { flex: 1; justify-content: center; }

  .timemachine-bar { top: 96px; padding: 8px 12px; }
  .feed { padding: 10px 12px; }

  /* The scan row stacks: a 118px verdict column plus a title does not fit in
     360px, and truncating the title is worse than moving the verdict up. */
  .card-scan { flex-wrap: wrap; gap: 6px; }
  .card-verdict { width: auto; order: 1; }
  .card-score { order: 2; margin-left: auto; }
  .card-scan .card-top { order: 3; flex: 1 1 100%; }
  .card-why { margin-left: 0; }
  .card-why .why-text { white-space: normal; }

  .triage-bar { flex-wrap: wrap; }
  .triage-track { order: 3; flex: 1 1 100%; }

  .rv-stat { flex: 1 1 100%; }
  .rv-bar-row { flex-wrap: wrap; }
  .rv-bar-label { width: 100%; }
  .rv-bar-track { flex: 1 1 auto; }
  .campaign-facts { gap: 12px; }
  .malware-facet-label { width: 100%; }
  .detect-rule { padding-left: 0; }
  .detect-tech { width: auto; }
  .graph-board { padding: 4px; }
  .tm-diff-row { flex-direction: column; }
}

@media (min-width: 1200px) {
  /* Only at genuine desktop width is there room to read two of these side by
     side without either becoming a column of fragments. */
  .campaign-list, .malware-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .triage-fill, .rv-bar-fill { transition: none; }
}

/* ── Chrome sizing fixes ───────────────────────────────────────────
   Both of these strips are horizontally scrollable by design, but flex
   children shrink before they overflow, so at ~730px the view buttons were
   squeezed until their labels touched ("LANDSCAPEATT&CK") and the header
   stat pills overlapped each other. flex-shrink:0 is what makes overflow
   actually happen, and therefore what makes the scroll work. */
.view-btn { flex-shrink: 0; }
.view-switcher { gap: 4px; }
.site-header { flex-wrap: wrap; row-gap: 6px; column-gap: 16px; height: auto; padding: 8px 24px; }
.header-left { flex: 1 1 auto; min-width: 0; }
.header-meta { min-width: 0; }
.header-meta #last-updated { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-right { flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; }
.stat-pill { flex-shrink: 0; }

@media (max-width: 640px) {
  /* Four counts plus the theme control in ONE row. Left to flex-wrap they
     spilled onto a second line for a single 28px button, which costs a row of
     vertical space on the screen size that has the least of it. */
  .header-right {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 5px;
  }
  .stat-pill { padding: 3px 4px; font-size: 9.5px; gap: 3px; min-width: 0; }
  .stat-label { overflow: hidden; text-overflow: ellipsis; }
  #theme-toggle { padding: 3px 7px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v5 — MODES, LIBRARY, HUNT BENCH, LEAK SITES
   ═══════════════════════════════════════════════════════════════════════════
   Two rules govern everything below.

   1. IDENTIFIERS ARE MONOSPACE. A CVE id, a technique id, a rule id, a query
      -- anything a reader compares character by character or pastes elsewhere
      -- is set in the mono face. Prose is not. That single distinction does
      more for the "this is a practitioner's tool" feel than any amount of
      chrome, and it is the thing every real console gets right.

   2. COLOUR MEANS SEVERITY. One interaction colour (--ui-active) says "you
      picked this". The severity ramp says "this is how bad it is". Nothing
      else gets to be saturated. The v4 build used cyan for active state, for
      links, for counts and for the logo simultaneously, so the eye had no way
      to learn what it meant.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Mode switcher (primary nav) ────────────────────────────────────────── */
.mode-switcher {
  display: flex; gap: 2px;
  padding: 0 24px;
  background: var(--bg-sticky);
  border-bottom: 1px solid var(--border);
  position: sticky; top: var(--stack-header); z-index: 90;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow-x: auto; scrollbar-width: none;
}
.mode-switcher::-webkit-scrollbar { display: none; }

.mode-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 10px 18px 9px;
  background: none; border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: color var(--transition), border-color var(--transition);
}
.mode-name {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.09em; color: var(--text-secondary);
}
.mode-hint {
  font-size: 10px; color: var(--text-muted); letter-spacing: 0.02em;
}
.mode-btn:hover .mode-name { color: var(--text-primary); }
.mode-btn.active { border-bottom-color: var(--ui-active); }
.mode-btn.active .mode-name { color: var(--ui-active); }
.mode-btn.active .mode-hint { color: var(--text-secondary); }

/* The sub-nav hides itself when a mode holds one view, so it must not
   reserve vertical space when empty. */
.view-switcher:empty { display: none; padding: 0; border: 0; }

/* ── Library: browser ───────────────────────────────────────────────────── */
.library-view, .hunt-view, .leaks-view { padding: 4px 0 40px; }

.lib-searchbar { margin: 14px 0 10px; }
.lib-search {
  width: 100%; padding: 11px 14px;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 13px;
}
.lib-search:focus {
  outline: none; border-color: var(--ui-active);
  box-shadow: 0 0 0 3px var(--ui-active-dim);
}

.lib-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.lib-kind {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  cursor: pointer; transition: all var(--transition);
}
.lib-kind:hover { border-color: var(--border-strong); color: var(--text-primary); }
.lib-kind.active {
  border-color: var(--ui-active); color: var(--ui-active);
  background: var(--ui-active-dim);
}
.lib-kind-count { color: var(--text-muted); font-size: 10px; }
.lib-kind.active .lib-kind-count { color: var(--ui-active); }

.lib-list {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.lib-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px; text-align: left;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.lib-card:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
.lib-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lib-badge {
  padding: 2px 7px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--bg-surface); color: var(--text-secondary);
  border: 1px solid var(--border);
}
/* Kind is nominal, not ordinal, so these are hue-differentiated only enough to
   be told apart at a glance -- never used as the sole cue (the label is right
   there in the badge). */
.lib-badge.kind-actor      { color: #d98a3d; border-color: #d98a3d44; }
.lib-badge.kind-malware    { color: #d1607a; border-color: #d1607a44; }
.lib-badge.kind-tool       { color: #8f9ec4; border-color: #8f9ec444; }
.lib-badge.kind-technique  { color: #5aa2f5; border-color: #5aa2f544; }
.lib-badge.kind-attack-campaign { color: #7bab8e; border-color: #7bab8e44; }
.lib-badge.kind-mitigation { color: #6fb3a8; border-color: #6fb3a844; }

.lib-card-id {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
}
.lib-card-seen {
  margin-left: auto; padding: 1px 6px; border-radius: 2px;
  background: var(--ui-active-dim); color: var(--ui-active);
  font-family: var(--font-mono); font-size: 9px;
}
.lib-card-name {
  font-size: 14px; font-weight: 600; color: var(--text-primary);
  line-height: 1.3;
}
.lib-card-flag {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
}
.lib-card-aka {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lib-card-teaser {
  font-size: 12px; color: var(--text-secondary); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lib-count {
  margin: 14px 0 8px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted);
}
.lib-more {
  display: block; margin: 0 auto; padding: 9px 26px;
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  cursor: pointer;
}
.lib-more:hover { border-color: var(--ui-active); color: var(--ui-active); }

/* ── Entity page ────────────────────────────────────────────────────────── */
.ent-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 12px 0; padding: 6px 12px;
  background: none; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  cursor: pointer;
}
.ent-back:hover { color: var(--ui-active); border-color: var(--ui-active); }

.ent-page { max-width: 1000px; }
.ent-head { padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.ent-head-badges {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.ent-id {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--text-secondary); letter-spacing: 0.05em;
}
.ent-country {
  padding: 2px 7px; border-radius: 2px;
  background: var(--bg-surface); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
}
.ent-observed {
  padding: 2px 8px; border-radius: 2px;
  background: var(--ui-active-dim); color: var(--ui-active);
  font-family: var(--font-mono); font-size: 10px;
}
.ent-name {
  margin: 0; font-family: var(--font-display); font-size: 30px;
  font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary);
  line-height: 1.15;
}
.ent-aka { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.ent-aka-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.ent-aka-list {
  font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary);
  line-height: 1.6;
}
.ent-facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px;
  margin: 14px 0 0;
}
.ent-fact-key {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted); align-self: baseline;
}
.ent-fact-val {
  margin: 0; font-size: 13px; color: var(--text-primary);
  font-family: var(--font-mono);
}

.ent-section { margin-top: 26px; }
.ent-section-head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 6px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.ent-section-title {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--text-primary);
}
.ent-section-note { font-size: 11px; color: var(--text-muted); }
.ent-subhead {
  margin: 16px 0 7px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary);
}
.ent-prose {
  margin: 0; font-size: 14px; line-height: 1.65; color: var(--text-primary);
  max-width: 74ch;
}
.ent-warn {
  margin: 8px 0 14px; padding: 9px 12px;
  border-left: 3px solid var(--high); background: var(--high-bg);
  font-size: 12px; color: var(--text-primary); line-height: 1.5;
}
.ent-inherited {
  font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);
  font-style: italic;
}

.ent-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ent-chip {
  padding: 3px 9px; border-radius: 2px;
  background: var(--bg-card); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
}
button.ent-chip { cursor: pointer; transition: all var(--transition); }
button.ent-chip:hover {
  color: var(--ui-active); border-color: var(--ui-active);
  background: var(--ui-active-dim);
}
.ent-ctrl { font-weight: 600; }

.ent-obs { list-style: none; margin: 0; padding: 0; }
.ent-obs-row {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 12px;
  align-items: baseline; padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.ent-obs-date {
  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.ent-obs-title { font-size: 13px; color: var(--ui-link); text-decoration: none; }
.ent-obs-title:hover { text-decoration: underline; }
.ent-obs-meta { display: flex; gap: 8px; align-items: center; }
.ent-obs-source { font-size: 10px; color: var(--text-muted); }
.ent-obs-band {
  padding: 1px 6px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
}
.ent-obs-band.band-urgent   { background: var(--critical-bg); color: var(--critical); }
.ent-obs-band.band-elevated { background: var(--high-bg);     color: var(--high); }
.ent-obs-band.band-moderate { background: var(--medium-bg);   color: var(--medium); }
.ent-obs-band.band-low      { background: var(--low-bg);      color: var(--low); }

.ent-metrics { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 12px; }
.ent-metric { display: flex; flex-direction: column; gap: 2px; }
.ent-metric-value {
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  color: var(--text-primary);
}
.ent-metric-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted);
}

.ent-tech-table { display: flex; flex-direction: column; }
.ent-tech-row {
  display: grid; grid-template-columns: 108px 1fr auto; gap: 12px;
  align-items: center; padding: 7px 8px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.ent-tech-row:hover { background: var(--bg-card-hover); }
.ent-tech-id {
  font-family: var(--font-mono); font-size: 11px; color: var(--ui-active);
}
.ent-tech-name { font-size: 13px; color: var(--text-primary); }
.ent-tech-rules {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
}
.ent-tech-rules.is-gap { color: var(--high); }

.ent-rules { list-style: none; margin: 0; padding: 0; }
.ent-rule {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--border);
}
.ent-rule-level {
  padding: 1px 7px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ent-rule-level.level-critical { background: var(--critical-bg); color: var(--critical); }
.ent-rule-level.level-high     { background: var(--high-bg);     color: var(--high); }
.ent-rule-level.level-medium   { background: var(--medium-bg);   color: var(--medium); }
.ent-rule-level.level-low      { background: var(--low-bg);      color: var(--low); }
.ent-rule-level.level-informational { background: var(--bg-surface); color: var(--text-muted); }
.ent-rule-title { font-size: 13px; color: var(--ui-link); text-decoration: none; }
.ent-rule-title:hover { text-decoration: underline; }
.ent-rule-src {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
}

.ent-action {
  display: inline-block; margin-top: 12px; padding: 8px 16px;
  background: var(--ui-active-dim); color: var(--ui-active);
  border: 1px solid var(--ui-active); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  cursor: pointer;
}
.ent-action:hover { background: var(--ui-active); color: var(--bg-base); }
.ent-action.is-ghost {
  background: none; color: var(--text-secondary); border-color: var(--border);
}
.ent-action.is-ghost:hover {
  color: var(--ui-active); border-color: var(--ui-active); background: none;
}

.ent-d3f-group { display: flex; gap: 12px; margin-bottom: 10px; align-items: flex-start; }
.ent-d3f-tactic {
  flex: 0 0 78px; padding: 3px 8px; border-radius: 2px; text-align: center;
  font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--text-secondary);
}
.ent-d3f-tactic.tactic-harden  { color: #6fb3a8; border-color: #6fb3a844; }
.ent-d3f-tactic.tactic-detect  { color: #5aa2f5; border-color: #5aa2f544; }
.ent-d3f-tactic.tactic-isolate { color: #d98a3d; border-color: #d98a3d44; }
.ent-d3f-tactic.tactic-evict   { color: #d1607a; border-color: #d1607a44; }
.ent-d3f-items { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ent-d3f-item { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.ent-d3f-name { font-size: 13px; color: var(--ui-link); text-decoration: none; }
.ent-d3f-name:hover { text-decoration: underline; }
.ent-d3f-artifact { font-size: 11px; color: var(--text-muted); font-style: italic; }

.ent-mitigations { display: flex; flex-direction: column; gap: 2px; }
.ent-mitigation {
  display: grid; grid-template-columns: 70px 1fr; gap: 10px;
  padding: 6px 8px; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--border);
}
.ent-mitigation:hover { background: var(--bg-card-hover); }
.ent-mit-id { font-family: var(--font-mono); font-size: 11px; color: var(--ui-active); }
.ent-mit-name { font-size: 13px; color: var(--text-primary); }

.ent-ctrl-group { margin-bottom: 10px; }
.ent-ctrl-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.ent-ctrl-fw {
  font-size: 11px; font-weight: 600; color: var(--text-secondary);
}

.ent-atomic {
  margin: 8px 0; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.ent-atomic-head {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  cursor: pointer; list-style: none;
}
.ent-atomic-head::-webkit-details-marker { display: none; }
.ent-atomic-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.ent-atomic-exec {
  font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary);
  padding: 1px 6px; border: 1px solid var(--border); border-radius: 2px;
}
.ent-atomic-flag {
  font-family: var(--font-mono); font-size: 9px; text-transform: uppercase;
  padding: 1px 6px; border-radius: 2px;
  background: var(--warn); color: var(--bg-base);
}
.ent-atomic-flag.is-danger { background: var(--critical); color: var(--bg-base); }
.ent-atomic-desc { margin: 8px 0 0; font-size: 12px; color: var(--text-secondary); line-height: 1.55; }
.ent-atomic-plat { margin: 5px 0 0; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.ent-atomic-prereqs { margin: 4px 0 0 18px; font-size: 12px; color: var(--text-secondary); }

/* Code block — the one place a horizontal scrollbar is correct: a compiled
   SIEM query must never be wrapped, because a wrapped query is a broken one
   when pasted. */
.code-block {
  margin: 9px 0; border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--bg-base);
}
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 10px; background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.code-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.code-copy {
  padding: 2px 10px; background: none; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: 2px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.07em;
  cursor: pointer;
}
.code-copy:hover { color: var(--ui-active); border-color: var(--ui-active); }
.code-body {
  margin: 0; padding: 11px 12px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.55;
  color: var(--text-code); white-space: pre;
}

.ent-reports, .ent-refs { list-style: none; margin: 0; padding: 0; }
.ent-report, .ent-ref {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 5px 0; border-bottom: 1px solid var(--border);
}
.ent-report-date {
  flex: 0 0 78px; font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted);
}
.ent-report-title, .ent-ref-link {
  font-size: 13px; color: var(--ui-link); text-decoration: none;
}
.ent-report-title:hover, .ent-ref-link:hover { text-decoration: underline; }
.ent-report-author, .ent-ref-desc { font-size: 11px; color: var(--text-muted); }
.ent-canonical { margin-top: 14px; }
.entity-lib-btn {
  display: block; width: 100%; margin-top: 10px; padding: 9px;
  background: var(--ui-active-dim); color: var(--ui-active);
  border: 1px solid var(--ui-active); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; cursor: pointer;
}
.entity-lib-btn:hover { background: var(--ui-active); color: var(--bg-base); }

/* ── Hunt bench ─────────────────────────────────────────────────────────── */
.hunt-progress {
  height: 3px; margin: 12px 0 18px;
  background: var(--border); border-radius: 2px; overflow: hidden;
}
.hunt-progress-fill { height: 100%; background: var(--ui-active); transition: width var(--transition); }

.hunt-finished {
  padding: 26px; margin-bottom: 18px; text-align: center;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius);
}
.hunt-finished-icon { margin: 0; font-size: 32px; color: var(--ok); }
.hunt-finished-text { margin: 8px 0 14px; font-size: 13px; color: var(--text-secondary); }
.hunt-reset {
  padding: 7px 18px; background: none; color: var(--text-secondary);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; cursor: pointer;
}

.hunt-list { display: flex; flex-direction: column; gap: 10px; }
.hunt-card {
  padding: 14px 16px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--ui-active); border-radius: var(--radius);
}
.hunt-card.is-done { opacity: 0.5; border-left-color: var(--ok); }
.hunt-card-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 7px; }
.hunt-tid {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  color: var(--ui-active);
}
.hunt-name { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.hunt-gap {
  margin-left: auto; padding: 2px 8px; border-radius: 2px;
  background: var(--critical-bg); color: var(--critical);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em;
}
.hunt-rules {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  color: var(--text-secondary);
}
.hunt-hypothesis {
  margin: 0 0 9px; font-size: 13px; line-height: 1.6; color: var(--text-primary);
  max-width: 78ch;
}
.hunt-why { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.hunt-why-item, .hunt-why-actor {
  padding: 2px 8px; border-radius: 2px;
  font-family: var(--font-mono); font-size: 10px;
  background: var(--bg-surface); border: 1px solid var(--border);
  color: var(--text-secondary);
}
.hunt-why-actor { cursor: pointer; }
.hunt-why-actor:hover { color: var(--ui-active); border-color: var(--ui-active); }
.hunt-telemetry { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.hunt-telemetry-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.hunt-evidence { list-style: none; margin: 0 0 10px; padding: 0; }
.hunt-evidence-link { font-size: 12px; color: var(--ui-link); text-decoration: none; }
.hunt-evidence-link:hover { text-decoration: underline; }
.hunt-actions { display: flex; gap: 8px; }
.hunt-action {
  padding: 7px 15px;
  background: var(--ui-active-dim); color: var(--ui-active);
  border: 1px solid var(--ui-active); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em;
  cursor: pointer;
}
.hunt-action:hover { background: var(--ui-active); color: var(--bg-base); }
.hunt-action.is-ghost {
  background: none; color: var(--text-secondary); border-color: var(--border);
}
.hunt-action.is-ghost:hover { color: var(--text-primary); border-color: var(--border-strong); background: none; }

.hunt-pack-list { display: flex; flex-direction: column; margin-top: 12px; }
.hunt-pack-row {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 12px;
  align-items: center; padding: 9px 10px; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.hunt-pack-row:hover { background: var(--bg-card-hover); }
.hunt-pack-name { font-size: 13px; color: var(--text-primary); }
.hunt-pack-meta { display: flex; gap: 10px; align-items: center; }
.hunt-pack-seen {
  padding: 1px 6px; border-radius: 2px;
  background: var(--ui-active-dim); color: var(--ui-active);
  font-family: var(--font-mono); font-size: 9px;
}
.hunt-pack-count { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }

.hunt-backends { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.hunt-backend-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted); margin-right: 4px;
}
.hunt-backend {
  padding: 4px 11px; border-radius: 2px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 10px; cursor: pointer;
}
.hunt-backend:hover { color: var(--text-primary); border-color: var(--border-strong); }
.hunt-backend.active {
  background: var(--ui-active-dim); color: var(--ui-active); border-color: var(--ui-active);
}
.hunt-rule { margin-bottom: 16px; }
.hunt-rule-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.hunt-noquery { margin: 4px 0 0; font-size: 11px; color: var(--text-muted); font-style: italic; }
.hunt-relevant {
  padding: 1px 7px; border-radius: 2px;
  background: var(--ui-active-dim); color: var(--ui-active);
  font-family: var(--font-mono); font-size: 9px;
}
.hunt-newrules { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.hunt-newrule { padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.hunt-newrule.is-relevant { border-left: 3px solid var(--ui-active); }

.hunt-inventory { margin: 14px 0 18px; }
.hunt-inventory-input {
  width: 100%; padding: 11px 13px; resize: vertical;
  background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
}
.hunt-inventory-input:focus {
  outline: none; border-color: var(--ui-active);
  box-shadow: 0 0 0 3px var(--ui-active-dim);
}
.hunt-inventory-actions { display: flex; gap: 8px; margin-top: 9px; }

.cov-grid {
  display: grid; gap: 4px; margin: 16px 0 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.cov-cell {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 10px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card);
}
/* Coverage state is ordinal (have it / could have it / cannot have it) and is
   carried by the LABEL in the tooltip and the legend as well as the colour. */
.cov-cell.is-covered   { border-left: 3px solid var(--ok); }
.cov-cell.is-uncovered { border-left: 3px solid var(--warn); }
.cov-cell.is-norule    { border-left: 3px solid var(--critical); }
.cov-cell:hover { background: var(--bg-card-hover); }
.cov-tid { font-family: var(--font-mono); font-size: 10px; color: var(--ui-active); }
.cov-name {
  font-size: 12px; color: var(--text-primary); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cov-seen { font-family: var(--font-mono); font-size: 9px; color: var(--text-muted); }
.cov-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; font-size: 11px; color: var(--text-secondary); }
.cov-legend-item { display: inline-flex; gap: 6px; align-items: center; }
.cov-swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.cov-swatch.is-covered   { background: var(--ok); }
.cov-swatch.is-uncovered { background: var(--warn); }
.cov-swatch.is-norule    { background: var(--critical); }

/* ── Leak sites ─────────────────────────────────────────────────────────── */
.leak-freshness { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 18px; }
.leak-fresh-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted);
}
.leak-fresh {
  display: inline-flex; gap: 7px; align-items: baseline;
  padding: 3px 9px; border-radius: 2px;
  background: var(--bg-card); border: 1px solid var(--border);
}
.leak-fresh.is-stale { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.leak-fresh-name { font-family: var(--font-mono); font-size: 10px; color: var(--text-primary); }
.leak-fresh-age { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); }
.leak-fresh.is-stale .leak-fresh-age { color: var(--warn); font-weight: 700; }
.leak-fresh-count { font-size: 9px; color: var(--text-muted); }

.leak-groups { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.leak-group { padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.leak-group-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; cursor: pointer; list-style: none; }
.leak-group-head::-webkit-details-marker { display: none; }
.leak-group-name { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--text-primary); }
.leak-group-count { font-family: var(--font-mono); font-size: 11px; color: var(--critical); }
.leak-group-last { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.leak-meta { margin: 6px 0 0; font-size: 11px; color: var(--text-muted); }
.leak-ttps { margin: 4px 0 0 18px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }

.leak-posts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.leak-post { padding: 10px 12px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); }
.leak-post-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 5px; }
.leak-post-channel { font-family: var(--font-mono); font-size: 11px; color: var(--ui-active); }
.leak-post-time { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); }
.leak-post-link { margin-left: auto; font-size: 10px; color: var(--ui-link); text-decoration: none; }
.leak-post-text { margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-secondary); white-space: pre-wrap; }

/* ── Responsive: the three breakpoints v4 consolidated to ───────────────── */
@media (max-width: 900px) {
  .mode-switcher { padding: 0 12px; }
  .mode-btn { padding: 9px 13px 8px; }
  .mode-hint { display: none; }
  .ent-name { font-size: 23px; }
  .ent-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .ent-fact-val { margin-bottom: 7px; }
  .ent-obs-row, .ent-tech-row, .hunt-pack-row { grid-template-columns: 1fr; gap: 3px; }
  .ent-d3f-group { flex-direction: column; gap: 5px; }
  .ent-d3f-tactic { flex: none; align-self: flex-start; }
  .lib-list { grid-template-columns: 1fr; }
  .cov-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

@media (max-width: 640px) {
  /* The header is `position: static` at this width (see the rule above: a
     wrapped header with four stat pills is ~85px, too much to pin on a
     phone), so the mode row is the ONLY pinned bar and it belongs at the very
     top. It was hard-coded to 56px, which left a strip of content scrolling
     past above it. syncStickyOffsets() agrees: it counts only bars that are
     actually sticky. */
  .mode-switcher { top: 0; }
  .mode-name { font-size: 11px; }
  .ent-page { max-width: 100%; }
  .hunt-actions { flex-direction: column; }
  .hunt-action { width: 100%; }
  .leak-group-last { margin-left: 0; }
}

/* Motion: the scanline is gone, but anything else that animates should also
   stand down when the reader has asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  .hunt-progress-fill { transition: none; }
}

/* Ambiguous names: "Emotet" is both a malware family and the crew behind it.
   Presented as a route to the other reading, not as an error. */
.ent-disambig {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: baseline;
  margin-top: 9px;
}
.ent-disambig-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-muted);
}
.ent-disambig-link {
  padding: 2px 9px; border-radius: 2px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--ui-link); font-family: var(--font-mono); font-size: 11px;
}
.ent-disambig-link:hover { border-color: var(--ui-link); }

/* Rows that mix a link with a long description are flex containers, and a
   flex ITEM will not shrink below its content width unless it is told it may.
   Without `min-width: 0` on the children the row stays as wide as its longest
   descendant and the tail is clipped by the container -- which is why the page
   itself showed no horizontal overflow while the text was still unreachable.
   `anywhere` rather than `break-word` because several of these are raw URLs
   with no spaces to break at. */
.ent-ref, .ent-report, .ent-obs-row, .ent-rule, .leak-post-head { min-width: 0; }
.ent-ref > *, .ent-report > *, .ent-obs-row > *, .ent-rule > * { min-width: 0; }
.ent-ref-link,
.ent-ref-desc,
.ent-report-title,
.ent-obs-title,
.ent-rule-title,
.leak-post-link { overflow-wrap: anywhere; word-break: break-word; }

/* ATT&CK v18 detection strategies. Each analytic names the log source and
   channel it needs, which is the difference between "monitor for suspicious
   encryption" and knowing whether you collect the telemetry to try. */
.ent-detstrat {
  margin: 10px 0 14px; padding: 11px 13px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--ui-active); border-radius: var(--radius);
}
.ent-detstrat-head {
  display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap;
  margin-bottom: 6px;
}
.ent-detstrat-id {
  font-family: var(--font-mono); font-size: 10px; color: var(--ui-active);
}
.ent-detstrat-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  text-decoration: none;
}
a.ent-detstrat-name { color: var(--ui-link); }
a.ent-detstrat-name:hover { text-decoration: underline; }
.ent-analytic {
  margin-top: 9px; padding-left: 11px;
  border-left: 1px solid var(--border);
}
.ent-analytic-head {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 3px;
}
.ent-analytic-id {
  font-family: var(--font-mono); font-size: 9px; color: var(--text-muted);
}
.ent-analytic-desc {
  margin: 0; font-size: 12px; line-height: 1.55; color: var(--text-secondary);
  max-width: 74ch;
}
/* Log-source chips are identifiers you paste into a SIEM, so they are mono. */
.ent-telemetry .ent-chip {
  color: var(--text-code); border-color: var(--border-strong);
}

/* Anything scrolled to by id must clear the pinned header + mode row, or it
   lands underneath them. */
:target,
[id] { scroll-margin-top: calc(var(--stack-nav) + 12px); }