/* ===========================================================
   PESKEL — Explorer (registro público de votos)
   Etherscan reimagined, Apple-clean. Monochrome; green = integrity only.
   Loads after tokens.css. Scoped under .xp
   =========================================================== */

.xp{position:relative;height:100%;background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);display:flex;flex-direction:column}

/* ---- top bar (shared with feed look) ---- */
.xp .topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;
  padding:14px 18px;background:var(--glass);backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--hair);position:relative;z-index:30;
}
.web .xp .topbar{padding:15px 26px}
.xp .brand{display:flex;align-items:center;gap:10px}
.xp .brand .word{font-size:21px;font-weight:800;letter-spacing:-.045em;color:var(--ink)}
.web .xp .brand .word{font-size:23px}
.xp .spacer{flex:1}
.xp .web-nav{display:none;gap:6px}
.web .xp .web-nav{display:flex}
.xp .web-nav a{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;white-space:nowrap;
  padding:8px 13px;border-radius:9px;transition:background .15s,color .15s;cursor:pointer}
.xp .web-nav a:hover{background:var(--surface-sunken);color:var(--ink)}
.xp .web-nav a.on{color:var(--ink);background:var(--surface-sunken)}
.xp .icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--hair-2);
  background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .15s}
.xp .icon-btn:hover{background:var(--surface-sunken)}
.xp .icon-btn svg{width:17px;height:17px}
.xp .btn-solid{display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;
  background:var(--solid-ink);color:var(--on-solid);border-radius:999px;padding:10px 17px;
  font-family:var(--font-ui);font-weight:700;font-size:13.5px;letter-spacing:-.01em;box-shadow:var(--shadow-sm)}
.xp .btn-solid svg{width:15px;height:15px}

.xp .scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}
.xp .scroll::-webkit-scrollbar{width:0;height:0}

/* ============ HERO / MASTHEAD ============ */
.xhero{padding:20px 18px 6px}
.web .xhero{padding:26px 26px 8px}
.xhero .eyebrow{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.xhero h1{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.08;color:var(--ink);text-wrap:balance}
.web .xhero h1{font-size:34px;max-width:680px}
.xhero .lede{font-size:13.5px;line-height:1.5;color:var(--ink-2);margin-top:8px;max-width:560px;text-wrap:pretty}
.web .xhero .lede{font-size:15px}

.integrity{display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  border:1px solid var(--hair-2);border-radius:999px;padding:7px 14px 7px 12px;
  font-family:var(--font-mono);font-size:11px;color:var(--ink);white-space:nowrap}
.integrity .gp{width:8px;height:8px;border-radius:50%;background:var(--p-green);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(44,140,106,.5);animation:xpulse 2.4s infinite}
@keyframes xpulse{0%{box-shadow:0 0 0 0 rgba(44,140,106,.5)}70%{box-shadow:0 0 0 8px rgba(44,140,106,0)}100%{box-shadow:0 0 0 0 rgba(44,140,106,0)}}
.integrity b{font-weight:700}
.integrity .sep{color:var(--ink-3)}
.integrity .vfy{color:var(--ink-3)}

/* ============ INSTRUMENT STATS ============ */
.stats{display:grid;gap:1px;background:var(--hair);border:1px solid var(--hair);border-radius:16px;overflow:hidden;
  grid-template-columns:1fr 1fr;margin:16px 18px 0}
.web .stats{grid-template-columns:repeat(4,1fr);margin:20px 26px 0}
.stat{background:var(--surface);padding:14px 16px;display:flex;flex-direction:column;gap:5px}
.stat .sk{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:6px}
.stat .sk .gp{width:6px;height:6px;border-radius:50%;background:var(--p-green)}
.stat .sv{font-family:var(--font-mono);font-size:21px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1}
.web .stat .sv{font-size:24px}
.stat .ss{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.stat .sv.ok{color:var(--p-green)}

/* ============ SEARCH ============ */
.xsearch{margin:16px 18px 0;position:relative}
.web .xsearch{margin:22px 26px 0}
.xsearch input{width:100%;border:1px solid var(--hair-2);background:var(--surface);border-radius:13px;
  padding:13px 16px 13px 42px;font-family:var(--font-mono);font-size:12.5px;color:var(--ink);
  transition:border-color .15s,box-shadow .15s}
.xsearch input::placeholder{color:var(--ink-3)}
.xsearch input:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px var(--track)}
.xsearch .si{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--ink-3);display:grid}
.xsearch .si svg{width:16px;height:16px}
.xsearch .hintkey{position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-size:9.5px;color:var(--ink-3);border:1px solid var(--hair);border-radius:6px;padding:3px 7px}

/* ============ FILTER TABS ============ */
.xfilter{display:flex;gap:4px;padding:14px 18px 6px;flex-wrap:wrap}
.web .xfilter{padding:18px 26px 8px}
.xtab{font-family:var(--font-ui);font-size:12.5px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-2);background:transparent;border:0;cursor:pointer;padding:8px 13px;border-radius:999px;
  transition:background .15s,color .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.xtab:hover{color:var(--ink)}
