/* PULSE — mobile analytics deck. Moneyness's own look (cream / orange / mono),
   the craft borrowed from the Match mobile cards. The deck + card styling is
   width-agnostic (if /pulse is hit on desktop it renders as a centered capped
   strip); the full-screen clean shell — strip chrome, hide the desktop header +
   footer — is @media ≤640 + body[data-pulse="1"] only, so DESKTOP IS UNTOUCHED.

   TYPE: instrument.css:343 pins `font-family + font-size !important` on `body *`,
   which flattens every number to 14px. The type rules below carry the app's
   winning tier (:root-stacked + !important), exactly like match.css, so the
   hierarchy (big hero number, uppercase mono eyebrow, sans headline) survives. */

.view[data-view="pulse"] .pl-wrap{ display:flex; flex-direction:column; height:100%; min-height:0; }

.pl-top{ display:flex; align-items:center; gap:10px; padding:14px 16px 8px; }
.pl-back{ line-height:1; color:#1a1410; text-decoration:none; padding:2px 10px 2px 0; }

.pl-deck{ flex:1 1 auto; min-height:0; display:flex; gap:14px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; padding:4px 16px 10px; scrollbar-width:none; }
.pl-deck::-webkit-scrollbar{ width:0; height:0; display:none; }

/* full-height cards with their content CENTRED vertically — balanced, not a
   content-blob floating with a void below it. A tall card scrolls inside itself. */
.pl-card{ scroll-snap-align:center; flex:0 0 86%; max-width:380px; height:100%; display:flex; flex-direction:column; justify-content:center;
  background:#fff; border:1px solid #efe6da; border-radius:14px; box-shadow:0 1px 3px rgba(26,20,16,.05);
  padding:26px 22px; box-sizing:border-box; overflow-y:auto; scrollbar-width:none; }
.pl-card::-webkit-scrollbar{ width:0; display:none; }

.pl-bars{ list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; }
/* first column sizes to the label (fits "Hypercall", not just "ETH") so venue
   names never truncate; the bar takes the rest. */
.pl-bars li{ display:grid; grid-template-columns:minmax(40px,auto) 1fr auto auto; align-items:center; gap:10px; }
.pl-bt{ height:6px; background:#f3ece2; border-radius:3px; overflow:hidden; }
.pl-bt i{ display:block; height:100%; background:#E07A2E; border-radius:3px; }

.pl-spark{ display:flex; align-items:flex-end; gap:2px; height:72px; margin-top:20px; }
.pl-spark i{ flex:1 1 0; min-width:0; background:#f0c9a4; border-radius:1px 1px 0 0; }
.pl-spark i:last-child{ background:#E07A2E; }

.pl-dots{ display:flex; justify-content:center; gap:7px; padding:10px 0 4px; }
.pl-dot{ width:6px; height:6px; border-radius:50%; background:#e0d6c8; transition:background .2s,width .2s; }
.pl-dot.on{ background:#E07A2E; width:18px; border-radius:3px; }
.pl-desk{ display:block; text-align:center; text-decoration:none; color:#9a8f82;
  padding:6px 16px calc(16px + env(safe-area-inset-bottom)); }
.pl-state{ flex:1; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 24px; color:#9a8f82; }
.pl-state.err{ color:#b5502a; }

/* ── TYPE (must beat instrument.css body * !important) ───────────────────────── */
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-brand{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:12px !important; font-weight:500 !important;
  letter-spacing:.08em !important; text-transform:uppercase; color:#9a8f82; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-back{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:13px !important; font-weight:600 !important;
  letter-spacing:.04em !important; text-transform:uppercase; color:#E07A2E !important; white-space:nowrap; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-eye{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:11px !important; font-weight:600 !important;
  letter-spacing:.1em !important; text-transform:uppercase; color:#E07A2E; margin-bottom:12px; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-h{
  font-family:var(--sans),system-ui,sans-serif !important; font-size:22px !important; font-weight:600 !important;
  letter-spacing:-.2px !important; line-height:1.22 !important; color:#1a1410; margin:0 0 14px; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-big{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:46px !important; font-weight:500 !important;
  letter-spacing:-1.5px !important; line-height:1 !important; color:#1a1410; margin:4px 0 10px; font-variant-numeric:tabular-nums; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-sub{
  font-family:var(--sans),system-ui,sans-serif !important; font-size:14px !important; font-weight:400 !important;
  letter-spacing:0 !important; color:#6e6358; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-cov{
  font-family:var(--sans),system-ui,sans-serif !important; font-size:13px !important; font-weight:400 !important;
  letter-spacing:0 !important; color:#9a8f82; margin-top:12px; line-height:1.55; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-bk{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:12px !important; font-weight:600 !important;
  letter-spacing:0 !important; color:#1a1410; text-transform:uppercase; white-space:nowrap; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-bv{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:13px !important; font-weight:500 !important;
  letter-spacing:0 !important; color:#1a1410; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-bs{
  font-family:var(--mono),ui-monospace,monospace !important; font-size:11px !important; font-weight:400 !important;
  letter-spacing:0 !important; color:#9a8f82; text-align:right; font-variant-numeric:tabular-nums; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-desk{
  font-family:var(--sans),system-ui,sans-serif !important; font-size:12px !important; letter-spacing:0 !important; }
:root:root:root:root:root:root:root:root body .view[data-view="pulse"] .pl-state{
  font-family:var(--sans),system-ui,sans-serif !important; font-size:15px !important; letter-spacing:0 !important; }

/* desktop fallback: /pulse is mobile-only, but if someone opens it wide, keep the
   deck a centered capped strip instead of full-bleed. */
@media (min-width:641px){
  .view[data-view="pulse"] .pl-wrap{ max-width:460px; margin:0 auto; }
}

/* ── MOBILE full-screen clean shell for pulse (≤640 + body[data-pulse]) ── */
@media (max-width:640px){
  :root:root:root:root:root:root:root:root body[data-pulse="1"]{ background-image:none !important; background-color:#fffefb !important; }
  :root:root:root:root:root:root:root:root body[data-pulse="1"]::before,
  :root:root:root:root:root:root:root:root body[data-pulse="1"]::after{ content:none !important; display:none !important; }
  :root:root:root:root:root:root:root:root body[data-pulse="1"] header.top{ display:none !important; }
  :root:root:root:root:root:root:root:root body[data-pulse="1"] footer{ display:none !important; }
  /* the one-time analytics notice intrudes on the deck; hide ONLY it (the status
     box holding #m_notice_ok), never transaction/[role=status] toasts. */
  :root:root:root:root:root:root:root:root body[data-pulse="1"] [role="status"]:has(#m_notice_ok){ display:none !important; }
  body[data-pulse="1"]{ overflow-x:hidden !important; }
  body[data-pulse="1"] > .app{ width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; }
  body[data-pulse="1"] main.stage,
  body[data-pulse="1"] .view[data-view="pulse"]{ min-width:0 !important; max-width:100% !important; height:100% !important; overflow:visible !important; }
}