/* Cade leaderboard v8 (2026-10-06). The shared language and the product parts (hero + stage tabs on the wide stage, the stats
   band, the icon keys, profit colours, the fine print) are the kit /lib/v8/v8.css (README there). This file keeps the
   leaderboard parts: the day stepper, the podium, your rank, the daily titles, the board, and the band's deltas.
   Colour on data only: green for a profit, red for a loss. */

/* ═════ HERO: the trophy on the kit's wide stage (21:9, the board follows close), the tabs on its lower left ═════ */
/* the cup sits in the middle of the art: keep its rim and the hands in the band */
.lbv8 .stage{--aspect-sm:4/3}
.lbv8 .stage-art{--obj:50% 34%;--obj-sm:50% 40%}
.lbv8 .stage-h{top:7cqw;max-width:31cqw;font-size:clamp(30px,7.4cqw,104px)}

/* the kit band: the period | its line + the day | the totals (all paper, no yellow last) */
.band-face{gap:10px 36px}
.band-h{min-width:5.6em}
.band-p{max-width:40ch}
.band-m{grid-area:m;align-self:start;justify-self:start;min-height:44px}
.band-st div:last-child dd{color:var(--paper)}

/* the day stepper: two kit icon keys and the day, plain rectangles with hard shadows */
.step{display:flex;align-items:stretch;gap:8px}
.step-b{transition:none}
.step-b svg{width:16px;height:16px}
@media (hover:hover){.step-b:not(:disabled):hover{transform:none}}
.step-day{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:2px solid var(--line);background:var(--bg1);color:var(--paper);box-shadow:var(--sh-3);font-family:var(--data);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
.step-day svg{width:18px;height:18px;color:var(--yellow)}
.step-day b{font-weight:800;min-width:6ch}
.step-day input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.step-day:focus-within{outline:3px solid var(--orange);outline-offset:3px}

/* ═════ the read notice (unavailable) ═════ */
.notice{margin-top:56px}
.notice[hidden]{display:none}
.notice-face{display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px;padding:30px 44px 32px 40px}
.notice-h{margin:0;font-size:clamp(32px,3.4vw,48px);color:var(--paper)}
.notice-p{flex:1 1 320px;margin:0;font-family:var(--read);font-size:18px;line-height:1.35;color:var(--paper)}
.notice-cta{height:52px;font-size:20px}

/* ═════ THE PODIUM: three torn panels, the champion raised on the cream plate ═════ */
.lbp-sec{padding-top:96px}
.lbp-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;align-items:end}
.lbp[data-rank="2"]{order:1}.lbp[data-rank="1"]{order:2}.lbp[data-rank="3"]{order:3}
.lbp{transition:transform 150ms cubic-bezier(0,0,.2,1),filter 150ms cubic-bezier(0,0,.2,1)}
@media (hover:hover){.lbp:not(.lbp-none):hover{transform:translate(-2px,-2px);filter:drop-shadow(10px 10px 0 var(--shadow))}}
.lbp:has(.lbp-a:focus-visible){outline:3px solid var(--orange);outline-offset:4px}
.lbp-a:focus-visible{outline:none}
.lbp-face{display:flex;flex-direction:column;padding:30px 34px 34px 30px;color:var(--paper)}
.lbp[data-rank="1"] .lbp-face{padding-top:40px;padding-bottom:44px}
.lbp-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.lbp-n{margin:0;font-size:clamp(64px,6vw,96px);line-height:.8}
.lbp[data-rank="1"] .lbp-n{font-size:clamp(80px,7.6vw,124px)}
.lbp-tier{flex:none}
.lbp:not(.cream) .lbp-tier{background:var(--paper)}
.lbp-id{display:flex;align-items:center;gap:12px;margin:22px 0 0;padding-top:18px;border-top:2px solid #34312d;min-width:0;font-family:var(--call);font-weight:500;font-size:clamp(22px,1.9vw,28px);letter-spacing:.04em;text-transform:uppercase;line-height:1}
.cream .lbp-id{border-top-color:var(--ink)}
.lbp-a{color:inherit;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lbp-a::after{content:"";position:absolute;inset:0;z-index:1}
@media (hover:hover){.lbp:hover .lbp-a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}}
.ava{flex:none;display:block;width:36px;height:36px;box-shadow:var(--sh-3);outline:2px solid var(--ink)}
.ava svg{display:block;width:100%;height:100%}
.lbp-pb{margin:22px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.lbp-pb small,.lbp-st dt,.ttl-st small{font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.cream .lbp-pb small,.cream .lbp-st dt{color:#5E594F}
.lbp-st dt{letter-spacing:.06em;white-space:nowrap}
/* the profit as a data plate: green for a profit, red for a loss, paper for even */
.pnlv{display:inline-block;padding:8px 14px 6px;background:var(--paper);color:var(--ink);font-family:var(--data);font-weight:800;font-size:clamp(28px,2.6vw,40px);line-height:1;font-variant-numeric:tabular-nums;box-shadow:var(--sh-4);white-space:nowrap}
.lbp[data-rank="1"] .pnlv{font-size:clamp(34px,3.3vw,52px)}
.pnlv[data-t=up]{background:var(--green)}.pnlv[data-t=down]{background:var(--red);color:#fff}
.cream .pnlv[data-t=flat]{background:var(--ink);color:var(--paper)}
.lbp-st{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;margin:26px 0 0}
.lbp-st div{display:flex;flex-direction:column-reverse;gap:6px;padding:0 0 0 14px}
.lbp-st div:first-child{padding-left:0}
.lbp-st div+div{border-left:2px solid #34312d}
.cream .lbp-st div+div{border-left-color:#C9C1AC}
.lbp-st dd{margin:0;font-family:var(--data);font-weight:800;font-size:clamp(15px,1.3vw,19px);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ═════ DAILY TITLES ═════ */
.ttl-sec{padding-top:96px}
.ttl-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px}
.ttl-face{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;padding:30px 40px 34px 34px}
.ttl-h{margin:16px 0 0;font-size:clamp(40px,4vw,60px);color:var(--paper)}
.ttl-a{color:inherit}
.ttl-a::after{content:"";position:absolute;inset:0;z-index:1}
.ttl:has(.ttl-a:focus-visible){outline:3px solid var(--orange);outline-offset:4px}
.ttl-a:focus-visible{outline:none}
@media (hover:hover){.ttl:has(.ttl-a):hover .ttl-h{color:var(--yellow)}}
.ttl-id{margin:10px 0 0;font-family:var(--data);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ttl-st{flex:none;margin:0;display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-left:28px;border-left:2px solid #34312d}
.ttl-st b{font-family:var(--data);font-weight:800;font-size:clamp(36px,3.6vw,54px);line-height:1;color:var(--yellow);font-variant-numeric:tabular-nums}

/* ═════ THE BOARD: your rank pinned, then the rows ═════ */
.board-sec{padding-top:96px}
.you-pnl{margin-bottom:30px}
.you{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 32px;padding:26px 40px 28px 34px;background:var(--bg3)!important}
.you-rk{margin:0;width:92px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:56px;line-height:.8;color:#4A4640;text-align:center}
.you-h{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;text-transform:uppercase;font-size:clamp(30px,2.6vw,40px);line-height:.9;color:var(--paper)}
.you-p{margin:8px 0 0;font-family:var(--read);font-size:18px;line-height:1.35;color:var(--muted);max-width:52ch}
.you-cta{height:56px;font-size:22px}

.tbl{padding:22px 36px 26px 30px}
.tbl-hd,.row{display:grid;grid-template-columns:92px minmax(0,1.7fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr);align-items:center;gap:16px}
.tbl-hd{padding:8px 16px 14px;border-bottom:2px solid #34312d;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tbl-hd span:nth-child(n+3){text-align:right}
.tbl-rows{list-style:none;margin:0;padding:0}
.row{position:relative;min-height:68px;padding:10px 16px;border-bottom:2px solid #24221F;font-family:var(--data);font-weight:700;font-size:16px;color:var(--paper);font-variant-numeric:tabular-nums;transition:background-color .15s}
.row:last-child{border-bottom:0}
@media (hover:hover){.row:hover{background:#201E1B}.row:hover .r-a{color:var(--yellow)}}
.row:has(.r-a:focus-visible){outline:3px solid var(--orange);outline-offset:-3px}
.r-a:focus-visible{outline:none}
.r-rk{font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;line-height:1;color:var(--paper)}
.r-id{display:flex;align-items:center;gap:14px;min-width:0}
.r-id .ava{width:32px;height:32px}
.r-a{color:var(--paper);font-family:var(--call);font-weight:500;font-size:21px;letter-spacing:.04em;text-transform:uppercase;line-height:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r-a::after{content:"";position:absolute;inset:0;z-index:1}
.r-f{text-align:right;white-space:nowrap}
.r-f small{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.r-st{display:none;font-family:var(--data);font-weight:700;font-size:13px;letter-spacing:.04em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.r-pnl{text-align:right;font-weight:800;font-size:20px;white-space:nowrap}
.row-none{padding:40px 16px;font-family:var(--read);font-size:18px;line-height:1.4;color:var(--muted);text-align:center}
.row-none b{display:block;margin-bottom:6px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:34px;text-transform:uppercase;color:var(--paper)}
.fine{margin-top:44px}

@media (prefers-reduced-motion:reduce){.lbp,.row{transition:none}}

/* ═════ the 1180 / 1023 / 760 / 360 rungs ═════ */
@media (max-width:1180px){
  .band-face{row-gap:12px}
  .band-st{margin-top:14px}
  .lbp-g{gap:26px}
  .lbp-face{padding:26px 24px 28px 22px}
  .lbp-st div{padding:0 0 0 10px}
  .tbl-hd,.row{grid-template-columns:72px minmax(0,1.6fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,1.1fr) minmax(0,1.1fr)}
}
@media (max-width:1023px){
  .lbv8 .stage{--aspect:16/9}
  .lbp-g{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
  .lbp[data-rank="1"]{order:0;grid-column:1/-1}
  .lbp[data-rank="2"],.lbp[data-rank="3"]{order:1}
  .lbp[data-rank="1"] .lbp-face{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"top top" "id id" "pb st";align-items:end;column-gap:40px}
  .lbp[data-rank="1"] .lbp-top{grid-area:top}.lbp[data-rank="1"] .lbp-id{grid-area:id}.lbp[data-rank="1"] .lbp-pb{grid-area:pb}.lbp[data-rank="1"] .lbp-st{grid-area:st;justify-content:end}
  .lbp-face{height:100%}
  .ttl-g{grid-template-columns:1fr;gap:26px}
  .tbl-hd{display:none}
  .row{grid-template-columns:56px minmax(0,1fr) auto;grid-template-areas:"rk id pnl" "rk st st";row-gap:6px;padding:14px 12px}
  .r-rk{grid-area:rk;font-size:26px}
  .r-id{grid-area:id}
  .r-pnl{grid-area:pnl}
  .r-f{display:none}
  .r-st{display:block;grid-area:st}
}
@media (max-width:760px){
  .lbv8 .stage-h{top:7cqw;left:6cqw;max-width:62cqw;font-size:11.6cqw}
  .band-face{gap:14px}
  .band-h{min-width:0}
  .band-st{margin-top:4px}
  .band-st div{padding:0 0 0 12px}
  .notice{margin-top:40px}
  .notice-face{padding:26px 22px 28px}
  .lbp-sec,.ttl-sec,.board-sec{padding-top:64px}
  .lbp-g{grid-template-columns:1fr;gap:28px}
  .lbp[data-rank="1"] .lbp-face{display:flex;align-items:stretch}
  .lbp[data-rank="1"] .lbp-st{justify-content:space-between}
  .lbp-face,.lbp[data-rank="1"] .lbp-face{padding:26px 24px 28px 22px}
  .lbp-n{font-size:64px}.lbp[data-rank="1"] .lbp-n{font-size:84px}
  .lbp-id{margin-top:18px;padding-top:16px}
  .lbp-pb{margin-top:18px}
  .lbp-st{margin-top:22px;grid-template-columns:repeat(3,auto);justify-content:space-between}
  .lbp-st div{padding:0 0 0 12px}
  .pnlv{font-size:30px}.lbp[data-rank="1"] .pnlv{font-size:36px}
  .ttl-face{flex-direction:column;align-items:flex-start;padding:26px 24px 28px 22px}
  .ttl-st{flex-direction:row;align-items:baseline;gap:12px;padding:14px 0 0;border-left:0;border-top:2px solid #34312d;width:100%}
  .ttl-st b{font-size:40px}
  .you{grid-template-columns:1fr;gap:14px;padding:24px 22px 26px}
  .you-rk{display:none}
  .you-p{font-size:17px}
  .you-cta{justify-self:start}
  .tbl{padding:10px 14px 14px 12px}
  .row{grid-template-columns:44px minmax(0,1fr) auto;column-gap:10px;padding:14px 6px}
  .r-rk{font-size:24px}
  .r-a{font-size:18px}
  .r-id{gap:10px}
  .r-id .ava{width:28px;height:28px}
  .r-pnl{font-size:17px}
  .fine{margin-top:32px}
}
@media (max-width:360px){
  .hero-tabs .tab span{font-size:15px}
  .band-st div{padding-left:8px}
  .lbp-st dd{font-size:14px}
  .lbp-st div{padding-left:8px}
  .step-day{padding:0 10px;gap:8px}
  .r-a{font-size:16px}
  .r-pnl{font-size:15px}
}