/* ==========================================================================
   PM Countdown: pages/hub.css
   Markets hub pages: /markets, /markets/crypto, /markets/crypto/btc.
   Classes are hb-. Everything else comes from site.css components
   (.wrap, .section, .card, .grid, .tag, .table-wrap, .crumbs, .empty).
   Never hardcode a light surface here: use the theme tokens.
   ========================================================================== */

/* ---------- live board of desks ---------- */
.hb-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.hb-board--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hb-card{display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow);color:inherit;text-decoration:none}
a.hb-card:hover{border-color:var(--brand);transform:translateY(-1px)}
a.hb-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ a.hb-card:hover{transform:none} }
.hb-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hb-card h3{font:800 24px/1 var(--cond);text-transform:uppercase;letter-spacing:.01em}
.hb-card p{font-size:14.5px;color:var(--ink-2)}
.hb-live{display:inline-flex;align-items:center;gap:6px;font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hb-live i{width:8px;height:8px;border-radius:50%;background:var(--up);display:inline-block}
.hb-num{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px;border-radius:var(--r);background:var(--bg);font-variant-numeric:tabular-nums}
.hb-num div{display:flex;flex-direction:column;gap:4px}
.hb-num small{font:700 10.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.hb-num b{font:800 20px/1 var(--cond)}
.hb-state{font-size:13.5px;color:var(--ink-3)}
.hb-go{font-weight:700;color:var(--brand-ink)}

/* ---------- coin coverage table ---------- */
.hb-table td,.hb-table th{font-variant-numeric:tabular-nums;vertical-align:middle}
.hb-table code{font-size:13px;color:var(--ink-2)}
.hb-yes,.hb-no,.hb-thin{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:13.5px}
.hb-yes{color:var(--up-ink,var(--ink))}
.hb-thin{margin-left:5px}   /* inline-flex eats the leading space, so 'Live (thin)' needs it back */
.hb-no{color:var(--ink-3)}
.hb-asof{font-size:13px;color:var(--ink-3)}

/* ---------- link columns ---------- */
.hb-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.hb-links h3{font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.hb-links li+li{margin-top:9px}
.hb-links a{color:var(--brand-ink);font-weight:600}

@media (max-width:1023px){ .hb-board,.hb-board--3{grid-template-columns:1fr} .hb-links{grid-template-columns:1fr 1fr} }
@media (max-width:639px){ .hb-links{grid-template-columns:1fr} .hb-num{grid-template-columns:1fr 1fr} }