/* Narrative-Evolution Tracker — dark dense analyst-tool aesthetic */
:root {
  --bg:        #0a0c10;
  --bg-1:      #11141b;
  --bg-2:      #171b24;
  --bg-3:      #1d222d;
  --line:      #262c39;
  --line-2:    #323a4b;
  --fg:        #d7dde8;
  --fg-dim:    #8b94a7;
  --fg-mute:   #5b6478;
  --accent:    #4fd1c5;
  --accent-2:  #7aa2f7;
  --warn:      #e0af68;
  --err:       #f7768e;
  --ok:        #9ece6a;
  --favor:     #4fae6b;
  --against:   #d65a6e;
  --neutral:   #7a8398;
  --mono: "SFMono-Regular", "JetBrains Mono", "Consolas", "Menlo", monospace;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rail-w: 290px;
  --panel-w: 320px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.muted { color: var(--fg-mute); font-size: 11.5px; }
.sub { color: var(--fg-mute); font-weight: 400; font-size: 10.5px; }
.hint { color: var(--fg-mute); font-size: 10.5px; margin: 2px 0 0; line-height: 1.35; }

#app {
  display: grid;
  /* rail full-height on the left; main on top; detail panel as a BOTTOM bar
     under the main area. */
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) var(--panel-h, 250px);
  grid-template-areas:
    "rail main"
    "rail panel";
  height: 100vh;
}
#rail { grid-area: rail; }
#main { grid-area: main; }
#panel { grid-area: panel; }
/* bottom bar stays open at all times; shows a prompt until a bubble is picked */

/* ── scrollbars ── */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; }
*::-webkit-scrollbar-thumb:hover { background: #44506a; }

/* ── left rail ── */
#rail {
  background: var(--bg-1);
  border-right: 1px solid var(--line);
  overflow-y: auto;
  padding: 0 12px 24px;
  display: flex;
  flex-direction: column;
}
.rail-head {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-1);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 2px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}
.brand { font: 700 11px/1 var(--mono); letter-spacing: .12em; color: var(--accent); }
.health-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--fg-mute); }
.health-dot.ok  { background: var(--ok);  box-shadow: 0 0 6px var(--ok); }
.health-dot.bad { background: var(--err); box-shadow: 0 0 6px var(--err); }

.rail-block { padding: 9px 0; border-bottom: 1px solid var(--line); }
.rail-block:last-child { border-bottom: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }

.fld { display: block; font-size: 10.5px; color: var(--fg-dim); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .03em; }
.fld:last-child { margin-bottom: 0; }
.fld.num { margin-bottom: 0; }
input[type=text], input[type=number], textarea, select {
  width: 100%; margin-top: 4px;
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  color: var(--fg);
  border-radius: 4px;
  padding: 5px 7px;
  font: 12px/1.4 var(--mono);
}
textarea { resize: vertical; font-size: 11.5px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent-2); }
input[type=range] { width: 100%; margin-top: 6px; accent-color: var(--accent); }

.chk-row { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg); cursor: pointer; padding: 2px 0; text-transform: none; letter-spacing: 0; }
.chk-row input { width: auto; margin: 0; accent-color: var(--accent); }

details > summary { cursor: pointer; font: 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); padding: 2px 0 8px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "▸ "; color: var(--fg-mute); }
details[open] > summary::before { content: "▾ "; }