.xtab.on{color:var(--on-solid);background:var(--solid-ink)}
.xtab .ct{font-family:var(--font-mono);font-size:10px;font-weight:600;opacity:.7}

/* ============ MAIN LAYOUT (web = stream + side) ============ */
.xbody{padding:6px 18px 90px}
.web .xbody{padding:10px 26px 40px;display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.web .xmain{min-width:0}

/* ---- stream header (web table) ---- */
.stream-head{display:none}
.web .stream-head{display:grid;grid-template-columns:84px 1.5fr 1.4fr 1.1fr 96px 86px 22px;gap:14px;
  padding:8px 14px;font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);position:sticky;top:0;background:var(--bg);z-index:5}

.stream{display:flex;flex-direction:column}

/* ---- a stream item (row/card + detail) ---- */
.sitem{border-bottom:1px solid var(--hair);position:relative}
.sitem:first-child{border-top:1px solid var(--hair)}
.web .sitem:first-child{border-top:0}
.sitem.flash{animation:newrec 1.4s ease}
@keyframes newrec{0%{background:var(--surface-sunken)}100%{background:transparent}}

/* mobile card layout */
.rec{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:13px 6px;cursor:pointer}
.rec .node{position:relative;width:22px;display:flex;justify-content:center;align-self:stretch}
.rec .node::before{content:'';position:absolute;top:-13px;bottom:-13px;width:1.5px;background:var(--hair-2)}
.sitem:first-child .rec .node::before{top:50%}
.sitem:last-child .rec .node::before{bottom:50%}
.rec .node .nd{width:9px;height:9px;border-radius:50%;background:var(--surface);border:2px solid var(--ink-3);z-index:1;margin-top:3px}
.sitem.mine .rec .node .nd{border-color:var(--p-green);background:var(--p-green)}
.rec .rmid{min-width:0}
.rec .rtok{font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--ink);
  display:flex;align-items:center;gap:7px;white-space:nowrap}
