/* ECHO module — view-specific styles. Builds on Verity tokens.css +
   components.css. No new palette: brass = interactive, severity = locked,
   sigma ramp = the existing low→mod→high→crit colors. */

/* ---------- brand: title splash + spider ---------- */
.bw-splash{position:fixed;inset:0;z-index:200;background:#070b11;overflow:hidden;
  display:flex;align-items:center;justify-content:center;cursor:pointer;animation:sph-fade .3s ease;}
.bw-splash-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:38px 46px;cursor:default;}
.bw-mark{margin-bottom:10px;animation:bw-breath 4s ease-in-out infinite;}
@keyframes bw-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.bw-word{font-family:var(--display);font-weight:700;font-size:46px;letter-spacing:.14em;color:var(--t-hi);
  text-shadow:0 0 28px rgba(217,179,106,.25);}
.bw-sub{font-family:var(--display);font-weight:400;font-size:15px;color:var(--accent);letter-spacing:.05em;margin-top:8px;}
.bw-rule{width:60px;height:2px;background:var(--accent);margin:20px 0 14px;opacity:.8;}
.bw-tag{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--t-lo);}
@media (prefers-reduced-motion: reduce){.bw-mark{animation:none;}.bw-splash{animation:none;}}

/* ---------- topbar replay clock ---------- */
.replay-clock{display:flex;align-items:center;gap:9px;font-size:11.5px;color:var(--t-mid);
  border:1px solid var(--line-mid);border-radius:20px;padding:4px 12px;white-space:nowrap;}
.replay-clock .rc-time{font-family:var(--mono);font-feature-settings:"tnum" 1,"zero" 1;color:var(--t-hi);font-size:12.5px;letter-spacing:.02em;}
.replay-clock .rc-speed{color:var(--accent);font-family:var(--mono);font-size:11px;}
.module-tag{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);border:1px solid var(--accent-dim);border-radius:4px;padding:2px 7px;}

/* ---------- generic directed empty state ---------- */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:40px;text-align:center;color:var(--t-lo);}
.empty .eg{width:46px;height:46px;border-radius:50%;border:1px dashed var(--line-bright);
  display:flex;align-items:center;justify-content:center;color:var(--t-faint);}
.empty .et{font-size:13.5px;color:var(--t-mid);max-width:380px;line-height:1.5;}
.empty .eh{font-size:12px;color:var(--t-lo);max-width:360px;}

/* ============================================================
   1 · OVERVIEW — the graph instrument
   ============================================================ */
