/* ============================================================
   Smoker · Detonation View — cyber-analyst UI on the LIGHT palette.
   Inherits ALL color tokens from colors_and_type.css. No local color
   redefinitions: any color introduced here must first land in the
   palette source file (enforced by scripts/lint-palette.mjs).
   ============================================================ */

.det-view {
  /* Lane colors inherited from colors_and_type.css (--lane-*). */

  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  background-image:
    radial-gradient(circle at 22% -10%, rgba(196,71,58,.04), transparent 38%),
    radial-gradient(circle at 88% 110%, rgba(255,46,136,.025), transparent 40%);
  min-height: 100vh;
  padding: 28px 32px 168px;
  margin: -20px -24px 0;
  max-width: none;
}
.det-view * { box-sizing: border-box; }
.det-view code { font-family: var(--font-mono); }

/* ============== VERDICT HEADER ============== */
.det-view .verdict {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
  padding: 28px 0 24px;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 28px;
  position: relative;
}
.det-view .verdict::before {
  content: ""; position: absolute; left: -40px; top: 16px;
  width: 220px; height: 220px; pointer-events: none;
  background: radial-gradient(circle, rgba(196,71,58,.08), transparent 60%);
  filter: blur(10px); z-index: 0;
}
.det-view .verdict > * { position: relative; z-index: 1; }
.det-view .verdict__main { display: flex; flex-direction: column; gap: 14px; }
.det-view .verdict__row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.det-view .pill-verdict {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 18px;
  font-family: var(--font-sans); font-weight: 800;
  font-size: 18px; letter-spacing: 0.14em;
  border-radius: 8px;
  background: var(--sev-mal-bg);
  border: 2px solid var(--sev-mal-border);
  color: var(--sev-mal-ink);
  text-transform: uppercase;
  box-shadow: 0 2px 12px rgba(196,71,58,.18);
}
.det-view .pill-verdict .dot {
  width: 12px; height: 12px; border-radius: 50%; background: var(--sev-mal);
  box-shadow: 0 0 12px rgba(196,71,58,.7);
  animation: detPulseDot 1.6s ease-in-out infinite;
}
.det-view .pill-verdict[data-verdict="clean"] {
  background: var(--sev-clean-bg); border-color: var(--sev-clean-border); color: var(--sev-clean-ink);
}
.det-view .pill-verdict[data-verdict="clean"] .dot { background: var(--sev-clean); box-shadow: 0 0 8px rgba(45,134,89,.6); }
.det-view .pill-verdict[data-verdict="suspicious"] {
  background: var(--sev-sus-bg); border-color: var(--sev-sus-border); color: var(--sev-sus-ink);
}
.det-view .pill-verdict[data-verdict="suspicious"] .dot { background: var(--sev-sus); box-shadow: 0 0 8px rgba(184,134,11,.6); }
.det-view .pill-verdict[data-verdict="error"] {
  background: var(--sev-neutral-bg); border-color: var(--border-subtle); color: var(--fg-muted);
}
.det-view .pill-verdict[data-verdict="error"] .dot { background: var(--sev-neutral); box-shadow:none; animation:none; }
@keyframes detPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.55; }
}
.det-view .verdict__pkg {
  font-family: var(--font-mono); font-size: 30px; font-weight: 500;
  letter-spacing: -0.005em; color: var(--fg-primary); line-height: 1.1;
}
.det-view .verdict__pkg .at { color: var(--fg-muted); }
.det-view .verdict__pkg .ver { color: var(--hot); }
.det-view .verdict__sub {
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--fg-muted); display: flex; gap: 14px; flex-wrap: wrap; align-items:center;
}
.det-view .verdict__sub a { color: var(--brand-navy); text-decoration: none; }
.det-view .verdict__sub a:hover { color: var(--brand-navy-ink); text-decoration: underline; text-underline-offset: 3px; }
.det-view .verdict__sub .sep { color: var(--border-strong); }
.det-view .verdict__drift {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 4px;
  background: var(--sev-mal-bg); border: 1px solid var(--sev-mal-border);
  color: var(--sev-mal-ink); font-family: var(--font-mono); font-size: 11.5px;
}
.det-view .verdict__drift .arrow { color: var(--sev-mal); }
.det-view .verdict__actions { display: flex; align-items:center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.det-view .det-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px;
  background: var(--bg-surface); color: var(--fg-secondary);
  border: 1px solid var(--border-subtle); border-radius: 6px;
  font-family: var(--font-mono); font-size: 12px; cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.det-view .det-btn:hover { background: var(--bg-inset); color: var(--fg-primary); border-color: var(--border-strong); }

.det-view .toggle {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 11px 6px 8px;
  border: 1px solid var(--border-subtle); border-radius: 6px;
  background: var(--bg-surface); cursor: pointer;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--fg-secondary); transition: all 120ms;
}
.det-view .toggle:hover { color: var(--fg-primary); border-color: var(--border-strong); }
.det-view .toggle__sw {
  width: 26px; height: 14px; border-radius: 999px;
  background: var(--border-strong); position: relative; transition: background 120ms; flex-shrink: 0;
}
.det-view .toggle__sw::after {
  content:""; position:absolute; top:2px; left:2px;
  width:10px; height:10px; border-radius:50%; background:var(--bg-surface);
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: all 160ms cubic-bezier(.2,.6,.2,1);
}
.det-view .toggle[data-on="true"] { color: var(--fg-primary); border-color: var(--hot); }
.det-view .toggle[data-on="true"] .toggle__sw { background: var(--hot); box-shadow: 0 0 8px rgba(255,46,136,.35); }
.det-view .toggle[data-on="true"] .toggle__sw::after { left: 14px; }

/* ============== NARRATIVE ============== */
.det-view .narrative {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 28px;
  margin-bottom: 28px; padding: 4px 0 24px;
  border-bottom: 1px solid var(--border-subtle);
}
.det-view .narrative__divider { background: var(--border-subtle); }
.det-view .narrative__block { display:flex; flex-direction:column; gap:10px; }
.det-view .narrative__label {
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-muted); letter-spacing: 0.16em;
  text-transform: uppercase; display:flex; align-items:center; gap:8px;
}
.det-view .narrative__label .src {
  padding: 2px 6px; background: var(--bg-raised); border-radius: 3px;
  color: var(--fg-secondary); border: 1px solid var(--border-subtle);
  font-size: 9.5px; letter-spacing: 0.1em;
}
.det-view .narrative__label .src.runner { color: var(--brand-navy); border-color: var(--sev-mal-border); }
.det-view .narrative__behavior {
  font-family: var(--font-sans); font-style: normal;
  font-size: 18px; line-height: 1.65; color: var(--fg-primary); max-width: 72ch;
  font-weight: 400; margin: 0; letter-spacing: -0.005em;
}
.det-view .narrative__enriched {
  font-family: var(--font-sans); font-size: 15px; line-height: 1.62; color: var(--fg-primary);
  max-width: 60ch; margin: 0;
}
.det-view .narrative__enriched strong { font-weight: 700; color: var(--sev-mal-ink); }
.det-view .narrative__enriched code {
  font-family: var(--font-mono); font-size: 13px;
  background: var(--bg-raised); padding: 1px 6px; border-radius: 3px;
  border: 1px solid var(--border-subtle); color: var(--fg-primary);
}