.seg { display: inline-flex; gap: 0; margin: 4px 0 4px; border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
.seg-btn { background: var(--bg-2); color: var(--fg-dim); border: 0; padding: 3px 10px; font: 10px var(--mono); cursor: pointer; }
.seg-btn.active { background: var(--accent); color: #06231f; }

.run-btn {
  width: 100%; margin-top: 12px;
  background: var(--accent); color: #06231f;
  border: 0; border-radius: 4px;
  padding: 9px; font: 700 12px/1 var(--mono); letter-spacing: .08em;
  cursor: pointer;
}
.run-btn:hover { background: #5ee0d4; }
.run-btn:disabled { background: var(--line-2); color: var(--fg-mute); cursor: default; }
.run-error { margin-top: 8px; color: var(--err); font-size: 11px; background: rgba(247,118,142,.08); border: 1px solid rgba(247,118,142,.3); border-radius: 4px; padding: 6px 8px; }

.live-head { font: 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-dim); margin-bottom: 7px; }
.live-stage { font-size: 12px; color: var(--accent-2); margin-bottom: 5px; text-transform: capitalize; }
.bar { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; }
.bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .4s ease; }
.live-msg { font-size: 10px; color: var(--fg-mute); margin-top: 5px; word-break: break-word; }
.noise-strip { display: flex; gap: 1px; height: 18px; margin-top: 8px; align-items: flex-end; }
.noise-cell { flex: 1; background: var(--warn); min-width: 2px; border-radius: 1px 1px 0 0; opacity: .85; }

.runs-list { display: flex; flex-direction: column; gap: 4px; max-height: 230px; overflow-y: auto; }
.run-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 6px; align-items: center;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px;
  padding: 6px 8px; cursor: pointer; font-size: 11px;
}
.run-item:hover { border-color: var(--line-2); background: var(--bg-3); }
.run-item.active { border-color: var(--accent); }
.run-id { font: 11px var(--mono); color: var(--fg-dim); }
.run-meta { color: var(--fg-mute); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-badge { font: 9.5px var(--mono); padding: 1px 5px; border-radius: 3px; letter-spacing: .04em; text-transform: uppercase; }
.run-badge.done    { background: rgba(158,206,106,.15); color: var(--ok); }
.run-badge.running { background: rgba(122,162,247,.15); color: var(--accent-2); }
.run-badge.queued  { background: rgba(224,175,104,.15); color: var(--warn); }
.run-badge.error   { background: rgba(247,118,142,.15); color: var(--err); }

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.stat { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; }
.stat .k { font-size: 9.5px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .04em; }
.stat .v { font: 16px var(--mono); color: var(--fg); margin-top: 2px; }

/* ── main column ── */
#main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.tabs { display: flex; gap: 2px; background: var(--bg-1); border-bottom: 1px solid var(--line); padding: 0 10px; }
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--fg-dim); padding: 11px 16px; cursor: pointer;
  font: 11.5px/1 var(--mono); letter-spacing: .04em;
}
.tab:hover { color: var(--fg); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

#views { position: relative; flex: 1; min-height: 0; min-width: 0; }
.view { position: absolute; inset: 0; display: none; overflow: hidden; }
.view.active { display: block; }

.view-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--line);
  background: var(--bg-1); min-height: 38px;
}
.view-toolbar .ttl { font: 11px var(--mono); color: var(--fg-dim); letter-spacing: .05em; text-transform: uppercase; }
.view-toolbar .spacer { flex: 1; }
.btn {
  background: var(--bg-3); border: 1px solid var(--line-2); color: var(--fg);
  border-radius: 4px; padding: 4px 10px; font: 11px var(--mono); cursor: pointer;
}
.btn:hover { border-color: var(--accent-2); }
.btn.primary { background: var(--accent-2); color: #07142e; border-color: var(--accent-2); }

.view-canvas { position: absolute; top: 39px; left: 0; right: 0; bottom: 0; overflow: auto; }
.view-canvas.noscroll { overflow: hidden; }

.empty-state {
  display: flex; align-items: center; justify-content: center; height: 100%;
  color: var(--fg-mute); font-size: 13px; flex-direction: column; gap: 8px;
}
.empty-state .big { font-size: 22px; color: var(--fg-dim); }

/* legends */
.legend { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.legend .li { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--fg-dim); }
.legend .sw { width: 11px; height: 11px; border-radius: 2px; }

/* svg shared */
.axis text { fill: var(--fg-mute); font: 10px var(--mono); }
.axis path, .axis line { stroke: var(--line); }
.gridline { stroke: var(--line); stroke-dasharray: 2 3; opacity: .5; }
.dimmed { opacity: .14 !important; }
.selected-stroke { stroke: #fff !important; stroke-width: 1.6px !important; }

/* tooltip */
#nt-tip {
  position: fixed; z-index: 999; pointer-events: none;
  background: #05070b; border: 1px solid var(--line-2);
  color: var(--fg); font: 11px/1.4 var(--mono);
  padding: 6px 9px; border-radius: 5px; max-width: 280px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5); opacity: 0; transition: opacity .08s;
}
#nt-tip .t-title { color: var(--accent); margin-bottom: 3px; }
#nt-tip .t-row { color: var(--fg-dim); }

