/* Quiver Labs — Home / explorer dashboard (Direction B: Live Command-Center).
   Self-contained: own :root (Quiver tokens, same values as terminal.css) so the home does
   not depend on terminal.css. Adapted from design/home-B.mockup.html — the fake-data inline
   script is replaced by home.js (real /api/home + SSE). No emoji; single-stroke SVG icons. */
:root{
  --bg:#0a0a0e; --raised:#13151f; --card:#1e1e2b; --border:#2a2c39; --hair:rgba(255,255,255,.07);
  --lime:#d4e34c; --qnavy:#141c28;
  --teal:#26a69a; --red:#f23645; --amber:#f59e0c;
  --tp:#eef0f4; --ts:#8b8b9f; --tm:#5f5f6d;
  --mono:'SF Mono',ui-monospace,Menlo,monospace;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  --rowhov:rgba(255,255,255,.025);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--tp);
  font-family:var(--sans); font-size:13px; line-height:1.4;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:var(--lime); text-decoration:none;}

/* ---------- TOP NAV ---------- */
.nav{
  height:54px; display:flex; align-items:center; gap:22px;
  padding:0 18px; background:var(--bg);
  border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:10px; padding-right:4px;}
.logo{
  width:34px; height:34px; border-radius:9px; background:var(--lime); overflow:hidden;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.logo svg{width:20px; height:20px; color:var(--qnavy);}
.logo img{width:90%; height:90%; object-fit:contain; margin:auto;}
.wordmark{font-weight:700; font-size:16px; letter-spacing:-.01em; color:var(--tp);}
.wordmark b{color:var(--lime); font-weight:700;}
.navlinks{display:flex; align-items:center; gap:3px;}
.navlink{
  padding:6px 11px; border-radius:7px; font-weight:500; font-size:13px;
  color:var(--ts); cursor:pointer; transition:color .12s, background .12s;
}
.navlink:hover{color:var(--tp); background:rgba(255,255,255,.03);}
.navlink.active{color:var(--lime); background:rgba(212,227,76,.09);}
.spacer{flex:1 1 auto;}
.search{
  display:flex; align-items:center; gap:8px; height:34px; width:300px;
  background:var(--raised); border:1px solid var(--border); border-radius:9px;
  padding:0 10px; color:var(--ts); transition:border-color .12s, box-shadow .12s; margin:0;
}
.search:focus-within{border-color:var(--lime); box-shadow:0 0 0 2px rgba(212,227,76,.16);}
.search svg{width:15px; height:15px; flex:0 0 auto; color:var(--tm);}
.search input{
  flex:1; min-width:0; background:none; border:0; outline:none; color:var(--tp);
  font-family:var(--sans); font-size:12.5px;
}
.search input::placeholder{color:var(--tm);}
.kbd{
  font-family:var(--mono); font-size:11px; color:var(--ts);
  border:1px solid var(--border); border-radius:5px; padding:1px 6px; background:rgba(0,0,0,.25);
}
.livechip{
  display:flex; align-items:center; gap:7px; height:34px; padding:0 12px;
  background:var(--raised); border:1px solid var(--border); border-radius:9px; flex:0 0 auto;
}
.livechip .dot{width:7px; height:7px; border-radius:50%; background:var(--tm); color:var(--tm); transition:background .2s,color .2s;}
.livechip .dot.on{background:var(--teal); color:var(--teal);}
.livechip span.lbl{font-family:var(--mono); font-size:11px; letter-spacing:.12em; color:var(--ts); font-weight:600;}
.livechip .dot.on + .lbl, .livechip .lbl.on{color:var(--teal);}
.dot.pulse{animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1; box-shadow:0 0 0 0 currentColor;}50%{opacity:.5; box-shadow:0 0 7px 1px currentColor;}}

/* ---------- SHELL ---------- */
.shell{max-width:1600px; margin:0 auto; padding:16px 18px 44px;}
.homeErr{
  margin-bottom:12px; padding:9px 14px; border-radius:9px; font-size:12.5px;
  background:rgba(242,54,69,.10); color:var(--red); border:1px solid rgba(242,54,69,.35);
}