.echo-overview{flex:1;display:flex;flex-direction:column;min-height:0;}
.graph-stage{flex:1;position:relative;min-height:0;background:
  radial-gradient(120% 90% at 62% 30%,#0d1822,#070b11 78%);overflow:hidden;}
.graph-stage svg.gwrap,
.cascade-stage svg.gwrap{position:absolute;inset:0;width:100%;height:100%;}
.gedge{stroke:var(--line-bright);transition:stroke-opacity .25s;}
.gnode-c{cursor:pointer;transition:filter .15s;}
.gnode-c:hover circle.body{filter:brightness(1.15);}
.gnode-c circle.halo{fill:none;}
.gnode-c text.gl{font-family:var(--sans);font-size:13px;fill:var(--t-mid);}
.gnode-c.hot text.gl{fill:var(--t-hi);font-weight:600;}
.gnode-c.sel circle.body{stroke:var(--accent);stroke-width:3;}
.gnode-c.sel circle.ring{stroke:var(--accent);stroke-opacity:.5;}

/* quiet legend */
.g-legend{position:absolute;top:13px;right:14px;z-index:6;padding:11px 13px;min-width:188px;}
.g-legend .lg-row{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--t-mid);margin:6px 0;}
.g-legend .lg-row:first-of-type{margin-top:2px;}
.g-ramp{width:54px;height:9px;border-radius:5px;flex-shrink:0;
  background:linear-gradient(90deg,#3B82F6,#EAB308,#F97316,#EF4444);}
.g-sizes{display:flex;align-items:center;gap:4px;}
.g-sizes i{display:inline-block;border-radius:50%;background:var(--t-lo);}
.g-haloicon{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--accent);flex-shrink:0;
  box-shadow:0 0 0 2px rgba(217,179,106,.18);}

.pane-tag2{position:absolute;top:12px;left:15px;z-index:6;}

/* node inspector card on selection */
.g-inspect{position:absolute;z-index:8;width:236px;background:rgba(14,22,33,.96);
  backdrop-filter:blur(8px);border:1px solid var(--line-mid);border-radius:var(--r-md);
  box-shadow:var(--sh-pop);padding:13px 14px;animation:sph-fade .16s ease;}
.g-inspect .gi-name{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em;}
.g-inspect .gi-meta{display:flex;gap:6px;align-items:center;margin:7px 0 11px;flex-wrap:wrap;}
.g-inspect .gi-stat{display:flex;justify-content:space-between;font-size:11.5px;color:var(--t-mid);padding:3px 0;}
.g-inspect .gi-stat b{font-family:var(--mono);color:var(--t-hi);font-weight:500;white-space:nowrap;}
.g-inspect .gi-act{display:flex;gap:7px;margin-top:11px;}

/* ---------- replay scrubber ---------- */
.scrubber{flex-shrink:0;background:var(--deep);border-top:1px solid var(--line-mid);
  padding:13px 20px 15px;display:flex;flex-direction:column;gap:9px;}
.scrub-top{display:flex;align-items:center;gap:14px;}
.scrub-play{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-mid);
  background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;transition:.14s;font-size:13px;}
.scrub-play:hover{box-shadow:0 0 16px var(--accent-glow);}
.scrub-play.paused{background:var(--elevated);color:var(--t-hi);}
.scrub-meta{display:flex;align-items:baseline;gap:10px;}
.scrub-meta .sm-clock{font-family:var(--display);font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--t-hi);}
.scrub-meta .sm-win{font-family:var(--mono);font-size:11px;color:var(--t-lo);}
.scrub-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.speed-seg{display:flex;gap:2px;background:var(--surface);border:1px solid var(--line-mid);border-radius:var(--r-sm);padding:2px;}
.speed-seg span{font-family:var(--mono);font-size:11px;padding:3px 9px;border-radius:4px;cursor:pointer;color:var(--t-mid);transition:.12s;}
.speed-seg span.on{background:var(--accent);color:var(--on-accent);font-weight:600;}
.scrub-track{position:relative;height:30px;cursor:pointer;display:flex;align-items:center;}
.scrub-rail{position:absolute;left:0;right:0;height:5px;border-radius:3px;background:var(--elevated);overflow:visible;}
.scrub-fill{position:absolute;left:0;height:5px;border-radius:3px;background:var(--accent);}
.scrub-head{position:absolute;top:50%;width:15px;height:15px;border-radius:50%;background:var(--accent);
  border:3px solid var(--deep);transform:translate(-50%,-50%);box-shadow:0 0 0 1px var(--accent),0 1px 4px rgba(0,0,0,.5);}
.scrub-tick{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;transform:translate(-50%,-50%);
  border:1.5px solid var(--deep);cursor:pointer;z-index:2;}
.scrub-tick .stt{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:9px;color:var(--t-lo);opacity:0;transition:.12s;pointer-events:none;}
.scrub-tick:hover .stt{opacity:1;}

/* responsive ranked table fallback */
.rank-table{flex:1;overflow:auto;padding:14px 18px;}
.rank-table table{width:100%;border-collapse:collapse;}
.rank-table th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--t-lo);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-mid);font-weight:500;}
.rank-table td{padding:10px;border-bottom:1px solid var(--line);font-size:13px;}
.rank-table tr{cursor:pointer;transition:.12s;}
.rank-table tbody tr:hover{background:var(--panel);}

/* ============================================================
   2 · ALERT QUEUE
   ============================================================ */
.queue-scroll{flex:1;overflow:auto;padding:16px 20px 28px;}
.queue-head{display:flex;align-items:flex-end;gap:14px;max-width:1180px;margin:0 auto 12px;}
.queue-head .qh-note{font-size:12px;color:var(--t-lo);max-width:520px;line-height:1.5;}
.q-list{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:9px;}
.q-row{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;
  padding:13px 15px;transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .15s,opacity .3s;}
