:root {
  --bg: #080b11;
  --panel: #0d1119;
  --panel2: #111722;
  --panel3: #171e2a;
  --line: #202a38;
  --line2: #18212d;
  --text: #d9e0e6;
  --soft: #8a97a5;
  --faint: #53606e;
  --cyan: #5ce1e6;
  --cyan-soft: rgba(92,225,230,.12);
  --amber: #ffb454;
  --amber-soft: rgba(255,180,84,.12);
  --magenta: #ee78c5;
  --magenta-soft: rgba(238,120,197,.12);
  --green: #68d89b;
  --red: #f17475;
  --red-soft: rgba(241,116,117,.12);
  --mono: "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --serif: "Iowan Old Style", Georgia, serif;
  --top: 46px;
  --chrono: 94px;
  --status: 24px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); }
body { font: 12px/1.45 var(--sans); }
button, input { font: inherit; }
button { color: inherit; }
kbd {
  font: 8px var(--mono); color: #7e8b99; border: 1px solid #2c3746; border-bottom-color: #3b4756;
  background: #101620; border-radius: 2px; padding: 1px 4px;
}
::selection { background: rgba(92,225,230,.25); }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-thumb { background: #253140; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

#app { width: 100vw; height: 100vh; display: grid; grid-template-rows: var(--top) var(--chrono) minmax(0, 1fr) var(--status); }

/* ── cockpit header ───────────────────────────────────────────── */
#topbar {
  display: flex; align-items: center; gap: 10px; padding: 0 13px;
  border-bottom: 1px solid var(--line); background: #0a0e15; min-width: 0;
}
.brand-mark { width: 24px; height: 24px; position: relative; border: 1px solid #2d3c4c; transform: rotate(45deg); }
.brand-mark i, .brand-mark span { position: absolute; display: block; background: var(--cyan); box-shadow: 0 0 9px rgba(92,225,230,.7); }
.brand-mark i { width: 10px; height: 2px; top: 10px; left: 6px; }
.brand-mark span { height: 10px; width: 2px; top: 6px; left: 10px; }
.brand { font: 650 11px var(--mono); letter-spacing: .08em; color: #b8c2cb; }
.brand b { color: var(--cyan); font-weight: 650; }
.board-id { color: var(--faint); font: 9px var(--mono); border-left: 1px solid var(--line); padding-left: 10px; }
.top-spacer { flex: 1; }
.top-command, .presence-pill {
  height: 27px; border: 1px solid var(--line); background: #0d121b; color: #718090;
  font: 8.5px var(--mono); letter-spacing: .05em; cursor: pointer; padding: 0 8px;
}
.top-command:hover, .presence-pill:hover { border-color: #3a495b; color: #b9c4ce; background: #111824; }
.top-command kbd { margin-right: 5px; }
.presence-pill { display: flex; align-items: center; gap: 8px; }
.presence-dots { display: flex; padding-left: 4px; }
.presence-dots i {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  margin-left: -5px; border-radius: 50%; border: 1px solid #334255; background: #17202b;
  color: #aab6c1; font: 650 7px var(--mono); font-style: normal;
}
.presence-dots i:nth-child(1) { border-color: rgba(92,225,230,.55); color: var(--cyan); }
.presence-dots i:nth-child(2) { border-color: rgba(238,120,197,.5); color: var(--magenta); }
.presence-dots i:nth-child(3) { border-color: rgba(255,180,84,.5); color: var(--amber); }
.live-clock { font: 9px var(--mono); color: #627080; width: 70px; text-align: right; }

/* ── seq-time ruler ───────────────────────────────────────────── */
#chronobar {
  display: grid; grid-template-columns: 232px 29px 32px 29px minmax(240px, 1fr) 88px;
  align-items: center; gap: 4px; padding: 0 13px; border-bottom: 1px solid #2a3544;
  background: linear-gradient(180deg, #0d121b, #0a0e15);
}
.chrono-readout { display: grid; grid-template-columns: 44px 67px 1fr; align-items: baseline; gap: 5px; }
.chrono-mode { color: var(--faint); font: 7.5px var(--mono); letter-spacing: .12em; }
.chrono-readout b { color: var(--cyan); font: 650 13px var(--mono); text-shadow: 0 0 12px rgba(92,225,230,.45); }
.chrono-readout #time-label { color: #6f7e8d; font: 8px var(--mono); white-space: nowrap; }
.transport {
  width: 28px; height: 28px; padding: 0; border: 1px solid #273341; background: #101720;
  color: #8392a2; cursor: pointer; font: 18px/1 var(--sans);
}
.transport.play { width: 32px; color: var(--cyan); font-size: 11px; }
.transport:hover { border-color: var(--cyan); color: white; background: var(--cyan-soft); }
#timeline-wrap { height: 68px; position: relative; margin: 0 13px; }
#timeline-phases { position: absolute; top: 4px; left: 0; right: 0; height: 14px; }
#timeline-phases span {
  position: absolute; top: 0; height: 12px; border-top: 1px solid var(--phase); color: var(--phase);
  font: 6.5px var(--mono); letter-spacing: .08em; padding-top: 2px; opacity: .65; overflow: hidden; white-space: nowrap;
}
#timeline-markers { position: absolute; left: 0; right: 0; top: 31px; height: 14px; pointer-events: none; }
.time-marker {
  position: absolute; pointer-events: auto; width: 6px; height: 14px; margin-left: -3px; padding: 0;
  border: 0; border-radius: 0; background: #536274; opacity: .7; cursor: pointer;
}
.time-marker.k-claim { background: var(--cyan); }
.time-marker.k-lead { background: var(--amber); height: 18px; top: -2px; }
.time-marker.k-rule { background: var(--red); }
.time-marker.k-sweep { background: white; }
.time-marker.at { opacity: 1; box-shadow: 0 0 12px currentColor; transform: scaleX(1.6); }
#time-slider {
  --pct: 100%; position: absolute; top: 28px; left: 0; width: 100%; height: 20px; margin: 0;
  appearance: none; background: transparent; cursor: ew-resize; z-index: 2;
}
#time-slider::-webkit-slider-runnable-track {
  height: 2px; background: linear-gradient(90deg, var(--cyan) var(--pct), #273442 var(--pct)); box-shadow: 0 0 7px rgba(92,225,230,.15);
}
#time-slider::-webkit-slider-thumb {
  appearance: none; width: 10px; height: 22px; margin-top: -10px; border: 1px solid var(--cyan);
  border-radius: 0; background: #0b1018; box-shadow: 0 0 10px rgba(92,225,230,.55);
}
#timeline-ticks { position: absolute; left: 0; right: 0; top: 51px; height: 12px; }
#timeline-ticks span { position: absolute; transform: translateX(-50%); color: #43505e; font: 7px var(--mono); }
.live-button {
  height: 28px; border: 1px solid #354251; background: #111720; color: #667585;
  font: 700 8px var(--mono); letter-spacing: .08em; cursor: pointer;
}
.live-button i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #56616e; margin-right: 6px; }
.live-button.live { color: var(--green); border-color: rgba(104,216,155,.35); background: rgba(104,216,155,.07); }
.live-button.live i { background: var(--green); box-shadow: 0 0 10px var(--green); animation: livepulse 1.7s infinite; }

/* ── main instrument ───────────────────────────────────────────── */
#core { display: grid; grid-template-columns: 218px minmax(560px, 1fr) 328px; min-height: 0; }
#lensbar, #opsbar { min-height: 0; background: #0b0f16; }
#lensbar { border-right: 1px solid var(--line); padding: 12px 10px 8px; overflow-y: auto; display: flex; flex-direction: column; }
#lensbar section { border-bottom: 1px solid var(--line2); padding: 0 0 11px; margin-bottom: 11px; }
.rail-title, .eyebrow { color: #566474; font: 700 7px var(--mono); letter-spacing: .12em; }
.rail-title { margin: 0 5px 6px; }
.lens-choice {
  width: 100%; height: 31px; display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 6px;
  border: 0; border-left: 2px solid transparent; background: transparent; color: #718090; text-align: left; cursor: pointer; padding: 0 6px;
}
.lens-choice:hover { background: #111721; color: #b5c0ca; }
.lens-choice.active { border-left-color: var(--cyan); color: #d6e0e7; background: var(--cyan-soft); }
.lens-icon { width: 12px; height: 12px; display: block; position: relative; }
.lens-icon.field { border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 3px #0b0f16; background: currentColor; }
.lens-icon.delta::before, .lens-icon.delta::after { content: ""; position: absolute; width: 8px; height: 8px; border: 1px solid currentColor; }
.lens-icon.delta::after { left: 4px; top: 4px; }
.lens-icon.origins { border-left: 1px solid currentColor; border-right: 3px double currentColor; }
.lens-choice kbd { justify-self: end; }
.focus-section { min-height: 98px; }
#focus-chip { display: grid; grid-template-columns: 10px 1fr auto; gap: 7px; align-items: center; padding: 6px 7px; background: #111721; border: 1px solid #202a37; }
.node-dot { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px currentColor; }
#focus-chip div { display: flex; flex-direction: column; min-width: 0; }
#focus-chip b { color: #cbd4db; font-size: 9.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#focus-chip small { color: #5f6d7b; font: 7px var(--mono); }
#focus-chip button { border: 0; background: none; color: #586574; cursor: pointer; }
.field-control { display: grid; grid-template-columns: 1fr 80px; align-items: center; margin: 8px 6px 0; color: #5e6c79; font: 7px var(--mono); }
.field-control input { width: 80px; accent-color: var(--cyan); }
.grade-key { height: 24px; display: grid; grid-template-columns: 14px 1fr auto; align-items: center; padding: 0 6px; color: #788694; font-size: 9px; }
.grade-key i { width: 9px; height: 2px; display: block; background: #6f8192; }
.grade-key i.reported { background: #77b6f3; }
.grade-key i.hearsay { background: var(--amber); border-top: 1px dashed #0b0f16; }
.grade-key i.rumour { background: transparent; border-top: 2px dashed var(--amber); }
.grade-key i.contested { height: 5px; background: linear-gradient(180deg, var(--red) 0 40%, transparent 40% 60%, var(--cyan) 60%); }
.grade-key b { color: #53616e; font: 8px var(--mono); }
.moments { flex: 1; }
.moment { width: 100%; display: grid; grid-template-columns: 29px 1fr; gap: 7px; align-items: center; padding: 5px 6px; border: 0; border-left: 2px solid transparent; background: transparent; text-align: left; cursor: pointer; }
.moment:hover { background: #101620; }
.moment.current { border-left-color: var(--cyan); background: var(--cyan-soft); }
.moment > span { color: #556372; font: 8px var(--mono); }
.moment div { display: flex; flex-direction: column; }
.moment b { color: #8996a3; font-size: 8.5px; font-weight: 600; }
.moment small { color: #4f5c69; font-size: 7px; }
.lens-actions { display: grid; gap: 5px; margin-top: auto; }
.lens-actions button {
  height: 29px; border: 1px solid #25313e; background: #0f151e; color: #6c7a88;
  font: 700 7.5px var(--mono); letter-spacing: .06em; cursor: pointer;
}
.lens-actions button:hover { border-color: var(--cyan); color: var(--cyan); }
.lens-actions span { color: var(--cyan); margin-left: 5px; }

#stage { display: grid; grid-template-rows: minmax(390px, 1fr) 185px; min-width: 0; min-height: 0; background: var(--bg); }
#field-panel, #log-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#field-panel { border-bottom: 1px solid var(--line); }
.panel-head { height: 42px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 12px; border-bottom: 1px solid var(--line2); background: #0b1018; }
.panel-head > div:first-child { display: flex; flex-direction: column; min-width: 155px; }
.panel-head > div:first-child b { color: #bdc7cf; font-size: 10px; font-weight: 600; }
.state-counts { flex: 1; display: flex; justify-content: flex-end; gap: 12px; color: #566372; font: 7.5px var(--mono); }
.state-counts b { color: #9ba8b3; font-size: 9.5px; margin-right: 2px; }
.state-counts .warn b { color: var(--red); }
.state-counts .loose b { color: var(--amber); }
#fit-field { width: 27px; height: 26px; border: 1px solid var(--line); background: transparent; color: #657381; cursor: pointer; }
#fit-field:hover { color: var(--cyan); border-color: var(--cyan); }
#field-canvas { position: relative; flex: 1; min-height: 0; overflow: hidden; background: radial-gradient(circle at 52% 48%, rgba(36,55,74,.22), transparent 54%), #080b11; }
.field-grid {
  position: absolute; inset: 0; opacity: .25;
  background-image: linear-gradient(rgba(82,108,132,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(82,108,132,.14) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at center, black 20%, transparent 86%);
}
#graph { width: 100%; height: 100%; position: absolute; inset: 0; overflow: visible; }
.graph-edge { cursor: pointer; transition: opacity .25s; }
.graph-edge line:first-of-type { stroke: #4e6274; stroke-width: var(--w); opacity: .7; vector-effect: non-scaling-stroke; transition: stroke .2s, opacity .2s; }
.graph-edge .edge-hit { stroke: transparent; stroke-width: 15; }
.graph-edge:hover line:first-of-type { stroke: white; opacity: 1; }
.graph-edge.tone-corroborated line:first-of-type { stroke: var(--green); }
.graph-edge.tone-reported line:first-of-type { stroke: #77b6f3; }
.graph-edge.tone-hearsay line:first-of-type { stroke: var(--amber); stroke-dasharray: 5 4; }
.graph-edge.tone-rumour line:first-of-type { stroke: var(--amber); stroke-dasharray: 2 6; }
.graph-edge.tone-contested line:first-of-type { stroke: var(--red); stroke-dasharray: 9 3 2 3; }
.graph-edge.quiet { opacity: .13; }
.graph-edge.delta-added line:first-of-type { stroke: var(--cyan); opacity: 1; filter: url(#glow-cyan); }
.edge-spark { fill: var(--cyan); filter: url(#glow-cyan); animation: spark 1.8s infinite; }
.graph-node { cursor: pointer; transition: opacity .25s; }
.graph-node.quiet { opacity: .17; }
.node-core { fill: #111821; stroke: var(--node); stroke-width: 2; transition: stroke-width .2s, fill .2s; }
.node-hit { fill: transparent; }
.graph-node:hover .node-core, .graph-node.selected .node-core { stroke-width: 4; fill: #182331; filter: url(#glow-cyan); }
.graph-node.selected .node-core { stroke: white; }
.unread-halo { fill: none; stroke: var(--amber); stroke-width: 1; stroke-dasharray: 2 5; opacity: .45; animation: halo 10s linear infinite; }
.new-ring { fill: none; stroke: var(--cyan); stroke-width: 1; opacity: .6; stroke-dasharray: 3 3; filter: url(#glow-cyan); }
.graph-node.agent-here .new-ring { animation: agentring 1s infinite; }
.node-label { text-anchor: middle; font: 8.5px var(--mono); fill: #8e9aa6; paint-order: stroke; stroke: #080b11; stroke-width: 3px; stroke-linejoin: round; }
.unread-count { font: 700 7px var(--mono); fill: var(--amber); }
.graph-node.delta-added .node-core { stroke: var(--cyan); filter: url(#glow-cyan); }
.graph-node.event-flash .node-core { animation: nodeflash .8s ease; }
.presence-cursor path { fill: var(--cyan); stroke: #071016; stroke-width: 1; }
.presence-cursor text { fill: var(--cyan); font: 700 7px var(--mono); }
.presence-cursor.jo path { fill: var(--magenta); }
.presence-cursor.jo text { fill: var(--magenta); }
#field-crosshair { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; opacity: .18; pointer-events: none; }
#field-crosshair::before, #field-crosshair::after { content: ""; position: absolute; background: var(--cyan); }
#field-crosshair::before { width: 18px; height: 1px; top: 9px; }
#field-crosshair::after { height: 18px; width: 1px; left: 9px; }

/* contextual inspection, inside the field rather than a page */
#selection-card {
  position: absolute; left: 10px; bottom: 10px; width: min(390px, calc(100% - 20px)); max-height: 245px;
  overflow-y: auto; background: rgba(11,16,24,.94); border: 1px solid #2a3746; box-shadow: 0 12px 38px rgba(0,0,0,.48);
  padding: 9px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s, transform .18s; z-index: 8;
}
#selection-card.visible { opacity: 1; transform: none; pointer-events: auto; }
.selection-head { display: grid; grid-template-columns: 12px 1fr auto; gap: 7px; align-items: center; }
.selection-head > div { min-width: 0; display: flex; flex-direction: column; }
.selection-head small { color: #5b6977; font: 7px var(--mono); text-transform: uppercase; }
.selection-head b { color: #d1dae1; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selection-head button { border: 0; background: none; color: #5c6875; cursor: pointer; }
.edge-symbol { color: var(--cyan); font-size: 13px; }
.event-symbol { font: 13px var(--mono); color: var(--cyan); }
.selection-metrics { display: flex; gap: 13px; color: #657280; font: 7px var(--mono); margin: 9px 0; border-top: 1px solid var(--line2); padding-top: 7px; }
.selection-metrics b { color: #aab6c0; font-size: 9px; }
.selection-latest { display: grid; grid-template-columns: 28px 1fr; column-gap: 7px; padding: 6px; background: #101722; }
.selection-latest span { grid-row: 1/3; color: var(--cyan); font: 8px var(--mono); }
.selection-latest b { color: #9eabb6; font-size: 9px; }
.selection-latest small { color: #5e6b78; font-size: 8px; }
.selection-actions { display: flex; gap: 5px; margin-top: 8px; }
.selection-actions button { height: 24px; border: 1px solid #263443; background: #101720; color: #70808e; font: 700 7px var(--mono); cursor: pointer; }
.selection-actions button:hover { color: var(--cyan); border-color: var(--cyan); }
.selection-claims { display: grid; gap: 6px; margin-top: 8px; }
.selection-claims > div { padding: 6px; background: #101620; border-left: 2px solid #506274; }
.selection-claims p { margin: 3px 0; color: #9aa7b2; font-size: 9px; line-height: 1.4; }
.selection-claims small { color: #53606d; font: 7px var(--mono); }
.grade { display: inline-block; font: 700 6.5px var(--mono); text-transform: uppercase; color: #77b6f3; }
.grade.g-rumour, .grade.g-hearsay { color: var(--amber); }
.event-detail { color: #a4b0ba; margin: 8px 0; }
.event-address { color: var(--cyan); background: #081017; padding: 4px 6px; font: 7.5px var(--mono); }

/* visible agent leaves on the field */
#agent-leaves { position: absolute; right: 10px; bottom: 10px; width: min(440px, 52%); display: grid; gap: 4px; z-index: 7; }
.agent-leaf {
  position: relative; min-height: 43px; display: grid; grid-template-columns: 24px 1fr; gap: 7px; align-items: center;
  border: 1px solid #273645; background: rgba(12,18,27,.94); text-align: left; overflow: hidden; cursor: pointer; padding: 5px 7px;
}
.agent-leaf > span { width: 22px; height: 22px; display: grid; place-items: center; color: var(--cyan); border: 1px solid currentColor; font: 700 7px var(--mono); }
.agent-leaf div { min-width: 0; display: flex; flex-direction: column; }
.agent-leaf b { color: #9eabb6; font: 8px var(--mono); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-leaf small { color: #596775; font-size: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.agent-leaf > i { position: absolute; height: 1px; bottom: 0; left: 0; background: var(--cyan); box-shadow: 0 0 8px currentColor; }
.agent-leaf.leaf-archivist > span { color: var(--amber); }
.agent-leaf.leaf-archivist > i { background: var(--amber); }
.agent-leaf.leaf-devil > span { color: var(--magenta); }
.agent-leaf.leaf-devil > i { background: var(--magenta); }
.swarm-active #agent-leaves { animation: leaves-in .35s ease; }

/* append-only log */
.panel-head.compact { height: 34px; }
.panel-head.compact > div:first-child { flex-direction: row; align-items: baseline; gap: 7px; }
.log-filter { flex: 1; display: flex; justify-content: center; }
.log-filter button { height: 23px; border: 0; border-bottom: 1px solid transparent; background: none; color: #4d5a67; font: 7px var(--mono); cursor: pointer; }
.log-filter button.active { color: #9ba8b3; border-bottom-color: var(--cyan); }
.log-position { color: #596775; font: 8px var(--mono); }
#event-log { flex: 1; min-height: 0; overflow: hidden; padding: 3px 6px; }
.log-empty { color: #4d5a67; font: 8px var(--mono); padding: 12px; text-align: center; }
.log-row {
  width: 100%; height: 16px; display: grid; grid-template-columns: 28px 19px 76px 85px minmax(160px, 1fr) 48px;
  align-items: center; gap: 5px; border: 0; border-left: 2px solid transparent; background: transparent; color: #697785; text-align: left; padding: 0 5px; cursor: pointer;
}
.log-row:hover { background: #101721; color: #9ca9b4; }
.log-row.current { border-left-color: var(--cyan); background: var(--cyan-soft); color: #b9c5ce; }
.log-row.future { opacity: .23; }
.log-seq, .log-time { font: 7px var(--mono); color: #52606e; }
.log-kind { font: 9px var(--mono); color: var(--cyan); }
.log-kind.k-lead { color: var(--amber); }
.log-kind.k-rule { color: var(--red); }
.log-actor { font: 7px var(--mono); color: #657584; overflow: hidden; text-overflow: ellipsis; }
.log-label { font: 650 8px var(--mono); color: #8b99a5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-detail { font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.log-time { text-align: right; }

/* ── live operations ───────────────────────────────────────────── */
#opsbar { border-left: 1px solid var(--line); padding: 0 10px 8px; overflow-y: auto; }
.ops-head { height: 49px; display: flex; align-items: center; border-bottom: 1px solid var(--line2); }
.ops-head > div { display: flex; flex-direction: column; }
.ops-head b { color: #b8c3cc; font-size: 10px; }
.ops-status { margin-left: auto; color: #667482; border: 1px solid #283442; padding: 2px 5px; font: 700 7px var(--mono); }
.ops-status.running { color: var(--cyan); border-color: rgba(92,225,230,.4); animation: livepulse 1.2s infinite; }
.ops-status.done { color: var(--green); border-color: rgba(104,216,155,.35); }
.sweep-brief { padding: 10px 0; border-bottom: 1px solid var(--line2); }
.brief-route { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.brief-route span { color: #8e9ba7; font: 8px var(--mono); background: #111721; border: 1px solid #232f3d; padding: 2px 5px; }
.brief-route i { color: var(--cyan); font-style: normal; }
.sweep-brief p { margin: 7px 0 9px; color: #687684; font-size: 9px; }
#run-sweep {
  width: 100%; height: 34px; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid rgba(92,225,230,.4); background: linear-gradient(90deg, rgba(92,225,230,.14), rgba(92,225,230,.04));
  color: var(--cyan); font: 750 8px var(--mono); letter-spacing: .07em; cursor: pointer; padding: 0 9px;
}
#run-sweep:hover { border-color: var(--cyan); box-shadow: inset 0 0 28px rgba(92,225,230,.08), 0 0 18px rgba(92,225,230,.06); }
#run-sweep:disabled { opacity: .65; cursor: wait; }
#agents { padding: 7px 0; display: grid; gap: 5px; border-bottom: 1px solid var(--line2); }
.agent-card { border: 1px solid #202b38; background: #0e141d; padding: 6px 7px; transition: border .2s, background .2s; }
.agent-card.working { border-color: #2f4c5b; background: linear-gradient(90deg, rgba(92,225,230,.07), #0e141d 48%); }
.agent-card.done { opacity: .75; }
.agent-card header { display: grid; grid-template-columns: 25px 1fr auto; gap: 7px; align-items: center; }
.agent-glyph { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid currentColor; font: 700 7px var(--mono); }
.agent-glyph.cyan { color: var(--cyan); }
.agent-glyph.amber { color: var(--amber); }
.agent-glyph.magenta { color: var(--magenta); }
.agent-card header div { display: flex; flex-direction: column; }
.agent-card header b { color: #9eabb6; font: 700 7.5px var(--mono); letter-spacing: .06em; }
.agent-card header small { color: #52606d; font-size: 7px; }
.agent-card header em { color: #53616e; font: 7px var(--mono); font-style: normal; }
.agent-card.working header em { color: var(--cyan); }
.agent-target { margin: 5px 0 3px 31px; color: #71808e; font: 7px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agent-progress { margin-left: 31px; height: 1px; background: #202b37; }
.agent-progress i { display: block; height: 1px; width: 0; background: var(--cyan); box-shadow: 0 0 7px currentColor; transition: width .35s ease; }
.agent-card[data-agent="archivist"] .agent-progress i { background: var(--amber); }
.agent-card[data-agent="devil"] .agent-progress i { background: var(--magenta); }
.agent-action { margin: 4px 0 0 31px; color: #4f5d6a; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-zone, .presence-zone { padding: 8px 0; border-bottom: 1px solid var(--line2); }
.landing-zone header, .presence-zone header { display: flex; align-items: center; justify-content: space-between; color: #586674; font: 700 7px var(--mono); letter-spacing: .09em; margin-bottom: 5px; }
.landing-zone header b { color: var(--cyan); }
#landing-feed { display: grid; gap: 4px; max-height: 155px; overflow-y: auto; }
.landing-empty { color: #46525e; font-size: 8px; padding: 7px 4px; }
.landing-item { width: 100%; display: grid; grid-template-columns: 22px 1fr auto; gap: 6px; align-items: center; border: 1px solid #202c39; background: #0f151e; text-align: left; padding: 4px 5px; cursor: pointer; animation: land .4s ease; }
.landing-item > span { color: var(--cyan); font: 700 7px var(--mono); }
.landing-item.a-archivist > span { color: var(--amber); }
.landing-item.a-devil > span { color: var(--magenta); }
.landing-item > div { min-width: 0; display: flex; flex-direction: column; }
.landing-item b { color: #8d9aa6; font-size: 8px; }
.landing-item small { color: #4f5c68; font-size: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-item em { color: #596775; font: 7px var(--mono); font-style: normal; }
.presence-person { display: grid; grid-template-columns: 24px 1fr auto; gap: 6px; align-items: center; padding: 3px 2px; }
.presence-person > i, #presence-popover > div > i { width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; font: 700 6.5px var(--mono); font-style: normal; background: #131b25; }
.p-mr { color: var(--cyan); border: 1px solid rgba(92,225,230,.45); }
.p-jo { color: var(--magenta); border: 1px solid rgba(238,120,197,.45); }
.p-ax { color: var(--amber); border: 1px solid rgba(255,180,84,.4); }
.presence-person div { display: flex; flex-direction: column; }
.presence-person b { color: #7f8c98; font-size: 8px; }
.presence-person small { color: #4c5965; font-size: 7px; }
.presence-person span { color: #4e5b67; font: 7px var(--mono); }

/* ── global overlays + footer ─────────────────────────────────── */
#statusbar { display: flex; align-items: center; gap: 11px; padding: 0 10px; background: #090d13; border-top: 1px solid var(--line); color: #4e5b68; font: 7.5px var(--mono); }
.status-fill { flex: 1; }
#status-selection { color: #6b7b8a; max-width: 340px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#command-wrap { position: fixed; inset: 0; z-index: 100; background: rgba(2,5,9,.68); display: flex; justify-content: center; padding-top: 12vh; }
#command-palette { width: min(600px, 92vw); height: fit-content; background: #0e141d; border: 1px solid #344354; box-shadow: 0 24px 80px rgba(0,0,0,.7); }
#command-input { width: 100%; height: 43px; border: 0; border-bottom: 1px solid var(--line); outline: 0; background: #111823; color: #d0d9e1; padding: 0 13px; font: 11px var(--mono); }
#command-results { padding: 4px; max-height: 48vh; overflow-y: auto; }
#command-results button { width: 100%; height: 32px; display: flex; align-items: center; border: 0; background: transparent; color: #84919d; text-align: left; padding: 0 9px; cursor: pointer; }
#command-results button.selected { background: var(--cyan-soft); color: #d6e0e7; }
#command-results small { margin-left: auto; color: #52606d; font: 7.5px var(--mono); }
#command-palette footer { height: 28px; display: flex; align-items: center; gap: 7px; border-top: 1px solid var(--line); padding: 0 9px; color: #53606d; font: 7px var(--mono); }
#presence-popover { position: fixed; top: 40px; right: 81px; z-index: 90; width: 290px; background: #0f151e; border: 1px solid #334151; box-shadow: 0 14px 50px rgba(0,0,0,.65); padding: 8px; }
#presence-popover header { color: #5e6d7b; font: 700 7px var(--mono); letter-spacing: .08em; padding: 3px 4px 7px; }
#presence-popover > div { display: grid; grid-template-columns: 24px 1fr auto; gap: 7px; align-items: center; padding: 5px 4px; border-top: 1px solid var(--line2); }
#presence-popover span { display: flex; flex-direction: column; }
#presence-popover b { color: #9aa6b1; font-size: 8px; }
#presence-popover small { color: #53606c; font: 7px var(--mono); }
#presence-popover em { color: #566471; font: 7px var(--mono); font-style: normal; }
#toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 150; background: #111925; border: 1px solid #344354; color: #aab6c0; padding: 7px 11px; font: 8px var(--mono); box-shadow: 0 10px 35px rgba(0,0,0,.6); }

@keyframes livepulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes halo { to { transform: rotate(360deg); } }
@keyframes spark { 0%,100% { opacity: .35; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.4); } }
@keyframes agentring { 0%,100% { opacity: .25; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes nodeflash { 0% { fill: white; filter: url(#glow-cyan); } 100% { fill: #111821; } }
@keyframes leaves-in { from { transform: translateY(25px); opacity: 0; } }
@keyframes land { from { transform: translateX(14px); opacity: 0; } }

@media (max-width: 1450px) {
  #core { grid-template-columns: 188px minmax(500px, 1fr) 300px; }
  #chronobar { grid-template-columns: 205px 27px 30px 27px minmax(220px, 1fr) 76px; }
  .state-counts span:nth-child(2) { display: none; }
  .brief-route span { font-size: 7px; }
  .log-row { grid-template-columns: 25px 17px 65px 72px minmax(130px,1fr) 43px; }
}

@media (max-width: 1120px) {
  #core { grid-template-columns: 0 minmax(480px, 1fr) 285px; }
  #lensbar { display: none; }
  .board-id, .presence-pill { display: none; }
  #chronobar { grid-template-columns: 190px 26px 29px 26px minmax(200px, 1fr) 70px; }
  #agent-leaves { width: 48%; }
}

@media (max-width: 820px) {
  #core { grid-template-columns: 1fr; }
  #opsbar { display: none; }
  #chronobar { grid-template-columns: 175px 25px 28px 25px minmax(170px,1fr); }
  #jump-live { display: none; }
  .chrono-readout #time-label { display: none; }
  .state-counts { display: none; }
}