/* Crypto table and Crypto pulse (ui/crypto-table). Loaded with equity-table.css, whose .eqt tokens, row, header,
   toolbar and sheet styles it reuses; everything here is scoped to the crypto page and leaves equities as they are. */

/* While the crypto table is active, the classic crypto list, its old hero and the equities table stay out of the way. */
body.crypto-table-v2 #watchlist-table,
body.crypto-table-v2 #watchlist-mobile-scrollbar,
body.crypto-table-v2 #watchlist-infinite-controls,
body.crypto-table-v2 #watchlist-position-tools,
body.crypto-table-v2 .watchlist-controls,
body.crypto-table-v2 #crypto-overview,
body.crypto-table-v2 #equity-table-v2 { display: none !important; }
body.crypto-table-v2 > main { padding-bottom: 0; }
body:not(.crypto-table-v2) #crypto-table-v2,
body:not(.crypto-table-v2) .ct-toolrow { display: none !important; }

/* The pulse shows on the crypto page only. First-paint rules (no equities strip, no old hero, reserved pulse height)
   are inline in index.html's <head>, keyed on html[data-crypto-route], because this file loads with the table. */
#crypto-pulse { display: none; }
html[data-crypto-route]:not([data-crypto-table="classic"]) #crypto-pulse,
body.crypto-table-v2 #crypto-pulse { display: block; }

/* Toolbar in the list row: the same layout as the equities toolbar, spanning the row on the crypto page. */
.ct-toolrow{z-index:20;width:100%;padding-block:0;justify-content:flex-end;flex-wrap:nowrap}
body.crypto-table-v2 .watchlist-heading-actions{align-self:center;grid-template-columns:minmax(0,1fr);width:100%}
body.crypto-table-v2 .crypto-page .watchlist-heading{display:flex;min-height:0;margin-bottom:10px}
body.crypto-table-v2 .crypto-page .watchlist-card{margin-top:0;padding-top:0}
@media (max-width: 900px){
  .ct-toolrow{flex-wrap:wrap;justify-content:flex-start}
  .ct-toolrow .eqt-search-wrap{flex:1 1 200px;width:auto}
}
.eqt .ct-news{text-decoration:none}
.eqt-fresh.ct-stale{color:var(--e-accent)}
.eqt-fresh.ct-stale .eqt-live{background:var(--e-accent);box-shadow:none;animation:none}

/* The detail sheet opens in the top layer outside .eqt, so it carries the table's dark tokens itself (the light
   ones come from equity-table.css's html[data-theme="light"] .eqt-sheet rule). */
