/*
 * Clef Decision Index (css/board.css): /leaderboard. Loaded after css/clef.css and built on its tokens.
 * A quiet page head with the totals, a period filter, the ranked table (cards on phones), the designed empty
 * state on the staff, and the calibration band with the reliability diagram (js/ui/calibration.js styles itself).
 */

/* ------------------------------------------------------------------ page head */

.board-head { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--alabaster), var(--paper) 85%); }
.board-head .eyebrow { margin-bottom: 14px; }
.board-staff { overflow: visible; }
.board-staff .staff-lines path, .empty-staff .staff-lines path { stroke: var(--staff-soft, #fde2bd); stroke-width: 1.5; fill: none; }
.board-staff .staff-note { fill: var(--amber-soft, #fdd7a3); }
.board-staff .staff-spark, .empty-staff .staff-spark { fill: var(--spark, #f8a225); }

.board-totals { display: flex; flex-wrap: wrap; gap: 14px 40px; margin: 30px 0 0; }
.board-totals > div { display: grid; gap: 6px; min-width: 0; }
.board-totals dt { font: 600 11.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.board-totals dd { margin: 0; font: 500 22px/1.15 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--ink); min-height: 25px; }
@media (max-width: 520px) { .board-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .board-totals dd { font-size: 19px; } }

/* ------------------------------------------------------------------ the bar */

.board { padding-block: clamp(28px, 4vw, 44px) clamp(56px, 8vw, 96px); }
.board-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
/* the Clef reference's last 48 hours, one line (js/board.js loadReferenceLine) */
.board-ref { margin: -4px 0 18px; max-width: 760px; }
.board-meta { font: 500 12.5px/1.4 var(--mono); color: var(--muted); min-height: 18px; }
[data-board-root].is-loading .board-table { opacity: .55; transition: opacity .2s var(--ease); }

/* the connected wallet, above the table */
.board-you {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-bottom: 16px; padding: 12px 16px;
  border: 1.5px solid var(--amber); border-radius: var(--r-md); background: var(--cream); font-size: 14px; color: var(--rust);
}
.lb-you-addr { font: 500 14px/1 var(--mono); color: var(--ink); }
.lb-you-stat b { font: 600 14.5px/1 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.lb-you-stat .up b, .lb-you-stat .up { color: var(--good); }
.lb-you-stat .down { color: var(--bad); }
.lb-you-link { margin-left: auto; font-size: 14px; }
@media (max-width: 560px) { .lb-you-link { margin-left: 0; } }

/* ------------------------------------------------------------------ the table */

.board-table { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper); overflow: hidden; }
.lb { font-size: 14.5px; }
.lb thead th { padding: 14px 14px 12px; background: var(--alabaster); vertical-align: bottom; }
.lb tbody td { padding: 13px 14px; }
.lb th.lb-rank, .lb td.lb-rank { width: 56px; padding-left: 20px; text-align: left; font-family: var(--mono); color: var(--muted); }
.lb td.lb-rank { font-weight: 600; font-variant-numeric: tabular-nums; }
.lb .lb-medal { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--cream); border: 1.5px solid var(--amber); color: var(--orange-text, #c93a00); font-size: 12.5px; margin-left: -5px; }
.lb tbody tr { transition: background-color .15s var(--ease); }
.lb tbody tr:hover { background: var(--alabaster); }
.lb tbody tr.is-you { background: var(--cream-2); }
.lb tbody tr.is-you td.lb-rank { box-shadow: inset 3px 0 0 var(--orange); }
.lb td.up, .lb .up { color: var(--good); }
.lb td.down, .lb .down { color: var(--bad); }

.lb-sort { display: inline-flex; align-items: center; gap: 4px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; border-radius: var(--r-xs); }
.lb-sort:hover { color: var(--ink); }
.lb-sort::after { content: ''; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0; transition: opacity .15s var(--ease), transform .2s var(--ease); }
th[aria-sort='descending'] .lb-sort, th[aria-sort='ascending'] .lb-sort { color: var(--ink); }
th[aria-sort='descending'] .lb-sort::after { opacity: .8; }
th[aria-sort='ascending'] .lb-sort::after { opacity: .8; transform: rotate(180deg); }

.lb-who { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.lb-addr { font: 500 14px/1 var(--mono); color: var(--ink); }
.lb-tag { height: 22px; padding: 0 9px; font-size: 12px; }
.lb-tag.is-you { background: var(--orange-text, #c93a00); color: #fff; }
.lb-tag.is-ref { background: var(--concrete); color: var(--body); }

.lb-score { display: inline-grid; gap: 6px; justify-items: end; min-width: 92px; }
.lb-score-v { font: 500 14.5px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); }
.lb-score-bar { display: block; width: 92px; height: 3px; border-radius: 999px; background: var(--sand); overflow: hidden; }
.lb-score-bar > i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: var(--orange); border-radius: inherit; transition: width .6s var(--ease-out); }
.lb tbody tr:not(:first-child) .lb-score-bar > i { background: var(--sand-2); }
.lb tbody tr.is-you .lb-score-bar > i { background: var(--orange); }

.lb-more { display: flex; justify-content: center; padding: 14px; border-top: 1px solid var(--line); }

/* phones: each row becomes a small card. rank | wallet (2 cols) | net, then rounds | staked | mean under the wallet */
@media (max-width: 720px) {
  .board-table { border: 0; border-radius: 0; background: transparent; overflow: visible; }
  .lb thead { display: none; }
  .lb, .lb tbody { display: block; }
  .lb tbody { display: grid; gap: 10px; }
  .lb tbody tr {
    display: grid; grid-template-columns: 30px repeat(3, minmax(0, 1fr)); gap: 12px 10px; align-items: center;
    padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--paper);
  }
  .lb tbody tr:hover { background: var(--paper); }
  .lb tbody tr.is-you { background: var(--cream-2); border-color: var(--amber); }
  .lb tbody td { display: block; padding: 0; border: 0; min-width: 0; }
  .lb td.lb-rank { grid-row: 1; grid-column: 1; width: auto; padding: 0; }
  .lb tbody tr.is-you td.lb-rank { box-shadow: none; }
  .lb td.lb-wallet { grid-row: 1; grid-column: 2 / -1; }
  /* net and skill read as label + value lines under the stats, so a long signed ETH amount never runs past the card */
  .lb td.lb-net { grid-row: 3; grid-column: 2 / -1; display: flex !important; align-items: baseline; gap: 8px; font-weight: 600; font-size: 13.5px; min-width: 0; }
  .lb td.lb-net::before { content: attr(data-label); font: 600 10.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
  .lb td.lb-net > span { overflow-wrap: anywhere; }
  .lb tbody td.num:not(.lb-net) { display: grid; gap: 5px; align-content: start; text-align: left; font-size: 13.5px; grid-row: 2; }
  .lb tbody td.num:not(.lb-net)::before { content: attr(data-label); font: 600 10.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
  .lb tbody tr > td:nth-child(3) { grid-column: 2; }
  .lb tbody tr > td:nth-child(4) { grid-column: 3; }
  .lb tbody tr > td.lb-mean { grid-column: 4; }
  [data-board-root].has-skill .lb tbody tr > td:nth-child(6) { grid-row: 4; grid-column: 2 / -1; display: flex; align-items: baseline; gap: 8px; margin-top: -6px; }
  .lb-score { justify-items: start; min-width: 0; }
  .lb-score-bar { width: 100%; max-width: 72px; }
  .lb .lb-medal { margin-left: -3px; }
  .lb-more { border-top: 0; }
}

/* ------------------------------------------------------------------ the empty state */

.board-empty { position: relative; display: grid; justify-items: center; gap: 12px; padding: clamp(40px, 7vw, 72px) 20px clamp(44px, 7vw, 80px); text-align: center; border: 1px solid var(--line); border-radius: var(--r-lg); background: radial-gradient(120% 90% at 50% 0%, var(--cream) 0%, var(--paper) 60%); }
.empty-staff { width: min(460px, 100%); height: auto; margin-bottom: 10px; overflow: visible; }
.board-empty .empty-title { font: 600 clamp(24px, 3vw, 32px)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.board-empty .empty-text { text-wrap: balance; max-width: 48ch; font-size: 16px; line-height: 1.6; color: var(--body); font-variant-numeric: tabular-nums; min-height: 3.2em; }
.board-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }

/* ------------------------------------------------------------------ calibration */

.board-cal { padding-block: clamp(56px, 8vw, 104px); }
.board-cal-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: clamp(28px, 5vw, 72px); align-items: center; }
.board-cal-text { display: grid; gap: 14px; align-content: start; }
.board-cal-text .lede { max-width: 560px; }
.cal-stats { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 10px 0 4px; }
.cal-stats > div { display: grid; gap: 6px; }
.cal-stats dt { font: 600 11.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.cal-stats dd { margin: 0; font: 500 20px/1.15 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); min-height: 23px; }
.board-cal-chart { min-width: 0; padding: 20px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); }
.board-cal-chart .cal { max-width: none; }
@media (max-width: 900px) { .board-cal-in { grid-template-columns: minmax(0, 1fr); } .board-cal-chart { max-width: 560px; } }
@media (max-width: 520px) { .board-cal-chart { padding: 14px 10px; } }

/* phones, tablets and coarse pointers: tap targets of at least 44 px */
@media (max-width: 820px), (pointer: coarse) {
  .board-bar .seg button { height: 44px; padding: 0 16px; }
  .board-empty .btn, .lb-more .btn { --btn-h: 44px; }
  .lb-you-link { min-height: 44px; }
}

/* ------------------------------------------------------------------ the chain's answers (recent settled rounds) */

.board-answers { padding-block: 0 clamp(56px, 8vw, 96px); }
.ans-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 12px 40px; align-items: end; margin-bottom: 22px; }
.ans-head-text { display: grid; gap: 10px; }
.ans-note { font-size: 14.5px; line-height: 1.6; color: var(--body); }
.ans-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ans-card { display: grid; gap: 14px; min-width: 0; padding: 18px 18px 16px; border: 1.5px solid var(--amber); border-radius: var(--r-md); background: var(--cream); }
.ans-card.is-void { border-color: var(--line-2); background: var(--alabaster); }
.ans-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.ans-round { font: 600 14px/1.2 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.ans-time { font: 500 12.5px/1.3 var(--mono); color: var(--muted); }
.ans-meta { margin: -8px 0 0; font: 500 12.5px/1.4 var(--mono); color: var(--rust); font-variant-numeric: tabular-nums; }
.ans-qblock { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid var(--amber-soft); min-width: 0; }
.ans-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.ans-q .kind { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--amber-soft); color: var(--rust); font: 600 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.ans-q-asset { font: 600 12px/1 var(--mono); color: var(--ink); }
.ans-void { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--body); }
.ans-more { display: flex; justify-content: center; margin-top: 18px; }
@media (max-width: 1080px) { .ans-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .ans-head { grid-template-columns: minmax(0, 1fr); }
  .ans-list { grid-template-columns: minmax(0, 1fr); }
  .ans-more .btn { --btn-h: 44px; }
}

/* ------------------------------------------------------------------ your stats (the connected wallet) */

.board-you.is-prompt { justify-content: space-between; background: var(--alabaster); border: 1px solid var(--line); color: var(--body); }
.board-you.is-stats { display: grid; gap: 14px; padding: 16px 18px; }
.you-prompt { font-size: 14.5px; line-height: 1.5; color: var(--body); min-width: 0; }
.you-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.you-rank { font: 500 13px/1.2 var(--mono); color: var(--rust); font-variant-numeric: tabular-nums; }
.you-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 20px; margin: 0; }
.you-stat { display: grid; gap: 5px; align-content: start; min-width: 0; }
.you-stat dt { font: 600 10.5px/1.2 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.you-stat dd { margin: 0; font: 500 18px/1.15 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink); overflow-wrap: anywhere; }
.you-stat dd .up { color: var(--good); }
.you-stat dd .down { color: var(--bad); }
.you-sub { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
@media (max-width: 1080px) { .you-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .you-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .you-stat dd { font-size: 16px; } }
a.ans-round:hover { color: var(--orange-text); text-decoration: underline; text-underline-offset: 3px; }
.ans-recap { justify-self: start; font-size: 14px; }