.q-row:hover{border-color:var(--line-mid);}
.q-row.resolved{opacity:.4;}
.q-rank{font-family:var(--display);font-size:22px;font-weight:600;color:var(--t-lo);text-align:center;line-height:1;}
.q-rank.top{color:var(--accent);}
.q-main{min-width:0;cursor:pointer;}
.q-ent{display:flex;align-items:center;gap:9px;margin-bottom:5px;}
.q-ent .qe-name{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:-.01em;}
.q-ent .qe-type{font-family:var(--mono);font-size:10.5px;color:var(--t-lo);}
.q-metrics{display:flex;gap:18px;flex-wrap:wrap;}
.q-metric{display:flex;flex-direction:column;gap:1px;}
.q-metric .qm-l{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-lo);}
.q-metric .qm-v{font-family:var(--mono);font-size:14px;color:var(--t-hi);font-feature-settings:"tnum" 1;}
.q-metric .qm-v.cons{color:var(--accent);}
.q-metric .qm-v.sev{font-weight:600;}
.q-evidence{font-size:11.5px;color:var(--t-mid);margin-top:8px;line-height:1.45;max-width:640px;}
.q-evidence b{color:var(--t-hi);font-weight:500;}
.q-actions{display:flex;flex-direction:column;gap:7px;align-items:stretch;min-width:136px;}
.q-actions .qa-time{font-family:var(--mono);font-size:10px;color:var(--t-lo);text-align:right;margin-bottom:1px;}
.btn-threat{font-family:var(--sans);font-size:12.5px;font-weight:600;border-radius:var(--r-sm);padding:7px 12px;
  border:1px solid var(--crit-line);background:var(--crit-fill);color:#fda4a4;cursor:pointer;transition:.14s;white-space:nowrap;}
.btn-threat:hover{background:rgba(239,68,68,.22);color:#fff;}
.btn-benign{font-family:var(--sans);font-size:12.5px;font-weight:500;border-radius:var(--r-sm);padding:7px 12px;
  border:1px solid var(--line-mid);background:var(--elevated);color:var(--t-mid);cursor:pointer;transition:.14s;white-space:nowrap;}
.btn-benign:hover{background:var(--hover);color:var(--t-hi);}
.verdict-stamp{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;padding:7px;border-radius:var(--r-sm);}
.verdict-stamp.threat{color:var(--crit);border:1px solid var(--crit-line);background:var(--crit-fill);}
.verdict-stamp.benign{color:var(--t-lo);border:1px solid var(--line-mid);}
.recalib{display:flex;align-items:center;gap:8px;max-width:1180px;margin:0 auto 12px;font-size:11.5px;color:var(--accent);
  font-family:var(--mono);background:var(--accent-glow);border:1px solid var(--accent-dim);border-radius:var(--r-sm);padding:8px 12px;}

/* ============================================================
   3 · ENTITY DETAIL
   ============================================================ */
.detail-scroll{flex:1;overflow:auto;padding:20px 26px 30px;}
.detail-wrap{max-width:1180px;margin:0 auto;}
.detail-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;}
.detail-head .dh-name{font-family:var(--display);font-size:24px;font-weight:600;letter-spacing:-.015em;}
.detail-head .dh-meta{display:flex;gap:7px;align-items:center;margin-top:7px;flex-wrap:wrap;}
.detail-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start;}
.d-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:16px 18px;}
.d-card.full{grid-column:span 2;}
.d-card .dc-h{display:flex;align-items:center;gap:10px;margin-bottom:13px;}
.d-card .dc-h .dc-r{margin-left:auto;}

/* forecast envelope chart */
.fc-chart{position:relative;}
.fc-band{fill:rgba(179,169,151,0.09);}
.fc-mean{fill:none;stroke:var(--t-faint);stroke-width:1.4;stroke-dasharray:5 4;}
.fc-obs{fill:none;stroke:var(--accent);stroke-width:2.2;}
.fc-breach{fill:none;stroke:var(--crit);stroke-width:2.6;}
.fc-axis{font-family:var(--mono);font-size:9.5px;fill:var(--t-lo);}
.fc-gridline{stroke:var(--line);stroke-width:1;}
.breach-flag{position:absolute;font-family:var(--mono);font-size:10px;color:var(--crit);
  background:var(--crit-fill);border:1px solid var(--crit-line);border-radius:4px;padding:3px 7px;white-space:nowrap;}

/* contributing events evidence list */
.ev-list{display:flex;flex-direction:column;}
.ev-item{display:grid;grid-template-columns:auto 1fr;gap:11px;padding:11px 0;border-bottom:1px solid var(--line);}
.ev-item:last-child{border-bottom:0;}
.ev-rail{display:flex;flex-direction:column;align-items:center;gap:4px;padding-top:3px;}
.ev-rail .ev-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent-glow);}
.ev-rail .ev-line{flex:1;width:1px;background:var(--line-mid);}
.ev-text{font-size:13px;color:var(--t-hi);line-height:1.5;}
.ev-text .ev-mono{font-family:var(--mono);color:var(--accent);}

/* peer comparison strip */
.peer-strip{margin-top:10px;}
.peer-scale{position:relative;height:46px;margin:10px 0 6px;}
.peer-axis{position:absolute;left:0;right:0;top:30px;height:1px;background:var(--line-mid);}
.peer-dot{position:absolute;top:30px;width:10px;height:10px;border-radius:50%;transform:translate(-50%,-50%);
  border:1.5px solid var(--deep);}
.peer-dot.self{width:16px;height:16px;box-shadow:0 0 0 4px var(--accent-glow);z-index:2;border-color:var(--accent);}
.peer-dot .pd-l{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--mono);font-size:9px;color:var(--t-mid);}

/* ============================================================
   4 · CASCADE VIEW
   ============================================================ */