.ct-sheet{
  --e-bg: oklch(0.155 0.014 258); --e-bg-2: oklch(0.19 0.016 258); --e-bg-3: oklch(0.235 0.018 258);
  --e-line: oklch(0.9 0.03 258 / 0.09); --e-line-2: oklch(0.9 0.03 258 / 0.17);
  --e-fg: oklch(0.96 0.008 258); --e-fg-2: oklch(0.77 0.018 258); --e-fg-3: oklch(0.6 0.02 258);
  --e-accent: oklch(0.71 0.15 263); --e-on-accent: oklch(0.2 0.04 263);
  --e-up: oklch(0.83 0.22 152); --e-down: oklch(0.71 0.22 22);
  --e-up-bg: oklch(0.83 0.22 152 / 0.13); --e-down-bg: oklch(0.71 0.22 22 / 0.14);
  --e-up-flash: oklch(0.83 0.22 152 / 0.34); --e-down-flash: oklch(0.71 0.22 22 / 0.36);
  --e-shadow: oklch(0 0 0 / 0.5);
  --e-ui: "Instrument Sans", "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --e-num: "Martian Mono", "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .ct-sheet{
  --e-bg: oklch(0.985 0.005 258); --e-bg-2: oklch(0.962 0.008 258); --e-bg-3: oklch(0.93 0.011 258);
  --e-line: oklch(0.3 0.03 258 / 0.1); --e-line-2: oklch(0.3 0.03 258 / 0.19);
  --e-fg: oklch(0.2 0.02 258); --e-fg-2: oklch(0.42 0.02 258); --e-fg-3: oklch(0.54 0.02 258);
  --e-accent: oklch(0.49 0.22 264); --e-on-accent: oklch(0.99 0.01 264);
  --e-up: oklch(0.55 0.17 150); --e-down: oklch(0.55 0.21 25);
  --e-up-bg: oklch(0.55 0.17 150 / 0.12); --e-down-bg: oklch(0.55 0.21 25 / 0.12);
  --e-up-flash: oklch(0.55 0.17 150 / 0.26); --e-down-flash: oklch(0.55 0.21 25 / 0.26);
  --e-shadow: oklch(0.2 0.02 258 / 0.2);
}
.ct-sheet .up{color:var(--e-up)} .ct-sheet .down{color:var(--e-down)}

/* Type taxonomy: letter badges and activity dots */
.ct, .ct-tools, .ct-sheet, .ctp{
  --ty-s: oklch(0.74 0.12 235); --ty-sv: oklch(0.8 0.14 80); --ty-u: oklch(0.78 0.14 160);
  --ty-p: oklch(0.72 0.14 300); --ty-m: oklch(0.74 0.17 350); --ty-g: oklch(0.74 0.06 250);
}
html[data-theme="light"] :is(.ct, .ct-tools, .ct-sheet, .ctp){
  --ty-s: oklch(0.5 0.14 240); --ty-sv: oklch(0.55 0.13 70); --ty-u: oklch(0.5 0.13 160);
  --ty-p: oklch(0.5 0.16 300); --ty-m: oklch(0.55 0.18 350); --ty-g: oklch(0.48 0.07 250);
}
.ct-ty{display:inline-grid;place-items:center;min-width:1.7rem;height:1.25rem;padding:0 5px;border-radius:6px;font:600 .62rem/1 var(--e-num);font-stretch:82%;letter-spacing:.02em;color:var(--ty,var(--e-fg-2));background:color-mix(in oklch,var(--ty,var(--e-fg-3)) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ty,var(--e-fg-3)) 32%,transparent)}
.ty-s{--ty:var(--ty-s)} .ty-sv{--ty:var(--ty-sv)} .ty-u{--ty:var(--ty-u)} .ty-p{--ty:var(--ty-p)} .ty-m{--ty:var(--ty-m)} .ty-g{--ty:var(--ty-g)}
.c-type{display:flex;flex-direction:column;align-items:center;gap:5px}
.ct-act{display:flex;gap:3px}
.ct-act i{font:500 .52rem/1 var(--e-num);font-style:normal;font-stretch:80%;letter-spacing:.04em;color:var(--e-fg-3)}
.ct-actdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--e-fg-3)}
.ct-actdot.st{background:var(--ty-u)} .ct-actdot.mi{background:var(--ty-sv)}
.ct-typemenu label{gap:9px}
.ct-typemenu .ct-ty{min-width:1.9rem}
.ct-menuhead{margin:8px 8px 2px;font:500 .58rem/1.2 var(--e-num);letter-spacing:.1em;text-transform:uppercase;color:var(--e-fg-3)}
.eqt-colmenu .ct-menulink{display:block;margin-top:6px;padding:8px;border-radius:8px;color:var(--e-fg-2);font-size:.8rem;text-decoration:none;text-align:center}
.eqt-colmenu .ct-menulink:hover{background:var(--e-bg-3);color:var(--e-fg)}
.eqt-colmenu button:disabled{opacity:.5;cursor:default}