/* ============== PANELS ============== */
.det-view .panels {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px; margin-bottom: 16px;
}
.det-view .panels--equal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.det-view .panels--full  { grid-template-columns: 1fr; }
.det-view .panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.det-view .panel__head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-raised);
}
.det-view .panel__title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-secondary);
  display: flex; align-items: center; gap: 9px;
}
.det-view .panel__title .corner {
  width: 6px; height: 6px; border-radius: 1px; background: var(--hot);
  box-shadow: 0 0 6px rgba(255,46,136,.5);
}
.det-view .panel__sub { font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted); }
.det-view .panel__body { padding: 18px; flex: 1; min-height: 320px; }
.det-view .panel__body--canvas { padding: 0; }

/* Process tree.
   Height was 460px (matching the OLD viewBox). With bigger nodes (78h) and
   124px layer gap, viewBox is now 720 — and the SVG is set to xMidYMid meet
   so it scales to fit. Bumping to 620px keeps nodes legible without burning
   another viewport of whitespace below the deepest node. */
.det-view .tree-canvas {
  position: relative; width: 100%; height: 720px;
  background: var(--bg-surface);
  /* Natural-size SVG inside; wide trees (e.g. 17 siblings on one layer)
     scroll horizontally instead of shrinking to unreadable boxes. */
  overflow: auto;
}
.det-view .tree-canvas svg { display:block; }
/* Zoom toolbar lives in the panel header (next to the collapse chevron),
   not inside the canvas. The buttons are the canonical zoom controls;
   ProcessTree itself only renders the SVG. */
.det-view .tree-zoom {
  display: inline-flex; gap: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle); border-radius: 6px;
  font-family: JetBrains Mono, monospace; font-size: 11px;
  margin-left: 8px; align-self: center;
}
.det-view .tree-zoom__btn,
.det-view .tree-zoom__lbl {
  background: transparent; border: 0; color: var(--fg-default);
  padding: 4px 8px; cursor: pointer; min-width: 28px;
  border-right: 1px solid var(--border-subtle);
}
.det-view .tree-zoom__btn:last-child { border-right: 0; }
.det-view .tree-zoom__lbl { min-width: 44px; text-align: center; }
.det-view .tree-zoom__btn:hover,
.det-view .tree-zoom__lbl:hover { background: var(--bg-subtle); }
.det-view .tree-hover {
  position: absolute;
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 14px 16px; width: 280px;
  box-shadow: 0 12px 40px rgba(0,0,0,.12), 0 0 0 1px rgba(255,46,136,.10);
  z-index: 5; font-size: 12px; pointer-events: none;
}
.det-view .tree-hover__title {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-primary);
  margin-bottom: 4px; word-break: break-all;
}
.det-view .tree-hover__meta {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
  margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-subtle);
}
.det-view .tree-hover__flag {
  display: flex; align-items:center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; margin: 4px 0;
}
.det-view .tree-hover__flag .flag-name { color: var(--brand-navy); font-weight: 600; letter-spacing: 0.05em; }
.det-view .tree-hover__flag .flag-tier {
  padding: 1px 6px; border-radius: 2px;
  font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
}
.det-view .tree-hover__flag .flag-tier[data-tier="high"] {
  background: var(--sev-mal-bg); color: var(--sev-mal-ink); border: 1px solid var(--sev-mal-border);
}
.det-view .tree-hover__conf {
  margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px;
  color: var(--fg-muted); display:flex; align-items:center; gap:8px;
}
.det-view .tree-hover__bar { flex:1; height: 3px; background: var(--bg-inset); border-radius: 1px; overflow: hidden; }
.det-view .tree-hover__bar > div { height:100%; background: var(--sev-mal); }

/* ATT&CK list */
.det-view .attack { display: flex; flex-direction: column; font-family: var(--font-mono); }
.det-view .attack__group { border-bottom: 1px solid var(--border-subtle); }
.det-view .attack__group:last-child { border-bottom: none; }
.det-view .attack__group-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 18px 9px;
}
.det-view .attack__tactic { font-size: 10.5px; color: var(--fg-muted); letter-spacing: 0.14em; text-transform: uppercase; }
.det-view .attack__tactic-id { color: var(--hot); margin-right: 8px; }
.det-view .attack__row {
  display: grid; grid-template-columns: 14px 1fr auto;
  gap: 12px; align-items: center;
  padding: 11px 18px; cursor: pointer; transition: background 120ms;
  border-top: 1px solid var(--border-subtle);
}
.det-view .attack__row:hover { background: var(--bg-inset); }
.det-view .attack__row[data-active="true"] { background: var(--hot-soft); }
.det-view .attack__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--sev-mal);
  box-shadow: 0 0 6px rgba(196,71,58,.5);
}
.det-view .attack__dot[data-tier="inferred"] {
  background: var(--bg-surface); border: 1px solid var(--border-strong); box-shadow:none;
}
.det-view .attack__dot[data-tier="medium"] { background: var(--sev-sus); box-shadow: 0 0 6px rgba(184,134,11,.4); }
.det-view .attack__name { display: flex; flex-direction: column; gap: 2px; }
.det-view .attack__name .id { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.04em; }
.det-view .attack__name .label { font-family: var(--font-sans); font-size: 13.5px; font-weight: 500; color: var(--fg-primary); }
.det-view .attack__count {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
  padding: 2px 7px; border-radius: 3px;
  background: var(--bg-raised); border: 1px solid var(--border-subtle);
}

/* Network map */
.det-view .netmap {
  position: relative; width: 100%; height: 460px;
  background: var(--bg-surface);
}
.det-view .netmap svg { width:100%; height:100%; display:block; }
/* netmap-hover is portaled into document.body so the .det-view scope
   doesn't reach it. Rules MUST stay un-scoped — same pattern as
   .gloss__pop. The inline style on the React side handles position/top/left;
   these rules cover the visual chrome. */