/* ── right panel ── */
#panel { background: var(--bg-1); border-left: 1px solid var(--line); overflow-y: auto; }
.panel-empty { color: var(--fg-mute); font-size: 12px; padding: 24px 16px; line-height: 1.6; }
.panel-hd { position: sticky; top: 0; background: var(--bg-1); border-bottom: 1px solid var(--line); padding: 14px 14px 12px; z-index: 4; }
.panel-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: middle; }
.panel-label { font-size: 14px; font-weight: 600; color: var(--fg); line-height: 1.3; }
.panel-status { display: inline-block; margin-top: 6px; font: 9.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 3px; background: var(--bg-3); color: var(--fg-dim); }
.panel-status.active { color: var(--ok); }
.panel-status.died, .panel-status.dead, .panel-status.dissipated { color: var(--err); }
.panel-status.alive, .panel-status.active, .panel-status.continuing { color: var(--ok); }
.panel-flag { display: inline-block; margin-top: 6px; margin-left: 6px; font: 9.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 3px; background: rgba(229,177,77,0.15); color: #e5b14d; border: 1px solid rgba(229,177,77,0.35); cursor: help; }
.panel-flag-lowcoh { background: rgba(122,162,247,0.15); color: var(--accent-2); border-color: rgba(122,162,247,0.35); }
.panel-watch-btn { display: inline-block; margin-top: 6px; margin-left: 6px; font: 9.5px var(--mono); text-transform: uppercase; letter-spacing: .05em; padding: 2px 8px; border-radius: 3px; background: var(--bg-3); color: var(--fg-dim); border: 1px solid var(--line-2); cursor: pointer; }
.panel-watch-btn:hover { border-color: var(--accent); color: var(--fg); }
.panel-watch-btn.on { background: rgba(79,209,197,0.15); color: var(--accent); border-color: rgba(79,209,197,0.45); }
.panel-watch-btn:disabled { opacity: 0.55; cursor: default; }
.panel-sec { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel-sec h4 { margin: 0 0 8px; font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); }
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.kv { background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px; }
.kv .k { font-size: 9px; color: var(--fg-mute); text-transform: uppercase; letter-spacing: .04em; }
.kv .v { font: 15px var(--mono); color: var(--fg); margin-top: 2px; }
.spark-wrap { margin-top: 4px; }
.spark-cap { font-size: 9.5px; color: var(--fg-mute); margin-bottom: 3px; }
.doc-list { display: flex; flex-direction: column; gap: 6px; }
.doc { display: block; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 7px 9px; text-decoration: none; }
.doc:hover { border-color: var(--accent-2); }
.doc .dt { font-size: 11.5px; color: var(--fg); line-height: 1.35; }
.doc .dm { font-size: 9.5px; color: var(--fg-mute); margin-top: 3px; display: flex; gap: 8px; }
.doc .dm .mono { color: var(--accent-2); }
.stance-bar { display: flex; height: 16px; border-radius: 3px; overflow: hidden; margin: 4px 0 8px; background: var(--bg-3); }
.stance-bar > div { height: 100%; }
.stance-bar .s-favor { background: var(--favor); }
.stance-bar .s-against { background: var(--against); }
.stance-bar .s-neutral { background: var(--neutral); }
.stance-leg { display: flex; gap: 12px; font-size: 10px; color: var(--fg-dim); }
.role-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.role-tag { font: 10px var(--mono); background: var(--bg-3); border: 1px solid var(--line-2); border-radius: 10px; padding: 2px 8px; color: var(--fg-dim); }

/* plotly dark tweaks */
.js-plotly-plot .plotly .modebar { background: transparent !important; }

/* ─────────────────────────────────────────────────────────────
   v2 additions: graph view (sigma), tuning strip, legend, events
   ───────────────────────────────────────────────────────────── */

/* range value badge in the rail */
.rng-val, output.mono { float: right; color: var(--accent); font-size: 11px; font-family: var(--mono); }
.chk-row.inline { display: inline-flex; padding: 0; }

/* graph toolbar (top control bar) */
.graph-toolbar { gap: 10px; }
#g-play {
  min-width: 34px; text-align: center; font-size: 12px;
  background: var(--bg-3); color: var(--fg);
}
#g-play.playing { background: var(--accent); color: #06231f; border-color: var(--accent); }
.g-scrub { flex: 1 1 200px; max-width: 360px; margin: 0; accent-color: var(--accent-2); }
.g-ts { color: var(--fg-dim); font-size: 11px; min-width: 168px; }
.g-speed { font-size: 10.5px; color: var(--fg-dim); display: flex; align-items: center; gap: 5px; }
.g-speed select {
  width: auto; margin: 0; padding: 2px 4px; font: 10.5px var(--mono);
  background: var(--bg-2); border: 1px solid var(--line-2); color: var(--fg); border-radius: 4px;
}
.btn.xs { padding: 2px 7px; font-size: 10px; }