/* Supply: the share of the maximum supply in circulation, as a single figure; "No max" marks uncapped coins. */
.c-ath{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-ath small{display:block;margin-top:4px;font-size:.64rem}
.c-ssi .crowded,.c-fund .crowded{padding:1px 5px;border-radius:6px;color:var(--e-accent);background:color-mix(in oklch,var(--e-accent) 16%,transparent)}
.c-ath,.c-supply,.c-ssi,.c-fund,.c-prev{text-align:center;font:500 .8rem/1.15 var(--e-num);font-stretch:80%}
.c-supply .ct-nomax{color:var(--e-fg-3);font:500 .72rem/1.15 var(--e-ui)}
.c-prev{padding-top:1px}
.ct-sheet dd .ct-ty{margin-right:4px;vertical-align:1px}

/* Crypto pulse: one strip, no sideways scrolling. Three KPI tiles and a movers tile. */
#crypto-pulse{padding-top:12px}
.ctp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.6fr);gap:10px;padding-bottom:14px;border-bottom:1px solid var(--e-line)}
.ctp-tile{min-width:0;padding:9px 14px 10px;border:1px solid var(--e-line);border-radius:14px;background:var(--e-bg-2)}
.ctp-k{display:block;font:500 .58rem/1.2 var(--e-num);letter-spacing:.1em;text-transform:uppercase;color:var(--e-fg-3);white-space:nowrap}
.ctp-v{display:flex;align-items:baseline;gap:8px;margin-top:8px;font:500 1.2rem/1.1 var(--e-num);font-stretch:82%;letter-spacing:-.02em;color:var(--e-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctp-v em{font:600 .72rem/1 var(--e-num);font-style:normal;font-stretch:80%;letter-spacing:0}
.ctp-s{display:block;margin-top:7px;font:500 .66rem/1.2 var(--e-num);font-stretch:82%;color:var(--e-fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctp .up{color:var(--e-up)} .ctp .down{color:var(--e-down)} .ctp .flat{color:var(--e-fg-2)}
.ctp-rvol{padding:3px 5px;border-radius:6px;background:var(--e-bg-3);color:var(--e-fg-2)}
.ctp-rvol.hot{color:var(--e-accent);background:color-mix(in oklch,var(--e-accent) 16%,transparent)}
.ctp-bar{display:flex;gap:2px;height:8px;margin-top:13px;border-radius:4px;overflow:hidden}
.ctp-bar i{display:block;min-width:2px;flex-basis:0}
.ctp-bar i.up{background:var(--e-up)} .ctp-bar i.flat{background:var(--e-fg-3)} .ctp-bar i.down{background:var(--e-down)}
.ctp-counts{display:flex;justify-content:space-between;gap:8px;margin-top:9px}
.ctp-counts b{font-weight:500}
.ctp-movers{display:grid;gap:5px;align-content:start}
.ctp-mhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ctp-lane{display:flex;align-items:center;gap:5px;min-width:0}
.ctp-lk{flex:0 0 3.6rem;font-size:.54rem}
.eqt .ctp-chip{display:inline-flex;flex:0 1 auto;align-items:center;gap:6px;min-width:0;overflow:hidden;height:24px;padding:0 8px;border:1px solid var(--e-line);border-radius:8px;background:var(--e-bg-3);color:var(--e-fg);text-decoration:none;white-space:nowrap}
.ctp-chip:hover{border-color:var(--e-line-2);color:var(--e-accent)}
.ctp-chip b{min-width:0;overflow:hidden;text-overflow:ellipsis;font:600 .72rem/1 var(--e-ui)}
.ctp-chip em{flex:0 0 auto}
.ctp-chip em{font:600 .66rem/1 var(--e-num);font-style:normal;font-stretch:80%}
.ctp-chip:focus-visible{outline:2px solid var(--e-accent);outline-offset:2px}
.ctp-time{font:500 .58rem/1 var(--e-num);font-stretch:82%;color:var(--e-fg-3);white-space:nowrap}
.ctp-time.ctp-stale{color:var(--e-accent)}
.ctp[aria-busy="true"] .ctp-v{color:var(--e-fg-3)}
.ctp-short{display:none}

/* Tablet: three KPI tiles, then the movers across the full width with gainers and losers side by side. The time
   is in the toolbar's freshness stamp; the pulse repeats it only when it is out of date. */
@media (max-width: 1099px){
  .ctp{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .ctp-movers{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));column-gap:14px;padding-block:8px}
  .ctp-mhead{grid-column:1/-1}
  .ctp-mhead:not(:has(.ctp-stale)){display:none}
  .eqt .ctp-chip{flex:1 1 0;justify-content:center;height:32px}
}
/* Phone: smaller type; gainers and losers each take a full line. */
@media (max-width: 560px){
  #crypto-pulse{padding-top:8px}
  .ctp{gap:6px;padding-bottom:10px}
  .ctp-tile{padding:8px 9px 9px;border-radius:12px}
  .ctp-k{font-size:.52rem;letter-spacing:.08em}
  .ctp-v{margin-top:6px;font-size:.98rem;gap:4px}
  .ctp-v em{font-size:.58rem}
  .ctp-rvol{padding:2px 3px}
  .ctp-s{margin-top:5px;font-size:.56rem}
  .ctp-bar{margin-top:10px;height:6px}
  .ctp-counts{margin-top:7px}
  .ctp-movers{grid-template-columns:minmax(0,1fr);row-gap:5px;padding:7px 8px}
  .ctp-lk{flex-basis:3.2rem;font-size:.5rem}
  .ctp-long{display:none} .ctp-short{display:inline}
  .eqt .ctp-chip{padding:0 5px;gap:4px;overflow:hidden}
  .ctp-chip b{font-size:.66rem} .ctp-chip em{font-size:.58rem}
}