/* the competition page (class prefix hc-): site/js/views/rewards.js and site/js/check/security.js. Lane check-pages.
   docs/LANES.md 5.6 (the page) and 3.7 (the width contract under 560 px).
   Colours only through the tokens of styles.css: no colour literal in this file, so the light theme needs no edit
   here. Green and red stand only beside a sign or an arrow: the profit classes .up and .down are set in code,
   with their text. */

/* ---------- the frame ---------- */
.hc-body { gap: 0; }
.hc-title { min-height: 4px; }
.hc-title h1 { margin: 0 0 6px; text-transform: lowercase; }
.hc-backline { margin: 0 0 6px; font-size: 13px; }
.hc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.hc-oneline { margin: 0; color: var(--text); font-weight: 700; }
.hc-warn { color: var(--warn); }
.hc-stale { margin: 0 0 16px; }
.hc-note { display: block; }
.hc-list { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.hc-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.hc-go { min-width: 0; }

/* ---------- 1: the banner ---------- */
.hc-banner { border-color: var(--line-2); }
.hc-state { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.hc-daynum { color: var(--brand-hi); text-transform: lowercase; }
.hc-clockline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0; }
.hc-clock { color: var(--text); font-size: clamp(26px, 8vw, 40px); font-weight: 700; line-height: 1; }

/* ---------- 2: today's pot and the visitor's own row ---------- */
.hc-potnum { margin: 0 0 6px; color: var(--brand-hi); font-size: clamp(30px, 9vw, 46px); font-weight: 700; line-height: 1.05; }
.hc-potnone { margin: 0 0 6px; color: var(--text); font-size: 17px; font-weight: 700; }
.hc-me { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-3); font-size: 13.5px; }
.hc-meline { color: var(--text); }
.hc-carry { flex: 1 1 100%; color: var(--warn); }
.hc-medays { display: flex; flex: 1 1 100%; flex-wrap: wrap; gap: 6px; }
.hc-meday { display: inline-flex; flex-wrap: wrap; gap: 4px 8px; padding: 3px 8px; border: 1px solid var(--line-2); border-radius: 8px; font-size: 12.5px; }

/* ---------- 3: the schedule (and the facts of one day) ---------- */
.hc-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 14px; margin: 0; }
.hc-dl dt { color: var(--muted); font: 700 11px/1.4 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.hc-dl dd { margin: 0 0 8px; color: var(--text); overflow-wrap: anywhere; }

/* ---------- 4: how to take part ---------- */
.hc-steplist { display: grid; gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; counter-reset: hc; }
.hc-steplist li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 2px 10px; counter-increment: hc; }
.hc-steplist li::before { content: counter(hc); grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-hi); font: 700 12px/1 var(--font-mono); }
.hc-steplist b { color: var(--text); text-transform: lowercase; }
.hc-steplist span { grid-column: 2; color: var(--muted); font-size: 14px; }
.hc-free { margin: 0 0 10px; color: var(--text); font-weight: 700; }

/* ---------- 5: the rule cards and the fair-play numbers ---------- */
.hc-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 0 12px; }
.hc-card { min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--brand); border-radius: 8px; background: var(--bg-3); }
.hc-card h3 { margin: 0 0 4px; text-transform: lowercase; }
.hc-card p { margin: 0; color: var(--muted); font-size: 14px; }
.hc-more summary { cursor: pointer; color: var(--brand-text); font: 700 13px/1.4 var(--font-ui); }
.hc-more summary:hover { color: var(--brand-hi); }
.hc-fair { display: grid; gap: 6px; margin: 10px 0 0; padding: 0 0 0 18px; color: var(--muted); font-size: 14px; }

/* ---------- 6: the board ---------- */
.hc-plist, .hc-lb { display: grid; min-width: 0; }
.hc-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-width: 0; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.hc-prow:last-child { border-bottom: 0; }
.hc-who { display: inline-flex; flex: 1 1 130px; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.hc-rank { color: var(--brand-hi); font-weight: 700; }
.hc-pnl { font-weight: 700; }
.hc-lhead, .hc-lmain { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)) 64px; align-items: center; gap: 8px; min-width: 0; }
.hc-noearn .hc-lhead, .hc-noearn .hc-lmain { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)) 64px; }
.hc-lhead { padding: 0 2px 7px; border-bottom: 1px solid var(--line-2); color: var(--muted); font: 600 11px/1.2 var(--font-ui); letter-spacing: 0.04em; text-transform: uppercase; }
.hc-lrow { min-width: 0; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.hc-lrow:last-child { border-bottom: 0; }
.hc-mine { background: var(--brand-soft); }
.hc-c { min-width: 0; font-size: 13.5px; text-align: right; overflow-wrap: anywhere; }
.hc-c-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; text-align: left; }
.hc-pending { margin: 4px 0 0; }
.hc-lmore { margin: 6px 0 0; font-size: 12.5px; }
.hc-lmore summary { cursor: pointer; color: var(--muted); }
.hc-lextra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 0 0; }
.hc-lextra > span { display: inline-flex; gap: 6px; }

/* ---------- 7, 10 and the day page: tables ---------- */
/* the width contract: a table that is wider than a phone scrolls inside this box, never the page */
.hc-scroll { overflow-x: auto; min-width: 0; max-width: 100%; }
.hc-tbl { min-width: 520px; }
.hc-tbl td { overflow-wrap: anywhere; }
.hc-settling { margin: 0 0 10px; color: var(--brand-hi); font-weight: 700; }
.hc-uncredited { margin: 0 0 12px; }
.hc-out td { opacity: 0.6; }
.hc-flags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.hc-hash { overflow-wrap: anywhere; font-size: 12px; }

/* ---------- 9: how a share is worked out ---------- */
.hc-formula { margin: 0 0 6px; color: var(--text); font: 600 13.5px/1.5 var(--font-mono); overflow-wrap: anywhere; }

/* ---------- the Security page's section ---------- */
.hc-sec h2 { text-transform: lowercase; }
.hc-sec p { color: var(--muted); }

@media (min-width: 640px) {
  .hc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hc-dl { grid-template-columns: minmax(120px, 0.4fr) minmax(0, 1fr); }
  .hc-dl dd { margin: 0 0 4px; }
}

/* ---------- the width contract of the leaderboard (docs/LANES.md 3.7) ----------
   under 560 px a row is three columns: wallet, PnL, earned. volume, today and the last trade are in the row's
   expander (.hc-narrow), which a wide screen does not draw. */
@media (max-width: 559px) {
  .hc-wide { display: none; }
  .hc-lhead, .hc-lmain { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); }
  .hc-noearn .hc-lhead, .hc-noearn .hc-lmain { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
@media (min-width: 560px) {
  .hc-narrow { display: none; }
}