/* the sigma canvas host */
#g-canvas { background:
  radial-gradient(circle at 50% 42%, #0d1017 0%, var(--bg) 78%);
}
#g-canvas canvas { outline: none; }

/* live-tuning strip pinned bottom-left over the canvas */
.g-tune {
  position: absolute; left: 12px; bottom: 12px; z-index: 6;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: rgba(10,12,16,0.82); backdrop-filter: blur(6px);
  border: 1px solid var(--line-2); border-radius: 6px;
  padding: 8px 12px; max-width: calc(100% - 24px);
}
.tune-fld {
  display: flex; flex-direction: column; gap: 2px;
  font: 9.5px var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--fg-dim);
  min-width: 132px;
}
.tune-fld input[type=range] { width: 132px; margin: 3px 0 0; accent-color: var(--accent); }
.tune-fld output { float: none; }
.tune-note { font-size: 9.5px; color: var(--fg-mute); font-style: italic; max-width: 200px; line-height: 1.3; }

/* legend pinned bottom-right over the canvas */
.g-legend {
  position: absolute; right: 12px; bottom: 12px; z-index: 6;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end;
  background: rgba(10,12,16,0.82); backdrop-filter: blur(6px);
  border: 1px solid var(--line-2); border-radius: 6px;
  padding: 7px 11px; max-width: 58%;
}
.g-legend .li { font-size: 10px; color: var(--fg-dim); display: flex; align-items: center; gap: 5px; }
.g-legend .sw { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; }
.g-legend .sw.ring { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px currentColor; }
.g-legend .li-sep { width: 1px; height: 16px; background: var(--line-2); }
.g-legend .edge-solid { width: 16px; height: 0; border-top: 2px solid rgba(120,134,160,0.7); }
.g-legend .edge-dash { width: 16px; height: 0; border-top: 2px dashed rgba(122,162,247,0.7); }

/* small color dot used in the inspector */
.dot-sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

