/* Front page styles, moved out of home.php on 2026-10-30 (text-to-HTML ratio work). */
/* ---------------------------------------------------------------------------
   Light, but not the white-and-blue of every other price site. The ground is a
   faintly cool paper rather than pure white so the rules and the row banding
   have something to sit on; green and red are darkened from their dark-theme
   values because #098757 on white is unreadable at 12px.
   --------------------------------------------------------------------------- */
:root{
  --paper:#0A0D14; --surface:#121724; --raised:#121724;
  --rule:#232B40; --rule-soft:#1B2234;
  --ink:#E9EEF8; --muted:#8E99B0; --dim:#6D7883;
  --up:#098757; --down:#D62B3F; --brand:#F0A500; --brand-ink:#241A00;
  /* the amber reads at 2.46:1 on white — fine behind dark ink on a
     button, not fine as text. Links get a darker one. */
  --link:#A16C00;

  --display:"Archivo","Archivo Fallback",system-ui,sans-serif;
  /* --sans, not --body: design.css and themes.css define --body as a text colour, which replaced this font
     and set the page (search box included) in Times */
  --sans:"IBM Plex Sans","IBM Plex Sans Fallback",system-ui,sans-serif;
  --mono:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

.strip{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding:7px 22px;border-bottom:1px solid var(--rule);background:var(--surface);
  font-family:var(--mono);font-size:11px;color:var(--muted)}
.strip b{color:var(--ink);font-weight:600}
.strip .sep{color:var(--muted);opacity:.5;font-style:normal}
.strip .live{color:var(--up);display:flex;align-items:center;gap:6px;margin-left:auto;font-weight:500}
.dot{width:6px;height:6px;border-radius:50%;background:var(--up);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.28}}

.bar{display:flex;align-items:center;gap:24px;padding:12px 22px;
  border-bottom:1px solid var(--rule);background:var(--surface);
  position:sticky;top:0;z-index:10}
.mark{font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.02em;white-space:nowrap}
.mark i{font-style:normal;color:var(--brand)}
.nav{display:flex;gap:19px;font-size:13px;color:var(--muted);min-width:0;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{white-space:nowrap}
.search,.btn,.mark{flex-shrink:0}
.nav a:hover,.nav a.on{color:var(--ink)}
.search{position:relative;margin-left:auto;display:flex;align-items:center;gap:8px;
  background:var(--raised);border:1px solid var(--rule);border-radius:4px;padding:0 11px 0 0;
  min-width:280px;color:var(--dim);font-size:13px}
.search:focus-within{border-color:var(--brand);background:var(--surface)}
.search input{flex:1;min-width:0;border:0;background:transparent;outline:none;
  font:13px var(--sans);color:var(--ink);padding:7px 0 7px 11px}
.search input::placeholder{color:var(--dim)}
.qr{position:absolute;top:calc(100% + 6px);right:0;width:380px;max-width:calc(100vw - 32px);z-index:30;
  background:var(--surface);border:1px solid var(--rule);border-radius:4px;
  box-shadow:0 14px 34px rgba(14,21,32,.14);max-height:62vh;overflow-y:auto}
.qr[hidden]{display:none}
.qr-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--rule-soft);color:var(--ink)}
.qr-row:last-child{border-bottom:0}
.qr-row:hover,.qr-row.on{background:var(--raised)}
.qr-row b{font-family:var(--display);font-weight:700;min-width:56px}
.qr-row .nm{flex:1;min-width:0;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qr-row .px{font-family:var(--mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.qr-row .px.old{color:var(--dim)}
.qr .lv{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--up);margin-right:6px;vertical-align:1px}
.qr .kd{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:2px 6px;border-radius:3px;background:var(--raised);color:var(--muted)}
.qr .kd.pair{color:var(--up)}
.qr-empty{padding:12px;color:var(--muted);font-size:13px}
.search kbd{margin-left:auto;font-family:var(--mono);font-size:10px;background:var(--surface);
  border:1px solid var(--rule);border-radius:3px;padding:1px 5px;color:var(--dim)}
.btn{font-family:var(--mono);font-size:12px;font-weight:600;padding:8px 15px;border-radius:4px;
  background:var(--brand);color:var(--brand-ink);white-space:nowrap}
.btn:hover{background:#F2A600}
/* Sign in, for everyone: the cached page cannot know who is signed in, so nav-auth.js swaps it for the account menu */
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn.ghost:hover{background:var(--rule-soft);border-color:var(--brand)}
[data-acct-menu]{display:flex}

h1{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.02em;
  padding:18px 22px 0}
h1 span{color:var(--muted);font-weight:600}

/* auto-fit rather than a fixed count, so adding a panel is adding a panel */
.events{display:grid;grid-template-columns:repeat(auto-fit,minmax(208px,1fr));gap:1px;background:var(--rule);
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:16px}
.ev{background:var(--surface);padding:13px 16px}
.ev-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.ev-t{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--muted);font-weight:500}
.ev-c{font-family:var(--mono);font-size:10px;color:var(--dim)}
.ev-row{display:flex;align-items:baseline;gap:8px;margin-bottom:5px}
.ev-row:last-child{margin-bottom:0}
.ev-sym{font-family:var(--display);font-weight:700;font-size:13.5px;min-width:70px}
.ev-px{font-family:var(--mono);font-size:11px;color:var(--muted);
  font-variant-numeric:tabular-nums;margin-left:auto}
.ev-d{font-family:var(--mono);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--dim)}

.chips{display:flex;gap:7px;padding:12px 22px;flex-wrap:wrap;align-items:center;
  border-bottom:1px solid var(--rule);background:var(--paper)}
.chip{font-family:var(--mono);font-size:11px;padding:6px 12px;border-radius:4px;
  border:1px solid var(--rule);color:var(--muted);background:var(--surface)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip.hot{color:var(--up);border-color:rgba(11,154,99,.35);background:rgba(11,154,99,.06)}
.chips .right{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--dim)}
.chip.small{font-size:10.5px;padding:5px 10px}
.chip-sep{width:1px;height:20px;background:var(--rule);margin:0 4px}
.pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:16px 22px;
  border-bottom:1px solid var(--rule);background:var(--surface)}