.cascade-wrap{flex:1;display:flex;min-height:0;}
.cascade-stage{flex:1;position:relative;min-width:0;background:
  radial-gradient(120% 90% at 45% 40%,#0d1822,#070b11 78%);overflow:hidden;}
.cascade-node circle.body{transition:fill .4s,opacity .4s;}
.cascade-node text.gl{font-family:var(--sans);font-size:12.5px;fill:var(--t-mid);}
.cascade-node.dim text.gl{fill:var(--t-faint);}
.cascade-node.hv circle.body{stroke:#fff;stroke-width:2.5;}
.cascade-node.seed circle.body{stroke:var(--accent);stroke-width:3;}
.hv-tag{font-family:var(--mono);font-size:8px;letter-spacing:.05em;fill:#fff;}
.cascade-side{width:340px;flex-shrink:0;background:var(--deep);border-left:1px solid var(--line-mid);
  display:flex;flex-direction:column;overflow:auto;}
.cs-pad{padding:16px 17px;display:flex;flex-direction:column;gap:18px;}
.cs-headline{font-size:14.5px;line-height:1.55;color:var(--t-hi);}
.cs-headline b{color:var(--accent);font-family:var(--mono);font-weight:600;}
.cs-headline .hv{color:var(--crit);font-weight:600;}
.hist{display:flex;align-items:flex-end;gap:6px;height:120px;margin-top:6px;}
.hist-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;justify-content:flex-end;height:100%;}
.hist-bar .hb-fill{width:100%;background:linear-gradient(180deg,var(--accent),var(--accent-dim));border-radius:3px 3px 0 0;
  transition:height .4s cubic-bezier(.2,.7,.2,1);min-height:2px;}
.hist-bar .hb-l{font-family:var(--mono);font-size:9px;color:var(--t-lo);}
.hist-bar .hb-c{font-family:var(--mono);font-size:9px;color:var(--t-mid);}
.hv-hit{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line);}
.hv-hit:last-child{border-bottom:0;}
.hv-hit .hh-bar{flex:1;}
.reach-leg{position:absolute;bottom:14px;left:15px;z-index:6;padding:10px 12px;}
.reach-grad{width:120px;height:9px;border-radius:5px;
  background:linear-gradient(90deg,rgba(217,179,106,.12),var(--accent));}

/* ============================================================
   5 · VALIDATION REVEAL
   ============================================================ */
.val-scroll{flex:1;overflow:auto;padding:22px 28px 32px;}
.val-wrap{max-width:1180px;margin:0 auto;}
.val-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.val-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:16px 18px;}
.val-stat .vs-l{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t-lo);}
.val-stat .vs-v{font-family:var(--display);font-size:34px;font-weight:600;line-height:1.1;margin-top:6px;letter-spacing:-.01em;}
.val-stat .vs-sub{font-size:11px;color:var(--t-mid);margin-top:3px;}
.val-stat .vs-v.good{color:var(--good);}

.val-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);padding:18px 20px;margin-bottom:16px;}
.tl{position:relative;margin:26px 0 6px;}
.tl-axis{position:relative;height:1px;background:var(--line-mid);margin:0 8px;}
.tl-ticks{display:flex;justify-content:space-between;margin:7px 8px 0;}
.tl-ticks span{font-family:var(--mono);font-size:9.5px;color:var(--t-lo);}
.tl-rowlabel{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--t-lo);margin:0 0 8px;}
.tl-row{position:relative;height:30px;margin:0 8px;}
.tl-mark{position:absolute;top:50%;transform:translate(-50%,-50%);}
.tl-truth{width:11px;height:11px;border-radius:2px;background:#fff;opacity:.85;}
.tl-truth.missed{background:transparent;border:1.5px solid var(--crit);}
.tl-det{width:11px;height:11px;border-radius:50%;background:var(--good);}
.tl-det.fp{background:var(--mod);}
.tl-link{position:absolute;top:0;border-left:1px dashed var(--line-bright);height:54px;}
.tl-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;}
.tl-legend span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t-mid);}
.tl-legend i{width:11px;height:11px;flex-shrink:0;}

/* ---------- responsive: 13" laptop down to <1024 ---------- */
@media (max-width:1180px){
  .detail-grid{grid-template-columns:1fr;}
  .d-card.full{grid-column:span 1;}
  .val-stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:1024px){
  .cascade-side{width:300px;}
  .q-row{grid-template-columns:30px 1fr;}
  .q-actions{grid-column:2;flex-direction:row;flex-wrap:wrap;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .livedot{animation:none!important;}
  .q-row{transition:none!important;}
  .gnode-c,.gedge,.cascade-node circle.body,.hist-bar .hb-fill,.scrub-fill,.scrub-head{transition:none!important;}
  .g-inspect{animation:none!important;}
}

/* keyboard focus visibility */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px;}
.scrub-track:focus-visible,.q-main:focus-visible{outline-offset:4px;}