/* bulldial.com — the prices page.
 *
 * Layered on bd.css. This page used to be a separate light-mode design
 * with its own tokens; it now shares the system, and what remains here
 * is only what a market table needs and nothing else does.
 *
 * The table is one DOM in every size. Columns are dropped by media
 * query rather than by re-rendering, so a rotation never rebuilds a
 * list that is polling every five seconds.
 */

/* ══════════════════════════════════════════════════════ stats strip ═══ */

.stats {
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.stats-inner {
  max-width: var(--wide); margin: 0 auto;
  padding: 8px max(var(--sp-5), var(--safe-l));
  display: flex; align-items: center; gap: var(--sp-5);
  font-size: var(--t-xs); color: var(--ink-3);
  overflow-x: auto; white-space: nowrap; scrollbar-width: none;
}
.stats-inner::-webkit-scrollbar { display: none; }
.stats-inner b { color: var(--ink); font-weight: 650; }
.stats-inner em { font-style: normal; font-weight: 600; }
.stats-inner em.up { color: var(--up); }
.stats-inner em.down { color: var(--down); }
.stats-dial { margin-left: auto; padding-left: var(--sp-5); }
.stats-dial b { color: var(--accent); }
@media (max-width: 900px) {
  .stats-inner { padding-inline: var(--sp-4); gap: var(--sp-4); }
  .stats-dial { margin-left: 0; padding-left: 0; }
}

/* ══════════════════════════════════════════════════════════ page head ═══ */

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
h1 { font-size: var(--t-h1); font-weight: 700; letter-spacing: -0.03em; }
.lede { color: var(--ink-2); font-size: var(--t-sm); margin-top: 6px; max-width: 68ch; }

.feed-status {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
  padding: 6px 12px; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--line);
}
@media (max-width: 700px) { .page-head { flex-direction: column; align-items: flex-start; } }

/* ══════════════════════════════════════════════════════════ highlights ═══ */

.highlights {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3); margin-bottom: var(--sp-5);
}
@media (max-width: 1080px) { .highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  /* Four cards stacked is four screens of scroll before the table. They
     become one swipeable row instead. */
  .highlights {
    grid-template-columns: none; grid-auto-flow: column;
    grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none; margin-inline: calc(var(--sp-4) * -1);
    padding-inline: var(--sp-4);
  }
  .highlights::-webkit-scrollbar { display: none; }
  .highlights > .card { scroll-snap-align: start; }
}

.minis { display: flex; flex-direction: column; }
.mini {
  display: flex; align-items: center; gap: 9px; padding: 7px 0;
  min-height: 40px;
}
.mini + .mini { border-top: 1px solid var(--line); }
.mini .mn { font-weight: 600; font-size: var(--t-sm); }
.mini .mt { color: var(--ink-3); font-size: var(--t-label); margin-left: 5px; font-weight: 600; }
.mini .mc { margin-left: auto; font-size: var(--t-xs); font-weight: 650; }

/* The mini-row avatar carries a coloured ground so a missing logo still
   reads as a coin rather than as a hole. */
.ava {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: none;
}
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ava .glyph { font-size: 11px; font-weight: 700; color: #fff; text-transform: uppercase; }

.dial-card { background: linear-gradient(165deg, var(--accent-sunk), transparent 70%); }
.dial-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 10px; }
.dial-score { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.dial-meter { margin-bottom: 6px; }
.dial-scale {
  display: flex; justify-content: space-between;
  font-size: var(--t-label); color: var(--ink-3); margin-bottom: 8px;
}
.dial-note { font-size: var(--t-xs); color: var(--ink-2); }

/* ═════════════════════════════════════════════════════════════ toolbar ═══ */

.toolbar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  position: sticky; top: calc(var(--bar-h) + var(--safe-t)); z-index: 15;
  background: var(--bg); padding: var(--sp-2) 0;
}

/* ═══════════════════════════════════════════════════════════════ table ═══ */