.pg{font-family:var(--mono);font-size:12px;padding:7px 12px;border-radius:4px;
  border:1px solid var(--rule);color:var(--muted);background:var(--surface);min-width:36px;text-align:center}
.pg:hover{border-color:var(--dim);color:var(--ink)}
.pg.on{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
.pg.off{opacity:.4}
.pg.gap{border:0;min-width:14px;padding:7px 2px}
.pg.count{border:0;margin-left:auto;color:var(--dim)}
@media (max-width:720px){ .pg.count{width:100%;margin-left:0;text-align:left;padding-left:0} }

/* -------------------------------------------------------------------------
   The signature. Every comparable site runs 1h / 24h / 7d; these three are
   1m / 5m / 15m and are banded together, so the claim is made by the shape of
   the table rather than by a sentence above it.
   ------------------------------------------------------------------------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--surface)}
table{width:100%;border-collapse:collapse;min-width:940px}
thead th{font-family:var(--mono);font-size:10px;letter-spacing:.11em;color:var(--muted);
  font-weight:500;text-align:right;padding:10px 12px;border-bottom:1px solid var(--rule);white-space:nowrap}
thead th.l{text-align:left}
thead tr.grp th{padding:8px 12px 6px;border-bottom:0}
th.band{text-align:center;font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;
  color:#8A6200;background:rgba(224,150,0,.09);border:1px solid rgba(224,150,0,.28);
  border-bottom:0;border-radius:4px 4px 0 0;font-weight:600}
thead th.fast{color:var(--ink);background:rgba(224,150,0,.09);border-left:1px solid rgba(224,150,0,.28)}
thead th.fast+th.fast{border-left:0}
thead th.fast.end{border-right:1px solid rgba(224,150,0,.28)}
tbody td.fast{background:rgba(224,150,0,.055);border-left:1px solid rgba(224,150,0,.2)}
tbody td.fast+td.fast{border-left:0}
tbody td.fast.end{border-right:1px solid rgba(224,150,0,.2)}

tbody td{padding:10px 12px;border-bottom:1px solid var(--rule-soft);text-align:right;
  white-space:nowrap;font-variant-numeric:tabular-nums}
tbody td.l{text-align:left}
tbody tr:hover{background:var(--raised)}
tbody tr:hover td.fast{background:rgba(224,150,0,.1)}
.rank{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:left}
.coin{display:flex;align-items:center;gap:10px}
.coin img,.ico-f{width:23px;height:23px;border-radius:50%;flex:none;object-fit:cover;background:var(--raised)}
.ico-f{display:grid;place-items:center;font-family:var(--display);font-weight:700;
  font-size:9px;color:#fff;background:var(--dim)}
.coin b{font-family:var(--display);font-weight:700;font-size:14px;letter-spacing:-.015em}
.coin small{font-family:var(--mono);font-size:10px;color:var(--dim);margin-left:6px;text-transform:uppercase}
.px{font-family:var(--mono);font-size:13.5px;font-weight:500}
.d{font-family:var(--mono);font-size:12.5px;font-weight:500}
.vol{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* buy pressure: one <i> is the 52px track, its fill is the --p the row sets */
td.fl{font-family:var(--mono);font-size:11px;color:var(--muted);white-space:nowrap}
td.fl i{display:inline-block;width:52px;height:5px;border-radius:3px;margin-right:7px;vertical-align:middle;
  background:linear-gradient(90deg,var(--up) var(--p,0%),rgba(214,43,63,.2) 0)}

/* A burst is the reason this product exists, so it gets the one loud cue. */
tr.bursting{background:linear-gradient(90deg,rgba(11,154,99,.075),transparent 46%)}
tr.bursting td:first-child{box-shadow:inset 3px 0 0 var(--up)}
.snap-tag{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;
  color:var(--muted);border:1px solid var(--rule);border-radius:3px;
  padding:2px 5px;margin-left:9px;vertical-align:1.5px}
.burst-tag{font-family:var(--mono);font-size:8.5px;font-weight:600;letter-spacing:.1em;
  color:var(--up);border:1px solid rgba(11,154,99,.45);border-radius:3px;
  padding:2px 5px;margin-left:9px;vertical-align:1.5px}

/* a price that just moved, marked for a moment rather than animated forever */
@keyframes flashUp{from{background:rgba(11,154,99,.22)}}
@keyframes flashDown{from{background:rgba(214,43,63,.2)}}
td.tick-up{animation:flashUp .9s ease-out}
td.tick-down{animation:flashDown .9s ease-out}

.more{padding:16px 22px;border-bottom:1px solid var(--rule);background:var(--surface)}
/* the five views with a page of their own (2026-10-30): lead under the H1, copy block before the news */
.view-lead{margin:-8px 0 0;padding:0 22px 14px;font-size:14px;line-height:1.6;color:var(--muted);max-width:86ch}
.view-copy{padding:8px 22px 20px;border-bottom:1px solid var(--rule);background:var(--surface)}
.view-copy h2{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);margin:18px 0 6px}
.view-copy p{font-size:14px;line-height:1.65;color:var(--muted);margin:0 0 10px;max-width:76ch}
.view-copy details{max-width:76ch;border-bottom:1px solid var(--rule-soft);padding:8px 0}
.view-copy summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:14px}
.view-copy details p{margin:8px 0 0}
.view-copy .view-links{font-family:var(--mono);font-size:12px;margin-top:16px}
.view-copy .view-links a{color:var(--link);font-weight:600;margin-right:12px;text-decoration:none}
@media (max-width:560px){.view-lead{margin-top:0;padding:4px 14px 12px}.view-copy{padding:6px 14px 16px}}
.more a{font-family:var(--mono);font-size:12px;color:var(--link);font-weight:600}