/* ---------- KPI STRIP ---------- */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
.kpi{
  background:var(--raised); border:1px solid var(--border); border-radius:12px;
  padding:15px 16px 13px; display:flex; flex-direction:column; position:relative; overflow:hidden; min-height:104px;
}
.kpi .lab{font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--ts); font-weight:600;}
.kpi .val{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:29px; font-weight:600; line-height:1.1; letter-spacing:-.01em; margin-top:6px;}
.kpi .val small{font-size:14px; color:var(--ts); font-weight:600;}
.kpi .val.lime{color:var(--lime);}
.kpi .sub{font-size:11px; color:var(--tm); margin-top:auto; padding-top:10px;}
.kpi .spark{position:absolute; right:13px; top:15px; width:92px; height:32px; opacity:.95;}
.kpi .spark polyline{fill:none; stroke-width:1.6; vector-effect:non-scaling-stroke;}
.kpi .spark circle{fill:currentColor;}

/* ---------- NETWORK PULSE ROW ---------- */
.pulserow{
  margin-top:12px; display:flex; align-items:stretch;
  background:var(--raised); border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.pcell{padding:11px 20px; display:flex; flex-direction:column; gap:4px; border-right:1px solid var(--hair);}
.pcell .plab{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ts); font-weight:600; white-space:nowrap;}
.pcell .pval{font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:16px; font-weight:600; color:var(--tp);}
.pcell .pval em{font-style:normal; font-size:11px; color:var(--tm); font-weight:400; margin-left:3px;}
.pcell.grow{flex:1; border-right:0; justify-content:center; min-width:180px;}
.thru{display:flex; align-items:flex-end; gap:2px; height:24px; margin-top:2px;}
.thru i{display:block; width:4px; border-radius:1px; background:var(--teal); opacity:.85; transition:height .5s ease, opacity .5s ease;}
.pulselab{display:flex; align-items:center; gap:7px; margin-bottom:2px;}
.pulselab .dot{width:6px; height:6px; border-radius:50%; background:var(--lime); color:var(--lime);}

/* ---------- FEEDS ---------- */
.feeds{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px;}
.panel{
  background:var(--raised); border:1px solid var(--border); border-radius:12px;
  display:flex; flex-direction:column; overflow:hidden;
}
.phead{display:flex; align-items:center; gap:10px; padding:12px 15px 11px; border-bottom:1px solid var(--hair);}
.phead h2{margin:0; font-size:13px; font-weight:600; letter-spacing:-.005em; color:var(--tp);}
.phead .cnt{font-family:var(--mono); font-size:11px; color:var(--tm); margin-left:2px;}
.phead .live{display:flex; align-items:center; gap:6px; margin-left:auto; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--teal); font-weight:600;}
.phead .live .dot{width:6px; height:6px; border-radius:50%; background:var(--teal); color:var(--teal);}

.tblwrap{overflow-x:auto; position:relative;}

/* hover-hold — the feed under the cursor freezes so rows are clickable, while the system
   keeps flowing. Two cues, matching the reference feed UX:
   (1) the header LIVE chip flips to PAUSED (amber, pause glyph);
   (2) a compact floating pill on the header line counts what is queued ("+7 blocks") —
       it NEVER covers row 1, and clicking it flushes the queue. */
.live .pz{display:none; width:9px; height:9px;}
.live.paused{color:var(--amber);}
.live.paused .dot{display:none;}
.live.paused .pz{display:block;}

/* [hidden] must beat the class's display:inline-flex (author rule > UA [hidden]) — else
   p.hidden=true has no visual effect and the pill lingers after the mouse leaves. */