.rec .rtok .me{font-family:var(--font-ui);font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--p-green);border:1px solid currentColor;border-radius:5px;padding:1px 5px}
.rec .rmeta{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-top:3px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rec .rmeta .poll{color:var(--ink-2)}
.rec .rmeta .reg{display:inline-flex;align-items:center;gap:3px}
.rec .rmeta .reg svg{width:10px;height:10px;fill:currentColor;opacity:.85}
.rec .rright{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.rec .rblock{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.rec .rwhen{font-family:var(--font-mono);font-size:11px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rec .sealed{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:9px;
  color:var(--ink-3);letter-spacing:.04em}
.rec .sealed svg{width:10px;height:10px}

/* web table row */
.web .rec{grid-template-columns:84px 1.5fr 1.4fr 1.1fr 96px 86px 22px;gap:14px;padding:12px 14px;align-items:center}
.web .rec .node{display:none}
.web .rec .cell{min-width:0;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.web .rec .c-block{font-size:12px;color:var(--ink-3)}
.web .rec .c-tok{font-size:12.5px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web .rec .c-poll{font-size:12px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.web .rec .c-poll .tag{color:var(--ink-3)}
.web .rec .c-reg{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.web .rec .c-reg svg{width:11px;height:11px;fill:currentColor;flex:0 0 auto}
.web .rec .c-ced{justify-self:start}
.web .rec .c-when{font-size:11.5px;color:var(--ink-2);text-align:right}
.web .rec .c-chev{color:var(--ink-3);display:grid;place-items:center;transition:transform .25s}
.web .rec .me{font-family:var(--font-ui);font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--p-green);border:1px solid currentColor;border-radius:5px;padding:1px 5px;flex:0 0 auto}
.rec:hover{background:var(--surface-sunken)}
.sitem.open .rec .c-chev{transform:rotate(180deg)}

/* ballot lock badge */
.ced{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.04em;color:var(--ink-2);border:1px solid var(--hair-2);border-radius:6px;padding:3px 7px;white-space:nowrap}
.ced svg{width:10px;height:10px}

/* mobile chev */
.rec .mchev{display:none}

/* ---- detail ---- */
.rec-detail{max-height:0;overflow:hidden;transition:max-height .35s ease}
.sitem.open .rec-detail{max-height:340px}
.rdt{padding:2px 14px 18px;display:grid;gap:10px}
.web .rdt{padding:2px 14px 18px 14px;grid-template-columns:1fr 1fr;gap:10px 24px}
.rdt .kv{display:flex;flex-direction:column;gap:3px;min-width:0}
.rdt .kv .k{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rdt .kv .v{font-family:var(--font-mono);font-size:11.5px;color:var(--ink);font-variant-numeric:tabular-nums;
  display:flex;align-items:center;gap:7px;word-break:break-all;line-height:1.4}
.rdt .kv .v svg{width:13px;height:13px;flex:0 0 auto}
.rdt .kv .v.ok{color:var(--p-green)}
.rdt .kv .copy{cursor:pointer;color:var(--ink-3);display:grid;place-items:center;flex:0 0 auto}
.rdt .kv .copy:hover{color:var(--ink)}
.rdt .kv .copy svg{width:12px;height:12px}
.rdt .chainlink{grid-column:1/-1;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px dashed var(--hair-2);
  border-radius:11px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);overflow:hidden}
.rdt .chainlink .seg{display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rdt .chainlink .seg.cur{color:var(--ink);font-weight:600}
.rdt .chainlink svg{width:13px;height:13px;flex:0 0 auto;color:var(--ink-3)}
.rdt .note{grid-column:1/-1;font-family:var(--font-ui);font-size:11.5px;color:var(--ink-3);line-height:1.45;
  display:flex;align-items:flex-start;gap:7px}
.rdt .note svg{width:14px;height:14px;flex:0 0 auto;margin-top:1px}

/* recount tick on rows during verify */
.sitem .vtick{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--p-green);transform:scaleY(0);
  transform-origin:top;transition:transform .12s}
.sitem.verified .vtick{transform:scaleY(1)}

/* ============ SIDE PANEL (web) ============ */
.xside{display:flex;flex-direction:column;gap:16px;position:sticky;top:8px}
.mobile-only{display:block}
.web .mobile-only{display:none}
.xside .scard{background:var(--surface);border:1px solid var(--hair);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm)}
.xside .scard h3{font-size:14px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.xside .scard h3 .gp{width:8px;height:8px;border-radius:50%;background:var(--p-green);box-shadow:0 0 0 0 rgba(44,140,106,.5);animation:xpulse 2.4s infinite}
.xside .scard p{font-size:12px;line-height:1.5;color:var(--ink-2)}
.xside .seal-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--hair);font-family:var(--font-mono);font-size:11px}
.xside .seal-row:last-of-type{border-bottom:0}
.xside .seal-row .k{color:var(--ink-3)}
.xside .seal-row .v{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.xside .seal-row .v.ok{color:var(--p-green);display:inline-flex;align-items:center;gap:5px}
.scard .seal-row .v.ok svg{width:12px;height:12px;flex:0 0 auto}
.scard h3 svg{width:15px;height:15px;flex:0 0 auto}
.scard .recount-btn svg{width:15px;height:15px;flex:0 0 auto}
.scard .legend .lrow .lic svg,.scard.legend .lrow .lic svg{width:13px;height:13px;flex:0 0 auto}
.recount-btn{width:100%;margin-top:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--solid-ink);color:var(--on-solid);border:0;border-radius:12px;padding:12px;cursor:pointer;
  font-family:var(--font-ui);font-weight:700;font-size:13px;transition:filter .15s,transform .12s}
.recount-btn:hover{filter:brightness(.92)}
.recount-btn:active{transform:scale(.98)}
.recount-btn svg{width:15px;height:15px}
.recount-btn.running{pointer-events:none}
.recount-btn.running svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.recount-prog{height:4px;border-radius:3px;background:var(--track);margin-top:12px;overflow:hidden;display:none}
.recount-prog.show{display:block}
.recount-prog .pf{height:100%;width:0;background:var(--p-green);transition:width .1s linear}
.recount-status{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-3);margin-top:8px;text-align:center;display:none}
.recount-status.show{display:block}
.recount-status.done{color:var(--p-green)}

/* legend */
.legend .lrow{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:12px;color:var(--ink-2)}
.legend .lrow .lic{width:24px;height:24px;border-radius:7px;background:var(--surface-sunken);display:grid;place-items:center;flex:0 0 auto;color:var(--ink-2)}
.legend .lrow .lic svg{width:13px;height:13px}
.legend .lrow b{color:var(--ink);font-weight:600}

/* mobile side cards live in the stream flow */
.mside{margin:18px 18px 0;display:flex;flex-direction:column;gap:14px}

/* ============ bottom nav (mobile) ============ */
.xp .bnav{position:absolute;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-around;
  padding:9px 14px calc(9px + env(safe-area-inset-bottom,12px));
  background:var(--glass);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-top:1px solid var(--hair)}
.xp .bnav .bn{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ink-3);cursor:pointer;background:none;border:0;
  font-family:var(--font-mono);font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.xp .bnav .bn svg{width:21px;height:21px}
.xp .bnav .bn.on{color:var(--ink)}
.xp .bnav .bn.create{color:var(--on-solid)}
.xp .bnav .bn.create .ic{width:44px;height:44px;border-radius:15px;background:var(--solid-ink);display:grid;place-items:center;box-shadow:var(--shadow-md)}
.xp .bnav .bn.create .ic svg{width:22px;height:22px}

/* toast */
.xtoast{position:absolute;left:50%;bottom:78px;transform:translateX(-50%) translateY(12px);z-index:90;
  background:var(--solid-ink);color:var(--on-solid);font-family:var(--font-mono);font-size:11px;font-weight:600;
  padding:9px 15px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.web .xtoast{bottom:24px}
.xtoast.show{opacity:1;transform:translateX(-50%) translateY(0)}