/* A sticky <thead> positions against its nearest scroll container, and
   both `overflow: hidden` and `overflow-x: auto` create one — which
   parked the header 50px down inside the box and hid the first row
   behind it. `overflow: clip` rounds the corners without becoming a
   scroll container, so the header sticks to the viewport as intended.
   The table has no horizontal scroller at all: columns are dropped by
   media query instead, and the narrowest set (coin, price, 24h) fits a
   320px screen. */
.tablewrap { overflow: clip; }
.tablewrap .scroller { overflow: visible; }

.mkt { font-size: var(--t-sm); }
.mkt thead th { top: calc(var(--bar-h) + var(--safe-t) + 50px); }
.mkt tbody tr { cursor: pointer; }

/* Sortable headers. The caret is drawn only on the sorted column: an
   idle caret on every header is eight arrows pointing at nothing. */
.mkt thead th.sortable {
  cursor: pointer; user-select: none;
  transition: color var(--d-1) var(--smooth);
}
.mkt thead th.sortable:hover { color: var(--ink); }
.mkt thead th.sorted { color: var(--ink); }
.mkt thead th.sorted::after {
  content: "▾"; margin-left: 5px; font-size: .8em; color: var(--accent);
  display: inline-block;
}
.mkt thead th.sorted[data-dir="asc"]::after { content: "▴"; }
.mkt tbody td { padding: 12px 12px; }

/* Columns are addressed by position, not by class: the body cells are
   built in markets.js with their own class names, so a rule written
   against a header class would hide the <th> and leave its <td>s in
   place — eleven body columns under eight headers, which misaligns the
   whole table. nth-child hits both halves of a column.

   The table is laid out fixed at every width. Auto layout sizes each
   column to its widest cell, which overflowed the wrapper at 1024px and
   made columns jump every time a price gained a digit; and because the
   wrapper is clipped rather than scrollable (so the sticky header works
   against the viewport), overflow there is unreachable, not just untidy.
   Fixed layout also scales the declared widths down proportionally when
   they exceed the container, so no width can ever overflow. The name
   column takes what is left and truncates. */
.mkt { table-layout: fixed; }
.mkt th, .mkt td { overflow: hidden; text-overflow: ellipsis; }

.mkt th:nth-child(1),  .mkt td:nth-child(1)  { width: 40px; padding-inline: 6px; }
.mkt th:nth-child(2),  .mkt td:nth-child(2)  { width: 52px; color: var(--ink-3); }
.mkt th:nth-child(3),  .mkt td:nth-child(3)  { width: auto; }
.mkt th:nth-child(4),  .mkt td:nth-child(4)  { width: 124px; }
.mkt th:nth-child(5),  .mkt td:nth-child(5)  { width: 96px; }
.mkt th:nth-child(6),  .mkt td:nth-child(6)  { width: 96px; }
.mkt th:nth-child(7),  .mkt td:nth-child(7)  { width: 96px; }
.mkt th:nth-child(8),  .mkt td:nth-child(8)  { width: 112px; }
.mkt th:nth-child(9),  .mkt td:nth-child(9)  { width: 120px; }
.mkt th:nth-child(10), .mkt td:nth-child(10) { width: 148px; }
.mkt th:nth-child(11), .mkt td:nth-child(11) { width: 140px; }

.star {
  color: var(--ink-3); font-size: 15px; line-height: 1; padding: 3px;
  border-radius: var(--r-1);
  transition: color var(--d-1) var(--smooth), transform var(--d-1) var(--spring);
}
.star:hover { color: var(--warn); }
.star:active { transform: scale(.8); }
.star.on { color: var(--warn); }

.mkt th:nth-child(3), .mkt td:nth-child(3) { max-width: 30ch; }
.coin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.coin > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin .cn { font-weight: 620; }
.coin .ct { color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; margin-left: 6px; text-transform: uppercase; }