/* news */
.news{background:var(--surface);border-bottom:1px solid var(--rule)}
.news-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:20px 22px 12px;border-bottom:1px solid var(--rule-soft);flex-wrap:wrap}
.news-head h2{font-family:var(--display);font-size:18px;font-weight:700;margin:0;color:var(--ink)}
.news-head a{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--link)}
.np{padding:18px 22px;border-bottom:1px solid var(--rule-soft);
  display:grid;grid-template-columns:300px minmax(0,1fr);gap:20px;align-items:start}
.np.np-noimg{grid-template-columns:minmax(0,1fr)}
.np:last-child{border-bottom:0}
.np-img{display:block;line-height:0}
.np-img img{width:100%;height:auto;border:1px solid var(--rule);border-radius:6px;
  background:var(--raised)}
.np-meta{font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);margin:0 0 7px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.np-cat{color:var(--brand-ink);background:#FFF3DC;padding:2px 7px;border-radius:3px;font-weight:700}
.np h3{font-family:var(--display);font-size:17px;line-height:1.32;margin:0 0 8px;font-weight:700}
.np h3 a{color:var(--ink);text-decoration:none}
.np h3 a:hover{color:var(--link);text-decoration:underline}
.np p{font-size:14.5px;line-height:1.68;color:#C4CFE2;margin:0 0 9px;max-width:76ch}
.np-more{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--link)}
/* The image is a 1200px-wide chart. Below about 900px there is no column width
   left to make it legible, so it goes full width above the headline rather than
   shrinking into an unreadable stamp. */
@media (max-width:900px){ .np{grid-template-columns:minmax(0,1fr);gap:12px} }
@media (max-width:560px){
  .news-head,.np{padding-left:14px;padding-right:14px}
  .np p{font-size:14px}
  .np h3{font-size:16px}
}
.foot{padding:18px 22px 30px;font-family:var(--mono);font-size:11px;color:var(--dim);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.foot a{color:var(--muted)}

@media (max-width:1100px){.events{grid-template-columns:repeat(2,1fr)}.hide-md{display:none}}
@media (max-width:720px){
  .nav{display:none}
  /* the box gets its own full-width row under the logo: squeezed between the
     logo and the button it was 27px wide on a phone */
  .bar{flex-wrap:wrap;gap:10px 8px;padding:10px 16px}
  /* smaller buttons, so the logo, Open the board and Sign in share one row at 360px */
  .bar .btn{font-size:11px;padding:7px 9px}
  .bar > .btn{margin-left:auto}
  .search{order:3;flex:1 1 100%;min-width:0;margin-left:0}
  .search input{font-size:16px}
  /* the theme button floats over the right-hand price column: it steps aside while the page scrolls */
  body.fab-away #cs-theme-fab{opacity:0;pointer-events:none}
  #cs-theme-fab{transition:opacity .2s}
  .search kbd{display:none}
  .qr{left:0;right:0;width:auto;max-width:none}
  .events{grid-template-columns:1fr}
  /* each list row is one tap target, 34px tall: the symbol's link covers the row */
  .ev-row{position:relative;padding:7px 0;margin-bottom:0}
  .ev-sym::after{content:"";position:absolute;inset:0}
  .ev-px,.ev-d{font-size:12px}
  .ev-t,.ev-c{font-size:11px}
  .chip,.chip.small{font-size:12px;padding:9px 12px}
  .foot{font-size:12px}
  .hide-sm{display:none}
  table{min-width:620px}
  thead th,tbody td{padding-left:9px;padding-right:9px}
}
/* On a phone the table was still 620px wide inside a 375px scroller, so the
   only columns on screen were the rank, the logo and the name: a price table
   with no prices in it, and nothing telling the reader to swipe. The minute
   columns come off here and the four that answer "what is it and what is it
   doing" fit without scrolling. A long name is truncated rather than allowed
   to push the numbers off the edge. */
@media (max-width:560px){
  .grp,.fast{display:none}
  table{min-width:0;width:100%}
  thead th,tbody td{padding-left:7px;padding-right:7px;font-size:12.5px}
  th.l,td.l{max-width:150px}
  .coin{min-width:0}
  .coin b{display:inline-block;max-width:104px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;vertical-align:bottom}
  .coin small{font-size:11.5px}
  .burst-tag,.snap-tag{display:none}
  /* the link fills the 43px row, not just the 23px logo and name */
  .coin{padding:10px 0;margin:-10px 0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}

/* Sortable headings. The arrow only appears on the column in use: an arrow on
   every heading is noise, and a greyed-out one on eleven of them is worse. */
a.sort-h{color:inherit;text-decoration:none;display:inline-flex;align-items:center;
  gap:4px;white-space:nowrap}
a.sort-h:hover{color:var(--link,#FFC84D)}
th.sorted a.sort-h{color:var(--link,#FFC84D)}
.sort-i{font-size:9px;line-height:1}
thead th:has(a.sort-h){cursor:pointer;user-select:none}
.ev-chain{color:var(--muted);font-size:10.5px;letter-spacing:.04em;
  text-transform:uppercase;font-family:var(--mono)}
.ev-new .ev-t{color:var(--link)}