.netmap-hover {
  background: #FAF7F2;
  border: 1px solid #C9C1B5;
  border-radius: 8px; padding: 14px 16px; width: 280px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(196,71,58,.18);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 12px;
  color: #1F2937;
  line-height: 1.45;
}
.netmap-hover__host { font-size: 13px; color: #1F2937; margin-bottom: 2px; word-break: break-all; }
.netmap-hover__type {
  font-size: 10.5px; color: #6B7486; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #E5E2DC;
}
.netmap-hover__row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.netmap-hover__row .k { color: #6B7486; }
.netmap-hover__row .v { color: #1F2937; }
.netmap-hover__warn {
  margin-top: 10px; padding: 8px 10px;
  background: #FBE0DC; color: #9B2C20;
  border: 1px solid #E8B4AE;
  border-radius: 4px; font-size: 11px; line-height: 1.5;
}

/* Timeline */
.det-view .timeline { display: flex; flex-direction: column; height: 460px; }
.det-view .timeline__lanes {
  flex: 1; position: relative;
  display: grid; grid-template-rows: repeat(4, 1fr);
  background: repeating-linear-gradient(to right, transparent 0 calc(10% - 1px), var(--bg-inset) calc(10% - 1px) 10%);
}
.det-view .timeline__lane {
  position: relative; border-bottom: 1px solid var(--border-subtle);
  display: flex; align-items: center;
}
.det-view .timeline__lane:last-child { border-bottom: none; }
.det-view .timeline__lane-label {
  position: absolute; left: 14px; top: 8px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  color: var(--fg-muted); text-transform: uppercase; pointer-events: none;
}
.det-view .timeline__lane-label .ct { color: var(--fg-secondary); margin-left: 6px; }
.det-view .timeline__tick {
  position: absolute;
  width: 6px; height: 14px; border-radius: 1px;
  background: var(--fg-faint);
  transform: translate(-50%, -50%);
  top: 50%;
  transition: background 120ms, box-shadow 120ms, opacity 200ms;
}
.det-view .timeline__tick[data-cat="exec"]  { background: var(--lane-exec); }
.det-view .timeline__tick[data-cat="net"]   { background: var(--lane-net); }
.det-view .timeline__tick[data-cat="fs"]    { background: var(--lane-fs); }
.det-view .timeline__tick[data-cat="flag"]  {
  width: 9px; height: 18px; background: var(--lane-flag);
  box-shadow: 0 0 6px rgba(196,71,58,.55);
}
.det-view .timeline__tick.dimmed { opacity: 0.25; filter: saturate(.5); }
.det-view .timeline__playhead {
  position: absolute; top: 0; bottom: 0;
  width: 1px; background: var(--hot);
  box-shadow: 0 0 8px rgba(255,46,136,.6), 0 0 2px rgba(255,46,136,1);
  pointer-events: none; z-index: 4;
}
.det-view .timeline__playhead::before {
  content:""; position:absolute; top:0; left:-3px;
  width:7px; height:7px; background: var(--hot); transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(255,46,136,.7);
}
.det-view .timeline__axis {
  height: 26px; position: relative;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
}
.det-view .timeline__axis span {
  position: absolute; top: 7px; transform: translateX(-50%); letter-spacing: 0.04em;
}
.det-view .timeline__axis span:first-child { transform: translateX(0); left: 8px; }

/* ============== EVIDENCE ============== */
.det-view .evidence {
  margin-top: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  background: var(--bg-surface);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.det-view .evidence__head {
  padding: 16px 22px;
  display: flex; justify-content: space-between; align-items: center;
  cursor: pointer; transition: background 120ms;
  background: var(--bg-raised);
}
.det-view .evidence__head:hover { background: var(--bg-inset); }
.det-view .evidence__head h3 {
  margin:0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fg-secondary);
  display: flex; align-items: center; gap: 12px;
}
.det-view .evidence__head .corner {
  width: 6px; height: 6px; border-radius: 1px; background: var(--hot);
  box-shadow: 0 0 6px rgba(255,46,136,.5);
}
.det-view .evidence__chev {
  font-family: var(--font-mono); color: var(--fg-muted); font-size: 12px;
  transition: transform 200ms;
}
.det-view .evidence[data-open="true"] .evidence__chev { transform: rotate(90deg); color: var(--hot); }
.det-view .evidence__body { display: none; padding: 0; }
.det-view .evidence[data-open="true"] .evidence__body { display: block; }
.det-view .evidence__tabs {
  display:flex; gap: 2px; padding: 0 16px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-page);
}
.det-view .evidence__tab {
  padding: 10px 14px;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-muted); cursor: pointer;
  border-bottom: 1px solid transparent; margin-bottom: -1px;
  transition: color 120ms; letter-spacing: 0.04em;
}
.det-view .evidence__tab:hover { color: var(--fg-primary); }
.det-view .evidence__tab[data-active="true"] {
  color: var(--hot); border-bottom-color: var(--hot);
}
.det-view .evidence__tab .ct { color: var(--fg-muted); margin-left: 6px; font-size: 10.5px; }
.det-view .evidence__tab[data-active="true"] .ct { color: var(--hot-ink); }
.det-view .evidence__pane { padding: 18px 22px; min-height: 240px; background: var(--bg-surface); }

.det-view .etable { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; }
.det-view .etable thead th {
  text-align: left; font-weight: 600;
  color: var(--fg-muted); font-size: 10.5px; letter-spacing: 0.14em;
  padding: 8px 10px; text-transform: uppercase;
  border-bottom: 1px solid var(--border-subtle);
}
.det-view .etable tbody td {
  padding: 9px 10px; color: var(--fg-primary);
  border-bottom: 1px solid var(--border-subtle);
}
.det-view .etable tbody tr:hover { background: var(--bg-inset); }
.det-view .etable .num { text-align: right; color: var(--fg-secondary); }
.det-view .etable .flag-cell { color: var(--sev-sus-ink); }
.det-view .etable .host-bad { color: var(--sev-mal-ink); }
.det-view .histo { display: flex; flex-direction: column; gap: 8px; }
.det-view .histo__row {
  display: grid; grid-template-columns: 130px 1fr 60px;
  gap: 12px; align-items: center;
  font-family: var(--font-mono); font-size: 12px;
}
.det-view .histo__name { color: var(--fg-primary); }
.det-view .histo__bar { height: 8px; background: var(--bg-inset); border-radius: 1px; overflow: hidden; }
.det-view .histo__bar > div { height: 100%; background: var(--lane-exec); }
.det-view .histo__row[data-flag="true"] .histo__bar > div { background: var(--sev-mal); box-shadow: 0 0 6px rgba(196,71,58,.4); }
.det-view .histo__row[data-flag="true"] .histo__name { color: var(--sev-mal-ink); }
.det-view .histo__count { text-align: right; color: var(--fg-muted); }

/* ============== STICKY SCRUBBER (LIGHT) ============== */
.det-scrubber {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 25;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-top: 1px solid var(--border-subtle);
  padding: 14px 32px 18px;
  box-shadow: 0 -4px 16px rgba(0,0,0,.04);
  /* Color tokens inherit from :root (colors_and_type.css). */
}
.det-scrubber .scrubber__inner { max-width: 1440px; margin: 0 auto; }
.det-scrubber .scrubber__readout {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 22px; align-items: center;
  padding-bottom: 10px;
  font-family: var(--font-mono); font-size: 12.5px;
  color: var(--fg-muted);
}
.det-scrubber .scrubber__t {
  font-family: var(--font-mono); color: var(--hot);
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em; min-width: 56px;
}
.det-scrubber .scrubber__event { color: var(--fg-primary); display: flex; gap: 10px; align-items:center; flex-wrap: wrap; }
.det-scrubber .scrubber__event .cat {
  padding: 2px 7px; border-radius: 3px; background: var(--bg-raised);
  border: 1px solid var(--border-subtle); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--lane-exec);
}
.det-scrubber .scrubber__event .cat[data-cat="net"]  { color: var(--lane-net); }
.det-scrubber .scrubber__event .cat[data-cat="fs"]   { color: var(--lane-fs); }
.det-scrubber .scrubber__event .cat[data-cat="flag"] { color: var(--lane-flag); border-color: var(--sev-mal-border); }
.det-scrubber .scrubber__event .target { color: var(--lane-fs); }
.det-scrubber .scrubber__event .pid { color: var(--fg-muted); }
.det-scrubber .scrubber__ctrls { display: flex; align-items: center; gap: 4px; }
.det-scrubber .scrubber__ctrl {
  width: 36px; height: 36px;
  border-radius: 6px; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  color: var(--fg-primary); cursor: pointer;
  display: inline-flex; align-items:center; justify-content:center;
  transition: all 120ms;
}
.det-scrubber .scrubber__ctrl:hover { background: var(--bg-inset); border-color: var(--border-strong); }
.det-scrubber .scrubber__ctrl--play {
  background: var(--hot); color: #FFFFFF; border-color: var(--hot);
  width: 42px; height: 42px;
  box-shadow: 0 0 14px rgba(255,46,136,.30);
}
.det-scrubber .scrubber__ctrl--play:hover { background: var(--hot-ink); border-color: var(--hot-ink); color:#FFFFFF; }
.det-scrubber .scrubber__ctrl svg { width: 14px; height: 14px; }
.det-scrubber .scrubber__ctrl--play svg { width: 16px; height: 16px; }
.det-scrubber .scrubber__speed {
  display: flex; align-items: center; padding: 3px;
  border: 1px solid var(--border-subtle); border-radius: 6px; gap: 0;
  background: var(--bg-raised);
}
.det-scrubber .scrubber__speed button {
  border: none; background: transparent;
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--fg-muted); padding: 5px 10px;
  border-radius: 4px; cursor: pointer; transition: all 120ms;
}
.det-scrubber .scrubber__speed button:hover { color: var(--fg-primary); }
.det-scrubber .scrubber__speed button.active { background: var(--bg-inset); color: var(--hot); }
.det-scrubber .scrubber__track-wrap { position: relative; padding: 8px 0 0; }
.det-scrubber .scrubber__phases {
  display: flex; gap: 0; margin-bottom: 6px; height: 18px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--fg-muted);
}
.det-scrubber .scrubber__phases .phase {
  display: flex; align-items: center; justify-content: center;
  border-radius: 3px; min-width: 0; overflow: hidden;
  border: 1px solid var(--border-subtle);
}
.det-scrubber .scrubber__phases .phase + .phase { margin-left: 2px; }
.det-scrubber .scrubber__phases .phase span { white-space: nowrap; padding: 0 6px; }
.det-scrubber .scrubber__phases .phase--pre { background: #FAFAFA; color: #888; }
.det-scrubber .scrubber__phases .phase--install { background: #FDF2F0; color: #9B2C20; border-color: #E8B4AE; font-weight: 600; }
.det-scrubber .scrubber__phases .phase--post { background: #F4F8FB; color: #44607A; }
.det-scrubber .scrubber__phases .phase--import { background: #EEF6F0; color: #2D6A4F; border-color: #C8D8CD; }
.det-scrubber .scrubber__track {
  position: relative; height: 56px;
  background: var(--bg-raised);
  border: 1px solid var(--border-subtle);
  border-radius: 8px; overflow: hidden; cursor: ew-resize;
}
.det-scrubber .scrubber__mountain { position: absolute; inset: 0; opacity: 0.55; pointer-events: none; }
.det-scrubber .scrubber__mountain svg { width:100%; height:100%; display:block; }
.det-scrubber .scrubber__lanes {
  position: absolute; inset: 0; pointer-events: none;
  display: grid; grid-template-rows: repeat(3, 1fr);
}
.det-scrubber .scrubber__lanes > div { border-bottom: 1px dashed var(--border-subtle); }
.det-scrubber .scrubber__lanes > div:last-child { border-bottom: none; }
.det-scrubber .scrubber__filled {
  position: absolute; left:0; top:0; bottom:0;
  background: linear-gradient(90deg, rgba(255,46,136,.04), rgba(255,46,136,.14));
  border-right: 1px solid rgba(255,46,136,.4);
  pointer-events: none;
}
.det-scrubber .scrubber__evt {
  position: absolute;
  width: 2px; transform: translateX(-50%);
  background: var(--fg-faint);
  pointer-events: none; opacity: 0.55;
}
.det-scrubber .scrubber__evt[data-cat="exec"] { background: var(--lane-exec); top: 22%; height: 56%; }
.det-scrubber .scrubber__evt[data-cat="net"]  { background: var(--lane-net); top: 30%; height: 40%; opacity: 0.7; }
.det-scrubber .scrubber__evt[data-cat="fs"]   { background: var(--lane-fs); top: 36%; height: 28%; }
.det-scrubber .scrubber__evt[data-cat="flag"] {
  width: 3px; top: 12%; height: 76%;
  background: var(--lane-flag);
  box-shadow: 0 0 6px rgba(196,71,58,.55);
  opacity: 1; cursor: pointer; pointer-events: auto;
}
.det-scrubber .scrubber__evt[data-cat="flag"]::before {
  content: ""; position: absolute;
  top: -3px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lane-flag); box-shadow: 0 0 8px rgba(196,71,58,.6);
}
.det-scrubber .scrubber__playhead {
  position: absolute; top: -6px; bottom: -6px;
  width: 2px; background: var(--hot);
  box-shadow: 0 0 12px rgba(255,46,136,.7), 0 0 4px rgba(255,46,136,1);
  transform: translateX(-50%); pointer-events: none; z-index: 5;
}
.det-scrubber .scrubber__playhead::before, .det-scrubber .scrubber__playhead::after {
  content:""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--hot);
  box-shadow: 0 0 12px rgba(255,46,136,.65);
}
.det-scrubber .scrubber__playhead::before { top: -7px; }
.det-scrubber .scrubber__playhead::after { bottom: -7px; }
.det-scrubber .scrubber__axis {
  position: relative; height: 18px; margin-top: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--fg-muted);
}
.det-scrubber .scrubber__axis span { position: absolute; top: 0; transform: translateX(-50%); }
.det-scrubber .scrubber__axis .start { transform: translateX(0); left: 0; }
.det-scrubber .scrubber__axis .end { transform: translateX(-100%); right: 0; left: auto; }
.det-scrubber .scrubber__flagtip {
  position: absolute; bottom: calc(100% + 12px);
  transform: translateX(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--sev-mal-border);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: var(--font-mono); font-size: 11px;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  pointer-events: none;
  color: var(--fg-primary);
}
.det-scrubber .scrubber__flagtip strong { color: var(--brand-navy); font-weight: 600; }
.det-scrubber .scrubber__flagtip .t { color: var(--hot); margin-right: 8px; }

@media (max-width: 900px) {
  .det-view .panels, .det-view .panels--equal { grid-template-columns: 1fr; }
  .det-view .narrative { grid-template-columns: 1fr; }
  .det-view .narrative__divider { display: none; }
  .det-view .verdict { grid-template-columns: 1fr; }
  .det-view .verdict__actions { justify-content: flex-start; }
}

/* Hide the waitlist popup whenever the cyber-analyst detonation view
   is on the page — it overlays the sticky scrubber. The popup uses
   role="dialog" + aria-label="Join waitlist" (LandingScreen.jsx). */
body:has(.det-view) [role="dialog"][aria-label="Join waitlist"] { display: none !important; }
.det-view ~ [role="dialog"][aria-label="Join waitlist"] { display: none !important; }

/* ============== PLAYER TOGGLE (opt-in scrubber) ==============
   The sticky scrubber takes the entire bottom of the viewport on every
   scan page. Most visitors are reading the verdict, not playing back
   syscalls. We default the player to hidden and show a small pill that
   the visitor clicks to reveal it. State persists per-browser. */
.player-toggle {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 26; /* above the .det-scrubber (z-25) when both are present */
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border-strong, #C9C4B5);
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--fg-primary);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  transition: background-color 120ms, border-color 120ms, transform 120ms;
}
.player-toggle:hover {
  background: var(--fg-primary);
  color: #fff;
  border-color: var(--fg-primary);
  transform: translateY(-1px);
}
/* When the scrubber is OPEN, the hide pill needs to clear the scrubber's
   ~96px height so it doesn't overlap the play controls. */