/* lifecycle event list in inspector */
.evt-list { display: flex; flex-direction: column; gap: 4px; }
.evt { display: flex; align-items: center; gap: 8px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; }
.evt-k { font: 10px var(--mono); text-transform: uppercase; letter-spacing: .04em; padding: 1px 6px; border-radius: 3px; }
.evt-t { color: var(--fg-mute); font: 10px var(--mono); margin-left: auto; }
.evt-birth    .evt-k { background: rgba(158,206,106,.15); color: var(--ok); }
.evt-continue .evt-k { background: rgba(122,162,247,.15); color: var(--accent-2); }
.evt-merge    .evt-k { background: rgba(224,175,104,.15); color: var(--warn); }
.evt-split    .evt-k { background: rgba(187,154,247,.15); color: #bb9af7; }
.evt-death    .evt-k { background: rgba(247,118,142,.15); color: var(--err); }

/* keep the canvas a clean WebGL surface (no scrollbars over it) */
.view-canvas.noscroll { overflow: hidden; position: absolute; }

/* ── graph label-type toggles ── */
.g-labels { display:inline-flex; align-items:center; gap:8px; padding:0 8px;
  border-left:1px solid var(--border,#222a38); border-right:1px solid var(--border,#222a38);
  margin:0 6px; font-size:11px; }
.g-labels .lbl-cap { color:var(--fg-mute,#7b8496); text-transform:uppercase; letter-spacing:.04em; }
.g-labels .chk-row.inline { font-size:11px; white-space:nowrap; }
.role-tag.ent-person   { border-color:#f7768e; }
.role-tag.ent-org      { border-color:#7aa2f7; }
.role-tag.ent-location { border-color:#9ece6a; }

/* ── alluvial top-N selector (legacy, kept for back-compat) ── */
.al-topn { font-size:11px; color:var(--fg-mute,#7b8496); display:inline-flex; align-items:center; gap:5px; }
.al-topn select { background:#11151c; color:#cdd3df; border:1px solid var(--border,#222a38);
  border-radius:4px; padding:1px 4px; font-size:11px; font-family:var(--mono),monospace; }

/* ═════════════════════════════════════════════════════════════════
   v3 — Narrative Bubble Board
   ═════════════════════════════════════════════════════════════════ */

/* board toolbar (scrubber lives here) */
.board-toolbar { gap: 10px; }
#b-play {
  min-width: 32px; text-align: center; font-size: 12px;
  background: var(--bg-3); color: var(--fg);
}
#b-play.playing { background: var(--accent); color: #06231f; border-color: var(--accent); }
.board-updated { color: var(--fg-mute); font-size: 10.5px; }

/* sentiment abs/Δ toggle (reuses .seg / .seg-btn) */
.board-sent-seg { margin: 0; }
.board-sent-seg .seg-btn { padding: 3px 9px; }

/* compact staleness / health status strip */
.board-status { font: 10.5px var(--mono); color: var(--fg-dim); display: inline-flex; align-items: center; gap: 0; white-space: nowrap; }
.board-status .bs-sep { color: var(--fg-mute); }
.board-status.st-ok    .bs-fresh { color: var(--fg-dim); }
.board-status.st-amber .bs-fresh { color: var(--warn); }
.board-status.st-red   .bs-fresh { color: var(--err); }
.board-status .bs-dead { color: var(--err); cursor: help; }
.board-status .bs-runerr { color: var(--err); cursor: help; }

/* the bubble canvas */
.board-canvas {
  background: radial-gradient(circle at 50% 44%, #0d1017 0%, var(--bg) 80%);
}
.board-svg { display: block; }
.board-svg text.blabel { user-select: none; }
.board-svg text.bwarn { fill: var(--warn); }
.board-svg text.bwarn.warn-lowcoh { fill: var(--accent-2); }
.board-svg .ring-novelty { filter: drop-shadow(0 0 2px rgba(34,211,238,0.55)); }

/* watched marker — small bright accent dot at the top of the bubble */
.board-svg circle.watch-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1; }

/* velocity pulse — subtle glow on accelerating subjects */
.board-svg g.bub.vel-pulse circle.fill {
  animation: vel-pulse 1.6s ease-in-out infinite;
}
@keyframes vel-pulse {
  0%, 100% { stroke: rgba(0,0,0,0.35); filter: none; }
  50%      { stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(79,209,197,0.55)); }
}
@media (prefers-reduced-motion: reduce) {
  .board-svg g.bub.vel-pulse circle.fill { animation: none; }
}

/* low-cohesion muting — desaturated, dimmer label */
.board-svg g.bub.low-coh circle.fill { filter: saturate(0.45); }
.board-svg g.bub.low-coh text.blabel { fill: var(--fg-mute) !important; }

/* "updated" pulse on live-swap */
.board-canvas.pulse::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--accent);
  animation: board-pulse 1.1s ease-out 1;
}
@keyframes board-pulse {
  0%   { opacity: 0.9; }
  100% { opacity: 0; }
}

.board-empty .big { color: var(--fg-dim); }

/* board legend (reuses .g-legend) */
.board-legend .sw.ring { box-shadow: 0 0 0 1.5px var(--bg), 0 0 0 2.5px currentColor; }

/* lifecycle gantt */
.lc-svg .lc-bar { transition: stroke .12s; }
.lc-svg text.lc-label { pointer-events: none; }

/* entity bridge badge inside the detail panel */
.role-tag .brg {
  margin-left: 5px; padding: 0 5px; border-radius: 8px;
  background: rgba(122,162,247,0.2); color: var(--accent-2);
  font-size: 9px;
}

/* ── detail panel as a BOTTOM BAR (was right column) ── */
:root { --panel-h: 250px; }
#panel {
  border-left: none;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
/* lay the panel content out as a horizontal row of cards that scrolls sideways */
#panel-body {
  display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch;
  height: 100%; overflow-x: auto; overflow-y: hidden;
}
#panel-body.hidden { display: none; }
#panel-body > .panel-hd {
  position: static; top: auto; border-bottom: none; border-right: 1px solid var(--line);
  flex: 0 0 auto; min-width: 190px; max-width: 280px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
#panel-body > .panel-sec {
  border-bottom: none; border-right: 1px solid var(--line);
  flex: 0 0 auto; min-width: 210px; max-width: 380px; overflow-y: auto;
}
#panel-body > .panel-sec:last-child { border-right: none; }
/* the documents card gets a bit more room and scrolls internally */
#panel-body > .panel-sec:has(.doc-list) { min-width: 300px; max-width: 460px; }
.panel-empty { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 16px; }

/* combined header+KPI column in the bottom bar (label above the KPI grid) */
#panel-body > .panel-col {
  flex: 0 0 auto; min-width: 230px; max-width: 320px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto;
}
#panel-body > .panel-col > .panel-hd { position: static; border-right: none; border-bottom: 1px solid var(--line); max-width: none; }
#panel-body > .panel-col > .panel-sec { border-right: none; }

/* Terms card: fill the remaining bottom-bar width and wrap freely (no scroll) */
#panel-body > .panel-sec-terms {
  flex: 1 1 auto; min-width: 280px; max-width: none; overflow: hidden;
  display: flex; flex-direction: column;
}
#panel-body > .panel-sec-terms .role-tags { align-content: flex-start; overflow: hidden; }

/* ── make the bottom bar FIT: cards shrink to share the width, no h-scroll ── */
#panel-body { overflow-x: hidden; }
#panel-body > .panel-col,
#panel-body > .panel-sec {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
}
#panel-body > .panel-sec:has(.doc-list) { flex-grow: 1.5; }      /* headlines need room */
#panel-body > .panel-sec-terms { flex-grow: 1.4; }               /* terms cascade */