.price { font-weight: 650; }
/* A change is at most "▼ 100.00%": eight characters, and the triangle is
   the widest of them. It is set smaller and tucked in so the whole value
   fits its column rather than truncating to "▲ 23.60…", which reads as a
   different number. */
.pct { font-weight: 620; letter-spacing: -0.01em; }
.pct::first-letter { font-size: .78em; }
.pct.dash, .dash { color: var(--ink-3); font-weight: 400; }
.subline { display: block; font-size: var(--t-label); color: var(--ink-3); font-weight: 400; margin-top: 2px; }

.spark { width: 100%; max-width: 120px; height: 36px; display: block; margin-left: auto; }
.spark .line { fill: none; stroke: var(--ink-3); stroke-width: 1.6; }
.spark .fill { fill: currentColor; opacity: .09; }
.spark.up   { color: var(--up); }
.spark.up .line { stroke: var(--up); }
.spark.down { color: var(--down); }
.spark.down .line { stroke: var(--down); }

.load-more { margin-top: var(--sp-4); }

/* -- responsive columns -------------------------------------------------
   Dropped in the order a reader stops needing them, not right to left.
   1 star · 2 rank · 3 name · 4 price · 5 1h · 6 24h · 7 7d · 8 cap ·
   9 volume · 10 supply · 11 chart. */

@media (max-width: 1200px) { .mkt th:nth-child(10), .mkt td:nth-child(10) { display: none; } }
@media (max-width: 1040px) { .mkt th:nth-child(5),  .mkt td:nth-child(5)  { display: none; } }
@media (max-width: 900px)  { .mkt th:nth-child(11), .mkt td:nth-child(11) { display: none; } }
@media (max-width: 780px)  { .mkt th:nth-child(9),  .mkt td:nth-child(9)  { display: none; } }
@media (max-width: 680px)  {
  .mkt th:nth-child(2), .mkt td:nth-child(2),
  .mkt th:nth-child(7), .mkt td:nth-child(7),
  .mkt th:nth-child(8), .mkt td:nth-child(8) { display: none; }
  /* What is left is coin · price · 24h. The ticker moves under the name
     rather than beside it to buy that width. */
  .mkt tbody td, .mkt thead th { padding: 12px 8px; }
  .coin .ct { display: block; margin-left: 0; margin-top: 1px; }
}

/* Narrow: less padding and a tighter price column, so the name keeps as
   much of the row as it can. */
@media (max-width: 900px) {
  .mkt th:nth-child(1), .mkt td:nth-child(1) { width: 34px; }
  .mkt th:nth-child(2), .mkt td:nth-child(2) { width: 44px; }
  .mkt th:nth-child(4), .mkt td:nth-child(4) { width: 116px; }
  .coin .cn { display: block; overflow: hidden; text-overflow: ellipsis; }
}

/* -- skeleton rows ------------------------------------------------------ */

.sk-row td { padding: 12px !important; }
.sk-row .sk { height: 13px; }
.sk-row .sk.circle { width: 26px; height: 26px; border-radius: 50%; }
.sk-cell { display: flex; align-items: center; gap: 10px; }

/* ══════════════════════════════════════════════════════════ coin sheet ═══ */

.coin-sheet-head { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.coin-sheet-head .ava { width: 40px; height: 40px; }
.coin-sheet-head h3 { font-size: var(--t-h2); font-weight: 700; letter-spacing: -0.02em; }
.coin-sheet-head .sym { color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; }
.coin-sheet-price { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.coin-sheet-price .p { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.035em; }
.coin-sheet-chart svg { width: 100%; height: 96px; display: block; }
.coin-sheet-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-2); overflow: hidden; margin-top: var(--sp-4);
}
.coin-sheet-grid div { background: var(--surface); padding: 10px 12px; }
.coin-sheet-grid dt {
  font-size: var(--t-label); font-weight: 600; letter-spacing: var(--track);
  text-transform: uppercase; color: var(--ink-3);
}
.coin-sheet-grid dd { margin-top: 3px; font-size: var(--t-sm); font-weight: 650; }