.player-toggle--hide {
  bottom: 110px;
  padding: 6px 12px;
  font-size: 11.5px;
  background: rgba(255,255,255,0.85);
  border-color: var(--border-subtle, #E4E1D8);
  color: var(--fg-secondary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.player-toggle--hide:hover {
  background: var(--bg-inset, #F0EDE5);
  color: var(--fg-primary);
  border-color: var(--border-strong, #C9C4B5);
  transform: none;
}
@media (max-width: 640px) {
  .player-toggle--show {
    right: 12px;
    bottom: 12px;
    padding: 8px 12px;
    font-size: 12px;
  }
  .player-toggle--hide {
    right: 12px;
    bottom: 96px;
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* === phone-narrow breakpoint === */
@media (max-width: 640px) {
  .det-view {
    padding: 16px 12px 200px;
    margin: -20px -16px 0;
    background-image: none; /* drop the radial washes — too busy on phone */
  }
  .det-view .verdict { padding: 16px 0 16px; gap: 14px; margin-bottom: 18px; }
  .det-view .verdict::before { display: none; }
  .det-view .verdict__pkg { font-size: 22px; line-height: 1.2; word-break: break-all; }
  .det-view .verdict__sub { font-size: 11.5px; gap: 8px; }
  /* Separator stays — without it, the run-on subtitle reads as one phrase
     'npm · linux x64 4 flagged events 3.0s' with no field boundaries.
     Render lighter and smaller on phone instead of hiding. */
  .det-view .verdict__sub .sep { color: var(--border-subtle); font-size: 10px; }
  .det-view .pill-verdict { font-size: 12px; padding: 8px 12px 8px 10px; }

  .det-view .narrative { padding: 4px 0 16px; gap: 16px; margin-bottom: 18px; }
  /* Drop the italic-serif quote treatment on phone — at 17px it reads
     theatrical, not editorial. Switch to a clean sans paragraph that
     matches the rest of the body copy on mobile. */
  .det-view .narrative__behavior {
    font-family: var(--font-sans);
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    color: var(--fg-primary);
    letter-spacing: -0.005em;
  }
  .det-view .narrative__enriched { font-size: 14px; }

  .det-view .panels { gap: 12px; margin-bottom: 12px; }
  /* Panel header on phone: stack title (row 1) + sub-stats + chevron (row 2)
     so 'ATTACK PATH · PROCESS TREE 10 processes · 1 flagged ▼ collapse' no
     longer overflows past the viewport edge. */
  .det-view .panel__head {
    padding: 12px 14px; flex-wrap: wrap; gap: 6px 10px;
  }
  .det-view .panel__title {
    font-size: 10px; letter-spacing: 0.14em;
    flex: 0 0 100%; min-width: 0; line-height: 1.4;
  }
  .det-view .panel__sub { font-size: 10px; }
  .det-view .panel__chev { margin-left: auto; }
  .det-view .panel__body { padding: 12px; min-height: 240px; }
  .det-view .tree-canvas, .det-view .netmap, .det-view .timeline { height: 320px; }
  /* Tree canvas on mobile: ensure SVG scales to viewport, no horizontal
     overflow. preserveAspectRatio xMidYMid meet already handles fit, but the
     parent panel was clipping at the wrong axis. */
  .det-view .panel__body--canvas { overflow: hidden; }
  /* EVIDENCE / EVENT LOG / SCRUBBER headers on mobile: same wrap behavior */
  .det-view .evlog__head, .det-view .evidence__head {
    flex-wrap: wrap; gap: 8px;
  }
  .det-view .evlog__head h3, .det-view .evidence__head h3 {
    flex: 0 0 100%; font-size: 10.5px;
  }
  .det-view .evlog__counts { margin-left: 0; flex-wrap: wrap; gap: 4px; }
  .det-view .evlog__count { font-size: 9.5px; padding: 2px 6px; }
  .det-view .evlog__filter { margin-left: 0; }
  .det-view .evlog__chev { margin-left: auto; }

  /* Evidence tables go horizontally scrollable instead of clipping */
  .det-view .evidence__pane { padding: 12px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .det-view .etable { min-width: 480px; font-size: 11.5px; }
  .det-view .etable thead th { padding: 6px 8px; }
  .det-view .etable tbody td { padding: 7px 8px; }
  .det-view .evidence__head { padding: 12px 14px; }
  .det-view .evidence__head h3 { font-size: 11px; }

  .det-view .histo__row { grid-template-columns: 92px 1fr 50px; font-size: 11.5px; }
  .det-view .histo__name { word-break: break-all; }

  /* Hover cards lose pointer-events on touch — also clip to viewport */
  .det-view .tree-hover, .det-view .netmap-hover {
    width: calc(100vw - 24px); left: 12px !important; right: 12px;
  }

  /* Scrubber rebuilds for phone: stack readout rows, simpler controls */
  .det-scrubber { padding: 10px 12px 12px; }
  .det-scrubber .scrubber__readout {
    grid-template-columns: auto 1fr auto;
    grid-template-areas: "t event ctrls" "speed speed speed";
    gap: 8px 10px;
    padding-bottom: 8px;
    font-size: 11.5px;
  }
  .det-scrubber .scrubber__t { grid-area: t; font-size: 13px; min-width: 50px; }
  .det-scrubber .scrubber__event { grid-area: event; font-size: 11px; gap: 6px; }
  .det-scrubber .scrubber__event .target { display: none; } /* trims overflow */
  .det-scrubber .scrubber__ctrls { grid-area: ctrls; gap: 2px; }
  .det-scrubber .scrubber__ctrl { width: 32px; height: 32px; }
  .det-scrubber .scrubber__ctrl--play { width: 36px; height: 36px; }
  .det-scrubber .scrubber__speed { grid-area: speed; justify-self: start; }
  .det-scrubber .scrubber__speed button { padding: 4px 8px; font-size: 11px; }
  .det-scrubber .scrubber__track { height: 44px; }
  .det-scrubber .scrubber__axis { font-size: 9px; }

  /* Advisories panel: stack rows on tiny screens */
  .det-view .advisories-row { grid-template-columns: 1fr !important; }
}

/* ---------- EventLog ---------- */
/* Chronological event list panel. Click row to seek, click header to collapse. */
.det-view .evlog {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: 12px; margin: 16px 0; overflow: hidden;
}
.det-view .evlog__head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-raised);
}
.det-view .evlog__head h3 {
  font-family: var(--font-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-primary);
  margin: 0; display: flex; align-items: center; gap: 8px;
}
.det-view .evlog__head h3 .corner {
  width: 8px; height: 8px; background: var(--hot); border-radius: 1px;
}
.det-view .evlog__sub {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
  letter-spacing: 0.04em;
}
.det-view .evlog__chev {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-muted);
}
.det-view .evlog__body { max-height: 520px; overflow-y: auto; }
.det-view .evlog__rows { display: flex; flex-direction: column; }
.det-view .evlog__row {
  display: grid; grid-template-columns: 70px 80px 1fr 1.6fr 1fr auto;
  gap: 14px; padding: 8px 18px; align-items: center;
  font-family: var(--font-mono); font-size: 12px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; transition: background 120ms;
}
.det-view .evlog__row:hover { background: var(--bg-raised); }
.det-view .evlog__row[data-current="true"] {
  background: rgba(196, 71, 58, 0.08); box-shadow: inset 3px 0 0 var(--hot);
}
.det-view .evlog__row[data-flag="true"] {
  background: #FEF8F7;
}
.det-view .evlog__row[data-flag="true"]:hover { background: #FDF2F0; }
.det-view .evlog__row[data-cat="meta"] {
  cursor: default; font-style: italic; color: var(--fg-muted);
  background: var(--bg-raised);
}
/* Phase boundary BARS: full-width, strong-colored bands that visually
   chop the timeline into pre / install / post sections. NOT a text row —
   a banner. Breaks out of the grid (display:block) to span edge-to-edge. */
.det-view .evlog__row[data-divider="true"] {
  display: block !important;
  background: var(--bg-inset);
  color: var(--fg-primary);
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  font-style: normal;
  padding: 12px 16px;
  margin: 14px 0 10px;
  border: 1px solid var(--border-subtle);
  border-left: 4px solid var(--border-strong);
  border-radius: 4px;
  cursor: default;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
/* Per-phase left-border accent — distinguishes phases without screaming
   off-palette fills. All bars use --bg-inset body (set above); only the
   left stripe differs. Pre/post are amber (lifecycle scripts CAN do nasty
   things); install body is neutral; runtime-import is green (the package
   successfully reached import time without poisoning install). */
.det-view .evlog__row[data-divider="true"][data-stage="pre"]     { border-left-color: var(--sev-sus); }
.det-view .evlog__row[data-divider="true"][data-stage="install"] { border-left-color: var(--border-strong); }
.det-view .evlog__row[data-divider="true"][data-stage="post"]    { border-left-color: var(--sev-sus); }
.det-view .evlog__row[data-divider="true"][data-stage="runtime"] { border-left-color: var(--sev-clean); }
/* Inside the divider banner, hide the grid sub-cells and show ONLY the
   label so the bar reads as a clean single-line title. */
.det-view .evlog__row[data-divider="true"] > .evlog__t,
.det-view .evlog__row[data-divider="true"] > .evlog__cat,
.det-view .evlog__row[data-divider="true"] > .evlog__target,
.det-view .evlog__row[data-divider="true"] > .evlog__proc { display: none !important; }
.det-view .evlog__row[data-divider="true"] > .evlog__label { display: block; color: inherit; font-weight: inherit; }
.det-view .evlog__t {
  color: var(--fg-muted); font-variant-numeric: tabular-nums;
}
.det-view .evlog__cat {
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
  font-weight: 700; padding: 2px 8px; border-radius: 3px;
  text-align: center; white-space: nowrap;
}
.det-view .evlog__label { color: var(--fg-primary); font-weight: 500; }
.det-view .evlog__target {
  color: var(--fg-secondary); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
/* Folded target: when the action label already names the protocol
   ("dns lookup", "https request"), render the IP/host as a tiny
   muted hint — the popover (portal-rendered GlossaryHint) reveals
   the full value on hover. */
.det-view .evlog__target--folded { font-size: 10.5px; opacity: 0.55; }
.det-view .evlog__target--folded:hover { opacity: 1; }
.det-view .evlog__proc { color: var(--fg-muted); font-size: 11px; }
.det-view .evlog__dep {
  font-size: 11px; padding: 2px 8px; border-radius: 3px;
  background: #FBE0DC; color: #9B2C20;
  border: 1px solid #E8B4AE; font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 768px) {
  /* Compact mobile EventLog: 2-row card, NOT 5-row stack. Row 1 shows
     timestamp + cat + label. Row 2 shows everything else inline. */
  .det-view .evlog__row {
    grid-template-columns: 56px auto 1fr;
    gap: 4px 8px; padding: 6px 12px;
    font-size: 11.5px;
  }
  .det-view .evlog__t { font-size: 10px; }
  .det-view .evlog__cat { font-size: 9px; padding: 1px 5px; }
  .det-view .evlog__label { font-size: 12px; }
  .det-view .evlog__target {
    grid-column: 1 / -1; padding-left: 64px;
    font-size: 10.5px; color: var(--fg-secondary);
    margin-top: -2px;
  }
  .det-view .evlog__proc {
    grid-column: 1 / -1; padding-left: 64px;
    font-size: 10px;
    /* Inline with the dep chip on row 3 */
    display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center;
  }
  .det-view .evlog__dep {
    /* Inline next to proc — not on its own full-width row */
    grid-column: 1 / -1; padding-left: 64px;
    font-size: 10px; padding: 1px 6px;
    align-self: flex-start; justify-self: start;
    display: inline-block; width: auto; max-width: max-content;
  }
  .det-view .evlog__group-badge { font-size: 8.5px; padding: 0 4px; }
  .det-view .evlog__row--child { padding-left: 28px !important; }
  .det-view .evlog__row--child .evlog__target,
  .det-view .evlog__row--child .evlog__proc,
  .det-view .evlog__row--child .evlog__dep { padding-left: 56px; }
}

/* EventLog: filter button + per-source dep colors */
.det-view .evlog__filter {
  margin-left: 12px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 3px;
  background: var(--bg-surface); color: var(--fg-secondary);
  border: 1px solid var(--border-subtle); cursor: pointer;
}
.det-view .evlog__filter[data-active="true"] {
  background: var(--sev-mal-bg); color: var(--sev-mal-ink);
  border-color: var(--sev-mal-border);
}
/* Free-text search box that filters event-log rows by substring across
   target / proc / label / dep / pid. Sized so it never visually competes
   with the cat-filter chips next to it. */
.det-view .evlog__search {
  margin-left: 12px;
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 10px; border-radius: 3px;
  background: var(--bg-surface); color: var(--fg-primary);
  border: 1px solid var(--border-subtle);
  outline: none;
  width: 200px;
  transition: border-color 120ms;
}
.det-view .evlog__search:focus {
  border-color: var(--brand-navy, #1E5BD9);
}
.det-view .evlog__search::placeholder { color: var(--fg-muted); }
/* dep chip varies subtly by source so an analyst can tell the difference
   between "we saw this dep raise a real flag" vs "we inferred it from the
   process-tree path". Both useful, slightly different confidence. */
.det-view .evlog__dep[data-source="flag"] { background: #FBE0DC; }
.det-view .evlog__dep[data-source="tree"] { background: #F0EBE9; color: #6B4540; border-color: #DCC6C2; }

/* Glossary hint — wraps a recognized path/proc/syscall/ip token in the
   event log. We show the SHORT LABEL as the primary text + the raw token
   (path/name/etc) as a muted suffix, then on hover a CSS popover shows
   the full detail. CSS popover opens instantly (no native-title 1s delay)
   and matches site typography. */
.det-view .gloss {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 6px;
  cursor: help;
  border-bottom: 1px dotted var(--border-strong);
  padding: 0 1px;
}
.det-view .gloss__label {
  font-weight: 500; color: var(--fg-default);
}
.det-view .gloss__raw {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted);
  opacity: 0.85;
}
/* Severity color hint on the label */
.det-view .gloss[data-severity="notable"] .gloss__label { color: #B25500; }
.det-view .gloss[data-severity="sensitive"] .gloss__label { color: #C4473A; }

/* Popover — portal-rendered, position:fixed (set inline by GlossaryHint).
   Lives at document.body level so it ESCAPES every overflow:auto/hidden
   ancestor (event-log body, panel scroll, modal). The .det-view scoping
   would otherwise leave it un-styled when portaled, so the .gloss__pop
   block here is INTENTIONALLY un-scoped. */
.gloss__pop {
  min-width: 260px; max-width: 380px;
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: #FAF7F2; color: #1F2937;
  border: 1px solid #C9C1B5;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  z-index: 9999;
  white-space: normal;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  font-size: 12px; line-height: 1.45;
  pointer-events: none;
}
/* Child rules un-scoped from .det-view because the popover lives in
   document.body via React portal — .det-view selector wouldn't reach it. */
.gloss__pop-head { font-weight: 600; font-size: 12.5px; color: #1F2937; }
.gloss__pop-key {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 11px; color: #6B7486;
  word-break: break-all;
}
.gloss__pop-body { color: #1F2937; }
.gloss__pop-ref {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  font-size: 10.5px; color: #B45309; text-decoration: none; margin-top: 2px;
  pointer-events: auto;
}
.gloss__pop-ref:hover { text-decoration: underline; }
.gloss__pop[data-severity="sensitive"] {
  border-color: #DCC6C2;
  box-shadow: 0 12px 28px rgba(196,71,58,.22);
}
.gloss__pop[data-severity="notable"] {
  border-color: #E6CF7A;
}

/* Per-panel collapse chevron */
.det-view .panel__chev {
  font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-muted);
  letter-spacing: 0.04em; cursor: pointer; padding: 4px 8px; border-radius: 3px;
  margin-left: auto; user-select: none;
}
.det-view .panel__chev:hover { background: var(--bg-raised); color: var(--fg-primary); }

/* EventLog summary chips in header */
.det-view .evlog__counts { display: flex; gap: 6px; margin-left: 14px; }
.det-view .evlog__count {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 3px;
  background: var(--bg-surface); color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
}
.det-view .evlog__count[data-cat="exec"] { background: var(--cat-exec-bg); color: var(--cat-exec); border-color: var(--cat-exec-border); }
.det-view .evlog__count[data-cat="net"]  { background: var(--cat-net-bg);  color: var(--cat-net);  border-color: var(--cat-net-border); }
.det-view .evlog__count[data-cat="fs"]   { background: var(--cat-fs-bg);   color: var(--cat-fs);   border-color: var(--cat-fs-border); }
.det-view .evlog__count[data-cat="mem"]  { background: var(--cat-mem-bg);  color: var(--cat-mem);  border-color: var(--cat-mem-border); }
.det-view .evlog__count[data-cat="fd"]   { background: var(--cat-fd-bg);   color: var(--cat-fd);   border-color: var(--cat-fd-border); }
.det-view .evlog__count[data-cat="flag"] { background: var(--cat-flag-bg); color: var(--cat-flag); border-color: var(--cat-flag-border); }

/* EventLog row grouping: a group parent shows a "×N" badge and an arrow.
   Click to expand/collapse the run of identical events inline. */
.det-view .evlog__row[data-group="true"] {
  background: var(--bg-raised);
  font-weight: 500;
}
.det-view .evlog__row[data-group="true"]:hover {
  background: var(--bg-inset);
}
.det-view .evlog__group-badge {
  display: inline-block; margin-left: 6px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--hot); color: #fff;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em;
}
.det-view .evlog__group-arrow {
  display: inline-block; margin-right: 6px;
  color: var(--fg-muted); font-size: 10px;
}
.det-view .evlog__row--child {
  background: var(--bg-page); padding-left: 32px;
  font-size: 11.5px; opacity: 0.85;
  border-bottom: 1px dashed var(--border-subtle);
}
.det-view .evlog__row--child .evlog__t { color: var(--fg-muted); }

/* ---------- Mobile process tree ----------
   Vertical depth-indented list. Replaces the SVG horizontal tree on phone
   widths — the SVG was scaling text down to ~4px on a 343 column. */
.det-view .tree-mobile {
  padding: 8px 10px; display: flex; flex-direction: column; gap: 0;
  background: var(--bg-surface);
  font-family: var(--font-mono);
}
.det-view .tree-mobile__row {
  display: flex; gap: 6px; align-items: center;
  padding: 7px 10px; border-radius: 0;
  background: transparent; border: none;
  border-left: 2px solid var(--border-subtle);
  position: relative;
  opacity: 0.40;
  transition: opacity 160ms, background 160ms;
}
.det-view .tree-mobile__row[data-chain="true"] { opacity: 1; border-left-color: #C4473A; }
.det-view .tree-mobile__row[data-flagged="true"] {
  background: #FDF2F0;
  border-left: 3px solid #C4473A;
  border-radius: 4px;
  margin: 4px 0;
  padding: 9px 12px;
}
.det-view .tree-mobile__row[data-hover="true"] { background: var(--bg-raised); }
/* Drop the └─ connector — the indent + colored left border already
   communicates depth. The character was rendering doubled at narrow widths
   and reading as visual noise. */
.det-view .tree-mobile__connector { display: none; }
.det-view .tree-mobile__main { flex: 1 1 auto; min-width: 0; }
.det-view .tree-mobile__label {
  display: flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--fg-primary);
  word-break: break-all; line-height: 1.3;
}
.det-view .tree-mobile__row[data-flagged="true"] .tree-mobile__label {
  color: #9B2C20;
}
.det-view .tree-mobile__bullet {
  width: 8px; height: 8px; border-radius: 50%;
  background: #F0455C; box-shadow: 0 0 6px rgba(240,69,92,.6);
  flex-shrink: 0;
}
.det-view .tree-mobile__meta {
  font-size: 10.5px; color: var(--fg-muted); margin-top: 1px;
}
.det-view .tree-mobile__pins {
  display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap;
}
.det-view .tree-mobile__pin {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 2px; color: #fff;
}
.det-view .tree-mobile__dep {
  display: inline-block; margin-top: 6px;
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 3px;
  background: #FBE0DC; color: #9B2C20;
  border: 1px solid #E8B4AE;
}

/* Mobile scrubber phase legend: short labels so 8% wide bands don't truncate */
@media (max-width: 768px) {
  .det-scrubber .scrubber__phases { font-size: 8.5px; height: 16px; }
  .det-scrubber .scrubber__phases .phase span { padding: 0 3px; overflow: hidden; }
  .det-scrubber .scrubber__phases .phase--pre span::before { content: "PRE"; }
  .det-scrubber .scrubber__phases .phase--pre span { font-size: 0; }
  .det-scrubber .scrubber__phases .phase--pre span::before { font-size: 8.5px; }
  .det-scrubber .scrubber__phases .phase--post span::before { content: "POST"; }
  .det-scrubber .scrubber__phases .phase--post span { font-size: 0; }
  .det-scrubber .scrubber__phases .phase--post span::before { font-size: 8.5px; }
  .det-scrubber .scrubber__phases .phase--import span::before { content: "IMP"; }
  .det-scrubber .scrubber__phases .phase--import span { font-size: 0; }
  .det-scrubber .scrubber__phases .phase--import span::before { font-size: 8.5px; }
  /* PACKAGE INSTALL stays — middle band is wide enough */
}

/* Mobile EventLog header — let the count chips wrap to a second row instead
   of overflowing past viewport. */
@media (max-width: 768px) {
  .det-view .evlog__counts { gap: 3px; flex: 0 0 100%; margin-left: 0; }
  .det-view .evlog__count { font-size: 8.5px; padding: 1px 5px; letter-spacing: 0.04em; }
  .det-view .evlog__filter { font-size: 9.5px; padding: 3px 8px; }
}

/* Mobile process tree: step-numbered action chips per node */
.det-view .tree-mobile__steps {
  display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap;
}
.det-view .tree-mobile__step {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px; border-radius: 3px;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700;
  border: 1px solid transparent;
}
.det-view .tree-mobile__step--fs   { background: #F0EBE3; color: #5C5C5C; }
.det-view .tree-mobile__step--exec { background: #FFF1B8; color: #7A4F00; }
.det-view .tree-mobile__step--net  { background: #D4E5F7; color: #0F4A8C; }
.det-view .tree-mobile__step--flag { background: #FBD9D4; color: #7E1F18; }
.det-view .tree-mobile__step--more { background: #E5E2DC; color: #5C5C5C; }
.det-view .tree-mobile__step--latest {
  border-color: #C4473A;
  box-shadow: 0 0 4px rgba(196,71,58,.35);
}
.det-view .tree-mobile__step-icon { font-size: 10px; line-height: 1; }
.det-view .tree-mobile__step-num { font-size: 9px; }

/* Pid filter chip in panel/EventLog header */
.det-view .panel__filter,
.det-view .evlog__pidfilter {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 3px;
  background: var(--hot); color: #fff;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer; user-select: none;
}
.det-view .panel__filter:hover,
.det-view .evlog__pidfilter:hover {
  background: var(--hot-ink);
}

/* Mobile tree row gets dimmed when pid filter excludes it */
.det-view .tree-mobile__row[data-filtered="true"] {
  opacity: 0.18;
}