/* ═════════════════════════════════════════════════════════════════
   Lines view — narrative trajectories over time (PRIMARY tab)
   ═════════════════════════════════════════════════════════════════ */

/* toolbar: Y-metric segmented control + gradient-source toggle + status */
.ln-toolbar { gap: 8px; }
.ln-toolbar .ln-yseg-cap { text-transform: uppercase; letter-spacing: .06em; font-size: 9.5px; }
.ln-toolbar .seg { margin: 0; }
.ln-yseg .seg-btn { padding: 3px 9px; }
.ln-gradseg .seg-btn { padding: 3px 8px; }
.ln-reset { padding: 2px 8px; font-size: 10px; }
.ln-legend { margin-left: 4px; }
.ln-leg-diamond {
  width: 9px; height: 9px; transform: rotate(45deg);
  background: var(--accent, #22d3ee);
  box-shadow: 0 0 3px rgba(34,211,238,0.6);
  display: inline-block;
}
.ln-status { margin-left: 4px; }

/* canvas surface — same subtle radial as the board */
.ln-canvas {
  background: radial-gradient(circle at 50% 44%, #0d1017 0%, var(--bg) 82%);
}
.ln-svg { display: block; }

/* zero baseline for the sentiment metric */
.ln-svg .ln-zero { stroke: var(--line-2); stroke-dasharray: 3 3; opacity: .7; }

/* haze lines — faint grey spaghetti (no label, no gradient) */
.ln-svg .ln-hazeline { transition: opacity .12s; }
.ln-svg .ln-hazeline:hover { opacity: .5 !important; stroke: var(--fg-dim); }

/* promoted gradient lines */
.ln-svg .ln-line { transition: stroke-width .12s, filter .12s; }
.ln-svg .ln-line:hover { stroke-width: 3; filter: drop-shadow(0 0 3px rgba(0,0,0,0.6)); }
.ln-svg .ln-line.sel { stroke-width: 3.2; filter: drop-shadow(0 0 4px rgba(255,255,255,0.35)); }

/* novelty-spike diamonds / death dots */
.ln-svg .ln-spike { filter: drop-shadow(0 0 2px rgba(34,211,238,0.55)); }
.ln-svg .ln-death { filter: drop-shadow(0 0 2px rgba(247,118,142,0.5)); }

/* merge = amber converging, split = violet diverging (dashed) */
.ln-svg .ln-connector { stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .75; pointer-events: none; }
.ln-svg .ln-connector.ln-merge { stroke: var(--warn); }
.ln-svg .ln-connector.ln-split { stroke: #bb9af7; }

/* direct right-end labels */
.ln-svg .ln-endlabel text {
  font: 15px var(--mono); font-variant-numeric: tabular-nums;
  paint-order: stroke; stroke: rgba(5,7,11,0.85); stroke-width: 2.6px;
}
.ln-svg .ln-endlabel:hover text { text-decoration: underline; }
.ln-svg .ln-endlabel.sel text { font-weight: 700; }

/* hover crosshair */
.ln-svg .ln-cross-rule { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 3; opacity: .8; pointer-events: none; }
.ln-svg .ln-cross-dot { pointer-events: none; stroke: var(--bg); stroke-width: 1; }

/* d3 brush chrome to match the dark theme */
.ln-svg .ln-brush .selection { fill: rgba(122,162,247,0.12); stroke: var(--accent-2); stroke-opacity: .6; }
.ln-svg .ln-brush .handle { fill: var(--accent-2); fill-opacity: .5; }
.ln-svg .ln-brush .overlay { cursor: crosshair; }

/* ── v3: two-tier labels, anchor badges, watchlist, label queue ────────── */

/* Tier-1 anchor label shown under a Tier-2 statement — the named actors stay
   visible even when a generated sentence leads. */
.panel-sublabel {
  font-size: 11px; color: var(--fg-mute); margin: 2px 0 0 16px;
  letter-spacing: .01em;
}
.panel-labelmeta { font-size: 10.5px; padding-top: 2px; }
.panel-summary {
  font-size: 12px; line-height: 1.45; color: var(--fg-dim, var(--fg-mute));
  max-width: 62ch;
}
.panel-flag-anchor {
  background: transparent; border: 1px solid var(--line-2, var(--fg-mute));
  color: var(--fg-mute); border-radius: 3px; padding: 1px 5px;
  font: 500 10px/1.5 var(--mono); text-transform: lowercase; margin-left: 6px;
}

/* label-queue depth on the status strip — informational, never an error state,
   since Tier-1 labels are already on screen while the queue drains. */
.bs-queue { color: var(--accent-2); }

/* a line named by a generated statement reads as prose, not as a key */
.ln-lbl-tier2 { font-style: normal; letter-spacing: .002em; }