.newpill[hidden]{display:none;}
.newpill{
  position:absolute; left:50%; top:31px; transform:translate(-50%,-50%); /* JS pins top to thead */
  z-index:6; display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px 4px 8px; border-radius:999px; cursor:pointer; border:0;
  background:var(--teal); color:#06110e;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.03em; font-weight:700;
  box-shadow:0 7px 18px rgba(0,0,0,.5), 0 0 0 3px rgba(38,166,154,.15);
  white-space:nowrap; animation:pillIn .18s ease-out;
}
.newpill:hover{filter:brightness(1.07);}
.newpill:active{transform:translate(-50%,-50%) scale(.96);}
.newpill svg{width:12px; height:12px; flex:0 0 auto;}
@keyframes pillIn{from{opacity:0; transform:translate(-50%,-108%);} to{opacity:1; transform:translate(-50%,-50%);}}
@media (prefers-reduced-motion: reduce){ .newpill{animation:none;} }
table{width:100%; border-collapse:collapse; font-size:12.5px;}
thead th{
  text-align:left; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ts); font-weight:600; padding:8px 15px; border-bottom:1px solid var(--hair);
  background:var(--raised); white-space:nowrap;
}
thead th.r,tbody td.r{text-align:right;}
tbody td{padding:8px 15px; border-bottom:1px solid var(--hair); white-space:nowrap; color:var(--tp);}
tbody tr:last-child td{border-bottom:0;}
tbody tr{transition:background .15s;}
tbody tr:hover{background:var(--rowhov);}
td.num{font-family:var(--mono); font-variant-numeric:tabular-nums;}
td.age{font-family:var(--mono); color:var(--ts); font-variant-numeric:tabular-nums;}
td.muted{color:var(--ts);}
.blocklink{color:var(--lime);}
.txpill{
  display:inline-block; min-width:22px; text-align:center; font-family:var(--mono);
  font-size:11px; color:var(--tp); background:rgba(255,255,255,.05);
  border-radius:5px; padding:1px 7px; font-variant-numeric:tabular-nums;
}
.side{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-family:var(--mono); font-size:11px; letter-spacing:.03em;}
.side svg{width:12px; height:12px;}
.side.buy{color:var(--teal);}
.side.sell{color:var(--red);}
.pair{font-weight:600; color:var(--tp); cursor:pointer;}
.pair:hover{color:var(--lime);}
.pair .q{color:var(--tm); font-weight:400;}
/* Fixed trades table: pin the column widths so a long token symbol/address can NEVER widen the
   table (the auto-layout reflow jitter). Side/Amount/Value/Age are fixed; Pair takes the rest and
   truncates with an ellipsis. */
.tt{table-layout:fixed;}
.tt th:nth-child(1),.tt td:nth-child(1){width:76px;}   /* Side  — matches the old auto-fit width */
.tt th:nth-child(3),.tt td:nth-child(3){width:84px;}   /* Amount */
.tt th:nth-child(4),.tt td:nth-child(4){width:84px;}   /* Value */
.tt th:nth-child(5),.tt td:nth-child(5){width:54px;}   /* Age   */
.tt td:nth-child(2){overflow:hidden; text-overflow:ellipsis;} /* Pair → takes the rest, ellipsis, never grows */
.empty{padding:22px 15px; text-align:center; color:var(--tm); font-size:12px;}
td.buyval{color:var(--teal); font-family:var(--mono); font-variant-numeric:tabular-nums;}
td.sellval{color:var(--red); font-family:var(--mono); font-variant-numeric:tabular-nums;}

/* flash-in */
@keyframes flashLime{from{background:rgba(212,227,76,.14);}to{background:transparent;}}
@keyframes flashTeal{from{background:rgba(38,166,154,.16);}to{background:transparent;}}
@keyframes flashRed{from{background:rgba(242,54,69,.15);}to{background:transparent;}}
tr.f-lime{animation:flashLime 1.1s ease-out;}
/* streaming cascade: a refetch prepends a whole block's swaps at once. Stagger each row's slide-in
   by its index in the batch (--si) so the feed cascades smoothly top-down instead of snapping in
   ("tak diye"). The colour flash and the slide run together (comma-separated animations). */
@keyframes rowIn{from{opacity:0;transform:translateY(-7px);}to{opacity:1;transform:translateY(0);}}
tr.f-teal{animation:flashTeal 1.1s ease-out, rowIn .32s ease-out both;animation-delay:0s,calc(var(--si,0) * 55ms);}
tr.f-red{animation:flashRed 1.1s ease-out, rowIn .32s ease-out both;animation-delay:0s,calc(var(--si,0) * 55ms);}

.tick{transition:color .18s;}
.tick.up{color:var(--lime);}

@media (max-width:1120px){
  .kpis{grid-template-columns:repeat(2,1fr);}
  .feeds{grid-template-columns:1fr;}
  .pulserow{flex-wrap:wrap;}
  .search{width:200px;}
}
@media (prefers-reduced-motion:reduce){
  .dot.pulse,tr.f-lime,tr.f-teal,tr.f-red,.tick{animation:none !important; transition:none !important;}
  .thru i{transition:none;}
}