/* ══════════════════════════════════════════════════════════════════════════
   First Light PRO — COLLECTOR OBSERVATORY views (SHARED terminal chrome).
   Used by the three self-contained collector pages:
     • propagation.html   (Block Propagation · Enterprise)
     • topology.html      (Peer Topology / Network Map · Enterprise)
     • mempool-stream.html (Live Mempool stream · Pro)
   Palette vars are declared on :root by each page so the view renders identically
   whether or not the /pro hub styles are present. Terminal black/green/amber,
   monospace, [ SECTION ] headers — matching the Observatory / lens aesthetic.
   ══════════════════════════════════════════════════════════════════════════ */
.col-page{
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-family:var(--font-mono);
}
.col-wrap{max-width:1040px;margin:0 auto;padding:22px 18px 72px}

/* top bar / brand */
.col-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line,#1e3a2e);padding-bottom:12px;margin-bottom:16px;flex-wrap:wrap}
.col-brand{font-size:13px;letter-spacing:.14em;color:var(--g2,#2fe38a);text-transform:uppercase}
.col-brand b{color:var(--txt,#e9f5ef);font-weight:700}
.col-tier{display:inline-block;margin-left:8px;font-size:10px;letter-spacing:.1em;padding:2px 8px;
  border:1px solid var(--line2,#2a4c3c);border-radius:999px;color:var(--a,#ffb454);text-transform:uppercase}
.col-tier.pro{color:var(--g2,#2fe38a)}
.col-top a{color:var(--gsoft,#5cf0a4);text-decoration:none;font-size:12px}
.col-top a:hover{color:var(--g,#33ff66)}

/* title block */
.col-h{margin:4px 0 14px}
.col-h1{font-size:20px;color:var(--txt,#e9f5ef);letter-spacing:.02em;margin:0 0 4px;font-weight:700}
.col-sub{font-size:12px;color:var(--mut,#89ac9b);line-height:1.55;max-width:820px}

/* token bar */
.col-tokbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 16px;
  border:1px solid var(--line,#1e3a2e);border-radius:10px;padding:10px 12px;background:var(--panel,#0c1c16)}
.col-tokbar .lk{color:var(--a,#ffb454);font-size:12px;letter-spacing:.04em}
.col-tokbar input{flex:1;min-width:180px;font-family:var(--font-mono);font-size:12px;
  background:var(--bg2,#050f0c);color:var(--txt,#e9f5ef);border:1px solid var(--line2,#2a4c3c);
  border-radius:7px;padding:7px 9px}
.col-tokbar input:focus{outline:none;border-color:var(--g2,#2fe38a)}
.col-btn{font-family:var(--font-mono);font-size:12px;padding:7px 13px;cursor:pointer;border-radius:7px;
  background:var(--panel2,#102821);color:var(--gsoft,#5cf0a4);border:1px solid var(--line2,#2a4c3c)}
.col-btn:hover{color:var(--g,#33ff66);border-color:var(--g2,#2fe38a)}
.col-tokmsg{font-size:11px;color:var(--mut,#89ac9b)}
.col-tokmsg.err{color:var(--bad,#ff6d6d)}
.col-tokmsg.ok{color:var(--g2,#2fe38a)}
.col-tokbar.unlocked{opacity:.72}

/* section headers */
.col-sec{font-size:12px;letter-spacing:.12em;color:var(--g2,#2fe38a);text-transform:uppercase;
  margin:22px 0 10px;display:flex;align-items:center;gap:8px}
.col-sec .live{color:var(--bad,#ff6d6d);font-size:10px;letter-spacing:.1em;
  border:1px solid rgba(255,109,109,.5);border-radius:999px;padding:1px 8px;animation:colpulse 2.2s infinite}
.col-sec .live.calm{color:var(--mut,#89ac9b);border-color:var(--line2,#2a4c3c);animation:none}
@keyframes colpulse{0%,100%{opacity:1}50%{opacity:.35}}

/* stat strip */
.col-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0 0 6px}
.col-stat{border:1px solid var(--line,#1e3a2e);border-radius:9px;padding:10px 12px;background:var(--panel3,#0a1712)}
.col-stat .k{font-size:10px;letter-spacing:.06em;color:var(--mut,#89ac9b);text-transform:uppercase}
.col-stat .v{font-size:18px;color:var(--txt,#e9f5ef);margin-top:3px}
.col-stat .v small{font-size:11px;color:var(--mut,#89ac9b)}
.col-stat .v.amber{color:var(--a,#ffb454)}
.col-stat .v.green{color:var(--g2,#2fe38a)}

/* generic panel + table */
.col-panel{border:1px solid var(--line,#1e3a2e);border-radius:10px;background:var(--panel3,#0a1712);overflow:hidden}
.col-tbl{width:100%;border-collapse:collapse;font-size:12px}
.col-tbl th{color:var(--mut,#89ac9b);font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  text-align:left;padding:8px 12px;border-bottom:1px solid var(--line-soft,#16302680);font-weight:500;position:sticky;top:0;background:var(--panel3,#0a1712)}
.col-tbl td{padding:8px 12px;border-top:1px solid var(--line-soft,#16302680);color:var(--txt2,#b6d3c5);vertical-align:top}
.col-tbl tr:hover td{background:var(--panel2,#102821)}
.col-tbl .num{text-align:right;color:var(--txt,#e9f5ef)}
.col-tbl a{color:var(--gsoft,#5cf0a4);text-decoration:none}
.col-tbl a:hover{color:var(--g,#33ff66)}
.mono{font-family:var(--font-mono)}
.dim{color:var(--mut,#89ac9b)}
.amber{color:var(--a,#ffb454)}
.green{color:var(--g2,#2fe38a)}
.slate{color:var(--slate,#8fa6bb)}

/* chips / pills */
.col-chip{display:inline-block;padding:1px 7px;border:1px solid var(--line2,#2a4c3c);border-radius:999px;
  font-size:10px;color:var(--txt2,#b6d3c5);letter-spacing:.03em}
.col-chip.in{color:var(--g2,#2fe38a);border-color:rgba(47,227,138,.4)}
.col-chip.out{color:var(--a,#ffb454);border-color:rgba(255,180,84,.4)}
.col-chip.rbf{color:var(--warn,#ffbf6b);border-color:rgba(255,191,107,.4)}

/* expandable detail row (block propagation) */
.col-exp{cursor:pointer}
.col-detail{background:var(--panel,#0c1c16)}
.col-detail td{padding:0}
.col-detail .inner{padding:10px 14px;border-left:2px solid var(--line2,#2a4c3c);margin:6px 10px;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:6px 18px;font-size:11px}
.col-detail .kv b{color:var(--txt,#e9f5ef);font-weight:600}
.col-detail .kv span{color:var(--mut,#89ac9b)}

/* lag bar */
.col-bar{position:relative;height:6px;border-radius:4px;background:var(--line-soft,#16302680);overflow:hidden;min-width:60px}
.col-bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--g2,#2fe38a),var(--a,#ffb454));border-radius:4px}

/* peer topology star map */
.col-map{position:relative;width:100%;height:420px;border:1px solid var(--line,#1e3a2e);border-radius:10px;
  background:radial-gradient(60% 60% at 50% 50%,rgba(47,227,138,.05),transparent 70%),var(--panel3,#0a1712);overflow:hidden}
.col-map svg{width:100%;height:100%;display:block}
.col-node{cursor:default}
.col-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--mut,#89ac9b)}
.col-legend .sw{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* live stream feed */
.col-feed .row{display:grid;grid-template-columns:96px 1fr 92px 78px 88px;gap:10px;align-items:center;
  padding:8px 12px;border-top:1px solid var(--line-soft,#16302680);font-size:12px}
.col-feed .row.head{color:var(--mut,#89ac9b);font-size:10px;text-transform:uppercase;letter-spacing:.06em;border-top:none}
.col-feed .row.new{animation:colflash 1.4s ease-out}
@keyframes colflash{0%{background:rgba(47,227,138,.18)}100%{background:transparent}}
.col-feed .ts{color:var(--mut,#89ac9b)}
.col-quiet{padding:34px 18px;text-align:center;color:var(--mut,#89ac9b);font-size:13px;line-height:1.7}
.col-quiet .big{font-size:15px;color:var(--txt2,#b6d3c5);letter-spacing:.04em}
.col-quiet .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--g2,#2fe38a);
  margin-right:7px;animation:colpulse 2.4s infinite;vertical-align:middle}

/* status / method / footer */
.col-status{padding:22px 4px;color:var(--mut,#89ac9b);font-size:13px}
.col-method{margin-top:14px;border:1px dashed var(--line2,#2a4c3c);border-radius:9px;padding:11px 14px;
  font-size:11px;color:var(--txt2,#b6d3c5);line-height:1.6}
.col-method b{color:var(--g2,#2fe38a);font-weight:600;letter-spacing:.04em}
.col-src{margin-top:8px;font-size:10px;color:var(--mut,#89ac9b);letter-spacing:.03em}
.col-foot{margin-top:26px;border-top:1px solid var(--line,#1e3a2e);padding-top:12px;font-size:11px;
  color:var(--mut,#89ac9b);line-height:1.6}
.col-unavail{border:1px solid rgba(255,191,107,.4);border-radius:10px;padding:18px;color:var(--warn,#ffbf6b);
  font-size:12px;line-height:1.6;background:rgba(255,191,107,.04)}

@media (max-width:720px){
  .col-feed .row{grid-template-columns:1fr 1fr;gap:4px}
  .col-feed .row .hideM{display:none}
  .col-map{height:340px}
}